Merge pull request #43 from ethmarks/rework-post-frontmatter

ethmarks · web-flow · commit 233394447136 · 2025-12-21T21:35:54.000-05:00
Rework post frontmatter
diff --git a/assets/media/icons/webpage.svg b/assets/media/icons/webpage.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 546 546">
+  <path
+        d="M248 545A275 275 0 0 1 3 313 275 275 0 0 1 233 3a265 265 0 0 1 237 81 269 269 0 0 1 48 310 273 273 0 0 1-270 151m9-90v-54h-22l-61 5 14 33c14 29 34 53 54 64l14 7zm44 50q14-6 27-21 17-18 30-44l14-33c-1-1-43-5-62-5l-21-1v109l2-1zm-119-14a274 274 0 0 1-41-81l-57 12a220 220 0 0 0 79 66l23 10q1-2-4-7m200-3a243 243 0 0 0 78-64c-2-2-54-14-55-13l-6 14a278 278 0 0 1-40 73zm102-99a252 252 0 0 0 29-96v-4h-88l-1 18a441 441 0 0 1-11 73l67 16zm-409 3 57-14-2-15c-4-19-6-35-8-56l-1-18H33v4c0 13 6 41 13 59 6 20 17 42 20 42zm309-29q6-30 8-62l1-12H289v80h20l72 5zm-190 9 40-3h23v-80H154v5c0 15 4 47 8 70l3 11 5-1zm-72-128a491 491 0 0 1 10-79l-12-3-53-13a243 243 0 0 0-34 103v5h88zm135-27v-41h-10l-23-2-54-4-5-1-3 11c-4 22-8 56-8 71v6h103zm135 27a465 465 0 0 0-10-73h-8l-67 5h-18v81h104zm121 5q-4-42-24-84c-9-16-6-15-22-11l-53 12 2 15c5 25 9 55 9 70v6h88zM257 89V34l-4 2c-19 7-41 26-56 52-7 12-24 49-23 50s50 5 79 6h4zm89 52 25-2c2-2-12-35-22-51q-24-40-56-52l-4-2v110l16-1zm75-9 39-9q1-2-6-10a240 240 0 0 0-92-64l5 9q20 27 34 65l5 11zm-279-1 5-11a268 268 0 0 1 37-71l-20 9a239 239 0 0 0-77 63z"
+    />
+</svg>
diff --git a/content/about/_index.md b/content/about/_index.md
@@ -36,7 +36,7 @@ I'm **15** years old
 | [Programming](/tags/programming) |
 | [Automation](/tags/automation) |
 | Mathematics |
-| [Cryptology](/tags/cryptology) |
+| [Cryptography](/tags/cryptography) |
 | [Linguistics](/tags/language/) |
 | [Cartography](/tags/cartography) |
 {{< /compact-table >}}
diff --git a/content/posts/anagram.md b/content/posts/anagram.md
@@ -4,9 +4,7 @@ published: 2025-05-12
 created: 2025-04-18
 tags: [projects, programming, language, colab]
 description: A simple little Jupyter notebook to create anagram GIFs
-link: https://colab.research.google.com/drive/1MqpogsUUTuzctVKgg8n8btD3WUuENPAK
-link_name: Colab Notebook
-link_icon: colab
+colab: https://colab.research.google.com/drive/1MqpogsUUTuzctVKgg8n8btD3WUuENPAK
 ---
 
 An [Anagram](https://en.wikipedia.org/wiki/Anagram) is a word created by rearranging the letters of another word.
diff --git a/content/posts/asciiglobe.md b/content/posts/asciiglobe.md
@@ -4,9 +4,7 @@ published: 2025-05-09
 created: 2025-01-18
 tags: [projects, programming, github, cartography]
 description: A text-based cartographic rendering engine that uses NASA satellite data
-link: https://github.com/ethmarks/ASCII-Globe
-link_name: GitHub Repo
-link_icon: github
+github: https://github.com/ethmarks/ASCII-Globe
 ---
 
 Have you ever wanted to see what the Earth looks like in text form?
diff --git a/content/posts/backronyms.md b/content/posts/backronyms.md
@@ -3,6 +3,7 @@ title: Backronyms
 published: 2025-06-09
 tags: [humor, language]
 description: A fun list of backronyms
+wikipedia: https://en.wikipedia.org/wiki/Backronym
 ---
 
 Did you know that [LASER](https://en.wikipedia.org/wiki/Laser) is an [acronym](https://en.wikipedia.org/wiki/Acronym)? It stands for Light Amplification by Stimulated Emission of Radiation (I'm not making this up).
diff --git a/content/posts/blips.md b/content/posts/blips.md
@@ -2,11 +2,10 @@
 title: Blips
 published: 2025-12-20
 created: 2025-10-07
-tags: [projects, programming, webdev, github, personal website]
+tags: [projects, programming, webdev, svelte, github, personal website]
 description: "My personal micro-blog; it's basically Ethan-flavoured Tumblr"
-link: https://github.com/ethmarks/blips
-link_name: GitHub Repo
-link_icon: github
+github: https://github.com/ethmarks/blips
+webpage: https://ethmarks.github.io/blips/
 ---
 
 [Blips](https://ethmarks.github.io/blips/) is my personal microblog. Whereas my [Posts](/posts) (like the one you're reading right now) are long-form articles, my blips are smaller, more spontaneous updates. Just little "blips" on a radar.
diff --git a/content/posts/classlessspearmint.md b/content/posts/classlessspearmint.md
@@ -3,9 +3,7 @@ title: ClasslessSpearmint
 published: 2025-07-20
 tags: [projects, webdev, programming, github, ai, codepen]
 description: ClasslessSpearmint is a Classless CSS style that aesthetically styles raw HTML with my website's theme without needing to assign HTML classes
-link: https://github.com/ethmarks/ClasslessSpearmint
-link_name: GitHub Repo
-link_icon: github
+github: https://github.com/ethmarks/ClasslessSpearmint
 ---
 
 Whenever I throw together a simple [CodePen](/tags/codepen) for a quick demo (e.g. for my [text scramble animation](/posts/scrambleanim)), I usually include this single line of code.
diff --git a/content/posts/collectivenoun.md b/content/posts/collectivenoun.md
@@ -3,6 +3,7 @@ title: Collective Nouns
 published: 2025-04-23
 tags: [language]
 description: A collection of amusing and obscure collective nouns for animals.
+wikipedia: https://en.wikipedia.org/wiki/Collective_noun
 ---
 
 A [collective noun](https://en.wikipedia.org/wiki/Collective_noun) is a word that names a group of people, animals, or things treated as a single entity. For example, a 'class' is the collective noun for students. A class is grammatically treated as a singular object even though it's composed of multiple students.
diff --git a/content/posts/colourlesstransformer.md b/content/posts/colourlesstransformer.md
@@ -4,9 +4,7 @@ published: 2025-05-13
 created: 2024-12-22
 tags: [projects, programming, github, ai, webdev, automation]
 description: My Gradio interface for PaintTransformer, a neural image filter that turns photos into paint timelapses
-link: https://github.com/ethmarks/ColourlessTransformer
-link_name: GitHub Repo
-link_icon: github
+github: https://github.com/ethmarks/ColourlessTransformer
 ---
 
 [PaintTransformer](https://github.com/Huage001/PaintTransformer) is a neural network that approximates images using paint strokes. This gives it a very pretty and stylized watercolor/painterly aesthetic.
diff --git a/content/posts/eliza.md b/content/posts/eliza.md
@@ -4,9 +4,7 @@ title: Eliza
 published: 2024-12-17
 tags: [projects, programming, ai, history, colab]
 description: My implementation of the 1966 chatbot Eliza
-link: https://colab.research.google.com/drive/1RQ2-HzSdCBQfYQZu6OSrYlOgOHqbQpn_
-link_name: Colab Notebook
-link_icon: colab
+colab: https://colab.research.google.com/drive/1RQ2-HzSdCBQfYQZu6OSrYlOgOHqbQpn_
 ---
 
 [ELIZA](https://en.wikipedia.org/wiki/ELIZA) was the first computer chatbot. Think of it as the great-great-great-grandparent of ChatGPT.
diff --git a/content/posts/floodfilltext.md b/content/posts/floodfilltext.md
@@ -4,9 +4,7 @@ title: Flood Fill Text
 published: 2025-06-30
 tags: [projects, programming, webdev, codepen]
 description: a codepen to generate meme-y gif animations where individual characters of text flood fill outwards
-link: https://codepen.io/ethmarks/pen/YPXMvxg
-link_name: CodePen
-link_icon: codepen
+codepen: https://codepen.io/ethmarks/pen/YPXMvxg
 ---
 
 A few weeks ago, a friend sent me this reaction GIF.
diff --git a/content/posts/fphf.md b/content/posts/fphf.md
@@ -1,11 +1,9 @@
 ---
 title: "Fixed-Point Hash Finder"
 published: 2025-12-21
-tags: [projects, cryptology, github, programming, rust, webdev]
+tags: [projects, cryptography, github, programming, rust, webdev, svelte]
 description: a Rust tool that finds strings that contain part of their own SHA-256 hash
-link: https://github.com/ethmarks/fphf
-link_name: GitHub Repo
-link_icon: github
+github: https://github.com/ethmarks/fphf
 ---
 
 ![A screenshot of fphf being used in a terminal window against an abstract blue desktop wallaper. After running the command "fphf", the terminal fills with status info as the process runs before eventually returning the string "The SHA-256 hash of this sentence begins with b43c8b9." and the hash "b43c8b96f151033a566e148d45c43aa84ba153ff9407397f23d5eb43112bb5e1"](~/fphf_konsole.webp)
diff --git a/content/posts/personalwebsite.md b/content/posts/personalwebsite.md
@@ -4,9 +4,8 @@ published: 2025-05-14
 created: 2025-04-03
 tags: [projects, programming, github, webdev, personal website]
 description: The website you're reading right now
-link: https://github.com/ethmarks/ethmarks.github.io
-link_name: GitHub Repo
-link_icon: github
+github: https://github.com/ethmarks/ethmarks.github.io
+webpage: https://ethmarks.github.io
 ---
 
 My personal website is my home on the web.
diff --git a/content/posts/saltassociation.md b/content/posts/saltassociation.md
@@ -1,10 +1,10 @@
 ---
+unlisted: true
 title: A website about Salt
 published: 2025-06-11
 tags: [curios]
 description: A description of https://saltassociation.co.uk/, a website devoted entirely to salt
 link: https://saltassociation.co.uk/
-link_name: Website
 ---
 
 Salt is my favorite mineral. It's easily the most delicious (Sitenote: despite its name, [Cinnabar](https://en.wikipedia.org/wiki/Cinnabar) is actually not tasty at all), it [looks awesome under an electron microscope](https://salinity.oceansciences.org/media/ed_image_81_salt_crystal.jpg), and it's so abundant that it forms colossal salt caverns and vast salt flats.
diff --git a/content/posts/scrambleanim.md b/content/posts/scrambleanim.md
@@ -3,9 +3,7 @@ title: Text Scramble Animation
 published: 2025-06-29
 tags: [programming, webdev, codepen]
 description: A demonstration of my text scrambling JavaScript animation
-link: https://codepen.io/ethmarks/pen/jEPRNXG
-link_name: CodePen
-link_icon: codepen
+codepen: https://codepen.io/ethmarks/pen/jEPRNXG
 ---
 
 Earlier today, [Brad Woods Digital Garden](https://garden.bradwoods.io/) made it to the [front page of HN](https://news.ycombinator.com/item?id=44393920). I had never heard of this website before, so I clicked on the link and explored it. As it turns out, it's the web development blog of [Brad Woods](https://bradwoods.io/). It's also one of the most detailed and high-effort webpages I've seen in quite a while, and the [blog content](https://garden.bradwoods.io/notes/svg/scroll-driven-draw-animation) is high-quality and very interesting. But what really stood out to me was how most of the text on the page initially appears scrambled, and then gets "solved" in a quirky scramble animation.
diff --git a/content/posts/screamcipher.md b/content/posts/screamcipher.md
@@ -1,11 +1,9 @@
 ---
 title: Scream Cipher Converter
 published: 2025-06-06
-tags: [programming, codepen, humor, cryptology, automation]
+tags: [programming, codepen, humor, cryptography, automation]
 description: An online converter to and from the Scream Cipher, a cipher where each letter is represented by diacritical variations of 'A'
-link: https://codepen.io/ethmarks/full/XJbwKgo
-link_name: CodePen
-link_icon: codepen
+codepen: https://codepen.io/ethmarks/full/XJbwKgo
 ---
 
 ![An xkcd comic describing a cipher where encrypted messages consist of only the letter 'A', with different diacritics applied to the 'A' to represent each plaintext letter of the alphabet](~/xkcd_scream_cipher.webp "Original: https://xkcd.com/3054/")
diff --git a/content/posts/thessa.md b/content/posts/thessa.md
@@ -3,9 +3,8 @@ title: Thessa
 published: 2025-05-21
 tags: [projects, programming, github, webdev, ai]
 description: An AI-powered thesaurus that uses the Gemini API
-link: https://github.com/ethmarks/thessa
-link_name: GitHub Repo
-link_icon: github
+github: https://github.com/ethmarks/thessa
+webpage: https://ethmarks.github.io/thessa
 ---
 
 *Note: As of 2025-11-07 I am currently in the middle of refactoring Thessa. Some of the information in this post may be outdated. I'll update this post after all refactorings are complete*.
diff --git a/content/posts/torontoshadow.md b/content/posts/torontoshadow.md
@@ -1,7 +1,7 @@
 ---
 title: Volumetric Shadows in Toronto
 published: 2025-07-17
-tags: [travel, curio, physics]
+tags: [travel, curios, physics]
 description: A neat photo I took that demonstrates the air quality of Toronto via the volumetric shadow cast by the CN Tower
 ---
 
diff --git a/content/posts/waterman.md b/content/posts/waterman.md
@@ -3,9 +3,7 @@ title: The Waterman Butterfly
 published: 2025-04-25
 tags: [curios, cartography]
 description: An exploration of the Waterman Butterfly map projection, its advantages, disadvantages, and visual appeal.
-link: https://en.wikipedia.org/wiki/Waterman_butterfly_projection
-link_name: Wikipedia Article
-link_icon: wikipedia
+wikipedia: https://en.wikipedia.org/wiki/Waterman_butterfly_projection
 ---
 
 I'm willing to bet that you've seen a map of the Earth before.
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
@@ -16,12 +16,44 @@ <h1 class="animated title">{{ .Title }}</h1>
         {{- end }}
     </div>
     {{ end }}
-    {{- if .Params.link }}
+    {{- if or .Params.github .Params.colab .Params.codepen .Params.wikipedia .Params.link }}
     <div class="external-link-row">
+        {{- if .Params.github }}
+        <a class="external-link" href="{{ .Params.github }}">
+            <img src="/media/icons/github.svg" alt="GitHub icon" />
+            <span>GitHub Repo</span>
+        </a>
+        {{ end }}
+        {{- if .Params.colab }}
+        <a class="external-link" href="{{ .Params.colab }}">
+            <img src="/media/icons/colab.svg" alt="Google Colab icon" />
+            <span>Colab Notebook</span>
+        </a>
+        {{ end }}
+        {{- if .Params.codepen }}
+        <a class="external-link" href="{{ .Params.codepen }}">
+            <img src="/media/icons/codepen.svg" alt="CodePen icon" />
+            <span>CodePen</span>
+        </a>
+        {{ end }}
+        {{- if .Params.wikipedia }}
+        <a class="external-link" href="{{ .Params.wikipedia }}">
+            <img src="/media/icons/github.svg" alt="Wikipedia icon" />
+            <span>Wikipedia Article</span>
+        </a>
+        {{ end }}
+        {{- if .Params.webpage }}
+        <a class="external-link" href="{{ .Params.webpage }}">
+            <img src="/media/icons/webpage.svg" alt="web icon" />
+            <span>Webpage</span>
+        </a>
+        {{ end }}
+        {{- if .Params.link }}
         <a class="external-link" href="{{ .Params.link }}">
-            <img src="/media/icons/{{ .Params.link_icon | default "link" }}.svg" alt="{{ .Params.link_icon | default "link" }} icon" />
-            <span>{{ .Params.link_name | default "External Link" }}</span>
+            <img src="/media/icons/link.svg" alt="link icon" />
+            <span>Link</span>
         </a>
+        {{ end }}
     </div>
     {{ end }}
     </div>
