diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 9ff3f869..bb46a256 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -4,8 +4,8 @@ enableRobotsTXT = true # this example loads the theme as hugo module # comment out line below, and uncomment the line after it if you prefer to load the theme normally # theme = ["github.com/onweru/compose"] # edit this if you'ld rather use a fork of this repo -theme = ["github.com/rwstorer/hugo-theme-compose"] # change back to onweru after import -# theme = "compose" +# theme = ["github.com/rwstorer/hugo-theme-compose"] # change back to onweru after import +theme = "compose" enableGitInfo = true # disableKinds = ["taxonomy", "taxonomyTerm"] diff --git a/exampleSite/content/docs/compose/_index.md b/exampleSite/content/docs/compose/_index.md index 7d837d04..5d18f7df 100644 --- a/exampleSite/content/docs/compose/_index.md +++ b/exampleSite/content/docs/compose/_index.md @@ -6,3 +6,6 @@ weight: 1 Welcome to the Compose theme user guide! This guide shows you how to get started creating technical documentation sites using Compose, including site customization and how to use Compose's blocks and templates. {{< button "./install-theme/" "Get started now" >}} + + +{{< liteyoutube "Ln1mlocoGww" "scribble.jpg" >}} diff --git a/exampleSite/go.mod b/exampleSite/go.mod index e395a91e..36bf7859 100644 --- a/exampleSite/go.mod +++ b/exampleSite/go.mod @@ -2,4 +2,7 @@ module compose-exampleSite go 1.15 -require github.com/onweru/compose v0.0.0-20230530114506-a2ddf2b32939 // indirect +require ( + github.com/onweru/compose v0.0.0-20230530114506-a2ddf2b32939 // indirect + github.com/rwstorer/hugo-theme-compose v0.0.0-20230705005233-e37ac6973101 // indirect +) diff --git a/exampleSite/go.sum b/exampleSite/go.sum index 7d77a62e..aaf01f7a 100644 --- a/exampleSite/go.sum +++ b/exampleSite/go.sum @@ -62,3 +62,5 @@ github.com/rwstorer/hugo-theme-compose v0.0.0-20230611042716-1ae2e3d6a2af h1:XV6 github.com/rwstorer/hugo-theme-compose v0.0.0-20230611042716-1ae2e3d6a2af/go.mod h1:7TS3BoBV/IcLPRT2r7LyTyOqzsS5P5sXKlNpGgxdK/s= github.com/rwstorer/hugo-theme-compose v0.0.0-20230611043851-fa22efc00a50 h1:aAO6ExmIP513PY1Eny9ROAHMsKy2mcgH2j4Sd+gyJNU= github.com/rwstorer/hugo-theme-compose v0.0.0-20230611043851-fa22efc00a50/go.mod h1:7TS3BoBV/IcLPRT2r7LyTyOqzsS5P5sXKlNpGgxdK/s= +github.com/rwstorer/hugo-theme-compose v0.0.0-20230705005233-e37ac6973101 h1:LdUnwLgzORSs86EpkgioaHoSCNOLVZpqBBBiNECa7Ts= +github.com/rwstorer/hugo-theme-compose v0.0.0-20230705005233-e37ac6973101/go.mod h1:7TS3BoBV/IcLPRT2r7LyTyOqzsS5P5sXKlNpGgxdK/s= diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 05580c0c..395c1390 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -5,7 +5,7 @@ data-mode="{{ . }}" {{ end }}> - {{- partial "head" . }} + {{- partial "head/index" . }}
diff --git a/layouts/partials/head.html b/layouts/partials/head/index.html similarity index 58% rename from layouts/partials/head.html rename to layouts/partials/head/index.html index 55301c63..a9f11462 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head/index.html @@ -1,17 +1,3 @@ -{{ $includeLiteYT := false }} -{{ if .IsNode }} - {{ range .Pages }} - {{ range .Pages }} - {{ $rawsummary := split .RawContent "" }} - {{ if (findRE "{{< liteyoutube" (index $rawsummary 0)) }} - {{ $includeLiteYT = true }} - {{ end }} - {{ end }} - {{ end }} -{{ end }} -{{ if (.HasShortcode "liteyoutube") }} - {{ $includeLiteYT = true }} -{{ end }} {{- hugo.Generator }} @@ -23,11 +9,6 @@ -{{ if $includeLiteYT }} - - - -{{ end }} {{- $t := .Title }} {{- $s := site.Title }} {{- if in (lower $s) (lower $t) }} @@ -59,4 +40,5 @@ {{ else if $sp.Description }} {{ end }} +{{- partial "head/liteyoutube" . }} {{- partialCached "hooks/head" . }} diff --git a/layouts/partials/head/liteyoutube.html b/layouts/partials/head/liteyoutube.html new file mode 100644 index 00000000..59a006d5 --- /dev/null +++ b/layouts/partials/head/liteyoutube.html @@ -0,0 +1,24 @@ +{{ $baseurl := absURL "" }} +{{ $includeLiteYT := false }} + +{{ if .IsNode }} + {{ range .Pages }} + {{ range .Pages }} + + {{ $rawsummary := split .RawContent "" }} + + {{ if (findRE "liteyoutube" (index $rawsummary 0)) }} + {{ $includeLiteYT = true }} + {{ end }} + {{ end }} + {{ end }} +{{ end }} +{{ if (.HasShortcode "liteyoutube") }} + {{ $includeLiteYT = true }} +{{ end }} +{{ if $includeLiteYT }} + {{ $styles := printf "%s/css/lite-yt-embed.css" $baseurl }} + {{ $scripts := printf "%s/js/lite-yt-embed.js" $baseurl }} + + +{{ end }} \ No newline at end of file diff --git a/layouts/shortcodes/liteyoutube.html b/layouts/shortcodes/liteyoutube.html index c9e57998..eadcd077 100644 --- a/layouts/shortcodes/liteyoutube.html +++ b/layouts/shortcodes/liteyoutube.html @@ -1,23 +1,16 @@ -{{ if .IsNamedParams }} - {{ $videoid := .Get "videoid" }} - {{ $img := .Get "img" }} +
+ {{- $videoid := .Get 0 -}} + {{- $img := .Get 1 -}} + {{- $params := .Get 2 -}} {{ $bkImg := "" }} - {{ $params := .Get "params" }} - {{ with $img }} - {{ $bkImg := absURL (printf "images/%s" .) }} - - {{ else }} - + {{ if .IsNamedParams }} + {{ $videoid = .Get "videoid" }} + {{ $img = .Get "img" }} + {{ $bkImg = "" }} + {{ $params = .Get "params" }} {{ end }} -{{ else }} - {{- $videoid := .Get 0 -}} - {{- $img := .Get 1 -}} - {{- $params := .Get 2 -}} - {{ $bkImg := "" }} {{ with $img }} {{ $bkImg := absURL (printf "images/%s" .) }} - - {{ else }} - {{ end }} -{{ end }} + +
diff --git a/static/css/lite-yt-embed.css b/static/css/lite-yt-embed.css index 302444b4..9995e272 100644 --- a/static/css/lite-yt-embed.css +++ b/static/css/lite-yt-embed.css @@ -1,89 +1,86 @@ /* Originally obtained from Paul Irish https://github.com/paulirish/lite-youtube-embed */ lite-youtube { - background-color: #000; - position: relative; - display: block; - contain: content; - background-position: center center; - background-size: cover; - cursor: pointer; - max-width: 720px; - margin-left: auto; - margin-right: auto; + background-color: #000; + position: relative; + display: block; + contain: content; + background-position: center; + background-size: cover; + cursor: pointer; } /* gradient */ lite-youtube::before { - content: ''; - display: block; - position: absolute; - top: 0; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==); - background-position: top; - background-repeat: repeat-x; - height: 60px; - padding-bottom: 50px; - width: 100%; - transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); + content: ''; + display: block; + position: absolute; + top: 0; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==); + background-position: top; + background-repeat: repeat-x; + height: 60px; + padding-bottom: 50px; + width: 100%; + transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); } /* responsive iframe with a 16:9 aspect ratio - thanks https://css-tricks.com/responsive-iframes/ +thanks https://css-tricks.com/responsive-iframes/ */ lite-youtube::after { - content: ""; - display: block; - padding-bottom: calc(100% / (16 / 9)); + content: ""; + display: block; + padding-bottom: calc(100% / (16 / 9)); } lite-youtube > iframe { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - border: 0; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + border: 0; } /* play button */ lite-youtube > .lty-playbtn { - display: block; - width: 68px; - height: 48px; - position: absolute; - cursor: pointer; - transform: translate3d(-50%, -50%, 0); - top: 50%; - left: 50%; - z-index: 1; - background-color: transparent; - /* YT's actual play button svg */ - background-image: url('data:image/svg+xml;utf8,'); - filter: grayscale(100%); - transition: filter .1s cubic-bezier(0, 0, 0.2, 1); - border: none; + display: block; + width: 68px; + height: 48px; + position: absolute; + cursor: pointer; + transform: translate3d(-50%, -50%, 0); + top: 50%; + left: 50%; + z-index: 1; + background-color: transparent; + /* YT's actual play button svg */ + background-image: url('data:image/svg+xml;utf8,'); + filter: grayscale(100%); + transition: filter .1s cubic-bezier(0, 0, 0.2, 1); + border: none; } lite-youtube:hover > .lty-playbtn, lite-youtube .lty-playbtn:focus { - filter: none; + filter: none; } /* Post-click styles */ lite-youtube.lyt-activated { - cursor: unset; + cursor: unset; } lite-youtube.lyt-activated::before, lite-youtube.lyt-activated > .lty-playbtn { - opacity: 0; - pointer-events: none; + opacity: 0; + pointer-events: none; } .lyt-visually-hidden { - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; - } + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +}