diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html
new file mode 100644
index 00000000..244ab0aa
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock.html
@@ -0,0 +1,22 @@
+{{ if transform.CanHighlight .Type }}
+ {{/* Supported Chroma Language*/}}
+
+
+ {{ with .Attributes.title }}
+
{{ . }}
+ {{ end }}
+
+ {{- with transform.HighlightCodeBlock . -}}
+ {{ .Inner }}
+ {{- end -}}
+
+
+{{ else }}
+ {{/* Unsupported Language */}}
+
+ {{ with .Attributes.title }}
+
{{ . }}
+ {{ end }}
+
{{ .Inner }}
+
+{{ end }}
\ No newline at end of file
diff --git a/public/articles/blog/how-i-fixed-my-synapse-matrix-federation/index.html b/public/articles/blog/how-i-fixed-my-synapse-matrix-federation/index.html
index 0fdb1fc1..0ca6ea0a 100644
--- a/public/articles/blog/how-i-fixed-my-synapse-matrix-federation/index.html
+++ b/public/articles/blog/how-i-fixed-my-synapse-matrix-federation/index.html
@@ -1,54 +1,65 @@
-
-
-
- How I Fixed My Synapse's Matrix Federation | vodoraslo
-
-
-
-
+
+
+
+ How I Fixed My Synapse's Matrix Federation | vodoraslo
+
+
+
+
-
-
-
-
-
-
-
-
How I Fixed My Synapse's Matrix Federation
-
-
-
-
-
-
-
+nano /etc/matrix-synapse/homeserver.yaml
and go all the way to the bottom or search for trusted_key_servers. it’s probably going to be matrix."/>
+
+
+
+
+
+
+
+
I for the life of me couldn’t get synapse’s (matrix’s) federation to work. It said that the encryption couldn’t be trusted, i could join public rooms but i couldn’t start any chats, i couldn’t invite people to my rooms, i couldn’t get invited to rooms.
and go all the way to the bottom or search for trusted_key_servers. it’s probably going to be matrix.org. You should change it to the following by removing matrix.org and leave blank square brackets:
and go all the way to the bottom or search for trusted_key_servers. it’s probably going to be matrix.org. You should change it to the following by removing matrix.org and leave blank square brackets:
Add or change the meta description line with the following
-
<metaname="description"content="{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}"/>
-
And now if you start your Hugo server locally with hugo serve --noHTTPCache and you right click on your page -> View Page Source -> Search for the meta description tag. It should match what you left in the config file.
+
+
+
+
+
+
<metaname="description"content="{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}"/>
+
+
And now if you start your Hugo server locally with hugo serve --noHTTPCache and you right click on your page -> View Page Source -> Search for the meta description tag. It should match what you left in the config file.
Replacing the global description with a custom one#
Have a markdown file ready
In the preamble, add
-
---
+
+
+
+
+
+
---description: "Your custom description for this page"
----
-
Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!
+---
+
+
Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!
diff --git a/public/articles/blog/multiple-index-pages-in-hugo/index.html b/public/articles/blog/multiple-index-pages-in-hugo/index.html
index ed104db5..ad35d0f0 100644
--- a/public/articles/blog/multiple-index-pages-in-hugo/index.html
+++ b/public/articles/blog/multiple-index-pages-in-hugo/index.html
@@ -4,7 +4,7 @@
Multiple Index Pages in Hugo | vodoraslo
-
+
I wanted to order Hackbook in reverse (i.e. oldest to newest) so that it’s easier for the reader to start at the correct page.
I ran into the following problem - the default list.html does them from newest to oldest.
So I found this forum post and I created a file in the _default directory as follows:
I named my file order by oldest because I plan on reusing it in other places. This is what’s contained inside it:
-
{{ define "title" -}}
+
+
+
+
+
{{ define "title" -}}
{{ .Title | title }}
{{- end }}
{{ define "main" -}}
@@ -62,8 +71,9 @@ layouts
|----**_default**
|-------**hackbook**
|-----------**order-by-oldest."/>
</li>
{{- end }}
</ul>
-{{- end }}
-
If you want to display the date on the left of the titles, you have to add datesinlist=true in your config.toml or datesinlist: true in your config.yaml
+{{- end }}
+
+
If you want to display the date on the left of the titles, you have to add datesinlist=true in your config.toml or datesinlist: true in your config.yaml
You probably don’t need enableGitInfo = true as that will crash your website, I have no idea what it does, you don’t need it.
+
+
+
+
+
+
+
diff --git a/public/articles/blog/recover-lost-anki-streak/index.html b/public/articles/blog/recover-lost-anki-streak/index.html
index 969cb4e7..62f37b51 100644
--- a/public/articles/blog/recover-lost-anki-streak/index.html
+++ b/public/articles/blog/recover-lost-anki-streak/index.html
@@ -4,7 +4,7 @@
Recover Lost Anki Streak | vodoraslo
-
+
-
+
diff --git a/public/articles/index.xml b/public/articles/index.xml
index 596e3a95..d4767c6b 100644
--- a/public/articles/index.xml
+++ b/public/articles/index.xml
@@ -35,10 +35,21 @@
<p>I for the life of me couldn’t get synapse’s (matrix’s) federation to work. It said that the encryption couldn’t be trusted, i could join public rooms but i couldn’t start any chats, i couldn’t invite people to my rooms, i couldn’t get invited to rooms.</p>
<h2 id="how-i-fixed-it">How I fixed it</h2>
<p>Go to your <code>homeserver.yaml</code> file</p>
-<div class="highlight"><pre tabindex="0" style="color:#b0c4de;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>nano /etc/matrix-synapse/homeserver.yaml
-</span></span></code></pre></div><p>and go all the way to the bottom or search for <code>trusted_key_servers</code>. it’s probably going to be <code>matrix.org</code>. You should change it to the following by removing <code>matrix.org</code> and leave blank square brackets:</p>
-<pre tabindex="0"><code>trusted_key_servers: []
-</code></pre>
+
+
+
+ <div class="highlight">
+
+ <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>nano /etc/matrix-synapse/homeserver.yaml</span></span></code></pre></div>
+
+<p>and go all the way to the bottom or search for <code>trusted_key_servers</code>. it’s probably going to be <code>matrix.org</code>. You should change it to the following by removing <code>matrix.org</code> and leave blank square brackets:</p>
+
+
+ <div class="highlight">
+
+ <pre tabindex="0"><code class="language-" data-lang="">trusted_key_servers: []</code></pre>
+ </div>
+
@@ -609,28 +620,46 @@ Like Kurzweil, many techies stand to profit financially from Technianity, but it
<p>I actually updated the css once more.</p>
<p>If you’re using a dark theme in your browser, the website will follow suit and change to darker colors.</p>
<p>I did this by setting the light theme to be by default for more readability:</p>
-<div class="highlight"><pre tabindex="0" style="color:#b0c4de;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>:<span style="color:#e5c07b">root</span> {
+
+
+
+ <div class="highlight">
+
+ <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span style="display:flex;"><span>:<span style="color:#e5c07b">root</span> {
</span></span><span style="display:flex;"><span> <span style="color:#dcaeea">--bg</span>: <span style="color:#d19a66">#fafafa</span>;
</span></span><span style="display:flex;"><span> <span style="color:#dcaeea">--fg</span>: <span style="color:#d19a66">#2f343f</span>;
</span></span><span style="display:flex;"><span> <span style="color:#dcaeea">--links</span>: <span style="color:#d19a66">#4084d6</span>;
</span></span><span style="display:flex;"><span> <span style="color:#dcaeea">--muted_text</span>: <span style="color:#ef8383">rgb</span>(<span style="color:#d19a66">93</span>, <span style="color:#d19a66">93</span>, <span style="color:#d19a66">99</span>);
-</span></span><span style="display:flex;"><span>}
-</span></span></code></pre></div><p>and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn’t know this stuff existed, thought webshits just use java script for everything, but I guess I’m wrong.</p>
-<div class="highlight"><pre tabindex="0" style="color:#b0c4de;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>@<span style="color:#c678dd">media</span> <span style="color:#c7bf54">(</span><span style="color:#e06c75">prefers-color-scheme</span><span style="color:#c7bf54">:</span> <span style="color:#e06c75">dark</span><span style="color:#c7bf54">)</span> {
+</span></span><span style="display:flex;"><span>}</span></span></code></pre></div>
+
+<p>and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn’t know this stuff existed, thought webshits just use java script for everything, but I guess I’m wrong.</p>
+
+
+
+ <div class="highlight">
+
+ <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span style="display:flex;"><span>@<span style="color:#c678dd">media</span> <span style="color:#c7bf54">(</span><span style="color:#e06c75">prefers-color-scheme</span><span style="color:#c7bf54">:</span> <span style="color:#e06c75">dark</span><span style="color:#c7bf54">)</span> {
</span></span><span style="display:flex;"><span> :<span style="color:#e5c07b">root</span> {
</span></span><span style="display:flex;"><span> <span style="color:#dcaeea">--bg</span>: <span style="color:#d19a66">#141414</span>;
</span></span><span style="display:flex;"><span> <span style="color:#dcaeea">--fg</span>: <span style="color:#ef8383">rgb</span>(<span style="color:#d19a66">232</span>, <span style="color:#d19a66">228</span>, <span style="color:#d19a66">228</span>);
</span></span><span style="display:flex;"><span> <span style="color:#dcaeea">--links</span>: <span style="color:#d19a66">#5da0f2</span>;
</span></span><span style="display:flex;"><span> <span style="color:#dcaeea">--muted_text</span>: <span style="color:#ef8383">rgb</span>(<span style="color:#d19a66">179</span>, <span style="color:#d19a66">182</span>, <span style="color:#d19a66">186</span>);
</span></span><span style="display:flex;"><span> }
-</span></span><span style="display:flex;"><span>}
-</span></span></code></pre></div><p>And this is how CSS variables are used:</p>
-<div class="highlight"><pre tabindex="0" style="color:#b0c4de;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#e06c75">body</span> {
+</span></span><span style="display:flex;"><span>}</span></span></code></pre></div>
+
+<p>And this is how CSS variables are used:</p>
+
+
+
+ <div class="highlight">
+
+ <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#e06c75">body</span> {
</span></span><span style="display:flex;"><span> <span style="color:#c678dd">font-family</span>: <span style="color:#b756ff;font-weight:bold">sans-serif</span>;
</span></span><span style="display:flex;"><span> <span style="color:#c678dd">background</span>: <span style="color:#00b1f7">var</span>(<span style="color:#c7bf54">--</span><span style="color:#c1abea">bg</span>);
</span></span><span style="display:flex;"><span> <span style="color:#c678dd">color</span>: <span style="color:#00b1f7">var</span>(<span style="color:#c7bf54">--</span><span style="color:#c1abea">fg</span>);
-</span></span><span style="display:flex;"><span>}
-</span></span></code></pre></div>
+</span></span><span style="display:flex;"><span>}</span></span></code></pre></div>
+
+
@@ -3030,28 +3059,52 @@ List of Works Cited</p>
<li>Add the following line inside it</li>
</ol>
<p>For config.toml</p>
-<div class="highlight"><pre tabindex="0" style="color:#b0c4de;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-toml" data-lang="toml"><span style="display:flex;"><span>[<span style="color:#c1abea">params</span>]
-</span></span><span style="display:flex;"><span> <span style="color:#c1abea">description</span> = <span style="color:#63c381">"The global meta description of your website"</span>
-</span></span></code></pre></div><p>For config.yaml</p>
-<div class="highlight"><pre tabindex="0" style="color:#b0c4de;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#e06c75">params</span>:
-</span></span><span style="display:flex;"><span> <span style="color:#e06c75">description</span>: <span style="color:#98c379">The global meta description of your website</span>
-</span></span></code></pre></div><p>It won’t work just yet because you have to update the <code>baseof.html</code> file.</p>
+
+
+
+ <div class="highlight">
+
+ <pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span style="display:flex;"><span>[<span style="color:#c1abea">params</span>]
+</span></span><span style="display:flex;"><span> <span style="color:#c1abea">description</span> = <span style="color:#63c381">"The global meta description of your website"</span></span></span></code></pre></div>
+
+<p>For config.yaml</p>
+
+
+
+ <div class="highlight">
+
+ <pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#e06c75">params</span>:
+</span></span><span style="display:flex;"><span> <span style="color:#e06c75">description</span>: <span style="color:#98c379">The global meta description of your website</span></span></span></code></pre></div>
+
+<p>It won’t work just yet because you have to update the <code>baseof.html</code> file.</p>
<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file</h3>
<ol>
<li>Locate baseof.html</li>
<li>Add or change the meta description line with the following</li>
</ol>
-<div class="highlight"><pre tabindex="0" style="color:#b0c4de;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#e06c75">meta</span> <span style="color:#b3d23c">name</span><span style="color:#c7bf54">=</span><span style="color:#98c379">"description"</span> <span style="color:#b3d23c">content</span><span style="color:#c7bf54">=</span><span style="color:#98c379">"{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}"</span>/>
-</span></span></code></pre></div><p>And now if you start your Hugo server locally with <code>hugo serve --noHTTPCache</code> and you right click on your page -> View Page Source -> Search for the meta description tag. It should match what you left in the config file.</p>
+
+
+
+ <div class="highlight">
+
+ <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#e06c75">meta</span> <span style="color:#b3d23c">name</span><span style="color:#c7bf54">=</span><span style="color:#98c379">"description"</span> <span style="color:#b3d23c">content</span><span style="color:#c7bf54">=</span><span style="color:#98c379">"{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}"</span>/></span></span></code></pre></div>
+
+<p>And now if you start your Hugo server locally with <code>hugo serve --noHTTPCache</code> and you right click on your page -> View Page Source -> Search for the meta description tag. It should match what you left in the config file.</p>
<h3 id="replacing-the-global-description-with-a-custom-one">Replacing the global description with a custom one</h3>
<ol>
<li>Have a markdown file ready</li>
<li>In the preamble, add</li>
</ol>
-<div class="highlight"><pre tabindex="0" style="color:#b0c4de;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#76a9f9">---</span>
+
+
+
+ <div class="highlight">
+
+ <pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#76a9f9">---</span>
</span></span><span style="display:flex;"><span><span style="color:#e06c75">description</span>: <span style="color:#63c381">"Your custom description for this page"</span>
-</span></span><span style="display:flex;"><span><span style="color:#76a9f9">---</span>
-</span></span></code></pre></div><p>Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!</p>
+</span></span><span style="display:flex;"><span><span style="color:#76a9f9">---</span></span></span></code></pre></div>
+
+<p>Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!</p>
@@ -3065,19 +3118,28 @@ List of Works Cited</p>
<p>I wanted to order <a href="https://vodoraslo.xyz/library/hackbook">Hackbook</a> in reverse (i.e. oldest to newest) so that it’s easier for the reader to start at the correct page.</p>
<p>I ran into the following problem - the default <code>list.html</code> does them from newest to oldest.</p>
<p>So I found <a href="https://discourse.gohugo.io/t/two-home-pages/31312/9">this forum post</a> and I created a file in the <code>_default</code> directory as follows:</p>
-<pre tabindex="0"><code>layouts
+
+
+ <div class="highlight">
+
+ <pre tabindex="0"><code class="language-" data-lang="">layouts
|----**_default**
|-------**hackbook**
|-----------**order-by-oldest.html**
|-------baseof.html
|-------index.html
|-------list.html
-|-------single.html
-</code></pre>
+|-------single.html </code></pre>
+ </div>
+
<figure ><img src="https://vodoraslo.xyz/img/custom-index-directory.PNG" alt="Picture of the directory"></figure>
<p>I named my file order by oldest because I plan on reusing it in other places. This is what’s contained inside it:</p>
-<pre tabindex="0"><code>{{ define "title" -}}
+
+
+ <div class="highlight">
+
+ <pre tabindex="0"><code class="language-" data-lang="">{{ define "title" -}}
{{ .Title | title }}
{{- end }}
{{ define "main" -}}
@@ -3093,8 +3155,9 @@ List of Works Cited</p>
</li>
{{- end }}
</ul>
-{{- end }}
-</code></pre><p>If you want to display the date on the left of the titles, you have to add <code>datesinlist=true</code> in your config.toml or <code>datesinlist: true</code> in your config.yaml</p>
+{{- end }}</code></pre>
+ </div>
+<p>If you want to display the date on the left of the titles, you have to add <code>datesinlist=true</code> in your config.toml or <code>datesinlist: true</code> in your config.yaml</p>
<p>You probably don’t need <code>enableGitInfo = true</code> as that will crash your website, I have no idea what it does, you don’t need it.</p>
<h2 id="using-your-custom-_indexhtml">Using your custom _index.html</h2>
<p>After creating your custom _index.html you’d use it as follows:</p>
@@ -3107,7 +3170,11 @@ List of Works Cited</p>
<p>And now you should have a custom _index.html for your pages! :)</p>
<p>Here is a verbose copy paste of the original hugo forum answer in case it gets deleted:</p>
-<pre tabindex="0"><code>Content structure:
+
+
+ <div class="highlight">
+
+ <pre tabindex="0"><code class="language-" data-lang="">Content structure:
content
├── better
@@ -3120,13 +3187,13 @@ content
content/better/_index.md
-+++
++++
title = "Better"
date = 2021-03-04T17:02:42-08:00
draft = false
type = "post"
layout = "posts-by-lastmod"
-+++
++++
Template structure:
@@ -3159,8 +3226,9 @@ layouts/index.html
config.toml (see https://gohugo.io/variables/git/#lastmod)
-enableGitInfo = true
-</code></pre>
+enableGitInfo = true</code></pre>
+ </div>
+
@@ -5162,8 +5230,14 @@ formed does not list Internet pornography as one of the addictions that it provi
<h3 id="this-is-my-first-entry-and-im-already-having-issues-lol">this is my first entry and i’m already having issues lol</h3>
<p>So I wanted to make a quick entry, see how it looks like and I stumbled upon this issue of hugo pluralzing Blog into Blogs</p>
<p>You can fix this in config.toml with the following line</p>
-<div class="highlight"><pre tabindex="0" style="color:#b0c4de;background-color:#282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-toml" data-lang="toml"><span style="display:flex;"><span><span style="color:#c1abea">pluralizelisttitles</span> = <span style="color:#b756ff;font-weight:bold">false</span>
-</span></span></code></pre></div>
+
+
+
+ <div class="highlight">
+
+ <pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span style="display:flex;"><span><span style="color:#c1abea">pluralizelisttitles</span> = <span style="color:#b756ff;font-weight:bold">false</span></span></span></code></pre></div>
+
+
diff --git a/public/articles/updates/helloworld/index.html b/public/articles/updates/helloworld/index.html
index 1d7a4e0d..701c259d 100644
--- a/public/articles/updates/helloworld/index.html
+++ b/public/articles/updates/helloworld/index.html
@@ -4,7 +4,7 @@
Hello World / About Me | vodoraslo
-
+
-
- Updated the Css Again (Prefers-Color-Scheme) | vodoraslo
-
-
-
-
+
+
+
+ Updated the Css Again (Prefers-Color-Scheme) | vodoraslo
+
+
+
+
-
-
-
-
-
-
-
-
Updated the Css Again (prefers-color-scheme)
-
-
-
-
-
-
-
+:root { --bg: #fafafa; --fg: #2f343f; --links: #4084d6; --muted_text: rgb(93, 93, 99); }
and then this checks that if the user prefers a darker theme, they shall get a dark theme."/>
+
+
+
+
+
+
+
+
Updated the Css Again (prefers-color-scheme)
+
+
+
+
+
+
+
I actually updated the css once more.
If you’re using a dark theme in your browser, the website will follow suit and change to darker colors.
I did this by setting the light theme to be by default for more readability:
and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn’t know this stuff existed, thought webshits just use java script for everything, but I guess I’m wrong.
-
@media(prefers-color-scheme:dark) {
+}
+
+
and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn’t know this stuff existed, thought webshits just use java script for everything, but I guess I’m wrong.
