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

{
    "version": "https://jsonfeed.org/version/1.1",
    "title": "Articles on More Contentful",
    "home_page_url": "https://foo-dogsquared.github.io/hugo-theme-more-contentful",
    "feed_url": "https://foo-dogsquared.github.io/hugo-theme-more-contentful/articles/feed.json",
    "description": "Recent content in Articles on More Contentful", 
    "authors":[{"name":"John Doe"}],
    "items":
        [{"content_html":"\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWeb feeds are one of the most common ways for a visitor to keep up with someone who creates content.\nNowadays, most social media has that feature such as the subscribing YouTube channels, following Twitter accounts, and watching Deviantart artists.\nOutside of those, we have simpler things like \u003ca href=\"https://www.rssboard.org/rss-2-0-1\"\u003eRSS\u003c/a\u003e and \u003ca href=\"https://www.jsonfeed.org/\"\u003eJSON\u003c/a\u003e feeds where they are just plain text files describing the content.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThe Contentful theme doesn’t have a web feed export but we can have it with \u003ca href=\"https://gohugo.io/hugo-modules/theme-components/\"\u003etheme components\u003c/a\u003e.\nFor this demo, we’ll use the \u003ca href=\"https://github.com/foo-dogsquared/hugo-web-feeds\"\u003eweb feed component\u003c/a\u003e created by \u003ca href=\"https://foo-dogsquared.github.io/\"\u003efoo-dogsquared\u003c/a\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIf you’re settling with this option, here’s an example template for installing the web feed module and exporting all of the feed formats all in one fell swoop.\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/foo-dogsquared/hugo-web-feeds\u0026#34;\n\n# Visit the following for more information:\n# https://gohugo.io/templates/output-formats\n\n# Defining the media type of the output formats\n# For JSON format, it doesn\u0026#39;t need to be since it\u0026#39;s already built-in into Hugo\n[mediaTypes]\n    [mediaTypes.\u0026#34;application/atom+xml\u0026#34;]\n        suffixes = [\u0026#34;atom\u0026#34;, \u0026#34;atom.xml\u0026#34;] # You can remove the \u0026#34;atom.xml\u0026#34; if you want\n\n    # Redefining RSS media type for the additional suffix\n    [mediaTypes.\u0026#34;application/rss+xml\u0026#34;]\n        suffixes = [\u0026#34;rss\u0026#34;, \u0026#34;rss.xml\u0026#34;] # You can remove the \u0026#34;rss.xml\u0026#34; if you want\n\n    [mediaTypes.\u0026#34;application/feed+json\u0026#34;]\n        suffixes = [\u0026#34;json\u0026#34;] # You can remove the \u0026#34;rss.xml\u0026#34; if you want\n\n\n# Including all of the feed output formats in the build\n[outputFormats]\n    [outputFormats.Rss]\n        mediaType = \u0026#34;application/rss+xml\u0026#34;\n        baseName = \u0026#34;feed\u0026#34;\n\n    [outputFormats.Atom]\n        mediaType = \u0026#34;application/atom+xml\u0026#34;\n        baseName = \u0026#34;feed\u0026#34;\n\n    [outputFormats.Json]\n        mediaType = \u0026#34;application/feed+json\u0026#34;\n        baseName = \u0026#34;feed\u0026#34;\n\n\n# Indicating what output formats shall be included\n# for the following kinds\n[outputs]\n    # .Site.BaseURL/index.* is available\n    home = [\u0026#34;HTML\u0026#34;, \u0026#34;JSON\u0026#34;, \u0026#34;RSS\u0026#34;, \u0026#34;ATOM\u0026#34;]\n\n    # .Site.BaseURL/$section/index.* is available\n    section = [\u0026#34;HTML\u0026#34;, \u0026#34;JSON\u0026#34;, \u0026#34;RSS\u0026#34;, \u0026#34;ATOM\u0026#34;]\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n","date_modified":"2022-10-20T19:14:49+08:00","date_published":"2019-09-04T17:22:44+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-more-contentful/articles/rss-atom-and-json-feed-support/","summary":"Web feeds are one of the most common ways for a visitor to keep up with someone who creates content. Nowadays, most social media has that feature such as the subscribing YouTube channels, following Twitter accounts, and watching Deviantart artists. Outside of those, we have simpler things like RSS and JSON feeds where they are just plain text files describing the content.\n The Contentful theme doesn’t have a web feed export but we can have it with theme components.","tags":["this is a test tag","tag2"],"title":"RSS, Atom, and JSON Feed Support","url":"https://foo-dogsquared.github.io/hugo-theme-more-contentful/articles/rss-atom-and-json-feed-support/"},{"content_html":"\n\u003cdiv id=\"preamble\"\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThe purpose of this article to make sure not-so-common features of\nAsciidoctor (i.e. admonition blocks, callouts) are styled and\nfit to the theme.\nIt also serves as a quick introduction to more Asciidoctor as well.\nFeel free to steal this if you want a template for this.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_admonition_blocks\"\u003eAdmonition blocks\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAdmonition blocks contain content that are not a part of the main\ncontent but you’ll want to draw attention to the audience anyways.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eBy default, Asciidoctor provides five labels for admonitions:\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"ulist\"\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eTIP\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eNOTE\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eIMPORTANT\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eCAUTION\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eWARNING\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sidebarblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cdiv class=\"title\"\u003e\u003ccode\u003eCAUTION\u003c/code\u003e vs \u003ccode\u003eWARNING\u003c/code\u003e\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAs the \u003ca href=\"https://asciidoctor.org/docs/user-manual/#admonition\"\u003euser manual\u003c/a\u003e\nhas said, \u003ccode\u003eCAUTION\u003c/code\u003e and \u003ccode\u003eWARNING\u003c/code\u003e should be used with different semantics.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003e\u003ccode\u003eCAUTION\u003c/code\u003e basically advises the user to observe care.\n\u003ccode\u003eWARNING\u003c/code\u003e warns the user about the dangers or consequences that’ll exist.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWriting an admonition is intuitively easy, simply write the label\nin all uppercase and append with a colon.\nThen write the content after.\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-asciidoc\" data-lang=\"asciidoc\"\u003eTIP: Lorem ipsum dolor sit amet consectetur adipiscing elit varius cursus\norci nulla, fames nisl sodales scelerisque eu consequat sem imperdiet ac mi\nvivamus tempor, accumsan ad justo odio viverra praesent senectus class egestas duis.\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIt’ll render as this:\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"admonitionblock tip\"\u003e\n\u003ctable\u003e\n\u003ctbody\u003e\u003ctr\u003e\n\u003ctd class=\"icon\"\u003e\n\u003cdiv class=\"title\"\u003eTip\u003c/div\u003e\n\u003c/td\u003e\n\u003ctd class=\"content\"\u003e\nLorem ipsum dolor sit amet consectetur adipiscing elit varius cursus\norci nulla, fames nisl sodales scelerisque eu consequat sem imperdiet ac mi\nvivamus tempor, accumsan ad justo odio viverra praesent senectus class egestas duis.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIn case you want to style the labels differently such as assigning\nappropriate colors or an icon to the rest of the labels,\nhere’s the rest of them:\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"admonitionblock note\"\u003e\n\u003ctable\u003e\n\u003ctbody\u003e\u003ctr\u003e\n\u003ctd class=\"icon\"\u003e\n\u003cdiv class=\"title\"\u003eNote\u003c/div\u003e\n\u003c/td\u003e\n\u003ctd class=\"content\"\u003e\nMalesuada mattis aenean ultrices netus cursus viverra vivamus ultricies,\nvelit molestie penatibus phasellus in ante luctus, habitant suspendisse eros\nturpis taciti risus himenaeos.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003cdiv class=\"admonitionblock important\"\u003e\n\u003ctable\u003e\n\u003ctbody\u003e\u003ctr\u003e\n\u003ctd class=\"icon\"\u003e\n\u003cdiv class=\"title\"\u003eImportant\u003c/div\u003e\n\u003c/td\u003e\n\u003ctd class=\"content\"\u003e\nVelit fringilla feugiat nibh id faucibus scelerisque facilisis ac,\nsuscipit quisque odio libero ullamcorper curabitur fames nascetur, elementum\ntristique hac nisl etiam dictumst dapibus.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003cdiv class=\"admonitionblock caution\"\u003e\n\u003ctable\u003e\n\u003ctbody\u003e\u003ctr\u003e\n\u003ctd class=\"icon\"\u003e\n\u003cdiv class=\"title\"\u003eCaution\u003c/div\u003e\n\u003c/td\u003e\n\u003ctd class=\"content\"\u003e\nTempus dui aptent tempor torquent lacinia sem cursus porta cras semper\naccumsan feugiat, himenaeos mi ullamcorper pharetra enim class eget auctor conubia\nmetus curabitur.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003cdiv class=\"admonitionblock warning\"\u003e\n\u003ctable\u003e\n\u003ctbody\u003e\u003ctr\u003e\n\u003ctd class=\"icon\"\u003e\n\u003cdiv class=\"title\"\u003eWarning\u003c/div\u003e\n\u003c/td\u003e\n\u003ctd class=\"content\"\u003e\nAliquet ut maecenas mollis id enim nibh suscipit quisque posuere cum fusce,\ndignissim ad curabitur odio ac diam pharetra platea vivamus eleifend.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_callouts\"\u003eCallouts\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eCallouts are used to add annotations within a verbatim block.\nThis is especially useful for code listings in order to effectively explain what\nis going on within the code.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eHere’s an example of using callouts.\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-asciidoc\" data-lang=\"asciidoc\"\u003e[source,python]\n----\nfrom pathlib import Path\nfrom re import compile, match\n\ncurrent_directory = Path(\u0026#34;.\u0026#34;) \u0026lt;1\u0026gt;\nnotes_directory = current_directory / \u0026#34;notes/\u0026#34; \u0026lt;2\u0026gt;\n----\n\u0026lt;1\u0026gt; Created a Path object\n\u0026lt;2\u0026gt; Appending a Path object with \u0026#34;/\u0026#34;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAnd it’ll render as:\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-python\" data-lang=\"python\"\u003efrom pathlib import Path\nfrom re import compile, match\n\ncurrent_directory = Path(\u0026#34;.\u0026#34;) # \u003cb class=\"conum\"\u003e(1)\u003c/b\u003e\nnotes_directory = current_directory / \u0026#34;notes/\u0026#34; # \u003cb class=\"conum\"\u003e(2)\u003c/b\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"colist arabic\"\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cp\u003eCreated a \u003ccode\u003ePath\u003c/code\u003e object\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eAppending a \u003ccode\u003ePath\u003c/code\u003e object with \u0026#34;/\u0026#34;\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eOne of the most important you should style is the callout number\non the code listings block.\nNormally, when a user wants to copy-paste (even though I don’t personally\nencourage it), the callout number gets in the way and they have to\nmanually remove them which can be annoying.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eEither attach the property \u003ccode\u003euser-select\u003c/code\u003e with it or take a part from the\ndefault Asciidoctor stylesheet and include it in your own stylesheet.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_passthroughs\"\u003ePassthroughs\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eA \u003ca href=\"https://asciidoctor.org/docs/user-manual/#passthroughs\"\u003epassthrough\u003c/a\u003e passes the input as it is on the final output.\nThis is useful for web-based outputs, for example passing raw HTML for interactive scripts or to create a live result.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eBelow is a very simple example with a \u003ca href=\"https://p5js.org/\"\u003ep5.js\u003c/a\u003e sketch.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv id=\"example-sketch\"\u003e\u003c/div\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nconst sketchuuuuu = ( sketch ) =\u003e {\n  let x = 100;\n  let y = 100;\n\n  sketch.setup = () =\u003e {\n    sketch.createCanvas(300, 380);\n  };\n\n  sketch.draw = () =\u003e {\n    sketch.background(0);\n    sketch.fill(255);\n    sketch.rect(x,y,50,50);\n    sketch.ellipse(sketch[\"mouseX\"], sketch[\"mouseY\"], 20);\n  };\n};\n\nlet example_sketch = new p5(sketchuuuuu, \"example-sketch\")\n\u003c/script\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eHere is the input from the source code of this document.\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-asciidoctor\" data-lang=\"asciidoctor\"\u003e++++\n\u0026lt;div id=\u0026#34;example-sketch\u0026#34;\u0026gt;\u0026lt;/div\u0026gt;\n\u0026lt;script src=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script\u0026gt;\nconst sketchuuuuu = ( sketch ) =\u0026gt; {\n  let x = 100;\n  let y = 100;\n\n  sketch.setup = () =\u0026gt; {\n    sketch.createCanvas(300, 380);\n  };\n\n  sketch.draw = () =\u0026gt; {\n    sketch.background(0);\n    sketch.fill(255);\n    sketch.rect(x,y,50,50);\n    sketch.ellipse(sketch[\u0026#34;mouseX\u0026#34;], sketch[\u0026#34;mouseY\u0026#34;], 20);\n  };\n};\n\nlet example_sketch = new p5(sketchuuuuu, \u0026#34;example-sketch\u0026#34;)\n\u0026lt;/script\u0026gt;\n++++\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThis is the closest instance of \u003ca href=\"https://en.wikipedia.org/wiki/Literate_programming\"\u003eliterate programming\u003c/a\u003e in the web when using Asciidoctor.\n(Sadly, not as flexible or cool as \u003ca href=\"https://orgmode.org/\"\u003eOrg-Mode\u003c/a\u003e or \u003ca href=\"https://jupyter.org/\"\u003eJupyter Notebooks\u003c/a\u003e.)\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n","date_modified":"2022-10-20T19:14:49+08:00","date_published":"2019-08-29T22:09:16+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-more-contentful/articles/asciidoctor-extended-syntax-guide/","summary":"The purpose of this article to make sure not-so-common features of Asciidoctor (i.e. admonition blocks, callouts) are styled and fit to the theme. It also serves as a quick introduction to more Asciidoctor as well. Feel free to steal this if you want a template for this.\n   Admonition blocks Admonition blocks contain content that are not a part of the main content but you’ll want to draw attention to the audience anyways.","tags":["asciidoctor","guide"],"title":"Asciidoctor Extended Syntax Guide","url":"https://foo-dogsquared.github.io/hugo-theme-more-contentful/articles/asciidoctor-extended-syntax-guide/"}]}