hugo-theme-more-contentful/recipes/feed.json

{
    "version": "https://jsonfeed.org/version/1.1",
    "title": "Recipes on Contentful",
    "home_page_url": "https://foo-dogsquared.github.io/hugo-theme-more-contentful",
    "feed_url": "https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/feed.json",
    "description": "Recent content in Recipes 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;