Add script to update TOC links

With commit 50b72b5787338ee3c0ef0a4aebfcdf8acf3c3a08 in ezcms, the default behavior for links changes to open in a new tab. This script helps override the option for table of content links by updating "target" to point to "_self"
author: mjfernez <mjf@mjfer.net> 2023-07-14 13:21:13 -0400
committer: mjfernez <mjf@mjfer.net> 2023-07-14 13:21:13 -0400
commit: 002118777ddf2f81d2894d81bc7fadc64dbbc36f (patch)
tree: e7552ee092e4f4601c96d3a1c97de5f066b637ec
parent: d96c7cad92b025ad80a8fe64f91d1c215272e313 (diff)
download: site-files-002118777ddf2f81d2894d81bc7fadc64dbbc36f.tar.gz
16 files changed, 323 insertions, 368 deletions
diff --git a/about/faq.html b/about/faq.html
index 994d8a8..9db881f 100644
--- a/about/faq.html
+++ b/about/faq.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <meta charset="utf-8" />
-  <meta name="generator" content="pandoc" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-  <title>faq</title>
-  <style>
+<meta charset="utf-8"/>
+<meta content="pandoc" name="generator"/>
+<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
+<title>faq</title>
+<style>
     html {
       line-height: 1.5;
       font-family: Georgia, serif;
@@ -159,28 +159,25 @@
 <nav id="TOC" role="doc-toc">
 <h2 id="toc-title">Contents</h2>
 <ul>
-<li><a href="#frequently-anticipated-questions">Frequently Anticipated
+<li><a href="#frequently-anticipated-questions" target="_self">Frequently Anticipated
 Questions</a>
 <ul>
-<li><a href="#questions-noone-asked-but-could-maybe">Questions noone
+<li><a href="#questions-noone-asked-but-could-maybe" target="_self">Questions noone
 asked, but could maybe</a>
 <ul>
-<li><a
-href="#why-bother-running-a-tor-hidden-service-if-youre-gonna-put-your-full-name-on-it"><em>Why
+<li><a href="#why-bother-running-a-tor-hidden-service-if-youre-gonna-put-your-full-name-on-it" target="_self"><em>Why
 bother running a Tor hidden service if you're gonna put your full name
 on it?</em></a></li>
-<li><a href="#how-come-i-cant-access-your-main-domain"><em>How come I
+<li><a href="#how-come-i-cant-access-your-main-domain" target="_self"><em>How come I
 can't access your main domain?</em></a></li>
-<li><a href="#you-wrote-all-this-in-vim-why-tho"><em>You wrote all this
+<li><a href="#you-wrote-all-this-in-vim-why-tho" target="_self"><em>You wrote all this
 in vim? Why tho?</em></a></li>
-<li><a href="#why-openbsd"><em>Why OpenBSD?</em></a></li>
-<li><a
-href="#why-bother-making-your-site-from-scratch-it-looks-like-crap"><em>Why
+<li><a href="#why-openbsd" target="_self"><em>Why OpenBSD?</em></a></li>
+<li><a href="#why-bother-making-your-site-from-scratch-it-looks-like-crap" target="_self"><em>Why
 bother making your site from scratch? It looks like crap</em></a></li>
-<li><a href="#why-does-your-rss-feed-update-me-on-old-stuff"><em>Why
+<li><a href="#why-does-your-rss-feed-update-me-on-old-stuff" target="_self"><em>Why
 does your RSS feed update me on old stuff?</em></a></li>
-<li><a
-href="#why-is-this-site-public-domain-what-does-that-mean"><em>Why is
+<li><a href="#why-is-this-site-public-domain-what-does-that-mean" target="_self"><em>Why is
 this site public domain? What does that mean?</em></a></li>
 </ul></li>
 </ul></li>
@@ -190,8 +187,7 @@ this site public domain? What does that mean?</em></a></li>
 Questions</h1>
 <h2 id="questions-noone-asked-but-could-maybe">Questions noone asked,
 but could maybe</h2>
-<h3
-id="why-bother-running-a-tor-hidden-service-if-youre-gonna-put-your-full-name-on-it"><em>Why
+<h3 id="why-bother-running-a-tor-hidden-service-if-youre-gonna-put-your-full-name-on-it"><em>Why
 bother running a Tor hidden service if you're gonna put your full name
 on it?</em></h3>
 <p>One, because I think hidden services are neat and I thought it'd be
@@ -224,7 +220,7 @@ terminal lately that I'm used to it.</p>
 <h3 id="why-openbsd"><em>Why OpenBSD?</em></h3>
 <p>Honestly, I though the fish was cool.</p>
 <figure>
-<img src="/static/puffy.gif" alt="puffy" />
+<img alt="puffy" src="/static/puffy.gif"/>
 <figcaption aria-hidden="true">puffy</figcaption>
 </figure>
 <p>I don't know the artist of that one unfortunately, I just found it on
@@ -234,8 +230,7 @@ something different? It's pretty cool as a server OS. Just a lot of
 homework. I'm sure it's good as a desktop/laptop one too, but it's not
 different enough for me to move all my data.</p>
 <p>For what it's worth, I use Debian sid for a daily driver.</p>
-<h3
-id="why-bother-making-your-site-from-scratch-it-looks-like-crap"><em>Why
+<h3 id="why-bother-making-your-site-from-scratch-it-looks-like-crap"><em>Why
 bother making your site from scratch? It looks like crap</em></h3>
 <p>Eh. I feel like if what I say isn't interesting, prettying it up
 won't help keep attention that much. I like simple sites like this one.
@@ -282,3 +277,4 @@ copyright; I tend to link stuff that is generally pretty free to use,
 though.</p>
 </body>
 </html>
+
diff --git a/about/howami.html b/about/howami.html
index 1ae967f..a85ff7c 100644
--- a/about/howami.html
+++ b/about/howami.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <meta charset="utf-8" />
-  <meta name="generator" content="pandoc" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-  <title>howami</title>
-  <style>
+<meta charset="utf-8"/>
+<meta content="pandoc" name="generator"/>
+<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
+<title>howami</title>
+<style>
     html {
       line-height: 1.5;
       font-family: Georgia, serif;
@@ -159,3 +159,4 @@
 <p>Doing all right, thanks for asking.</p>
 </body>
 </html>
+
diff --git a/about/whatami.html b/about/whatami.html
index 30002bf..b9ee866 100644
--- a/about/whatami.html
+++ b/about/whatami.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <meta charset="utf-8" />
-  <meta name="generator" content="pandoc" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-  <title>whatami</title>
-  <style>
+<meta charset="utf-8"/>
+<meta content="pandoc" name="generator"/>
+<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
+<title>whatami</title>
+<style>
     html {
       line-height: 1.5;
       font-family: Georgia, serif;
@@ -158,10 +158,10 @@
 <body>
 <p>In case of alien transmission...</p>
 <p>It should be noted for the record I'm a human (<em>homo sapiens
-sapiens</em>), which by <a
-href="https://en.wikipedia.org/wiki/Body_water">most estimates</a> puts
+sapiens</em>), which by <a href="https://en.wikipedia.org/wiki/Body_water">most estimates</a> puts
 me firmly in the category of <em>water-like object</em> at ~60% of my
 total body mass, with the remaining matter compromised of various
 arrangements of carbon, oxygen, and potato chips.</p>
 </body>
 </html>
+
diff --git a/about/whereami.html b/about/whereami.html
index 2ea1558..c22319b 100644
--- a/about/whereami.html
+++ b/about/whereami.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <meta charset="utf-8" />
-  <meta name="generator" content="pandoc" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-  <title>whereami</title>
-  <style>
+<meta charset="utf-8"/>
+<meta content="pandoc" name="generator"/>
+<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
+<title>whereami</title>
+<style>
     html {
       line-height: 1.5;
       font-family: Georgia, serif;
@@ -169,8 +169,7 @@ credit cards, golf, and girls' basketball.</p>
 <p>Since you are on this page, you're presumably lost. That's
 <em>ok</em>. I don't really get all this stuff either. Let's start with
 some easy stuff.</p>
-<p><em>You're on the Internet</em>. Known to some as a <a
-href="https://en.wikipedia.org/wiki/Series_of_tubes">series of
+<p><em>You're on the Internet</em>. Known to some as a <a href="https://en.wikipedia.org/wiki/Series_of_tubes">series of
 tubes</a>, but in reality much more complicated than it has to be. In
 basic sense, your computer called mine, and mine answered with directory
 full of pages.</p>
@@ -179,9 +178,8 @@ router, which literally does what the name implies--it routes signals to
 where they need to go to make things go beep. In the 60s and 70s,
 routers tended to be people-based and would spend their time plugging
 cables into and out of ports so calls could connect.</p>
-<p><img src="/static/human_router.jpg" /></p>
-<p><em>Image of a switchboard courtesy of <a
-href="https://en.wikipedia.org/wiki/File:Jersey_Telecom_switchboard_and_operator.jpg">Wikipedia
+<p><img src="/static/human_router.jpg"/></p>
+<p><em>Image of a switchboard courtesy of <a href="https://en.wikipedia.org/wiki/File:Jersey_Telecom_switchboard_and_operator.jpg">Wikipedia
 contributors</a></em></p>
 <p>Fortunately, we figured out that was dumb and made robots do the job
 for us. Internet companies, governments, and anyone else with enough
@@ -220,8 +218,7 @@ or were just starting to be at least.</p>
 social media; we somehow got coerced into profiles, templates, and
 standards to make us easier for ad companies to study. It's not even
 unreasonable to believe you're not even talking to real people on there,
-because there's a good chance of it now. <a
-href="https://en.wikipedia.org/wiki/Astroturfing">Astroturfing</a> is
+because there's a good chance of it now. <a href="https://en.wikipedia.org/wiki/Astroturfing">Astroturfing</a> is
 not a secret government conspiracy, it's just business as usual at this
 point. You used to be able to tell a human from a chatbot from the way
 they write. I don't know if the bots at this point are smarter, or if
@@ -241,3 +238,4 @@ you wouldn't like this page... you did read all the way here through all
 that pedantry didn't you?</p>
 </body>
 </html>
+
diff --git a/about/whoami.html b/about/whoami.html
index 8e0ac63..5962a4a 100644
--- a/about/whoami.html
+++ b/about/whoami.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <meta charset="utf-8" />
-  <meta name="generator" content="pandoc" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-  <title>whoami</title>
-  <style>
+<meta charset="utf-8"/>
+<meta content="pandoc" name="generator"/>
+<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
+<title>whoami</title>
+<style>
     html {
       line-height: 1.5;
       font-family: Georgia, serif;
@@ -201,3 +201,4 @@ it's own value, but it's separate.</p></li>
 <p>Here is as close to home as I'll get for now.</p>
 </body>
 </html>
+
diff --git a/about/whyami.html b/about/whyami.html
index 954b926..601b77f 100644
--- a/about/whyami.html
+++ b/about/whyami.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <meta charset="utf-8" />
-  <meta name="generator" content="pandoc" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-  <title>whyami</title>
-  <style>
+<meta charset="utf-8"/>
+<meta content="pandoc" name="generator"/>
+<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
+<title>whyami</title>
+<style>
     html {
       line-height: 1.5;
       font-family: Georgia, serif;
@@ -163,3 +163,4 @@ different.</p>
 </center>
 </body>
 </html>
+
diff --git a/panupdate b/panupdate
index d751040..26063c0 100755
--- a/panupdate
+++ b/panupdate
@@ -11,6 +11,7 @@ do
             pandoc -s --toc --toc-depth=6 \
                  --ascii -V toc-title:"Contents" \
                 -f markdown-smart $file -t html -o $newfile
+            python update_targets.py $newfile
         fi
         if [[ "$file" == *.description ]]
         then
diff --git a/thoughts/syntax/my-worst-habit.html b/thoughts/syntax/my-worst-habit.html
index 65f19d8..e7fa960 100644
--- a/thoughts/syntax/my-worst-habit.html
+++ b/thoughts/syntax/my-worst-habit.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <meta charset="utf-8" />
-  <meta name="generator" content="pandoc" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-  <title>my-worst-habit</title>
-  <style>
+<meta charset="utf-8"/>
+<meta content="pandoc" name="generator"/>
+<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
+<title>my-worst-habit</title>
+<style>
     html {
       line-height: 1.5;
       font-family: Georgia, serif;
@@ -181,18 +181,18 @@ through Klim -- a horrible form of powdered milk tasting like rancid
 chalk -- and pick up on the results. They hock everything to pay the
 gas bill, and when the man comes around to shut it off for the
 non-payment, you can hear their screams for miles. When a citizen is
-sick from needing it he says &quot;I got the klinks&quot; or &quot;That old stove
-climbing up my back.&quot;
+sick from needing it he says "I got the klinks" or "That old stove
+climbing up my back."
 
-Nutmeg. I quote from the author&#39;s article on narcotic drugs in the
-British Journal of Addiction (see Appendix): &quot;Convicts and sailors
+Nutmeg. I quote from the author's article on narcotic drugs in the
+British Journal of Addiction (see Appendix): "Convicts and sailors
 sometimes have recourse to nutmeg. About a tablespoon is swallowed
 with water. Result vaguely similar to marijuana with side effects of
 headache and nausea. There are a number of narcotics of the nutmeg
 family in use among the Indians of South America. They are usually
 administered by sniffing a dried powder of the plant. The medicine
 men take these noxious substances and go into convulsive states. Their
-twitchings and mutterings are thought to have prophetic significance.&quot;)</code></pre>
+twitchings and mutterings are thought to have prophetic significance.")</code></pre>
 <p>This is the only example I know that dares to put parentheses
 <em>and</em> a long quote within parentheses, unless we're counting math
 textbooks. In a way it works, since if information is ever
@@ -203,7 +203,7 @@ the reader to scroll down in the hopes that the story continues.</p>
 <p>But just in case you think I'm just picking on William S. Burroughs,
 here's an example I regrettably wrote to a coworker recently with some
 details removed:</p>
-<pre><code>[...] As a precaution, I did review $NOBODY&#39;s recent
+<pre><code>[...] As a precaution, I did review $NOBODY's recent
 $THING_I_WAS_ASKED_TO_REVIEW (if you would like a detailed report on
 that, I can pull that together for you).</code></pre>
 <p>Somehow, I managed to take the <em>one</em> point worth emphasizing
@@ -212,3 +212,4 @@ that, I can pull that together for you).</code></pre>
 complain when I overuse parentheses. I deserve it.</p>
 </body>
 </html>
+
diff --git a/thoughts/syntax/random-python-idiosyncrasies.html b/thoughts/syntax/random-python-idiosyncrasies.html
index dc67e4d..5c6ecef 100644
--- a/thoughts/syntax/random-python-idiosyncrasies.html
+++ b/thoughts/syntax/random-python-idiosyncrasies.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <meta charset="utf-8" />
-  <meta name="generator" content="pandoc" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-  <title>random-python-idiosyncrasies</title>
-  <style>
+<meta charset="utf-8"/>
+<meta content="pandoc" name="generator"/>
+<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
+<title>random-python-idiosyncrasies</title>
+<style>
     html {
       line-height: 1.5;
       font-family: Georgia, serif;
@@ -222,25 +222,21 @@
 <nav id="TOC" role="doc-toc">
 <h2 id="toc-title">Contents</h2>
 <ul>
-<li><a href="#coding-style-guide">Coding Style Guide</a>
+<li><a href="#coding-style-guide" target="_self">Coding Style Guide</a>
 <ul>
-<li><a
-href="#strings-are-double-quoted.-keys-and-chars-are-single-quoted.">1)
+<li><a href="#strings-are-double-quoted.-keys-and-chars-are-single-quoted." target="_self">1)
 <em>Strings</em> are <em>double-quoted</em>. <em>Keys</em> and
 <em>chars</em> are <em>single-quoted</em>.</a></li>
-<li><a href="#long-strings-belong-in-parentheses">2) Long strings belong
+<li><a href="#long-strings-belong-in-parentheses" target="_self">2) Long strings belong
 in parentheses</a></li>
-<li><a
-href="#tabs-are-four-spaces-and-spaces-are-always-preferred-to-tabs">3)
+<li><a href="#tabs-are-four-spaces-and-spaces-are-always-preferred-to-tabs" target="_self">3)
 Tabs are four spaces and spaces are <em>ALWAYS</em> preferred to
 tabs</a></li>
-<li><a
-href="#always-add-spaces-between-arithmetic-but-never-for-brackets">4)
+<li><a href="#always-add-spaces-between-arithmetic-but-never-for-brackets" target="_self">4)
 Always add spaces between arithmetic, but never for brackets</a></li>
-<li><a href="#everything-should-be-snake_case">5) EVERYTHING should be
+<li><a href="#everything-should-be-snake_case" target="_self">5) EVERYTHING should be
 snake_case</a></li>
-<li><a
-href="#if-its-over-100-lines-you-probably-need-a-new-file-and-a-class">6)
+<li><a href="#if-its-over-100-lines-you-probably-need-a-new-file-and-a-class" target="_self">6)
 If it's over 100 lines, you probably need a new file (and a
 class)</a></li>
 </ul></li>
@@ -258,13 +254,11 @@ inconsistent</li>
 if you have a good argument for doing things a particular, I don't
 really care.</p>
 <p><em>BUT</em> first and foremost, <em>code must comply with PEP8
-first</em>. This is easy to automate. I like <a
-href="https://pypi.org/project/black/">black</a> since it's easy to use
+first</em>. This is easy to automate. I like <a href="https://pypi.org/project/black/">black</a> since it's easy to use
 but there' plenty of advanced linters out there.</p>
 <p>I usually invoke it like this to turn off forcing double quotes and
 force the line length to 72:</p>
-<div class="sourceCode" id="cb1"><pre
-class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ex">black</span> <span class="at">-S</span> <span class="at">-l</span> 72 file.py</span></code></pre></div>
+<div class="sourceCode" id="cb1"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a aria-hidden="true" href="#cb1-1" tabindex="-1"></a><span class="ex">black</span> <span class="at">-S</span> <span class="at">-l</span> 72 file.py</span></code></pre></div>
 <p>That aside, I have the following idiosyncracies:</p>
 <h2 id="strings-are-double-quoted.-keys-and-chars-are-single-quoted.">1)
 <em>Strings</em> are <em>double-quoted</em>. <em>Keys</em> and
@@ -272,32 +266,29 @@ class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="
 <p>This is really just because I like how C does it. And Cpython's
 C-based so why not?</p>
 <p>Like so:</p>
-<div class="sourceCode" id="cb2"><pre
-class="sourceCode python"><code class="sourceCode python"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a>string <span class="op">=</span> <span class="st">&quot;This is a phrase&quot;</span></span>
-<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a>word <span class="op">=</span> <span class="st">&quot;word&quot;</span></span>
-<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a>cur_char <span class="op">=</span> <span class="st">&#39;a&#39;</span></span>
-<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a>newline <span class="op">=</span> <span class="st">&#39;</span><span class="ch">\n</span><span class="st">&#39;</span> <span class="co"># note, two characters, but it&#39;s still ONE char out</span></span>
-<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a><span class="co"># keys are single-quoted to avoid confusion</span></span>
-<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a>dictionary <span class="op">=</span> { <span class="st">&#39;key&#39;</span>  <span class="st">&quot;1245dqw3w431&quot;</span>, <span class="st">&#39;return&#39;</span>: newline }</span></code></pre></div>
+<div class="sourceCode" id="cb2"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb2-1"><a aria-hidden="true" href="#cb2-1" tabindex="-1"></a>string <span class="op">=</span> <span class="st">"This is a phrase"</span></span>
+<span id="cb2-2"><a aria-hidden="true" href="#cb2-2" tabindex="-1"></a>word <span class="op">=</span> <span class="st">"word"</span></span>
+<span id="cb2-3"><a aria-hidden="true" href="#cb2-3" tabindex="-1"></a>cur_char <span class="op">=</span> <span class="st">'a'</span></span>
+<span id="cb2-4"><a aria-hidden="true" href="#cb2-4" tabindex="-1"></a>newline <span class="op">=</span> <span class="st">'</span><span class="ch">\n</span><span class="st">'</span> <span class="co"># note, two characters, but it's still ONE char out</span></span>
+<span id="cb2-5"><a aria-hidden="true" href="#cb2-5" tabindex="-1"></a><span class="co"># keys are single-quoted to avoid confusion</span></span>
+<span id="cb2-6"><a aria-hidden="true" href="#cb2-6" tabindex="-1"></a>dictionary <span class="op">=</span> { <span class="st">'key'</span>  <span class="st">"1245dqw3w431"</span>, <span class="st">'return'</span>: newline }</span></code></pre></div>
 <p>The only exception is for strings with quotes in them (anything to
 avoid escapes, really)</p>
-<div class="sourceCode" id="cb3"><pre
-class="sourceCode python"><code class="sourceCode python"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a>quoted_string <span class="op">=</span> (</span>
-<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a>    <span class="st">&#39;&quot;You miss 100</span><span class="sc">% o</span><span class="st">f the shots you don&#39;</span>t take <span class="op">-</span> Wayne Gretsky<span class="st">&quot;&#39;</span></span>
-<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a><span class="er">    &#39; - Michael Scott&#39;</span></span>
-<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a><span class="er">)</span></span></code></pre></div>
+<div class="sourceCode" id="cb3"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb3-1"><a aria-hidden="true" href="#cb3-1" tabindex="-1"></a>quoted_string <span class="op">=</span> (</span>
+<span id="cb3-2"><a aria-hidden="true" href="#cb3-2" tabindex="-1"></a>    <span class="st">'"You miss 100</span><span class="sc">% o</span><span class="st">f the shots you don'</span>t take <span class="op">-</span> Wayne Gretsky<span class="st">"'</span></span>
+<span id="cb3-3"><a aria-hidden="true" href="#cb3-3" tabindex="-1"></a><span class="er">    ' - Michael Scott'</span></span>
+<span id="cb3-4"><a aria-hidden="true" href="#cb3-4" tabindex="-1"></a><span class="er">)</span></span></code></pre></div>
 <p>That brings me to my next point.</p>
 <h2 id="long-strings-belong-in-parentheses">2) Long strings belong in
 parentheses</h2>
 <p>As in:</p>
-<div class="sourceCode" id="cb4"><pre
-class="sourceCode python"><code class="sourceCode python"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a>longboi <span class="op">=</span> (</span>
-<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a>    <span class="st">&quot;This is a really long string usefull when making help menus. Be</span><span class="ch">\n</span><span class="st">&quot;</span></span>
-<span id="cb4-3"><a href="#cb4-3" aria-hidden="true" tabindex="-1"></a>    <span class="st">&quot;sure to leave s space at the end of each line, or add a new line</span><span class="ch">\n</span><span class="st">&quot;</span></span>
-<span id="cb4-4"><a href="#cb4-4" aria-hidden="true" tabindex="-1"></a>    <span class="st">&quot;when needed.</span><span class="ch">\n\n</span><span class="st">&quot;</span></span>
-<span id="cb4-5"><a href="#cb4-5" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb4-6"><a href="#cb4-6" aria-hidden="true" tabindex="-1"></a>    <span class="st">&quot;Try your best to keep formatting accurate like this.&quot;</span></span>
-<span id="cb4-7"><a href="#cb4-7" aria-hidden="true" tabindex="-1"></a>)</span></code></pre></div>
+<div class="sourceCode" id="cb4"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb4-1"><a aria-hidden="true" href="#cb4-1" tabindex="-1"></a>longboi <span class="op">=</span> (</span>
+<span id="cb4-2"><a aria-hidden="true" href="#cb4-2" tabindex="-1"></a>    <span class="st">"This is a really long string usefull when making help menus. Be</span><span class="ch">\n</span><span class="st">"</span></span>
+<span id="cb4-3"><a aria-hidden="true" href="#cb4-3" tabindex="-1"></a>    <span class="st">"sure to leave s space at the end of each line, or add a new line</span><span class="ch">\n</span><span class="st">"</span></span>
+<span id="cb4-4"><a aria-hidden="true" href="#cb4-4" tabindex="-1"></a>    <span class="st">"when needed.</span><span class="ch">\n\n</span><span class="st">"</span></span>
+<span id="cb4-5"><a aria-hidden="true" href="#cb4-5" tabindex="-1"></a></span>
+<span id="cb4-6"><a aria-hidden="true" href="#cb4-6" tabindex="-1"></a>    <span class="st">"Try your best to keep formatting accurate like this."</span></span>
+<span id="cb4-7"><a aria-hidden="true" href="#cb4-7" tabindex="-1"></a>)</span></code></pre></div>
 <h2 id="tabs-are-four-spaces-and-spaces-are-always-preferred-to-tabs">3)
 Tabs are four spaces and spaces are <em>ALWAYS</em> preferred to
 tabs</h2>
@@ -305,36 +296,30 @@ tabs</h2>
 <h2 id="always-add-spaces-between-arithmetic-but-never-for-brackets">4)
 Always add spaces between arithmetic, but never for brackets</h2>
 <p>It's a pain to read:</p>
-<div class="sourceCode" id="cb5"><pre
-class="sourceCode python"><code class="sourceCode python"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="dv">1</span><span class="op">/</span>(<span class="dv">2</span><span class="op">*</span>sqrt(pi))<span class="op">*</span>exp(x<span class="op">**</span><span class="dv">2</span>)</span></code></pre></div>
+<div class="sourceCode" id="cb5"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb5-1"><a aria-hidden="true" href="#cb5-1" tabindex="-1"></a><span class="dv">1</span><span class="op">/</span>(<span class="dv">2</span><span class="op">*</span>sqrt(pi))<span class="op">*</span>exp(x<span class="op">**</span><span class="dv">2</span>)</span></code></pre></div>
 <p>Do this</p>
-<div class="sourceCode" id="cb6"><pre
-class="sourceCode python"><code class="sourceCode python"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a><span class="dv">1</span> <span class="op">/</span> (<span class="dv">2</span> <span class="op">*</span> sqrt(pi)) <span class="op">*</span> exp(x <span class="op">**</span> <span class="dv">2</span>)</span></code></pre></div>
+<div class="sourceCode" id="cb6"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb6-1"><a aria-hidden="true" href="#cb6-1" tabindex="-1"></a><span class="dv">1</span> <span class="op">/</span> (<span class="dv">2</span> <span class="op">*</span> sqrt(pi)) <span class="op">*</span> exp(x <span class="op">**</span> <span class="dv">2</span>)</span></code></pre></div>
 <p>The same goes for logic operators</p>
-<div class="sourceCode" id="cb7"><pre
-class="sourceCode python"><code class="sourceCode python"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a>true <span class="op">&amp;</span> false <span class="op">^</span> true</span></code></pre></div>
+<div class="sourceCode" id="cb7"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb7-1"><a aria-hidden="true" href="#cb7-1" tabindex="-1"></a>true <span class="op">&amp;</span> false <span class="op">^</span> true</span></code></pre></div>
 <h2 id="everything-should-be-snake_case">5) EVERYTHING should be
 snake_case</h2>
 <p>This is python. Unless there's a compatibility thing (like a
 library's code was written that way, or it matches an API variable),
 snake_case is preferred.</p>
-<div class="sourceCode" id="cb8"><pre
-class="sourceCode python"><code class="sourceCode python"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a>user_input <span class="op">=</span> <span class="bu">int</span>(<span class="bu">input</span>()) <span class="co"># variable</span></span>
-<span id="cb8-2"><a href="#cb8-2" aria-hidden="true" tabindex="-1"></a>MAX_INPUT <span class="op">=</span> <span class="dv">1000</span> <span class="co"># constant</span></span>
-<span id="cb8-3"><a href="#cb8-3" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> judge_input(_input, _max): <span class="co"># function</span></span>
-<span id="cb8-4"><a href="#cb8-4" aria-hidden="true" tabindex="-1"></a>    <span class="cf">if</span> _max <span class="op">&gt;</span> _input:</span>
-<span id="cb8-5"><a href="#cb8-5" aria-hidden="true" tabindex="-1"></a>        <span class="bu">print</span>(<span class="st">&quot;Too big!&quot;</span>)</span>
-<span id="cb8-6"><a href="#cb8-6" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb8-7"><a href="#cb8-7" aria-hidden="true" tabindex="-1"></a>judge_input(user_input, MAX_INPUT</span>
-<span id="cb8-8"><a href="#cb8-8" aria-hidden="true" tabindex="-1"></a><span class="kw">class</span> Input_Judger: <span class="co"># a class</span></span>
-<span id="cb8-9"><a href="#cb8-9" aria-hidden="true" tabindex="-1"></a>    <span class="co"># etc etc</span></span></code></pre></div>
+<div class="sourceCode" id="cb8"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb8-1"><a aria-hidden="true" href="#cb8-1" tabindex="-1"></a>user_input <span class="op">=</span> <span class="bu">int</span>(<span class="bu">input</span>()) <span class="co"># variable</span></span>
+<span id="cb8-2"><a aria-hidden="true" href="#cb8-2" tabindex="-1"></a>MAX_INPUT <span class="op">=</span> <span class="dv">1000</span> <span class="co"># constant</span></span>
+<span id="cb8-3"><a aria-hidden="true" href="#cb8-3" tabindex="-1"></a><span class="kw">def</span> judge_input(_input, _max): <span class="co"># function</span></span>
+<span id="cb8-4"><a aria-hidden="true" href="#cb8-4" tabindex="-1"></a>    <span class="cf">if</span> _max <span class="op">&gt;</span> _input:</span>
+<span id="cb8-5"><a aria-hidden="true" href="#cb8-5" tabindex="-1"></a>        <span class="bu">print</span>(<span class="st">"Too big!"</span>)</span>
+<span id="cb8-6"><a aria-hidden="true" href="#cb8-6" tabindex="-1"></a></span>
+<span id="cb8-7"><a aria-hidden="true" href="#cb8-7" tabindex="-1"></a>judge_input(user_input, MAX_INPUT</span>
+<span id="cb8-8"><a aria-hidden="true" href="#cb8-8" tabindex="-1"></a><span class="kw">class</span> Input_Judger: <span class="co"># a class</span></span>
+<span id="cb8-9"><a aria-hidden="true" href="#cb8-9" tabindex="-1"></a>    <span class="co"># etc etc</span></span></code></pre></div>
 <p>Example exception:</p>
-<div class="sourceCode" id="cb9"><pre
-class="sourceCode python"><code class="sourceCode python"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a><span class="co"># this doesn&#39;t actually work, but you get the idea</span></span>
-<span id="cb9-2"><a href="#cb9-2" aria-hidden="true" tabindex="-1"></a>r <span class="op">=</span> requests.get(<span class="st">&quot;www.debian.org&quot;</span>)</span>
-<span id="cb9-3"><a href="#cb9-3" aria-hidden="true" tabindex="-1"></a>pageSize <span class="op">=</span> r.json()[<span class="st">&#39;pageSize&#39;</span>] <span class="co"># camel case ok</span></span></code></pre></div>
-<h2
-id="if-its-over-100-lines-you-probably-need-a-new-file-and-a-class">6)
+<div class="sourceCode" id="cb9"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb9-1"><a aria-hidden="true" href="#cb9-1" tabindex="-1"></a><span class="co"># this doesn't actually work, but you get the idea</span></span>
+<span id="cb9-2"><a aria-hidden="true" href="#cb9-2" tabindex="-1"></a>r <span class="op">=</span> requests.get(<span class="st">"www.debian.org"</span>)</span>
+<span id="cb9-3"><a aria-hidden="true" href="#cb9-3" tabindex="-1"></a>pageSize <span class="op">=</span> r.json()[<span class="st">'pageSize'</span>] <span class="co"># camel case ok</span></span></code></pre></div>
+<h2 id="if-its-over-100-lines-you-probably-need-a-new-file-and-a-class">6)
 If it's over 100 lines, you probably need a new file (and a class)</h2>
 <p>This is more of a general coding thing, but I've encountered so many
 1000 line monster out there, I need to reiterate it. I understand how
@@ -344,8 +329,8 @@ Road</em> it comes out as a scroll Merlin himself would be proud of.</p>
 <p>But coming back to the scroll in a week half-drunk and half-tired is
 not a situation you want to be caught in. You can always import
 <em>any</em> python code you write with a simple:</p>
-<div class="sourceCode" id="cb10"><pre
-class="sourceCode python"><code class="sourceCode python"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> filename</span></code></pre></div>
+<div class="sourceCode" id="cb10"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb10-1"><a aria-hidden="true" href="#cb10-1" tabindex="-1"></a><span class="im">import</span> filename</span></code></pre></div>
 <p>As long as it's in the same directory.</p>
 </body>
 </html>
+
diff --git a/tutorials/pc_gaming/common-gfx-card-installation-woes.html b/tutorials/pc_gaming/common-gfx-card-installation-woes.html
index 250f456..04dd8e9 100644
--- a/tutorials/pc_gaming/common-gfx-card-installation-woes.html
+++ b/tutorials/pc_gaming/common-gfx-card-installation-woes.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <meta charset="utf-8" />
-  <meta name="generator" content="pandoc" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-  <title>common-gfx-card-installation-woes</title>
-  <style>
+<meta charset="utf-8"/>
+<meta content="pandoc" name="generator"/>
+<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
+<title>common-gfx-card-installation-woes</title>
+<style>
     html {
       line-height: 1.5;
       font-family: Georgia, serif;
@@ -222,18 +222,18 @@
 <nav id="TOC" role="doc-toc">
 <h2 id="toc-title">Contents</h2>
 <ul>
-<li><a href="#step-1-the-replacement">Step 1: The Replacement</a></li>
-<li><a href="#step-2-re-installing-the-drivers">Step 2: Re-installing
+<li><a href="#step-1-the-replacement" target="_self">Step 1: The Replacement</a></li>
+<li><a href="#step-2-re-installing-the-drivers" target="_self">Step 2: Re-installing
 the drivers</a>
 <ul>
-<li><a href="#part-one-fix-broken-packages">Part one: Fix Broken
+<li><a href="#part-one-fix-broken-packages" target="_self">Part one: Fix Broken
 Packages</a></li>
-<li><a href="#part-two-re-install-nvidia-driver">Part two: Re-install
+<li><a href="#part-two-re-install-nvidia-driver" target="_self">Part two: Re-install
 nvidia-driver</a></li>
-<li><a href="#part-negative-three-just-in-case">Part negative three:
+<li><a href="#part-negative-three-just-in-case" target="_self">Part negative three:
 Just in case</a></li>
 </ul></li>
-<li><a href="#step-three-reboot-and-test">Step three: Reboot and
+<li><a href="#step-three-reboot-and-test" target="_self">Step three: Reboot and
 test</a></li>
 </ul>
 </nav>
@@ -264,15 +264,13 @@ drivers</h2>
 <p>At first I tried to just naively update and see what happened, but I
 received a "broken packages" error for nvidia-driver and other related
 packages after running this.</p>
-<div class="sourceCode" id="cb1"><pre
-class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo apt update</span>
-<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo apt upgrade</span></code></pre></div>
+<div class="sourceCode" id="cb1"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a aria-hidden="true" href="#cb1-1" tabindex="-1"></a><span class="ex">$</span> sudo apt update</span>
+<span id="cb1-2"><a aria-hidden="true" href="#cb1-2" tabindex="-1"></a><span class="ex">$</span> sudo apt upgrade</span></code></pre></div>
 <p>This turned out to be a two-part error, one was the driver itself,
 two was an update in Debian sid.</p>
 <h3 id="part-one-fix-broken-packages">Part one: Fix Broken Packages</h3>
 <p>Whenever I see broken packages, I tend to to assume that the name of
-a package got updated. In this case, there was a <a
-href="https://www.debian.org/releases/bookworm/amd64/release-notes/ch-information.en.html#non-free-split">note</a>
+a package got updated. In this case, there was a <a href="https://www.debian.org/releases/bookworm/amd64/release-notes/ch-information.en.html#non-free-split">note</a>
 on the apt list changes that mentioned a separate "non-free-firmware"
 branch had been made, which had some of the components I needed. I just
 added "non-free-firmware" to my /etc/apt/sources.list:</p>
@@ -284,13 +282,11 @@ nvidia-driver</h3>
 <p>I tried to update again at this point, but encountered the same
 error. At this point I figured the best thing to do was to just try to
 reinstall all nvidia related software again:</p>
-<div class="sourceCode" id="cb3"><pre
-class="sourceCode bash"><code class="sourceCode bash"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo apt purge nvidia-<span class="pp">*</span></span>
-<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo apt update</span>
-<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo apt upgrade</span></code></pre></div>
+<div class="sourceCode" id="cb3"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb3-1"><a aria-hidden="true" href="#cb3-1" tabindex="-1"></a><span class="ex">$</span> sudo apt purge nvidia-<span class="pp">*</span></span>
+<span id="cb3-2"><a aria-hidden="true" href="#cb3-2" tabindex="-1"></a><span class="ex">$</span> sudo apt update</span>
+<span id="cb3-3"><a aria-hidden="true" href="#cb3-3" tabindex="-1"></a><span class="ex">$</span> sudo apt upgrade</span></code></pre></div>
 <p>Ok no errors on the update this time, let's try again:</p>
-<div class="sourceCode" id="cb4"><pre
-class="sourceCode bash"><code class="sourceCode bash"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo apt install nvidia-driver</span></code></pre></div>
+<div class="sourceCode" id="cb4"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb4-1"><a aria-hidden="true" href="#cb4-1" tabindex="-1"></a><span class="ex">$</span> sudo apt install nvidia-driver</span></code></pre></div>
 <h3 id="part-negative-three-just-in-case">Part negative three: Just in
 case</h3>
 <p>In the dark days before the Debian team had an Nvidia package, you
@@ -304,14 +300,12 @@ something like "driver.run"</p>
 <p>In order to run this file, you need to stop your graphics
 environment. Press CTRL + ALT + F1 to log out and open a terminal-only
 session. Login with your credentials. Then stop the X-server</p>
-<div class="sourceCode" id="cb5"><pre
-class="sourceCode bash"><code class="sourceCode bash"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo service lightdm stop</span></code></pre></div>
+<div class="sourceCode" id="cb5"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb5-1"><a aria-hidden="true" href="#cb5-1" tabindex="-1"></a><span class="ex">$</span> sudo service lightdm stop</span></code></pre></div>
 <p>If you use a different X manager you might need to replace "lightdm"
 with "gdm" or "kdm" (Gnome and KDE). Now we can run the driver
 install:</p>
-<div class="sourceCode" id="cb6"><pre
-class="sourceCode bash"><code class="sourceCode bash"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo chmod +x driver.run</span>
-<span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo ./driver.run</span></code></pre></div>
+<div class="sourceCode" id="cb6"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb6-1"><a aria-hidden="true" href="#cb6-1" tabindex="-1"></a><span class="ex">$</span> sudo chmod +x driver.run</span>
+<span id="cb6-2"><a aria-hidden="true" href="#cb6-2" tabindex="-1"></a><span class="ex">$</span> sudo ./driver.run</span></code></pre></div>
 <p>Accept all the prompts and you'll have the factory made driver
 software. Note, you have to manually update this way though. So try to
 figure out the nvidia-driver package before resorting to this
@@ -322,8 +316,8 @@ method!</p>
 point, as long as you're still seeing your desktop, you should be good
 to go! I ran Kerbal Space Program 2 (currently in early access) as my
 first test.</p>
-<p><video src="/static/ksp2.webm" controls=""><a
-href="/static/ksp2.webm">Video</a></video></p>
+<p><video controls="" src="/static/ksp2.webm"><a href="/static/ksp2.webm">Video</a></video></p>
 <p>Looking good, Jeb!</p>
 </body>
 </html>
+
diff --git a/tutorials/tor/how-to-host-a-tor-hidden-service.html b/tutorials/tor/how-to-host-a-tor-hidden-service.html
index 79a4e2e..de381e5 100644
--- a/tutorials/tor/how-to-host-a-tor-hidden-service.html
+++ b/tutorials/tor/how-to-host-a-tor-hidden-service.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <meta charset="utf-8" />
-  <meta name="generator" content="pandoc" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-  <title>how-to-host-a-tor-hidden-service</title>
-  <style>
+<meta charset="utf-8"/>
+<meta content="pandoc" name="generator"/>
+<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
+<title>how-to-host-a-tor-hidden-service</title>
+<style>
     html {
       line-height: 1.5;
       font-family: Georgia, serif;
@@ -159,12 +159,11 @@
 <nav id="TOC" role="doc-toc">
 <h2 id="toc-title">Contents</h2>
 <ul>
-<li><a
-href="#how-to-spin-up-a-temporary-hidden-file-share-with-python">How to
+<li><a href="#how-to-spin-up-a-temporary-hidden-file-share-with-python" target="_self">How to
 spin up a temporary hidden file share with Python</a>
 <ul>
-<li><a href="#configure-tor">Configure Tor</a></li>
-<li><a href="#set-up-the-server">Set up the server</a></li>
+<li><a href="#configure-tor" target="_self">Configure Tor</a></li>
+<li><a href="#set-up-the-server" target="_self">Set up the server</a></li>
 </ul></li>
 </ul>
 </nav>
@@ -174,20 +173,17 @@ honestly think Tor is one of the easiest and safest options to set
 up.</p>
 <p>Getting a Tor hidden service running is so stupidly easy that it
 hardly deserves it's own article. Tor's website has a great guide right
-<a
-href="https://community.torproject.org/onion-services/setup/">here</a>.
+<a href="https://community.torproject.org/onion-services/setup/">here</a>.
 I figured I'd put my own spin on it by showing you show to host a
 temporary server to share some files with your friends. Please note the
 word <em>temporary</em> in that last sentence; running this way for a
 while is insecure and not a good idea. For a permanent solution, you'll
-want to host a real web server as explained <a
-href="/tutorials/www/how-to-make-this-site.html">here</a>.</p>
+want to host a real web server as explained <a href="/tutorials/www/how-to-make-this-site.html">here</a>.</p>
 <p>Like that article, I will only explain how to do this on Linux since
 it's way easier and, to be honest, I've never tried to do it on Windows.
 If you've never used Linux before, buy a Raspberry Pi and follow the
 basic install guide. If you're strapped for cash, run it in a virtual
-machine, or use <a
-href="https://docs.microsoft.com/en-us/windows/wsl/install">Windows
+machine, or use <a href="https://docs.microsoft.com/en-us/windows/wsl/install">Windows
 Subsystem for Linux</a>.</p>
 <h2 id="how-to-spin-up-a-temporary-hidden-file-share-with-python">How to
 spin up a temporary hidden file share with Python</h2>
@@ -244,3 +240,4 @@ through the Tor Browser.</p>
 good.</p>
 </body>
 </html>
+
diff --git a/tutorials/vim/how-to-fix-neovim-nerdtree-rendering-issue.html b/tutorials/vim/how-to-fix-neovim-nerdtree-rendering-issue.html
index 17f8c84..c5179a6 100644
--- a/tutorials/vim/how-to-fix-neovim-nerdtree-rendering-issue.html
+++ b/tutorials/vim/how-to-fix-neovim-nerdtree-rendering-issue.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <meta charset="utf-8" />
-  <meta name="generator" content="pandoc" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-  <title>how-to-fix-neovim-nerdtree-rendering-issue</title>
-  <style>
+<meta charset="utf-8"/>
+<meta content="pandoc" name="generator"/>
+<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
+<title>how-to-fix-neovim-nerdtree-rendering-issue</title>
+<style>
     html {
       line-height: 1.5;
       font-family: Georgia, serif;
@@ -222,26 +222,25 @@
 <nav id="TOC" role="doc-toc">
 <h2 id="toc-title">Contents</h2>
 <ul>
-<li><a href="#the-problem">The Problem</a></li>
-<li><a href="#the-attempt">The Attempt</a></li>
-<li><a href="#the-actual-solution">The Actual Solution</a></li>
+<li><a href="#the-problem" target="_self">The Problem</a></li>
+<li><a href="#the-attempt" target="_self">The Attempt</a></li>
+<li><a href="#the-actual-solution" target="_self">The Actual Solution</a></li>
 </ul>
 </nav>
-<p>I really like neovim since <a
-href="https://github.com/neoclide/coc.nvim">COC</a> is integrated with
+<p>I really like neovim since <a href="https://github.com/neoclide/coc.nvim">COC</a> is integrated with
 it to work nicely. Plus, I like the defaults and the fact there's a lot
 of active development on extensions. I didn't use it for a long time
 because I <em>needed</em> NerdTree but every time I'd scroll the window,
 I'd get a mess.</p>
 <h2 id="the-problem">The Problem</h2>
-<p><img src="/static/mess.gif" /></p>
+<p><img src="/static/mess.gif"/></p>
 <p>Now, yes, I know I'm a heretic for using the arrow keys and not just
 jumping around, but I thought it was weird I didn't see this issue
 anywhere else. Also, vim doesn't have this problem.</p>
-<p><img src="/static/nomess-vim.gif" /></p>
+<p><img src="/static/nomess-vim.gif"/></p>
 <p>It's also not because of my meme tmux setup, the same issue happens
 in terminator, which I happened to have installed.</p>
-<p><img src="/static/mess-terminator.gif" /></p>
+<p><img src="/static/mess-terminator.gif"/></p>
 <h2 id="the-attempt">The Attempt</h2>
 <p>There's a better way to do this, but I first figured just triggering
 a redraw on scroll would do the trick. You can do so by adding the
@@ -256,11 +255,11 @@ program).</p>
 TERM variable was set to 'xterm'. I'm not sure if I did that
 intentionally to run something or if it's just a legacy thing I left in
 from Debian's default bashrc, but all I had to do was change it:</p>
-<div class="sourceCode" id="cb2"><pre
-class="sourceCode bash"><code class="sourceCode bash"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="bu">export</span> <span class="va">TERM</span><span class="op">=</span><span class="st">&#39;tmux256-color&#39;</span></span></code></pre></div>
-<p><img src="/static/fixed.gif" /></p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb2-1"><a aria-hidden="true" href="#cb2-1" tabindex="-1"></a><span class="bu">export</span> <span class="va">TERM</span><span class="op">=</span><span class="st">'tmux256-color'</span></span></code></pre></div>
+<p><img src="/static/fixed.gif"/></p>
 <p>No more hacky autocommands!</p>
 <p>If I had the foresight to test the issue in xterm first, I probably
 would have seen it right away....</p>
 </body>
 </html>
+
diff --git a/tutorials/www/how-to-make-this-site.html b/tutorials/www/how-to-make-this-site.html
index 2fcc26f..33d8943 100644
--- a/tutorials/www/how-to-make-this-site.html
+++ b/tutorials/www/how-to-make-this-site.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <meta charset="utf-8" />
-  <meta name="generator" content="pandoc" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-  <title>how-to-make-this-site</title>
-  <style>
+<meta charset="utf-8"/>
+<meta content="pandoc" name="generator"/>
+<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
+<title>how-to-make-this-site</title>
+<style>
     html {
       line-height: 1.5;
       font-family: Georgia, serif;
@@ -159,42 +159,41 @@
 <nav id="TOC" role="doc-toc">
 <h2 id="toc-title">Contents</h2>
 <ul>
-<li><a href="#background">Background</a></li>
-<li><a href="#what-is-a-web-server-and-how-do-i-run-one">What is a web
+<li><a href="#background" target="_self">Background</a></li>
+<li><a href="#what-is-a-web-server-and-how-do-i-run-one" target="_self">What is a web
 server and how do I run one?</a>
 <ul>
-<li><a href="#getting-from-localhost-to-the-internet">Getting from
+<li><a href="#getting-from-localhost-to-the-internet" target="_self">Getting from
 localhost to the internet</a></li>
 </ul></li>
-<li><a
-href="#how-can-i-make-this-server-available-on-the-internet-cheaply-and-independently">How
+<li><a href="#how-can-i-make-this-server-available-on-the-internet-cheaply-and-independently" target="_self">How
 can I make this server available on the Internet <em>cheaply</em> and
 <em>independently</em></a>
 <ul>
-<li><a href="#can-i-run-a-web-server-at-home">Can I run a web server at
+<li><a href="#can-i-run-a-web-server-at-home" target="_self">Can I run a web server at
 home</a></li>
-<li><a href="#so-what-should-i-do">So what should I do</a></li>
+<li><a href="#so-what-should-i-do" target="_self">So what should I do</a></li>
 </ul></li>
-<li><a href="#whats-a-domain-name">What's a "Domain Name"</a></li>
-<li><a href="#setup-https-and-tls-for-some-sense-of-security">Setup
+<li><a href="#whats-a-domain-name" target="_self">What's a "Domain Name"</a></li>
+<li><a href="#setup-https-and-tls-for-some-sense-of-security" target="_self">Setup
 HTTPS and TLS, for some sense of security</a></li>
-<li><a href="#perspective">Perspective</a></li>
-<li><a href="#references">References</a>
+<li><a href="#perspective" target="_self">Perspective</a></li>
+<li><a href="#references" target="_self">References</a>
 <ul>
-<li><a href="#terms-of-service-for-certain-isps">Terms of service for
+<li><a href="#terms-of-service-for-certain-isps" target="_self">Terms of service for
 certain ISPs</a>
 <ul>
-<li><a href="#verizon">Verizon</a></li>
-<li><a href="#optimum">Optimum</a></li>
-<li><a href="#spectrum">Spectrum</a></li>
-<li><a href="#att">AT&amp;T</a></li>
-<li><a href="#cox-communications">Cox Communications</a></li>
+<li><a href="#verizon" target="_self">Verizon</a></li>
+<li><a href="#optimum" target="_self">Optimum</a></li>
+<li><a href="#spectrum" target="_self">Spectrum</a></li>
+<li><a href="#att" target="_self">AT&amp;T</a></li>
+<li><a href="#cox-communications" target="_self">Cox Communications</a></li>
 </ul></li>
 </ul></li>
 </ul>
 </nav>
 <h2 id="background">Background</h2>
-<p><em>TL;DR get to </em><a href="#thepoint">the point</a></p>
+<p><em>TL;DR get to </em><a href="#thepoint" target="_self">the point</a></p>
 <p>I think it was roughly the end of high school when I first had the
 idea I wanted to make <em>some</em> kind of website. This would be
 around 2010 and I did what I thought would be a good idea and bought a
@@ -222,8 +221,7 @@ you want to take the time to deploy it yourself). But they also give out
 free .wordpress domains and some storage space with a snazzy dashboard
 to manage it all.</p>
 <p>I had fun with that one, I don't update it anymore, but it's still up
-at <a
-href="https://postquantumpoetry.wordpress.com">postquantumpoetry.wordpress.com</a>.
+at <a href="https://postquantumpoetry.wordpress.com">postquantumpoetry.wordpress.com</a>.
 WordPress got closer to what I wanted, but it still wasn't
 <em>really</em> my site; it was WordPress's site unless I wanted to pay
 the hosting and domain fee. It's pretty modest, but I wasn't sold on
@@ -261,15 +259,12 @@ and how do I run one?</h2>
 <p><em>TL;DR a web server is just a program that lets other computers on
 a network view files in a chosen folder. All you need to do is download
 a web server: apache and nginx are popular ones, but you can easily
-program your own with web frameworks like <a
-href="https://flask.palletsprojects.com/en/2.0.x/">Flask</a> or <a
-href="https://facil.io/">Facil</a></em></p>
+program your own with web frameworks like <a href="https://flask.palletsprojects.com/en/2.0.x/">Flask</a> or <a href="https://facil.io/">Facil</a></em></p>
 <p>You can run a web server for free right now. These instructions will
 be for Linux just for consistency since I'm as used to setting this up
 on a Windows server. If you've never used Linux, don't be scared! It's
 very easy to setup and manage in Windows now with Windows Subsystem for
-Linux. If you're on Windows, follow their guide <a
-href="https://docs.microsoft.com/en-us/windows/wsl/install">here</a>. It
+Linux. If you're on Windows, follow their guide <a href="https://docs.microsoft.com/en-us/windows/wsl/install">here</a>. It
 should be pretty straightforward, but if you have any issues: 1) Make
 sure you check your Windows version as noted in the "Prerequisites," 2)
 Try a different distribution, like Debian with
@@ -357,19 +352,16 @@ value.</p>
 <p>Now get your <em>public</em> ip address at this site https://who.is/
 and share it with your friends. Watch in horror as they access all the
 files in the directory you launched the server!</p>
-<h2
-id="how-can-i-make-this-server-available-on-the-internet-cheaply-and-independently">How
+<h2 id="how-can-i-make-this-server-available-on-the-internet-cheaply-and-independently">How
 can I make this server available on the Internet <em>cheaply</em> and
 <em>independently</em></h2>
 <p><i> TL;DR Expense scales with independence. It's possible to become
 your own service provider, get IP addresses from ICANN, your own
 hardware to host it, to host your cat pics; but it's also a lot of time,
-work and money to do all that (<a
-href="https://hackaday.com/2018/09/20/one-mans-journey-to-become-his-own-isp/">this
-guy</a> did it apparently, and so did <a
-href="https://en.wikipedia.org/wiki/Kiwi_Farms">Null</a>)</p>
+work and money to do all that (<a href="https://hackaday.com/2018/09/20/one-mans-journey-to-become-his-own-isp/">this
+guy</a> did it apparently, and so did <a href="https://en.wikipedia.org/wiki/Kiwi_Farms">Null</a>)</i></p>
 <p>Most likely you'll want to rent someone else's server, usually a VPS.
-</i></p>
+</p>
 <p>Once you understand the basic installation above, you can now
 populate your site with content just by adding HTML files to your web
 directory. You can use an HTML editor to write these, or you can
@@ -388,19 +380,18 @@ HTML files in vim or notepad and adding some CSS goes a long way. I
 wrote my own view of the topic in the context of how I wrote this site
 <a href="/tutorials/www/quick-intro-to-html-css.html">here</a>. And you
 can find a number of great guides on how to write files, copy them and
-manage them in the <a href="#references">references</a>.</p>
+manage them in the <a href="#references" target="_self">references</a>.</p>
 <p>One easy way to create HTML templates with these servers is through
 the use of "Server Side Includes," which essentially let you past one
 html document into another. This varies by server, for example, nginx
-has their own options and syntax detailed <a
-href="https://nginx.org/en/docs/http/ngx_http_ssi_module.html">here</a>.</p>
+has their own options and syntax detailed <a href="https://nginx.org/en/docs/http/ngx_http_ssi_module.html">here</a>.</p>
 <ul>
 <li><a href="https://neocities.org/"><strong>Neocities</strong></a></li>
 </ul>
 <p>Neocities is based on the old Geocities from the mid 90s which allows
 simple static hosting and features and amazing array of creative
 projects. Everything is managed through the website, and you can pay to
-set your own custom <a href="#whats-a-domain-name">domain name</a>.</p>
+set your own custom <a href="#whats-a-domain-name" target="_self">domain name</a>.</p>
 <ul>
 <li><strong>Wordpress</strong> (but this time, you set it up)</li>
 </ul>
@@ -423,8 +414,7 @@ online?</p>
 home</h3>
 <p>Technically yes, but practically probably not. At least not at a lot
 of extra cost to you. If you do want to host a small thing at home, like
-some text or some cat pics, a <a
-href="/tutorials/tor/how-to-host-a-tor-hidden-service.html">tor hidden
+some text or some cat pics, a <a href="/tutorials/tor/how-to-host-a-tor-hidden-service.html">tor hidden
 service</a> is a great option.</p>
 <p>I spent a lot of time searching on this (you can find a full list of
 references at the bottom), and I've even tested a little bit by hosting
@@ -460,7 +450,7 @@ like:</p>
 <li>Opening up your ports to the outside world.</li>
 </ul>
 <p>And in a nutshell that's it. There's fancy stuff of course, like
-you'll want a <a href="#whats-a-domain-name">domain name</a> probably
+you'll want a <a href="#whats-a-domain-name" target="_self">domain name</a> probably
 and I'll talk about that too, but at this point, your stuff is on the
 Internet! Just tell your friends to paste in your public ip address
 (your VPS provider will tell you this) and there's your stuff!</p>
@@ -525,15 +515,12 @@ the site is somehow dangerous, even if it doesn't collect any
 information about the user. Because of that, most you will want to go
 the extra mile to make your visitors feel warm and fuzzy inside and
 implement HTTPS.</p>
-<p>Fortunately, this is now much easier than is used to be thanks to <a
-href="https://letsencrypt.org/">LetsEncrypt</a>. LetsEncrypt generously
+<p>Fortunately, this is now much easier than is used to be thanks to <a href="https://letsencrypt.org/">LetsEncrypt</a>. LetsEncrypt generously
 serves as a free certificate authority, which allows you to generate
 signed certificates that are recognized by every web browser in the
-world. The tool they recommend, <a
-href="https://certbot.eff.org/">certbot</a> is painless to install. I've
+world. The tool they recommend, <a href="https://certbot.eff.org/">certbot</a> is painless to install. I've
 rarely had to do much more than "certbot certonly" and follow the
-prompts to get a certificate. Once you've obtained one, add it to <a
-href="https://httpd.apache.org/docs/2.4/ssl/ssl_howto.html">apache</a>
+prompts to get a certificate. Once you've obtained one, add it to <a href="https://httpd.apache.org/docs/2.4/ssl/ssl_howto.html">apache</a>
 or <a href="https://www.nginx.com/blog/nginx-ssl/#Examples">nginx</a>,
 switch the port to 443 instead of 80 and bam, you've got HTTPS!</p>
 <h2 id="perspective">Perspective</h2>
@@ -605,3 +592,4 @@ others.</p>
 </ul>
 </body>
 </html>
+
diff --git a/tutorials/www/how-to-use-the-internet.html b/tutorials/www/how-to-use-the-internet.html
index 88692cf..b687394 100644
--- a/tutorials/www/how-to-use-the-internet.html
+++ b/tutorials/www/how-to-use-the-internet.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <meta charset="utf-8" />
-  <meta name="generator" content="pandoc" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-  <title>how-to-use-the-internet</title>
-  <style>
+<meta charset="utf-8"/>
+<meta content="pandoc" name="generator"/>
+<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
+<title>how-to-use-the-internet</title>
+<style>
     html {
       line-height: 1.5;
       font-family: Georgia, serif;
@@ -159,21 +159,21 @@
 <nav id="TOC" role="doc-toc">
 <h2 id="toc-title">Contents</h2>
 <ul>
-<li><a href="#why">Why?</a></li>
-<li><a href="#how-to-use-a-web-browser">How to use a web
+<li><a href="#why" target="_self">Why?</a></li>
+<li><a href="#how-to-use-a-web-browser" target="_self">How to use a web
 browser</a></li>
-<li><a href="#how-to-use-a-search-engine">How to use a search
+<li><a href="#how-to-use-a-search-engine" target="_self">How to use a search
 engine</a></li>
-<li><a href="#how-to-read-and-find-scholarly-articles">How to read and
+<li><a href="#how-to-read-and-find-scholarly-articles" target="_self">How to read and
 find scholarly articles</a>
 <ul>
-<li><a href="#how-to-use-wikipedia">How to use Wikipedia</a></li>
-<li><a href="#how-to-find-articles-with-google-scholar">How to find
+<li><a href="#how-to-use-wikipedia" target="_self">How to use Wikipedia</a></li>
+<li><a href="#how-to-find-articles-with-google-scholar" target="_self">How to find
 articles with Google Scholar</a></li>
 </ul></li>
-<li><a href="#advanced-topics">Advanced Topics</a>
+<li><a href="#advanced-topics" target="_self">Advanced Topics</a>
 <ul>
-<li><a href="#how-to-use-tor-to-browse-anonymously">How to use tor to
+<li><a href="#how-to-use-tor-to-browse-anonymously" target="_self">How to use tor to
 browse anonymously</a></li>
 </ul></li>
 </ul>
@@ -241,3 +241,4 @@ is provided as well, but this is most effective when using hidden
 services, not using Tor in general.</p>
 </body>
 </html>
+
diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html
index e3ffc6c..9788cf4 100644
--- a/tutorials/www/quick-intro-html-css.html
+++ b/tutorials/www/quick-intro-html-css.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <meta charset="utf-8" />
-  <meta name="generator" content="pandoc" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-  <title>quick-intro-html-css</title>
-  <style>
+<meta charset="utf-8"/>
+<meta content="pandoc" name="generator"/>
+<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
+<title>quick-intro-html-css</title>
+<style>
     html {
       line-height: 1.5;
       font-family: Georgia, serif;
@@ -159,58 +159,55 @@
 <nav id="TOC" role="doc-toc">
 <h2 id="toc-title">Contents</h2>
 <ul>
-<li><a href="#web-browsers-render-code">Web browsers render code</a>
+<li><a href="#web-browsers-render-code" target="_self">Web browsers render code</a>
 <ul>
-<li><a href="#html">HTML</a>
+<li><a href="#html" target="_self">HTML</a>
 <ul>
-<li><a href="#basic-format">Basic Format</a></li>
-<li><a href="#tables-and-links">Tables and Links</a></li>
-<li><a href="#and-everything-else...">And Everything Else...</a>
+<li><a href="#basic-format" target="_self">Basic Format</a></li>
+<li><a href="#tables-and-links" target="_self">Tables and Links</a></li>
+<li><a href="#and-everything-else..." target="_self">And Everything Else...</a>
 <ul>
-<li><a href="#shortlist-of-text-and-formatting-tags">Shortlist of Text
+<li><a href="#shortlist-of-text-and-formatting-tags" target="_self">Shortlist of Text
 and Formatting Tags</a></li>
 </ul></li>
-<li><a href="#html-metadata">HTML Metadata</a></li>
+<li><a href="#html-metadata" target="_self">HTML Metadata</a></li>
 </ul></li>
-<li><a href="#css">CSS</a>
+<li><a href="#css" target="_self">CSS</a>
 <ul>
-<li><a href="#add-style-without-css">Add style <em>without</em>
+<li><a href="#add-style-without-css" target="_self">Add style <em>without</em>
 CSS</a></li>
-<li><a href="#basic-formatting">Basic Formatting</a></li>
-<li><a href="#image-formatting">Image Formatting</a></li>
-<li><a href="#making-custom-classes">Making Custom Classes</a>
+<li><a href="#basic-formatting" target="_self">Basic Formatting</a></li>
+<li><a href="#image-formatting" target="_self">Image Formatting</a></li>
+<li><a href="#making-custom-classes" target="_self">Making Custom Classes</a>
 <ul>
-<li><a href="#use-the-div-tag-to-make-sections">Use the div tag to make
+<li><a href="#use-the-div-tag-to-make-sections" target="_self">Use the div tag to make
 sections</a></li>
 </ul></li>
-<li><a href="#mobile-optimization">Mobile Optimization</a></li>
+<li><a href="#mobile-optimization" target="_self">Mobile Optimization</a></li>
 </ul></li>
-<li><a href="#how-to-look-things-up">How to look things up</a></li>
-<li><a href="#references">References</a>
+<li><a href="#how-to-look-things-up" target="_self">How to look things up</a></li>
+<li><a href="#references" target="_self">References</a>
 <ul>
-<li><a href="#html-1">HTML</a></li>
-<li><a href="#css-1">CSS</a></li>
+<li><a href="#html-1" target="_self">HTML</a></li>
+<li><a href="#css-1" target="_self">CSS</a></li>
 </ul></li>
 </ul></li>
 </ul>
 </nav>
 <p><em>Note: you should run the examples to see how they work. You can
 either write the files yourself and open them in a web browser, or use
-an online HTML editor like</em> <a
-href="https://html-css-js.com/"><em>this one</em></a></p>
+an online HTML editor like</em> <a href="https://html-css-js.com/"><em>this one</em></a></p>
 <p>As you can see from the current state of this site, I'm not exactly
 exactly the most skilled web designer. But I struggled through the
 basics enough to get an idiot's sense of front-end web design, so that
 perspective might be useful if you have no clue where to start with this
 like I did.</p>
 <p>The building blocks are very simple, <em>but there's a lot of
-blocks</em>. The <a
-href="https://dev.w3.org/html5/spec-LC/semantics.html#semantics">HTML5
+blocks</em>. The <a href="https://dev.w3.org/html5/spec-LC/semantics.html#semantics">HTML5
 specification</a>, which most browsers are built around, defines the
 semantics of elements that can should be rendered by a web browser. CSS
 similarly defines the <em>attributes</em>--or styles--that can be
-applied to those elements in a format specified <a
-href="https://www.w3.org/TR/CSS1/">here</a>. I've never gotten deep into
+applied to those elements in a format specified <a href="https://www.w3.org/TR/CSS1/">here</a>. I've never gotten deep into
 the weeds like professional designers do--and to be honest, I don't
 really want to. But I <em>do</em> like understanding how things work.
 And getting a unique custom HTML site is something anyone with a text
@@ -269,15 +266,15 @@ more tags in this example:</p>
             &lt;tr&gt;
                 &lt;td&gt;FSF!&lt;/td&gt;
                 &lt;td&gt;
-                &lt;a href=&quot;https://www.fsf.org/&quot;&gt;
-                &lt;img src=&quot;https://static.fsf.org/common/img/logo-new.png&quot; /&gt;
+                &lt;a href="https://www.fsf.org/"&gt;
+                &lt;img src="https://static.fsf.org/common/img/logo-new.png" /&gt;
                 &lt;/a&gt;&lt;/td&gt;
             &lt;/tr&gt;
             &lt;tr&gt;
                 &lt;td&gt;LOONIX!&lt;/td&gt;
                 &lt;td&gt;
-                &lt;a href=&quot;https://www.kernel.org/&quot;&gt;
-                &lt;img src=&quot;https://www.kernel.org/theme/images/logos/tux.png&quot; /&gt;
+                &lt;a href="https://www.kernel.org/"&gt;
+                &lt;img src="https://www.kernel.org/theme/images/logos/tux.png" /&gt;
                 &lt;/a&gt;
                 &lt;/td&gt;
             &lt;/tr&gt;
@@ -303,25 +300,25 @@ world</em>. On it's own, the "a" tag doesn't do anything special. We
 need to use the tag with an <em>attribute</em>--an extra word that comes
 after a--in order to make it work for us. A more basic example might be
 this:</p>
-<pre><code>&lt;a href=&quot;https://example.com&quot;&gt;Example&lt;/a&gt;</code></pre>
+<pre><code>&lt;a href="https://example.com"&gt;Example&lt;/a&gt;</code></pre>
 <p>Which you'll see as:</p>
 <p><a href="https://example.com">Example</a></p>
 <p>The "href" attribute doesn't <em>have</em> to point to some other
 website; it can point to anything. For example, you might want to link
 to picture your cat (maybe hosted at "/var/www/cat.jpg"). You would do
 it like this:</p>
-<pre><code>&lt;a href=&quot;/cat.jpg&quot;&gt;example&lt;/a&gt;</code></pre>
+<pre><code>&lt;a href="/cat.jpg"&gt;example&lt;/a&gt;</code></pre>
 <p>You can also link an email like this</p>
-<pre><code>&lt;a href=&quot;mailto:email@example.com&quot;&gt;example email&lt;/a&gt;
+<pre><code>&lt;a href="mailto:email@example.com"&gt;example email&lt;/a&gt;
 </code></pre>
 <p>Let's say you had a barebones site with 5 HTML files named:
 index.html, about.html, faq.html, cats.html, vidya.html. You can make a
 neat little navbar just using "a" tags like this:</p>
-<pre><code>&lt;a href=&quot;/index.html&quot;&gt;home&lt;/a&gt;
- - &lt;a href=&quot;/about.html&quot;&gt;about&lt;/a&gt;
- - &lt;a href=&quot;/faq.html&quot;&gt;faq&lt;/a&gt;
- - &lt;a href=&quot;/cats.html&quot;&gt;cats&lt;/a&gt;
- - &lt;a href=&quot;/vidya.html&quot;&gt;vidya&lt;/a&gt;</code></pre>
+<pre><code>&lt;a href="/index.html"&gt;home&lt;/a&gt;
+ - &lt;a href="/about.html"&gt;about&lt;/a&gt;
+ - &lt;a href="/faq.html"&gt;faq&lt;/a&gt;
+ - &lt;a href="/cats.html"&gt;cats&lt;/a&gt;
+ - &lt;a href="/vidya.html"&gt;vidya&lt;/a&gt;</code></pre>
 <h3 id="and-everything-else...">And Everything Else...</h3>
 <p>There are many other tags out there, many of which I don't know, and
 one which I mentioned before, but didn't explain yet: the "img" tag. In
@@ -334,18 +331,15 @@ were enclosing sections of text and content. This is simply
 <em>inserting</em> an element right into the document.</p>
 <p>What you can do with the "img" tag, and what you can do with HTML
 tags in general, is limited only by the browser that's reading the HTML.
-The Mozilla Firefox "img" tag has a <a
-href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">long
+The Mozilla Firefox "img" tag has a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">long
 page</a> on all the different attributes and effects you can apply to
 images.</p>
 <p>There are many places you can get all the common elements laid out
 for you, and it's important to bookmark those and refer to them
 frequently when you're thinking about designing your webpage. A common
-referral from search engines is <a
-href="https://www.w3schools.com/">https://www.w3schools.com/</a>, which
+referral from search engines is <a href="https://www.w3schools.com/">https://www.w3schools.com/</a>, which
 is a great resource. I personally like to look at the HTML elements
-reference of a common web browser like <a
-href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Firefox's</a>
+reference of a common web browser like <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Firefox's</a>
 so I know exactly which elements work.</p>
 <p>If you're like me, a referral to a long reference manual can
 sometimes seem kind of daunting. So if you're feeling that way, here's a
@@ -430,7 +424,7 @@ The items in those lists
 </td>
 <td>
 Embeds another html file in the current one. Here's your IP from
-ipaddress.sh:<br> <iframe src="https://ipaddress.sh/"></iframe>
+ipaddress.sh:<br/> <iframe src="https://ipaddress.sh/"></iframe>
 </td>
 </tr>
 </table>
@@ -448,12 +442,12 @@ example:</p>
 <pre><code>&lt;html&gt;
     &lt;head&gt;
         &lt;title&gt;My Great page&lt;/title&gt;
-        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;/&gt;
-        &lt;meta name=&quot;description&quot; content=&quot;a really cool page&quot;&gt;
-        &lt;meta name=&quot;keywords&quot; content=&quot;HTML, CSS, JavaScript&quot;&gt;
-        &lt;meta name=&quot;author&quot; content=&quot;John Doe&quot;&gt;
-        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
-        &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/static/main.css&quot;&gt;
+        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
+        &lt;meta name="description" content="a really cool page"&gt;
+        &lt;meta name="keywords" content="HTML, CSS, JavaScript"&gt;
+        &lt;meta name="author" content="John Doe"&gt;
+        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
+        &lt;link rel="stylesheet" type="text/css" href="/static/main.css"&gt;
     &lt;/head&gt;
     &lt;body&gt;
         &lt;h1&gt;My Great page&lt;/h1&gt;
@@ -492,12 +486,12 @@ Cascading Style Sheets (CSS).</p>
 <p>The "link" tag in the metadata sections can link any external
 resource. It's commonly used to make a "favicon" for example, which is
 the icon you see in the tab of an open page.</p>
-<pre><code>&lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot;&gt;</code></pre>
+<pre><code>&lt;link rel="icon" href="/favicon.ico"&gt;</code></pre>
 <p>In the last example, we instead make a reference to a CSS formatted
 style sheet. Like HTML, CSS is just a text file written in a specific
 syntax. CSS allows you to set attributes to <em>all</em> tags in a
 specific document and create a unifying style for all your pages.</p>
-<pre><code>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/static/main.css&quot;&gt;</code></pre>
+<pre><code>&lt;link rel="stylesheet" type="text/css" href="/static/main.css"&gt;</code></pre>
 <p>As before, "href" points to the file to be linked. In this example,
 we place our CSS in a text file called "main.css" in the "static"
 directory of "/var/www/html".</p>
@@ -505,13 +499,13 @@ directory of "/var/www/html".</p>
 <p>Before we make CSS files, I want to stress the point that all this
 stuff is defined in HTML. You can set these attributes directly in any
 tag we talked about in the last section. For example:</p>
-<pre><code>&lt;p style=&quot;color:red&quot;&gt;this text is red&lt;/p&gt;
-&lt;p style=&quot;color:red;background-color:blue&quot;&gt;this background is blue&lt;/p&gt;
-&lt;p style=&quot;color:red;background-color:blue;text-align:center&quot;&gt;this text is centered&lt;/p&gt;
-&lt;a href=&quot;https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229&amp;episode_no=2&quot;
-    target=&quot;_blank&quot;
-    rel=&quot;noopener noreferrer&quot;
-    style=&quot;color:yellow;background-color:red;text-align:right&quot;
+<pre><code>&lt;p style="color:red"&gt;this text is red&lt;/p&gt;
+&lt;p style="color:red;background-color:blue"&gt;this background is blue&lt;/p&gt;
+&lt;p style="color:red;background-color:blue;text-align:center"&gt;this text is centered&lt;/p&gt;
+&lt;a href="https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229&amp;episode_no=2"
+    target="_blank"
+    rel="noopener noreferrer"
+    style="color:yellow;background-color:red;text-align:right"
     &gt;
     And this links to sonichu
 &lt;/a&gt;</code></pre>
@@ -524,11 +518,7 @@ this background is blue
 <p style="color:red;background-color:blue;text-align:center">
 this text is centered
 </p>
-<p><a href="https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229&episode_no=2"
-    target="_blank"
-    rel="noopener noreferrer"
-    style="color:yellow;background-color:red;text-align:justify;width:100%"
-    > And this links to sonichu </a></p>
+<p><a href="https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229&amp;episode_no=2" rel="noopener noreferrer" style="color:yellow;background-color:red;text-align:justify;width:100%" target="_blank"> And this links to sonichu </a></p>
 <p>This is useful if you want to play around with one section of the
 text, but annoying if you want a style to apply to every paragraph.
 Instead, we tag a list of tags and set <em>all</em> their attributes
@@ -549,15 +539,13 @@ formatting I use for paragraphs is:</p>
     white-space: pre-wrap;
     word-wrap: break-all;
 }</code></pre>
-<p>I get pretty much all the attribute names just by looking them up <a
-href="https://www.w3schools.com/CSSref/default.asp">here</a>. But in
+<p>I get pretty much all the attribute names just by looking them up <a href="https://www.w3schools.com/CSSref/default.asp">here</a>. But in
 order these lines:</p>
 <ul>
 <li>Add padding to the text lines to fill any empty space with space
 characters (this make the background look like a block)</li>
 <li>Increase the font size a bit more than normal</li>
-<li>Set the background color gray, chosen from an <a
-href="https://www.w3schools.com/colors/colors_picker.asp">HTML color
+<li>Set the background color gray, chosen from an <a href="https://www.w3schools.com/colors/colors_picker.asp">HTML color
 picker</a></li>
 <li>preserve white space, like the pre tag does</li>
 <li>break long lines, even in the middle of words</li>
@@ -586,13 +574,9 @@ using the filter option like so:</p>
     filter: grayscale(100%)
 }</code></pre>
 <p>Applied:</p>
-<p><img style="filter:grayscale(100%)"
-src="/static/jazzcat.jpg"
-/></p>
-<p>You can read lots more options for image formatting <a
-href="https://www.w3schools.com/css/css3_images.asp">here</a> and about
-the filter property <a
-href="https://www.w3schools.com/CSSref/css3_pr_filter.asp">here</a></p>
+<p><img src="/static/jazzcat.jpg" style="filter:grayscale(100%)"/></p>
+<p>You can read lots more options for image formatting <a href="https://www.w3schools.com/css/css3_images.asp">here</a> and about
+the filter property <a href="https://www.w3schools.com/CSSref/css3_pr_filter.asp">here</a></p>
 <h3 id="making-custom-classes">Making Custom Classes</h3>
 <p>Sometimes, you might want to apply an effect to some elements but not
 others. An example on this site, I dim the icons a bit so they can
@@ -603,17 +587,15 @@ appear nice on dark theme browsers just as well. But I don't want to dim
 }</code></pre>
 <p>For one, that will only dim black-and-white images; anything else
 will just turn to mush like this:</p>
-<p><img class="icon"
-src="/static/jazzcat.jpg"
-/></p>
+<p><img class="icon" src="/static/jazzcat.jpg"/></p>
 <p>Instead, I'd like it to just apply to select elements; I can do so by
 extending the tag with a class. On the CSS side:</p>
 <pre><code>img.icon {
     filter: invert(50%);
 }</code></pre>
 <p>And to implement it in HTML:</p>
-<pre><code>&lt;img class=&quot;icon&quot; src=&quot;/static/rss.svg&quot; /&gt;</code></pre>
-<p><img class="icon" src="/static/rss.svg" /></p>
+<pre><code>&lt;img class="icon" src="/static/rss.svg" /&gt;</code></pre>
+<p><img class="icon" src="/static/rss.svg"/></p>
 <h4 id="use-the-div-tag-to-make-sections">Use the div tag to make
 sections</h4>
 <p>You can use the class property on <em>any</em> HTML tag, but you can
@@ -630,10 +612,10 @@ section like this:</p>
 but usually we use a placeholder tag called "div." You can think of
 "div" like a divider for content of similar style. In the present
 example, we can use the class we made with a div tag:</p>
-<pre><code>&lt;div class=&quot;content&quot;&gt;
+<pre><code>&lt;div class="content"&gt;
 &lt;h1&gt;My cat&lt;/h1&gt;
-&lt;p&gt;He&#39;s a cool cat&lt;/p&gt;
-&lt;img src=&quot;/cat.jpg&quot; /&gt;
+&lt;p&gt;He's a cool cat&lt;/p&gt;
+&lt;img src="/cat.jpg" /&gt;
 &lt;/div&gt;</code></pre>
 <h3 id="mobile-optimization">Mobile Optimization</h3>
 <p>In early development, reading this site on my phone was a painful
@@ -641,9 +623,7 @@ experience. Fortunately, in addition to some tricks above like the
 "viewport" meta tag, there exist parts of the CSS specification that
 allow you to directly manipulate your website based on properties of the
 user's device or web browser.</p>
-<p>I won't go into as gory details as <a
-href="https://www.w3.org/TR/mediaqueries-4/">here</a> or <a
-href="https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b">here</a>,
+<p>I won't go into as gory details as <a href="https://www.w3.org/TR/mediaqueries-4/">here</a> or <a href="https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b">here</a>,
 but for your basic smartphone, you can copy and paste this block:</p>
 <pre><code>@media screen and (max-device-width: 480px) {
     // override your tags here
@@ -697,16 +677,10 @@ search engine handy, and preferably a few reference manuals handy.
 They're a bit scattered throughout this document, but if you've learned
 nothing else, these are the must haves:</p>
 <ul>
-<li>Mozilla <a
-href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link">HTML</a>
-and <a
-href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">CSS</a></li>
-<li>w3schools <a
-href="https://www.w3schools.com/tags/default.asp">HTML</a> and <a
-href="https://www.w3schools.com/CSSref/default.asp">CSS</a></li>
-<li>The official w3 docs <a
-href="https://dev.w3.org/html5/spec-LC">HTML5</a> and <a
-href="https://www.w3.org/Style/CSS/specs.en.html">All CSS specs</a></li>
+<li>Mozilla <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link">HTML</a>
+and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">CSS</a></li>
+<li>w3schools <a href="https://www.w3schools.com/tags/default.asp">HTML</a> and <a href="https://www.w3schools.com/CSSref/default.asp">CSS</a></li>
+<li>The official w3 docs <a href="https://dev.w3.org/html5/spec-LC">HTML5</a> and <a href="https://www.w3.org/Style/CSS/specs.en.html">All CSS specs</a></li>
 </ul>
 <h2 id="references">References</h2>
 <h3 id="html-1">HTML</h3>
@@ -739,3 +713,4 @@ href="https://www.w3.org/Style/CSS/specs.en.html">All CSS specs</a></li>
 </ol>
 </body>
 </html>
+
diff --git a/update_targets.py b/update_targets.py
new file mode 100644
index 0000000..2052e68
--- /dev/null
+++ b/update_targets.py
@@ -0,0 +1,17 @@
+import sys
+from bs4 import BeautifulSoup
+
+html_doc = open(sys.argv[1], mode="r")
+html =  html_doc.read()
+soup = BeautifulSoup(html, features="lxml")
+for link in soup.find_all("a"):
+    if "href" in link.attrs.keys():
+        if (link['href'].startswith("#")
+                and "tabindex" not in link.attrs.keys()
+                and "target" not in link.attrs.keys()):
+            link['target'] = "_self"
+html_doc.close()
+html_doc = open(sys.argv[1], mode="w")
+print(soup, file=html_doc)
+print("File written")
+
author	mjfernez <mjf@mjfer.net>	2023-07-14 13:21:13 -0400
committer	mjfernez <mjf@mjfer.net>	2023-07-14 13:21:13 -0400
commit	002118777ddf2f81d2894d81bc7fadc64dbbc36f (patch)
tree	e7552ee092e4f4601c96d3a1c97de5f066b637ec
parent	d96c7cad92b025ad80a8fe64f91d1c215272e313 (diff)
download	site-files-002118777ddf2f81d2894d81bc7fadc64dbbc36f.tar.gz