Initial commit

8 files changed, 324 insertions, 0 deletions

diff --git a/posts/20221024-static-site-generators.md b/posts/20221024-static-site-generators.md
new file mode 100644
index 0000000..a8a3740
--- /dev/null
+++ b/posts/20221024-static-site-generators.md
@@ -0,0 +1,82 @@
+---
+date: 2022-10-24
+title: Static Site Generators
+---
+
+So my current fascination is static site generators---programs that you can
+feed, for example, a set of plain-text blog files, and have them rendered
+into a folder full of "static" HTML files that can be deployed directly to a
+webserver with no "moving parts."
+
+Websites made of static files are nice, both because those files are very easy
+to cache for a significant speed up at load time, and because the number of
+places security holes could be hiding is greatly reduced. This blog uses an SSG
+called [Eleventy.js](https://www.11ty.dev/).
+
+## Why don't you just use \_\_\_\_\_\_?
+
+I didn't want to use a standard blog platform for a couple of reasons: first,
+hosting it myself gives me ultimate control of the content I produce, forever.
+I'm not interested in having someone else monetize my work with ads or
+paywalls. I don't need the extra features those platforms would present to
+me---I'm not worried about SEO or growing my readership; I have ADHD, and if
+I'm honest with myself, I'm not sure this attempt at a blog will last any
+longer than the previous ones.
+
+Second, I like making things myself, even when I'm kinda sorta reinventing the
+wheel. It may take more time, but I always give familiar skills a good stretch,
+and I almost always learn something new. I find the process kinda, like...
+meditative, and fulfilling, and I *love* how what I produce at the end fits me
+and my process like a glove. Being able to write in Markdown in vim and save my
+entire site in a [self-hosted Git
+repository](https://git.alexishovorka.com/blog.git/) feels extremely comfy to
+me.
+
+And finally third, which is sort of a fusion of the previous two: doing it
+myself lets me experiment much more easily. Adding a light/dark mode switch
+like the one in the top right corner to a standard-issue blog template would
+have taken me a lot more work. But since I designed this entire site from
+scratch, it only took me a handful of lines of code that go right where I want
+to put them. And all the little icons around the site---it was fun playing
+around with CSS shapes again, instead of just slapping down SVGs or PNGs or
+whatever.
+
+## My Setup
+
+The best description of my setup would be [the actual
+code](https://git.alexishovorka.com/blog.git/) since it's bound to evolve at
+least somewhat from anything I could write here. I'll go over some of the
+trickier bits here though.
+
+The cleanest way I found to set a default page template in Eleventy.js was to
+create a file at `globals/layout.js` which masks what would otherwise have been
+generated by the system up to that point. At time of writing, it's pretty
+short, just one line:
+
+```js
+module.exports = "post.njk";
+```
+
+`post.njk` is the layout template file for the page for an individual post.
+
+The same goes for the default page titles inside `globals/eleventyComputed.json`:
+
+```json
+{
+  {% raw %}"pageTitle": "{{ title | safe }} – {{ metadata.title | safe }}"{% endraw %}
+}
+```
+
+Figuring out the most optimal way to set up the history pages took a little
+doing. What I've settled on for now is putting them under `/archive/` with
+`/archive/1/` being blurbs from the first five posts (once I've written that
+many, of course).
+
+I haven't actually made the little heart-shaped "Like Post" button at the
+bottom work yet, but the current plan is to make a little script that logs the
+post's title to a text file and returns a 204, then when I want to get like
+counts I can just do `sort likes.txt | uniq -c`. No funky injectable
+databases---if there's spam, I can just delete the lines from the file and
+maybe insert a little check to drop entries if there are any obvious patterns.
+
+That's it for now, I guess? See ya :wave:
diff --git a/posts/20221031-ubiquitous-mundane-magic.md b/posts/20221031-ubiquitous-mundane-magic.md
new file mode 100644
index 0000000..55d341a
--- /dev/null
+++ b/posts/20221031-ubiquitous-mundane-magic.md
@@ -0,0 +1,29 @@
+---
+date: 2022-10-31
+title: Ubiquitous, Mundane Magic
+---
+
+I've been thinking again lately about how we live in a world with ubiquitous,
+mundane magic.
+
+<!--more-->
+
+We harness lightning in intricate tiny structures made of sand and metal to
+make them think, keeping their own internal time using perfectly beating hearts
+made of crystals, sustaining themselves with energy sacs made of solid metallic
+acid, communicating to other thinking structures using meshes of invisible
+light all around us.
+
+We learn how to harness and direct the thoughts of these structures in
+school-how to make them think more quickly, or more creatively, or more
+aesthetically and approachably for those not familiar with the arcane,
+inscrutable languages used to form those thought-directing spells.
+
+We carry opaque slabs of inorganic materials in our pockets, capable of near
+instantaneous communication across the entire world, able to tell us our
+precise positions on the planet with the aid of artificial stars we've placed
+up in the sky with precisely manufactured atomic hearts that we've calibrated
+to accommodate for the measurable difference in the speed of time between what
+we experience on the ground and what they experience from their places in the
+sky, not to mention any of the other hundreds, thousands, millions of things
+the slabs can do.
diff --git a/posts/404.njk b/posts/404.njk
new file mode 100644
index 0000000..ad8f479
--- /dev/null
+++ b/posts/404.njk
@@ -0,0 +1,12 @@
+---
+layout: page.njk
+permalink: 404.html
+eleventyExcludeFromCollections: true
+eleventyComputed:
+  pageTitle: 404 – {{ metadata.title | safe }}
+---
+      <a id="up" title="Home" aria-label="Home" href="/"></a>
+      <a id="back" title="Back" aria-label="Back" href="javascript:history.back()"></a>
+      <h1>404 Not Found</h1>
+      <p>There isn't a page here.</p>
+      <a href="/">Home</a>
diff --git a/posts/feed.njk b/posts/feed.njk
new file mode 100644
index 0000000..1ad22fa
--- /dev/null
+++ b/posts/feed.njk
@@ -0,0 +1,31 @@
+---json
+{
+  "permalink": "feed.xml",
+  "eleventyExcludeFromCollections": true,
+  "layout": ""
+}
+---
+<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+  <title>{{ metadata.title }}</title>
+  <subtitle>{{ metadata.subtitle }}</subtitle>
+  <link href="{{ metadata.feedUrl }}" rel="self"/>
+  <link href="{{ metadata.url }}"/>
+  <updated>{{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
+  <id>{{ metadata.url }}</id>
+  <author>
+    <name>{{ metadata.author.name }}</name>
+    <!--email>{{ metadata.author.email }}</email-->
+  </author>
+  {%- set latest_posts = collections.all | reverse -%}
+  {%- for post in latest_posts.slice(0,5) -%}
+  {%- set absolutePostUrl = post.url | url | absoluteUrl(metadata.url) %}
+  <entry>
+    <title>{{ post.data.title }}</title>
+    <link href="{{ absolutePostUrl }}"/>
+    <updated>{{ post.date | dateToRfc3339 }}</updated>
+    <id>{{ absolutePostUrl }}</id>
+    <content type="html"><![CDATA[{{ post | excerpt | htmlToAbsoluteUrls(absolutePostUrl) | demark | safe }}<p><a href="{{ absolutePostUrl }}">Read the full post online</a></p>]]></content>
+  </entry>
+  {%- endfor %}
+</feed>
diff --git a/posts/history.njk b/posts/history.njk
new file mode 100644
index 0000000..76fbcd0
--- /dev/null
+++ b/posts/history.njk
@@ -0,0 +1,31 @@
+---js
+{"layout": "page.njk",
+"eleventyExcludeFromCollections": true,
+"eleventyComputed": {
+  "pageTitle": "{{ pagination.pageNumber + 1 }} – {{ metadata.title | safe }}" },
+"permalink": "archive/{{ pagination.pageNumber + 1 }}/index.html",
+"pagination": {
+  "data": "collections.all",
+  "before": data => data.slice(0,-1),
+  "alias": "posts",
+  "size": 5 }}
+---
+      <a id="up" title="Home" aria-label="Home" href="/"></a>
+      <h1>{{ metadata.title }} &mdash; Page {{ pagination.pageNumber + 1 }}</h1>
+{% for post in posts %}
+      <hr>
+      <section>
+      <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
+      {{ post | excerpt | safe }}
+      </section>
+{% endfor %}
+      <nav>
+        <a id="next" rel="next" href="{% if pagination.href.next
+          %}{{ pagination.href.next }}{% else %}/{% endif %}">Newer</a>
+      {%- if pagination.href.previous %}
+        <a id="prev" rel="prev" href="{{ pagination.href.previous }}">Older</a>
+      {%- endif %}
+        <a id="last" rel="last" href="/">Latest</a>
+      {%- if pagination.pageNumber > 0 %}
+        <a id="first" rel="first" href="/1/">First</a>{% endif %}
+      </nav>
diff --git a/posts/index.njk b/posts/index.njk
new file mode 100644
index 0000000..f695075
--- /dev/null
+++ b/posts/index.njk
@@ -0,0 +1,31 @@
+---js
+{"layout": "page.njk",
+"permalink": "index.html",
+"eleventyExcludeFromCollections": true,
+"eleventyComputed": {
+  "metaDesc": "{{ metadata.subtitle }}",
+  "pageTitle": "{{ metadata.title | safe }}",
+  "previousPage": d => Math.ceil((d.collections.all.length-1)/5) }}
+---
+      <img id="logo" src="/favicon.png" alt="Blog Logo">
+      <h1>{{ pageTitle }}<a id="feed" title="RSS Feed" aria-label="RSS Feed" href="/feed.xml"></a><a id="message-me" title="Message Me" aria-label="Message Me" href="https://alexishovorka.com/TODO" target="_blank"></a></h1>
+      <hr>
+
+      {% set post = collections.all.slice(-1)[0] -%}
+      <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
+
+      {{ post.templateContent | fixAnchors(post.url) | safe }}
+
+{%- if post.data.tags %}
+      <p id="tags">{% for tag in post.data.tags %}
+        <a class="tag" href="/{{ tag | slug }}/">#{{ tag }}</a>{% endfor %}
+      </p>
+{% endif %}
+
+{%- if collections.all.length > 1 %}
+      <nav>
+        <a id="like-post" href="TODO" title="Like Post" aria-label="Like Post"><span></span></a>
+        <a id="prev" rel="prev" href="/archive/{{ previousPage }}/">Older</a>
+        <a id="first" rel="first" href="/archive/1/">First</a>
+      </nav>
+{% endif -%}
diff --git a/posts/style.md b/posts/style.md
new file mode 100644
index 0000000..8b3ef18
--- /dev/null
+++ b/posts/style.md
@@ -0,0 +1,81 @@
+---
+date: 2022-01-30
+eleventyExcludeFromCollections: true
+title: Style Demo
+heroImg: https://www.adorama.com/alc/wp-content/uploads/2018/11/landscape-photography-tips-yosemite-valley-feature.jpg
+heroImgAlt: Landscape
+tags:
+ - Elena-Brandt
+ - Bonnie-Brandt
+---
+
+Plain *italic* **bold** <kbd>K</kbd> ~~strike~~ ==redact== plain `code` plain
+==`redacted code`== :wave: (c)(tm)(p)+- <ins>inserted</ins>
+
+==This is a redacted paragraph. Lorem ipsum dolor sit amet consectetur
+adispicing elit.==
+
+<!--more-->
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+when an unknown printer <kbd>Ctrl</kbd>+<kbd>C</kbd> took a galley of type and
+scrambled it to make a type specimen book. It has survived not only five
+centuries, but also the leap into electronic typesetting, remaining essentially
+unchanged. <span lang="jpn">こりゃテストの文書です</span> It was popularised in
+the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
+and more recently with desktop publishing software like Aldus PageMaker
+including versions of Lorem Ipsum. <span lang="jbo">.ii .o'i mu xagji sofybakni
+cu zvati le purdi</span>
+
+<p lang="jbo">.ii .o'i mu xagji sofybakni cu zvati le purdi
+kAtrInAs djEIn mAdjqYrIs
+mi gle~ki~~ --- E1l2I3O4t wEIn wE,In
+pErsEfOnIs</p>
+
+## Subheading
+
+- List item
+- Another with a lot of text in it so I can see what it looks like when it
+  wraps around
+
+1. Woot
+1. Next number
+
+> And here's a block quote, but I'm not sure
+> what to put in it to make it long enough.
+>
+> > Maybe if I nest?
+
+    code block
+      indent
+    and back
+
+    IDK if we'll use these much.
+    Maybe for computer terminal sessions?
+
+    $ ls -a
+    .  ..
+
+<details>
+<summary>Collapsible Section</summary>
+
+Expandable details...
+
+Another paragraph
+</details>
+
+```js
+function anotherCodeBlock() {
+  return this.timeWithSyntaxHighlighting();
+}
+```
+
+<div class="irc">
+
+2103-02-02 13:34 Elena: There's also this transcript style, which I think is
+reminiscent of IRC server logs.
+
+2103-01-01 13:35 Bonnie: Oooh, I like it!
+
+</div>
diff --git a/posts/tags.njk b/posts/tags.njk
new file mode 100644
index 0000000..cba0555
--- /dev/null
+++ b/posts/tags.njk
@@ -0,0 +1,27 @@
+---
+layout: page
+eleventyExcludeFromCollections: true
+pagination:
+  data: collections
+  size: 1
+  alias: tag
+  filter:
+    - all
+    - posts
+permalink: /{{ tag | slug }}/
+eleventyComputed:
+  title: "#{{ tag }}"
+  pageTitle: "{{ title }} – {{ metadata.title | safe }}"
+---
+      <a id="up" title="Home" aria-label="Home" href="/"></a>
+      <a id="back" title="Back" aria-label="Back" href="javascript:history.back()"></a>
+      <h1>{{ title }}</h1>
+      <hr>
+{% set taglist = collections[ tag ] -%}
+{% for post in taglist | reverse %}
+      <section>
+      <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
+      {{ post | excerpt | safe }}
+      </section>
+      <hr>
+{% endfor -%}