aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--README.md23
-rw-r--r--assets/images/social_card_bg.pngbin0 -> 651110 bytes
-rw-r--r--assets/images/social_card_fg.pngbin0 -> 367423 bytes
-rw-r--r--exampleSite/config.toml20
-rw-r--r--exampleSite/content.pt/_index.md1
-rw-r--r--exampleSite/content.pt/blog/_index.md1
-rw-r--r--exampleSite/content/_index.md1
-rw-r--r--exampleSite/content/blog/_index.md1
-rw-r--r--images/social_card.webpbin0 -> 35348 bytes
-rw-r--r--layouts/partials/seo_tags.html16
-rw-r--r--layouts/partials/social_card.html106
-rw-r--r--theme.toml2
12 files changed, 153 insertions, 18 deletions
diff --git a/README.md b/README.md
index 4971ba8..aa60634 100644
--- a/README.md
+++ b/README.md
@@ -107,6 +107,11 @@ already implemented:
writing the CSS you need in `assets/{custom_css}.css` and then including
`style: "{custom_css}.css"` in the [front
matter](https://gohugo.io/content-management/front-matter/) of said page.
+- Dynamic social card generation (EXPERIMENTAL): if you don't add preview images
+ to a post, this template will generate one based on the title. You can see an
+ example below.
+
+![Social card example](https://raw.githubusercontent.com/clente/hugo-bearcub/main/images/social_card.webp)
## Configuration
@@ -165,8 +170,8 @@ enableRobotsTXT = true
favicon = "images/favicon.png"
# These images will show up when services want to generate a preview of a link
- # to your site. For more information about previews, see
- # https://gohugo.io/templates/internal#twitter-cards and
+ # to your site. Ignored if `generateSocialCard = true`. For more information
+ # about previews, see https://gohugo.io/templates/internal#twitter-cards and
# https://gohugo.io/templates/internal#open-graph
images = ["/images/share.webp"]
@@ -183,8 +188,18 @@ enableRobotsTXT = true
# have the theme simply not show any link
hideUntranslated = false
- # Your email, added to the navbar so readers can reply to your posts
- email = "me@example.com"
+ # (EXPERIMENTAL) This theme is capable of dynamically generating social cards
+ # for posts that don't have `images` defined in their front matter. By setting
+ # `generateSocialCard` to false, you can prevent this behavior. For more
+ # information about images, see https://gohugo.io/functions/images/
+ generateSocialCard = true
+
+ # Social media. Delete any item you aren't using to make sure it won't show up
+ # in your website's metadata.
+ [social]
+ email = "me@example.com" # Added to the navbar so readers can reply to posts
+ twitter = "example" # Twitter handle (without '@')
+ facebook_admin = "0000000000" # Facebook Page Admin ID
```
## Contributing
diff --git a/assets/images/social_card_bg.png b/assets/images/social_card_bg.png
new file mode 100644
index 0000000..ad1d528
--- /dev/null
+++ b/assets/images/social_card_bg.png
Binary files differ
diff --git a/assets/images/social_card_fg.png b/assets/images/social_card_fg.png
new file mode 100644
index 0000000..01b207c
--- /dev/null
+++ b/assets/images/social_card_fg.png
Binary files differ
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index d487ac0..34e7702 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -48,8 +48,8 @@ enableRobotsTXT = true
favicon = "images/favicon.png"
# These images will show up when services want to generate a preview of a link
- # to your site. For more information about previews, see
- # https://gohugo.io/templates/internal#twitter-cards and
+ # to your site. Ignored if `generateSocialCard = true`. For more information
+ # about previews, see https://gohugo.io/templates/internal#twitter-cards and
# https://gohugo.io/templates/internal#open-graph
images = ["/images/share.webp"]
@@ -61,14 +61,20 @@ enableRobotsTXT = true
# formatting, see https://gohugo.io/functions/format/
dateFormat = "2006-01-02"
+ # If your blog is multilingual but you haven't translated a page, this theme
+ # will create a disabled link. By setting `hideUntranslated` to true, you can
+ # have the theme simply not show any link
+ hideUntranslated = false
+
+ # (EXPERIMENTAL) This theme is capable of dynamically generating social cards
+ # for posts that don't have `images` defined in their front matter. By setting
+ # `generateSocialCard` to false, you can prevent this behavior. For more
+ # information about images, see https://gohugo.io/functions/images/
+ generateSocialCard = true
+
# Social media. Delete any item you aren't using to make sure it won't show up
# in your website's metadata.
[social]
email = "me@example.com" # Added to the navbar so readers can reply to posts
twitter = "example" # Twitter handle (without '@')
facebook_admin = "0000000000" # Facebook Page Admin ID
-
- # (EXPERIMENTAL) If your blog is multilingual but you haven't translated a
- # page, this theme will create a disabled link. By setting `hideUntranslated`
- # to true, you can have the theme simply not show any link
- hideUntranslated = false
diff --git a/exampleSite/content.pt/_index.md b/exampleSite/content.pt/_index.md
index 4cf0d7e..badc5fe 100644
--- a/exampleSite/content.pt/_index.md
+++ b/exampleSite/content.pt/_index.md
@@ -1,6 +1,7 @@
---
title: "Início"
menu: "main"
+images: ["/images/share.webp"]
weight: 1
---
diff --git a/exampleSite/content.pt/blog/_index.md b/exampleSite/content.pt/blog/_index.md
index 7588ac1..fc46376 100644
--- a/exampleSite/content.pt/blog/_index.md
+++ b/exampleSite/content.pt/blog/_index.md
@@ -1,5 +1,6 @@
---
title: "Blog"
menu: "main"
+images: ["/images/share.webp"]
weight: 2
--- \ No newline at end of file
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index 10c388f..d0d54ef 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -1,6 +1,7 @@
---
title: "Home"
menu: "main"
+images: ["/images/share.webp"]
weight: 1
---
diff --git a/exampleSite/content/blog/_index.md b/exampleSite/content/blog/_index.md
index 7588ac1..fc46376 100644
--- a/exampleSite/content/blog/_index.md
+++ b/exampleSite/content/blog/_index.md
@@ -1,5 +1,6 @@
---
title: "Blog"
menu: "main"
+images: ["/images/share.webp"]
weight: 2
--- \ No newline at end of file
diff --git a/images/social_card.webp b/images/social_card.webp
new file mode 100644
index 0000000..43ae186
--- /dev/null
+++ b/images/social_card.webp
Binary files differ
diff --git a/layouts/partials/seo_tags.html b/layouts/partials/seo_tags.html
index 0b01f8b..84ab39e 100644
--- a/layouts/partials/seo_tags.html
+++ b/layouts/partials/seo_tags.html
@@ -3,11 +3,15 @@
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
<meta name="keywords" content="{{ if .IsPage}}{{ range $index, $tag := .Params.tags }}{{ $tag }},{{ end }}{{ else }}{{ range $plural, $terms := .Site.Taxonomies }}{{ range $term, $val := $terms }}{{ printf "%s," $term }}{{ end }}{{ end }}{{ end }}" />
-<!-- Open Graph / Facebook -->
-{{ template "_internal/opengraph.html" . }}
+{{ if (default false .Site.Params.generateSocialCard) }}
+ {{ partial "social_card.html" . }}
+{{ else }}
+ <!-- Open Graph / Facebook -->
+ {{ template "_internal/opengraph.html" . }}
-<!-- Twitter -->
-{{ template "_internal/twitter_cards.html" . }}
+ <!-- Twitter -->
+ {{ template "_internal/twitter_cards.html" . }}
-<!-- Microdata -->
-{{ template "_internal/schema.html" . }}
+ <!-- Microdata -->
+ {{ template "_internal/schema.html" . }}
+{{ end }}
diff --git a/layouts/partials/social_card.html b/layouts/partials/social_card.html
new file mode 100644
index 0000000..77bc251
--- /dev/null
+++ b/layouts/partials/social_card.html
@@ -0,0 +1,106 @@
+<!-- Dynamic social card generation -->
+{{ $font := resources.GetRemote "https://github.com/google/fonts/raw/main/ofl/firamono/FiraMono-Bold.ttf" }}
+{{ $fg := resources.Get "/images/social_card_fg.png"}}
+{{ $bg := resources.Get "/images/social_card_bg.png"}}
+
+{{ $fg = $fg.Filter (images.Text .Title (dict
+ "font" $font
+ "color" "#f8f8f2"
+ "size" 130
+ "linespacing" 20
+ "x" 0
+ "y" 0
+)) }}
+
+{{ $date := .Date.Format (default "2006-01-02" .Site.Params.dateFormat) }}
+{{ $byline := (printf "%s | %s" ($.Param "author") $date) }}
+
+{{ $fg = $fg.Filter (images.Text $byline (dict
+ "font" $font
+ "color" "#c9d1d9"
+ "size" 60
+ "linespacing" 30
+ "x" 0
+ "y" 425
+)) }}
+
+{{ $card := $bg.Filter (images.Overlay $fg 112 140 ) }}
+{{ $card := $card.Resize "900x webp q100" }}
+
+<!-- Open Graph / Facebook -->
+<!-- Source: https://raw.githubusercontent.com/gohugoio/hugo/master/tpl/tplimpl/embedded/templates/opengraph.html -->
+<meta property="og:title" content="{{ .Title }}" />
+<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
+<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
+<meta property="og:url" content="{{ .Permalink }}" />
+
+{{- with .Params.images -}}
+{{- range first 6 . }}<meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
+{{- else -}}
+<meta property="og:image" content="{{ $card.Permalink | absURL }}"/>
+{{- end -}}
+
+{{- if .IsPage }}
+{{- $iso8601 := "2006-01-02T15:04:05-07:00" -}}
+<meta property="article:section" content="{{ .Section }}" />
+{{ with .PublishDate }}<meta property="article:published_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
+{{ with .Lastmod }}<meta property="article:modified_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
+{{- end -}}
+
+{{- with .Params.audio }}<meta property="og:audio" content="{{ . }}" />{{ end }}
+{{- with .Params.locale }}<meta property="og:locale" content="{{ . }}" />{{ end }}
+{{- with .Site.Params.title }}<meta property="og:site_name" content="{{ . }}" />{{ end }}
+{{- with .Params.videos }}{{- range . }}
+<meta property="og:video" content="{{ . | absURL }}" />
+{{ end }}{{ end }}
+
+{{- /* If it is part of a series, link to related articles */}}
+{{- $permalink := .Permalink }}
+{{- $siteSeries := .Site.Taxonomies.series }}
+{{- if $siteSeries }}
+{{ with .Params.series }}{{- range $name := . }}
+ {{- $series := index $siteSeries ($name | urlize) }}
+ {{- range $page := first 6 $series.Pages }}
+ {{- if ne $page.Permalink $permalink }}<meta property="og:see_also" content="{{ $page.Permalink }}" />{{ end }}
+ {{- end }}
+{{ end }}{{ end }}
+{{- end }}
+
+{{- /* Facebook Page Admin ID for Domain Insights */}}
+{{- with .Site.Social.facebook_admin }}<meta property="fb:admins" content="{{ . }}" />{{ end }}
+
+<!-- Twitter -->
+<!-- Source: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/twitter_cards.html -->
+{{- with .Params.images -}}
+<meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="{{ index . 0 | absURL }}"/>
+{{ else -}}
+<meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="{{ $card.Permalink | absURL }}"/>
+{{- end }}
+<meta name="twitter:title" content="{{ .Title }}"/>
+<meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end -}}"/>
+{{ with .Site.Social.twitter -}}
+<meta name="twitter:site" content="@{{ . }}"/>
+{{ end -}}
+
+<!-- Microdata -->
+<!-- Source: https://raw.githubusercontent.com/gohugoio/hugo/master/tpl/tplimpl/embedded/templates/schema.html -->
+<meta itemprop="name" content="{{ .Title }}">
+<meta itemprop="description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}">
+
+{{- if .IsPage -}}
+{{- $iso8601 := "2006-01-02T15:04:05-07:00" -}}
+{{ with .PublishDate }}<meta itemprop="datePublished" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end}}
+{{ with .Lastmod }}<meta itemprop="dateModified" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end}}
+<meta itemprop="wordCount" content="{{ .WordCount }}">
+
+{{- with .Params.images -}}
+{{- range first 6 . -}}<meta itemprop="image" content="{{ . | absURL }}">{{ end -}}
+{{- else -}}
+<meta itemprop="image" content="{{ $card.Permalink | absURL }}"/>
+{{- end -}}
+
+<!-- Output all taxonomies as schema.org keywords -->
+<meta itemprop="keywords" content="{{ if .IsPage}}{{ range $index, $tag := .Params.tags }}{{ $tag }},{{ end }}{{ else }}{{ range $plural, $terms := .Site.Taxonomies }}{{ range $term, $val := $terms }}{{ printf "%s," $term }}{{ end }}{{ end }}{{ end }}" />
+{{- end -}}
diff --git a/theme.toml b/theme.toml
index 62b7f99..a435ccd 100644
--- a/theme.toml
+++ b/theme.toml
@@ -10,7 +10,7 @@ homepage = "https://github.com/clente/hugo-bearcub"
demosite = "https://clente.github.io/hugo-bearcub"
tags = ["blog", "responsive", "minimal", "personal", "dark", "multilingual"]
-features = ["favicon", "seo", "no javascript", "rss"]
+features = ["favicon", "seo", "no javascript", "rss", "social cards"]
# If the theme has a single author
[author]
generated by cgit v1.2.3 (git 2.46.0) at 2025-05-05 22:15:40 +0000