fix: else

content/external/_index.md

@@ -1,5 +1,5 @@
 +++
-title = "Blog"
+title = "Things I find value in sharing"
 sort_by = "date"
 template = "external.html"
 page_template = "page.html"

content/external/external.toml

@@ -1,34 +1,61 @@
-[0-smart-questions]
-title = "How To Ask Questions The Smart Way"
-author = "Eric S. Raymond, Rick Moen"
-permalink = "http://catb.org/~esr/faqs/smart-questions.html"
-archive = "https://archive.ph/4Nsm2"
-
-[1-humanitys-endgame]
+[[categories]]
+title = "Posts"
+  [[categories.posts]]
   title = "Humanity's Endgame"
   author = "Henry Wismayer"
   permalink = "https://www.noemamag.com/humanitys-endgame/"
   archive = "https://archive.ph/wvnUr"
 
-[2-if-all-the-world-were-a-monorepo]
+  [[categories.posts]]
   title = "If all the world were a monorepo"
   author = "Julie Tibshirani"
   permalink = "https://jtibs.substack.com/p/if-all-the-world-were-a-monorepo"
   archive = "https://archive.ph/5ZOw2"
 
-[3-microsoft-broke-my-voice]
+  [[categories.posts]]
+  title = "Education in Brazil"
+  author = "Richard Feynman"
+  permalink = "https://v.cx/2010/04/feynman-brazil-education"
+  archive = "https://archive.ph/BPB7Z"
+
+  [[categories.posts]]
+  title = "Why I am not a professor"
+  author = "Mark Tarver"
+  permalink = "https://marktarver.com/professor.html"
+  archive = "https://archive.ph/g42Dn"
+
+[[categories]]
+title = "Long-form writing"
+  [[categories.posts]]
+  title = "How To Ask Questions The Smart Way"
+  author = "Eric S. Raymond, Rick Moen"
+  permalink = "http://catb.org/~esr/faqs/smart-questions.html"
+  archive = "https://archive.ph/4Nsm2"
+
+[[categories]]
+title = "Series of posts"
+  [[categories.posts]]
+  title = "The computer of the next 200 years"
+  author = "jyn, jade, ..."
+  permalink = "https://jyn.dev/computer-of-the-future"
+  archive = "https://archive.ph/yHkmU"
+
+[[categories]]
+title = "Video"
+note = 'If any of these videos are inaccessible to you, reach out to me and I can provide you with a copy of them.  See [my views on YouTube](/writings/on-youtube).'
+  [[categories.posts]]
   title = "Microsoft broke my voice"
   author = "a_lilian"
   permalink = "https://www.youtube.com/watch?v=LKcT-aQuIFs"
   suffix = "YouTube"
 
-[4-burn-after-watching]
+  [[categories.posts]]
   title = "Burn After Watching"
   author = "a_lilian"
   permalink = "https://www.youtube.com/watch?v=-IargH0hL-s"
   suffix = "YouTube"
 
-[5-lost-ephemera]
+  [[categories.posts]]
   title = "Lost Ephemera - The traces we left behind"
   author = "a_lilian"
   permalink = "https://www.youtube.com/watch?v=xbg-Jjfw2Dg"

content/writings/_index.md

@@ -0,0 +1,7 @@
++++
+title = "Writings"
+sort_by = "date"
+template = "writings.html"
+page_template = "page.html"
+draft = false
++++

content/writings/on-youtube.md

@@ -0,0 +1,15 @@
++++
+title = "On the current state of YouTube"
+date = 2025-11-09
++++
+Over time, but especially as of recent, YouTube has become extremely hostile to users, particularly those who make use of an ad blocker. An arms race has broken out about it, even, to the extent where [yt-dlp](https://github.com/yt-dlp/yt-dlp/) has started having to include Deno, a Javascript engine to be able to succeed at performing the challenges sent.
+
+I spend a surprising quantity of time now following what is going on with YouTube's anti-ad-blocking changes, since it now regularly tells me about how I am violating their terms of service.
+
+This is happening simultaneously with the AI enshittification of the YouTube experience; AI summaries, comment reply suggestions, chatbot to talk about the current video with, automatic dubbing in languages that do not match that of the content and more.
+
+AI content in the form of videos and shorts is being pushed into feeds by algorithms which do not in any way prioritize or share the concerns of the end-user / consumer of that content.
+
+Google's most anti-user and anti-consumer behaviour is the total crippling of Chrome's extension system via [Manifest v3](https://developer.chrome.com/docs/extensions/develop/migrate/what-is-mv3) to restrict the capacity to which ad-blockers can function on their platforms.
+
+All I can think on this is, if Google and YouTube had not existed in the first place and the web had been more decentralized with regards to where we archive and share our multimedia content, we would be in a better position because of a lack of that centralization. YouTube stands as a monopoly over amateur to professional internet shared video where it does not concern traditional publishing and we are all the worse for it, regardless of how Google and YouTube want you to believe that "ads help YouTube be available to billions".

sass/88x31.scss

@@ -0,0 +1,17 @@
+
+.netscape-container img {
+  width: 88px;
+  height: 31px;
+}
+
+.button-container {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: row wrap;
+  gap: .5em;
+  img {
+    align-self: center;
+  }
+}

sass/code.scss

@@ -0,0 +1,10 @@
+code {
+  padding: .5pt 5pt;
+  border: 2px transparent solid;
+}
+
+code:has(pre) {
+  display: block;
+  width: fit-content;
+  margin: 1em 0;
+}

sass/coloring.scss

@@ -0,0 +1,104 @@
+@use "sass:map";
+@use "headings";
+
+// Let's not destroy people's eyes unless they want that
+$theme: dark !default;
+
+$themes: (
+  light: (
+    bg: #fcfcfc,
+    fg: #333,
+    border: #333,
+    code: #eee,
+    heading: #111,
+    a-link: #16b1bd,
+    a-hover: #37DCE8,
+    a-visited: #3784e8,
+  ),
+  dark: (
+    bg: #141414,
+    fg: #ddd,
+    border: #ddd,
+    code: #282828,
+    heading: #eee,
+    a-link: #16b1bd,
+    a-hover: #37DCE8,
+    a-visited: #3784e8,
+  )
+);
+
+@function color($name, $theme: $theme) {
+  @return map-get(
+    map-get($themes, $theme),
+    $name
+  );
+}
+
+@mixin link_state($name, $theme: $theme) {
+  $color: color("a-#{$name}", $theme);
+  @if $name == "link" {
+    a, a:#{$name} {
+      color: $color;
+    }
+  }
+  @else {
+    a:#{$name} {
+      color: $color;
+      @if $name == "hover" {
+        border-bottom-color: $color;
+      }
+    }
+  }
+  a:#{$name} {
+    @include headings.headings {
+      color: $color;
+      @if $name == "hover" {
+        border-bottom-color: $color;
+      }
+    }
+  }
+}
+
+@mixin set-colors($theme: $theme) {
+  color: color(fg, $theme);
+  background: color(bg, $theme);
+  @include headings.headings {
+    color: color(heading, $theme);
+  }
+  code {
+    background: color(code, $theme);
+    border-color: color(border, $theme);
+  }
+  $link_states: "link", "visited", "hover";
+  @each $name in $link_states {
+    @include link_state($name, $theme);
+  }
+
+  a:hover:has(img) img {
+    border-color: color(a-hover, $theme);
+  }
+}
+
+html {
+  @include set-colors;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+  @include set-colors(dark);
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  html {
+    @include set-colors(light);
+  }
+}
+
+html:has(#color-scheme-dark:checked) {
+  @include set-colors(dark);
+}
+
+html:has(#color-scheme-light:checked) {
+  @include set-colors(light);
+}

sass/footer.scss

@@ -0,0 +1,18 @@
+@use "sticky";
+
+/* We want the footer to be like two columns, where the right columns are also right-aligned and the columns grow to share the space sanely. */
+
+footer nav ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    li {
+        padding: 0;
+        margin: 0;
+        &:nth-child(2n) {
+            text-align: right;
+        }
+    }
+}

sass/header.scss

@@ -0,0 +1,15 @@
+header nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  li {
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+    flex-grow: 1;
+    text-align: center;
+  }
+}

sass/headings.scss

@@ -0,0 +1,5 @@
+@mixin headings {
+  h1, h2, h3, h4, h5, h6 {
+    @content;
+  }
+}

sass/helper.scss

@@ -0,0 +1,4 @@
+ul.two {
+  column-count: 2;
+}
+

sass/images.scss

@@ -0,0 +1,23 @@
+img {
+    /* Make sure that the images do not overflow the body */
+    max-width: 100%;
+    /* Make sure that the images are not too tall as to be annoying */
+    max-height: 50ch;
+}
+
+#gallery {
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    column-count: 2;
+  }
+}
+
+a:has(img) {
+  border-bottom: none !important;
+  padding: 0.02rem;
+  img {
+    border: 0.01em transparent solid;
+  }
+}

sass/nonoscript.scss

@@ -0,0 +1,4 @@
+/* A kindness to those of you who don't use Javascript */
+.nonoscript {
+  display: none;
+}

sass/sticky.scss

@@ -0,0 +1,28 @@
+/*
+  https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Sticky_footers
+*/
+
+html, body {
+  height: 100vh;
+}
+
+html, body, .wrapper {
+  min-height: 100%;
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas: "header" "main" "footer";
+  grid-template-rows: auto 1fr auto;
+  header {
+    grid-area: header;
+  }
+  main {
+    grid-area: main;
+    display: block;
+  }
+  footer {
+    grid-area: footer;
+  }
+}

sass/stylesheet.scss

@@ -2,40 +2,30 @@
   Made with love by @kittywitch ^_^
 */
 
-$light-bg: #fcfcfc;
-$light-fg: #333;
-$light-code: #eee;
-$light-heading: #111;
-$dark-bg: #141414;
-$dark-fg: #ddd;
-$dark-code: #282828;
-$dark-heading: #eee;
-$link-base: #16b1bd;
-$link-hover: #37DCE8;
-$link-visited: #3784e8;
+@use "headings";
+@use "coloring";
+@use "code";
+@use "footer";
+@use "header";
+@use "images";
+@use "nonoscript";
+@use "helper";
+@use "88x31" as netscape;
 
 * {
   box-sizing: border-box;
 }
 
-html {
-  color: $dark-fg;
-  background: $dark-bg;
-  h1, h2, h3 {
-    color: $dark-heading;
-  }
+/* For the subculture "code" dropdowns */
 summary > h3 {
   display: inline-block;
 }
-  code {
-    background: $dark-code;
-    padding: .5pt 5pt;
-    border: $dark-fg 2px solid;
-  }
-  code:has(pre) {
-    display: block;
+
+/* Otherwise the border overflows the content */
+
+a {
+  @include headings.headings {
     width: fit-content;
-    margin: 1em 0;
   }
 }
 
@@ -50,157 +40,11 @@ body {
     padding: 1em;
 }
 
-/* A kindness to those of you who don't use Javascript */
-.nonoscript {
-  display: none;
-}
-
-#gallery {
-  ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    column-count: 2;
-    li {
-      img {
-      }
-    }
-  }
-}
-
-img {
-    /* Make sure that the images do not overflow the body */
-    max-width: 100%;
-    /* Make sure that the images are not too tall as to be annoying */
-    max-height: 50ch;
-}
-
-header nav ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
-  li {
-    display: inline-block;
-    padding: 0;
-    margin: 0;
-    flex-grow: 1;
-    text-align: center;
-  }
-}
-
-ul.two {
-  column-count: 2;
-}
-
-a, a:link {
+// Set the border to exist before colouration on hover so that it doesn't resize the element
+a, a:link, a:visited {
   text-decoration: none;
-  color: $link-base;
-}
-
-a:visited {
-  text-decoration: none;
-  color: $link-visited;
-}
-
-.netscape-container img {
-  width: 88px;
-  height: 31px;
-}
-
-.button-container {
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-flow: row wrap;
-  gap: .5em;
-  img {
-    align-self: center;
-  }
-}
-
-a:hover {
-  text-decoration: none;
-  color: $link-hover;
-  border-bottom: 0.01rem $link-hover solid;
-}
-
-a:hover:has(img) {
-  border: none;
-  padding: 0.02rem;
-  img {
-    border: 0.01rem $link-hover solid;
-  }
-}
-
-/* We want the footer to be like two columns, where the right columns are also right-aligned and the columns grow to share the space sanely. */
-
-footer nav ul {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    li {
-        padding: 0;
-        margin: 0;
-        &:nth-child(2n) {
-            text-align: right;
-        }
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color: $dark-fg;
-    background: $dark-bg;
-    h1, h2, h3 {
-      color: $dark-heading;
-    }
-    code {
-      background: $dark-code;
-      border: $dark-fg 2px solid;
-    }
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  html {
-    color: $light-fg;
-    background: $light-bg;
-    h1, h2, h3 {
-      color: $light-heading;
-    }
-    code {
-      background: $light-code;
-      border: $light-fg 2px solid;
-    }
-  }
-}
-
-html:has(#color-scheme-dark:checked) {
-  color: $dark-fg;
-  background: $dark-bg;
-  h1, h2, h3 {
-    color: $dark-heading;
-  }
-  code {
-    background: $dark-code;
-    border: $dark-fg 2px solid;
-  }
-}
-
-html:has(#color-scheme-light:checked) {
-  color: $light-fg;
-  background: $light-bg;
-  h1, h2, h3 {
-    color: $light-heading;
-  }
-  code {
-    background: $light-code;
-    border: $light-fg 2px solid;
+  border-bottom: 0.01em transparent solid;
+  @include headings.headings {
+    border-bottom: 0.01em transparent solid;
   }
 }

static/nonoscript.js

@@ -2,7 +2,6 @@ function nonoscriptImplementer() {
   var nonoscript = document.getElementsByClassName("nonoscript");
   console.log(nonoscript);
   for (let item of nonoscript) {
-    console.log("meep!");
     item.classList.remove("nonoscript");
   }
 }

templates/base.html

@@ -18,7 +18,7 @@
   </head>
 
   <body>
-    <div>
+    <div class="wrapper">
       <header>
         {% include "header.html" %}
       </header>

templates/external.html

@@ -1,19 +1,27 @@
 {% extends "base.html" %}
 
 {% block content %}
-<section id="blogposts">
+<section id="external">
   <h2>Things I find value in sharing</h2>
-  <ul>
   {% set data = load_data(path="content/external/external.toml") %}
-  {% for k, v in data %}
+  {% for category in data.categories %}
+  <section>
+    <h3>{{ category.title }}</h3>
+    {% if category.note is defined %}
+    <p>{{ category.note | markdown(inline = true) | safe }}</p>
+    {% endif %}
+    <ul>
+    {% for post in category.posts %}
     <li>
       <article>
-        <a href="{{v.permalink | safe}}"><strong>{{ v.title }}</strong></a>
-        {% if v.author is defined %} by {{ v.author }}{% endif %}{% if v.archive is defined %} - <a href="{{v.archive}}">Archive</a> {% endif %}{% if v.suffix is defined %} ({{ v.suffix }}){% endif %}
+          <a href="{{post.permalink | safe}}"><strong>{{ post.title }}</strong></a>
+          {% if post.author is defined %} by {{ post.author }}{% endif %}{% if post.archive is defined %} - <a href="{{post.archive}}">Archive</a> {% endif %}{% if post.suffix is defined %} ({{ post.suffix }}){% endif %}
       </article>
     </li>
     {% endfor %}
     </ul>
   </section>
+  {% endfor %}
+</section>
 {% endblock content %}
 

templates/header.html

@@ -5,7 +5,8 @@
   <ul>
     <li><a href="/">Home</a></li>
     <li><a href="/blog">Blog</a></li>
-    <li><a href="/external">External</a></li>
+    <li><a href="/writings">Writings</a></li>
+    <li><a href="/external">Things I find value in sharing</a></li>
   </ul>
 </nav>
 <hr>

templates/index.html

@@ -4,7 +4,80 @@
 <section id="about">
   <h2>About</h2>
 
-  Hi! I'm Kat. I have an eclectic range of interests; as described on this page.
+  <p>Hi! I'm Kat. I have an eclectic range of interests; as described on this page.</p>
+
+  <p>If you find this website's font ugly, it's because you haven't set your default fonts up properly! Fonts here are left as an exercise up to the reader, I don't assume I will know what is best for your eyes better than you do, nor do I want to ship a webfont to you. I personally am currently using <a href="https://www.brailleinstitute.org/freefont/">Atkinson Hyperlegible Next</a>, a recommendation from a friend.</p>
+</section>
+
+<section id="projects">
+  <h2>Projects</h2>
+
+  Please see <a href="https://git.kittywit.ch/kat">my Forgejo</a> and <a href="https://github.com/kittywitch">my GitHub</a>.
+
+  <h3>Notable items showcase</h3>
+  <nav>
+      <ul>
+              <li>
+                  <article>
+                      <a href="https://github.com/TaimiHUD/TaimiHUD">
+                          <h3>TaimiHUD/TaimiHUD</h3>
+                      </a>
+                      <p>A Rust Guild Wars 2 addon that provides Encounter Timers, Squad Marker Presets and Pathing for Nexus and ArcDPS.</p>
+                  </article>
+              </li>
+              <li>
+                  <article>
+                      <a href="https://github.com/kittywitch/nixfiles">
+                          <h3>kittywitch/nixfiles</h3>
+                      </a>
+                      <p>Personal NixOS + Terraform infrastructure repository.</p>
+                  </article>
+              </li>
+              <li>
+                  <article>
+                      <a href="https://github.com/gensokyo-zone/infrastructure">
+                          <h3>gensokyo-zone/infrastructure</h3>
+                      </a>
+                      <p>Apartment NixOS + Terraform infrastructure repository, a project with my wife!</p>
+                  </article>
+              </li>
+      </ul>
+  </nav>
+
+</section>
+
+<section id="interests">
+  <h2>Interests</h2>
+
+  <ul class="two">
+    <li>Japanese (pre-JLPT)</li>
+    <li>Video Games</li>
+    <li>Hobbyist Electronics</li>
+    <li>Software-defined Radio</li>
+    <li>Amateur Radio (not yet licensed!)</li>
+    <li>Firearms (not yet licensed!)</li>
+    <li>Anime and Manga</li>
+    <li>3D Printing</li>
+    <li>Mechanical Keyboards</li>
+    <li>Political science and theory</li>
+  </ul>
+</section>
+
+<section id="tech-interests">
+  <h2>Tech Interests</h2>
+
+  <ul class="two">
+    <li>Software Development</li>
+    <li>Video Game Modding</li>
+    <li>System Administration</li>
+    <li>DevSecOps + GitOps</li>
+    <li>Smart Home</li>
+    <li>Cyber Security</li>
+  </ul>
+</section>
+
+<section id="subcultures">
+  <h2>Subcultures</h2>
 
   <section id="furrycode">
     <details>
@@ -104,76 +177,6 @@ b D+ G e++ h--- r+++ x+
   <a href="https://qalle.neocities.org/88x31/"><img src="/88x31/qalle.png" alt="qalle"/></a>
   <a href="https://capstasher.neocities.org/"><img src="/88x31/capstasher.png" alt="capstasher"></a>
   <a href="https://hellnet.work">hellnet.work</a>
-  <hr>
-</section>
-
-<section id="projects">
-  <h2>Projects</h2>
-
-  Please see <a href="https://git.kittywit.ch/kat">my Forgejo</a> and <a href="https://github.com/kittywitch">my GitHub</a>.
-
-  <h3>Notable items showcase</h3>
-  <nav>
-      <ul>
-              <li>
-                  <article>
-                      <a href="https://github.com/TaimiHUD/TaimiHUD">
-                          <h3>TaimiHUD/TaimiHUD</h3>
-                      </a>
-                      <p>A Rust Guild Wars 2 addon that provides Encounter Timers, Squad Marker Presets and Pathing for Nexus and ArcDPS.</p>
-                  </article>
-              </li>
-              <li>
-                  <article>
-                      <a href="https://github.com/kittywitch/nixfiles">
-                          <h3>kittywitch/nixfiles</h3>
-                      </a>
-                      <p>Personal NixOS + Terraform infrastructure repository.</p>
-                  </article>
-              </li>
-              <li>
-                  <article>
-                      <a href="https://github.com/gensokyo-zone/infrastructure">
-                          <h3>gensokyo-zone/infrastructure</h3>
-                      </a>
-                      <p>Apartment NixOS + Terraform infrastructure repository, a project with my wife!</p>
-                  </article>
-              </li>
-      </ul>
-  </nav>
-
-</section>
-
-<hr>
-
-<section id="interests">
-  <h2>Interests</h2>
-
-  <ul class="two">
-    <li>Japanese (pre-JLPT)</li>
-    <li>Video Games</li>
-    <li>Hobbyist Electronics</li>
-    <li>Software-defined Radio</li>
-    <li>Amateur Radio (not yet licensed!)</li>
-    <li>Firearms (not yet licensed!)</li>
-    <li>Anime and Manga</li>
-    <li>3D Printing</li>
-    <li>Mechanical Keyboards</li>
-    <li>Political science and theory</li>
-  </ul>
-</section>
-
-<section id="tech-interests">
-  <h2>Tech Interests</h2>
-
-  <ul class="two">
-    <li>Software Development</li>
-    <li>Video Game Modding</li>
-    <li>System Administration</li>
-    <li>DevSecOps + GitOps</li>
-    <li>Smart Home</li>
-    <li>Cyber Security</li>
-  </ul>
 </section>
 
 {% endblock content %}

templates/page.html

@@ -4,6 +4,6 @@
 <h1 class="title">
   {{ page.title }}
 </h1>
-<p class="subtitle"><strong><time>{{ page.date }}</time></strong></p>
+<p class="subtitle"><strong><time>Posted: {{ page.date }}</time></strong></p>
 {{ page.content | safe }}
 {% endblock content %}

templates/writings.html

@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+
+{% block content %}
+<section id="writings">
+  <h2>Writings</h2>
+  <ul>
+  {% for post in section.pages %}
+  <li>
+    <article>
+      <a href="{{post.permalink | safe}}"><h3>{{ post.title }}</h3></a>
+      <p>Posted: <time>{{ post.date }}</time></p>
+    </article>
+  </li>
+  {% endfor %}
+  </ul>
+</section>
+{% endblock content %}
+