mirror of https://github.com/onweru/compose.git
| exampleSite/config.toml | ●●●●● patch | view | raw | blame | history | |
| exampleSite/content/docs/compose/_index.md | ●●●●● patch | view | raw | blame | history | |
| exampleSite/go.mod | ●●●●● patch | view | raw | blame | history | |
| exampleSite/go.sum | ●●●●● patch | view | raw | blame | history | |
| layouts/_default/baseof.html | ●●●●● patch | view | raw | blame | history | |
| layouts/partials/head.html | ●●●●● patch | view | raw | blame | history | |
| layouts/partials/head/index.html | ●●●●● patch | view | raw | blame | history | |
| layouts/partials/head/liteyoutube.html | ●●●●● patch | view | raw | blame | history | |
| layouts/shortcodes/liteyoutube.html | ●●●●● patch | view | raw | blame | history | |
| static/css/lite-yt-embed.css | ●●●●● patch | view | raw | blame | history |
exampleSite/config.toml
@@ -4,8 +4,8 @@ # 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"] exampleSite/content/docs/compose/_index.md
@@ -6,3 +6,6 @@ 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" >}} exampleSite/go.mod
@@ -2,4 +2,7 @@ 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 ) exampleSite/go.sum
@@ -62,3 +62,5 @@ 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= layouts/_default/baseof.html
@@ -5,7 +5,7 @@ data-mode="{{ . }}" {{ end }}> <head> {{- partial "head" . }} {{- partial "head/index" . }} </head> <body class="page-{{ .Kind }}" id="pagetop"> <header class="nav_header"> layouts/partials/head.html
File was deleted layouts/partials/head/index.html
New file @@ -0,0 +1,44 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> {{- hugo.Generator }} {{- $iconsPath := "favicons/" }} <link rel="apple-touch-icon" sizes="180x180" href='{{ absURL (printf "%sapple-touch-icon.png" $iconsPath) }}'> <link rel="icon" type="image/png" sizes="32x32" href='{{ absURL (printf "%sfavicon-32x32.png" $iconsPath) }}'> <link rel="icon" type="image/png" sizes="16x16" href='{{ absURL (printf "%sfavicon-16x16.png" $iconsPath) }}'> <link rel="manifest" href='{{ absURL (printf "%ssite.webmanifest" $iconsPath) }}'> <link rel="mask-icon" href='{{ absURL (printf "%ssafari-pinned-tab.svg" $iconsPath) }}' color="#004750"> <link rel="shortcut icon" href='{{ absURL (printf "%sfavicon.ico" $iconsPath) }}'> <meta name="msapplication-config" content='{{ absURL (printf "%sbrowserconfig.xml" $iconsPath) }}'> {{- $t := .Title }} {{- $s := site.Title }} {{- if in (lower $s) (lower $t) }} {{- $t = false }} {{- end }} <title>{{ if and $t (ne (trim (lower $s) "") (trim (lower $t) "")) }}{{ $t }} | {{ end }}{{ $s }}</title> {{- partial "opengraph" . }} {{- $options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed" "enableSourceMap" "true") -}} {{- $styles := resources.Get "sass/main.sass" | resources.ExecuteAsTemplate "main.sass" . | resources.ToCSS $options | resources.Fingerprint "sha512" }} <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}"> {{- $sp := site.Params }} {{- with $sp.customCSS }} {{- range . -}} <link rel="stylesheet" href="{{ . }}"> {{- end }} {{- end }} {{ with $sp.metaThemeColor }} <meta name="theme-color" content="{{.}}"> {{ end }} {{ if .Description }} <meta name="description" content="{{ .Description }}"> {{ else if .IsPage }} <meta name="description" content="{{ .Summary | plainify }}"> {{ else if $sp.Description }} <meta name="descripion" content="{{ $sp.Description }}"> {{ end }} {{- partial "head/liteyoutube" . }} {{- partialCached "hooks/head" . }} layouts/partials/head/liteyoutube.html
New file @@ -0,0 +1,24 @@ {{ $baseurl := absURL "" }} {{ $includeLiteYT := false }} <!-- begin search for liteyoutube shortcode. code borrowed from erichc Nov 2020 https://discourse.gohugo.io/t/automagically-loading-suitable-scripts-in-head/29429/8 --> {{ if .IsNode }} {{ range .Pages }} {{ range .Pages }} <!-- another recursion because of the "/posts/xyz" structure; does work with category lists --> {{ $rawsummary := split .RawContent "<!--more-->" }} <!-- prepare for checking only the part of the article that will show up on the list page --> {{ 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 }} <link rel="stylesheet" href={{ $styles }}> <script src={{ $scripts }}></script> {{ end }} layouts/shortcodes/liteyoutube.html
@@ -1,23 +1,16 @@ {{ if .IsNamedParams }} {{ $videoid := .Get "videoid" }} <!-- required. --> {{ $img := .Get "img" }} <!-- not required. The initial background image instead of a generated one. --> <div class="video"> {{- $videoid := .Get 0 -}} {{- $img := .Get 1 -}} {{- $params := .Get 2 -}} {{ $bkImg := "" }} {{ $params := .Get "params" }} <!-- not required. List of params here: https://developers.google.com/youtube/player_parameters --> {{ if .IsNamedParams }} {{ $videoid = .Get "videoid" }} {{ $img = .Get "img" }} {{ $bkImg = "" }} {{ $params = .Get "params" }} {{ end }} {{ with $img }} {{ $bkImg := absURL (printf "images/%s" .) }} <lite-youtube videoid="{{$videoid}}"{{ with $bkImg }} style="background-image: url('{{ . }}')"{{ end }}{{ with $params }} params="{{ . }}"{{ end }}></lite-youtube> {{ else }} <lite-youtube videoid="{{$videoid}}"{{ with $params }} params="{{ . }}"{{ end }}></lite-youtube> {{ end }} {{ else }} {{- $videoid := .Get 0 -}} <!-- required. --> {{- $img := .Get 1 -}} <!-- not required. The initial background image instead of a generated one. --> {{- $params := .Get 2 -}} <!-- not required. List of params here: https://developers.google.com/youtube/player_parameters --> {{ $bkImg := "" }} {{ with $img }} {{ $bkImg := absURL (printf "images/%s" .) }} <lite-youtube videoid="{{$videoid}}"{{ with $bkImg }} style="background-image: url('{{ . }}')"{{ end }}{{ with $params }} params="{{ . }}"{{ end }}></lite-youtube> {{ else }} <lite-youtube videoid="{{$videoid}}"{{ with $params }} params="{{ . }}"{{ end }}></lite-youtube> {{ end }} {{ end }} <lite-youtube videoid="{{ $videoid }}"{{ with $bkImg }} style="background-image: url({{ . }})"{{ end }}{{ with $params }} params="{{ . }}"{{ end }}></lite-youtube> </div> 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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>'); 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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>'); 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; }
