hugo-theme-more-contentful/recipes/configurable-list-of-contacts/index.html

410 lines
14 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en-us">
<head><title>Configurable list of contacts | More Contentful</title>
<link rel="stylesheet" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/css/main.min.f1121c040b0aa510fb90a5e6ff2389d0944483dd2515d61c36d0b599f873b72b.css" />
<link rel="shortcut icon" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/favicon.png" /><meta name="generator" content="Hugo 0.96.0" />
<meta charset="utf-8">
<meta name="author" content="John Doe" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="referrer" content="no-referrer" />
<meta name="description" content="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, well make use of data templates. Lets 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." /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Configurable list of contacts"/>
<meta name="twitter:description" content="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, well make use of data templates. Lets 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."/>
<meta property="og:title" content="Configurable list of contacts" />
<meta property="og:description" content="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, well make use of data templates. Lets 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." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/configurable-list-of-contacts/" /><meta property="article:section" content="recipes" />
<meta property="article:published_time" content="2020-10-20T20:38:24+08:00" />
<meta property="article:modified_time" content="2023-02-27T13:27:15+08:00" />
<meta itemprop="name" content="Configurable list of contacts">
<meta itemprop="description" content="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, well make use of data templates. Lets 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."><meta itemprop="datePublished" content="2020-10-20T20:38:24+08:00" />
<meta itemprop="dateModified" content="2023-02-27T13:27:15+08:00" />
<meta itemprop="wordCount" content="259">
<meta itemprop="keywords" content="" /><link rel="canonical" type="text/html" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/configurable-list-of-contacts/" />
<script>
let theme = window.localStorage.getItem('theme');
if (theme) {
document.documentElement.dataset.theme = theme;
}
</script>
</head>
<body><header aria-label="Site header">
<nav>
<a class="site__title" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful">More Contentful</a>
<div class="list site__links">
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/about/">About</a>
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/categories/">Categories</a>
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/">Recipes</a>
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/tags/">Tags</a>
</div>
</nav>
<div class="site__theme-btn" aria-label="Theme toggle" aria-hidden="true">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/swatch.svg#swatch"></use>
</svg>
<div class="site__theme-dropdown">
<div class="site__theme-dropdown-list">
<div class="site__theme-item"
data-theme="Default Dark"
data-theme-dark
>Dark</div>
<div class="site__theme-item"
data-theme="Default Light"
data-theme-light
>Light</div>
<div class="site__theme-item"
data-theme="Dracula"
>Dracula</div>
<div class="site__theme-item"
data-theme="Gruvbox dark, hard"
>Gruvbox dark, hard</div>
<div class="site__theme-item"
data-theme="Gruvbox light, hard"
>Gruvbox light, hard</div>
<div class="site__theme-item"
data-theme="Nord"
>Nord</div>
<div class="site__theme-item"
data-theme="Solarized Dark"
>Solarized Dark</div>
<div class="site__theme-item"
data-theme="Solarized Light"
>Solarized Light</div>
<div class="site__theme-item" data-theme-system>
OS default
</div>
</div>
</div>
</div>
<script>
function styleTheme() {
const selectedTheme = window.localStorage.getItem("theme");
for (const el of document.querySelectorAll(".site__theme-item")) {
if (el.dataset.theme == selectedTheme) {
el.classList.add("site__theme-item--selected");
} else {
el.classList.remove("site__theme-item--selected");
}
}
}
const themeDropdown = document.querySelector('.site__theme-btn');
themeDropdown.addEventListener('click', (event) => {
const { target } = event;
if (target.classList.contains("site__theme-item")) {
if (target.dataset.theme) {
theme = target.dataset.theme;
window.localStorage.setItem("theme", theme);
document.documentElement.dataset.theme = theme;
} else {
window.localStorage.removeItem("theme");
delete document.documentElement.dataset.theme;
}
}
styleTheme();
});
styleTheme();
</script>
</header>
<hr aria-hidden="true"/>
<div class="post--single">
<main>
<article>
<header>
<h1>Configurable list of contacts</h1>
<div class="list post__meta" aria-hidden="true"><span>
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/calendar.svg#calendar"></use>
</svg>
<time datetime="2020-10-20T20:38:24&#43;08:00" title="Created" style="margin-left: 0.5em;">
2020-10-20
</time>
</span>
<span>
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/arrow-path.svg#arrow-path"></use>
</svg>
<time datetime="2023-02-27T13:27:15&#43;08:00" title="Updated" style="margin-left: 0.5em;">
2023-02-27
</time>
</span>
</div>
</header>
<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, well make use of <a href="https://gohugo.io/templates/data-templates/">data templates</a>.
Lets 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 heres 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.
Ive 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.contacts &#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>
</article>
</main>
<hr aria-hidden="true"/>
<div class="post__meta--single" aria-hidden="true">
<p data-content-publication-date="2020-10-20T20:38:24&#43;08:00">Created: <time datetime="2020-10-20T20:38:24&#43;08:00">2020-10-20</time></p>
<p data-content-modification-date="2023-02-27T13:27:15&#43;08:00">Updated: <time datetime="2023-02-27T13:27:15&#43;08:00">2023-02-27</time></p>
</div>
</div>
<hr aria-hidden="true"/><footer aria-label="Site footer">
<a href="#top">Back to top</a>
<p>Available in other languages:
<span class="list site__languages">
<a href="/hugo-theme-more-contentful/en" hreflang="en">English</a>
<a href="/hugo-theme-more-contentful/tl" hreflang="tl">Tagalog</a>
</span>
</p>
<ul class="list site__socials">
<li>
<a class="site__social-icon" rel="me" href="https://example.org/gmail" aria-label="E-mail">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/gmail.svg#gmail"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/keybase" aria-label="Keybase">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/keybase.svg#keybase"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/devdotto" aria-label="Dev.to">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/devdotto.svg#devdotto"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/github/" aria-label="GitHub">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/github.svg#github"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/gitlab" aria-label="GitLab">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/gitlab.svg#gitlab"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/lichess" aria-label="Lichess">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/lichess.svg#lichess"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/picartodottv" aria-label="Picarto.tv">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/picartodottv.svg#picartodottv"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/pixiv" aria-label="Pixiv">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/pixiv.svg#pixiv"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/twitch" aria-label="Twitch">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitch.svg#twitch"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/twitter" aria-label="Twitter">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitter.svg#twitter"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/youtube" aria-label="YouTube">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/youtube.svg#youtube"></use>
</svg>
</a>
</li></ul>
<p>© 2023 More Contentful</p>
</footer>
</body>
</html>