From f9ba6222e4278479a6eb221d644abdeca9dc4583 Mon Sep 17 00:00:00 2001 From: "C. Lente" <7017340+clente@users.noreply.github.com> Date: Sat, 4 Mar 2023 15:08:11 -0300 Subject: Dynamically generated social cards --- README.md | 23 ++++++-- assets/images/social_card_bg.png | Bin 0 -> 651110 bytes assets/images/social_card_fg.png | Bin 0 -> 367423 bytes exampleSite/config.toml | 20 ++++--- exampleSite/content.pt/_index.md | 1 + exampleSite/content.pt/blog/_index.md | 1 + exampleSite/content/_index.md | 1 + exampleSite/content/blog/_index.md | 1 + images/social_card.webp | Bin 0 -> 35348 bytes layouts/partials/seo_tags.html | 16 +++-- layouts/partials/social_card.html | 106 ++++++++++++++++++++++++++++++++++ theme.toml | 2 +- 12 files changed, 153 insertions(+), 18 deletions(-) create mode 100644 assets/images/social_card_bg.png create mode 100644 assets/images/social_card_fg.png create mode 100644 images/social_card.webp create mode 100644 layouts/partials/social_card.html 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 Binary files /dev/null and b/assets/images/social_card_bg.png differ diff --git a/assets/images/social_card_fg.png b/assets/images/social_card_fg.png new file mode 100644 index 0000000..01b207c Binary files /dev/null and b/assets/images/social_card_fg.png 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 Binary files /dev/null and b/images/social_card.webp 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 @@ - -{{ template "_internal/opengraph.html" . }} +{{ if (default false .Site.Params.generateSocialCard) }} + {{ partial "social_card.html" . }} +{{ else }} + + {{ template "_internal/opengraph.html" . }} - -{{ template "_internal/twitter_cards.html" . }} + + {{ template "_internal/twitter_cards.html" . }} - -{{ template "_internal/schema.html" . }} + + {{ 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 @@ + +{{ $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" }} + + + + + + + + +{{- with .Params.images -}} +{{- range first 6 . }}{{ end -}} +{{- else -}} + +{{- end -}} + +{{- if .IsPage }} +{{- $iso8601 := "2006-01-02T15:04:05-07:00" -}} + +{{ with .PublishDate }}{{ end }} +{{ with .Lastmod }}{{ end }} +{{- end -}} + +{{- with .Params.audio }}{{ end }} +{{- with .Params.locale }}{{ end }} +{{- with .Site.Params.title }}{{ end }} +{{- with .Params.videos }}{{- range . }} + +{{ 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 }}{{ end }} + {{- end }} +{{ end }}{{ end }} +{{- end }} + +{{- /* Facebook Page Admin ID for Domain Insights */}} +{{- with .Site.Social.facebook_admin }}{{ end }} + + + +{{- with .Params.images -}} + + +{{ else -}} + + +{{- end }} + + +{{ with .Site.Social.twitter -}} + +{{ end -}} + + + + + + +{{- if .IsPage -}} +{{- $iso8601 := "2006-01-02T15:04:05-07:00" -}} +{{ with .PublishDate }}{{ end}} +{{ with .Lastmod }}{{ end}} + + +{{- with .Params.images -}} +{{- range first 6 . -}}{{ end -}} +{{- else -}} + +{{- 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] -- cgit v1.2.3