foodogsquared/hugo-theme-more-contentful
1
0
Fork 0
mirror of https://github.com/foo-dogsquared/hugo-theme-more-contentful.git synced 2025-02-28 12:19:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
fff35fecf7
hugo-theme-more-contentful/recipes/simple-icons-integration/index.html

265 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-us"><title>Simple Icons integration with Hugo modules | Contentful</title>
<link rel="stylesheet" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/css/main.min.e06bc29e2cb00a8f461bfefc0ea9543b9bf61688266d3ca51fcb4d2121242b0a.css" /><meta name="generator" content="Hugo 0.76.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="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.
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." /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Simple Icons integration with Hugo modules"/>
<meta name="twitter:description" content="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.
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."/>
<meta property="og:title" content="Simple Icons integration with Hugo modules" />
<meta property="og:description" content="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.
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." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/simple-icons-integration/" />
<meta property="article:published_time" content="2020-10-20T21:36:34+08:00" />
<meta property="article:modified_time" content="2020-11-02T23:58:07+08:00" />
<link rel="canonical" type="text/html" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/simple-icons-integration/" />
<script>
let theme = window.localStorage.getItem('theme');
if (theme) {
document.documentElement.dataset.theme = theme;
}
</script>
<body>
<div class="site__theme-btn" aria-label="Theme toggle">
<svg>
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/color-swatch.svg#color-swatch"></use>
</svg>
<div class="site__theme-dropdown">
<div class="site__theme-item" >Default Dark (default)</div>
<div class="site__theme-item" data-theme="Dracula">Dracula</div>
<div class="site__theme-item" data-theme="Nord">Nord</div>
</div>
</svg>
</div>
<script defer>
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;
}
}
});
</script><nav aria-label="Primary navigation">
<a class="site__title" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful">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>
<article class="post--single">
<header>
<h1>Simple Icons integration with Hugo modules</h1>
</header>
<div class="list post__meta"><time datetime="2020-10-20 21:36:34 &#43;0800 &#43;0800">
<svg>
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/calendar.svg#calendar"></use>
</svg>
<span style="margin-left: 0.5em;">2020-10-20</span>
</time>
<time datetime="2020-11-02 23:58:07 &#43;0800 &#43;0800">
<svg>
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/refresh.svg#refresh"></use>
</svg>
<span style="margin-left: 0.5em;">2020-11-02</span>
</time>
</div>
<main>
<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>
<div class="paragraph">
<p>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 <a href="https://gohugo.io/hugo-modules/">Hugo modules</a>.
In the future, Hugo will have an easier way to <a href="https://discourse.gohugo.io/t/esbuild-looks-like-we-can-finally-get-solid-hugo-modules-support/28757">integrate</a> <a href="https://gohugo.io/commands/hugo_mod_npm/#readout">with JavaScript modules</a>.
<sup class="footnote">[<a id="_footnoteref_1" class="footnote" href="#_footnotedef_1" title="View footnote.">1</a>]</sup></p>
</div>
<div class="paragraph">
<p>To get started, simply initialize your Hugo site as a Hugo module with <code>hugo mod init $HUGO_MOD_NAME</code> where <code>$HUGO_MOD_NAME</code> is simply the name of the Hugo module which could be anything.
For example, if you host your Hugo site on GitHub pages, you might want to name your module like <code>github.com/$USER/$HUGO_SITE_REPO</code>.</p>
</div>
<div class="paragraph">
<p>Then, add the Simple Icons repo as a dependency module in your site configuration.
The following configuration gets the icon set and the metadata and places them at <code>assets/icons</code> and <code>data/simple-icons.json</code> respectively.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-toml" data-lang="toml">[[module.imports]]
path = &#34;github.com/simple-icons/simple-icons&#34;
[[module.imports.mounts]]
source = &#34;icons&#34;
target = &#34;assets/icons&#34;
[[module.imports.mounts]]
source = &#34;_data/simple-icons.json&#34;
target = &#34;data/simple-icons.json&#34;</code></pre>
</div>
</div>
<div class="paragraph">
<p>Onto the interesting point which is using the icons itself.
Since the icon set is stored in the assets folder, we can then use it in our templates.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-go" data-lang="go">{{ $github_icon := resources.Get &#34;icons/github.svg&#34; }}
{{ $github_icon.Content | safeHTML }}</code></pre>
</div>
</div>
<div class="paragraph">
<p>And the SVG source will be applied inline to the resulting page.
This opens up a lot of uses with the icon set.</p>
</div>
<div class="paragraph">
<p>Let’s reimplement the <a href="../configurable-list-of-contacts.html">configurable list of contacts</a> with added feature of adding an icon from the set with each key serves as the icon to be displayed.</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; aria-contact=&#34;{{ .name }}&#34;&gt;
{{ $location := printf &#34;icons/%s.svg&#34; .id }}
{{ with resources.Get $location }}{{ .Content | safeHTML }}{{ end }}&lt;/a&gt; |
{{- end -}}
&lt;/address&gt;</code></pre>
</div>
</div>
<div class="paragraph">
<p>Unfortunately, this doesn’t take account for missing icons so a fallback would be handy.
For now, we’ll use text as our fallback even though it’s not going to be pretty.</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; aria-contact=&#34;{{ .name }}&#34;&gt;
{{ $location := printf &#34;icons/%s.svg&#34; .id }}
{{ $icon := resources.Get $location }}
{{ if (countrunes $icon.Content) }}
{{ .Content | safeHTML }}
{{ else }}
{{ .name }}
{{ end }}
&lt;/a&gt; |
{{- end -}}
&lt;/address&gt;</code></pre>
</div>
</div>
<div id="footnotes">
<hr/>
<div class="footnote" id="_footnotedef_1">
<a href="#_footnoteref_1">1</a>. Or integrating with NPM which <a href="https://gohugo.io/news/0.75.0-relnotes/">Hugo</a> certain has more support in the upcoming version.
</div>
</div>
</main>
<hr>
<div class="post__meta--single">
<p data-content-publication-date="2020-10-20 21:36:34 &#43;0800 &#43;0800">Created: <time datetime="2020-10-20">2020-10-20</time></p>
<p data-content-modification-date="2020-11-02 23:58:07 &#43;0800 &#43;0800">Updated: <time datetime="2020-11-02">2020-11-02</time></p>
</div>
</article>
<hr>
<footer>
<p><a href="#top">Back to top</a></p>
<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://keybase.io/foo_dogsquared" aria-label="Keybase">
<svg>
<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://github.com/foo-dogsquared/" aria-label="GitHub">
<svg>
<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://gitlab.com/foo-dogsquared/" aria-label="GitLab">
<svg>
<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://twitter.com/foo_dogsquared" aria-label="Twitter">
<svg>
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitter.svg#twitter"></use>
</svg>
</a>
</li></ul>
<p>© 2021 Contentful</p>
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink