mirror of
https://github.com/foo-dogsquared/hugo-theme-more-contentful.git
synced 2025-01-31 10:58:19 +00:00
360 lines
16 KiB
XML
360 lines
16 KiB
XML
<?xml version="1.0" encoding="utf-8" ?>
|
||
<feed xmlns="http://www.w3.org/2005/Atom">
|
||
<title>More Contentful</title>
|
||
|
||
<link rel="self" type="application/atom+xml" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/feed.atom"/><link rel="canonical" type="text/html" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/"/><link rel="alternate" type="application/feed+json" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/feed.json"/><link rel="alternate" type="application/rss+xml" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/feed.rss"/><rights>© 2022 </rights>
|
||
<generator uri="https://gohugo.io/" version="0.96.0">Hugo</generator>
|
||
<updated>2020-10-20T20:38:24+08:00</updated>
|
||
<id>https://foo-dogsquared.github.io/hugo-theme-more-contentful</id><icon>https://foo-dogsquared.github.io/hugo-theme-more-contentful/icon.png</icon>
|
||
<author>
|
||
<name>John Doe</name>
|
||
<email>johndoe@example.com</email>
|
||
</author><entry>
|
||
<id>https://foo-dogsquared.github.io/hugo-theme-more-contentful/articles/rss-atom-and-json-feed-support/</id>
|
||
<title type="text">RSS, Atom, and JSON Feed Support</title>
|
||
<link rel="alternate" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/articles/rss-atom-and-json-feed-support/" hreflang="en" title="RSS, Atom, and JSON Feed Support"/><author>
|
||
<name>John Doe</name>
|
||
</author><author>
|
||
<name>Jane Doe</name>
|
||
</author><category term="this is a test tag"/><category term="tag2"/>
|
||
<published>2019-09-04T17:22:44+08:00</published>
|
||
<updated>2022-10-24T00:09:47+08:00</updated><content type="html"><div class="paragraph">
|
||
<p>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 <a href="https://www.rssboard.org/rss-2-0-1">RSS</a> and <a href="https://www.jsonfeed.org/">JSON</a> feeds where they are just plain text files describing the content.</p>
|
||
</div>
|
||
<div class="paragraph">
|
||
<p>The Contentful theme doesn’t have a web feed export but we can have it with <a href="https://gohugo.io/hugo-modules/theme-components/">theme components</a>.
|
||
For this demo, we’ll use the <a href="https://github.com/foo-dogsquared/hugo-web-feeds">web feed component</a> created by <a href="https://foo-dogsquared.github.io/">foo-dogsquared</a>.</p>
|
||
</div>
|
||
<div class="paragraph">
|
||
<p>If 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.</p>
|
||
</div>
|
||
<div class="listingblock">
|
||
<div class="content">
|
||
<pre class="highlight"><code class="language-toml" data-lang="toml">[[module.imports]]
|
||
path = &#34;github.com/foo-dogsquared/hugo-web-feeds&#34;
|
||
|
||
# Visit the following for more information:
|
||
# https://gohugo.io/templates/output-formats
|
||
|
||
# Defining the media type of the output formats
|
||
# For JSON format, it doesn&#39;t need to be since it&#39;s already built-in into Hugo
|
||
[mediaTypes]
|
||
[mediaTypes.&#34;application/atom+xml&#34;]
|
||
suffixes = [&#34;atom&#34;, &#34;atom.xml&#34;] # You can remove the &#34;atom.xml&#34; if you want
|
||
|
||
# Redefining RSS media type for the additional suffix
|
||
[mediaTypes.&#34;application/rss+xml&#34;]
|
||
suffixes = [&#34;rss&#34;, &#34;rss.xml&#34;] # You can remove the &#34;rss.xml&#34; if you want
|
||
|
||
[mediaTypes.&#34;application/feed+json&#34;]
|
||
suffixes = [&#34;json&#34;] # You can remove the &#34;rss.xml&#34; if you want
|
||
|
||
|
||
# Including all of the feed output formats in the build
|
||
[outputFormats]
|
||
[outputFormats.Rss]
|
||
mediaType = &#34;application/rss+xml&#34;
|
||
baseName = &#34;feed&#34;
|
||
|
||
[outputFormats.Atom]
|
||
mediaType = &#34;application/atom+xml&#34;
|
||
baseName = &#34;feed&#34;
|
||
|
||
[outputFormats.Json]
|
||
mediaType = &#34;application/feed+json&#34;
|
||
baseName = &#34;feed&#34;
|
||
|
||
|
||
# Indicating what output formats shall be included
|
||
# for the following kinds
|
||
[outputs]
|
||
# .Site.BaseURL/index.* is available
|
||
home = [&#34;HTML&#34;, &#34;JSON&#34;, &#34;RSS&#34;, &#34;ATOM&#34;]
|
||
|
||
# .Site.BaseURL/$section/index.* is available
|
||
section = [&#34;HTML&#34;, &#34;JSON&#34;, &#34;RSS&#34;, &#34;ATOM&#34;]</code></pre>
|
||
</div>
|
||
</div>
|
||
</content>
|
||
</entry><entry>
|
||
<id>https://foo-dogsquared.github.io/hugo-theme-more-contentful/articles/asciidoctor-extended-syntax-guide/</id>
|
||
<title type="text">Asciidoctor Extended Syntax Guide</title>
|
||
<link rel="alternate" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/articles/asciidoctor-extended-syntax-guide/" hreflang="en" title="Asciidoctor Extended Syntax Guide"/><category term="asciidoctor"/><category term="guide"/>
|
||
<published>2019-08-29T22:09:16+08:00</published>
|
||
<updated>2022-10-24T00:09:47+08:00</updated><content type="html">
|
||
<div id="preamble">
|
||
<div class="sectionbody">
|
||
<div class="paragraph">
|
||
<p>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.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sect1">
|
||
<h2 id="_admonition_blocks">Admonition blocks</h2>
|
||
<div class="sectionbody">
|
||
<div class="paragraph">
|
||
<p>Admonition blocks contain content that are not a part of the main
|
||
content but you’ll want to draw attention to the audience anyways.</p>
|
||
</div>
|
||
<div class="paragraph">
|
||
<p>By default, Asciidoctor provides five labels for admonitions:</p>
|
||
</div>
|
||
<div class="ulist">
|
||
<ul>
|
||
<li>
|
||
<p><code>TIP</code></p>
|
||
</li>
|
||
<li>
|
||
<p><code>NOTE</code></p>
|
||
</li>
|
||
<li>
|
||
<p><code>IMPORTANT</code></p>
|
||
</li>
|
||
<li>
|
||
<p><code>CAUTION</code></p>
|
||
</li>
|
||
<li>
|
||
<p><code>WARNING</code></p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="sidebarblock">
|
||
<div class="content">
|
||
<div class="title"><code>CAUTION</code> vs <code>WARNING</code></div>
|
||
<div class="paragraph">
|
||
<p>As the <a href="https://asciidoctor.org/docs/user-manual/#admonition">user manual</a>
|
||
has said, <code>CAUTION</code> and <code>WARNING</code> should be used with different semantics.</p>
|
||
</div>
|
||
<div class="paragraph">
|
||
<p><code>CAUTION</code> basically advises the user to observe care.
|
||
<code>WARNING</code> warns the user about the dangers or consequences that’ll exist.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="paragraph">
|
||
<p>Writing an admonition is intuitively easy, simply write the label
|
||
in all uppercase and append with a colon.
|
||
Then write the content after.</p>
|
||
</div>
|
||
<div class="listingblock">
|
||
<div class="content">
|
||
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">TIP: Lorem ipsum dolor sit amet consectetur adipiscing elit varius cursus
|
||
orci nulla, fames nisl sodales scelerisque eu consequat sem imperdiet ac mi
|
||
vivamus tempor, accumsan ad justo odio viverra praesent senectus class egestas duis.</code></pre>
|
||
</div>
|
||
</div>
|
||
<div class="paragraph">
|
||
<p>It’ll render as this:</p>
|
||
</div>
|
||
<div class="admonitionblock tip">
|
||
<table>
|
||
<tbody><tr>
|
||
<td class="icon">
|
||
<div class="title">Tip</div>
|
||
</td>
|
||
<td class="content">
|
||
Lorem ipsum dolor sit amet consectetur adipiscing elit varius cursus
|
||
orci nulla, fames nisl sodales scelerisque eu consequat sem imperdiet ac mi
|
||
vivamus tempor, accumsan ad justo odio viverra praesent senectus class egestas duis.
|
||
</td>
|
||
</tr>
|
||
</tbody></table>
|
||
</div>
|
||
<div class="paragraph">
|
||
<p>In case you want to style the labels differently such as assigning
|
||
appropriate colors or an icon to the rest of the labels,
|
||
here’s the rest of them:</p>
|
||
</div>
|
||
<div class="admonitionblock note">
|
||
<table>
|
||
<tbody><tr>
|
||
<td class="icon">
|
||
<div class="title">Note</div>
|
||
</td>
|
||
<td class="content">
|
||
Malesuada mattis aenean ultrices netus cursus viverra vivamus ultricies,
|
||
velit molestie penatibus phasellus in ante luctus, habitant suspendisse eros
|
||
turpis taciti risus himenaeos.
|
||
</td>
|
||
</tr>
|
||
</tbody></table>
|
||
</div>
|
||
<div class="admonitionblock important">
|
||
<table>
|
||
<tbody><tr>
|
||
<td class="icon">
|
||
<div class="title">Important</div>
|
||
</td>
|
||
<td class="content">
|
||
Velit fringilla feugiat nibh id faucibus scelerisque facilisis ac,
|
||
suscipit quisque odio libero ullamcorper curabitur fames nascetur, elementum
|
||
tristique hac nisl etiam dictumst dapibus.
|
||
</td>
|
||
</tr>
|
||
</tbody></table>
|
||
</div>
|
||
<div class="admonitionblock caution">
|
||
<table>
|
||
<tbody><tr>
|
||
<td class="icon">
|
||
<div class="title">Caution</div>
|
||
</td>
|
||
<td class="content">
|
||
Tempus dui aptent tempor torquent lacinia sem cursus porta cras semper
|
||
accumsan feugiat, himenaeos mi ullamcorper pharetra enim class eget auctor conubia
|
||
metus curabitur.
|
||
</td>
|
||
</tr>
|
||
</tbody></table>
|
||
</div>
|
||
<div class="admonitionblock warning">
|
||
<table>
|
||
<tbody><tr>
|
||
<td class="icon">
|
||
<div class="title">Warning</div>
|
||
</td>
|
||
<td class="content">
|
||
Aliquet ut maecenas mollis id enim nibh suscipit quisque posuere cum fusce,
|
||
dignissim ad curabitur odio ac diam pharetra platea vivamus eleifend.
|
||
</td>
|
||
</tr>
|
||
</tbody></table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sect1">
|
||
<h2 id="_callouts">Callouts</h2>
|
||
<div class="sectionbody">
|
||
<div class="paragraph">
|
||
<p>Callouts are used to add annotations within a verbatim block.
|
||
This is especially useful for code listings in order to effectively explain what
|
||
is going on within the code.</p>
|
||
</div>
|
||
<div class="paragraph">
|
||
<p>Here’s an example of using callouts.</p>
|
||
</div>
|
||
<div class="listingblock">
|
||
<div class="content">
|
||
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc">[source,python]
|
||
----
|
||
from pathlib import Path
|
||
from re import compile, match
|
||
|
||
current_directory = Path(&#34;.&#34;) &lt;1&gt;
|
||
notes_directory = current_directory / &#34;notes/&#34; &lt;2&gt;
|
||
----
|
||
&lt;1&gt; Created a Path object
|
||
&lt;2&gt; Appending a Path object with &#34;/&#34;</code></pre>
|
||
</div>
|
||
</div>
|
||
<div class="paragraph">
|
||
<p>And it’ll render as:</p>
|
||
</div>
|
||
<div class="listingblock">
|
||
<div class="content">
|
||
<pre class="highlight"><code class="language-python" data-lang="python">from pathlib import Path
|
||
from re import compile, match
|
||
|
||
current_directory = Path(&#34;.&#34;) # <b class="conum">(1)</b>
|
||
notes_directory = current_directory / &#34;notes/&#34; # <b class="conum">(2)</b></code></pre>
|
||
</div>
|
||
</div>
|
||
<div class="colist arabic">
|
||
<ol>
|
||
<li>
|
||
<p>Created a <code>Path</code> object</p>
|
||
</li>
|
||
<li>
|
||
<p>Appending a <code>Path</code> object with &#34;/&#34;</p>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
<div class="paragraph">
|
||
<p>One of the most important you should style is the callout number
|
||
on the code listings block.
|
||
Normally, when a user wants to copy-paste (even though I don’t personally
|
||
encourage it), the callout number gets in the way and they have to
|
||
manually remove them which can be annoying.</p>
|
||
</div>
|
||
<div class="paragraph">
|
||
<p>Either attach the property <code>user-select</code> with it or take a part from the
|
||
default Asciidoctor stylesheet and include it in your own stylesheet.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sect1">
|
||
<h2 id="_passthroughs">Passthroughs</h2>
|
||
<div class="sectionbody">
|
||
<div class="paragraph">
|
||
<p>A <a href="https://asciidoctor.org/docs/user-manual/#passthroughs">passthrough</a> passes the input as it is on the final output.
|
||
This is useful for web-based outputs, for example passing raw HTML for interactive scripts or to create a live result.</p>
|
||
</div>
|
||
<div class="paragraph">
|
||
<p>Below is a very simple example with a <a href="https://p5js.org/">p5.js</a> sketch.</p>
|
||
</div>
|
||
<div id="example-sketch"></div>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
|
||
<script>
|
||
const sketchuuuuu = ( sketch ) => {
|
||
let x = 100;
|
||
let y = 100;
|
||
|
||
sketch.setup = () => {
|
||
sketch.createCanvas(300, 380);
|
||
};
|
||
|
||
sketch.draw = () => {
|
||
sketch.background(0);
|
||
sketch.fill(255);
|
||
sketch.rect(x,y,50,50);
|
||
sketch.ellipse(sketch["mouseX"], sketch["mouseY"], 20);
|
||
};
|
||
};
|
||
|
||
let example_sketch = new p5(sketchuuuuu, "example-sketch")
|
||
</script>
|
||
<div class="paragraph">
|
||
<p>Here is the input from the source code of this document.</p>
|
||
</div>
|
||
<div class="listingblock">
|
||
<div class="content">
|
||
<pre class="highlight"><code class="language-asciidoctor" data-lang="asciidoctor">++++
|
||
&lt;div id=&#34;example-sketch&#34;&gt;&lt;/div&gt;
|
||
&lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js&#34;&gt;&lt;/script&gt;
|
||
&lt;script&gt;
|
||
const sketchuuuuu = ( sketch ) =&gt; {
|
||
let x = 100;
|
||
let y = 100;
|
||
|
||
sketch.setup = () =&gt; {
|
||
sketch.createCanvas(300, 380);
|
||
};
|
||
|
||
sketch.draw = () =&gt; {
|
||
sketch.background(0);
|
||
sketch.fill(255);
|
||
sketch.rect(x,y,50,50);
|
||
sketch.ellipse(sketch[&#34;mouseX&#34;], sketch[&#34;mouseY&#34;], 20);
|
||
};
|
||
};
|
||
|
||
let example_sketch = new p5(sketchuuuuu, &#34;example-sketch&#34;)
|
||
&lt;/script&gt;
|
||
++++</code></pre>
|
||
</div>
|
||
</div>
|
||
<div class="paragraph">
|
||
<p>This is the closest instance of <a href="https://en.wikipedia.org/wiki/Literate_programming">literate programming</a> in the web when using Asciidoctor.
|
||
(Sadly, not as flexible or cool as <a href="https://orgmode.org/">Org-Mode</a> or <a href="https://jupyter.org/">Jupyter Notebooks</a>.)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</content>
|
||
</entry></feed>
|