Move archive to blog

Author: csswizardry

404.md

@@ -14,7 +14,7 @@ things you can do from here:
 
 1. [Head back to the home page](/)
 2. [Search Google for what you were looking for](https://www.google.com/search?q=site%3Acsswizardry.com+YOUR+SEARCH+TERM)
-3. [Browse the archives](/archive/)
+3. [Browse the blog](/blog/)
 4. Read [<cite>{{ site.posts[random].title }}</cite>]({{ site.posts[random].url }}) <small>({{ site.posts[random].date | date: "%Y" }})</small>
 
 <script>

_includes/sub-content.html

@@ -20,7 +20,7 @@
     href=https://web.archive.org/web/20190630140300/https://thenetawards.com/previous-winners/>award-winning</a>
   Consultant Web Performance Engineer</b>, <b>designer</b>, <b>developer</b>,
 <b>writer</b>, and <b>speaker</b> from the UK. I <b><a
-    href=/archive/>write</a></b>, <b><a
+    href=/blog/>write</a></b>, <b><a
     href=https://twitter.com/csswizardry>Tweet</a></b>, <b><a
 href=/speaking/>speak</a></b>, and <b><a
 href=http://github.com/csswizardry>share code</a></b> about measuring and

archive.html

@@ -1,8 +1,9 @@
 ---
 layout: page
-title: CSS Wizardry Posts Archive
+title: CSS Wizardry Blog Archives
 page-class: page--archive
 permalink: /archive/
+canonical: 'https://csswizardry.com/blog/'
 ---
 
 <section class="posts">

blog.html

@@ -0,0 +1,52 @@
+---
+layout: page
+title: CSS Wizardry Blog Archives
+page-class: page--archive
+permalink: /blog/
+---
+
+<section class="posts">
+
+  {% assign random = site.time | date: "%s%N" | modulo: site.posts.size %}
+
+  <p>I have written <b>{{ site.posts | size  }}</b> post on this site, mostly
+  covering CSS, architecture, performance, and web development. Find
+  a reverse-chronological list of them below, or, at random, why not read
+  <a href="{{ site.posts[random].url }}"><cite>{{ site.posts[random].title }}</cite></a> <small>(<time>{{ site.posts[random].date | date: "%Y" }}</time>)</small>?</p>
+
+  {% for post in site.posts %}
+    {% assign currentDate = post.date | date: "%Y" %}
+    {% if currentDate != myDate %}
+      {% unless forloop.first %}</ol>{% endunless %}
+      <hr />
+      <h2 id=year-{{ currentDate }}>{{ currentDate }}</h2>
+      <ol reversed>
+      {% assign myDate = currentDate %}
+    {% endif %}
+      <li>
+        <b><time datetime="{{ post.date | date: "%Y-%m-%d" }}">{{ post.date | date: "%B %d" }}</time></b>
+        <br>
+        <a href="{{ post.url }}" style="view-transition-name: x-{{ post.date | date: '%Y-%m-%d' }}">{{ post.title }}</a>
+      </li>
+    {% if forloop.last %}</ol>{% endif %}
+  {% endfor %}
+
+  <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "BreadcrumbList",
+      "itemListElement": [{
+        "@type": "ListItem",
+        "position": 1,
+        "name": "CSS Wizardry",
+        "item": "https://csswizardry.com/"
+      },{
+        "@type": "ListItem",
+        "position": 2,
+        "name": "Blog",
+        "item": "https://csswizardry.com/archive/"
+      }]
+    }
+  </script>
+
+</section>

index.html

@@ -30,7 +30,7 @@
       <h3 class=heading>Articles</h3>
 
       <p>There are <b>{{ site.posts | size  }}</b> articles on this blog.
-      Find them all on the <a href="/archive/">archive page</a>.</p>
+      Find them all on the <a href="/blog/">blog page</a>.</p>
 
       {% if paginator.page != 1 %}
       {% include pagination.html %}