Add changelog pages

_includes/components/atoms/log.njk

@@ -1,7 +1,7 @@
 <li class="log-item">
   <a href="{{ item.url }}">
-    <h5>{{ item.data.title }}</h5>
-    <p>{{ item.data.description }}</p>
-    <time datetime="{{ item.date | htmlDateString }}">{{ item.date | dotDate }}</time>
+    <h5><span class="log-label">{{ item.data.label }}</span> {{ item.data.title }}</h5>
   </a>
+  <p>{{ item.data.description }}</p>
+  <time datetime="{{ item.date | htmlDateString }}">{{ item.date | dotDate }}</time>
 </li>

css/base.css

@@ -20,7 +20,8 @@
 
 /* Utilities */
 @import "utilities/_toggle.scss";
-/* @import "utilities/_color-scheme.scss";*/
+
+/* @import "utilities/_color-scheme.scss"; */
 @import "utilities/_badge.scss";
 @import "utilities/_images.scss";
 @import "utilities/_dither.scss";
@@ -53,6 +54,7 @@
 @import "components/atoms/skip-link.scss";
 @import "components/atoms/media-item.scss";
 @import "components/atoms/highlight.scss";
+@import "components/atoms/log.scss";
 
 /* Molecules */
 @import "components/molecules/header.scss";

css/components/atoms/log.scss

@@ -0,0 +1,16 @@
+.log-year {
+  border-bottom: 2px solid $secondary;
+  position: sticky;
+  top: 0;
+  background: $primary;
+  z-index: 1;
+}
+
+.log-label {
+  background: $secondary;
+  color: $primary;
+}
+
+.log-list li {
+  margin-top: $s1;
+}

pages/other/changelog.njk

@@ -5,6 +5,8 @@ description: Documenting updates and changes to my personal website.
 permalink: changelog/
 ---
 
+<p>My work on this site started on <em>July 22, 2019</em> that's when I made the first commit on GitHub. I've been slowly making incremental updates since then which results in the page you are viewing now. This page documents all my thoughts, the process, and decisions.</p>
+
 <h2>Main pillars</h2>
 
 <p>A bit of rationale on each aspect of the design and technicalities of this website.</p>
@@ -17,16 +19,22 @@ permalink: changelog/
   {%- endfor -%}
 </section>
 
+<p>This site has a roadmap which is currently a <em>private Notion board</em> in which I keep all ideas, enhancement and improvements to this website. There are currently about 50+ ideas or things I want to implement. For now it's private but I turn it a public roadmap one day.</p>
+
 <h2>Changelog</h2>
 
 <p>The changes of this site use <code>calver</code>, a convention based on a release calendar instead of arbitrary numbers. I try to mirror this changelog on the <a href="https://github.com/systemdes/personal-website/releases">releases of this site's GitHub repo.</a></p>
 
-<section class="grid-l">
+<section>
   {%- for item in collections.changelog | reverse -%}
-      <ul>
+      {% if item.date | year != lastDate | default('0', true) %}
+        <h3 class="log-year">{{ item.date | year}}</h3>
+      {% set lastDate = item.date | year %}
+    {% endif %}
+      <ul class="log-list">
         {% include 'components/atoms/log.njk' %}
       </ul>
   {%- endfor -%}
 </section>
 
-<p><em>If you really really want to see every little change on this website you can view the commit history on <a href="https://github.com/systemdes/personal-website/commits/master">this site's GitHub repo</a> but I'm not sure if you are into that kinda thing...</e></p>
+<p><em>If you really really want to see every little change on this website you can view the commit history on this site's <a href="https://github.com/systemdes/personal-website/commits/master">GitHub repo</a> but that's probably not a thing you want to do...</e></p>

posts/_changelog/2020.02.21.md

@@ -1,7 +1,15 @@
 ---
-date: 2020-02-21
-title: Add changelog feature
+date: 2020-09-20
+title: First release
+description: Rather than moving the needle further, I spend a night going down a rabbit hole that does leave me without much to show, but I still consider it progress.
 tags: changelog
+label: code
 layout: layouts/default.njk
-permalink: /changelog/2020-02-21/index.html
+permalink: /changelog/2020-09-20/index.html
 ---
+
+With the creation of a [changelog page](dandevri.es/changelog) I decided to create a 'release' for my personal website. The changes of this site use _calver_, a convention based on a release calendar instead of arbitrary numbers.
+
+My work on this site started on July 22, 2019 that's when I made the first commit on GitHub. I've been slowly making incremental updates since then which results in the code you are viewing now. With releases I'm documenting all my thoughts, the process, and decisions that went into creating my personal site.
+
+This site has a roadmap which is currently a private Notion board in which I keep all ideas, enhancement and improvements to this website. There are currently about 50+ ideas or things I want to implement. For now it's private but I turn it a public roadmap one day.

posts/design/design.md

@@ -0,0 +1,24 @@
+---
+date: 2020-09-20
+title: Design
+description: Picking typefaces, gridnikking, color schemes
+tags: design
+layout: layouts/default.njk
+permalink: /changelog/design/index.html
+---
+
+The overall concept comes from the [Apple macOS system 1](https://en.wikipedia.org/wiki/System_1). I was also inspired by the fabolous [Poolside.fm](https://poolside.fm/) website and the [StageOS](https://stylestage.dev/styles/stageos/) stylestage.dev theme.
+
+You should design with constraints. That's why I think most websites should probably be black and white anyway. But in the 90's we had no color displays so black and white is all you had to work with.
+
+Most of this website are documents. They only need to achieve readability with hierarchy and a bit of layout. The content is front and center. So most of the page is typographic. The choice in typeface is probably the most important for visual atmosphere. If you say System 1 you automatically say monospaced. 
+
+The text is set in [Simplon][simplon] by [Swiss Typeface][swiss] and the decoration text is set in [Redaction][redaction] by Titus Kaphar and Reginald Dwayne Betts. A monospaced font might not be the the best choice for extended reading but you gotta keep the hacker feel alive somewhere.
+
+Layout and components are mostly from [Every Layout][layout] and [Inclusive Components][components].
+
+[swiss]: https://www.swisstypefaces.com/
+[simplon]: https://www.swisstypefaces.com/fonts/simplon/
+[redaction]: https://www.redaction.us/
+[layout]: https://every-layout.dev/
+[components]: https://inclusive-components.design/

posts/design/tech.md

@@ -1,8 +1,38 @@
 ---
-date: 2020-02-21
-title: Tech
-description: The tech that runs this site
+date: 2020-09-20
+title: Technology
+description: The tech that runs this site and how it's build
 tags: design
 layout: layouts/default.njk
 permalink: /changelog/tech/index.html
 ---
+
+This site is a blog-based personal website and it's constantly evolving. I wanted it to be a digital garden; easy to experiment with and try out new things with web technology. Performance and accessibility were also important aspects in the creation of this website.
+
+## Principles
+
+My plan is to keep this site online for decades to come so I didn't want to rely on one specific technology that might be obsolete in a couple of years. If I ever wanted to move my content over I could easily port over the files and switch to other tooling.
+
+I wanted to own my content and be in control of how my content is presented. In that sense the whole philosophy around this website is inspired by the IndieWeb concept.
+
+* **Fast:** feels fast for visitors but also for me to work on it.
+* **Content first:** don't want to deal with 'how something looks'.
+* **Personality:** control over how my content is presented and give it a personal twist.
+* **No trends:** there is always this desire to redesign because of trends. I don't want this site to follow trends.
+
+I don't plan in selling or otherwise offer my website design. It's custom designed and developed myself with the help of technology other people created. 
+
+This site is my hobby and digital playground to try out new web related things. This site is constantly evolving. I've spent many nights, weekends tinkering and redesigning this site.
+
+It has no commercial agenda. It's bullshit free, just my content offered on a clean site.
+
+
+## Hosting
+
+This site is hosted on Netlify which means I don't have to worry about scaling. Netlify does all the heavy lifting of deploying, building and keeping the live site up to date. The code behind this website is hosted on a public (open source) GitHub in a separate GitHub organization. Updating an article or creating new pages is as easy as changing the markdown file and commit (and push) the file to GitHub. Netlify does the rest.
+
+## Code
+
+This site uses the static site generator (ssg) 11ty (thus powered by Hand Coding™). I just want to write markdown and have it generate all the necessary pages. I do not like dealing with a CMS or database of some sort. Besides the core 11ty ssg I reilly on a couple of additional plugins and packages to add functionality. Like RSS feeds, navigation highlights and sitemaps.
+
+The most notable other tooling I use lies in CSS compiling which I use `PostCSS` for. Additionally  linters like `eslint`, `stylelint` and `editorconfig` help me enforce a consistent coding style.