diff --git a/README.md b/README.md index 2100ff2..d4e79cb 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,7 @@ This is originally a port of the [Zen](https://www.drupal.org/project/zen) theme * Meta tags and JSON-LD * Multilingual (i18n) * Normalize CSS +* Podcast * Responsive design * RSS and JSON feeds with full content * Search with DuckDuckGo @@ -129,14 +130,36 @@ params: microUsername: "" # Your micro.blog username. mobileMenu: true # Turn on a mobile menu on small screens. piwikSiteId: # Matamo site id - piwikTrackerUrl: "" # Matamo url, schemaless and no slash on end (example.com/matamo). + piwikTrackerUrl: "" # Matamo url, schemaless and no slash on end (example.org/matamo). poweredby: true # Show powered by hugo in footer search: true # Site search with DuckDuckGo. searchSize: 20 # Search field size, default 20. sidebar: true # Show a sidebar to the right submitted: true # Show author and date information for a post. + + podcast: + title: # * Feed title, defaults to site title (iTunes). + description: # * Feed description/summary, defaults to site description (iTunes). + image: # * Feed image, place inside assets directory (iTunes). + category: + name: # * Feed category (iTunes). + subcategories: [] # Feed sub category (iTunes). + explicit: false/true # Feed explicit settting, default to false (iTunes). + author: # Feed author (iTunes). + owner: + name: # Feed owner name (iTunes). + email: # Feed owner e-mail (iTunes). + lang: # Feed language, defaults to site language (iTunes). + block: no/yes # Block the feed from iTunes, default to no (iTunes). + complete: no/yes # Set the feed as complete, defaults to no (iTunes). + type: episodic/serial # Podcast type, defaults to episodic (iTunes). + newfeed: # Are you moving? Set the new feed url here (iTunes). + cdn: # CDN url, no slash on end (https://cdn.example.org). + preload: none/metadata/auto # Set on the HTML5 audio tag, defaults to "metadata". ``` +The site will work without setting any of the podcast parameters but your podcast feed will not be accepted by iTunes. At a minimum you need to set the first four, title, description, image and category name. Read more in the podcast section below. + ## Multilingual @@ -183,6 +206,37 @@ If "lastmod" is set in the frontmatter on a post that value will be used in the With "lastmod" set a date section will also appear at the bottom of post telling the reader the created and modification dates. +## Podcast + +The Zen theme supports podcasting. + +* RSS feed with all the needed iTunes tags. +* Single and full layouts with HTML 5 audio player. +* Archetype with required parameters. + + +Here follow all the possible podcast frontmatter parameters. Only the first two is mandatory and are in the podcast archetype. + +``` +podcast: + mp3: # * The path to the mp3 file, + duration: # * Episode duration, e.g 1:04:02 (iTunes). + image: + src: # Episode image src, place inside the assets directory (iTunes). + alt: # Alt text for the image, explain what is on the image. + width: # Image width in the article, defaults to 250px. + class: # Image wrapper class. + explicit: true/false # Episode explicit setting, default to false (iTunes). + episode: # Episode number (iTunes). + episodeType: full/trailer/bonus # Episode type, defaults to full (iTunes). + season: # Episode season (iTunes). + block: # Block the episode from iTunes, default to no (iTunes). +``` + +* [Apple Podcasts categories](https://help.apple.com/itc/podcasts_connect/#/itc9267a2f12) +* [Apple - A podcaster’s guide to RSS](https://help.apple.com/itc/podcasts_connect/#/itcb54353390) + + ## Shortcodes ### Contact @@ -201,6 +255,7 @@ Zen comes with a improved version of the built in "figure" shortcut. * If width and height is not set the real dimensions of the image will be used. * If only width or height is set the other value will be proportionally calculated. + ### Clear Break float. @@ -215,6 +270,25 @@ blablabla # Displayed left of the image. blablabla # Displayed below of the image. ``` + +### Audio and Video + +``` +{{< audio src="/audio/audio.mp3" class="something" >}} + +{{< video src="/video/video.mp4" class="something" >}} +``` + +Possible parameters are: + +* src +* class +* preload (none/metadata/auto, default metadata) +* width (only video) + +The audio and video tags will be wrapped with a figure tag. + + ### Wrapper A simple, but useful, shortcode to wrap content in a div with a class. The content will be run through "markdownify". diff --git a/archetypes/micro.md b/archetypes/micro.md new file mode 100644 index 0000000..efbf127 --- /dev/null +++ b/archetypes/micro.md @@ -0,0 +1,5 @@ +--- +title: "{{ replace .TranslationBaseName "-" " " | humanize }}" +date: {{ .Date }} + +--- \ No newline at end of file diff --git a/archetypes/podcast.md b/archetypes/podcast.md new file mode 100644 index 0000000..7a7b85c --- /dev/null +++ b/archetypes/podcast.md @@ -0,0 +1,8 @@ +--- +title: "{{ replace .TranslationBaseName "-" " " | humanize }}" +date: {{ .Date }} +podcast: + mp3: + duration: + +--- \ No newline at end of file diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss index 8441c8f..f487938 100644 --- a/assets/sass/_zen.scss +++ b/assets/sass/_zen.scss @@ -161,46 +161,56 @@ article { } figure { - @include respond-to(s) { - display: table; + margin: 0; - img { - display: block; + &.image { + figcaption { + @include respond-to(s) { + display: table-caption; + caption-side: bottom; + } + + h4, + p { + margin: 0; + } } - &.left { - @include padding(0 .5 .5 0); - margin: 0; - float: left; - clear: both; + @include respond-to(s) { + display: table; - figcaption { + img { + display: block; + } + + &.left { @include padding(0 .5 .5 0); + margin: 0; + float: left; + clear: both; + + figcaption { + @include padding(0 .5 .5 0); + } } - } - &.right { - @include padding(0 0 .5 .5); - margin: 0; - float: right; - clear: both; - - figcaption { + &.right { @include padding(0 0 .5 .5); + margin: 0; + float: right; + clear: both; + + figcaption { + @include padding(0 0 .5 .5); + } } } } -} -figcaption { - @include respond-to(s) { - display: table-caption; - caption-side: bottom; - } - - h4, - p { - margin: 0; + &.podcast { + audio { + width: 95%; + } } } diff --git a/layouts/partials/podcast.html b/layouts/partials/podcast.html new file mode 100644 index 0000000..f8ebe96 --- /dev/null +++ b/layouts/partials/podcast.html @@ -0,0 +1,12 @@ +{{ $src := (.Params.podcast.mp3 | absURL) -}} +{{ if .Site.Params.Podcast.cdn -}} +{{ $src = add $.Site.Params.Podcast.cdn (.Params.podcast.mp3 | relURL) -}} +{{ end -}} +
+ +
{{ .Title }}
+
+{{ with .Params.podcast.image }} +{{ $resource := resources.Get .src }}{{ $size := "250x" }}{{ with .width }}{{ $size = (add (string .) "x") }}{{ end }}{{ $image := $resource.Resize $size -}} +
{{ .alt }}
+{{ end -}} diff --git a/layouts/podcast/full.html b/layouts/podcast/full.html new file mode 100644 index 0000000..a83a346 --- /dev/null +++ b/layouts/podcast/full.html @@ -0,0 +1,10 @@ +
+
+

{{ .Title }}

+{{ if $.Param "submitted" | default false }}{{ partial "submitted.html" . }}{{ end -}} +
+{{ partial "podcast.html" . -}} +
+{{ .Content }} +
+
diff --git a/layouts/podcast/rss.xml b/layouts/podcast/rss.xml new file mode 100644 index 0000000..c7014be --- /dev/null +++ b/layouts/podcast/rss.xml @@ -0,0 +1,64 @@ + + + {{ .Site.Params.Podcast.Title | default .Site.Title }} + {{ .Permalink }} + {{ .Site.Params.Podcast.Description | default .Site.Params.Description }} + Hugo -- gohugo.io + {{ .Site.Params.Podcast.Lang | default .Site.LanguageCode }} + {{ with .Site.Author.email -}} + {{ . }}{{ with $.Site.Author.name }} ({{ . }}){{end}} + {{ end -}} + {{ with .Site.Author.email -}} + {{ . }}{{ with $.Site.Author.name }} ({{ . }}){{end}} + {{ end -}} + {{ with .Site.Copyright -}} + {{ . }} + {{ end -}} + {{ if not .Date.IsZero -}} + {{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }} + {{ end -}} + {{ with .OutputFormats.Get "RSS" -}} + {{ printf "" .Permalink .MediaType | safeHTML }} + {{ end -}} + {{ with .Site.Params.Podcast.Image }}{{ $image := resources.Get . }}{{ end }} + {{ with .Site.Params.Podcast.Category -}} + + {{ range .subcategories }}{{ end }} + + {{ end -}} + {{ with .Site.Params.Podcast.Owner -}} + + {{ with .name }}{{ . }}{{ end }} + {{ with .email }}{{ . }}{{ end }} + + {{ end -}} + {{ with .Site.Params.Podcast.Description }}{{ . }}{{ end }} + {{ with .Site.Params.Podcast.Author }}{{ . }}{{ end }} + {{ with .Site.Params.Podcast.Type }}{{ . }}{{ end }} + {{ with .Site.Params.Podcast.Block }}{{ . }}{{ end }} + {{ with .Site.Params.Podcast.Complete }}{{ . }}{{ end }} + {{ with .Site.Params.Podcast.NewFeed }}{{ . }}{{ end }} + {{ if .Site.Params.Podcast.Explicit }}true{{ else }}false{{ end }} + {{ range .Data.Pages }} + + {{ .Title }} + {{ .Title }} + {{ .Permalink }} + {{ .Permalink }} + {{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }} + {{ with .Site.Author.email -}} + {{ . }}{{ with $.Site.Author.name }} ({{ . }}){{ end }} + {{ end -}} + {{ .Content | html }} + {{ with .Params.podcast.mp3 }}{{ $file_stat := os.Stat (add "/static" (. | relURL)) }}{{ end }} + {{ with .Params.podcast.duration }}{{ . }}{{ end }} + {{ with .Params.podcast.image.src }}{{ $image := resources.Get . }}{{ end }} + {{ with .Params.podcast.episode }}{{ . }}{{ end }} + {{ with .Params.podcast.episodeType }}{{ . }}{{ end }} + {{ with .Params.podcast.season }}{{ . }}{{ end }} + {{ with .Params.podcast.block }}{{ . }}{{ end }} + {{ if .Params.podcast.explicit }}true{{ else }}false{{ end }} + + {{ end }} + + diff --git a/layouts/podcast/single.html b/layouts/podcast/single.html new file mode 100644 index 0000000..0a351bd --- /dev/null +++ b/layouts/podcast/single.html @@ -0,0 +1,24 @@ +{{ define "meta" }} +{{- partial "single_meta.html" . -}} +{{- partial "opengraph_meta.html" . -}} +{{ end }} + +{{ define "header" }} +{{- partial "single_json_ld.html" . -}} +{{ end }} + +{{ define "main" -}} +
+
+
+

{{ .Title }}

+{{ if $.Param "submitted" | default false }}{{ partial "submitted.html" . }}{{ end -}} +{{ if .Params.tags }}{{ partial "tags.html" . }}{{ end -}} +
+{{ partial "podcast.html" . -}} +
+{{ .Content }} +
+
+
+{{ end }} diff --git a/layouts/shortcodes/audio.html b/layouts/shortcodes/audio.html new file mode 100644 index 0000000..af3689b --- /dev/null +++ b/layouts/shortcodes/audio.html @@ -0,0 +1,6 @@ +
+ +
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html index 4d82ead..1b6eaaf 100644 --- a/layouts/shortcodes/figure.html +++ b/layouts/shortcodes/figure.html @@ -25,9 +25,9 @@ {{ $height := (mul ($.Scratch.Get "realheight") (div (add ($.Scratch.Get "width") 0.0) ($.Scratch.Get "realwidth"))) -}} {{ $.Scratch.Set "height" (math.Round $height) -}} {{ end -}} -
+
{{ with .Get "link" }}{{ end -}} - + {{- if .Get "link" }}{{ end }} {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
{{ if isset .Params "title" }} diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html new file mode 100644 index 0000000..bfb4b8d --- /dev/null +++ b/layouts/shortcodes/video.html @@ -0,0 +1,6 @@ +
+ +{{ with .Get "caption" }}
{{ . }}
{{ end }} +
diff --git a/theme.toml b/theme.toml index bda68f1..85b5093 100644 --- a/theme.toml +++ b/theme.toml @@ -3,8 +3,8 @@ description = "A solid base for your custom Hugo theme with libsass and gulp sup homepage = "https://github.com/frjo/hugo-theme-zen" license = "GPLv2" licenselink = "http://www.gnu.org/licenses/old-licenses/gpl-2.0.html" -tags = ["multilingual", "responsive", "blog", "search", "micro"] -features = ["multilingual", "responsive", "grid", "sass", "gulp", "search", "matamo", "jsonfeed", "subtheme"] +tags = ["multilingual", "responsive", "blog", "search", "micro", "podcast"] +features = ["multilingual", "responsive", "grid", "sass", "search", "matamo", "jsonfeed", "subtheme", "podcast"] min_version = 0.47 [author]