fixup! Switch from Gatsby to Astro

.stylelintrc.json

@@ -1,5 +1,8 @@
 {
-  "extends": "stylelint-config-standard",
+  "extends": [
+    "stylelint-config-html",
+    "stylelint-config-standard"
+  ],
   "rules": {
     "at-rule-no-unknown": [
       true,

package.json

@@ -43,6 +43,7 @@
     "prettier-plugin-astro": "^0.13.0",
     "prettier-plugin-tailwindcss": "^0.5.14",
     "stylelint": "^16.4.0",
+    "stylelint-config-html": "^1.1.0",
     "stylelint-config-standard": "^36.0.0",
     "typescript": "^5.4.5"
   },

src/components/layouts/page.astro

@@ -1,14 +1,15 @@
 ---
-import Layout from '../components/layouts/base.astro'
+import Layout from './base.astro'
+
+const { frontmatter } = Astro.props
 ---
 
-<!--Layout page={page}-->
 <Layout>
   <article>
     <header class='post'>
-      <h2>{page.title}</h2>
+      <h2>{frontmatter.title}</h2>
     </header>
 
-    <div class='post'>{props.children}</div>
+    <div class='post'><slot /></div>
   </article>
 </Layout>

src/components/layouts/post.astro

@@ -16,7 +16,7 @@ import Layout from '../components/layouts/base.astro'
       </time>
     </header>
 
-    <div class='post'>{props.children}</div>
+    <div class='post'><slot /></div>
 
     <div class='mt-8' id='disqus_thread'></div>
     <noscript>

src/components/resume/experience.astro

@@ -62,5 +62,5 @@ const timeEndDisplay =
     <address class='justify-self-end'>{props.location}</address>
   </h5>
 
-  <div class='text-justify'>{props.children}</div>
+  <div class='text-justify'><slot /></div>
 </div>

src/content/posts/2011-10-06-avoid-git-first-drafts.md

@@ -1,5 +1,5 @@
 ---
-layout: post
+layout: ../../components/layouts/post.astro
 title: Avoid Git First Drafts
 categories: tech
 tags: git

src/content/posts/2013-05-27-accumulating-multiple-failures-in-a-ValidationNEL.md

@@ -1,8 +1,13 @@
 ---
-layout: post
+layout: ../../components/layouts/post.astro
 title: 'Accumulating More Than One Failure In A ValidationNEL'
 categories: tech
 tags: scala
+description: >-
+  This is an adaptation of an internal blog post I made for Gravity engineers.
+  To preface, Gravity likes to use 2 very predictable patterns throughout its
+  Scala codebase, which is very important for a TIMTOWTDI language like
+  Scala: the for-comprehension and ValidationNEL.
 ---
 
 This is an adaptation of an internal blog post I made for

src/content/posts/2013-10-16-credo.md

@@ -1,8 +1,13 @@
 ---
-layout: post
+layout: ../../components/layouts/post.astro
 title: 'Credo'
 categories: tech
 tags: engineering usability
+description:
+  Here’s a collection of the high-level concepts I’ve adopted over the years. I
+  think they add human value—to customers & teammates alike—and GTD value. All
+  while keeping me happy with my career in the otherwise often bitter IT
+  ecosystem.
 ---
 
 Here's a collection of the high-level concepts I've adopted over the years. I

src/content/posts/2014-01-28-good-ideas-from-mobile-design-that-are-good-everywhere.md

@@ -1,5 +1,5 @@
 ---
-layout: post
+layout: ../../components/layouts/post.astro
 title: 'Good Ideas From Mobile Design That Are Good Everywhere'
 categories: tech
 tags: engineering usability

src/content/posts/2014-02-05-dont-learn-to-code-learn-to-program-but-come-back-in-10-years.md

@@ -1,8 +1,13 @@
 ---
-layout: post
+layout: ../../components/layouts/post.astro
 title: 'Don’t Learn to Code, Learn to Program—But Come Back in 10 Years'
 categories: tech
 tags: engineering programming
+description:
+  I want to discuss why programming and coding are not the same, and why I can
+  no longer support the Learn to Code movement. I can no longer tell my friends
+  to learn coding. Although I’m passionate about it, it’s too arcane and insular
+  for mainstream practice.
 ---
 
 I want to discuss why programming and coding are not the same, and why I can no

src/content/posts/2014-02-25-ongoing-learning-in-breadth-&-depth.md

@@ -1,8 +1,13 @@
 ---
-layout: post
+layout: ../../components/layouts/post.astro
 title: 'Ongoing Learning in Breadth & Depth'
 categories: tech
 tags: engineering programming javascript
+description:
+  To those overwhelmed by all the programming languages and tools you can
+  learn, changing daily, I’d like to offer some peace of mind. In my previous
+  article, I questioned the rampant, disconnected proliferation of code. I don’t
+  know why it is stuck the way it is.
 ---
 
 To those overwhelmed by all the programming languages and tools you can learn,

src/content/posts/2014-09-05-code-as-craft-as-career.md

@@ -1,5 +1,5 @@
 ---
-layout: post
+layout: ../../components/layouts/post.astro
 title: 'Code As Craft As Career?'
 categories: tech
 tags: engineering programming

src/content/posts/2014-09-08-paint-by-types.md

@@ -1,5 +1,5 @@
 ---
-layout: post
+layout: ../../components/layouts/post.astro
 title: 'Paint By Types'
 categories: tech
 tags: engineering programming fp haskell

src/content/posts/2015-03-18-1st-class-ux-for-web-programmers.md

@@ -1,5 +1,5 @@
 ---
-layout: post
+layout: ../../components/layouts/post.astro
 title: '1st Class UX for Web Programmers'
 categories: tech
 tags: engineering usability

src/content/about/index.md → src/pages/about.mdx

@@ -1,9 +1,9 @@
 ---
-layout: base
+layout: ../components/layouts/page.astro
 title: 'About Me'
 ---
 
-import Experience from '../../components/resume/experience'
+import Experience from '../components/resume/experience.astro'
 
 I'm a software consultant who helps with the **development** of the **user
 experience (UX)**. With 10+ years in the game, I help you evolve your

src/pages/posts/index.astro

@@ -1,22 +1,26 @@
 ---
 import Layout from '../../components/layouts/base.astro'
+
+import { getCollection } from 'astro:content'
+
+const posts = await getCollection('posts')
+posts.reverse()
 ---
 
 <Layout>
-  <!-- Layout page={page} -->
   <section class=''>
     <h2 class='heading text-3xl'>Articles</h2>
 
     <ul class='mx-2 mt-2'>
       {
-        props.data.allMdx.edges.map(({ node }) => (
-          <li class='mt-10' key={node.id}>
-            <a class='link inline-block' href={node.fields.slug}>
-              {node.frontmatter.title}
+        posts.map((post) => (
+          <li class='mt-10'>
+            <a class='link inline-block' href={`/posts/${post.slug}`}>
+              {post.data.title}
             </a>
 
             <blockquote class='mt-2 px-4 text-sm italic text-gray-500'>
-              {node.frontmatter.description || node.excerpt}
+              {post.data.description}
             </blockquote>
           </li>
         ))