From d3a7367083e3382ba9898b03dffa2d9b17cff44d Mon Sep 17 00:00:00 2001
From: weru <fromweru@gmail.com>
Date: Sun, 09 Jul 2023 16:04:04 +0000
Subject: [PATCH] patch #114
---
exampleSite/config.toml | 4
layouts/_default/baseof.html | 2
/dev/null | 62 ------------
layouts/shortcodes/liteyoutube.html | 31 ++---
exampleSite/go.mod | 5
layouts/partials/head/index.html | 44 ++++++++
layouts/partials/head/liteyoutube.html | 24 ++++
exampleSite/go.sum | 2
static/css/lite-yt-embed.css | 113 +++++++++++-----------
exampleSite/content/docs/compose/_index.md | 3
10 files changed, 147 insertions(+), 143 deletions(-)
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 9ff3f86..bb46a25 100644
--- a/exampleSite/config.toml
+++ b/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"]
diff --git a/exampleSite/content/docs/compose/_index.md b/exampleSite/content/docs/compose/_index.md
index 7d837d0..5d18f7d 100644
--- a/exampleSite/content/docs/compose/_index.md
+++ b/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" >}}
diff --git a/exampleSite/go.mod b/exampleSite/go.mod
index e395a91..36bf785 100644
--- a/exampleSite/go.mod
+++ b/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
+)
diff --git a/exampleSite/go.sum b/exampleSite/go.sum
index 7d77a62..aaf01f7 100644
--- a/exampleSite/go.sum
+++ b/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=
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 05580c0..395c139 100644
--- a/layouts/_default/baseof.html
+++ b/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">
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
deleted file mode 100644
index 55301c6..0000000
--- a/layouts/partials/head.html
+++ /dev/null
@@ -1,62 +0,0 @@
-{{ $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 }} <!-- list page -->
- {{ range .Pages }} <!-- check child 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)) }} <!-- check if this part uses the shortcode -->
- {{ $includeLiteYT = true }}
- {{ end }}
- {{ end }} <!-- second range .Pages -->
- {{ end }} <!-- first range .Pages -->
-{{ end }} <!-- IsNode -->
-{{ if (.HasShortcode "liteyoutube") }} <!-- check if single page or list page itself use the shortcode -->
- {{ $includeLiteYT = true }}
-{{ end }} <!-- end liteyoutube shortcode search -->
-<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) }}'>
-{{ if $includeLiteYT }} <!-- if we find the liteyoutube shortcode in the page, insert the stylesheet and the javascript into the header -->
- <!-- the lite-yt-embed script and css retrieved from https://github.com/paulirish/lite-youtube-embed -->
- <link rel="stylesheet" href="{{.Site.BaseURL}}/css/lite-yt-embed.css">
- <script type="text/javascript" src="{{.Site.BaseURL}}/js/lite-yt-embed.js"></script>
-{{ end }}
-{{- $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 }}
-{{- partialCached "hooks/head" . }}
diff --git a/layouts/partials/head/index.html b/layouts/partials/head/index.html
new file mode 100644
index 0000000..a9f1146
--- /dev/null
+++ b/layouts/partials/head/index.html
@@ -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" . }}
diff --git a/layouts/partials/head/liteyoutube.html b/layouts/partials/head/liteyoutube.html
new file mode 100644
index 0000000..59a006d
--- /dev/null
+++ b/layouts/partials/head/liteyoutube.html
@@ -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 }}
\ No newline at end of file
diff --git a/layouts/shortcodes/liteyoutube.html b/layouts/shortcodes/liteyoutube.html
index c9e5799..eadcd07 100644
--- a/layouts/shortcodes/liteyoutube.html
+++ b/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>
diff --git a/static/css/lite-yt-embed.css b/static/css/lite-yt-embed.css
index 302444b..9995e27 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,<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;
+}
--
Gitblit v1.10.0