foodogsquared/hugo-theme-contentful
1
0
Fork 0
mirror of https://github.com/foo-dogsquared/hugo-theme-contentful.git synced 2025-01-31 04:58:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
gh-pages
hugo-theme-contentful/recipes/simple-icons-integration/index.html

176 lines
9.2 KiB
HTML
Raw Permalink 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</title>
<link rel="stylesheet" href="https://foo-dogsquared.github.io/hugo-theme-contentful/css/index.min.11618edd7e3b000c8d9629ad7f78c9229d907cb12f420c0242dfb9185eb5ff8e.css" /><meta name="generator" content="Hugo 0.98.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-contentful/recipes/simple-icons-integration/" /><meta property="article:section" content="recipes" />
<meta property="article:published_time" content="2020-10-20T21:36:34+08:00" />
<meta property="article:modified_time" content="2022-05-13T18:08:06+08:00" />
<meta itemprop="name" content="Simple Icons integration with Hugo modules">
<meta itemprop="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 itemprop="datePublished" content="2020-10-20T21:36:34+08:00" />
<meta itemprop="dateModified" content="2022-05-13T18:08:06+08:00" />
<meta itemprop="wordCount" content="412">
<meta itemprop="keywords" content="tag1,tag2," /><link rel="canonical" type="text/html" href="https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/simple-icons-integration/" />
<body><nav aria-label="Primary navigation">
<a class="site__title" href="https://foo-dogsquared.github.io/hugo-theme-contentful/">Contentful</a>
<div class="site__links">
|
<a href="https://foo-dogsquared.github.io/hugo-theme-contentful/about/">About</a> |
<a href="https://foo-dogsquared.github.io/hugo-theme-contentful/categories/">Categories</a> |
<a href="https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/">Recipes</a> |
<a href="https://foo-dogsquared.github.io/hugo-theme-contentful/tags/">Tags</a> |
</div>
</nav>
<article>
<header>
<h1>Simple Icons integration with Hugo modules</h1>
</header>
<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="2022-05-13 18:08:06 &#43;0800 &#43;0800">Updated: <time datetime="2022-05-13">2022-05-13</time></p>
</div>
<hr>
<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>
</article>
<hr>
<footer>
<p><a href="https://foo-dogsquared.github.io/hugo-theme-contentful/">Back to home</a></p>
</footer>
<p>Available in other languages:
<span class="site__languages">|
<a href="/hugo-theme-contentful/en">English</a> |
<a href="/hugo-theme-contentful/tl">Tagalog</a> |
</span>
</p>
<p>© 2022 Contentful</p>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink