From 71b93fb760c17d5f7b22f47c1b8b50c2b57c2165 Mon Sep 17 00:00:00 2001
From: Karl <kc0bfv@gmail.com>
Date: Sat, 01 Feb 2020 00:26:08 +0000
Subject: [PATCH] Author fixes, add opengraph and twitter cards
---
exampleSite/content/emoji-support.md | 7 +
exampleSite/config.toml | 8 +
exampleSite/content/markdown-syntax.md | 8 +-
layouts/_default/single.html | 4
exampleSite/content/_index.md | 1
exampleSite/config_for_github_pages.toml | 8 +
README.md | 15 ++-
exampleSite/content/rich-content.md | 7 +
exampleSite/content/math-typesetting.mmark | 7 +
exampleSite/content/about.md | 7 +
layouts/partials/foot.html | 37 ---------
exampleSite/static/favicon.ico | 0
layouts/partials/head.html | 104 +++++++++++++++++++-------
archetypes/default.md | 4
layouts/partials/body_footer.html | 2
15 files changed, 119 insertions(+), 100 deletions(-)
diff --git a/README.md b/README.md
index de332ba..1eed679 100644
--- a/README.md
+++ b/README.md
@@ -9,27 +9,28 @@
The exampleSite demonstrates the features unique to this theme. In your site config params section the following extra parameters are supported:
* `favicon` - the favicon URL, relative to your site (placed in header meta tag)
-* `webmasterEmail` - the webmaster email displayed in the footer
-* `author` - the author for the header meta tag
* `description` - the description for the header meta tag
-* `headerimages` - a list of relative image URLs for the header of each page
+* `images` - a list of relative image URLs for the header of each page
* `msvalidate` - MS validation tag
* `googlesiteverification` - Google site verification tag
+Additionally, `Author.name` and `Author.email` in the site config will display as the author and webmaster email.
+
Pages you add have custom front matter options:
* `buttonimage` - the relative image URL for the page's button on the front page
-* `sideimages` - a list of relative image URLs for the left sidebar on the page
-* `sideimagealt` - the alternate text for the page's left sidebar image
+* `images` - a list of relative image URLs for the left sidebar on the page
+* `imagealt` - the alternate text for the page's left sidebar image
* `weight` - an integer that specifies page ordering for the front page. If you want the buttons and navbar items to show pages in a specific order, specify the ordering via weight. Ordering goes from lowest weight to highest, left to right, top to bottom.
+* `author.name`, `author.email` - overrides the site author name and email
## Page Construction
Navigation from the main page happens via a button image. These images are, optimally, 300x300 pixels. Specify these button image URLs in a page's front matter with the `buttonimage` option.
-On sub-pages, images can appear on the left side. Sizing can vary there, but at full size images come out as about 277.5 pixels, and a size of about 300x500 pixels works nicely. You can specify multiple images for a sub-page, and they'll be randomly selected on load. Specify them as a list of image URLs on the page front matter, with option `sideimages`.
+On sub-pages, images can appear on the left side. Sizing can vary there, but at full size images come out as about 277.5 pixels, and a size of about 300x500 pixels works nicely. You can specify multiple images for a sub-page, and they'll be randomly selected on load. Specify them as a list of image URLs on the page front matter, with option `images`.
-Header images are, optimally, 950x200 pixels. Specify these in the site configuration as a list of image URLs with option `headerimages`. One will be randomly selected on page load.
+Header images are, optimally, 950x200 pixels. Specify these in the site configuration as a list of image URLs with option `images`. One will be randomly selected on page load.
## Custom Shortcode
diff --git a/archetypes/default.md b/archetypes/default.md
index 4b8562a..0b8f43e 100644
--- a/archetypes/default.md
+++ b/archetypes/default.md
@@ -3,8 +3,8 @@
date: {{ .Date }}
draft: false
buttonimage: ""
-sideimages: []
-sideimagealt: ""
+images: []
+imagealt: ""
weight: 1
---
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 4a4548b..ace17d8 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -7,9 +7,11 @@
[params]
favicon = "favicon.ico"
- webmasterEmail = "kc0bfv@gmail.com"
description = "The demonstration page for the Hugo Ticky Tacky Dark theme."
- author = "kc0bfv@gmail.com"
- headerimages = ["img/header01.jpg", "img/header02.jpg"]
+ images = ["img/header01.jpg", "img/header02.jpg"]
#msvalidate = ""
#googlesiteverification = ""
+
+[Author]
+ name = "Karl Sickendick"
+ email = "kc0bfv@gmail.com"
diff --git a/exampleSite/config_for_github_pages.toml b/exampleSite/config_for_github_pages.toml
index d1d12dd..dd76d8d 100644
--- a/exampleSite/config_for_github_pages.toml
+++ b/exampleSite/config_for_github_pages.toml
@@ -7,9 +7,11 @@
[params]
favicon = "favicon.ico"
- webmasterEmail = "kc0bfv@gmail.com"
description = "The demonstration page for the Hugo Ticky Tacky Dark theme."
- author = "kc0bfv@gmail.com"
- headerimages = ["img/header01.jpg", "img/header02.jpg"]
+ images = ["img/header01.jpg", "img/header02.jpg"]
#msvalidate = ""
#googlesiteverification = ""
+
+[Author]
+ name = "Karl Sickendick"
+ email = "kc0bfv@gmail.com"
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index 0c2c0b6..5fdd3d6 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -1,6 +1,5 @@
---
title: "Main"
-author: "Hugo Authors"
date: 2019-12-08T00:00:00-00:00
draft: false
---
diff --git a/exampleSite/content/about.md b/exampleSite/content/about.md
index e46e1db..87c11f9 100644
--- a/exampleSite/content/about.md
+++ b/exampleSite/content/about.md
@@ -2,11 +2,12 @@
title: "About"
description: "Hugo, the world’s fastest framework for building websites"
aliases: ["about-us","about-hugo","contact"]
-author: "Hugo Authors"
+author:
+ name: "Hugo Authors"
date: 2019-12-08T00:00:00-00:00
buttonimage: "img/awebutton.jpg"
-sideimages: ["img/awesome01.jpg", "img/awesome02.jpg"]
-sideimagealt: "Awesome Page Image"
+images: ["img/awesome01.jpg", "img/awesome02.jpg"]
+imagealt: "Awesome Page Image"
draft: false
weight: 1
---
diff --git a/exampleSite/content/emoji-support.md b/exampleSite/content/emoji-support.md
index 9765e37..5a7858b 100644
--- a/exampleSite/content/emoji-support.md
+++ b/exampleSite/content/emoji-support.md
@@ -1,5 +1,6 @@
---
-author: "Hugo Authors"
+author:
+ name: "Hugo Authors"
title: "Emoji Support"
description: "Guide to emoji usage in Hugo"
tags: [
@@ -7,8 +8,8 @@
]
date: 2019-12-08T00:00:00-00:00
buttonimage: "img/coolbutton.jpg"
-sideimages: ["img/cool01.jpg"]
-sideimagealt: "Cool Page Image"
+images: ["img/cool01.jpg"]
+imagealt: "Cool Page Image"
draft: false
weight: 4
---
diff --git a/exampleSite/content/markdown-syntax.md b/exampleSite/content/markdown-syntax.md
index 19ab708..ee170be 100644
--- a/exampleSite/content/markdown-syntax.md
+++ b/exampleSite/content/markdown-syntax.md
@@ -1,5 +1,6 @@
---
-author: "Hugo Authors"
+author:
+ name: "Hugo Authors"
title: "Markdown Syntax Guide"
description: "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
tags: [
@@ -12,13 +13,12 @@
"themes",
"syntax",
]
-series: ["Themes Guide"]
aliases: ["migrate-from-jekyl"]
date: 2019-12-08T00:00:00-00:00
buttonimage: "img/interestingbutton.jpg"
-sideimages: ["img/interesting01.jpg"]
-sideimagealt: "Interesting Page Image"
+images: ["img/interesting01.jpg"]
+imagealt: "Interesting Page Image"
draft: false
weight: 3
---
diff --git a/exampleSite/content/math-typesetting.mmark b/exampleSite/content/math-typesetting.mmark
index cb2adeb..5116af4 100644
--- a/exampleSite/content/math-typesetting.mmark
+++ b/exampleSite/content/math-typesetting.mmark
@@ -1,11 +1,12 @@
---
-author: Hugo Authors
+author:
+ name: Hugo Authors
title: Math Typesetting
date: 2019-03-08
description: A brief guide to setup KaTeX
buttonimage: "img/mathbutton.jpg"
-sideimages: ["img/math01.jpg"]
-sideimagealt: "A binary text wall covering from the computer history museum."
+images: ["img/math01.jpg"]
+imagealt: "A binary text wall covering from the computer history museum."
markup: mmark
math: true
weight: 6
diff --git a/exampleSite/content/rich-content.md b/exampleSite/content/rich-content.md
index 9530e9d..f67c4f9 100644
--- a/exampleSite/content/rich-content.md
+++ b/exampleSite/content/rich-content.md
@@ -1,5 +1,4 @@
+++
-author = "Hugo Authors"
title = "Rich Content"
description = "A brief description of Hugo Shortcodes"
tags = [
@@ -7,9 +6,11 @@
"privacy",
]
buttonimage = "img/richbutton.jpg"
-sideimages = ["img/rich01.jpg"]
-sideimagealt = "Looking out on a pond at Capilano Suspension Bridge, Vancouver, BC"
+images = ["img/rich01.jpg"]
+imagealt = "Looking out on a pond at Capilano Suspension Bridge, Vancouver, BC"
weight = 5
+[author]
+ name = "Hugo Authors"
+++
Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
diff --git a/exampleSite/static/favicon.ico b/exampleSite/static/favicon.ico
new file mode 100644
index 0000000..3669333
--- /dev/null
+++ b/exampleSite/static/favicon.ico
Binary files differ
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index d4425f9..c529f29 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,7 +1,7 @@
{{ define "main" }}
<div class="col-12 col-sm-5">
- {{ with .Params.sideimages }}
- <img id="sideimage" class="morerounded" src="{{ "img/side_image_template.png" | relURL }}" alt="{{ $.Params.sideimagealt }}">
+ {{ with .Params.images }}
+ <img id="sideimage" class="morerounded" src="{{ "img/side_image_template.png" | relURL }}" alt="{{ $.Params.imagealt }}">
{{ end }}
</div>
<div class="col-12 col-sm-7">
diff --git a/layouts/partials/body_footer.html b/layouts/partials/body_footer.html
index 4071265..ef55bae 100644
--- a/layouts/partials/body_footer.html
+++ b/layouts/partials/body_footer.html
@@ -1 +1 @@
-{{ with .Site.Params.webmasterEmail }}Webmaster: <a href="mailto:{{ . }}">{{ . }}</a>{{ end }}
+{{ with .Site.Author.email }}Webmaster: <a href="mailto:{{ . }}">{{ . }}</a>{{ end }}
diff --git a/layouts/partials/foot.html b/layouts/partials/foot.html
index 8195d41..e69de29 100644
--- a/layouts/partials/foot.html
+++ b/layouts/partials/foot.html
@@ -1,37 +0,0 @@
-<script>
- function toggleDisplay( elementID ) {
- elem = document.getElementById(elementID);
- if( elem.style.display == "none" ) {
- elem.style.display = "block";
- } else if( elem.style.display == "block" ) {
- elem.style.display = "none";
- }
- }
- {{ with .Site.Params.headerimages }}
- function randomHeaderImg() {
- images = [
- {{- $last_elem := sub (len .) 1 -}}
- {{ range $index, $component := . -}}
- {{ . | absURL }}{{ if lt $index $last_elem }},{{ end }}
- {{- end -}}
- ];
- i = Math.ceil(Math.random() * images.length) - 1;
- document.getElementById("headerimg").src = images[i];
- }
- window.onload = randomHeaderImg;
- {{ end }}
- {{ with .Params.sideimages }}
- function randomSideAndHeaderImg() {
- randomHeaderImg();
- images = [
- {{- $last_elem := sub (len .) 1 -}}
- {{ range $index, $component := . -}}
- {{ . | absURL }}{{ if lt $index $last_elem }},{{ end }}
- {{- end -}}
- ];
- i = Math.ceil(Math.random() * images.length) - 1;
- document.getElementById("sideimage").src = images[i];
- }
- window.onload = randomSideAndHeaderImg;
- {{ end }}
-</script>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index dd612b3..34a32b1 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,52 +1,41 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
-{{- if isset .Params "description" -}} {{- $.Scratch.Set "description" .Params.description -}}
-{{- else -}}
- {{- if isset .Site.Params "description" -}} {{- $.Scratch.Set "description" .Site.Params.description -}} {{- end -}}
-{{- end }}
-{{ with $.Scratch.Get "description" -}}<meta name="description" content="{{ . }}">{{- end }}
-{{- if isset .Params "author" -}} {{- $.Scratch.Set "author" .Params.author -}}
-{{- else -}}
- {{- if isset .Site.Params "author" -}} {{- $.Scratch.Set "author" .Site.Params.author -}} {{- end -}}
-{{- end }}
-{{ with $.Scratch.Get "author" -}}<meta name="author" content="{{ . }}">{{- end }}
-<link rel="icon" href="{{ .Site.Params.favicon | relURL }}">
-
<title>{{ .Site.Title }}{{ with .Params.title }} - {{ . }}{{ end }}</title>
-
-{{ with .Params.actualurl }}
+{{ $description := .Params.description | default .Site.Params.description }}
+{{- with $description }}<meta name="description" content="{{ . }}">{{ end }}
+{{ $author := .Params.author.name | default .Site.Author.name }}
+{{- with $author }}<meta name="author" content="{{ . }}">{{ end }}
+<link rel="icon" href="{{ .Site.Params.favicon | relURL }}">
+{{- template "_internal/opengraph.html" . }}
+{{- template "_internal/twitter_cards.html" . }}
+{{ with .Params.actualurl -}}
<meta http-equiv="refresh" content="0;URL='{{ . | relURL }}'" />
-{{ end }}
-
-<!-- SEO Prefs -->
+{{- end }}
<meta name="robots" content="index,follow">
<meta name="referrer" content="origin-when-cross-origin">
{{ with .Site.Params.googlesiteverification }}<meta name="google-site-verification" content="{{ . }}">{{ end }}
{{ with .Site.Params.msvalidate }}<meta name="msvalidate.01" content="{{ . }}">{{ end }}
-
-<!-- Site Generator -->
-<meta name="generator" content="Hugo {{ hugo.Version }}">
-
-<!-- Bootstrap CSS -->
+{{ hugo.Generator }}
+{{ with .OutputFormats.Get "RSS" }}
+<link href="{{ .RelPermalink }}" rel="alternate" type="application/rss+xml" title="{{ $.Site.Title }}" />
+<link href="{{ .RelPermalink }}" rel="feed" type="application/rss+xml" title="{{ $.Site.Title }}" />
+{{ end }}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
<!--My CSS-->
<link rel="stylesheet" href="{{ "css/myscreen.css" | relURL }}" type="text/css" media="screen">
<link rel="stylesheet" href="{{ "css/myprint.css" | relURL }}" type="text/css" media="print">
<meta name="theme-color" content="black">
-
-{{ template "_internal/google_analytics_async.html" . }}
+{{- template "_internal/google_analytics_async.html" . }}
<noscript>
<style>
- {{ with .Site.Params.headerimages }}
+ {{ with .Site.Params.images }}
#headerimg {
background-image: url({{ index . 0 | safeURL | absURL }});
background-size: cover;
}
{{ end }}
- {{ with .Params.sideimages }}
+ {{ with .Params.images }}
#sideimage {
background-image: url({{ index . 0 | safeURL | absURL }});
background-size: cover;
@@ -54,3 +43,62 @@
{{ end }}
</style>
</noscript>
+
+<script>
+ function toggleDisplay( elementID ) {
+ elem = document.getElementById(elementID);
+ if( elem.style.display == "none" ) {
+ elem.style.display = "block";
+ } else if( elem.style.display == "block" ) {
+ elem.style.display = "none";
+ }
+ }
+ {{ with .Site.Params.images }}
+ function randomHeaderImg() {
+ let images = [
+ {{- $last_elem := sub (len .) 1 -}}
+ {{ range $index, $component := . -}}
+ {{ . | absURL }}{{ if lt $index $last_elem }},{{ end }}
+ {{- end -}}
+ ];
+ let img_ind = Math.ceil(Math.random() * images.length) - 1;
+ let sel_url = images[img_ind]
+ let img = new Image();
+ img.onload = function() {
+ function set_img(old_onload) {
+ let element = document.getElementById("headerimg");
+ element.src = sel_url;
+ if( old_onload ){ old_onload() }
+ }
+ if( document.readyState === "complete" ) { set_img() }
+ else { window.onload = set_img(window.onload) }
+ }
+ img.src = sel_url;
+ }
+ randomHeaderImg();
+ {{ end }}
+ {{ with .Params.images }}
+ function randomSideImg() {
+ let images = [
+ {{- $last_elem := sub (len .) 1 -}}
+ {{ range $index, $component := . -}}
+ {{ . | absURL }}{{ if lt $index $last_elem }},{{ end }}
+ {{- end -}}
+ ];
+ let img_ind = Math.ceil(Math.random() * images.length) - 1;
+ let sel_url = images[img_ind]
+ let img = new Image();
+ img.onload = function() {
+ function set_img(old_onload) {
+ let element = document.getElementById("sideimage");
+ element.src = sel_url;
+ if( old_onload ){ old_onload() }
+ }
+ if( document.readyState === "complete" ) { set_img() }
+ else { window.onload = set_img(window.onload) }
+ }
+ img.src = sel_url;
+ }
+ randomSideImg();
+ {{ end }}
+</script>
--
Gitblit v1.10.0