hugo-theme-more-contentful/recipes/feed.atom

<?xml version="1.0" encoding="utf-8" ?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Recipes on More Contentful</title>
  
    <link rel="self" type="application/atom+xml" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/feed.atom"/><link rel="canonical" type="text/html" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/"/><link rel="alternate" type="application/feed+json" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/feed.json"/><link rel="alternate" type="application/rss+xml" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/feed.rss"/><rights>© 2024 </rights>
  <generator uri="https://gohugo.io/" version="0.138.0">Hugo</generator>
  <updated>2020-05-12T17:25:55+08:00</updated>
  <id>https://foo-dogsquared.github.io/hugo-theme-more-contentful/</id><icon>https://foo-dogsquared.github.io/hugo-theme-more-contentful/icon.png</icon><entry>
    <id>https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/configurable-list-of-contacts/</id>
    <title type="text">Configurable list of contacts</title>
    <link rel="alternate" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/configurable-list-of-contacts/" hreflang="en" title="Configurable list of contacts"/>
    <published>2020-10-20T20:38:24+08:00</published>
    <updated>2020-10-20T20:38:24+08:00</updated><content type="html">&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;To get around this, we’ll make use of &lt;a href=&#34;https://gohugo.io/templates/data-templates/&#34;&gt;data templates&lt;/a&gt;.
Let’s create a quick game plan how does it work.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;The data is a top-level dictionary/object with each key contains an object with the following fields.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;ulist&#34;&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;url&lt;/code&gt; is the…​ contact link itself and it is required to have it.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;name&lt;/code&gt; is the text to appear in the output.
Also required to have.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;weight&lt;/code&gt; 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.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;And here’s the data example in TOML which is placed in &lt;code&gt;data/contact.toml&lt;/code&gt;.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;listingblock&#34;&gt;
&lt;div class=&#34;content&#34;&gt;
&lt;pre class=&#34;highlight&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;[github]
    name = &amp;#34;GitHub&amp;#34;
    url = &amp;#34;https://github.com/foo-dogsquared&amp;#34;

[gitlab]
    name = &amp;#34;Gitlab&amp;#34;
    url = &amp;#34;https://gitlab.com/foo-dogsquared&amp;#34;

[keybase]
    name = &amp;#34;Keybase&amp;#34;
    url = &amp;#34;https://keybase.io/foo_dogsquared&amp;#34;
    weight = -1

[twitter]
    name = &amp;#34;Twitter&amp;#34;
    url = &amp;#34;https://twitter.com/foo_dogsquared&amp;#34;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;I want my Keybase profile to appear first than anything else for whatever reason so the &lt;code&gt;weight&lt;/code&gt; key is set to -1.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;With this data, we can then create a template out of it.
I’ve put the following template in a partial named &lt;code&gt;contacts&lt;/code&gt; (i.e., &lt;code&gt;layouts/partials/contacts&lt;/code&gt;).&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;listingblock&#34;&gt;
&lt;div class=&#34;content&#34;&gt;
&lt;pre class=&#34;highlight&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&amp;lt;address&amp;gt;
{{- range (sort $.Site.Data.contacts &amp;#34;weight&amp;#34; &amp;#34;asc&amp;#34;) -}}
| &amp;lt;a rel=&amp;#34;me&amp;#34; href=&amp;#34;{{ .url }}&amp;#34;&amp;gt;{{- .name -}}&amp;lt;/a&amp;gt; |
{{- end -}}
&amp;lt;/address&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;A suggestion (and an exercise) for extending this is to create image links.
Maybe add another key named &lt;code&gt;image&lt;/code&gt; that accepts either URL.
The &lt;code&gt;name&lt;/code&gt; would now be the image alternative text.&lt;/p&gt;
&lt;/div&gt;
</content>
  </entry><entry>
    <id>https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/creating-an-archive-page/</id>
    <title type="text">Creating an archive page</title>
    <link rel="alternate" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/creating-an-archive-page/" hreflang="en" title="Creating an archive page"/>
    <published>2020-10-20T20:36:55+08:00</published>
    <updated>2020-10-20T20:36:55+08:00</updated><content type="html">&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;This will add an archive page similar to archive pages &lt;a href=&#34;https://davidtranscend.com/archives/&#34;&gt;like&lt;/a&gt; &lt;a href=&#34;https://lukesmith.xyz/blogindex.html&#34;&gt;these&lt;/a&gt;.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;listingblock&#34;&gt;
&lt;div class=&#34;content&#34;&gt;
&lt;pre class=&#34;highlight&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;{{- define &amp;#34;main&amp;#34; -}}

&amp;lt;h1&amp;gt;{{ .Title }}&amp;lt;/h1&amp;gt;

{{ .Content }}

&amp;lt;hr&amp;gt;

{{- /* Creating a section that lists out regular pages by year */ -}}
{{ range $.Site.RegularPages.GroupByPublishDate &amp;#34;2006&amp;#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 &amp;#34;0001&amp;#34; }}
        &amp;lt;section data-year=&amp;#34;{{ .Key }}&amp;#34;&amp;gt;
            &amp;lt;h2 id=&amp;#34;{{ .Key }}&amp;#34;&amp;gt;{{ .Key }}&amp;lt;/h2&amp;gt;
            &amp;lt;ul&amp;gt;
            {{- range where .Pages &amp;#34;Params.hidden&amp;#34; &amp;#34;!=&amp;#34; true -}}
                &amp;lt;li&amp;gt;
                    &amp;lt;date&amp;gt;{{ .Date.Format &amp;#34;2006-01-02&amp;#34; }}&amp;lt;/date&amp;gt; -
                    &amp;lt;a aria-label=&amp;#34;{{ .Title }}&amp;#34; href=&amp;#34;{{ .Permalink }}&amp;#34;&amp;gt;{{ .Title }}&amp;lt;/a&amp;gt;
                &amp;lt;/li&amp;gt;
            {{- end -}}
            &amp;lt;/ul&amp;gt;
        &amp;lt;/section&amp;gt;
    {{- end }}
{{ end }}

{{- end -}}&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;We will simply add this as a layout in our customized theme.
Let’s call it &lt;code&gt;archives&lt;/code&gt; so we have to add a file in &lt;code&gt;layouts/_default/archives.html&lt;/code&gt; then set a page of our project with the &lt;code&gt;layout&lt;/code&gt; key in the frontmatter.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;We want the archives page to be accessed at &lt;code&gt;$.Site.BaseURL/archives&lt;/code&gt; so we’ll simply create &lt;code&gt;archives.adoc&lt;/code&gt; (&lt;a href=&#34;https://gohugo.io/content-management/formats/#list-of-content-formats&#34;&gt;any valid content files with certain file extensions can do&lt;/a&gt;, I’m using &lt;a href=&#34;https://asciidoctor.org/&#34;&gt;Asciidoctor&lt;/a&gt;) with the following example content.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;listingblock&#34;&gt;
&lt;div class=&#34;content&#34;&gt;
&lt;pre class=&#34;highlight&#34;&gt;&lt;code class=&#34;language-asciidoctor&#34; data-lang=&#34;asciidoctor&#34;&gt;---
title: &amp;#34;Archives&amp;#34;
layout: &amp;#34;archive&amp;#34;
---

= Archives

This is the archives of the century.&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;/div&gt;
</content>
  </entry></feed>