diff --git a/404.html b/404.html index 64d37cc..b94582b 100644 --- a/404.html +++ b/404.html @@ -1,8 +1,9 @@ 404 Page not found - + - + + @@ -13,14 +14,10 @@ - + + + -

404

@@ -60,6 +52,6 @@ -

© 2021 Contentful

+

© 2022 Contentful

diff --git a/about/index.html b/about/index.html index 0e72998..c56e091 100644 --- a/about/index.html +++ b/about/index.html @@ -1,8 +1,9 @@ About - + - + + - - - + + + + + + + + + + - @@ -46,15 +44,15 @@

About

-
+
- - -

Updated:

- + +

Updated:

+ +

Translations: Tagalog

@@ -63,14 +61,6 @@ - - -
@@ -134,6 +124,6 @@ Oh, the creative side of making content and themes!

-

© 2021 Contentful

+

© 2022 Contentful

diff --git a/archives/index.html b/archives/index.html index 012b5ad..eae967c 100644 --- a/archives/index.html +++ b/archives/index.html @@ -1,8 +1,9 @@ Archives - + - + + @@ -11,16 +12,17 @@ - - - + + + + + + + + + + - @@ -43,15 +40,15 @@

Archives

-
+
- - -

Updated:

- + +

Updated:

+ +

Translations: Tagalog

@@ -60,14 +57,6 @@ - - -
@@ -94,6 +83,6 @@ -

© 2021 Contentful

+

© 2022 Contentful

diff --git a/articles/asciidoctor-article-template/index.html b/articles/asciidoctor-article-template/index.html index 0b9387d..5b2c99f 100644 --- a/articles/asciidoctor-article-template/index.html +++ b/articles/asciidoctor-article-template/index.html @@ -1,8 +1,9 @@ Asciidoctor Article Template - + - + + - + - - + + + + + + + + - @@ -59,39 +60,21 @@

Asciidoctor Article Template

-
+

Created:

- - -

Updated:

- + +

Updated:

+ +
- - -
@@ -323,6 +306,6 @@ This is an attribute reference Asciidoctor Extended Syntax Guide - + - + + - + - - + + + + + + + + - @@ -47,35 +44,21 @@

Asciidoctor Extended Syntax Guide

-
+

Created:

- - -

Updated:

- + +

Updated:

+ +
- - -
@@ -374,6 +357,6 @@ let example_sketch = new p5(sketchuuuuu, "example-sketch") -

© 2021 Contentful

+

© 2022 Contentful

diff --git a/articles/asciidoctor-syntax-guide/index.html b/articles/asciidoctor-syntax-guide/index.html index 518ce22..b86f8a0 100644 --- a/articles/asciidoctor-syntax-guide/index.html +++ b/articles/asciidoctor-syntax-guide/index.html @@ -1,8 +1,9 @@ Asciidoctor Syntax Guide - + - + + - + - - + + + + + + + + - @@ -50,51 +48,21 @@

Asciidoctor Syntax Guide

-
+

Created:

- - -

Updated:

- + +

Updated:

+ +
- - -
@@ -417,16 +385,16 @@ syntax highlighting. You can use the built-in Hugo shortcode instead.

-
<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Example HTML5 Document</title>
-</head>
-<body>
-  <p>Test</p>
-</body>
-</html>
+
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <p>Test</p>
+</body>
+</html>
@@ -481,6 +449,6 @@ You can use the built-in Hugo shortcode instead.

-

© 2021 Contentful

+

© 2022 Contentful

diff --git a/articles/emoji-support/index.html b/articles/emoji-support/index.html index 02cd878..b412032 100644 --- a/articles/emoji-support/index.html +++ b/articles/emoji-support/index.html @@ -1,8 +1,9 @@ Emoji Support - + - + + @@ -11,17 +12,17 @@ - + - - + + + + + + + + - @@ -44,29 +40,21 @@

Emoji Support

-
+

Created:

- - -

Updated:

- + +

Updated:

+ +
- - -

Emoji can be enabled in a Hugo project in a number of ways.

@@ -76,9 +64,9 @@

The Emoji cheat sheet is a useful reference for emoji shorthand codes.

N.B. The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.

-
.emoji {
-font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
-}
+
.emoji {
+font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
+}
@@ -102,6 +90,6 @@ font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,And -

© 2021 Contentful

+

© 2022 Contentful

diff --git a/articles/extending-contentful/index.html b/articles/extending-contentful/index.html new file mode 100644 index 0000000..4c45ceb --- /dev/null +++ b/articles/extending-contentful/index.html @@ -0,0 +1,328 @@ + +Extending Contentful + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Extending Contentful

+
+
+ + + +

Created:

+ + +

Updated:

+ + +
+
+ + + + +
+ +
+
+
+

Extending a Hugo theme is nothing new and a few places provide a place for the most common extensions. +In this post, I’ll be listing a few personal recipes I’ve always used for extending a Hugo theme. +Though this only applies specifically to Contentful and may need some tweaking when applying it other themes.

+
+
+
+
+

Customizing your <head>

+
+
+

Let’s start with the most basic and perhaps most useful customization: modifying the <head>. +This is useful for adding your own CSS and JavaScript files, changing certain metadata, or adding icons.

+
+
+

First, copy the head partial from the theme (theme/contentful/layouts/partials/head.html) to your own (layouts/partials/head.html). +We’re simply taking advantage of Hugo’s lookup order where we’ve override the head partial with our own copy.

+
+
+

Then, feel free to add your own (or others') scripts and stylesheets, icons and other metadata, or whatever suitable things.

+
+
+

In my case, I often use certain JavaScript libraries like MathJax for mathematical typesetting, Prism for syntax highlighting, and medium-zoom for interactive image zooms.

+
+
+

Here’s the modified code. +(The example code is snipped for brevity.)

+
+
+
+
<!--snip-->
+
+{{- /* MathJax */ -}}
+<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+<script id="MathJax-script" defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+
+{{- /* Prism.js */ -}}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css" type="text/css">
+<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
+<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js">
+<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/keep-markup/prism-keep-markup.min.js">
+
+{{- /* medium-zoom */ -}}
+<script defer src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js"></script>
+<script>window.addEventListener('load', () => mediumZoom('article img', { 'background': 'rgba(0, 0, 0, 0.75)' }))</script>
+
+
+
+

Since most of the JavaScript libraries used here are not really a requirement (except for MathJax for mathematical typesetting), I’ve set them to be loaded at the end of the page loading with defer attribute. +If you have an inline script, you can simply wrap it in an event listener for page loading (window.addEventListener("load", your_function_goes_here)).

+
+
+

If you want document-specific libraries, you have to pass some raw HTML through the parser of the document. +For Goldmark, the default Markdown parser starting Hugo v0.60.0, blocks raw HTML by default and you can disable it by setting markup.goldmark.renderer.unsafe to true.

+
+
+

For Blackfriday, it parses even the raw HTML just fine. +Though, you have to set it as the default Markdown parser.

+
+
+

For Asciidoctor, you can use passthroughs to get raw HTML through.

+
+
+
+
+

Twitter cards

+
+
+

This will add Twitter cards for your webpages. +(Be sure to copy the head partial first in your own layout folder.)

+
+
+

Thankfully, Hugo already has an internal template for Twitter cards. +Simply add {{- template "_internal/twitter_cards.html" . -}} somewhere in your own copy. +(For reference, here’s the source code for the internal template.)

+
+
+

You could also roll your own Twitter cards but I recommend to modify the internal template instead fitting your specific needs. +(Copy the internal template from the given link, create it as a partial in layouts/partials/twitter_cards.html, modify it, and insert the template with {{- partial "twitter_cards.html" -}}.)

+
+
+
+
+

Open Graph protocol

+
+
+

Next up, we’re implementing Open Graph protocol for our webpages. +Commonly used for making suitable format when sharing the content on certain sites like Facebook. +(Be sure to copy the head partial first in your own layout folder.)

+
+
+

Similar to Twitter cards, Hugo has an internal template for this. +Simply add {{- template "_internal/opengraph.html" . -}} somewhere in your own copy. +(For reference, here’s the source code for the internal template.)

+
+
+

If you want more control and customized version of the output, I recommend to copy the internal template and create a partial (e.g., layouts/partials/opengraph.html) and modify it.

+
+
+
+
+

An archive page

+
+
+

This will add an archive page similar to archive pages like these.

+
+
+
+
{{- define "main" -}}
+
+<h1>{{ .Title }}</h1>
+
+{{ .Content }}
+
+<hr>
+
+{{- /* Creating a section that lists out regular pages by year */ -}}
+{{ range $.Site.RegularPages.GroupByPublishDate "2006" }}
+    {{- /* Skip regular pages with an invalid creation date string. */ -}}
+    {{- /* This is convenient if we want to exclude certain posts to be listed by giving no value to `date` in the frontmatter. */ -}}
+    {{- /* We will also exclude hidden pages. */ -}}
+    {{ if ne .Key "0001" }}
+        <section data-year="{{ .Key }}">
+            <h2 id="{{ .Key }}">{{ .Key }}</h2>
+            <ul>
+            {{- range where .Pages "Params.hidden" "!=" true -}}
+                <li>
+                    <date>{{ .Date.Format "2006-01-02" }}</date> -
+                    <a aria-label="{{ .Title }}" href="{{ .Permalink }}">{{ .Title }}</a>
+                </li>
+            {{- end -}}
+            </ul>
+        </section>
+    {{- end }}
+{{ end }}
+
+{{- end -}}
+
+
+
+

We will simply add this as a layout in our customized theme. +Let’s call it archives so we have to add a file in layouts/_default/archives.html then set a page of our project with the layout key in the frontmatter.

+
+
+

We want the archives page to be accessed at $.Site.BaseURL/archives so we’ll simply create archives.adoc (any valid content files with certain file extensions can do, I’m using Asciidoctor) with the following example content.

+
+
+
+
---
+title: "Archives"
+layout: "archive"
+---
+
+= Archives
+
+This is the archives of the century.
+
+
+
+
+
+

Configurable social media links

+
+
+

Most themes offer quick social media links with site configuration. +However, it is only limited to popular media sites such as Facebook, Twitter, Instagram, GitHub, etc.

+
+
+

To get around this, we’ll make use of data templates. +Let’s create a quick game plan how does it work.

+
+
+

The data is a top-level dictionary/object with each key contains an object with the following fields.

+
+
+
    +
  • +

    url is the…​ contact link itself and it is required to have it.

    +
    • +
  • +

    name is the text to appear in the output. +Also required to have.

    +
    • +
  • +

    weight is an integer similar to how Hugo sorts the pages with the lower weight having high precedence; +if this key is absent, it will be interpreted as 0.

    +
    • +
+
+
+

And here’s the data example in TOML which is placed in data/contact.toml.

+
+
+
+
[github]
+    name = "GitHub"
+    url = "https://github.com/foo-dogsquared"
+
+[gitlab]
+    name = "Gitlab"
+    url = "https://gitlab.com/foo-dogsquared"
+
+[keybase]
+    name = "Keybase"
+    url = "https://keybase.io/foo_dogsquared"
+    weight = -1
+
+[twitter]
+    name = "Twitter"
+    url = "https://twitter.com/foo_dogsquared"
+
+
+
+

I want my Keybase profile to appear first than anything else for whatever reason so the weight key is set to -1.

+
+
+

With this data, we can then create a template out of it. +I’ve put the following template in a partial named contacts (i.e., layouts/partials/contacts).

+
+
+
+
<address>
+{{- range (sort $.Site.Data.contact "weight" "asc") -}}
+| <a rel="me" href="{{ .url }}">{{- .name -}}</a> |
+{{- end -}}
+</address>
+
+
+
+

A suggestion (and an exercise) for extending this is to create image links. +Maybe add another key named image that accepts either URL. +The name would now be the image alternative text.

+
+
+
+ +
+
+ +
+ + + + +

Available in other languages: +| + +English | + +Tagalog | + + +

+ + + +

© 2022 Contentful

+ + diff --git a/articles/feed.atom b/articles/feed.atom index 063ea20..9000358 100644 --- a/articles/feed.atom +++ b/articles/feed.atom @@ -2,14 +2,258 @@ Articles on Contentful - © 2021 - Hugo + © 2022 + Hugo 2020-05-12T21:29:52+08:00 https://foo-dogsquared.github.io/hugo-theme-contentful/https://foo-dogsquared.github.io/hugo-theme-contentful/icon.png John Doe johndoe@example.com + https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/ + Extending Contentful + + 2020-05-12T17:25:55+08:00 + 2022-05-13T18:08:06+08:00 +<div id="preamble"> +<div class="sectionbody"> +<div class="paragraph"> +<p>Extending a Hugo theme is nothing new and a <a href="https://gohugo.io/content-management/sections/">few</a> <a href="http://hugocodex.org/add-ons/">places</a> provide a place for the most common extensions. +In this post, I’ll be listing a few personal recipes I’ve always used for extending a Hugo theme. +Though this only applies specifically to Contentful and may need some tweaking when applying it other themes.</p> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="_customizing_your_head">Customizing your <code>&lt;head&gt;</code></h2> +<div class="sectionbody"> +<div class="paragraph"> +<p>Let’s start with the most basic and perhaps most useful customization: modifying the <code>&lt;head</code>&gt;. +This is useful for adding your own CSS and JavaScript files, changing certain metadata, or adding icons.</p> +</div> +<div class="paragraph"> +<p>First, copy the <code>head</code> partial from the theme (<code>theme/contentful/layouts/partials/head.html</code>) to your own (<code>layouts/partials/head.html</code>). +We’re simply taking advantage of <a href="https://gohugo.io/templates/lookup-order/">Hugo’s lookup order</a> where we’ve override the <code>head</code> partial with our own copy.</p> +</div> +<div class="paragraph"> +<p>Then, feel free to add your own (or others&#39;) scripts and stylesheets, <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">icons and other metadata</a>, or whatever suitable things.</p> +</div> +<div class="paragraph"> +<p>In my case, I often use certain JavaScript libraries like <a href="https://www.mathjax.org/">MathJax</a> for mathematical typesetting, <a href="https://prismjs.com/">Prism</a> for syntax highlighting, and <a href="https://github.com/francoischalifour/medium-zoom/">medium-zoom</a> for interactive image zooms.</p> +</div> +<div class="paragraph"> +<p>Here’s the modified code. +(The example code is snipped for brevity.)</p> +</div> +<div class="listingblock"> +<div class="content"> +<pre class="highlight"><code class="language-go" data-lang="go">&lt;!--snip--&gt; + +{{- /* MathJax */ -}} +&lt;script src=&#34;https://polyfill.io/v3/polyfill.min.js?features=es6&#34;&gt;&lt;/script&gt; +&lt;script id=&#34;MathJax-script&#34; defer src=&#34;https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js&#34;&gt;&lt;/script&gt; + +{{- /* Prism.js */ -}} +&lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css&#34; type=&#34;text/css&#34;&gt; +&lt;script defer src=&#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js&#34;&gt;&lt;/script&gt; +&lt;script defer src=&#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js&#34;&gt; +&lt;script defer src=&#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/keep-markup/prism-keep-markup.min.js&#34;&gt; + +{{- /* medium-zoom */ -}} +&lt;script defer src=&#34;https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js&#34;&gt;&lt;/script&gt; +&lt;script&gt;window.addEventListener(&#39;load&#39;, () =&gt; mediumZoom(&#39;article img&#39;, { &#39;background&#39;: &#39;rgba(0, 0, 0, 0.75)&#39; }))&lt;/script&gt;</code></pre> +</div> +</div> +<div class="paragraph"> +<p>Since most of the JavaScript libraries used here are not really a requirement (except for MathJax for mathematical typesetting), I’ve set them to be loaded at the end of the page loading with <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script"><code>defer</code> attribute</a>. +If you have an inline script, you can simply wrap it in an event listener for page loading (<code>window.addEventListener(&#34;load&#34;, your_function_goes_here)</code>).</p> +</div> +<div class="paragraph"> +<p>If you want document-specific libraries, you have to pass some raw HTML through the parser of the document. +For Goldmark, the default Markdown parser starting <a href="https://gohugo.io/news/0.60.0-relnotes/">Hugo v0.60.0</a>, blocks raw HTML by default and you can disable it by setting <code>markup.goldmark.renderer.unsafe</code> to <code>true</code>.</p> +</div> +<div class="paragraph"> +<p>For Blackfriday, it parses even the raw HTML just fine. +Though, you have to set it as the default Markdown parser.</p> +</div> +<div class="paragraph"> +<p>For <a href="https://asciidoctor.org/">Asciidoctor</a>, you can use <a href="https://asciidoctor.org/docs/user-manual/#passthroughs">passthroughs</a> to get raw HTML through.</p> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="_twitter_cards">Twitter cards</h2> +<div class="sectionbody"> +<div class="paragraph"> +<p>This will add <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started">Twitter cards</a> for your webpages. +(Be sure to copy the <code>head</code> partial first in your own layout folder.)</p> +</div> +<div class="paragraph"> +<p>Thankfully, Hugo already has <a href="https://gohugo.io/templates/internal/#twitter-cards">an internal template for Twitter cards</a>. +Simply add <code>{{- template &#34;_internal/twitter_cards.html&#34; . -}}</code> somewhere in your own copy. +(For reference, <a href="https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/twitter_cards.html">here’s the source code for the internal template</a>.)</p> +</div> +<div class="paragraph"> +<p>You could also roll your own Twitter cards but I recommend to modify the internal template instead fitting your specific needs. +(Copy the internal template from the given link, create it as a partial in <code>layouts/partials/twitter_cards.html</code>, modify it, and insert the template with <code>{{- partial &#34;twitter_cards.html&#34; -}}</code>.)</p> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="_open_graph_protocol">Open Graph protocol</h2> +<div class="sectionbody"> +<div class="paragraph"> +<p>Next up, we’re implementing <a href="https://opengraphprotocol.org/">Open Graph protocol</a> for our webpages. +Commonly used for making suitable format when sharing the content on certain sites like Facebook. +(Be sure to copy the <code>head</code> partial first in your own layout folder.)</p> +</div> +<div class="paragraph"> +<p>Similar to Twitter cards, Hugo has <a href="https://gohugo.io/templates/internal/#open-graph">an internal template for this</a>. +Simply add <code>{{- template &#34;_internal/opengraph.html&#34; . -}}</code> somewhere in your own copy. +(For reference, <a href="https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/opengraph.html">here’s the source code for the internal template</a>.)</p> +</div> +<div class="paragraph"> +<p>If you want more control and customized version of the output, I recommend to copy the internal template and create a partial (e.g., <code>layouts/partials/opengraph.html</code>) and modify it.</p> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="_an_archive_page">An archive page</h2> +<div class="sectionbody"> +<div class="paragraph"> +<p>This will add an archive page similar to archive pages <a href="https://davidtranscend.com/archives/">like</a> <a href="https://lukesmith.xyz/blogindex.html">these</a>.</p> +</div> +<div class="listingblock"> +<div class="content"> +<pre class="highlight"><code class="language-go" data-lang="go">{{- define &#34;main&#34; -}} + +&lt;h1&gt;{{ .Title }}&lt;/h1&gt; + +{{ .Content }} + +&lt;hr&gt; + +{{- /* Creating a section that lists out regular pages by year */ -}} +{{ range $.Site.RegularPages.GroupByPublishDate &#34;2006&#34; }} + {{- /* Skip regular pages with an invalid creation date string. */ -}} + {{- /* This is convenient if we want to exclude certain posts to be listed by giving no value to `date` in the frontmatter. */ -}} + {{- /* We will also exclude hidden pages. */ -}} + {{ if ne .Key &#34;0001&#34; }} + &lt;section data-year=&#34;{{ .Key }}&#34;&gt; + &lt;h2 id=&#34;{{ .Key }}&#34;&gt;{{ .Key }}&lt;/h2&gt; + &lt;ul&gt; + {{- range where .Pages &#34;Params.hidden&#34; &#34;!=&#34; true -}} + &lt;li&gt; + &lt;date&gt;{{ .Date.Format &#34;2006-01-02&#34; }}&lt;/date&gt; - + &lt;a aria-label=&#34;{{ .Title }}&#34; href=&#34;{{ .Permalink }}&#34;&gt;{{ .Title }}&lt;/a&gt; + &lt;/li&gt; + {{- end -}} + &lt;/ul&gt; + &lt;/section&gt; + {{- end }} +{{ end }} + +{{- end -}}</code></pre> +</div> +</div> +<div class="paragraph"> +<p>We will simply add this as a layout in our customized theme. +Let’s call it <code>archives</code> so we have to add a file in <code>layouts/_default/archives.html</code> then set a page of our project with the <code>layout</code> key in the frontmatter.</p> +</div> +<div class="paragraph"> +<p>We want the archives page to be accessed at <code>$.Site.BaseURL/archives</code> so we’ll simply create <code>archives.adoc</code> (<a href="https://gohugo.io/content-management/formats/#list-of-content-formats">any valid content files with certain file extensions can do</a>, I’m using <a href="https://asciidoctor.org/">Asciidoctor</a>) with the following example content.</p> +</div> +<div class="listingblock"> +<div class="content"> +<pre class="highlight"><code class="language-asciidoctor" data-lang="asciidoctor">--- +title: &#34;Archives&#34; +layout: &#34;archive&#34; +--- + += Archives + +This is the archives of the century.</code></pre> +</div> +</div> +</div> +</div> +<div class="sect1"> +<h2 id="_configurable_social_media_links">Configurable social media links</h2> +<div class="sectionbody"> +<div class="paragraph"> +<p>Most themes offer quick social media links with site configuration. +However, it is only limited to popular media sites such as Facebook, Twitter, Instagram, GitHub, etc.</p> +</div> +<div class="paragraph"> +<p>To get around this, we’ll make use of <a href="https://gohugo.io/templates/data-templates/">data templates</a>. +Let’s create a quick game plan how does it work.</p> +</div> +<div class="paragraph"> +<p>The data is a top-level dictionary/object with each key contains an object with the following fields.</p> +</div> +<div class="ulist"> +<ul> +<li> +<p><code>url</code> is the…​ contact link itself and it is required to have it.</p> +</li> +<li> +<p><code>name</code> is the text to appear in the output. +Also required to have.</p> +</li> +<li> +<p><code>weight</code> is an integer similar to how Hugo sorts the pages with the lower weight having high precedence; +if this key is absent, it will be interpreted as 0.</p> +</li> +</ul> +</div> +<div class="paragraph"> +<p>And here’s the data example in TOML which is placed in <code>data/contact.toml</code>.</p> +</div> +<div class="listingblock"> +<div class="content"> +<pre class="highlight"><code class="language-toml" data-lang="toml">[github] + name = &#34;GitHub&#34; + url = &#34;https://github.com/foo-dogsquared&#34; + +[gitlab] + name = &#34;Gitlab&#34; + url = &#34;https://gitlab.com/foo-dogsquared&#34; + +[keybase] + name = &#34;Keybase&#34; + url = &#34;https://keybase.io/foo_dogsquared&#34; + weight = -1 + +[twitter] + name = &#34;Twitter&#34; + url = &#34;https://twitter.com/foo_dogsquared&#34;</code></pre> +</div> +</div> +<div class="paragraph"> +<p>I want my Keybase profile to appear first than anything else for whatever reason so the <code>weight</code> key is set to -1.</p> +</div> +<div class="paragraph"> +<p>With this data, we can then create a template out of it. +I’ve put the following template in a partial named <code>contacts</code> (i.e., <code>layouts/partials/contacts</code>).</p> +</div> +<div class="listingblock"> +<div class="content"> +<pre class="highlight"><code class="language-go" data-lang="go">&lt;address&gt; +{{- range (sort $.Site.Data.contact &#34;weight&#34; &#34;asc&#34;) -}} +| &lt;a rel=&#34;me&#34; href=&#34;{{ .url }}&#34;&gt;{{- .name -}}&lt;/a&gt; | +{{- end -}} +&lt;/address&gt;</code></pre> +</div> +</div> +<div class="paragraph"> +<p>A suggestion (and an exercise) for extending this is to create image links. +Maybe add another key named <code>image</code> that accepts either URL. +The <code>name</code> would now be the image alternative text.</p> +</div> +</div> +</div> + + https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/ RSS, Atom, and JSON Feed Support @@ -18,24 +262,51 @@ Jane Doe 2019-09-04T17:22:44+08:00 - 2020-10-24T16:00:52+08:00<div class="paragraph"> -<p>Web feeds are one of the most common ways for a visitor to keep up with someone who creates content. -Nowadays, most social media has that feature such as the subscribing YouTube channels, following Twitter accounts, and watching Deviantart artists. -Outside of those, we have simpler things like <a href="https://www.rssboard.org/rss-2-0-1">RSS</a> and <a href="https://www.jsonfeed.org/">JSON</a> feeds where they are just plain text files describing the content.</p> + 2022-05-13T18:08:06+08:00<div class="paragraph"> +<p>This theme supports RSS, Atom, and JSON feed output for more ways of publishing web content for your visitors. +It is also suitable for reading content from feed readers.</p> </div> <div class="paragraph"> -<p>The Contentful theme doesn’t have a web feed export but we can have it with <a href="https://gohugo.io/hugo-modules/theme-components/">theme components</a>. -For this demo, we’ll use the <a href="https://github.com/foo-dogsquared/hugo-web-feeds">web feed component</a> created by <a href="https://foo-dogsquared.github.io/">foo-dogsquared</a>.</p> +<p>Here are the following documents used as references for the creation of the output feed templates.</p> +</div> +<div class="ulist"> +<ul> +<li> +<p><a href="https://tools.ietf.org/html/rfc4287">Atom 1.0 - IETF RFC4287</a></p> +</li> +<li> +<p><a href="https://jsonfeed.org/version/1">JSON Feed version 1 specifications</a></p> +</li> +<li> +<p><a href="https://cyber.harvard.edu/rss/rss.html">RSS 2.0 specifications</a></p> +</li> +</ul> </div> <div class="paragraph"> -<p>If you’re settling with this option, here’s an example template for installing the web feed module and exporting all of the feed formats all in one fell swoop.</p> +<p>In this demo, it is enabled and you should be able to see them through the following links:</p> +</div> +<div class="ulist"> +<ul> +<li> +<p><strong>RSS</strong>: <code>$HUGO_URL/index.rss</code></p> +</li> +<li> +<p><strong>Atom</strong>: <code>$HUGO_URL/index.atom</code></p> +</li> +<li> +<p><strong>JSON</strong>: <code>$HUGO_URL/index.json</code></p> +</li> +</ul> +</div> +<div class="paragraph"> +<p>For enabling output feeds, utilize the <a href="https://gohugo.io/templates/output-formats">output formats</a> in your site configuration.</p> +</div> +<div class="paragraph"> +<p>If you’re settling with this option, here’s an example template for enabling all of the feed formats.</p> </div> <div class="listingblock"> <div class="content"> -<pre class="highlight"><code class="language-toml" data-lang="toml">[[module.imports]] - path = &#34;github.com/foo-dogsquared/hugo-web-feeds&#34; - -# Visit the following for more information: +<pre class="highlight"><code class="language-toml" data-lang="toml"># Visit the following for more information: # https://gohugo.io/templates/output-formats # Defining the media type of the output formats @@ -48,8 +319,6 @@ For this demo, we’ll use the <a href="https://github.com/foo-dogsquared [mediaTypes.&#34;application/rss+xml&#34;] suffixes = [&#34;rss&#34;, &#34;rss.xml&#34;] # You can remove the &#34;rss.xml&#34; if you want - [mediaTypes.&#34;application/feed+json&#34;] - suffixes = [&#34;json&#34;] # You can remove the &#34;rss.xml&#34; if you want # Including all of the feed output formats in the build @@ -63,7 +332,7 @@ For this demo, we’ll use the <a href="https://github.com/foo-dogsquared baseName = &#34;feed&#34; [outputFormats.Json] - mediaType = &#34;application/feed+json&#34; + mediaType = &#34;application/json&#34; baseName = &#34;feed&#34; @@ -77,283 +346,5 @@ For this demo, we’ll use the <a href="https://github.com/foo-dogsquared section = [&#34;HTML&#34;, &#34;JSON&#34;, &#34;RSS&#34;, &#34;ATOM&#34;]</code></pre> </div> </div> - - - https://foo-dogsquared.github.io/hugo-theme-contentful/articles/asciidoctor-extended-syntax-guide/ - Asciidoctor Extended Syntax Guide - - 2019-08-29T22:09:16+08:00 - 2020-05-12T16:40:21+08:00 -<div id="preamble"> -<div class="sectionbody"> -<div class="paragraph"> -<p>The purpose of this article to make sure not-so-common features of -Asciidoctor (i.e. admonition blocks, callouts) are styled and -fit to the theme. -It also serves as a quick introduction to more Asciidoctor as well. -Feel free to steal this if you want a template for this.</p> -</div> -</div> -</div> -<div class="sect1"> -<h2 id="_admonition_blocks">Admonition blocks</h2> -<div class="sectionbody"> -<div class="paragraph"> -<p>Admonition blocks contain content that are not a part of the main -content but you’ll want to draw attention to the audience anyways.</p> -</div> -<div class="paragraph"> -<p>By default, Asciidoctor provides five labels for admonitions:</p> -</div> -<div class="ulist"> -<ul> -<li> -<p><code>TIP</code></p> -</li> -<li> -<p><code>NOTE</code></p> -</li> -<li> -<p><code>IMPORTANT</code></p> -</li> -<li> -<p><code>CAUTION</code></p> -</li> -<li> -<p><code>WARNING</code></p> -</li> -</ul> -</div> -<div class="sidebarblock"> -<div class="content"> -<div class="title"><code>CAUTION</code> vs <code>WARNING</code></div> -<div class="paragraph"> -<p>As the <a href="https://asciidoctor.org/docs/user-manual/#admonition">user manual</a> -has said, <code>CAUTION</code> and <code>WARNING</code> should be used with different semantics.</p> -</div> -<div class="paragraph"> -<p><code>CAUTION</code> basically advises the user to observe care. -<code>WARNING</code> warns the user about the dangers or consequences that’ll exist.</p> -</div> -</div> -</div> -<div class="paragraph"> -<p>Writing an admonition is intuitively easy, simply write the label -in all uppercase and append with a colon. -Then write the content after.</p> -</div> -<div class="listingblock"> -<div class="content"> -<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">TIP: Lorem ipsum dolor sit amet consectetur adipiscing elit varius cursus -orci nulla, fames nisl sodales scelerisque eu consequat sem imperdiet ac mi -vivamus tempor, accumsan ad justo odio viverra praesent senectus class egestas duis.</code></pre> -</div> -</div> -<div class="paragraph"> -<p>It’ll render as this:</p> -</div> -<div class="admonitionblock tip"> -<table> -<tbody><tr> -<td class="icon"> -<div class="title">Tip</div> -</td> -<td class="content"> -Lorem ipsum dolor sit amet consectetur adipiscing elit varius cursus -orci nulla, fames nisl sodales scelerisque eu consequat sem imperdiet ac mi -vivamus tempor, accumsan ad justo odio viverra praesent senectus class egestas duis. -</td> -</tr> -</tbody></table> -</div> -<div class="paragraph"> -<p>In case you want to style the labels differently such as assigning -appropriate colors or an icon to the rest of the labels, -here’s the rest of them:</p> -</div> -<div class="admonitionblock note"> -<table> -<tbody><tr> -<td class="icon"> -<div class="title">Note</div> -</td> -<td class="content"> -Malesuada mattis aenean ultrices netus cursus viverra vivamus ultricies, -velit molestie penatibus phasellus in ante luctus, habitant suspendisse eros -turpis taciti risus himenaeos. -</td> -</tr> -</tbody></table> -</div> -<div class="admonitionblock important"> -<table> -<tbody><tr> -<td class="icon"> -<div class="title">Important</div> -</td> -<td class="content"> -Velit fringilla feugiat nibh id faucibus scelerisque facilisis ac, -suscipit quisque odio libero ullamcorper curabitur fames nascetur, elementum -tristique hac nisl etiam dictumst dapibus. -</td> -</tr> -</tbody></table> -</div> -<div class="admonitionblock caution"> -<table> -<tbody><tr> -<td class="icon"> -<div class="title">Caution</div> -</td> -<td class="content"> -Tempus dui aptent tempor torquent lacinia sem cursus porta cras semper -accumsan feugiat, himenaeos mi ullamcorper pharetra enim class eget auctor conubia -metus curabitur. -</td> -</tr> -</tbody></table> -</div> -<div class="admonitionblock warning"> -<table> -<tbody><tr> -<td class="icon"> -<div class="title">Warning</div> -</td> -<td class="content"> -Aliquet ut maecenas mollis id enim nibh suscipit quisque posuere cum fusce, -dignissim ad curabitur odio ac diam pharetra platea vivamus eleifend. -</td> -</tr> -</tbody></table> -</div> -</div> -</div> -<div class="sect1"> -<h2 id="_callouts">Callouts</h2> -<div class="sectionbody"> -<div class="paragraph"> -<p>Callouts are used to add annotations within a verbatim block. -This is especially useful for code listings in order to effectively explain what -is going on within the code.</p> -</div> -<div class="paragraph"> -<p>Here’s an example of using callouts.</p> -</div> -<div class="listingblock"> -<div class="content"> -<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">[source,python] ----- -from pathlib import Path -from re import compile, match - -current_directory = Path(&#34;.&#34;) &lt;1&gt; -notes_directory = current_directory / &#34;notes/&#34; &lt;2&gt; ----- -&lt;1&gt; Created a Path object -&lt;2&gt; Appending a Path object with &#34;/&#34;</code></pre> -</div> -</div> -<div class="paragraph"> -<p>And it’ll render as:</p> -</div> -<div class="listingblock"> -<div class="content"> -<pre class="highlight"><code class="language-python" data-lang="python">from pathlib import Path -from re import compile, match - -current_directory = Path(&#34;.&#34;) # <b class="conum">(1)</b> -notes_directory = current_directory / &#34;notes/&#34; # <b class="conum">(2)</b></code></pre> -</div> -</div> -<div class="colist arabic"> -<ol> -<li> -<p>Created a <code>Path</code> object</p> -</li> -<li> -<p>Appending a <code>Path</code> object with &#34;/&#34;</p> -</li> -</ol> -</div> -<div class="paragraph"> -<p>One of the most important you should style is the callout number -on the code listings block. -Normally, when a user wants to copy-paste (even though I don’t personally -encourage it), the callout number gets in the way and they have to -manually remove them which can be annoying.</p> -</div> -<div class="paragraph"> -<p>Either attach the property <code>user-select</code> with it or take a part from the -default Asciidoctor stylesheet and include it in your own stylesheet.</p> -</div> -</div> -</div> -<div class="sect1"> -<h2 id="_passthroughs">Passthroughs</h2> -<div class="sectionbody"> -<div class="paragraph"> -<p>A <a href="https://asciidoctor.org/docs/user-manual/#passthroughs">passthrough</a> passes the input as it is on the final output. -This is useful for web-based outputs, for example passing raw HTML for interactive scripts or to create a live result.</p> -</div> -<div class="paragraph"> -<p>Below is a very simple example with a <a href="https://p5js.org/">p5.js</a> sketch.</p> -</div> -<div id="example-sketch"></div> -<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script> -<script> -const sketchuuuuu = ( sketch ) => { - let x = 100; - let y = 100; - - sketch.setup = () => { - sketch.createCanvas(300, 380); - }; - - sketch.draw = () => { - sketch.background(0); - sketch.fill(255); - sketch.rect(x,y,50,50); - sketch.ellipse(sketch["mouseX"], sketch["mouseY"], 20); - }; -}; - -let example_sketch = new p5(sketchuuuuu, "example-sketch") -</script> -<div class="paragraph"> -<p>Here is the input from the source code of this document.</p> -</div> -<div class="listingblock"> -<div class="content"> -<pre class="highlight"><code class="language-asciidoctor" data-lang="asciidoctor">++++ -&lt;div id=&#34;example-sketch&#34;&gt;&lt;/div&gt; -&lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js&#34;&gt;&lt;/script&gt; -&lt;script&gt; -const sketchuuuuu = ( sketch ) =&gt; { - let x = 100; - let y = 100; - - sketch.setup = () =&gt; { - sketch.createCanvas(300, 380); - }; - - sketch.draw = () =&gt; { - sketch.background(0); - sketch.fill(255); - sketch.rect(x,y,50,50); - sketch.ellipse(sketch[&#34;mouseX&#34;], sketch[&#34;mouseY&#34;], 20); - }; -}; - -let example_sketch = new p5(sketchuuuuu, &#34;example-sketch&#34;) -&lt;/script&gt; -++++</code></pre> -</div> -</div> -<div class="paragraph"> -<p>This is the closest instance of <a href="https://en.wikipedia.org/wiki/Literate_programming">literate programming</a> in the web when using Asciidoctor. -(Sadly, not as flexible or cool as <a href="https://orgmode.org/">Org-Mode</a> or <a href="https://jupyter.org/">Jupyter Notebooks</a>.)</p> -</div> -</div> -</div> diff --git a/articles/feed.json b/articles/feed.json index 72e73d2..b6bdb27 100644 --- a/articles/feed.json +++ b/articles/feed.json @@ -6,4 +6,4 @@ "description": "Recent content in Articles on Contentful", "authors":[{"name":"John Doe"}], "items": - [{"content_html":"\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWeb feeds are one of the most common ways for a visitor to keep up with someone who creates content.\nNowadays, most social media has that feature such as the subscribing YouTube channels, following Twitter accounts, and watching Deviantart artists.\nOutside of those, we have simpler things like \u003ca href=\"https://www.rssboard.org/rss-2-0-1\"\u003eRSS\u003c/a\u003e and \u003ca href=\"https://www.jsonfeed.org/\"\u003eJSON\u003c/a\u003e feeds where they are just plain text files describing the content.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThe Contentful theme doesn’t have a web feed export but we can have it with \u003ca href=\"https://gohugo.io/hugo-modules/theme-components/\"\u003etheme components\u003c/a\u003e.\nFor this demo, we’ll use the \u003ca href=\"https://github.com/foo-dogsquared/hugo-web-feeds\"\u003eweb feed component\u003c/a\u003e created by \u003ca href=\"https://foo-dogsquared.github.io/\"\u003efoo-dogsquared\u003c/a\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIf you’re settling with this option, here’s an example template for installing the web feed module and exporting all of the feed formats all in one fell swoop.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e[[module.imports]]\n path = \u0026#34;github.com/foo-dogsquared/hugo-web-feeds\u0026#34;\n\n# Visit the following for more information:\n# https://gohugo.io/templates/output-formats\n\n# Defining the media type of the output formats\n# For JSON format, it doesn\u0026#39;t need to be since it\u0026#39;s already built-in into Hugo\n[mediaTypes]\n [mediaTypes.\u0026#34;application/atom+xml\u0026#34;]\n suffixes = [\u0026#34;atom\u0026#34;, \u0026#34;atom.xml\u0026#34;] # You can remove the \u0026#34;atom.xml\u0026#34; if you want\n\n # Redefining RSS media type for the additional suffix\n [mediaTypes.\u0026#34;application/rss+xml\u0026#34;]\n suffixes = [\u0026#34;rss\u0026#34;, \u0026#34;rss.xml\u0026#34;] # You can remove the \u0026#34;rss.xml\u0026#34; if you want\n\n [mediaTypes.\u0026#34;application/feed+json\u0026#34;]\n suffixes = [\u0026#34;json\u0026#34;] # You can remove the \u0026#34;rss.xml\u0026#34; if you want\n\n\n# Including all of the feed output formats in the build\n[outputFormats]\n [outputFormats.Rss]\n mediaType = \u0026#34;application/rss+xml\u0026#34;\n baseName = \u0026#34;feed\u0026#34;\n\n [outputFormats.Atom]\n mediaType = \u0026#34;application/atom+xml\u0026#34;\n baseName = \u0026#34;feed\u0026#34;\n\n [outputFormats.Json]\n mediaType = \u0026#34;application/feed+json\u0026#34;\n baseName = \u0026#34;feed\u0026#34;\n\n\n# Indicating what output formats shall be included\n# for the following kinds\n[outputs]\n # .Site.BaseURL/index.* is available\n home = [\u0026#34;HTML\u0026#34;, \u0026#34;JSON\u0026#34;, \u0026#34;RSS\u0026#34;, \u0026#34;ATOM\u0026#34;]\n\n # .Site.BaseURL/$section/index.* is available\n section = [\u0026#34;HTML\u0026#34;, \u0026#34;JSON\u0026#34;, \u0026#34;RSS\u0026#34;, \u0026#34;ATOM\u0026#34;]\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n","date_modified":"2020-10-24T16:00:52+08:00","date_published":"2019-09-04T17:22:44+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/","summary":"Web feeds are one of the most common ways for a visitor to keep up with someone who creates content. Nowadays, most social media has that feature such as the subscribing YouTube channels, following Twitter accounts, and watching Deviantart artists. Outside of those, we have simpler things like RSS and JSON feeds where they are just plain text files describing the content.\n The Contentful theme doesn’t have a web feed export but we can have it with theme components.","tags":["this is a test tag","tag2"],"title":"RSS, Atom, and JSON Feed Support","url":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/"},{"content_html":"\n\u003cdiv id=\"preamble\"\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThe purpose of this article to make sure not-so-common features of\nAsciidoctor (i.e. admonition blocks, callouts) are styled and\nfit to the theme.\nIt also serves as a quick introduction to more Asciidoctor as well.\nFeel free to steal this if you want a template for this.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_admonition_blocks\"\u003eAdmonition blocks\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAdmonition blocks contain content that are not a part of the main\ncontent but you’ll want to draw attention to the audience anyways.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eBy default, Asciidoctor provides five labels for admonitions:\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"ulist\"\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eTIP\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eNOTE\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eIMPORTANT\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eCAUTION\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eWARNING\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sidebarblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cdiv class=\"title\"\u003e\u003ccode\u003eCAUTION\u003c/code\u003e vs \u003ccode\u003eWARNING\u003c/code\u003e\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAs the \u003ca href=\"https://asciidoctor.org/docs/user-manual/#admonition\"\u003euser manual\u003c/a\u003e\nhas said, \u003ccode\u003eCAUTION\u003c/code\u003e and \u003ccode\u003eWARNING\u003c/code\u003e should be used with different semantics.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003e\u003ccode\u003eCAUTION\u003c/code\u003e basically advises the user to observe care.\n\u003ccode\u003eWARNING\u003c/code\u003e warns the user about the dangers or consequences that’ll exist.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWriting an admonition is intuitively easy, simply write the label\nin all uppercase and append with a colon.\nThen write the content after.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-asciidoc\" data-lang=\"asciidoc\"\u003eTIP: Lorem ipsum dolor sit amet consectetur adipiscing elit varius cursus\norci nulla, fames nisl sodales scelerisque eu consequat sem imperdiet ac mi\nvivamus tempor, accumsan ad justo odio viverra praesent senectus class egestas duis.\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIt’ll render as this:\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"admonitionblock tip\"\u003e\n\u003ctable\u003e\n\u003ctbody\u003e\u003ctr\u003e\n\u003ctd class=\"icon\"\u003e\n\u003cdiv class=\"title\"\u003eTip\u003c/div\u003e\n\u003c/td\u003e\n\u003ctd class=\"content\"\u003e\nLorem ipsum dolor sit amet consectetur adipiscing elit varius cursus\norci nulla, fames nisl sodales scelerisque eu consequat sem imperdiet ac mi\nvivamus tempor, accumsan ad justo odio viverra praesent senectus class egestas duis.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIn case you want to style the labels differently such as assigning\nappropriate colors or an icon to the rest of the labels,\nhere’s the rest of them:\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"admonitionblock note\"\u003e\n\u003ctable\u003e\n\u003ctbody\u003e\u003ctr\u003e\n\u003ctd class=\"icon\"\u003e\n\u003cdiv class=\"title\"\u003eNote\u003c/div\u003e\n\u003c/td\u003e\n\u003ctd class=\"content\"\u003e\nMalesuada mattis aenean ultrices netus cursus viverra vivamus ultricies,\nvelit molestie penatibus phasellus in ante luctus, habitant suspendisse eros\nturpis taciti risus himenaeos.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003cdiv class=\"admonitionblock important\"\u003e\n\u003ctable\u003e\n\u003ctbody\u003e\u003ctr\u003e\n\u003ctd class=\"icon\"\u003e\n\u003cdiv class=\"title\"\u003eImportant\u003c/div\u003e\n\u003c/td\u003e\n\u003ctd class=\"content\"\u003e\nVelit fringilla feugiat nibh id faucibus scelerisque facilisis ac,\nsuscipit quisque odio libero ullamcorper curabitur fames nascetur, elementum\ntristique hac nisl etiam dictumst dapibus.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003cdiv class=\"admonitionblock caution\"\u003e\n\u003ctable\u003e\n\u003ctbody\u003e\u003ctr\u003e\n\u003ctd class=\"icon\"\u003e\n\u003cdiv class=\"title\"\u003eCaution\u003c/div\u003e\n\u003c/td\u003e\n\u003ctd class=\"content\"\u003e\nTempus dui aptent tempor torquent lacinia sem cursus porta cras semper\naccumsan feugiat, himenaeos mi ullamcorper pharetra enim class eget auctor conubia\nmetus curabitur.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003cdiv class=\"admonitionblock warning\"\u003e\n\u003ctable\u003e\n\u003ctbody\u003e\u003ctr\u003e\n\u003ctd class=\"icon\"\u003e\n\u003cdiv class=\"title\"\u003eWarning\u003c/div\u003e\n\u003c/td\u003e\n\u003ctd class=\"content\"\u003e\nAliquet ut maecenas mollis id enim nibh suscipit quisque posuere cum fusce,\ndignissim ad curabitur odio ac diam pharetra platea vivamus eleifend.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_callouts\"\u003eCallouts\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eCallouts are used to add annotations within a verbatim block.\nThis is especially useful for code listings in order to effectively explain what\nis going on within the code.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eHere’s an example of using callouts.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-asciidoc\" data-lang=\"asciidoc\"\u003e[source,python]\n----\nfrom pathlib import Path\nfrom re import compile, match\n\ncurrent_directory = Path(\u0026#34;.\u0026#34;) \u0026lt;1\u0026gt;\nnotes_directory = current_directory / \u0026#34;notes/\u0026#34; \u0026lt;2\u0026gt;\n----\n\u0026lt;1\u0026gt; Created a Path object\n\u0026lt;2\u0026gt; Appending a Path object with \u0026#34;/\u0026#34;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAnd it’ll render as:\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-python\" data-lang=\"python\"\u003efrom pathlib import Path\nfrom re import compile, match\n\ncurrent_directory = Path(\u0026#34;.\u0026#34;) # \u003cb class=\"conum\"\u003e(1)\u003c/b\u003e\nnotes_directory = current_directory / \u0026#34;notes/\u0026#34; # \u003cb class=\"conum\"\u003e(2)\u003c/b\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"colist arabic\"\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cp\u003eCreated a \u003ccode\u003ePath\u003c/code\u003e object\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eAppending a \u003ccode\u003ePath\u003c/code\u003e object with \u0026#34;/\u0026#34;\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eOne of the most important you should style is the callout number\non the code listings block.\nNormally, when a user wants to copy-paste (even though I don’t personally\nencourage it), the callout number gets in the way and they have to\nmanually remove them which can be annoying.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eEither attach the property \u003ccode\u003euser-select\u003c/code\u003e with it or take a part from the\ndefault Asciidoctor stylesheet and include it in your own stylesheet.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_passthroughs\"\u003ePassthroughs\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eA \u003ca href=\"https://asciidoctor.org/docs/user-manual/#passthroughs\"\u003epassthrough\u003c/a\u003e passes the input as it is on the final output.\nThis is useful for web-based outputs, for example passing raw HTML for interactive scripts or to create a live result.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eBelow is a very simple example with a \u003ca href=\"https://p5js.org/\"\u003ep5.js\u003c/a\u003e sketch.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv id=\"example-sketch\"\u003e\u003c/div\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nconst sketchuuuuu = ( sketch ) =\u003e {\n let x = 100;\n let y = 100;\n\n sketch.setup = () =\u003e {\n sketch.createCanvas(300, 380);\n };\n\n sketch.draw = () =\u003e {\n sketch.background(0);\n sketch.fill(255);\n sketch.rect(x,y,50,50);\n sketch.ellipse(sketch[\"mouseX\"], sketch[\"mouseY\"], 20);\n };\n};\n\nlet example_sketch = new p5(sketchuuuuu, \"example-sketch\")\n\u003c/script\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eHere is the input from the source code of this document.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-asciidoctor\" data-lang=\"asciidoctor\"\u003e++++\n\u0026lt;div id=\u0026#34;example-sketch\u0026#34;\u0026gt;\u0026lt;/div\u0026gt;\n\u0026lt;script src=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script\u0026gt;\nconst sketchuuuuu = ( sketch ) =\u0026gt; {\n let x = 100;\n let y = 100;\n\n sketch.setup = () =\u0026gt; {\n sketch.createCanvas(300, 380);\n };\n\n sketch.draw = () =\u0026gt; {\n sketch.background(0);\n sketch.fill(255);\n sketch.rect(x,y,50,50);\n sketch.ellipse(sketch[\u0026#34;mouseX\u0026#34;], sketch[\u0026#34;mouseY\u0026#34;], 20);\n };\n};\n\nlet example_sketch = new p5(sketchuuuuu, \u0026#34;example-sketch\u0026#34;)\n\u0026lt;/script\u0026gt;\n++++\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThis is the closest instance of \u003ca href=\"https://en.wikipedia.org/wiki/Literate_programming\"\u003eliterate programming\u003c/a\u003e in the web when using Asciidoctor.\n(Sadly, not as flexible or cool as \u003ca href=\"https://orgmode.org/\"\u003eOrg-Mode\u003c/a\u003e or \u003ca href=\"https://jupyter.org/\"\u003eJupyter Notebooks\u003c/a\u003e.)\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n","date_modified":"2020-05-12T16:40:21+08:00","date_published":"2019-08-29T22:09:16+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/asciidoctor-extended-syntax-guide/","summary":"The purpose of this article to make sure not-so-common features of Asciidoctor (i.e. admonition blocks, callouts) are styled and fit to the theme. It also serves as a quick introduction to more Asciidoctor as well. Feel free to steal this if you want a template for this.\n Admonition blocks Admonition blocks contain content that are not a part of the main content but you’ll want to draw attention to the audience anyways.","tags":["asciidoctor","guide"],"title":"Asciidoctor Extended Syntax Guide","url":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/asciidoctor-extended-syntax-guide/"}]} + [{"content_html":"\n\u003cdiv id=\"preamble\"\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eExtending a Hugo theme is nothing new and a \u003ca href=\"https://gohugo.io/content-management/sections/\"\u003efew\u003c/a\u003e \u003ca href=\"http://hugocodex.org/add-ons/\"\u003eplaces\u003c/a\u003e provide a place for the most common extensions.\nIn this post, I’ll be listing a few personal recipes I’ve always used for extending a Hugo theme.\nThough this only applies specifically to Contentful and may need some tweaking when applying it other themes.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_customizing_your_head\"\u003eCustomizing your \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eLet’s start with the most basic and perhaps most useful customization: modifying the \u003ccode\u003e\u0026lt;head\u003c/code\u003e\u0026gt;.\nThis is useful for adding your own CSS and JavaScript files, changing certain metadata, or adding icons.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eFirst, copy the \u003ccode\u003ehead\u003c/code\u003e partial from the theme (\u003ccode\u003etheme/contentful/layouts/partials/head.html\u003c/code\u003e) to your own (\u003ccode\u003elayouts/partials/head.html\u003c/code\u003e).\nWe’re simply taking advantage of \u003ca href=\"https://gohugo.io/templates/lookup-order/\"\u003eHugo’s lookup order\u003c/a\u003e where we’ve override the \u003ccode\u003ehead\u003c/code\u003e partial with our own copy.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThen, feel free to add your own (or others\u0026#39;) scripts and stylesheets, \u003ca href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML\"\u003eicons and other metadata\u003c/a\u003e, or whatever suitable things.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIn my case, I often use certain JavaScript libraries like \u003ca href=\"https://www.mathjax.org/\"\u003eMathJax\u003c/a\u003e for mathematical typesetting, \u003ca href=\"https://prismjs.com/\"\u003ePrism\u003c/a\u003e for syntax highlighting, and \u003ca href=\"https://github.com/francoischalifour/medium-zoom/\"\u003emedium-zoom\u003c/a\u003e for interactive image zooms.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eHere’s the modified code.\n(The example code is snipped for brevity.)\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u0026lt;!--snip--\u0026gt;\n\n{{- /* MathJax */ -}}\n\u0026lt;script src=\u0026#34;https://polyfill.io/v3/polyfill.min.js?features=es6\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script id=\u0026#34;MathJax-script\u0026#34; defer src=\u0026#34;https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\n{{- /* Prism.js */ -}}\n\u0026lt;link rel=\u0026#34;stylesheet\u0026#34; href=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css\u0026#34; type=\u0026#34;text/css\u0026#34;\u0026gt;\n\u0026lt;script defer src=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script defer src=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js\u0026#34;\u0026gt;\n\u0026lt;script defer src=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/keep-markup/prism-keep-markup.min.js\u0026#34;\u0026gt;\n\n{{- /* medium-zoom */ -}}\n\u0026lt;script defer src=\u0026#34;https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script\u0026gt;window.addEventListener(\u0026#39;load\u0026#39;, () =\u0026gt; mediumZoom(\u0026#39;article img\u0026#39;, { \u0026#39;background\u0026#39;: \u0026#39;rgba(0, 0, 0, 0.75)\u0026#39; }))\u0026lt;/script\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eSince most of the JavaScript libraries used here are not really a requirement (except for MathJax for mathematical typesetting), I’ve set them to be loaded at the end of the page loading with \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script\"\u003e\u003ccode\u003edefer\u003c/code\u003e attribute\u003c/a\u003e.\nIf you have an inline script, you can simply wrap it in an event listener for page loading (\u003ccode\u003ewindow.addEventListener(\u0026#34;load\u0026#34;, your_function_goes_here)\u003c/code\u003e).\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIf you want document-specific libraries, you have to pass some raw HTML through the parser of the document.\nFor Goldmark, the default Markdown parser starting \u003ca href=\"https://gohugo.io/news/0.60.0-relnotes/\"\u003eHugo v0.60.0\u003c/a\u003e, blocks raw HTML by default and you can disable it by setting \u003ccode\u003emarkup.goldmark.renderer.unsafe\u003c/code\u003e to \u003ccode\u003etrue\u003c/code\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eFor Blackfriday, it parses even the raw HTML just fine.\nThough, you have to set it as the default Markdown parser.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eFor \u003ca href=\"https://asciidoctor.org/\"\u003eAsciidoctor\u003c/a\u003e, you can use \u003ca href=\"https://asciidoctor.org/docs/user-manual/#passthroughs\"\u003epassthroughs\u003c/a\u003e to get raw HTML through.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_twitter_cards\"\u003eTwitter cards\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThis will add \u003ca href=\"https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started\"\u003eTwitter cards\u003c/a\u003e for your webpages.\n(Be sure to copy the \u003ccode\u003ehead\u003c/code\u003e partial first in your own layout folder.)\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThankfully, Hugo already has \u003ca href=\"https://gohugo.io/templates/internal/#twitter-cards\"\u003ean internal template for Twitter cards\u003c/a\u003e.\nSimply add \u003ccode\u003e{{- template \u0026#34;_internal/twitter_cards.html\u0026#34; . -}}\u003c/code\u003e somewhere in your own copy.\n(For reference, \u003ca href=\"https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/twitter_cards.html\"\u003ehere’s the source code for the internal template\u003c/a\u003e.)\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eYou could also roll your own Twitter cards but I recommend to modify the internal template instead fitting your specific needs.\n(Copy the internal template from the given link, create it as a partial in \u003ccode\u003elayouts/partials/twitter_cards.html\u003c/code\u003e, modify it, and insert the template with \u003ccode\u003e{{- partial \u0026#34;twitter_cards.html\u0026#34; -}}\u003c/code\u003e.)\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_open_graph_protocol\"\u003eOpen Graph protocol\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eNext up, we’re implementing \u003ca href=\"https://opengraphprotocol.org/\"\u003eOpen Graph protocol\u003c/a\u003e for our webpages.\nCommonly used for making suitable format when sharing the content on certain sites like Facebook.\n(Be sure to copy the \u003ccode\u003ehead\u003c/code\u003e partial first in your own layout folder.)\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eSimilar to Twitter cards, Hugo has \u003ca href=\"https://gohugo.io/templates/internal/#open-graph\"\u003ean internal template for this\u003c/a\u003e.\nSimply add \u003ccode\u003e{{- template \u0026#34;_internal/opengraph.html\u0026#34; . -}}\u003c/code\u003e somewhere in your own copy.\n(For reference, \u003ca href=\"https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/opengraph.html\"\u003ehere’s the source code for the internal template\u003c/a\u003e.)\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIf you want more control and customized version of the output, I recommend to copy the internal template and create a partial (e.g., \u003ccode\u003elayouts/partials/opengraph.html\u003c/code\u003e) and modify it.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_an_archive_page\"\u003eAn archive page\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThis will add an archive page similar to archive pages \u003ca href=\"https://davidtranscend.com/archives/\"\u003elike\u003c/a\u003e \u003ca href=\"https://lukesmith.xyz/blogindex.html\"\u003ethese\u003c/a\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e{{- define \u0026#34;main\u0026#34; -}}\n\n\u0026lt;h1\u0026gt;{{ .Title }}\u0026lt;/h1\u0026gt;\n\n{{ .Content }}\n\n\u0026lt;hr\u0026gt;\n\n{{- /* Creating a section that lists out regular pages by year */ -}}\n{{ range $.Site.RegularPages.GroupByPublishDate \u0026#34;2006\u0026#34; }}\n {{- /* Skip regular pages with an invalid creation date string. */ -}}\n {{- /* This is convenient if we want to exclude certain posts to be listed by giving no value to `date` in the frontmatter. */ -}}\n {{- /* We will also exclude hidden pages. */ -}}\n {{ if ne .Key \u0026#34;0001\u0026#34; }}\n \u0026lt;section data-year=\u0026#34;{{ .Key }}\u0026#34;\u0026gt;\n \u0026lt;h2 id=\u0026#34;{{ .Key }}\u0026#34;\u0026gt;{{ .Key }}\u0026lt;/h2\u0026gt;\n \u0026lt;ul\u0026gt;\n {{- range where .Pages \u0026#34;Params.hidden\u0026#34; \u0026#34;!=\u0026#34; true -}}\n \u0026lt;li\u0026gt;\n \u0026lt;date\u0026gt;{{ .Date.Format \u0026#34;2006-01-02\u0026#34; }}\u0026lt;/date\u0026gt; -\n \u0026lt;a aria-label=\u0026#34;{{ .Title }}\u0026#34; href=\u0026#34;{{ .Permalink }}\u0026#34;\u0026gt;{{ .Title }}\u0026lt;/a\u0026gt;\n \u0026lt;/li\u0026gt;\n {{- end -}}\n \u0026lt;/ul\u0026gt;\n \u0026lt;/section\u0026gt;\n {{- end }}\n{{ end }}\n\n{{- end -}}\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWe will simply add this as a layout in our customized theme.\nLet’s call it \u003ccode\u003earchives\u003c/code\u003e so we have to add a file in \u003ccode\u003elayouts/_default/archives.html\u003c/code\u003e then set a page of our project with the \u003ccode\u003elayout\u003c/code\u003e key in the frontmatter.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWe want the archives page to be accessed at \u003ccode\u003e$.Site.BaseURL/archives\u003c/code\u003e so we’ll simply create \u003ccode\u003earchives.adoc\u003c/code\u003e (\u003ca href=\"https://gohugo.io/content-management/formats/#list-of-content-formats\"\u003eany valid content files with certain file extensions can do\u003c/a\u003e, I’m using \u003ca href=\"https://asciidoctor.org/\"\u003eAsciidoctor\u003c/a\u003e) with the following example content.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-asciidoctor\" data-lang=\"asciidoctor\"\u003e---\ntitle: \u0026#34;Archives\u0026#34;\nlayout: \u0026#34;archive\u0026#34;\n---\n\n= Archives\n\nThis is the archives of the century.\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_configurable_social_media_links\"\u003eConfigurable social media links\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eMost themes offer quick social media links with site configuration.\nHowever, it is only limited to popular media sites such as Facebook, Twitter, Instagram, GitHub, etc.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eTo get around this, we’ll make use of \u003ca href=\"https://gohugo.io/templates/data-templates/\"\u003edata templates\u003c/a\u003e.\nLet’s create a quick game plan how does it work.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThe data is a top-level dictionary/object with each key contains an object with the following fields.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"ulist\"\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eurl\u003c/code\u003e is the…​ contact link itself and it is required to have it.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003ename\u003c/code\u003e is the text to appear in the output.\nAlso required to have.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eweight\u003c/code\u003e is an integer similar to how Hugo sorts the pages with the lower weight having high precedence;\nif this key is absent, it will be interpreted as 0.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAnd here’s the data example in TOML which is placed in \u003ccode\u003edata/contact.toml\u003c/code\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e[github]\n name = \u0026#34;GitHub\u0026#34;\n url = \u0026#34;https://github.com/foo-dogsquared\u0026#34;\n\n[gitlab]\n name = \u0026#34;Gitlab\u0026#34;\n url = \u0026#34;https://gitlab.com/foo-dogsquared\u0026#34;\n\n[keybase]\n name = \u0026#34;Keybase\u0026#34;\n url = \u0026#34;https://keybase.io/foo_dogsquared\u0026#34;\n weight = -1\n\n[twitter]\n name = \u0026#34;Twitter\u0026#34;\n url = \u0026#34;https://twitter.com/foo_dogsquared\u0026#34;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eI want my Keybase profile to appear first than anything else for whatever reason so the \u003ccode\u003eweight\u003c/code\u003e key is set to -1.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWith this data, we can then create a template out of it.\nI’ve put the following template in a partial named \u003ccode\u003econtacts\u003c/code\u003e (i.e., \u003ccode\u003elayouts/partials/contacts\u003c/code\u003e).\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u0026lt;address\u0026gt;\n{{- range (sort $.Site.Data.contact \u0026#34;weight\u0026#34; \u0026#34;asc\u0026#34;) -}}\n| \u0026lt;a rel=\u0026#34;me\u0026#34; href=\u0026#34;{{ .url }}\u0026#34;\u0026gt;{{- .name -}}\u0026lt;/a\u0026gt; |\n{{- end -}}\n\u0026lt;/address\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eA suggestion (and an exercise) for extending this is to create image links.\nMaybe add another key named \u003ccode\u003eimage\u003c/code\u003e that accepts either URL.\nThe \u003ccode\u003ename\u003c/code\u003e would now be the image alternative text.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n","date_modified":"2022-05-13T18:08:06+08:00","date_published":"2020-05-12T17:25:55+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/","summary":"Extending a Hugo theme is nothing new and a few places provide a place for the most common extensions. In this post, I’ll be listing a few personal recipes I’ve always used for extending a Hugo theme. Though this only applies specifically to Contentful and may need some tweaking when applying it other themes.\n Customizing your \u0026lt;head\u0026gt; Let’s start with the most basic and perhaps most useful customization: modifying the \u0026lt;head\u0026gt;.","tags":["theme","extending"],"title":"Extending Contentful","url":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/"},{"content_html":"\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThis theme supports RSS, Atom, and JSON feed output for more ways of publishing web content for your visitors.\nIt is also suitable for reading content from feed readers.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eHere are the following documents used as references for the creation of the output feed templates.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"ulist\"\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://tools.ietf.org/html/rfc4287\"\u003eAtom 1.0 - IETF RFC4287\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://jsonfeed.org/version/1\"\u003eJSON Feed version 1 specifications\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://cyber.harvard.edu/rss/rss.html\"\u003eRSS 2.0 specifications\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIn this demo, it is enabled and you should be able to see them through the following links:\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"ulist\"\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eRSS\u003c/strong\u003e: \u003ccode\u003e$HUGO_URL/index.rss\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eAtom\u003c/strong\u003e: \u003ccode\u003e$HUGO_URL/index.atom\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eJSON\u003c/strong\u003e: \u003ccode\u003e$HUGO_URL/index.json\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eFor enabling output feeds, utilize the \u003ca href=\"https://gohugo.io/templates/output-formats\"\u003eoutput formats\u003c/a\u003e in your site configuration.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIf you’re settling with this option, here’s an example template for enabling all of the feed formats.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e# Visit the following for more information:\n# https://gohugo.io/templates/output-formats\n\n# Defining the media type of the output formats\n# For JSON format, it doesn\u0026#39;t need to be since it\u0026#39;s already built-in into Hugo\n[mediaTypes]\n [mediaTypes.\u0026#34;application/atom+xml\u0026#34;]\n suffixes = [\u0026#34;atom\u0026#34;, \u0026#34;atom.xml\u0026#34;] # You can remove the \u0026#34;atom.xml\u0026#34; if you want\n\n # Redefining RSS media type for the additional suffix\n [mediaTypes.\u0026#34;application/rss+xml\u0026#34;]\n suffixes = [\u0026#34;rss\u0026#34;, \u0026#34;rss.xml\u0026#34;] # You can remove the \u0026#34;rss.xml\u0026#34; if you want\n\n\n\n# Including all of the feed output formats in the build\n[outputFormats]\n [outputFormats.Rss]\n mediaType = \u0026#34;application/rss+xml\u0026#34;\n baseName = \u0026#34;feed\u0026#34;\n\n [outputFormats.Atom]\n mediaType = \u0026#34;application/atom+xml\u0026#34;\n baseName = \u0026#34;feed\u0026#34;\n\n [outputFormats.Json]\n mediaType = \u0026#34;application/json\u0026#34;\n baseName = \u0026#34;feed\u0026#34;\n\n\n# Indicating what output formats shall be included\n# for the following kinds\n[outputs]\n # .Site.BaseURL/index.* is available\n home = [\u0026#34;HTML\u0026#34;, \u0026#34;JSON\u0026#34;, \u0026#34;RSS\u0026#34;, \u0026#34;ATOM\u0026#34;]\n\n # .Site.BaseURL/$section/index.* is available\n section = [\u0026#34;HTML\u0026#34;, \u0026#34;JSON\u0026#34;, \u0026#34;RSS\u0026#34;, \u0026#34;ATOM\u0026#34;]\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n","date_modified":"2022-05-13T18:08:06+08:00","date_published":"2019-09-04T17:22:44+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/","summary":"This theme supports RSS, Atom, and JSON feed output for more ways of publishing web content for your visitors. It is also suitable for reading content from feed readers.\n Here are the following documents used as references for the creation of the output feed templates.\n Atom 1.0 - IETF RFC4287\n JSON Feed version 1 specifications\n RSS 2.0 specifications\n In this demo, it is enabled and you should be able to see them through the following links:","tags":["this is a test tag","tag2"],"title":"RSS, Atom, and JSON Feed Support","url":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/"}]} diff --git a/articles/feed.rss b/articles/feed.rss index e1d7b71..da779d3 100644 --- a/articles/feed.rss +++ b/articles/feed.rss @@ -4,13 +4,23 @@ Articles on Contentful https://foo-dogsquared.github.io/hugo-theme-contentful/articles/ Recent content in Articles on Contentful - Hugo v0.76.0 -- gohugo.ioen-us© 2021 to the author(s) behind Contentful + Hugo v0.98.0 -- gohugo.ioen-us© 2022 to the author(s) behind Contentful Tue, 12 May 2020 21:29:52 +0800 https://www.rssboard.org/rss-2-0-1 + + Extending Contentful + https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/ + theme + extending + + Tue, 12 May 2020 17:25:55 +0800 + https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/ + + RSS, Atom, and JSON Feed Support https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/ @@ -21,15 +31,5 @@ https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/ - - Asciidoctor Extended Syntax Guide - https://foo-dogsquared.github.io/hugo-theme-contentful/articles/asciidoctor-extended-syntax-guide/ - asciidoctor - guide - - Thu, 29 Aug 2019 22:09:16 +0800 - https://foo-dogsquared.github.io/hugo-theme-contentful/articles/asciidoctor-extended-syntax-guide/ - - diff --git a/articles/hidden-post-test/index.html b/articles/hidden-post-test/index.html index 68efc89..d9593fd 100644 --- a/articles/hidden-post-test/index.html +++ b/articles/hidden-post-test/index.html @@ -1,8 +1,9 @@ Hidden post test - + - + + - + - - + + + + + + + + - @@ -50,16 +48,16 @@

Hidden post test

-
+

Created:

- - -

Updated:

- + +

Updated:

+ +

Translations: Tagalog

@@ -68,14 +66,6 @@ - - -
@@ -109,6 +99,6 @@ How did you find this?!

-

© 2021 Contentful

+

© 2022 Contentful

diff --git a/articles/index.html b/articles/index.html index be8019a..a023d17 100644 --- a/articles/index.html +++ b/articles/index.html @@ -1,8 +1,9 @@ Articles - + - + + @@ -12,15 +13,11 @@ - - + + + + -
@@ -43,67 +35,106 @@ + + + +

Emoji Support

- - (Modified on ) + +
@@ -132,6 +163,6 @@ -

© 2021 Contentful

+

© 2022 Contentful

diff --git a/articles/markdown-syntax-guide/index.html b/articles/markdown-syntax-guide/index.html index 0cb3b2a..b412d2e 100644 --- a/articles/markdown-syntax-guide/index.html +++ b/articles/markdown-syntax-guide/index.html @@ -1,8 +1,9 @@ Markdown Syntax Guide - + - + + @@ -11,17 +12,17 @@ - + - - + + + + + + + + - @@ -44,54 +40,21 @@

Markdown Syntax Guide

-
+

Created:

- - -

Updated:

- + +

Updated:

+ +
- - -

The main purpose of this article is to make sure that all basic HTML Elements are decorated with CSS so as to not miss any possible elements when creating new themes for Hugo.

@@ -242,26 +205,26 @@ Also you can put Markdown into a blockquote.

Code

-
<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Example HTML5 Document</title>
-</head>
-<body>
-  <p>Test</p>
-</body>
-</html>
-
<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Example HTML5 Document</title>
-</head>
-<body>
-  <p>Test</p>
-</body>
-</html>
+
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <p>Test</p>
+</body>
+</html>
+
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <p>Test</p>
+</body>
+</html>

Other stuff — abbr, sub, sup, kbd, etc.

GIF is a bitmap image format.

H2O

@@ -292,6 +255,6 @@ Also you can put Markdown into a blockquote.

-

© 2021 Contentful

+

© 2022 Contentful

diff --git a/articles/mathjax-support-for-asciidoctor/index.html b/articles/mathjax-support-for-asciidoctor/index.html index 6cdd264..d969fa1 100644 --- a/articles/mathjax-support-for-asciidoctor/index.html +++ b/articles/mathjax-support-for-asciidoctor/index.html @@ -1,8 +1,9 @@ MathJax Support for Asciidoctor - + - + + - + - - + + + + + + + + - @@ -56,60 +56,21 @@

MathJax Support for Asciidoctor

-
+

Created:

- - -

Updated:

- + +

Updated:

+ +
- - -
@@ -590,6 +551,6 @@ can be used as a general MathJax guide, anyways.

-

© 2021 Contentful

+

© 2022 Contentful

diff --git a/articles/mathjax-support-for-markdown/index.html b/articles/mathjax-support-for-markdown/index.html index d8d6c4a..a003168 100644 --- a/articles/mathjax-support-for-markdown/index.html +++ b/articles/mathjax-support-for-markdown/index.html @@ -1,8 +1,9 @@ MathJax Support for Markdown - + - + + - + - - + + + + + + + + - @@ -59,59 +60,21 @@ Whitespace LaTeX treats whitespace characters such as tabs and spaces uniformly

MathJax Support for Markdown

-
+

Created:

- - -

Updated:

- + +

Updated:

+ +
- - -

This is just an article for testing MathJax in Markdown files.

@@ -126,8 +89,8 @@ of space. A text that is composed of two tabs and 10 spaces consecutively is one space.

This is especially prominent in math mode (which MathJax is… always).

Try to render this, for example.

-
This is a LaTeX sentence (or I guess in MathJax).
-

And it’ll render as the following:

+
This is a LaTeX sentence (or I guess in MathJax).
+

And it’ll render as the following:

$$ This is a LaTeX sentence (or I guess in MathJax). $$

Since MathJax is in… perpetual math mode and specifically made for rendering math formulae, we shouldn’t have a problem with maintaining it.

@@ -136,44 +99,44 @@ math formulae, we shouldn’t have a problem with maintaining it.

One of the main syntax you should mind in MathJax are the LaTeX commands. Think of it like the HTML tags in LaTeX (although not really).

Here’s the basic construct of a LaTeX command:

-
\commandname[option1,option2,...]{argument1}{argument2}...
-

Within commands and if allowed, you can nest commands. +

\commandname[option1,option2,...]{argument1}{argument2}...
+

Within commands and if allowed, you can nest commands. Take this example for example:

-
\sum_{i=0}^{6} = \frac{i^{2}}{ 2 \bmod (i * 4)} + i^{3}
-

$$ \sum_{i=0}^{6} = \frac{i^{2}}{ 2 \bmod (i * 4)} + i^{3} $$

+
\sum_{i=0}^{6} = \frac{i^{2}}{ 2 \bmod (i * 4)} + i^{3}
+

$$ \sum_{i=0}^{6} = \frac{i^{2}}{ 2 \bmod (i * 4)} + i^{3} $$

Reserved characters

The following characters have special meaning to LaTeX.

-
# $ % ^ & _ { } ~ \
+
# $ % ^ & _ { } ~ \
 
$$ # $ % ^ & _ { } ~ \ $$

 
As you can see, if rendered, it should result in an error.

 
In order to render them in text, you need to add an escape character.
 In this case, it’s a backslash.

-
\# \$ \% \^ \& \_ \{ \} \~ \\
-
In the case of rendering it from Markdown, double slashes might be needed.

+
\# \$ \% \^ \& \_ \{ \} \~ \\
+
In the case of rendering it from Markdown, double slashes might be needed.

 
$$ \# \$ % \^ \& \_ \{ \} \~ \ $$

 
Text formatting

 
You can do a little text formatting in a LaTeX math content (though it’s pointless
 to do so).

 
Literal text

 
You can make a text with \text{}.

-
\text{The quick brown fox jumps over the lazy dog.}
-
$$\text{The quick brown fox jumps over the lazy dog.}$$

+
\text{The quick brown fox jumps over the lazy dog.}
+
$$\text{The quick brown fox jumps over the lazy dog.}$$

 
Boldface text

 
You can make a text boldface with \textbf{}.

-
\textbf{The quick brown fox jumps over the lazy dog.}
-
$$\textbf{The quick brown fox jumps over the lazy dog.}$$

+
\textbf{The quick brown fox jumps over the lazy dog.}
+
$$\textbf{The quick brown fox jumps over the lazy dog.}$$

 
Italic text

 
To make a text block italic, enclose it with a \textit{} command.

-
\textit{The quick brown fox jumps over the lazy dog.}
-
$$\textit{The quick brown fox jumps over the lazy dog.}$$

+
\textit{The quick brown fox jumps over the lazy dog.}
+
$$\textit{The quick brown fox jumps over the lazy dog.}$$

 
Monospaced text

 
In order for the text to be monospaced, enclose it with a \texttt{} (text teletype) command.

-
\texttt{The quick brown fox jumps over the lazy dog.}
-
$$\texttt{The quick brown fox jumps over the lazy dog.}$$

+
\texttt{The quick brown fox jumps over the lazy dog.}
+
$$\texttt{The quick brown fox jumps over the lazy dog.}$$

 
Text in sans-serif font equivalent

 
Most importantly, you can make a text rendered in sans-serif with \textsf{} command.

-
\textsf{The quick brown fox jumps over the lazy dog.}
-
$$\textsf{The quick brown fox jumps over the lazy dog.}$$

+
\textsf{The quick brown fox jumps over the lazy dog.}
+
$$\textsf{The quick brown fox jumps over the lazy dog.}$$

 
More options

 
You can see a lot more options from this reference.

 
Math formatting

@@ -183,47 +146,47 @@ Let’s see what MathJax in Markdown (M in M?) can do.

 
Fractions

 
For rendering fractions, you need to use the \frac command.
 The command simply needs two positional arguments.

-
\frac{NUMERATOR}{DENOMINATOR}
-
For a bit of an example:

-
\frac{x_1 + y_2}{x_2 + y_1}
-
$$ \frac{x_1 + y_2}{x_2 + y_1} $$

+
\frac{NUMERATOR}{DENOMINATOR}
+
For a bit of an example:

+
\frac{x_1 + y_2}{x_2 + y_1}
+
$$ \frac{x_1 + y_2}{x_2 + y_1} $$

 
Roots

 
In order to create roots, you need the \sqrt command.
 It only needs the content to be put inside of it as the argument.

-
\sqrt{2a + b}
-
$$ \sqrt{2a + b} $$

+
\sqrt{2a + b}
+
$$ \sqrt{2a + b} $$

 
Yes, you can nest some stuff.

-
\sqrt{\frac{2a + b}{a^2 - b^2}}
-
$$ \sqrt{\frac{2a + b}{a^2 - b^2}} $$

+
\sqrt{\frac{2a + b}{a^2 - b^2}}
+
$$ \sqrt{\frac{2a + b}{a^2 - b^2}} $$

 
You can specify an optional argument to change the magnitude.

-
\sqrt[\frac{1}{2}]{2a + b}
-
$$ \sqrt[\frac{1}{2}]{2a + b} $$

+
\sqrt[\frac{1}{2}]{2a + b}
+
$$ \sqrt[\frac{1}{2}]{2a + b} $$

 
Superscripts

 
In order to make superscripts, place it next to a caret character (^).
 To render it in more than one character, enclose it in curly brackets ({}).

-
2^2 * 2^{23} = 2^{25}
-
$$2^2 * 2^{23} = 2^{25}$$

+
2^2 * 2^{23} = 2^{25}
+
$$2^2 * 2^{23} = 2^{25}$$

 
You can also nest it within a superscript like so.

-
2^{2^{10}} * 2^{23^2} = \infty
-
$$ 2^{2^{10}} * 2^{23^2} = \infty $$

+
2^{2^{10}} * 2^{23^2} = \infty
+
$$ 2^{2^{10}} * 2^{23^2} = \infty $$

 
OK, I’ve gone overboard with the scale so I just put infinity as the
 answer instead.

 
Subscripts

 
For making subscripts, place it next to the underscore (_).
 Like the superscript command, if you include more than one character,
 enclose it in a pair of curly brackets ({}).

-
a_1 + a_2 + a_3 + ... + a_{14} = \frac{a_1 * a_{14}}{2}
-
$$ a_1 + a_2 + a_3 + … + a_{14} = \frac{a_1 * a_{14}}{2} $$

+
a_1 + a_2 + a_3 + ... + a_{14} = \frac{a_1 * a_{14}}{2}
+
$$ a_1 + a_2 + a_3 + … + a_{14} = \frac{a_1 * a_{14}}{2} $$

 
Wait… That doesn’t look right.

 
That’s because in Markdown, underscores denote italics so
 be sure to escape them with a single backslash.

 
So now, the result is this:

-
a\_1 + a\_2 + a\_3 + ... + a\_{14} = \frac{a\_1 * a\_{14}}{2}
-
$$ a_1 + a_2 + a_3 + … + a_{14} = \frac{a_1 * a_{14}}{2} $$

+
a\_1 + a\_2 + a\_3 + ... + a\_{14} = \frac{a\_1 * a\_{14}}{2}
+
$$ a_1 + a_2 + a_3 + … + a_{14} = \frac{a_1 * a_{14}}{2} $$

 
Like superscripts and most of the commands, you can nest subscripts
 to another subscript (and other commands).

-
a\_{2\_{1}} + a\_{2\_{2}} = b\_{2\_{1}} + b\_{2\_{2}}
-
$$ a_{2_{1}} + a_{2_{2}} = b_{2_{1}} + b_{2_{2}} $$

+
a\_{2\_{1}} + a\_{2\_{2}} = b\_{2\_{1}} + b\_{2\_{2}}
+
$$ a_{2_{1}} + a_{2_{2}} = b_{2_{1}} + b_{2_{2}} $$

 
Greek letters

 
You can render Greek letters with the appropriate command.

 
\alpha for lowercase Greek letter alpha,
@@ -231,8 +194,8 @@ to another subscript (and other commands).

 \gamma for lowercase Greek letter gamma,
 \Gamma for uppercase Greek letter gamma,
 you get the point.

-
\alpha, \beta, \gamma, \Gamma, \pi, \Pi, \phi, \varphi, \mu, \Phi
-
$$\alpha, \beta, \gamma, \Gamma, \pi, \Pi, \phi, \varphi, \mu, \Phi$$

+
\alpha, \beta, \gamma, \Gamma, \pi, \Pi, \phi, \varphi, \mu, \Phi
+
$$\alpha, \beta, \gamma, \Gamma, \pi, \Pi, \phi, \varphi, \mu, \Phi$$

 
A lot more!

 
You have a whole slew of mathematical symbols available.
 Please refer to this list of LaTeX mathematical symbols.
@@ -267,6 +230,6 @@ can be used as a general MathJax guide, anyways.

 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/articles/page/1/index.html b/articles/page/1/index.html
index fc80186..9563d94 100644
--- a/articles/page/1/index.html
+++ b/articles/page/1/index.html
@@ -1 +1,10 @@
-https://foo-dogsquared.github.io/hugo-theme-contentful/articles/
\ No newline at end of file
+
+
+  
+    https://foo-dogsquared.github.io/hugo-theme-contentful/articles/
+    
+    
+    
+    
+  
+
diff --git a/articles/rss-atom-and-json-feed-support/index.html b/articles/rss-atom-and-json-feed-support/index.html
index 9f3d2f2..2991269 100644
--- a/articles/rss-atom-and-json-feed-support/index.html
+++ b/articles/rss-atom-and-json-feed-support/index.html
@@ -1,30 +1,48 @@
 
 RSS, Atom, and JSON Feed Support
-
+
 
-
+
+
 
 
-
+
 
-
+
 
-
+
 
-
+
 
-
-
+
+
+
+
+
+
+
+    
     
-    
 
 
 
@@ -47,17 +60,17 @@
     

         
RSS, Atom, and JSON Feed Support

     

-    

+    

         
-        
Authors: John Doe and Jane Doe

+        
Authors: John Doe and Jane Doe

 
         
         
Created: 

-    
-        
-        
Updated: 

-    
+
         
+        
Updated: 

+
+       
           
           
         
Translations: Tagalog

@@ -66,34 +79,53 @@
 
     
     
-    
-    
-
 
     

     

-
Web feeds are one of the most common ways for a visitor to keep up with someone who creates content.
-Nowadays, most social media has that feature such as the subscribing YouTube channels, following Twitter accounts, and watching Deviantart artists.
-Outside of those, we have simpler things like RSS and JSON feeds where they are just plain text files describing the content.

+
This theme supports RSS, Atom, and JSON feed output for more ways of publishing web content for your visitors.
+It is also suitable for reading content from feed readers.

 

 

-
The Contentful theme doesn’t have a web feed export but we can have it with theme components.
-For this demo, we’ll use the web feed component created by foo-dogsquared.

+
Here are the following documents used as references for the creation of the output feed templates.

+

+

+
 

 

-
If you’re settling with this option, here’s an example template for installing the web feed module and exporting all of the feed formats all in one fell swoop.

+
In this demo, it is enabled and you should be able to see them through the following links:

+

+

+
    
+
  • 
+
    RSS: $HUGO_URL/index.rss
    
+
    • 
+
  • 
+
    Atom: $HUGO_URL/index.atom
    
+
    • 
+
  • 
+
    JSON: $HUGO_URL/index.json
    
+
    • 
+

+

+

+
For enabling output feeds, utilize the output formats in your site configuration.

+

+

+
If you’re settling with this option, here’s an example template for enabling all of the feed formats.

 

 

 

-
[[module.imports]]
-    path = "github.com/foo-dogsquared/hugo-web-feeds"
-
-# Visit the following for more information:
+
# Visit the following for more information:
 # https://gohugo.io/templates/output-formats
 
 # Defining the media type of the output formats
@@ -106,8 +138,6 @@ For this demo, we’ll use the 
diff --git a/categories/asciidoctor/index.html b/categories/asciidoctor/index.html
index 2023d09..bceec07 100644
--- a/categories/asciidoctor/index.html
+++ b/categories/asciidoctor/index.html
@@ -1,8 +1,9 @@
 
 asciidoctor
-
+
 
-
+
+
 
 
 
@@ -12,15 +13,11 @@
 
 
 
-
-
+
+
+
+    
     
-    
 
 
 

@@ -46,16 +38,20 @@
 
 
 
 
@@ -84,6 +80,6 @@
 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/categories/asciidoctor/page/1/index.html b/categories/asciidoctor/page/1/index.html
index ce9ee97..fd0a48c 100644
--- a/categories/asciidoctor/page/1/index.html
+++ b/categories/asciidoctor/page/1/index.html
@@ -1 +1,10 @@
-https://foo-dogsquared.github.io/hugo-theme-contentful/categories/asciidoctor/
\ No newline at end of file
+
+
+  
+    https://foo-dogsquared.github.io/hugo-theme-contentful/categories/asciidoctor/
+    
+    
+    
+    
+  
+
diff --git a/categories/category1/feed.rss b/categories/category1/feed.rss
index c9b09bb..44d263f 100644
--- a/categories/category1/feed.rss
+++ b/categories/category1/feed.rss
@@ -4,7 +4,7 @@
     category1 on Contentful
     https://foo-dogsquared.github.io/hugo-theme-contentful/categories/category1/
     Recent content in category1 on Contentful
-    Hugo v0.76.0 -- gohugo.ioen-us© 2021 to the author(s) behind Contentful
+    Hugo v0.98.0 -- gohugo.ioen-us© 2022 to the author(s) behind Contentful
         Tue, 12 May 2020 21:29:52 +0800
     https://www.rssboard.org/rss-2-0-1
         
diff --git a/categories/category1/index.html b/categories/category1/index.html
index a0ad967..89f4d75 100644
--- a/categories/category1/index.html
+++ b/categories/category1/index.html
@@ -1,8 +1,9 @@
 
 category1
-
+
 
-
+
+
 
 
 
@@ -12,15 +13,11 @@
 
 
 
-
-
+
+
+
+    
     
-    
 
 
 

@@ -43,6 +35,16 @@
 
 
 
+
+
 
 
 
@@ -68,6 +70,6 @@
 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/categories/category1/page/1/index.html b/categories/category1/page/1/index.html
index 8caf053..7589295 100644
--- a/categories/category1/page/1/index.html
+++ b/categories/category1/page/1/index.html
@@ -1 +1,10 @@
-https://foo-dogsquared.github.io/hugo-theme-contentful/categories/category1/
\ No newline at end of file
+
+
+  
+    https://foo-dogsquared.github.io/hugo-theme-contentful/categories/category1/
+    
+    
+    
+    
+  
+
diff --git a/categories/feed.rss b/categories/feed.rss
index d51f6f5..4fc146f 100644
--- a/categories/feed.rss
+++ b/categories/feed.rss
@@ -4,7 +4,7 @@
     Categories on Contentful
     https://foo-dogsquared.github.io/hugo-theme-contentful/categories/
     Recent content in Categories on Contentful
-    Hugo v0.76.0 -- gohugo.ioen-us© 2021 to the author(s) behind Contentful
+    Hugo v0.98.0 -- gohugo.ioen-us© 2022 to the author(s) behind Contentful
         Tue, 20 Oct 2020 21:36:34 +0800
     https://www.rssboard.org/rss-2-0-1
         
diff --git a/categories/guide/feed.rss b/categories/guide/feed.rss
index 0ee41c6..b58fb31 100644
--- a/categories/guide/feed.rss
+++ b/categories/guide/feed.rss
@@ -4,7 +4,7 @@
     guide on Contentful
     https://foo-dogsquared.github.io/hugo-theme-contentful/categories/guide/
     Recent content in guide on Contentful
-    Hugo v0.76.0 -- gohugo.ioen-us© 2021 to the author(s) behind Contentful
+    Hugo v0.98.0 -- gohugo.ioen-us© 2022 to the author(s) behind Contentful
         Tue, 12 May 2020 17:25:55 +0800
     https://www.rssboard.org/rss-2-0-1
         
@@ -20,13 +20,13 @@
       
     
     
-      RSS, Atom, and JSON Feed Support
-      https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/
-      this is a test tag
-      tag2
+      Extending Contentful
+      https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/
+      theme
+      extending
 
-      Wed, 04 Sep 2019 17:22:44 +0800
-      https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/
+      Tue, 12 May 2020 17:25:55 +0800
+      https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/
       
     
   
diff --git a/categories/guide/index.html b/categories/guide/index.html
index 4a886da..0a8102a 100644
--- a/categories/guide/index.html
+++ b/categories/guide/index.html
@@ -1,8 +1,9 @@
 
 guide
-
+
 
-
+
+
 
 
 
@@ -12,15 +13,11 @@
 
 
 
-
-
+
+
+
+    
     
-    
 
 
 

@@ -46,48 +38,73 @@
 

     

     

-        
-        (Modified on )
+        
+        
+    

+

+
+
 
 
 
 

     
Emoji Support

     

-        
-        (Modified on )
+        
+        
     

 

 
 
 
 
 
 
 
@@ -116,6 +133,6 @@
 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/categories/guide/page/1/index.html b/categories/guide/page/1/index.html
index 684a8e8..a9c610a 100644
--- a/categories/guide/page/1/index.html
+++ b/categories/guide/page/1/index.html
@@ -1 +1,10 @@
-https://foo-dogsquared.github.io/hugo-theme-contentful/categories/guide/
\ No newline at end of file
+
+
+  
+    https://foo-dogsquared.github.io/hugo-theme-contentful/categories/guide/
+    
+    
+    
+    
+  
+
diff --git a/categories/index.html b/categories/index.html
index 38b70b7..aaac89f 100644
--- a/categories/index.html
+++ b/categories/index.html
@@ -1,8 +1,9 @@
 
 Categories
-
+
 
-
+
+
 
 
 
@@ -12,15 +13,11 @@
 
 
 
-
-
+
+
+
+    
     
-    
 
 
 
 
 
Categories

-
-
+  

+    

+      
asciidoctor

+      (Permalink)
+    

+    
+  

+  

+    

+      
category1

+      (Permalink)
+    

+    
+  

+  

+    

+      
guide

+      (Permalink)
+    

+    
+  

+  

+    

+      
markdown

+      (Permalink)
+    

+    
+  

+  

+    

+      
recipe

+      (Permalink)
+    

+    
+  

 
 

 

@@ -86,6 +162,6 @@
 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/categories/markdown/feed.rss b/categories/markdown/feed.rss
index f55cf74..2a427b7 100644
--- a/categories/markdown/feed.rss
+++ b/categories/markdown/feed.rss
@@ -4,7 +4,7 @@
     markdown on Contentful
     https://foo-dogsquared.github.io/hugo-theme-contentful/categories/markdown/
     Recent content in markdown on Contentful
-    Hugo v0.76.0 -- gohugo.ioen-us© 2021 to the author(s) behind Contentful
+    Hugo v0.98.0 -- gohugo.ioen-us© 2022 to the author(s) behind Contentful
         Wed, 28 Aug 2019 00:09:56 +0800
     https://www.rssboard.org/rss-2-0-1
         
diff --git a/categories/markdown/index.html b/categories/markdown/index.html
index 2be5091..4fb5738 100644
--- a/categories/markdown/index.html
+++ b/categories/markdown/index.html
@@ -1,8 +1,9 @@
 
 markdown
-
+
 
-
+
+
 
 
 
@@ -12,15 +13,11 @@
 
 
 
-
-
+
+
+
+    
     
-    
 
 
 

@@ -46,8 +38,10 @@
 
 
@@ -76,6 +70,6 @@
 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/categories/markdown/page/1/index.html b/categories/markdown/page/1/index.html
index 0802e28..c1d426f 100644
--- a/categories/markdown/page/1/index.html
+++ b/categories/markdown/page/1/index.html
@@ -1 +1,10 @@
-https://foo-dogsquared.github.io/hugo-theme-contentful/categories/markdown/
\ No newline at end of file
+
+
+  
+    https://foo-dogsquared.github.io/hugo-theme-contentful/categories/markdown/
+    
+    
+    
+    
+  
+
diff --git a/categories/recipe/feed.rss b/categories/recipe/feed.rss
index cf5b969..90ca5a6 100644
--- a/categories/recipe/feed.rss
+++ b/categories/recipe/feed.rss
@@ -4,7 +4,7 @@
     recipe on Contentful
     https://foo-dogsquared.github.io/hugo-theme-contentful/categories/recipe/
     Recent content in recipe on Contentful
-    Hugo v0.76.0 -- gohugo.ioen-us© 2021 to the author(s) behind Contentful
+    Hugo v0.98.0 -- gohugo.ioen-us© 2022 to the author(s) behind Contentful
         Tue, 20 Oct 2020 21:36:34 +0800
     https://www.rssboard.org/rss-2-0-1
         
diff --git a/categories/recipe/index.html b/categories/recipe/index.html
index 3ed13c1..221f409 100644
--- a/categories/recipe/index.html
+++ b/categories/recipe/index.html
@@ -1,8 +1,9 @@
 
 recipe
-
+
 
-
+
+
 
 
 
@@ -12,15 +13,11 @@
 
 
 
-
-
+
+
+
+    
     
-    
 
 
 

@@ -46,48 +38,60 @@
 
 
 
 
 
 
 
 
 

     
Twitter cards

     

-        
-        (Modified on )
+        
+        
     

 

 
 
 
@@ -116,6 +120,6 @@
 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/categories/recipe/page/1/index.html b/categories/recipe/page/1/index.html
index 4d44834..b3252fa 100644
--- a/categories/recipe/page/1/index.html
+++ b/categories/recipe/page/1/index.html
@@ -1 +1,10 @@
-https://foo-dogsquared.github.io/hugo-theme-contentful/categories/recipe/
\ No newline at end of file
+
+
+  
+    https://foo-dogsquared.github.io/hugo-theme-contentful/categories/recipe/
+    
+    
+    
+    
+  
+
diff --git a/css/index.min.11618edd7e3b000c8d9629ad7f78c9229d907cb12f420c0242dfb9185eb5ff8e.css b/css/index.min.11618edd7e3b000c8d9629ad7f78c9229d907cb12f420c0242dfb9185eb5ff8e.css
new file mode 100644
index 0000000..ed699a8
--- /dev/null
+++ b/css/index.min.11618edd7e3b000c8d9629ad7f78c9229d907cb12f420c0242dfb9185eb5ff8e.css
@@ -0,0 +1 @@
+:root{--background:#FAFAFA;--background-light:#E1E1E1;--foreground:#000000;--foreground-light:#363537;--grey:#454545;--body-family:serif;--header-family:sans-serif;--mono-family:monospace;--font-size:20px;--vertical-rhythm:24px;--content-width:750px;--border-style:var(--foreground) solid 1px}@media(prefers-color-scheme:light){:root{--background:#FAFAFA;--background-light:#E1E1E1;--foreground:#000000;--foreground-light:#363537;--grey:#454545}}@media(prefers-color-scheme:dark){:root{--background:#000000;--background-light:#363537;--foreground:#FAFAFA;--foreground-light:#CCCCCC;--grey:#919191}}:root{font-family:var(--body-family);font-size:var(--font-size);background:var(--background);color:var(--foreground);line-height:var(--vertical-rhythm);margin:0;padding:0}*,*::before,*::after{box-sizing:border-box}body{margin:0 auto;max-width:var(--content-width);padding:1rem}nav{margin:1rem auto}article h2{margin-top:3rem}article h3{margin-top:2rem}h1,h2,h3,h4,h5,h6{font-family:var(--header-family);line-height:1.25}a{color:#3aa2bf}a:visited{color:#ac5a82}code{font-family:var(--mono-family);font-size:.9em}dd,li,p,td{line-height:1.5}p{margin-top:1rem;margin-bottom:1rem}dd{margin-top:.5rem;margin-bottom:1.5rem}kbd{border:var(--border-style);font-size:.85rem;font-weight:700;padding:.25rem}tr:nth-child(even){background:var(--background-light)}pre{background:var(--foreground);color:var(--background);font-family:var(--mono-family);font-size:1rem;line-height:1.5;margin-top:1rem;margin-bottom:1rem;padding:.5rem;overflow:auto}img,video,audio,iframe{display:block;height:auto;max-width:100%;margin:auto}table{border:var(--border-style);border-collapse:collapse;margin:auto}thead,tbody{margin:0 auto}th,td{border:var(--border-style);padding:1rem}ol,ul{line-height:1.5}figure{margin:2rem auto}figure>*{margin:1rem auto}figcaption{text-align:center;font-size:1rem}svg{height:1rem;width:1rem;fill:currentColor}blockquote{margin:2rem 1rem}blockquote footer{display:block;width:100%}button{background:unset;border:var(--foreground)solid 1px;color:var(--foreground);cursor:pointer;font-size:1rem;padding:.5rem}aside{--vertical-rhythm-reduction:0.2;color:var(--grey);border:1px solid var(--grey);border-left:3px solid var(--grey);font-size:calc(1rem * (1 - var(--vertical-rhythm-reduction)));font-family:var(--header-family);line-height:calc(1rem * (1 + var(--vertical-rhythm-reduction)));margin:1rem 0;padding:.5rem;width:100%}footer{display:flex;justify-content:space-evenly;align-items:center;flex-flow:column wrap}.site__title{display:inline-block;font-size:2rem;margin-bottom:1rem;margin-right:.5rem}.site__links{display:inline-block}.site__languages{display:inline-block}.site__theme-btn{position:absolute;right:0;top:0}.pagination{display:flex;font-size:1rem;list-style:none;justify-content:center;margin:1.2rem 0;padding:.8rem}.pagination>*{margin:0 .25em;text-decoration:none}.page-link{background:var(--background-light);color:var(--foreground-light);text-decoration:none;padding:.5em}.page-link:visited{color:var(--foreground-light)}.page-link--active{font-weight:bolder}.page-link:hover{background:var(--foreground);color:var(--background)}.post{margin-top:1rem}.post h1{margin:0 auto}.post__meta{color:var(--grey);display:inline-block;margin:.5rem auto;font-size:.9em}.post__meta--single{color:var(--grey);font-size:.9em;margin:.5em auto}.post__meta--single>*{margin:.5em auto}.post__meta>:not(:first-child)::before{content:"|";margin-left:.5em;margin-right:.5em}.taxonomy__header{display:flex;align-items:center;justify-content:start}.taxonomy__header>*{margin:0;margin-right:.25em}.taxonomy__pages{list-style:none;padding-left:1em;margin:1em auto}.taxonomy__page{display:flex}.taxonomy__page :first-child{white-space:nowrap}.taxonomy__page>*{margin-right:.5em}@media all and (max-width:860px){html:root{--font-size:17px}}
\ No newline at end of file
diff --git a/css/main.min.ac4668a81007ca38fcac8e88436ad4fa6a969ee4ce9352f52f795abf04e1624a.css b/css/main.min.ac4668a81007ca38fcac8e88436ad4fa6a969ee4ce9352f52f795abf04e1624a.css
deleted file mode 100644
index c82e00e..0000000
--- a/css/main.min.ac4668a81007ca38fcac8e88436ad4fa6a969ee4ce9352f52f795abf04e1624a.css
+++ /dev/null
@@ -1 +0,0 @@
-:root{--background:#FAFAFA;--background-light:#E1E1E1;--foreground:#000000;--foreground-light:#363537;--grey:#454545;--body-family:serif;--header-family:sans-serif;--mono-family:monospace;--font-size:20px;--vertical-rhythm:24px;--content-width:750px;--border-style:var(--foreground) solid 1px}[data-theme=dark]:root{--background:#000000;--background-light:#363537;--foreground:#FAFAFA;--foreground-light:#E1E1E1;--grey:#919191}:root{font-family:var(--body-family);font-size:var(--font-size);background:var(--background);color:var(--foreground);line-height:var(--vertical-rhythm);margin:0;padding:0}*,*::before,*::after{box-sizing:border-box}body{margin:0 auto;max-width:var(--content-width);padding:1rem}nav{margin:1rem auto}article h2{margin-top:3rem}article h3{margin-top:2rem}h1,h2,h3,h4,h5,h6{font-family:var(--header-family);line-height:1.25}a{color:#3aa2bf}a:visited{color:#ac5a82}code{font-family:var(--mono-family);font-size:.9em}dd,li,p,td{line-height:1.5}p{margin-top:1rem;margin-bottom:1rem}dd{margin-top:.5rem;margin-bottom:1.5rem}kbd{border:var(--border-style);font-size:.85rem;font-weight:700;padding:.25rem}tr:nth-child(even){background:var(--background-light)}pre{background:var(--foreground);color:var(--background);font-family:var(--mono-family);font-size:1rem;line-height:1.5;margin-top:1rem;margin-bottom:1rem;padding:.5rem;overflow:auto}img,video,audio,iframe{display:block;height:auto;max-width:100%;margin:auto}table{border:var(--border-style);border-collapse:collapse;margin:auto}thead,tbody{margin:0 auto}th,td{border:var(--border-style);padding:1rem}ol,ul{line-height:1.5}figure{margin:2rem auto}figure>*{margin:1rem auto}figcaption{text-align:center;font-size:1rem}svg{height:1rem;width:1rem;fill:currentColor}blockquote{margin:2rem 1rem}blockquote footer{display:block;width:100%}button{background:unset;border:var(--foreground)solid 1px;color:var(--foreground);cursor:pointer;font-size:1rem;padding:.5rem}aside{--vertical-rhythm-reduction:0.2;color:var(--grey);border:1px solid var(--grey);border-left:3px solid var(--grey);font-size:calc(1rem * (1 - var(--vertical-rhythm-reduction)));font-family:var(--header-family);line-height:calc(1rem * (1 + var(--vertical-rhythm-reduction)));margin:1rem 0;padding:.5rem;width:100%}footer{display:flex;justify-content:space-evenly;align-items:center;flex-flow:column wrap}.site__title{display:inline-block;font-size:2rem;margin-bottom:1rem;margin-right:.5rem}.site__links{display:inline-block}.site__languages{display:inline-block}.site__theme-btn{position:absolute;right:0;top:0}.pagination{display:flex;font-size:1rem;list-style:none;justify-content:center;margin:1.2rem 0;padding:.8rem}.pagination>*{margin:0 .25em;text-decoration:none}.page-link{background:var(--background-light);color:var(--foreground-light);text-decoration:none;padding:.5em}.page-link:visited{color:var(--foreground-light)}.page-link--active{font-weight:bolder}.page-link:hover{background:var(--foreground);color:var(--background)}.post{margin-top:1rem}.post h1{margin:0 auto}.post__meta{margin:.5rem auto;font-size:.9em}.post__meta>*{margin:.5rem auto}@media all and (max-width:860px){html:root{--font-size:17px}}@media(prefers-color-scheme:dark){:root{}}
\ No newline at end of file
diff --git a/en/index.html b/en/index.html
index 07e0d91..ab94be6 100644
--- a/en/index.html
+++ b/en/index.html
@@ -1 +1,10 @@
-https://foo-dogsquared.github.io/hugo-theme-contentful/
\ No newline at end of file
+
+
+  
+    https://foo-dogsquared.github.io/hugo-theme-contentful/
+    
+    
+    
+    
+  
+
diff --git a/en/sitemap.xml b/en/sitemap.xml
index 39d26a9..de93d40 100644
--- a/en/sitemap.xml
+++ b/en/sitemap.xml
@@ -1,10 +1,9 @@
 
 
-  
   
     https://foo-dogsquared.github.io/hugo-theme-contentful/categories/
-    2020-10-24T16:00:52+08:00
+    2022-05-13T18:08:06+08:00
     
-  
-  
-  
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/
-    2020-10-24T16:00:52+08:00
+    2022-05-13T18:08:06+08:00
     
-  
-  
-  
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/categories/recipe/
-    2020-10-24T15:49:14+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/simple-icons-integration/
-    2020-10-24T15:49:14+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/tag1/
-    2020-10-24T15:49:14+08:00
+    2022-05-13T18:08:06+08:00
     
-  
-  
-  
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/tag2/
-    2020-10-24T16:00:52+08:00
+    2022-05-13T18:08:06+08:00
     
-  
-  
-  
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/
-    2020-10-24T16:00:52+08:00
+    2022-05-13T18:08:06+08:00
     
-  
-  
-  
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/configurable-list-of-contacts/
-    2020-10-24T15:49:14+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/creating-an-archive-page/
-    2020-10-24T15:49:14+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/open-graph-protocol/
-    2020-10-24T15:49:14+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/seo/
-    2020-10-24T15:49:14+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/social-media/
-    2020-10-24T15:49:14+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/twitter/
-    2020-10-24T15:49:14+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/twitter-cards/
-    2020-10-24T15:49:14+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/customizing-your-head/
-    2020-10-24T15:49:14+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/articles/
-    2020-10-24T16:00:52+08:00
+    2022-05-13T18:08:06+08:00
     
-  
-  
-  
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/categories/category1/
-    2020-05-12T16:40:21+08:00
+    2022-05-13T18:08:06+08:00
     
-  
-  
-  
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/articles/hidden-post-test/
-    2020-05-12T16:40:21+08:00
+    2022-05-13T18:08:06+08:00
     
-  
-  
-  
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/
-    2020-10-24T15:49:14+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/extending/
-    2020-10-24T15:49:14+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
+    https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/categories/guide/
-    2020-10-24T16:00:52+08:00
+    2022-05-13T18:08:06+08:00
     
-  
-  
-  
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/theme/
-    2020-10-24T15:49:14+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/
-    2020-10-24T16:00:52+08:00
+    2022-05-13T18:08:06+08:00
     
-  
-  
-  
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/this-is-a-test-tag/
-    2020-10-24T16:00:52+08:00
+    2022-05-13T18:08:06+08:00
     
-  
-  
-  
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/asciidoctor/
-    2020-05-12T16:40:21+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/categories/asciidoctor/
-    2020-05-12T16:40:21+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/articles/asciidoctor-extended-syntax-guide/
-    2020-05-12T16:40:21+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/guide/
-    2020-05-12T16:40:21+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/emoji/
-    2020-05-12T16:40:21+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/articles/emoji-support/
-    2020-05-12T16:40:21+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/mathjax/
-    2020-05-12T16:40:21+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/articles/mathjax-support-for-asciidoctor/
-    2020-05-12T16:40:21+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/markdown/
-    2020-05-12T16:40:21+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/categories/markdown/
-    2020-05-12T16:40:21+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/articles/mathjax-support-for-markdown/
-    2020-05-12T16:40:21+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/articles/asciidoctor-syntax-guide/
-    2020-05-12T16:40:21+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/articles/markdown-syntax-guide/
-    2020-05-12T16:40:21+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/articles/asciidoctor-article-template/
-    2020-05-12T16:40:21+08:00
-  
-  
-  
+    2022-05-13T18:08:06+08:00
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/about/
-    2020-05-12T16:40:21+08:00
+    2022-05-13T18:08:06+08:00
     
-  
-  
-  
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/archives/
-    2020-05-12T16:40:21+08:00
+    2022-05-13T18:08:06+08:00
     
   
-  
 
diff --git a/feed.atom b/feed.atom
index 836e4a8..d71d554 100644
--- a/feed.atom
+++ b/feed.atom
@@ -2,14 +2,258 @@
 
   Contentful
   
-    © 2021 
-  Hugo
+    © 2022 
+  Hugo
   2020-10-20T21:36:34+08:00
   https://foo-dogsquared.github.io/hugo-theme-contentful/https://foo-dogsquared.github.io/hugo-theme-contentful/icon.png
   
     John Doe
     johndoe@example.com
     
+    https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/
+    Extending Contentful
+    
+    2020-05-12T17:25:55+08:00
+    2022-05-13T18:08:06+08:00
+<div id="preamble">
+<div class="sectionbody">
+<div class="paragraph">
+<p>Extending a Hugo theme is nothing new and a <a href="https://gohugo.io/content-management/sections/">few</a> <a href="http://hugocodex.org/add-ons/">places</a> provide a place for the most common extensions.
+In this post, I’ll be listing a few personal recipes I’ve always used for extending a Hugo theme.
+Though this only applies specifically to Contentful and may need some tweaking when applying it other themes.</p>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_customizing_your_head">Customizing your <code>&lt;head&gt;</code></h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>Let’s start with the most basic and perhaps most useful customization: modifying the <code>&lt;head</code>&gt;.
+This is useful for adding your own CSS and JavaScript files, changing certain metadata, or adding icons.</p>
+</div>
+<div class="paragraph">
+<p>First, copy the <code>head</code> partial from the theme (<code>theme/contentful/layouts/partials/head.html</code>) to your own (<code>layouts/partials/head.html</code>).
+We’re simply taking advantage of <a href="https://gohugo.io/templates/lookup-order/">Hugo’s lookup order</a> where we’ve override the <code>head</code> partial with our own copy.</p>
+</div>
+<div class="paragraph">
+<p>Then, feel free to add your own (or others&#39;) scripts and stylesheets, <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">icons and other metadata</a>, or whatever suitable things.</p>
+</div>
+<div class="paragraph">
+<p>In my case, I often use certain JavaScript libraries like <a href="https://www.mathjax.org/">MathJax</a> for mathematical typesetting, <a href="https://prismjs.com/">Prism</a> for syntax highlighting, and <a href="https://github.com/francoischalifour/medium-zoom/">medium-zoom</a> for interactive image zooms.</p>
+</div>
+<div class="paragraph">
+<p>Here’s the modified code.
+(The example code is snipped for brevity.)</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre class="highlight"><code class="language-go" data-lang="go">&lt;!--snip--&gt;
+
+{{- /* MathJax */ -}}
+&lt;script src=&#34;https://polyfill.io/v3/polyfill.min.js?features=es6&#34;&gt;&lt;/script&gt;
+&lt;script id=&#34;MathJax-script&#34; defer src=&#34;https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js&#34;&gt;&lt;/script&gt;
+
+{{- /* Prism.js */ -}}
+&lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css&#34; type=&#34;text/css&#34;&gt;
+&lt;script defer src=&#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js&#34;&gt;&lt;/script&gt;
+&lt;script defer src=&#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js&#34;&gt;
+&lt;script defer src=&#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/keep-markup/prism-keep-markup.min.js&#34;&gt;
+
+{{- /* medium-zoom */ -}}
+&lt;script defer src=&#34;https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js&#34;&gt;&lt;/script&gt;
+&lt;script&gt;window.addEventListener(&#39;load&#39;, () =&gt; mediumZoom(&#39;article img&#39;, { &#39;background&#39;: &#39;rgba(0, 0, 0, 0.75)&#39; }))&lt;/script&gt;</code></pre>
+</div>
+</div>
+<div class="paragraph">
+<p>Since most of the JavaScript libraries used here are not really a requirement (except for MathJax for mathematical typesetting), I’ve set them to be loaded at the end of the page loading with <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script"><code>defer</code> attribute</a>.
+If you have an inline script, you can simply wrap it in an event listener for page loading (<code>window.addEventListener(&#34;load&#34;, your_function_goes_here)</code>).</p>
+</div>
+<div class="paragraph">
+<p>If you want document-specific libraries, you have to pass some raw HTML through the parser of the document.
+For Goldmark, the default Markdown parser starting <a href="https://gohugo.io/news/0.60.0-relnotes/">Hugo v0.60.0</a>, blocks raw HTML by default and you can disable it by setting <code>markup.goldmark.renderer.unsafe</code> to <code>true</code>.</p>
+</div>
+<div class="paragraph">
+<p>For Blackfriday, it parses even the raw HTML just fine.
+Though, you have to set it as the default Markdown parser.</p>
+</div>
+<div class="paragraph">
+<p>For <a href="https://asciidoctor.org/">Asciidoctor</a>, you can use <a href="https://asciidoctor.org/docs/user-manual/#passthroughs">passthroughs</a> to get raw HTML through.</p>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_twitter_cards">Twitter cards</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>This will add <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started">Twitter cards</a> for your webpages.
+(Be sure to copy the <code>head</code> partial first in your own layout folder.)</p>
+</div>
+<div class="paragraph">
+<p>Thankfully, Hugo already has <a href="https://gohugo.io/templates/internal/#twitter-cards">an internal template for Twitter cards</a>.
+Simply add  <code>{{- template &#34;_internal/twitter_cards.html&#34; . -}}</code> somewhere in your own copy.
+(For reference, <a href="https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/twitter_cards.html">here’s the source code for the internal template</a>.)</p>
+</div>
+<div class="paragraph">
+<p>You could also roll your own Twitter cards but I recommend to modify the internal template instead fitting your specific needs.
+(Copy the internal template from the given link, create it as a partial in <code>layouts/partials/twitter_cards.html</code>, modify it, and insert the template with <code>{{- partial &#34;twitter_cards.html&#34; -}}</code>.)</p>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_open_graph_protocol">Open Graph protocol</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>Next up, we’re implementing <a href="https://opengraphprotocol.org/">Open Graph protocol</a> for our webpages.
+Commonly used for making suitable format when sharing the content on certain sites like Facebook.
+(Be sure to copy the <code>head</code> partial first in your own layout folder.)</p>
+</div>
+<div class="paragraph">
+<p>Similar to Twitter cards, Hugo has <a href="https://gohugo.io/templates/internal/#open-graph">an internal template for this</a>.
+Simply add  <code>{{- template &#34;_internal/opengraph.html&#34; . -}}</code> somewhere in your own copy.
+(For reference, <a href="https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/opengraph.html">here’s the source code for the internal template</a>.)</p>
+</div>
+<div class="paragraph">
+<p>If you want more control and customized version of the output, I recommend to copy the internal template and create a partial (e.g., <code>layouts/partials/opengraph.html</code>) and modify it.</p>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_an_archive_page">An archive page</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>This will add an archive page similar to archive pages <a href="https://davidtranscend.com/archives/">like</a> <a href="https://lukesmith.xyz/blogindex.html">these</a>.</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre class="highlight"><code class="language-go" data-lang="go">{{- define &#34;main&#34; -}}
+
+&lt;h1&gt;{{ .Title }}&lt;/h1&gt;
+
+{{ .Content }}
+
+&lt;hr&gt;
+
+{{- /* Creating a section that lists out regular pages by year */ -}}
+{{ range $.Site.RegularPages.GroupByPublishDate &#34;2006&#34; }}
+    {{- /* Skip regular pages with an invalid creation date string. */ -}}
+    {{- /* This is convenient if we want to exclude certain posts to be listed by giving no value to `date` in the frontmatter. */ -}}
+    {{- /* We will also exclude hidden pages. */ -}}
+    {{ if ne .Key &#34;0001&#34; }}
+        &lt;section data-year=&#34;{{ .Key }}&#34;&gt;
+            &lt;h2 id=&#34;{{ .Key }}&#34;&gt;{{ .Key }}&lt;/h2&gt;
+            &lt;ul&gt;
+            {{- range where .Pages &#34;Params.hidden&#34; &#34;!=&#34; true -}}
+                &lt;li&gt;
+                    &lt;date&gt;{{ .Date.Format &#34;2006-01-02&#34; }}&lt;/date&gt; -
+                    &lt;a aria-label=&#34;{{ .Title }}&#34; href=&#34;{{ .Permalink }}&#34;&gt;{{ .Title }}&lt;/a&gt;
+                &lt;/li&gt;
+            {{- end -}}
+            &lt;/ul&gt;
+        &lt;/section&gt;
+    {{- end }}
+{{ end }}
+
+{{- end -}}</code></pre>
+</div>
+</div>
+<div class="paragraph">
+<p>We will simply add this as a layout in our customized theme.
+Let’s call it <code>archives</code> so we have to add a file in <code>layouts/_default/archives.html</code> then set a page of our project with the <code>layout</code> key in the frontmatter.</p>
+</div>
+<div class="paragraph">
+<p>We want the archives page to be accessed at <code>$.Site.BaseURL/archives</code> so we’ll simply create <code>archives.adoc</code> (<a href="https://gohugo.io/content-management/formats/#list-of-content-formats">any valid content files with certain file extensions can do</a>, I’m using <a href="https://asciidoctor.org/">Asciidoctor</a>) with the following example content.</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre class="highlight"><code class="language-asciidoctor" data-lang="asciidoctor">---
+title: &#34;Archives&#34;
+layout: &#34;archive&#34;
+---
+
+= Archives
+
+This is the archives of the century.</code></pre>
+</div>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_configurable_social_media_links">Configurable social media links</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>Most themes offer quick social media links with site configuration.
+However, it is only limited to popular media sites such as Facebook, Twitter, Instagram, GitHub, etc.</p>
+</div>
+<div class="paragraph">
+<p>To get around this, we’ll make use of <a href="https://gohugo.io/templates/data-templates/">data templates</a>.
+Let’s create a quick game plan how does it work.</p>
+</div>
+<div class="paragraph">
+<p>The data is a top-level dictionary/object with each key contains an object with the following fields.</p>
+</div>
+<div class="ulist">
+<ul>
+<li>
+<p><code>url</code> is the…​ contact link itself and it is required to have it.</p>
+</li>
+<li>
+<p><code>name</code> is the text to appear in the output.
+Also required to have.</p>
+</li>
+<li>
+<p><code>weight</code> is an integer similar to how Hugo sorts the pages with the lower weight having high precedence;
+if this key is absent, it will be interpreted as 0.</p>
+</li>
+</ul>
+</div>
+<div class="paragraph">
+<p>And here’s the data example in TOML which is placed in <code>data/contact.toml</code>.</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre class="highlight"><code class="language-toml" data-lang="toml">[github]
+    name = &#34;GitHub&#34;
+    url = &#34;https://github.com/foo-dogsquared&#34;
+
+[gitlab]
+    name = &#34;Gitlab&#34;
+    url = &#34;https://gitlab.com/foo-dogsquared&#34;
+
+[keybase]
+    name = &#34;Keybase&#34;
+    url = &#34;https://keybase.io/foo_dogsquared&#34;
+    weight = -1
+
+[twitter]
+    name = &#34;Twitter&#34;
+    url = &#34;https://twitter.com/foo_dogsquared&#34;</code></pre>
+</div>
+</div>
+<div class="paragraph">
+<p>I want my Keybase profile to appear first than anything else for whatever reason so the <code>weight</code> key is set to -1.</p>
+</div>
+<div class="paragraph">
+<p>With this data, we can then create a template out of it.
+I’ve put the following template in a partial named <code>contacts</code> (i.e., <code>layouts/partials/contacts</code>).</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre class="highlight"><code class="language-go" data-lang="go">&lt;address&gt;
+{{- range (sort $.Site.Data.contact &#34;weight&#34; &#34;asc&#34;) -}}
+| &lt;a rel=&#34;me&#34; href=&#34;{{ .url }}&#34;&gt;{{- .name -}}&lt;/a&gt; |
+{{- end -}}
+&lt;/address&gt;</code></pre>
+</div>
+</div>
+<div class="paragraph">
+<p>A suggestion (and an exercise) for extending this is to create image links.
+Maybe add another key named <code>image</code> that accepts either URL.
+The <code>name</code> would now be the image alternative text.</p>
+</div>
+</div>
+</div>
+
+  
     https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/
     RSS, Atom, and JSON Feed Support
     
@@ -18,24 +262,51 @@
       Jane Doe
     
     2019-09-04T17:22:44+08:00
-    2020-10-24T16:00:52+08:00<div class="paragraph">
-<p>Web feeds are one of the most common ways for a visitor to keep up with someone who creates content.
-Nowadays, most social media has that feature such as the subscribing YouTube channels, following Twitter accounts, and watching Deviantart artists.
-Outside of those, we have simpler things like <a href="https://www.rssboard.org/rss-2-0-1">RSS</a> and <a href="https://www.jsonfeed.org/">JSON</a> feeds where they are just plain text files describing the content.</p>
+    2022-05-13T18:08:06+08:00<div class="paragraph">
+<p>This theme supports RSS, Atom, and JSON feed output for more ways of publishing web content for your visitors.
+It is also suitable for reading content from feed readers.</p>
 </div>
 <div class="paragraph">
-<p>The Contentful theme doesn’t have a web feed export but we can have it with <a href="https://gohugo.io/hugo-modules/theme-components/">theme components</a>.
-For this demo, we’ll use the <a href="https://github.com/foo-dogsquared/hugo-web-feeds">web feed component</a> created by <a href="https://foo-dogsquared.github.io/">foo-dogsquared</a>.</p>
+<p>Here are the following documents used as references for the creation of the output feed templates.</p>
+</div>
+<div class="ulist">
+<ul>
+<li>
+<p><a href="https://tools.ietf.org/html/rfc4287">Atom 1.0 - IETF RFC4287</a></p>
+</li>
+<li>
+<p><a href="https://jsonfeed.org/version/1">JSON Feed version 1 specifications</a></p>
+</li>
+<li>
+<p><a href="https://cyber.harvard.edu/rss/rss.html">RSS 2.0 specifications</a></p>
+</li>
+</ul>
 </div>
 <div class="paragraph">
-<p>If you’re settling with this option, here’s an example template for installing the web feed module and exporting all of the feed formats all in one fell swoop.</p>
+<p>In this demo, it is enabled and you should be able to see them through the following links:</p>
+</div>
+<div class="ulist">
+<ul>
+<li>
+<p><strong>RSS</strong>: <code>$HUGO_URL/index.rss</code></p>
+</li>
+<li>
+<p><strong>Atom</strong>: <code>$HUGO_URL/index.atom</code></p>
+</li>
+<li>
+<p><strong>JSON</strong>: <code>$HUGO_URL/index.json</code></p>
+</li>
+</ul>
+</div>
+<div class="paragraph">
+<p>For enabling output feeds, utilize the <a href="https://gohugo.io/templates/output-formats">output formats</a> in your site configuration.</p>
+</div>
+<div class="paragraph">
+<p>If you’re settling with this option, here’s an example template for enabling all of the feed formats.</p>
 </div>
 <div class="listingblock">
 <div class="content">
-<pre class="highlight"><code class="language-toml" data-lang="toml">[[module.imports]]
-    path = &#34;github.com/foo-dogsquared/hugo-web-feeds&#34;
-
-# Visit the following for more information:
+<pre class="highlight"><code class="language-toml" data-lang="toml"># Visit the following for more information:
 # https://gohugo.io/templates/output-formats
 
 # Defining the media type of the output formats
@@ -48,8 +319,6 @@ For this demo, we’ll use the <a href="https://github.com/foo-dogsquared
     [mediaTypes.&#34;application/rss+xml&#34;]
         suffixes = [&#34;rss&#34;, &#34;rss.xml&#34;] # You can remove the &#34;rss.xml&#34; if you want
 
-    [mediaTypes.&#34;application/feed+json&#34;]
-        suffixes = [&#34;json&#34;] # You can remove the &#34;rss.xml&#34; if you want
 
 
 # Including all of the feed output formats in the build
@@ -63,7 +332,7 @@ For this demo, we’ll use the <a href="https://github.com/foo-dogsquared
         baseName = &#34;feed&#34;
 
     [outputFormats.Json]
-        mediaType = &#34;application/feed+json&#34;
+        mediaType = &#34;application/json&#34;
         baseName = &#34;feed&#34;
 
 
@@ -77,283 +346,5 @@ For this demo, we’ll use the <a href="https://github.com/foo-dogsquared
     section = [&#34;HTML&#34;, &#34;JSON&#34;, &#34;RSS&#34;, &#34;ATOM&#34;]</code></pre>
 </div>
 </div>
-
-  
-    https://foo-dogsquared.github.io/hugo-theme-contentful/articles/asciidoctor-extended-syntax-guide/
-    Asciidoctor Extended Syntax Guide
-    
-    2019-08-29T22:09:16+08:00
-    2020-05-12T16:40:21+08:00
-<div id="preamble">
-<div class="sectionbody">
-<div class="paragraph">
-<p>The purpose of this article to make sure not-so-common features of
-Asciidoctor (i.e. admonition blocks, callouts) are styled and
-fit to the theme.
-It also serves as a quick introduction to more Asciidoctor as well.
-Feel free to steal this if you want a template for this.</p>
-</div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="_admonition_blocks">Admonition blocks</h2>
-<div class="sectionbody">
-<div class="paragraph">
-<p>Admonition blocks contain content that are not a part of the main
-content but you’ll want to draw attention to the audience anyways.</p>
-</div>
-<div class="paragraph">
-<p>By default, Asciidoctor provides five labels for admonitions:</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p><code>TIP</code></p>
-</li>
-<li>
-<p><code>NOTE</code></p>
-</li>
-<li>
-<p><code>IMPORTANT</code></p>
-</li>
-<li>
-<p><code>CAUTION</code></p>
-</li>
-<li>
-<p><code>WARNING</code></p>
-</li>
-</ul>
-</div>
-<div class="sidebarblock">
-<div class="content">
-<div class="title"><code>CAUTION</code> vs <code>WARNING</code></div>
-<div class="paragraph">
-<p>As the <a href="https://asciidoctor.org/docs/user-manual/#admonition">user manual</a>
-has said, <code>CAUTION</code> and <code>WARNING</code> should be used with different semantics.</p>
-</div>
-<div class="paragraph">
-<p><code>CAUTION</code> basically advises the user to observe care.
-<code>WARNING</code> warns the user about the dangers or consequences that’ll exist.</p>
-</div>
-</div>
-</div>
-<div class="paragraph">
-<p>Writing an admonition is intuitively easy, simply write the label
-in all uppercase and append with a colon.
-Then write the content after.</p>
-</div>
-<div class="listingblock">
-<div class="content">
-<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">TIP: Lorem ipsum dolor sit amet consectetur adipiscing elit varius cursus
-orci nulla, fames nisl sodales scelerisque eu consequat sem imperdiet ac mi
-vivamus tempor, accumsan ad justo odio viverra praesent senectus class egestas duis.</code></pre>
-</div>
-</div>
-<div class="paragraph">
-<p>It’ll render as this:</p>
-</div>
-<div class="admonitionblock tip">
-<table>
-<tbody><tr>
-<td class="icon">
-<div class="title">Tip</div>
-</td>
-<td class="content">
-Lorem ipsum dolor sit amet consectetur adipiscing elit varius cursus
-orci nulla, fames nisl sodales scelerisque eu consequat sem imperdiet ac mi
-vivamus tempor, accumsan ad justo odio viverra praesent senectus class egestas duis.
-</td>
-</tr>
-</tbody></table>
-</div>
-<div class="paragraph">
-<p>In case you want to style the labels differently such as assigning
-appropriate colors or an icon to the rest of the labels,
-here’s the rest of them:</p>
-</div>
-<div class="admonitionblock note">
-<table>
-<tbody><tr>
-<td class="icon">
-<div class="title">Note</div>
-</td>
-<td class="content">
-Malesuada mattis aenean ultrices netus cursus viverra vivamus ultricies,
-velit molestie penatibus phasellus in ante luctus, habitant suspendisse eros
-turpis taciti risus himenaeos.
-</td>
-</tr>
-</tbody></table>
-</div>
-<div class="admonitionblock important">
-<table>
-<tbody><tr>
-<td class="icon">
-<div class="title">Important</div>
-</td>
-<td class="content">
-Velit fringilla feugiat nibh id faucibus scelerisque facilisis ac,
-suscipit quisque odio libero ullamcorper curabitur fames nascetur, elementum
-tristique hac nisl etiam dictumst dapibus.
-</td>
-</tr>
-</tbody></table>
-</div>
-<div class="admonitionblock caution">
-<table>
-<tbody><tr>
-<td class="icon">
-<div class="title">Caution</div>
-</td>
-<td class="content">
-Tempus dui aptent tempor torquent lacinia sem cursus porta cras semper
-accumsan feugiat, himenaeos mi ullamcorper pharetra enim class eget auctor conubia
-metus curabitur.
-</td>
-</tr>
-</tbody></table>
-</div>
-<div class="admonitionblock warning">
-<table>
-<tbody><tr>
-<td class="icon">
-<div class="title">Warning</div>
-</td>
-<td class="content">
-Aliquet ut maecenas mollis id enim nibh suscipit quisque posuere cum fusce,
-dignissim ad curabitur odio ac diam pharetra platea vivamus eleifend.
-</td>
-</tr>
-</tbody></table>
-</div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="_callouts">Callouts</h2>
-<div class="sectionbody">
-<div class="paragraph">
-<p>Callouts are used to add annotations within a verbatim block.
-This is especially useful for code listings in order to effectively explain what
-is going on within the code.</p>
-</div>
-<div class="paragraph">
-<p>Here’s an example of using callouts.</p>
-</div>
-<div class="listingblock">
-<div class="content">
-<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">[source,python]
-----
-from pathlib import Path
-from re import compile, match
-
-current_directory = Path(&#34;.&#34;) &lt;1&gt;
-notes_directory = current_directory / &#34;notes/&#34; &lt;2&gt;
-----
-&lt;1&gt; Created a Path object
-&lt;2&gt; Appending a Path object with &#34;/&#34;</code></pre>
-</div>
-</div>
-<div class="paragraph">
-<p>And it’ll render as:</p>
-</div>
-<div class="listingblock">
-<div class="content">
-<pre class="highlight"><code class="language-python" data-lang="python">from pathlib import Path
-from re import compile, match
-
-current_directory = Path(&#34;.&#34;) # <b class="conum">(1)</b>
-notes_directory = current_directory / &#34;notes/&#34; # <b class="conum">(2)</b></code></pre>
-</div>
-</div>
-<div class="colist arabic">
-<ol>
-<li>
-<p>Created a <code>Path</code> object</p>
-</li>
-<li>
-<p>Appending a <code>Path</code> object with &#34;/&#34;</p>
-</li>
-</ol>
-</div>
-<div class="paragraph">
-<p>One of the most important you should style is the callout number
-on the code listings block.
-Normally, when a user wants to copy-paste (even though I don’t personally
-encourage it), the callout number gets in the way and they have to
-manually remove them which can be annoying.</p>
-</div>
-<div class="paragraph">
-<p>Either attach the property <code>user-select</code> with it or take a part from the
-default Asciidoctor stylesheet and include it in your own stylesheet.</p>
-</div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="_passthroughs">Passthroughs</h2>
-<div class="sectionbody">
-<div class="paragraph">
-<p>A <a href="https://asciidoctor.org/docs/user-manual/#passthroughs">passthrough</a> passes the input as it is on the final output.
-This is useful for web-based outputs, for example passing raw HTML for interactive scripts or to create a live result.</p>
-</div>
-<div class="paragraph">
-<p>Below is a very simple example with a <a href="https://p5js.org/">p5.js</a> sketch.</p>
-</div>
-<div id="example-sketch"></div>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
-<script>
-const sketchuuuuu = ( sketch ) => {
-  let x = 100;
-  let y = 100;
-
-  sketch.setup = () => {
-    sketch.createCanvas(300, 380);
-  };
-
-  sketch.draw = () => {
-    sketch.background(0);
-    sketch.fill(255);
-    sketch.rect(x,y,50,50);
-    sketch.ellipse(sketch["mouseX"], sketch["mouseY"], 20);
-  };
-};
-
-let example_sketch = new p5(sketchuuuuu, "example-sketch")
-</script>
-<div class="paragraph">
-<p>Here is the input from the source code of this document.</p>
-</div>
-<div class="listingblock">
-<div class="content">
-<pre class="highlight"><code class="language-asciidoctor" data-lang="asciidoctor">++++
-&lt;div id=&#34;example-sketch&#34;&gt;&lt;/div&gt;
-&lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js&#34;&gt;&lt;/script&gt;
-&lt;script&gt;
-const sketchuuuuu = ( sketch ) =&gt; {
-  let x = 100;
-  let y = 100;
-
-  sketch.setup = () =&gt; {
-    sketch.createCanvas(300, 380);
-  };
-
-  sketch.draw = () =&gt; {
-    sketch.background(0);
-    sketch.fill(255);
-    sketch.rect(x,y,50,50);
-    sketch.ellipse(sketch[&#34;mouseX&#34;], sketch[&#34;mouseY&#34;], 20);
-  };
-};
-
-let example_sketch = new p5(sketchuuuuu, &#34;example-sketch&#34;)
-&lt;/script&gt;
-++++</code></pre>
-</div>
-</div>
-<div class="paragraph">
-<p>This is the closest instance of <a href="https://en.wikipedia.org/wiki/Literate_programming">literate programming</a> in the web when using Asciidoctor.
-(Sadly, not as flexible or cool as <a href="https://orgmode.org/">Org-Mode</a> or <a href="https://jupyter.org/">Jupyter Notebooks</a>.)</p>
-</div>
-</div>
-</div>
 
   
diff --git a/feed.json b/feed.json
index 503bbcd..9741344 100644
--- a/feed.json
+++ b/feed.json
@@ -8,4 +8,4 @@
     "items":
         
         
-        [{"content_html":"\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWeb feeds are one of the most common ways for a visitor to keep up with someone who creates content.\nNowadays, most social media has that feature such as the subscribing YouTube channels, following Twitter accounts, and watching Deviantart artists.\nOutside of those, we have simpler things like \u003ca href=\"https://www.rssboard.org/rss-2-0-1\"\u003eRSS\u003c/a\u003e and \u003ca href=\"https://www.jsonfeed.org/\"\u003eJSON\u003c/a\u003e feeds where they are just plain text files describing the content.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThe Contentful theme doesn’t have a web feed export but we can have it with \u003ca href=\"https://gohugo.io/hugo-modules/theme-components/\"\u003etheme components\u003c/a\u003e.\nFor this demo, we’ll use the \u003ca href=\"https://github.com/foo-dogsquared/hugo-web-feeds\"\u003eweb feed component\u003c/a\u003e created by \u003ca href=\"https://foo-dogsquared.github.io/\"\u003efoo-dogsquared\u003c/a\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIf you’re settling with this option, here’s an example template for installing the web feed module and exporting all of the feed formats all in one fell swoop.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e[[module.imports]]\n    path = \u0026#34;github.com/foo-dogsquared/hugo-web-feeds\u0026#34;\n\n# Visit the following for more information:\n# https://gohugo.io/templates/output-formats\n\n# Defining the media type of the output formats\n# For JSON format, it doesn\u0026#39;t need to be since it\u0026#39;s already built-in into Hugo\n[mediaTypes]\n    [mediaTypes.\u0026#34;application/atom+xml\u0026#34;]\n        suffixes = [\u0026#34;atom\u0026#34;, \u0026#34;atom.xml\u0026#34;] # You can remove the \u0026#34;atom.xml\u0026#34; if you want\n\n    # Redefining RSS media type for the additional suffix\n    [mediaTypes.\u0026#34;application/rss+xml\u0026#34;]\n        suffixes = [\u0026#34;rss\u0026#34;, \u0026#34;rss.xml\u0026#34;] # You can remove the \u0026#34;rss.xml\u0026#34; if you want\n\n    [mediaTypes.\u0026#34;application/feed+json\u0026#34;]\n        suffixes = [\u0026#34;json\u0026#34;] # You can remove the \u0026#34;rss.xml\u0026#34; if you want\n\n\n# Including all of the feed output formats in the build\n[outputFormats]\n    [outputFormats.Rss]\n        mediaType = \u0026#34;application/rss+xml\u0026#34;\n        baseName = \u0026#34;feed\u0026#34;\n\n    [outputFormats.Atom]\n        mediaType = \u0026#34;application/atom+xml\u0026#34;\n        baseName = \u0026#34;feed\u0026#34;\n\n    [outputFormats.Json]\n        mediaType = \u0026#34;application/feed+json\u0026#34;\n        baseName = \u0026#34;feed\u0026#34;\n\n\n# Indicating what output formats shall be included\n# for the following kinds\n[outputs]\n    # .Site.BaseURL/index.* is available\n    home = [\u0026#34;HTML\u0026#34;, \u0026#34;JSON\u0026#34;, \u0026#34;RSS\u0026#34;, \u0026#34;ATOM\u0026#34;]\n\n    # .Site.BaseURL/$section/index.* is available\n    section = [\u0026#34;HTML\u0026#34;, \u0026#34;JSON\u0026#34;, \u0026#34;RSS\u0026#34;, \u0026#34;ATOM\u0026#34;]\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n","date_modified":"2020-10-24T16:00:52+08:00","date_published":"2019-09-04T17:22:44+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/","summary":"Web feeds are one of the most common ways for a visitor to keep up with someone who creates content. Nowadays, most social media has that feature such as the subscribing YouTube channels, following Twitter accounts, and watching Deviantart artists. Outside of those, we have simpler things like RSS and JSON feeds where they are just plain text files describing the content.\n The Contentful theme doesn’t have a web feed export but we can have it with theme components.","tags":["this is a test tag","tag2"],"title":"RSS, Atom, and JSON Feed Support","url":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/"},{"content_html":"\n\u003cdiv id=\"preamble\"\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThe purpose of this article to make sure not-so-common features of\nAsciidoctor (i.e. admonition blocks, callouts) are styled and\nfit to the theme.\nIt also serves as a quick introduction to more Asciidoctor as well.\nFeel free to steal this if you want a template for this.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_admonition_blocks\"\u003eAdmonition blocks\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAdmonition blocks contain content that are not a part of the main\ncontent but you’ll want to draw attention to the audience anyways.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eBy default, Asciidoctor provides five labels for admonitions:\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"ulist\"\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eTIP\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eNOTE\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eIMPORTANT\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eCAUTION\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eWARNING\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sidebarblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cdiv class=\"title\"\u003e\u003ccode\u003eCAUTION\u003c/code\u003e vs \u003ccode\u003eWARNING\u003c/code\u003e\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAs the \u003ca href=\"https://asciidoctor.org/docs/user-manual/#admonition\"\u003euser manual\u003c/a\u003e\nhas said, \u003ccode\u003eCAUTION\u003c/code\u003e and \u003ccode\u003eWARNING\u003c/code\u003e should be used with different semantics.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003e\u003ccode\u003eCAUTION\u003c/code\u003e basically advises the user to observe care.\n\u003ccode\u003eWARNING\u003c/code\u003e warns the user about the dangers or consequences that’ll exist.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWriting an admonition is intuitively easy, simply write the label\nin all uppercase and append with a colon.\nThen write the content after.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-asciidoc\" data-lang=\"asciidoc\"\u003eTIP: Lorem ipsum dolor sit amet consectetur adipiscing elit varius cursus\norci nulla, fames nisl sodales scelerisque eu consequat sem imperdiet ac mi\nvivamus tempor, accumsan ad justo odio viverra praesent senectus class egestas duis.\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIt’ll render as this:\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"admonitionblock tip\"\u003e\n\u003ctable\u003e\n\u003ctbody\u003e\u003ctr\u003e\n\u003ctd class=\"icon\"\u003e\n\u003cdiv class=\"title\"\u003eTip\u003c/div\u003e\n\u003c/td\u003e\n\u003ctd class=\"content\"\u003e\nLorem ipsum dolor sit amet consectetur adipiscing elit varius cursus\norci nulla, fames nisl sodales scelerisque eu consequat sem imperdiet ac mi\nvivamus tempor, accumsan ad justo odio viverra praesent senectus class egestas duis.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIn case you want to style the labels differently such as assigning\nappropriate colors or an icon to the rest of the labels,\nhere’s the rest of them:\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"admonitionblock note\"\u003e\n\u003ctable\u003e\n\u003ctbody\u003e\u003ctr\u003e\n\u003ctd class=\"icon\"\u003e\n\u003cdiv class=\"title\"\u003eNote\u003c/div\u003e\n\u003c/td\u003e\n\u003ctd class=\"content\"\u003e\nMalesuada mattis aenean ultrices netus cursus viverra vivamus ultricies,\nvelit molestie penatibus phasellus in ante luctus, habitant suspendisse eros\nturpis taciti risus himenaeos.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003cdiv class=\"admonitionblock important\"\u003e\n\u003ctable\u003e\n\u003ctbody\u003e\u003ctr\u003e\n\u003ctd class=\"icon\"\u003e\n\u003cdiv class=\"title\"\u003eImportant\u003c/div\u003e\n\u003c/td\u003e\n\u003ctd class=\"content\"\u003e\nVelit fringilla feugiat nibh id faucibus scelerisque facilisis ac,\nsuscipit quisque odio libero ullamcorper curabitur fames nascetur, elementum\ntristique hac nisl etiam dictumst dapibus.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003cdiv class=\"admonitionblock caution\"\u003e\n\u003ctable\u003e\n\u003ctbody\u003e\u003ctr\u003e\n\u003ctd class=\"icon\"\u003e\n\u003cdiv class=\"title\"\u003eCaution\u003c/div\u003e\n\u003c/td\u003e\n\u003ctd class=\"content\"\u003e\nTempus dui aptent tempor torquent lacinia sem cursus porta cras semper\naccumsan feugiat, himenaeos mi ullamcorper pharetra enim class eget auctor conubia\nmetus curabitur.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003cdiv class=\"admonitionblock warning\"\u003e\n\u003ctable\u003e\n\u003ctbody\u003e\u003ctr\u003e\n\u003ctd class=\"icon\"\u003e\n\u003cdiv class=\"title\"\u003eWarning\u003c/div\u003e\n\u003c/td\u003e\n\u003ctd class=\"content\"\u003e\nAliquet ut maecenas mollis id enim nibh suscipit quisque posuere cum fusce,\ndignissim ad curabitur odio ac diam pharetra platea vivamus eleifend.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_callouts\"\u003eCallouts\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eCallouts are used to add annotations within a verbatim block.\nThis is especially useful for code listings in order to effectively explain what\nis going on within the code.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eHere’s an example of using callouts.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-asciidoc\" data-lang=\"asciidoc\"\u003e[source,python]\n----\nfrom pathlib import Path\nfrom re import compile, match\n\ncurrent_directory = Path(\u0026#34;.\u0026#34;) \u0026lt;1\u0026gt;\nnotes_directory = current_directory / \u0026#34;notes/\u0026#34; \u0026lt;2\u0026gt;\n----\n\u0026lt;1\u0026gt; Created a Path object\n\u0026lt;2\u0026gt; Appending a Path object with \u0026#34;/\u0026#34;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAnd it’ll render as:\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-python\" data-lang=\"python\"\u003efrom pathlib import Path\nfrom re import compile, match\n\ncurrent_directory = Path(\u0026#34;.\u0026#34;) # \u003cb class=\"conum\"\u003e(1)\u003c/b\u003e\nnotes_directory = current_directory / \u0026#34;notes/\u0026#34; # \u003cb class=\"conum\"\u003e(2)\u003c/b\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"colist arabic\"\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cp\u003eCreated a \u003ccode\u003ePath\u003c/code\u003e object\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eAppending a \u003ccode\u003ePath\u003c/code\u003e object with \u0026#34;/\u0026#34;\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eOne of the most important you should style is the callout number\non the code listings block.\nNormally, when a user wants to copy-paste (even though I don’t personally\nencourage it), the callout number gets in the way and they have to\nmanually remove them which can be annoying.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eEither attach the property \u003ccode\u003euser-select\u003c/code\u003e with it or take a part from the\ndefault Asciidoctor stylesheet and include it in your own stylesheet.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_passthroughs\"\u003ePassthroughs\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eA \u003ca href=\"https://asciidoctor.org/docs/user-manual/#passthroughs\"\u003epassthrough\u003c/a\u003e passes the input as it is on the final output.\nThis is useful for web-based outputs, for example passing raw HTML for interactive scripts or to create a live result.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eBelow is a very simple example with a \u003ca href=\"https://p5js.org/\"\u003ep5.js\u003c/a\u003e sketch.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv id=\"example-sketch\"\u003e\u003c/div\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nconst sketchuuuuu = ( sketch ) =\u003e {\n  let x = 100;\n  let y = 100;\n\n  sketch.setup = () =\u003e {\n    sketch.createCanvas(300, 380);\n  };\n\n  sketch.draw = () =\u003e {\n    sketch.background(0);\n    sketch.fill(255);\n    sketch.rect(x,y,50,50);\n    sketch.ellipse(sketch[\"mouseX\"], sketch[\"mouseY\"], 20);\n  };\n};\n\nlet example_sketch = new p5(sketchuuuuu, \"example-sketch\")\n\u003c/script\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eHere is the input from the source code of this document.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-asciidoctor\" data-lang=\"asciidoctor\"\u003e++++\n\u0026lt;div id=\u0026#34;example-sketch\u0026#34;\u0026gt;\u0026lt;/div\u0026gt;\n\u0026lt;script src=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script\u0026gt;\nconst sketchuuuuu = ( sketch ) =\u0026gt; {\n  let x = 100;\n  let y = 100;\n\n  sketch.setup = () =\u0026gt; {\n    sketch.createCanvas(300, 380);\n  };\n\n  sketch.draw = () =\u0026gt; {\n    sketch.background(0);\n    sketch.fill(255);\n    sketch.rect(x,y,50,50);\n    sketch.ellipse(sketch[\u0026#34;mouseX\u0026#34;], sketch[\u0026#34;mouseY\u0026#34;], 20);\n  };\n};\n\nlet example_sketch = new p5(sketchuuuuu, \u0026#34;example-sketch\u0026#34;)\n\u0026lt;/script\u0026gt;\n++++\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThis is the closest instance of \u003ca href=\"https://en.wikipedia.org/wiki/Literate_programming\"\u003eliterate programming\u003c/a\u003e in the web when using Asciidoctor.\n(Sadly, not as flexible or cool as \u003ca href=\"https://orgmode.org/\"\u003eOrg-Mode\u003c/a\u003e or \u003ca href=\"https://jupyter.org/\"\u003eJupyter Notebooks\u003c/a\u003e.)\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n","date_modified":"2020-05-12T16:40:21+08:00","date_published":"2019-08-29T22:09:16+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/asciidoctor-extended-syntax-guide/","summary":"The purpose of this article to make sure not-so-common features of Asciidoctor (i.e. admonition blocks, callouts) are styled and fit to the theme. It also serves as a quick introduction to more Asciidoctor as well. Feel free to steal this if you want a template for this.\n   Admonition blocks Admonition blocks contain content that are not a part of the main content but you’ll want to draw attention to the audience anyways.","tags":["asciidoctor","guide"],"title":"Asciidoctor Extended Syntax Guide","url":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/asciidoctor-extended-syntax-guide/"}]}
+        [{"content_html":"\n\u003cdiv id=\"preamble\"\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eExtending a Hugo theme is nothing new and a \u003ca href=\"https://gohugo.io/content-management/sections/\"\u003efew\u003c/a\u003e \u003ca href=\"http://hugocodex.org/add-ons/\"\u003eplaces\u003c/a\u003e provide a place for the most common extensions.\nIn this post, I’ll be listing a few personal recipes I’ve always used for extending a Hugo theme.\nThough this only applies specifically to Contentful and may need some tweaking when applying it other themes.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_customizing_your_head\"\u003eCustomizing your \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eLet’s start with the most basic and perhaps most useful customization: modifying the \u003ccode\u003e\u0026lt;head\u003c/code\u003e\u0026gt;.\nThis is useful for adding your own CSS and JavaScript files, changing certain metadata, or adding icons.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eFirst, copy the \u003ccode\u003ehead\u003c/code\u003e partial from the theme (\u003ccode\u003etheme/contentful/layouts/partials/head.html\u003c/code\u003e) to your own (\u003ccode\u003elayouts/partials/head.html\u003c/code\u003e).\nWe’re simply taking advantage of \u003ca href=\"https://gohugo.io/templates/lookup-order/\"\u003eHugo’s lookup order\u003c/a\u003e where we’ve override the \u003ccode\u003ehead\u003c/code\u003e partial with our own copy.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThen, feel free to add your own (or others\u0026#39;) scripts and stylesheets, \u003ca href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML\"\u003eicons and other metadata\u003c/a\u003e, or whatever suitable things.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIn my case, I often use certain JavaScript libraries like \u003ca href=\"https://www.mathjax.org/\"\u003eMathJax\u003c/a\u003e for mathematical typesetting, \u003ca href=\"https://prismjs.com/\"\u003ePrism\u003c/a\u003e for syntax highlighting, and \u003ca href=\"https://github.com/francoischalifour/medium-zoom/\"\u003emedium-zoom\u003c/a\u003e for interactive image zooms.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eHere’s the modified code.\n(The example code is snipped for brevity.)\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u0026lt;!--snip--\u0026gt;\n\n{{- /* MathJax */ -}}\n\u0026lt;script src=\u0026#34;https://polyfill.io/v3/polyfill.min.js?features=es6\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script id=\u0026#34;MathJax-script\u0026#34; defer src=\u0026#34;https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\n{{- /* Prism.js */ -}}\n\u0026lt;link rel=\u0026#34;stylesheet\u0026#34; href=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css\u0026#34; type=\u0026#34;text/css\u0026#34;\u0026gt;\n\u0026lt;script defer src=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script defer src=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js\u0026#34;\u0026gt;\n\u0026lt;script defer src=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/keep-markup/prism-keep-markup.min.js\u0026#34;\u0026gt;\n\n{{- /* medium-zoom */ -}}\n\u0026lt;script defer src=\u0026#34;https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script\u0026gt;window.addEventListener(\u0026#39;load\u0026#39;, () =\u0026gt; mediumZoom(\u0026#39;article img\u0026#39;, { \u0026#39;background\u0026#39;: \u0026#39;rgba(0, 0, 0, 0.75)\u0026#39; }))\u0026lt;/script\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eSince most of the JavaScript libraries used here are not really a requirement (except for MathJax for mathematical typesetting), I’ve set them to be loaded at the end of the page loading with \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script\"\u003e\u003ccode\u003edefer\u003c/code\u003e attribute\u003c/a\u003e.\nIf you have an inline script, you can simply wrap it in an event listener for page loading (\u003ccode\u003ewindow.addEventListener(\u0026#34;load\u0026#34;, your_function_goes_here)\u003c/code\u003e).\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIf you want document-specific libraries, you have to pass some raw HTML through the parser of the document.\nFor Goldmark, the default Markdown parser starting \u003ca href=\"https://gohugo.io/news/0.60.0-relnotes/\"\u003eHugo v0.60.0\u003c/a\u003e, blocks raw HTML by default and you can disable it by setting \u003ccode\u003emarkup.goldmark.renderer.unsafe\u003c/code\u003e to \u003ccode\u003etrue\u003c/code\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eFor Blackfriday, it parses even the raw HTML just fine.\nThough, you have to set it as the default Markdown parser.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eFor \u003ca href=\"https://asciidoctor.org/\"\u003eAsciidoctor\u003c/a\u003e, you can use \u003ca href=\"https://asciidoctor.org/docs/user-manual/#passthroughs\"\u003epassthroughs\u003c/a\u003e to get raw HTML through.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_twitter_cards\"\u003eTwitter cards\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThis will add \u003ca href=\"https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started\"\u003eTwitter cards\u003c/a\u003e for your webpages.\n(Be sure to copy the \u003ccode\u003ehead\u003c/code\u003e partial first in your own layout folder.)\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThankfully, Hugo already has \u003ca href=\"https://gohugo.io/templates/internal/#twitter-cards\"\u003ean internal template for Twitter cards\u003c/a\u003e.\nSimply add  \u003ccode\u003e{{- template \u0026#34;_internal/twitter_cards.html\u0026#34; . -}}\u003c/code\u003e somewhere in your own copy.\n(For reference, \u003ca href=\"https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/twitter_cards.html\"\u003ehere’s the source code for the internal template\u003c/a\u003e.)\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eYou could also roll your own Twitter cards but I recommend to modify the internal template instead fitting your specific needs.\n(Copy the internal template from the given link, create it as a partial in \u003ccode\u003elayouts/partials/twitter_cards.html\u003c/code\u003e, modify it, and insert the template with \u003ccode\u003e{{- partial \u0026#34;twitter_cards.html\u0026#34; -}}\u003c/code\u003e.)\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_open_graph_protocol\"\u003eOpen Graph protocol\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eNext up, we’re implementing \u003ca href=\"https://opengraphprotocol.org/\"\u003eOpen Graph protocol\u003c/a\u003e for our webpages.\nCommonly used for making suitable format when sharing the content on certain sites like Facebook.\n(Be sure to copy the \u003ccode\u003ehead\u003c/code\u003e partial first in your own layout folder.)\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eSimilar to Twitter cards, Hugo has \u003ca href=\"https://gohugo.io/templates/internal/#open-graph\"\u003ean internal template for this\u003c/a\u003e.\nSimply add  \u003ccode\u003e{{- template \u0026#34;_internal/opengraph.html\u0026#34; . -}}\u003c/code\u003e somewhere in your own copy.\n(For reference, \u003ca href=\"https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/opengraph.html\"\u003ehere’s the source code for the internal template\u003c/a\u003e.)\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIf you want more control and customized version of the output, I recommend to copy the internal template and create a partial (e.g., \u003ccode\u003elayouts/partials/opengraph.html\u003c/code\u003e) and modify it.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_an_archive_page\"\u003eAn archive page\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThis will add an archive page similar to archive pages \u003ca href=\"https://davidtranscend.com/archives/\"\u003elike\u003c/a\u003e \u003ca href=\"https://lukesmith.xyz/blogindex.html\"\u003ethese\u003c/a\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e{{- define \u0026#34;main\u0026#34; -}}\n\n\u0026lt;h1\u0026gt;{{ .Title }}\u0026lt;/h1\u0026gt;\n\n{{ .Content }}\n\n\u0026lt;hr\u0026gt;\n\n{{- /* Creating a section that lists out regular pages by year */ -}}\n{{ range $.Site.RegularPages.GroupByPublishDate \u0026#34;2006\u0026#34; }}\n    {{- /* Skip regular pages with an invalid creation date string. */ -}}\n    {{- /* This is convenient if we want to exclude certain posts to be listed by giving no value to `date` in the frontmatter. */ -}}\n    {{- /* We will also exclude hidden pages. */ -}}\n    {{ if ne .Key \u0026#34;0001\u0026#34; }}\n        \u0026lt;section data-year=\u0026#34;{{ .Key }}\u0026#34;\u0026gt;\n            \u0026lt;h2 id=\u0026#34;{{ .Key }}\u0026#34;\u0026gt;{{ .Key }}\u0026lt;/h2\u0026gt;\n            \u0026lt;ul\u0026gt;\n            {{- range where .Pages \u0026#34;Params.hidden\u0026#34; \u0026#34;!=\u0026#34; true -}}\n                \u0026lt;li\u0026gt;\n                    \u0026lt;date\u0026gt;{{ .Date.Format \u0026#34;2006-01-02\u0026#34; }}\u0026lt;/date\u0026gt; -\n                    \u0026lt;a aria-label=\u0026#34;{{ .Title }}\u0026#34; href=\u0026#34;{{ .Permalink }}\u0026#34;\u0026gt;{{ .Title }}\u0026lt;/a\u0026gt;\n                \u0026lt;/li\u0026gt;\n            {{- end -}}\n            \u0026lt;/ul\u0026gt;\n        \u0026lt;/section\u0026gt;\n    {{- end }}\n{{ end }}\n\n{{- end -}}\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWe will simply add this as a layout in our customized theme.\nLet’s call it \u003ccode\u003earchives\u003c/code\u003e so we have to add a file in \u003ccode\u003elayouts/_default/archives.html\u003c/code\u003e then set a page of our project with the \u003ccode\u003elayout\u003c/code\u003e key in the frontmatter.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWe want the archives page to be accessed at \u003ccode\u003e$.Site.BaseURL/archives\u003c/code\u003e so we’ll simply create \u003ccode\u003earchives.adoc\u003c/code\u003e (\u003ca href=\"https://gohugo.io/content-management/formats/#list-of-content-formats\"\u003eany valid content files with certain file extensions can do\u003c/a\u003e, I’m using \u003ca href=\"https://asciidoctor.org/\"\u003eAsciidoctor\u003c/a\u003e) with the following example content.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-asciidoctor\" data-lang=\"asciidoctor\"\u003e---\ntitle: \u0026#34;Archives\u0026#34;\nlayout: \u0026#34;archive\u0026#34;\n---\n\n= Archives\n\nThis is the archives of the century.\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_configurable_social_media_links\"\u003eConfigurable social media links\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eMost themes offer quick social media links with site configuration.\nHowever, it is only limited to popular media sites such as Facebook, Twitter, Instagram, GitHub, etc.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eTo get around this, we’ll make use of \u003ca href=\"https://gohugo.io/templates/data-templates/\"\u003edata templates\u003c/a\u003e.\nLet’s create a quick game plan how does it work.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThe data is a top-level dictionary/object with each key contains an object with the following fields.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"ulist\"\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eurl\u003c/code\u003e is the…​ contact link itself and it is required to have it.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003ename\u003c/code\u003e is the text to appear in the output.\nAlso required to have.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eweight\u003c/code\u003e is an integer similar to how Hugo sorts the pages with the lower weight having high precedence;\nif this key is absent, it will be interpreted as 0.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAnd here’s the data example in TOML which is placed in \u003ccode\u003edata/contact.toml\u003c/code\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e[github]\n    name = \u0026#34;GitHub\u0026#34;\n    url = \u0026#34;https://github.com/foo-dogsquared\u0026#34;\n\n[gitlab]\n    name = \u0026#34;Gitlab\u0026#34;\n    url = \u0026#34;https://gitlab.com/foo-dogsquared\u0026#34;\n\n[keybase]\n    name = \u0026#34;Keybase\u0026#34;\n    url = \u0026#34;https://keybase.io/foo_dogsquared\u0026#34;\n    weight = -1\n\n[twitter]\n    name = \u0026#34;Twitter\u0026#34;\n    url = \u0026#34;https://twitter.com/foo_dogsquared\u0026#34;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eI want my Keybase profile to appear first than anything else for whatever reason so the \u003ccode\u003eweight\u003c/code\u003e key is set to -1.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWith this data, we can then create a template out of it.\nI’ve put the following template in a partial named \u003ccode\u003econtacts\u003c/code\u003e (i.e., \u003ccode\u003elayouts/partials/contacts\u003c/code\u003e).\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u0026lt;address\u0026gt;\n{{- range (sort $.Site.Data.contact \u0026#34;weight\u0026#34; \u0026#34;asc\u0026#34;) -}}\n| \u0026lt;a rel=\u0026#34;me\u0026#34; href=\u0026#34;{{ .url }}\u0026#34;\u0026gt;{{- .name -}}\u0026lt;/a\u0026gt; |\n{{- end -}}\n\u0026lt;/address\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eA suggestion (and an exercise) for extending this is to create image links.\nMaybe add another key named \u003ccode\u003eimage\u003c/code\u003e that accepts either URL.\nThe \u003ccode\u003ename\u003c/code\u003e would now be the image alternative text.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n","date_modified":"2022-05-13T18:08:06+08:00","date_published":"2020-05-12T17:25:55+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/","summary":"Extending a Hugo theme is nothing new and a few places provide a place for the most common extensions. In this post, I’ll be listing a few personal recipes I’ve always used for extending a Hugo theme. Though this only applies specifically to Contentful and may need some tweaking when applying it other themes.\n   Customizing your \u0026lt;head\u0026gt; Let’s start with the most basic and perhaps most useful customization: modifying the \u0026lt;head\u0026gt;.","tags":["theme","extending"],"title":"Extending Contentful","url":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/"},{"content_html":"\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThis theme supports RSS, Atom, and JSON feed output for more ways of publishing web content for your visitors.\nIt is also suitable for reading content from feed readers.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eHere are the following documents used as references for the creation of the output feed templates.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"ulist\"\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://tools.ietf.org/html/rfc4287\"\u003eAtom 1.0 - IETF RFC4287\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://jsonfeed.org/version/1\"\u003eJSON Feed version 1 specifications\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://cyber.harvard.edu/rss/rss.html\"\u003eRSS 2.0 specifications\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIn this demo, it is enabled and you should be able to see them through the following links:\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"ulist\"\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eRSS\u003c/strong\u003e: \u003ccode\u003e$HUGO_URL/index.rss\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eAtom\u003c/strong\u003e: \u003ccode\u003e$HUGO_URL/index.atom\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eJSON\u003c/strong\u003e: \u003ccode\u003e$HUGO_URL/index.json\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eFor enabling output feeds, utilize the \u003ca href=\"https://gohugo.io/templates/output-formats\"\u003eoutput formats\u003c/a\u003e in your site configuration.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIf you’re settling with this option, here’s an example template for enabling all of the feed formats.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e# Visit the following for more information:\n# https://gohugo.io/templates/output-formats\n\n# Defining the media type of the output formats\n# For JSON format, it doesn\u0026#39;t need to be since it\u0026#39;s already built-in into Hugo\n[mediaTypes]\n    [mediaTypes.\u0026#34;application/atom+xml\u0026#34;]\n        suffixes = [\u0026#34;atom\u0026#34;, \u0026#34;atom.xml\u0026#34;] # You can remove the \u0026#34;atom.xml\u0026#34; if you want\n\n    # Redefining RSS media type for the additional suffix\n    [mediaTypes.\u0026#34;application/rss+xml\u0026#34;]\n        suffixes = [\u0026#34;rss\u0026#34;, \u0026#34;rss.xml\u0026#34;] # You can remove the \u0026#34;rss.xml\u0026#34; if you want\n\n\n\n# Including all of the feed output formats in the build\n[outputFormats]\n    [outputFormats.Rss]\n        mediaType = \u0026#34;application/rss+xml\u0026#34;\n        baseName = \u0026#34;feed\u0026#34;\n\n    [outputFormats.Atom]\n        mediaType = \u0026#34;application/atom+xml\u0026#34;\n        baseName = \u0026#34;feed\u0026#34;\n\n    [outputFormats.Json]\n        mediaType = \u0026#34;application/json\u0026#34;\n        baseName = \u0026#34;feed\u0026#34;\n\n\n# Indicating what output formats shall be included\n# for the following kinds\n[outputs]\n    # .Site.BaseURL/index.* is available\n    home = [\u0026#34;HTML\u0026#34;, \u0026#34;JSON\u0026#34;, \u0026#34;RSS\u0026#34;, \u0026#34;ATOM\u0026#34;]\n\n    # .Site.BaseURL/$section/index.* is available\n    section = [\u0026#34;HTML\u0026#34;, \u0026#34;JSON\u0026#34;, \u0026#34;RSS\u0026#34;, \u0026#34;ATOM\u0026#34;]\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n","date_modified":"2022-05-13T18:08:06+08:00","date_published":"2019-09-04T17:22:44+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/","summary":"This theme supports RSS, Atom, and JSON feed output for more ways of publishing web content for your visitors. It is also suitable for reading content from feed readers.\n Here are the following documents used as references for the creation of the output feed templates.\n   Atom 1.0 - IETF RFC4287\n  JSON Feed version 1 specifications\n  RSS 2.0 specifications\n   In this demo, it is enabled and you should be able to see them through the following links:","tags":["this is a test tag","tag2"],"title":"RSS, Atom, and JSON Feed Support","url":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/"}]}
diff --git a/feed.rss b/feed.rss
index a1617ee..f86eae3 100644
--- a/feed.rss
+++ b/feed.rss
@@ -4,13 +4,23 @@
     Contentful
     https://foo-dogsquared.github.io/hugo-theme-contentful/
     Recent content on Contentful
-    Hugo v0.76.0 -- gohugo.ioen-us© 2021 to the author(s) behind Contentful
+    Hugo v0.98.0 -- gohugo.ioen-us© 2022 to the author(s) behind Contentful
         Tue, 20 Oct 2020 21:36:34 +0800
     https://www.rssboard.org/rss-2-0-1
         
         
         
         
+    
+      Extending Contentful
+      https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/
+      theme
+      extending
+
+      Tue, 12 May 2020 17:25:55 +0800
+      https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/
+      
+    
     
       RSS, Atom, and JSON Feed Support
       https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/
@@ -21,15 +31,5 @@
       https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/
       
     
-    
-      Asciidoctor Extended Syntax Guide
-      https://foo-dogsquared.github.io/hugo-theme-contentful/articles/asciidoctor-extended-syntax-guide/
-      asciidoctor
-      guide
-
-      Thu, 29 Aug 2019 22:09:16 +0800
-      https://foo-dogsquared.github.io/hugo-theme-contentful/articles/asciidoctor-extended-syntax-guide/
-      
-    
   
 
diff --git a/feeds/index.html b/feeds/index.html
index aa717f5..85ee73c 100644
--- a/feeds/index.html
+++ b/feeds/index.html
@@ -1 +1,10 @@
-https://foo-dogsquared.github.io/hugo-theme-contentful/tl/articles/rss-atom-and-json-feed-support/
\ No newline at end of file
+
+
+  
+    https://foo-dogsquared.github.io/hugo-theme-contentful/tl/articles/rss-atom-and-json-feed-support/
+    
+    
+    
+    
+  
+
diff --git a/index.html b/index.html
index 0a5ed2f..4d007bf 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,9 @@
 
 Contentful
-
+
 
-
+
+
 
 
 
@@ -12,15 +13,11 @@
 
 
 
-
-
+
+
+
+    
     
-    
 
 
 

@@ -45,67 +37,106 @@
 
 
 
+
+
+
+
 
 
 
 
 

     
Emoji Support

     

-        
-        (Modified on )
+        
+        
     

 

 
 
 
 
 
 
 
 
 
 
 
@@ -134,6 +165,6 @@
 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/page/1/index.html b/page/1/index.html
index 07e0d91..ab94be6 100644
--- a/page/1/index.html
+++ b/page/1/index.html
@@ -1 +1,10 @@
-https://foo-dogsquared.github.io/hugo-theme-contentful/
\ No newline at end of file
+
+
+  
+    https://foo-dogsquared.github.io/hugo-theme-contentful/
+    
+    
+    
+    
+  
+
diff --git a/recipes/configurable-list-of-contacts/index.html b/recipes/configurable-list-of-contacts/index.html
index 2470cab..d73ed59 100644
--- a/recipes/configurable-list-of-contacts/index.html
+++ b/recipes/configurable-list-of-contacts/index.html
@@ -1,8 +1,9 @@
 
 Configurable list of contacts
-
+
 
-
+
+
 
 
 
 
-
+
 
-
-
+
+
+
+
+
+
+
+    
     
-    
 
 
 
@@ -53,29 +52,21 @@
     

         
Configurable list of contacts

     

-    

+    

         
 
         
         
Created: 

-    
-        
-        
Updated: 

-    
+
         
+        
Updated: 

+
+       
     

     

 
     
     
-    
-    
-
 
     

     

@@ -172,6 +163,6 @@ The name would now be the image alternative text.

 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/recipes/creating-an-archive-page/index.html b/recipes/creating-an-archive-page/index.html
index 74be934..75cedc1 100644
--- a/recipes/creating-an-archive-page/index.html
+++ b/recipes/creating-an-archive-page/index.html
@@ -1,8 +1,9 @@
 
 Creating an archive page
-
+
 
-
+
+
 
 
 
 
-
+
 
-
-
+
+
+
+
+
+
+
+    
     
-    
 
 
 
@@ -47,29 +44,21 @@
     

         
Creating an archive page

     

-    

+    

         
 
         
         
Created: 

-    
-        
-        
Updated: 

-    
+
         
+        
Updated: 

+
+       
     

     

 
     
     
-    
-    
-
 
     

     

@@ -151,6 +140,6 @@ This is the archives of the century.

 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/recipes/customizing-your-head/index.html b/recipes/customizing-your-head/index.html
index a7bcd89..844f91d 100644
--- a/recipes/customizing-your-head/index.html
+++ b/recipes/customizing-your-head/index.html
@@ -1,8 +1,9 @@
 
 Customizing your head
-
+
 
-
+
+
 
 
 
 
-
+
 
-
-
+
+
+
+
+
+
+
+    
     
-    
 
 
 
@@ -50,29 +48,21 @@
     

         
Customizing your head

     

-    

+    

         
 
         
         
Created: 

-    
-        
-        
Updated: 

-    
+
         
+        
Updated: 

+
+       
     

     

 
     
     
-    
-    
-
 
     

     

@@ -151,6 +141,6 @@ Though, you have to set it as the default Markdown parser.

 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/recipes/feed.atom b/recipes/feed.atom
index 3f66650..29ba66e 100644
--- a/recipes/feed.atom
+++ b/recipes/feed.atom
@@ -2,8 +2,8 @@
 
   Contentful
   
-    © 2021 
-  Hugo
+    © 2022 
+  Hugo
   2020-05-12T17:25:55+08:00
   https://foo-dogsquared.github.io/hugo-theme-contentful/https://foo-dogsquared.github.io/hugo-theme-contentful/icon.png
   
@@ -14,7 +14,7 @@
     Simple Icons integration with Hugo modules
     
     2020-10-20T21:36:34+08:00
-    2020-10-24T15:49:14+08:00<div class="paragraph">
+    2022-05-13T18:08:06+08:00<div class="paragraph">
 <p><a href="https://github.com/simple-icons/simple-icons">Simple Icons</a> is a free and open source icon set for popular brands including social media sites such as Twitter, YouTube, Twitch, GitHub, and so on.
 This is a perfect component for getting social media icons.</p>
 </div>
@@ -105,7 +105,7 @@ For now, we’ll use text as our fallback even though it’s not going to be pre
     Configurable list of contacts
     
     2020-10-20T20:38:24+08:00
-    2020-10-24T15:49:14+08:00<div class="paragraph">
+    2022-05-13T18:08:06+08:00<div class="paragraph">
 <p>Most themes offer quick social media links with site configuration.
 However, it is only limited to popular media sites such as Facebook, Twitter, Instagram, GitHub, etc.</p>
 </div>
diff --git a/recipes/feed.json b/recipes/feed.json
index d6cce32..53743e1 100644
--- a/recipes/feed.json
+++ b/recipes/feed.json
@@ -6,4 +6,4 @@
     "description": "Recent content on Contentful", 
     "authors":[{"name":"John Doe"}],
     "items":
-        [{"content_html":"\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003e\u003ca href=\"https://github.com/simple-icons/simple-icons\"\u003eSimple Icons\u003c/a\u003e is a free and open source icon set for popular brands including social media sites such as Twitter, YouTube, Twitch, GitHub, and so on.\nThis is a perfect component for getting social media icons.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eUsually to make use of this icon set in Hugo, you would have to download each icon you need.\nLuckily, there’s an easier way to make use of the set with \u003ca href=\"https://gohugo.io/hugo-modules/\"\u003eHugo modules\u003c/a\u003e.\nIn the future, Hugo will have an easier way to \u003ca href=\"https://discourse.gohugo.io/t/esbuild-looks-like-we-can-finally-get-solid-hugo-modules-support/28757\"\u003eintegrate\u003c/a\u003e \u003ca href=\"https://gohugo.io/commands/hugo_mod_npm/#readout\"\u003ewith JavaScript modules\u003c/a\u003e.\n\u003csup class=\"footnote\"\u003e[\u003ca id=\"_footnoteref_1\" class=\"footnote\" href=\"#_footnotedef_1\" title=\"View footnote.\"\u003e1\u003c/a\u003e]\u003c/sup\u003e\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eTo get started, simply initialize your Hugo site as a Hugo module with \u003ccode\u003ehugo mod init $HUGO_MOD_NAME\u003c/code\u003e where \u003ccode\u003e$HUGO_MOD_NAME\u003c/code\u003e is simply the name of the Hugo module which could be anything.\nFor example, if you host your Hugo site on GitHub pages, you might want to name your module like \u003ccode\u003egithub.com/$USER/$HUGO_SITE_REPO\u003c/code\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThen, add the Simple Icons repo as a dependency module in your site configuration.\nThe following configuration gets the icon set and the metadata and places them at \u003ccode\u003eassets/icons\u003c/code\u003e and \u003ccode\u003edata/simple-icons.json\u003c/code\u003e respectively.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e[[module.imports]]\n  path = \u0026#34;github.com/simple-icons/simple-icons\u0026#34;\n  [[module.imports.mounts]]\n    source = \u0026#34;icons\u0026#34;\n    target = \u0026#34;assets/icons\u0026#34;\n  [[module.imports.mounts]]\n    source = \u0026#34;_data/simple-icons.json\u0026#34;\n    target = \u0026#34;data/simple-icons.json\u0026#34;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eOnto the interesting point which is using the icons itself.\nSince the icon set is stored in the assets folder, we can then use it in our templates.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e{{ $github_icon := resources.Get \u0026#34;icons/github.svg\u0026#34; }}\n{{ $github_icon.Content | safeHTML }}\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAnd the SVG source will be applied inline to the resulting page.\nThis opens up a lot of uses with the icon set.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eLet’s reimplement the \u003ca href=\"../configurable-list-of-contacts.html\"\u003econfigurable list of contacts\u003c/a\u003e with added feature of adding an icon from the set with each key serves as the icon to be displayed.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u0026lt;address\u0026gt;\n{{- range (sort $.Site.Data.contacts \u0026#34;weight\u0026#34; \u0026#34;asc\u0026#34;) -}}\n\u0026lt;a rel=\u0026#34;me\u0026#34; href=\u0026#34;{{ .url }}\u0026#34; aria-contact=\u0026#34;{{ .name }}\u0026#34;\u0026gt;\n    {{ $location := printf \u0026#34;icons/%s.svg\u0026#34; .id }}\n    {{ with resources.Get $location }}{{ .Content | safeHTML }}{{ end }}\u0026lt;/a\u0026gt; |\n{{- end -}}\n\u0026lt;/address\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eUnfortunately, this doesn’t take account for missing icons so a fallback would be handy.\nFor now, we’ll use text as our fallback even though it’s not going to be pretty.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u0026lt;address\u0026gt;\n{{- range (sort $.Site.Data.contacts \u0026#34;weight\u0026#34; \u0026#34;asc\u0026#34;) -}}\n\u0026lt;a rel=\u0026#34;me\u0026#34; href=\u0026#34;{{ .url }}\u0026#34; aria-contact=\u0026#34;{{ .name }}\u0026#34;\u0026gt;\n    {{ $location := printf \u0026#34;icons/%s.svg\u0026#34; .id }}\n    {{ $icon := resources.Get $location }}\n    {{ if (countrunes $icon.Content) }}\n        {{ .Content | safeHTML }}\n    {{ else }}\n        {{ .name }}\n    {{ end }}\n\u0026lt;/a\u0026gt; |\n{{- end -}}\n\u0026lt;/address\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv id=\"footnotes\"\u003e\n\u003chr/\u003e\n\u003cdiv class=\"footnote\" id=\"_footnotedef_1\"\u003e\n\u003ca href=\"#_footnoteref_1\"\u003e1\u003c/a\u003e. Or integrating with NPM which \u003ca href=\"https://gohugo.io/news/0.75.0-relnotes/\"\u003eHugo\u003c/a\u003e certain has more support in the upcoming version.\n\u003c/div\u003e\n\u003c/div\u003e\n","date_modified":"2020-10-24T15:49:14+08:00","date_published":"2020-10-20T21:36:34+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/simple-icons-integration/","summary":"Simple Icons is a free and open source icon set for popular brands including social media sites such as Twitter, YouTube, Twitch, GitHub, and so on. This is a perfect component for getting social media icons.\n Usually to make use of this icon set in Hugo, you would have to download each icon you need. Luckily, there’s an easier way to make use of the set with Hugo modules. In the future, Hugo will have an easier way to integrate with JavaScript modules.","tags":["tag1","tag2"],"title":"Simple Icons integration with Hugo modules","url":"https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/simple-icons-integration/"},{"content_html":"\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eMost themes offer quick social media links with site configuration.\nHowever, it is only limited to popular media sites such as Facebook, Twitter, Instagram, GitHub, etc.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eTo get around this, we’ll make use of \u003ca href=\"https://gohugo.io/templates/data-templates/\"\u003edata templates\u003c/a\u003e.\nLet’s create a quick game plan how does it work.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThe data is a top-level dictionary/object with each key contains an object with the following fields.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"ulist\"\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eurl\u003c/code\u003e is the…​ contact link itself and it is required to have it.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003ename\u003c/code\u003e is the text to appear in the output.\nAlso required to have.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eweight\u003c/code\u003e is an integer similar to how Hugo sorts the pages with the lower weight having high precedence;\nif this key is absent, it will be interpreted as 0.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAnd here’s the data example in TOML which is placed in \u003ccode\u003edata/contact.toml\u003c/code\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e[github]\n    name = \u0026#34;GitHub\u0026#34;\n    url = \u0026#34;https://github.com/foo-dogsquared\u0026#34;\n\n[gitlab]\n    name = \u0026#34;Gitlab\u0026#34;\n    url = \u0026#34;https://gitlab.com/foo-dogsquared\u0026#34;\n\n[keybase]\n    name = \u0026#34;Keybase\u0026#34;\n    url = \u0026#34;https://keybase.io/foo_dogsquared\u0026#34;\n    weight = -1\n\n[twitter]\n    name = \u0026#34;Twitter\u0026#34;\n    url = \u0026#34;https://twitter.com/foo_dogsquared\u0026#34;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eI want my Keybase profile to appear first than anything else for whatever reason so the \u003ccode\u003eweight\u003c/code\u003e key is set to -1.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWith this data, we can then create a template out of it.\nI’ve put the following template in a partial named \u003ccode\u003econtacts\u003c/code\u003e (i.e., \u003ccode\u003elayouts/partials/contacts\u003c/code\u003e).\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u0026lt;address\u0026gt;\n{{- range (sort $.Site.Data.contacts \u0026#34;weight\u0026#34; \u0026#34;asc\u0026#34;) -}}\n| \u0026lt;a rel=\u0026#34;me\u0026#34; href=\u0026#34;{{ .url }}\u0026#34;\u0026gt;{{- .name -}}\u0026lt;/a\u0026gt; |\n{{- end -}}\n\u0026lt;/address\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eA suggestion (and an exercise) for extending this is to create image links.\nMaybe add another key named \u003ccode\u003eimage\u003c/code\u003e that accepts either URL.\nThe \u003ccode\u003ename\u003c/code\u003e would now be the image alternative text.\u003c/p\u003e\n\u003c/div\u003e\n","date_modified":"2020-10-24T15:49:14+08:00","date_published":"2020-10-20T20:38:24+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/configurable-list-of-contacts/","summary":"Most themes offer quick social media links with site configuration. However, it is only limited to popular media sites such as Facebook, Twitter, Instagram, GitHub, etc.\n To get around this, we’ll make use of data templates. Let’s create a quick game plan how does it work.\n The data is a top-level dictionary/object with each key contains an object with the following fields.\n   url is the…​ contact link itself and it is required to have it.","tags":null,"title":"Configurable list of contacts","url":"https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/configurable-list-of-contacts/"}]}
+        [{"content_html":"\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003e\u003ca href=\"https://github.com/simple-icons/simple-icons\"\u003eSimple Icons\u003c/a\u003e is a free and open source icon set for popular brands including social media sites such as Twitter, YouTube, Twitch, GitHub, and so on.\nThis is a perfect component for getting social media icons.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eUsually to make use of this icon set in Hugo, you would have to download each icon you need.\nLuckily, there’s an easier way to make use of the set with \u003ca href=\"https://gohugo.io/hugo-modules/\"\u003eHugo modules\u003c/a\u003e.\nIn the future, Hugo will have an easier way to \u003ca href=\"https://discourse.gohugo.io/t/esbuild-looks-like-we-can-finally-get-solid-hugo-modules-support/28757\"\u003eintegrate\u003c/a\u003e \u003ca href=\"https://gohugo.io/commands/hugo_mod_npm/#readout\"\u003ewith JavaScript modules\u003c/a\u003e.\n\u003csup class=\"footnote\"\u003e[\u003ca id=\"_footnoteref_1\" class=\"footnote\" href=\"#_footnotedef_1\" title=\"View footnote.\"\u003e1\u003c/a\u003e]\u003c/sup\u003e\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eTo get started, simply initialize your Hugo site as a Hugo module with \u003ccode\u003ehugo mod init $HUGO_MOD_NAME\u003c/code\u003e where \u003ccode\u003e$HUGO_MOD_NAME\u003c/code\u003e is simply the name of the Hugo module which could be anything.\nFor example, if you host your Hugo site on GitHub pages, you might want to name your module like \u003ccode\u003egithub.com/$USER/$HUGO_SITE_REPO\u003c/code\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThen, add the Simple Icons repo as a dependency module in your site configuration.\nThe following configuration gets the icon set and the metadata and places them at \u003ccode\u003eassets/icons\u003c/code\u003e and \u003ccode\u003edata/simple-icons.json\u003c/code\u003e respectively.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e[[module.imports]]\n  path = \u0026#34;github.com/simple-icons/simple-icons\u0026#34;\n  [[module.imports.mounts]]\n    source = \u0026#34;icons\u0026#34;\n    target = \u0026#34;assets/icons\u0026#34;\n  [[module.imports.mounts]]\n    source = \u0026#34;_data/simple-icons.json\u0026#34;\n    target = \u0026#34;data/simple-icons.json\u0026#34;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eOnto the interesting point which is using the icons itself.\nSince the icon set is stored in the assets folder, we can then use it in our templates.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e{{ $github_icon := resources.Get \u0026#34;icons/github.svg\u0026#34; }}\n{{ $github_icon.Content | safeHTML }}\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAnd the SVG source will be applied inline to the resulting page.\nThis opens up a lot of uses with the icon set.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eLet’s reimplement the \u003ca href=\"../configurable-list-of-contacts.html\"\u003econfigurable list of contacts\u003c/a\u003e with added feature of adding an icon from the set with each key serves as the icon to be displayed.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u0026lt;address\u0026gt;\n{{- range (sort $.Site.Data.contacts \u0026#34;weight\u0026#34; \u0026#34;asc\u0026#34;) -}}\n\u0026lt;a rel=\u0026#34;me\u0026#34; href=\u0026#34;{{ .url }}\u0026#34; aria-contact=\u0026#34;{{ .name }}\u0026#34;\u0026gt;\n    {{ $location := printf \u0026#34;icons/%s.svg\u0026#34; .id }}\n    {{ with resources.Get $location }}{{ .Content | safeHTML }}{{ end }}\u0026lt;/a\u0026gt; |\n{{- end -}}\n\u0026lt;/address\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eUnfortunately, this doesn’t take account for missing icons so a fallback would be handy.\nFor now, we’ll use text as our fallback even though it’s not going to be pretty.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u0026lt;address\u0026gt;\n{{- range (sort $.Site.Data.contacts \u0026#34;weight\u0026#34; \u0026#34;asc\u0026#34;) -}}\n\u0026lt;a rel=\u0026#34;me\u0026#34; href=\u0026#34;{{ .url }}\u0026#34; aria-contact=\u0026#34;{{ .name }}\u0026#34;\u0026gt;\n    {{ $location := printf \u0026#34;icons/%s.svg\u0026#34; .id }}\n    {{ $icon := resources.Get $location }}\n    {{ if (countrunes $icon.Content) }}\n        {{ .Content | safeHTML }}\n    {{ else }}\n        {{ .name }}\n    {{ end }}\n\u0026lt;/a\u0026gt; |\n{{- end -}}\n\u0026lt;/address\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv id=\"footnotes\"\u003e\n\u003chr/\u003e\n\u003cdiv class=\"footnote\" id=\"_footnotedef_1\"\u003e\n\u003ca href=\"#_footnoteref_1\"\u003e1\u003c/a\u003e. Or integrating with NPM which \u003ca href=\"https://gohugo.io/news/0.75.0-relnotes/\"\u003eHugo\u003c/a\u003e certain has more support in the upcoming version.\n\u003c/div\u003e\n\u003c/div\u003e\n","date_modified":"2022-05-13T18:08:06+08:00","date_published":"2020-10-20T21:36:34+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/simple-icons-integration/","summary":"Simple Icons is a free and open source icon set for popular brands including social media sites such as Twitter, YouTube, Twitch, GitHub, and so on. This is a perfect component for getting social media icons.\n Usually to make use of this icon set in Hugo, you would have to download each icon you need. Luckily, there’s an easier way to make use of the set with Hugo modules. In the future, Hugo will have an easier way to integrate with JavaScript modules.","tags":["tag1","tag2"],"title":"Simple Icons integration with Hugo modules","url":"https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/simple-icons-integration/"},{"content_html":"\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eMost themes offer quick social media links with site configuration.\nHowever, it is only limited to popular media sites such as Facebook, Twitter, Instagram, GitHub, etc.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eTo get around this, we’ll make use of \u003ca href=\"https://gohugo.io/templates/data-templates/\"\u003edata templates\u003c/a\u003e.\nLet’s create a quick game plan how does it work.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThe data is a top-level dictionary/object with each key contains an object with the following fields.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"ulist\"\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eurl\u003c/code\u003e is the…​ contact link itself and it is required to have it.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003ename\u003c/code\u003e is the text to appear in the output.\nAlso required to have.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eweight\u003c/code\u003e is an integer similar to how Hugo sorts the pages with the lower weight having high precedence;\nif this key is absent, it will be interpreted as 0.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAnd here’s the data example in TOML which is placed in \u003ccode\u003edata/contact.toml\u003c/code\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e[github]\n    name = \u0026#34;GitHub\u0026#34;\n    url = \u0026#34;https://github.com/foo-dogsquared\u0026#34;\n\n[gitlab]\n    name = \u0026#34;Gitlab\u0026#34;\n    url = \u0026#34;https://gitlab.com/foo-dogsquared\u0026#34;\n\n[keybase]\n    name = \u0026#34;Keybase\u0026#34;\n    url = \u0026#34;https://keybase.io/foo_dogsquared\u0026#34;\n    weight = -1\n\n[twitter]\n    name = \u0026#34;Twitter\u0026#34;\n    url = \u0026#34;https://twitter.com/foo_dogsquared\u0026#34;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eI want my Keybase profile to appear first than anything else for whatever reason so the \u003ccode\u003eweight\u003c/code\u003e key is set to -1.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWith this data, we can then create a template out of it.\nI’ve put the following template in a partial named \u003ccode\u003econtacts\u003c/code\u003e (i.e., \u003ccode\u003elayouts/partials/contacts\u003c/code\u003e).\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u0026lt;address\u0026gt;\n{{- range (sort $.Site.Data.contacts \u0026#34;weight\u0026#34; \u0026#34;asc\u0026#34;) -}}\n| \u0026lt;a rel=\u0026#34;me\u0026#34; href=\u0026#34;{{ .url }}\u0026#34;\u0026gt;{{- .name -}}\u0026lt;/a\u0026gt; |\n{{- end -}}\n\u0026lt;/address\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eA suggestion (and an exercise) for extending this is to create image links.\nMaybe add another key named \u003ccode\u003eimage\u003c/code\u003e that accepts either URL.\nThe \u003ccode\u003ename\u003c/code\u003e would now be the image alternative text.\u003c/p\u003e\n\u003c/div\u003e\n","date_modified":"2022-05-13T18:08:06+08:00","date_published":"2020-10-20T20:38:24+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/configurable-list-of-contacts/","summary":"Most themes offer quick social media links with site configuration. However, it is only limited to popular media sites such as Facebook, Twitter, Instagram, GitHub, etc.\n To get around this, we’ll make use of data templates. Let’s create a quick game plan how does it work.\n The data is a top-level dictionary/object with each key contains an object with the following fields.\n   url is the…​ contact link itself and it is required to have it.","tags":null,"title":"Configurable list of contacts","url":"https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/configurable-list-of-contacts/"}]}
diff --git a/recipes/feed.rss b/recipes/feed.rss
index 77bf191..b3a58bd 100644
--- a/recipes/feed.rss
+++ b/recipes/feed.rss
@@ -4,7 +4,7 @@
     Contentful
     https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/
     Recent content on Contentful
-    Hugo v0.76.0 -- gohugo.ioen-us© 2021 to the author(s) behind Contentful
+    Hugo v0.98.0 -- gohugo.ioen-us© 2022 to the author(s) behind Contentful
         Tue, 12 May 2020 17:25:55 +0800
     https://www.rssboard.org/rss-2-0-1
         
diff --git a/recipes/index.html b/recipes/index.html
index bc8e669..ba7fd1b 100644
--- a/recipes/index.html
+++ b/recipes/index.html
@@ -1,8 +1,9 @@
 
 
-
+
 
-
+
+
 
 
 
 
 
-
-
+
+
+
+    
     
-    
 
 
 

@@ -52,48 +44,60 @@ Though this only applies specifically to Contentful and may need some tweaking w
 
 
 
 
 
 
 
 
 

     
Twitter cards

     

-        
-        (Modified on )
+        
+        
     

 

 
 
 
@@ -122,6 +126,6 @@ Though this only applies specifically to Contentful and may need some tweaking w
 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/recipes/open-graph-protocol/index.html b/recipes/open-graph-protocol/index.html
index 6543282..888ca90 100644
--- a/recipes/open-graph-protocol/index.html
+++ b/recipes/open-graph-protocol/index.html
@@ -1,8 +1,9 @@
 
 Open graph protocol
-
+
 
-
+
+
 
 
 
 
-
+
 
-
-
+
+
+
+
+
+
+
+    
     
-    
 
 
 
@@ -47,29 +44,21 @@
     

         
Open graph protocol

     

-    

+    

         
 
         
         
Created: 

-    
-        
-        
Updated: 

-    
+
         
+        
Updated: 

+
+       
     

     

 
     
     
-    
-    
-
 
     

     

@@ -109,6 +98,6 @@ Simply add  {{- template "_internal/opengraph.html" . -}} s
 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/recipes/page/1/index.html b/recipes/page/1/index.html
index 2158dee..0cf1dd8 100644
--- a/recipes/page/1/index.html
+++ b/recipes/page/1/index.html
@@ -1 +1,10 @@
-https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/
\ No newline at end of file
+
+
+  
+    https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/
+    
+    
+    
+    
+  
+
diff --git a/recipes/simple-icons-integration/index.html b/recipes/simple-icons-integration/index.html
index a271525..5958d8d 100644
--- a/recipes/simple-icons-integration/index.html
+++ b/recipes/simple-icons-integration/index.html
@@ -1,8 +1,9 @@
 
 Simple Icons integration with Hugo modules
-
+
 
-
+
+
 
 
 
 
-
+
 
-
-
+
+
+
+
+
+
+
+    
     
-    
 
 
 
@@ -47,29 +44,21 @@
     

         
Simple Icons integration with Hugo modules

     

-    

+    

         
 
         
         
Created: 

-    
-        
-        
Updated: 

-    
+
         
+        
Updated: 

+
+       
     

     

 
     
     
-    
-    
-
 
     

     

@@ -181,6 +170,6 @@ For now, we’ll use text as our fallback even though it’s not going to be pre
 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/recipes/twitter-cards/index.html b/recipes/twitter-cards/index.html
index 5142bc9..f377acb 100644
--- a/recipes/twitter-cards/index.html
+++ b/recipes/twitter-cards/index.html
@@ -1,8 +1,9 @@
 
 Twitter cards
-
+
 
-
+
+
 
 
 
 
-
+
 
-
-
+
+
+
+
+
+
+
+    
     
-    
 
 
 
@@ -50,29 +48,21 @@
     

         
Twitter cards

     

-    

+    

         
 
         
         
Created: 

-    
-        
-        
Updated: 

-    
+
         
+        
Updated: 

+
+       
     

     

 
     
     
-    
-    
-
 
     

     

@@ -112,6 +102,6 @@ Simply add  {{- template "_internal/twitter_cards.html" . -}}© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/sitemap.xml b/sitemap.xml
index 42e4cd8..966f81a 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -4,14 +4,14 @@
   
     https://foo-dogsquared.github.io/hugo-theme-contentful/en/sitemap.xml
     
-      2020-10-24T16:00:52+08:00
+      2022-05-13T18:08:06+08:00
     
   
   
   
     https://foo-dogsquared.github.io/hugo-theme-contentful/tl/sitemap.xml
     
-      2020-05-12T16:40:21+08:00
+      2022-05-13T18:08:06+08:00
     
   
   
diff --git a/tags/asciidoctor/feed.rss b/tags/asciidoctor/feed.rss
index 1ad4ba1..59db949 100644
--- a/tags/asciidoctor/feed.rss
+++ b/tags/asciidoctor/feed.rss
@@ -4,7 +4,7 @@
     asciidoctor on Contentful
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/asciidoctor/
     Recent content in asciidoctor on Contentful
-    Hugo v0.76.0 -- gohugo.ioen-us© 2021 to the author(s) behind Contentful
+    Hugo v0.98.0 -- gohugo.ioen-us© 2022 to the author(s) behind Contentful
         Thu, 29 Aug 2019 22:09:16 +0800
     https://www.rssboard.org/rss-2-0-1
         
diff --git a/tags/asciidoctor/index.html b/tags/asciidoctor/index.html
index 960c173..d121739 100644
--- a/tags/asciidoctor/index.html
+++ b/tags/asciidoctor/index.html
@@ -1,8 +1,9 @@
 
 asciidoctor
-
+
 
-
+
+
 
 
 
@@ -12,15 +13,11 @@
 
 
 
-
-
+
+
+
+    
     
-    
 
 
 

@@ -46,32 +38,40 @@
 
 
 
 
 
 
 
 
@@ -100,6 +100,6 @@
 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/tags/asciidoctor/page/1/index.html b/tags/asciidoctor/page/1/index.html
index c5510be..08ea6be 100644
--- a/tags/asciidoctor/page/1/index.html
+++ b/tags/asciidoctor/page/1/index.html
@@ -1 +1,10 @@
-https://foo-dogsquared.github.io/hugo-theme-contentful/tags/asciidoctor/
\ No newline at end of file
+
+
+  
+    https://foo-dogsquared.github.io/hugo-theme-contentful/tags/asciidoctor/
+    
+    
+    
+    
+  
+
diff --git a/tags/emoji/feed.rss b/tags/emoji/feed.rss
index b2e8fa4..96d37eb 100644
--- a/tags/emoji/feed.rss
+++ b/tags/emoji/feed.rss
@@ -4,7 +4,7 @@
     emoji on Contentful
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/emoji/
     Recent content in emoji on Contentful
-    Hugo v0.76.0 -- gohugo.ioen-us© 2021 to the author(s) behind Contentful
+    Hugo v0.98.0 -- gohugo.ioen-us© 2022 to the author(s) behind Contentful
         Wed, 28 Aug 2019 12:11:22 +0800
     https://www.rssboard.org/rss-2-0-1
         
diff --git a/tags/emoji/index.html b/tags/emoji/index.html
index a4e6351..b7e7e87 100644
--- a/tags/emoji/index.html
+++ b/tags/emoji/index.html
@@ -1,8 +1,9 @@
 
 emoji
-
+
 
-
+
+
 
 
 
@@ -12,15 +13,11 @@
 
 
 
-
-
+
+
+
+    
     
-    
 
 
 

@@ -46,8 +38,10 @@
 

     
Emoji Support

     

-        
-        (Modified on )
+        
+        
     

 

 
@@ -76,6 +70,6 @@
 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/tags/emoji/page/1/index.html b/tags/emoji/page/1/index.html
index b272b14..e1101f6 100644
--- a/tags/emoji/page/1/index.html
+++ b/tags/emoji/page/1/index.html
@@ -1 +1,10 @@
-https://foo-dogsquared.github.io/hugo-theme-contentful/tags/emoji/
\ No newline at end of file
+
+
+  
+    https://foo-dogsquared.github.io/hugo-theme-contentful/tags/emoji/
+    
+    
+    
+    
+  
+
diff --git a/tags/extending/feed.rss b/tags/extending/feed.rss
index b59a556..1ba3633 100644
--- a/tags/extending/feed.rss
+++ b/tags/extending/feed.rss
@@ -4,7 +4,7 @@
     extending on Contentful
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/extending/
     Recent content in extending on Contentful
-    Hugo v0.76.0 -- gohugo.ioen-us© 2021 to the author(s) behind Contentful
+    Hugo v0.98.0 -- gohugo.ioen-us© 2022 to the author(s) behind Contentful
         Tue, 12 May 2020 17:25:55 +0800
     https://www.rssboard.org/rss-2-0-1
         
@@ -19,5 +19,15 @@
       https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/
       
     
+    
+      Extending Contentful
+      https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/
+      theme
+      extending
+
+      Tue, 12 May 2020 17:25:55 +0800
+      https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/
+      
+    
   
 
diff --git a/tags/extending/index.html b/tags/extending/index.html
index 6223117..ae40858 100644
--- a/tags/extending/index.html
+++ b/tags/extending/index.html
@@ -1,8 +1,9 @@
 
 extending
-
+
 
-
+
+
 
 
 
@@ -12,15 +13,11 @@
 
 
 
-
-
+
+
+
+    
     
-    
 
 
 

@@ -46,8 +38,20 @@
 

     

     

-        
-        (Modified on )
+        
+        
+    

+

+
+
 
@@ -76,6 +80,6 @@
 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/tags/extending/page/1/index.html b/tags/extending/page/1/index.html
index 1f774a1..4d9d893 100644
--- a/tags/extending/page/1/index.html
+++ b/tags/extending/page/1/index.html
@@ -1 +1,10 @@
-https://foo-dogsquared.github.io/hugo-theme-contentful/tags/extending/
\ No newline at end of file
+
+
+  
+    https://foo-dogsquared.github.io/hugo-theme-contentful/tags/extending/
+    
+    
+    
+    
+  
+
diff --git a/tags/feed.rss b/tags/feed.rss
index dc27b2c..c92b0b9 100644
--- a/tags/feed.rss
+++ b/tags/feed.rss
@@ -4,7 +4,7 @@
     Tags on Contentful
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/
     Recent content in Tags on Contentful
-    Hugo v0.76.0 -- gohugo.ioen-us© 2021 to the author(s) behind Contentful
+    Hugo v0.98.0 -- gohugo.ioen-us© 2022 to the author(s) behind Contentful
         Tue, 20 Oct 2020 21:36:34 +0800
     https://www.rssboard.org/rss-2-0-1
         
diff --git a/tags/guide/feed.rss b/tags/guide/feed.rss
index b538e1e..0c3eb32 100644
--- a/tags/guide/feed.rss
+++ b/tags/guide/feed.rss
@@ -4,7 +4,7 @@
     guide on Contentful
     https://foo-dogsquared.github.io/hugo-theme-contentful/tags/guide/
     Recent content in guide on Contentful
-    Hugo v0.76.0 -- gohugo.ioen-us© 2021 to the author(s) behind Contentful
+    Hugo v0.98.0 -- gohugo.ioen-us© 2022 to the author(s) behind Contentful
         Thu, 29 Aug 2019 22:09:16 +0800
     https://www.rssboard.org/rss-2-0-1
         
diff --git a/tags/guide/index.html b/tags/guide/index.html
index b8a9694..23d24dd 100644
--- a/tags/guide/index.html
+++ b/tags/guide/index.html
@@ -1,8 +1,9 @@
 
 guide
-
+
 
-
+
+
 
 
 
@@ -12,15 +13,11 @@
 
 
 
-
-
+
+
+
+    
     
-    
 
 
 

@@ -46,56 +38,70 @@
 
 
 

     
Emoji Support

     

-        
-        (Modified on )
+        
+        
     

 

 
 
 
 
 
 
 
 
 
 
 
@@ -124,6 +130,6 @@
 
 
 
-
© 2021 Contentful

+
© 2022 Contentful

 
 
diff --git a/tags/guide/page/1/index.html b/tags/guide/page/1/index.html
index 367616d..b501ea0 100644
--- a/tags/guide/page/1/index.html
+++ b/tags/guide/page/1/index.html
@@ -1 +1,10 @@
-https://foo-dogsquared.github.io/hugo-theme-contentful/tags/guide/
\ No newline at end of file
+
+
+  
+    https://foo-dogsquared.github.io/hugo-theme-contentful/tags/guide/
+    
+    
+    
+    
+  
+
diff --git a/tags/index.html b/tags/index.html
index 0329709..2e0c219 100644
--- a/tags/index.html
+++ b/tags/index.html
@@ -1,8 +1,9 @@
 
 Tags
-
+
 
-
+
+
 
 
 
@@ -12,15 +13,11 @@
 
 
 
-
-
+
+
+
+    
     
-    
 
 
 
 
 
Tags

-
-
+  

+    

+      
asciidoctor

+      (Permalink)
+    

+    
+  

+  

+    

+      
emoji

+      (Permalink)
+    

+    
+  

+  

+    

+      
extending

+      (Permalink)
+    

+    
+  

+  

+    

+      
guide

+      (Permalink)
+    

+    
+  

+  

+    

+      
markdown

+      (Permalink)
+    

+    
+  

+  

+    

+      
mathjax

+      (Permalink)
+    

+    
+  

+  

+    

+      
seo

+      (Permalink)
+    

+    
+  

+  

+    

+      
social media

+      (Permalink)
+    

+    
+  

+  

+    

+      
tag1

+      (Permalink)
+    

+    
+  

+  

+    

+      
tag2

+      (Permalink)
+    

+    
+  

+  

+    

+      
theme

+      (Permalink)
+    

+    
+  

+  

+    

+      
this is a test tag

+      (Permalink)
+    

+    
+  

+  

+    

+      
twitter

+      (Permalink)
+    

+    
+