2021-07-07 07:53:40 +00:00
<!DOCTYPE html>
2022-11-28 03:05:34 +00:00
< html lang = "en-us" >
< head > < title > Configurable list of contacts | More Contentful< / title >
2021-07-07 07:53:40 +00:00
2023-10-28 09:41:40 +00:00
< link rel = "stylesheet" href = "/hugo-theme-more-contentful/css/main.min.f918d3cd493489e84ce3292da6ca269d636130e432857876b773aa1d6560ae5d.css" / > < script >
2024-05-18 10:53:14 +00:00
let theme = window.localStorage.getItem('theme');
2023-03-06 15:28:18 +00:00
if (theme) {
document.documentElement.dataset.theme = theme;
}
< / script >
2022-11-12 05:42:16 +00:00
2024-05-18 10:53:14 +00:00
< link rel = "shortcut icon" href = "/hugo-theme-more-contentful/%20favicon.png" / >
2024-10-28 07:21:39 +00:00
< meta name = "generator" content = "Hugo 0.135.0" >
2021-07-07 07:53:40 +00:00
< 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" / >
2024-10-28 07:21:39 +00:00
< 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, we’
Let’
2023-04-03 03:44:04 +00:00
The data is a top-level dictionary/object with each key contains an object with the following fields.
2024-10-28 07:21:39 +00:00
url is the…
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.
" />
2024-05-18 10:53:14 +00:00
< meta name = "twitter:card" content = "summary" >
< meta name = "twitter:title" content = "Configurable list of contacts" >
2024-10-28 07:21:39 +00:00
< 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 .
2023-04-03 03:44:04 +00:00
To get around this, we’ ’
The data is a top-level dictionary/object with each key contains an object with the following fields.
2024-10-28 07:21:39 +00:00
url is the…
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.">
2024-05-18 10:53:14 +00:00
< meta property = "og:url" content = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/configurable-list-of-contacts/" >
< meta property = "og:site_name" content = "More Contentful" >
< meta property = "og:title" content = "Configurable list of contacts" >
2024-10-28 07:21:39 +00:00
< 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 .
2023-04-03 03:44:04 +00:00
To get around this, we’ ’
The data is a top-level dictionary/object with each key contains an object with the following fields.
2024-10-28 07:21:39 +00:00
url is the…
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.">
2024-05-18 10:53:14 +00:00
< meta property = "og:locale" content = "en_us" >
< meta property = "og:type" content = "article" >
< 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 = "2020-10-20T20:38:24+08:00" >
< meta itemprop = "name" content = "Configurable list of contacts" >
2024-10-28 07:21:39 +00:00
< 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 .
2023-04-03 03:44:04 +00:00
To get around this, we’ ’
The data is a top-level dictionary/object with each key contains an object with the following fields.
2024-10-28 07:21:39 +00:00
url is the…
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.">
2024-05-18 10:53:14 +00:00
< meta itemprop = "datePublished" content = "2020-10-20T20:38:24+08:00" >
< meta itemprop = "dateModified" content = "2020-10-20T20:38:24+08:00" >
< meta itemprop = "wordCount" content = "259" >
< meta itemprop = "keywords" content = "Recipe" > < link rel = "canonical" type = "text/html" href = "/hugo-theme-more-contentful/recipes/configurable-list-of-contacts/" / >
2021-07-07 07:53:40 +00:00
2022-11-28 03:05:34 +00:00
< / head >
2023-02-24 13:35:28 +00:00
< body > < header aria-label = "Site header" >
2023-03-16 15:58:42 +00:00
< nav class = "site__nav-header" >
2024-05-18 10:53:14 +00:00
< a class = "site__title" href = "/hugo-theme-more-contentful/" > More Contentful< / a >
2023-04-03 03:44:04 +00:00
< ul class = "site__list" >
2023-02-24 12:26:30 +00:00
2023-03-16 15:58:42 +00:00
< li >
2023-04-27 16:59:34 +00:00
< a href = "/hugo-theme-more-contentful/about/" > About< / a >
2023-03-16 15:58:42 +00:00
< / li >
< li >
2023-04-27 16:59:34 +00:00
< a href = "/hugo-theme-more-contentful/categories/" > Categories< / a >
2023-03-16 15:58:42 +00:00
< / li >
< li >
2023-04-27 16:59:34 +00:00
< a href = "/hugo-theme-more-contentful/recipes/" > Recipes< / a >
2023-03-16 15:58:42 +00:00
< / li >
< li >
2023-04-27 16:59:34 +00:00
< a href = "/hugo-theme-more-contentful/tags/" > Tags< / a >
2023-03-16 15:58:42 +00:00
< / li >
2023-02-24 12:26:30 +00:00
2023-03-16 15:58:42 +00:00
< / ul >
2023-02-24 12:26:30 +00:00
< / nav >
< div class = "site__theme-btn" aria-label = "Theme toggle" aria-hidden = "true" >
2022-04-30 12:42:22 +00:00
2023-04-03 03:44:04 +00:00
< svg class = "site__icon" >
2023-04-27 16:59:34 +00:00
< use href = "/hugo-theme-more-contentful/icons/generic/swatch.svg#swatch" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2022-04-30 12:42:22 +00:00
< 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 >
2022-10-23 16:14:26 +00:00
< 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 >
2022-04-30 12:42:22 +00:00
< 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
2021-07-07 07:53:40 +00:00
< / div >
2022-04-30 12:42:22 +00:00
< / div >
2021-07-07 07:53:40 +00:00
< / div >
2022-04-30 12:42:22 +00:00
< / div >
2022-06-13 13:51:31 +00:00
< 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");
}
}
}
2022-04-30 12:42:22 +00:00
const themeDropdown = document.querySelector('.site__theme-btn');
2022-06-13 13:51:31 +00:00
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;
2021-07-07 07:53:40 +00:00
}
2022-06-13 13:51:31 +00:00
}
styleTheme();
});
styleTheme();
2022-04-30 12:42:22 +00:00
< / script >
2023-02-24 12:26:30 +00:00
2023-02-24 13:35:28 +00:00
< / header >
2023-02-24 12:26:30 +00:00
< hr aria-hidden = "true" / >
< div class = "post--single" >
< main >
< article >
< header >
< h1 > Configurable list of contacts< / h1 >
2023-02-24 13:35:28 +00:00
2023-04-03 03:44:04 +00:00
< div class = "site__list post__meta" aria-hidden = "true" > < span class = "post__meta-icon-label" >
2023-02-27 09:28:03 +00:00
2023-04-03 03:44:04 +00:00
< svg class = "site__icon" >
2023-04-27 16:59:34 +00:00
< use href = "/hugo-theme-more-contentful/icons/generic/calendar.svg#calendar" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2023-03-16 15:58:42 +00:00
< time datetime = "2020-10-20T20:38:24+08:00" title = "Created" >
2023-02-27 09:28:03 +00:00
2020-10-20
< / time >
< / span >
< / div >
2021-07-07 07:53:40 +00:00
2023-02-24 12:26:30 +00:00
< / header >
2022-04-30 12:42:22 +00:00
2023-02-24 12:26:30 +00:00
2021-07-07 07:53:40 +00:00
2023-02-24 12:26:30 +00:00
< div class = "paragraph" >
2021-07-07 07:53:40 +00:00
< 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’ < a href = "https://gohugo.io/templates/data-templates/" > data templates< / a > .
Let’ < / 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… < / 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’ < 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 = " 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" < / 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’ < 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" > < address>
{{- range (sort $.Site.Data.contacts " weight" " asc" ) -}}
| < a rel=" me" href=" {{ .url }}" > {{- .name -}}< /a> |
{{- end -}}
< /address> < / 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 >
2023-02-24 12:26:30 +00:00
< / article >
2021-07-07 07:53:40 +00:00
< / main >
2023-02-27 09:28:03 +00:00
< hr aria-hidden = "true" / >
< div class = "post__meta--single" aria-hidden = "true" >
2021-07-07 07:53:40 +00:00
2023-02-27 09:28:03 +00:00
< p data-content-publication-date = "2020-10-20T20:38:24+08:00" > Created: < time datetime = "2020-10-20T20:38:24+08:00" > 2020-10-20< / time > < / p >
2021-07-07 07:53:40 +00:00
2023-02-27 09:28:03 +00:00
2021-07-07 07:53:40 +00:00
2023-02-27 09:28:03 +00:00
< / div >
2023-02-24 12:26:30 +00:00
< / div >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
2023-02-24 12:26:30 +00:00
< hr aria-hidden = "true" / > < footer aria-label = "Site footer" >
2021-07-07 07:53:40 +00:00
2022-11-22 12:06:56 +00:00
< a href = "#top" > Back to top< / a >
2021-07-07 07:53:40 +00:00
< p > Available in other languages:
2023-04-03 03:44:04 +00:00
< span class = "site__list site__languages" >
2021-07-07 07:53:40 +00:00
2022-04-30 13:04:28 +00:00
< a href = "/hugo-theme-more-contentful/en" hreflang = "en" > English< / a >
2021-07-07 07:53:40 +00:00
2022-04-30 13:04:28 +00:00
< a href = "/hugo-theme-more-contentful/tl" hreflang = "tl" > Tagalog< / a >
2021-07-07 07:53:40 +00:00
< / span >
< / p >
2023-04-03 03:44:04 +00:00
< nav class = "site__list site__socials" >
2021-07-07 07:53:40 +00:00
2023-03-16 15:58:42 +00:00
< a class = "site__social-icon" rel = "me" href = "https://example.org/gmail" aria-label = "E-mail" >
2023-04-03 03:44:04 +00:00
< svg class = "site__icon" >
2023-04-27 16:59:34 +00:00
< use href = "/hugo-theme-more-contentful/icons/brand/gmail.svg#gmail" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
2023-03-16 15:58:42 +00:00
< / a > < a class = "site__social-icon" rel = "me" href = "https://example.org/keybase" aria-label = "Keybase" >
2023-04-03 03:44:04 +00:00
< svg class = "site__icon" >
2023-04-27 16:59:34 +00:00
< use href = "/hugo-theme-more-contentful/icons/brand/keybase.svg#keybase" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
2023-03-16 15:58:42 +00:00
< / a > < a class = "site__social-icon" rel = "me" href = "https://example.org/devdotto" aria-label = "Dev.to" >
2023-04-03 03:44:04 +00:00
< svg class = "site__icon" >
2023-04-27 16:59:34 +00:00
< use href = "/hugo-theme-more-contentful/icons/brand/devdotto.svg#devdotto" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
2023-03-16 15:58:42 +00:00
< / a > < a class = "site__social-icon" rel = "me" href = "https://example.org/github/" aria-label = "GitHub" >
2023-04-03 03:44:04 +00:00
< svg class = "site__icon" >
2023-04-27 16:59:34 +00:00
< use href = "/hugo-theme-more-contentful/icons/brand/github.svg#github" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
2023-03-16 15:58:42 +00:00
< / a > < a class = "site__social-icon" rel = "me" href = "https://example.org/gitlab" aria-label = "GitLab" >
2023-04-03 03:44:04 +00:00
< svg class = "site__icon" >
2023-04-27 16:59:34 +00:00
< use href = "/hugo-theme-more-contentful/icons/brand/gitlab.svg#gitlab" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
2023-03-16 15:58:42 +00:00
< / a > < a class = "site__social-icon" rel = "me" href = "https://example.org/lichess" aria-label = "Lichess" >
2023-04-03 03:44:04 +00:00
< svg class = "site__icon" >
2023-04-27 16:59:34 +00:00
< use href = "/hugo-theme-more-contentful/icons/brand/lichess.svg#lichess" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
2023-03-16 15:58:42 +00:00
< / a > < a class = "site__social-icon" rel = "me" href = "https://example.org/picartodottv" aria-label = "Picarto.tv" >
2023-04-03 03:44:04 +00:00
< svg class = "site__icon" >
2023-04-27 16:59:34 +00:00
< use href = "/hugo-theme-more-contentful/icons/brand/picartodottv.svg#picartodottv" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
2023-03-16 15:58:42 +00:00
< / a > < a class = "site__social-icon" rel = "me" href = "https://example.org/pixiv" aria-label = "Pixiv" >
2023-04-03 03:44:04 +00:00
< svg class = "site__icon" >
2023-04-27 16:59:34 +00:00
< use href = "/hugo-theme-more-contentful/icons/brand/pixiv.svg#pixiv" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2023-03-16 15:58:42 +00:00
< / a > < a class = "site__social-icon" rel = "me" href = "https://example.org/twitch" aria-label = "Twitch" >
2023-04-03 03:44:04 +00:00
< svg class = "site__icon" >
2023-04-27 16:59:34 +00:00
< use href = "/hugo-theme-more-contentful/icons/brand/twitch.svg#twitch" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2024-10-28 07:21:39 +00:00
< / a > < a class = "site__social-icon" rel = "me" href = "https://example.org/twitter" aria-label = "X (formerly Twitter)" >
2023-04-03 03:44:04 +00:00
< svg class = "site__icon" >
2024-10-28 07:21:39 +00:00
< use href = "/hugo-theme-more-contentful/icons/brand/x.svg#x" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2023-03-16 15:58:42 +00:00
< / a > < a class = "site__social-icon" rel = "me" href = "https://example.org/youtube" aria-label = "YouTube" >
2023-04-03 03:44:04 +00:00
< svg class = "site__icon" >
2023-04-27 16:59:34 +00:00
< use href = "/hugo-theme-more-contentful/icons/brand/youtube.svg#youtube" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2023-03-16 15:58:42 +00:00
< / a > < / nav >
2021-07-07 07:53:40 +00:00
2022-11-22 12:06:56 +00:00
2024-05-18 10:53:14 +00:00
< p > © 2024 More Contentful< / p >
2021-07-07 07:53:40 +00:00
< / footer >
< / body >
< / html >
