Fix a11y issues, page titles

scripts/import-from-bear/lib.ts

@@ -22,6 +22,8 @@ export function parsePost(post: DBPost): O.Option<PostData> {
 
   const postData: PostData = {
     title: post.title,
+    // TODO: can I do better to determine a description for this post?
+    description: post.title,
     markdown: post.markdown,
     publishDate: postDate(post.modifiedAt),
     tags: filterBearTags(JSON.parse(post.tags) || [])

src/components/BlogPost.astro

@@ -25,7 +25,7 @@ const { title, publishDate, heroImage, alt, tags } = Astro.props;
       )
     }
 
-    <p class="font-mono text-gray-500 mb-1 sm:mb-2">
+    <p class="font-mono text-gray-400 mb-1 sm:mb-2">
       {
         new Date(publishDate).toLocaleDateString("en-US", {
           month: "long",

src/components/BlogPostPreview.astro

@@ -16,7 +16,7 @@ const { post } = Astro.props;
   >
     <header>
       <p
-        class="font-mono text-gray-500 text-sm mb-1 md:mb-2 group-hover:text-green-500"
+        class="font-mono text-gray-400 text-sm mb-1 md:mb-2 group-hover:text-green-500"
       >
         {
           new Date(post.frontmatter.publishDate).toLocaleDateString("en-US", {

src/components/PageHeader.astro

@@ -13,6 +13,7 @@ import Logo from "./Logo.astro";
   <div class="my-4 flex gap-4 md:gap-6 items-center font-mono">
     <a href="/" rel="prefetch" class="text-sm">
       <Logo class="w-8 h-8 block mx-auto" />
+      <span class="sr-only">Home</span>
     </a>
 
     <a href="/writing" rel="prefetch" class="text-sm">Writing</a>

src/pages/experiments/index.astro

@@ -10,7 +10,7 @@ let permalink = new URL(Astro.url.pathname, Astro.site);
   <section slot="main">
     <h2 class="h1 mb-heading-lg md:mb-heading-xl">
       <span class="sr-only">Experiments</span>
-      <span aria-hidden>
+      <span aria-hidden="true">
         <span class="text-green-500">.</span><span class="text-gray-500"
           >0x</span
         >3XP3R1M3N75

src/pages/index.mdx

@@ -1,6 +1,6 @@
 import PageLayout from "../layouts/Page.astro";
 
-export const title = "Solomon Hawk";
+export const title = "Solomon Hawk, Developer";
 export const description =
     "Hey, I'm Solomon. I write code for work and fun. I like books, games and a bunch of other nerd shit. Every now and then, in fleeting moments of lucidity, I collect my thoughts and write about software development or weird stuff that interest me. The rest of the time I try to walk [the path](https://en.wikipedia.org/wiki/Noble_Eightfold_Path) in search of happiness.";
 export const permalink = "https://solomonhawk.com/";

src/pages/writing/[...page].astro

@@ -8,10 +8,6 @@ import { filterDrafts, sortPosts } from "../../data/posts";
 import BlogPagination from "../../components/BlogPagination.astro";
 import { groupTagsByCount } from "@data/tags";
 
-let title = "Solomon Hawk";
-let description = "Selected writing from the depths of the mind of Solomon.";
-let permalink = new URL(Astro.url.pathname, Astro.site);
-
 export const posts = filterDrafts(sortPosts(await Astro.glob("./posts/*.mdx")));
 const tags = groupTagsByCount(posts)
 
@@ -20,13 +16,17 @@ export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
 }
 
 const { page } = Astro.props;
+
+let title = "Solomon Hawk - Writing";
+let description = "Selected writing from the depths of the mind of Solomon.";
+let permalink = new URL(Astro.url.pathname, Astro.site);
 ---
 
 <PageLayout content={{ title, description, permalink }}>
   <section slot="main">
     <h2 class="h1 mb-heading-lg md:mb-heading-xl">
       <span class="sr-only">Writing Page {page.currentPage}</span>
-      <span aria-hidden>
+      <span aria-hidden="true">
         <span class="text-green-500">.</span><span class="text-gray-500">0x</span
           >WR171N6{page.currentPage > 1 ? `/${page.currentPage}` : ""}
       </span>

src/pages/writing/posts/automating-a-blog-publishing-workflow-with-bear-and-astro.mdx

@@ -216,7 +216,16 @@ While I’m getting stuff set up, I’ll also add a npm script `npm run import`
 }
 ```
 
-### 
+@TODO:
+* ts-node script, transform JSON to markdown with yaml frontmatter
+	* `./scripts/import-from-bear/index.ts`
+	* `./scripts/import-from-bear/lib`
+* itworks.jpg (see what can be done about handling images)
+* modifying the imported markdown
+	* adding labels to code blocks
+* automatically importing while dev server is running
+	* file-system watching
+
 ---
 
 ### References

src/pages/writing/posts/hello-world.mdx

@@ -2,6 +2,7 @@
 layout: '@layouts/BlogPost.astro'
 title: Hello, World!
 publishDate: 2022-09-01T04:00:00.000Z
+description: This is my obligatory first post.
 ---
 
 import Counter from '@components/Counter.tsx'

src/pages/writing/tags/[tag]/[...page].astro

@@ -8,9 +8,6 @@ import BlogPagination from "@components/BlogPagination.astro";
 import BlogPostPreview from "@components/BlogPostPreview.astro";
 import { groupTagsByCount } from "@data/tags";
 
-let title = "Solomon Hawk";
-let permalink = new URL(Astro.url.pathname, Astro.site);
-
 export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
   const posts: Post[] = await Astro.glob("../../posts/*.mdx");
   const tags = groupTagsByCount(posts);
@@ -32,13 +29,16 @@ export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
 
 const { page, count, description } = Astro.props;
 const { tag } = Astro.params;
+
+let title = `Solomon Hawk - Writing Tag ${tag}`;
+let permalink = new URL(Astro.url.pathname, Astro.site);
 ---
 
 <PageLayout content={{ title, description, permalink }}>
   <section slot="main">
     <h2 class="h1 mb-heading-lg md:mb-heading-xl">
       <span class="sr-only">Writing Tag {tag}, Page {page.currentPage}</span>
-      <span aria-hidden>
+      <span aria-hidden="true">
         <span class="text-green-500">.</span><span class="text-gray-500"
           >0x</span
         >WR171N6/T465/{tag}{page.currentPage > 1 ? `/${page.currentPage}` : ""}

src/pages/writing/tags/index.astro

@@ -3,19 +3,19 @@ import PageLayout from "@layouts/Page.astro";
 import { filterDrafts, sortPosts } from "@data/posts";
 import { groupTagsByCount } from "@data/tags";
 
-let title = "Solomon Hawk";
-let description = "Selected writing from the depths of the mind of Solomon.";
-let permalink = new URL(Astro.url.pathname, Astro.site);
-
 export const posts = filterDrafts(sortPosts(await Astro.glob("../posts/*.mdx")));
 const tags = groupTagsByCount(posts);
+
+let title = "Solomon Hawk - Writing Tags";
+let description = "Selected writing from the depths of the mind of Solomon.";
+let permalink = new URL(Astro.url.pathname, Astro.site);
 ---
 
 <PageLayout content={{ title, description, permalink }}>
   <section slot="main">
     <h2 class="h1 mb-heading-lg md:mb-heading-xl">
       <span class="sr-only">Writing Tags</span>
-      <span aria-hidden>
+      <span aria-hidden="true">
         <span class="text-green-500">.</span><span class="text-gray-500">0x</span
         >WR171N6/T465
       </span>

src/styles/index.css

@@ -82,17 +82,25 @@
 	}
 
 	.prose > * + * {
-		@apply mt-[1.25rem] md:mt-[1.5rem];
+		@apply mt-[1.25rem] md:mt-[1.5rem] lg:mt-[2rem];
 	}
 
 	.prose ol {
 		@apply list-decimal list-inside space-y-4;
 	}
 
+	.prose ol li::marker {
+		@apply text-yellow-400 font-bold;
+	}
+
 	.prose ul {
 		@apply list-disc list-inside space-y-4;
 	}
 
+	.prose ul ul {
+		@apply mt-[1rem] ml-[1rem] md:ml-[1.5rem] lg:ml-[2rem];
+	}
+
 	.prose strong {
 		@apply font-bold;
 	}
@@ -102,7 +110,7 @@
 	}
 
 	.prose code {
-		@apply text-yellow-200 break-words;
+		@apply text-yellow-400 break-words;
 	}
 
 	.prose a code {
@@ -118,7 +126,7 @@
 	}
 
 	.blog-tag {
-		@apply rounded-tr rounded-bl bg-transparent text-gray-500 font-mono font-bold text-xs px-1 py-0.5 hover:no-underline focus:no-underline;
+		@apply rounded-tr rounded-bl bg-transparent text-gray-400 font-mono font-bold text-xs px-1 py-0.5 hover:no-underline focus:no-underline;
 		@apply before:text-green-500 before:content-['#'];
 		@apply group-hover:bg-green-500 group-hover:text-black group-hover:before:text-black;
 		@apply hover:bg-green-500 hover:text-black hover:before:text-black;

src/types/post.ts

@@ -4,6 +4,7 @@ import * as t from 'io-ts';
 
 const PostSchemaRequired = t.type({
   title: t.string,
+  description: t.string,
   publishDate: t.string,
 });