(build) - add images

content/articles/blog/neater-footnotes-in-hugo-using-the-details-html-tag.md

@@ -11,9 +11,28 @@ That is no more! I'm sick of doing it and I don't know how I just realised that
 
 The end result looks like this by default:
 
+{{% center %}}
+
+{{< img src=/img/neater-footnotes1.webp
+class=""
+alt="Here is what a collapsed details HTML tag looks like." 
+title="Here is what a collapsed details HTML tag looks like." 
+caption="Here is what a collapsed <details> HTML tag looks like.">}}
+
+{{% /center %}}
 
 And when it's clicked (or you click on a footnote in the article itself):
 
+{{% center %}}
+
+{{< img src=/img/neater-footnotes2.webp
+class=""
+alt="Here is what an expanded details HTML tag looks like." 
+title="Here is what an expanded details HTML tag looks like." 
+caption="Here is what an expanded <details> HTML tag looks like.">}}
+
+{{% /center %}}
+
 The coolest thing is that it automatically expands itself!
 
 Add this to the bottom of your markdown files and don't close the `<details>` tag:

public/articles/blog/neater-footnotes-in-hugo-using-the-details-html-tag/index.html

@@ -24,11 +24,17 @@ That is no more! I’m sick of doing it and I don’t know how I just re
 
 </div>  
 
-<small><em><p style="color: var(--muted_text);">作成日: <time datetime="2024-08-31T16:12:49&#43;03:00" style="color: var(--muted_text);">2024年8月31日 (土)</time>, 最終更新日: <time datetime="2024-08-31T16:38:01&#43;03:00" style="color: var(--muted_text);">2024年8月31日 (土)</time>  </p></em></small>
+<small><em><p style="color: var(--muted_text);">作成日: <time datetime="2024-08-31T16:12:49&#43;03:00" style="color: var(--muted_text);">2024年8月31日 (土)</time>, 最終更新日: <time datetime="2024-08-31T17:06:20&#43;03:00" style="color: var(--muted_text);">2024年8月31日 (土)</time>  </p></em></small>
 <div class="post-content"><p>Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (<em>it renders the markdown file?</em>) does so whenever I&rsquo;ve had to manually enclose the footnotes with <code>&lt;details&gt;</code> in the generated html file.</p>
 <p>That is no more! I&rsquo;m sick of doing it and I don&rsquo;t know how I just realised that I can just use HTML tags in markdown itself&hellip; I&rsquo;ve literally done that dozens of times already&hellip;</p>
 <p>The end result looks like this by default:</p>
+<div style="text-align: center;">
+<figure ><img src="/img/neater-footnotes1.webp" title="Here is what a collapsed details HTML tag looks like." alt="Here is what a collapsed details HTML tag looks like."><figcaption>Here is what a collapsed &lt;details&gt; HTML tag looks like.</figcaption></figure>
+</div>
 <p>And when it&rsquo;s clicked (or you click on a footnote in the article itself):</p>
+<div style="text-align: center;">
+<figure ><img src="/img/neater-footnotes2.webp" title="Here is what an expanded details HTML tag looks like." alt="Here is what an expanded details HTML tag looks like."><figcaption>Here is what an expanded &lt;details&gt; HTML tag looks like.</figcaption></figure>
+</div>
 <p>The coolest thing is that it automatically expands itself!</p>
 <p>Add this to the bottom of your markdown files and don&rsquo;t close the <code>&lt;details&gt;</code> tag:</p>
 

public/articles/index.xml

@@ -18,7 +18,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 

public/index.xml

@@ -18,7 +18,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 

public/library/hackbook/index.xml

@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 

public/library/index.xml

@@ -18,7 +18,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 

public/library/ted-kaczynski/index.xml

@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 

public/sitemap.xml

@@ -3,10 +3,10 @@
   xmlns:xhtml="http://www.w3.org/1999/xhtml">
   <url>
     <loc>https://vodoraslo.xyz/articles/blog/neater-footnotes-in-hugo-using-the-details-html-tag/</loc>
-    <lastmod>2024-08-31T16:38:01+03:00</lastmod>
+    <lastmod>2024-08-31T17:06:20+03:00</lastmod>
   </url><url>
     <loc>https://vodoraslo.xyz/tags/</loc>
-    <lastmod>2024-08-31T16:38:01+03:00</lastmod>
+    <lastmod>2024-08-31T17:06:20+03:00</lastmod>
   </url><url>
     <loc>https://vodoraslo.xyz/articles/blog/hugo-drafts-showing-in-production/</loc>
     <lastmod>2024-08-31T16:38:01+03:00</lastmod>

public/tags/blog/index.xml

@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 

public/tags/hackbook/index.xml

@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 

public/tags/index.xml

@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 

public/tags/library/index.xml

@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 

public/tags/personal/index.xml

@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 

public/tags/ted-kaczynski/index.xml

@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 

public/tags/updates/index.xml

@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;