hugo-theme-contentful/recipes/feed.json

{
    "version": "https://jsonfeed.org/version/1.1",
    "title": "Contentful",
    "home_page_url": "https://foo-dogsquared.github.io/hugo-theme-contentful/",
    "feed_url": "https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/feed.json",
    "description": "Recent content on Contentful", 
    "authors":[{"name":"John Doe"}],
    "items":
        [{"content_html":"\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003e\u003ca href=\"https://github.com/simple-icons/simple-icons\"\u003eSimple Icons\u003c/a\u003e is a free and open source icon set for popular brands including social media sites such as Twitter, YouTube, Twitch, GitHub, and so on.\nThis is a perfect component for getting social media icons.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eUsually to make use of this icon set in Hugo, you would have to download each icon you need.\nLuckily, there’s an easier way to make use of the set with \u003ca href=\"https://gohugo.io/hugo-modules/\"\u003eHugo modules\u003c/a\u003e.\nIn the future, Hugo will have an easier way to \u003ca href=\"https://discourse.gohugo.io/t/esbuild-looks-like-we-can-finally-get-solid-hugo-modules-support/28757\"\u003eintegrate\u003c/a\u003e \u003ca href=\"https://gohugo.io/commands/hugo_mod_npm/#readout\"\u003ewith JavaScript modules\u003c/a\u003e.\n\u003csup class=\"footnote\"\u003e[\u003ca id=\"_footnoteref_1\" class=\"footnote\" href=\"#_footnotedef_1\" title=\"View footnote.\"\u003e1\u003c/a\u003e]\u003c/sup\u003e\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eTo get started, simply initialize your Hugo site as a Hugo module with \u003ccode\u003ehugo mod init $HUGO_MOD_NAME\u003c/code\u003e where \u003ccode\u003e$HUGO_MOD_NAME\u003c/code\u003e is simply the name of the Hugo module which could be anything.\nFor example, if you host your Hugo site on GitHub pages, you might want to name your module like \u003ccode\u003egithub.com/$USER/$HUGO_SITE_REPO\u003c/code\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThen, add the Simple Icons repo as a dependency module in your site configuration.\nThe following configuration gets the icon set and the metadata and places them at \u003ccode\u003eassets/icons\u003c/code\u003e and \u003ccode\u003edata/simple-icons.json\u003c/code\u003e respectively.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e[[module.imports]]\n  path = \u0026#34;github.com/simple-icons/simple-icons\u0026#34;\n  [[module.imports.mounts]]\n    source = \u0026#34;icons\u0026#34;\n    target = \u0026#34;assets/icons\u0026#34;\n  [[module.imports.mounts]]\n    source = \u0026#34;_data/simple-icons.json\u0026#34;\n    target = \u0026#34;data/simple-icons.json\u0026#34;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eOnto the interesting point which is using the icons itself.\nSince the icon set is stored in the assets folder, we can then use it in our templates.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e{{ $github_icon := resources.Get \u0026#34;icons/github.svg\u0026#34; }}\n{{ $github_icon.Content | safeHTML }}\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAnd the SVG source will be applied inline to the resulting page.\nThis opens up a lot of uses with the icon set.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eLet’s reimplement the \u003ca href=\"../configurable-list-of-contacts.html\"\u003econfigurable list of contacts\u003c/a\u003e with added feature of adding an icon from the set with each key serves as the icon to be displayed.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u0026lt;address\u0026gt;\n{{- range (sort $.Site.Data.contacts \u0026#34;weight\u0026#34; \u0026#34;asc\u0026#34;) -}}\n\u0026lt;a rel=\u0026#34;me\u0026#34; href=\u0026#34;{{ .url }}\u0026#34; aria-contact=\u0026#34;{{ .name }}\u0026#34;\u0026gt;\n    {{ $location := printf \u0026#34;icons/%s.svg\u0026#34; .id }}\n    {{ with resources.Get $location }}{{ .Content | safeHTML }}{{ end }}\u0026lt;/a\u0026gt; |\n{{- end -}}\n\u0026lt;/address\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eUnfortunately, this doesn’t take account for missing icons so a fallback would be handy.\nFor now, we’ll use text as our fallback even though it’s not going to be pretty.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u0026lt;address\u0026gt;\n{{- range (sort $.Site.Data.contacts \u0026#34;weight\u0026#34; \u0026#34;asc\u0026#34;) -}}\n\u0026lt;a rel=\u0026#34;me\u0026#34; href=\u0026#34;{{ .url }}\u0026#34; aria-contact=\u0026#34;{{ .name }}\u0026#34;\u0026gt;\n    {{ $location := printf \u0026#34;icons/%s.svg\u0026#34; .id }}\n    {{ $icon := resources.Get $location }}\n    {{ if (countrunes $icon.Content) }}\n        {{ .Content | safeHTML }}\n    {{ else }}\n        {{ .name }}\n    {{ end }}\n\u0026lt;/a\u0026gt; |\n{{- end -}}\n\u0026lt;/address\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv id=\"footnotes\"\u003e\n\u003chr/\u003e\n\u003cdiv class=\"footnote\" id=\"_footnotedef_1\"\u003e\n\u003ca href=\"#_footnoteref_1\"\u003e1\u003c/a\u003e. Or integrating with NPM which \u003ca href=\"https://gohugo.io/news/0.75.0-relnotes/\"\u003eHugo\u003c/a\u003e certain has more support in the upcoming version.\n\u003c/div\u003e\n\u003c/div\u003e\n","date_modified":"2020-10-24T15:49:14+08:00","date_published":"2020-10-20T21:36:34+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/simple-icons-integration/","summary":"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.\n 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.","tags":["tag1","tag2"],"title":"Simple Icons integration with Hugo modules","url":"https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/simple-icons-integration/"},{"content_html":"\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eMost themes offer quick social media links with site configuration.\nHowever, it is only limited to popular media sites such as Facebook, Twitter, Instagram, GitHub, etc.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eTo get around this, we’ll make use of \u003ca href=\"https://gohugo.io/templates/data-templates/\"\u003edata templates\u003c/a\u003e.\nLet’s create a quick game plan how does it work.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThe data is a top-level dictionary/object with each key contains an object with the following fields.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"ulist\"\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eurl\u003c/code\u003e is the…​ contact link itself and it is required to have it.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003ename\u003c/code\u003e is the text to appear in the output.\nAlso required to have.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eweight\u003c/code\u003e is an integer similar to how Hugo sorts the pages with the lower weight having high precedence;\nif this key is absent, it will be interpreted as 0.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAnd here’s the data example in TOML which is placed in \u003ccode\u003edata/contact.toml\u003c/code\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e[github]\n    name = \u0026#34;GitHub\u0026#34;\n    url = \u0026#34;https://github.com/foo-dogsquared\u0026#34;\n\n[gitlab]\n    name = \u0026#34;Gitlab\u0026#34;\n    url = \u0026#34;https://gitlab.com/foo-dogsquared\u0026#34;\n\n[keybase]\n    name = \u0026#34;Keybase\u0026#34;\n    url = \u0026#34;https://keybase.io/foo_dogsquared\u0026#34;\n    weight = -1\n\n[twitter]\n    name = \u0026#34;Twitter\u0026#34;\n    url = \u0026#34;https://twitter.com/foo_dogsquared\u0026#34;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eI want my Keybase profile to appear first than anything else for whatever reason so the \u003ccode\u003eweight\u003c/code\u003e key is set to -1.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWith this data, we can then create a template out of it.\nI’ve put the following template in a partial named \u003ccode\u003econtacts\u003c/code\u003e (i.e., \u003ccode\u003elayouts/partials/contacts\u003c/code\u003e).\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u0026lt;address\u0026gt;\n{{- range (sort $.Site.Data.contacts \u0026#34;weight\u0026#34; \u0026#34;asc\u0026#34;) -}}\n| \u0026lt;a rel=\u0026#34;me\u0026#34; href=\u0026#34;{{ .url }}\u0026#34;\u0026gt;{{- .name -}}\u0026lt;/a\u0026gt; |\n{{- end -}}\n\u0026lt;/address\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eA suggestion (and an exercise) for extending this is to create image links.\nMaybe add another key named \u003ccode\u003eimage\u003c/code\u003e that accepts either URL.\nThe \u003ccode\u003ename\u003c/code\u003e would now be the image alternative text.\u003c/p\u003e\n\u003c/div\u003e\n","date_modified":"2020-10-24T15:49:14+08:00","date_published":"2020-10-20T20:38:24+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/configurable-list-of-contacts/","summary":"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.\n To get around this, we’ll make use of data templates. Let’s create a quick game plan how does it work.\n The data is a top-level dictionary/object with each key contains an object with the following fields.\n   url is the…​ contact link itself and it is required to have it.","tags":null,"title":"Configurable list of contacts","url":"https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/configurable-list-of-contacts/"}]}