feat(styles): article icon

src/content/config.ts

@@ -6,7 +6,8 @@ export const collections = {
     schema: z.object({
       title: z.string(),
       date: z.date(),
-      tags: z.array(z.string()).optional(),
+      icon: z.string().optional(),
+      desc: z.string().optional(),
     })
   }),
   slides: defineCollection({

src/content/posts/typeclasses.md

@@ -1,7 +1,7 @@
 ---
 title:  Breaking apart the Haskell type class
 date:   2023-11-02T17:28:25.466Z
-tags:   [haskell]
+icon:   haskell
 desc: >
     Type classes are perhaps the most distinctive feature of Haskell.
     I’ve found them pretty confusing, but in reality they are an incredibly

src/layouts/Wiki.astro

@@ -11,6 +11,7 @@ interface Props {
   headings?: MarkdownHeading[];
   frontmatter: {
     title: string;
+    icon?: string;
   };
   slug?: string;
   tree?: PageTree;
@@ -36,6 +37,13 @@ const headings = Maybe.fromNullable(Astro.props.headings);
 const pages = Astro.url.pathname.startsWith("/wiki/")
   ? await constructWikiTree(Astro.props.tree)
   : Maybe.empty();
+
+const {title, icon} = frontmatter || {};
+
+const classlist = [
+  'wiki-article',
+  ...icon ? ['has-icon', `icon-${icon}`] : []
+];
 ---
 
 <Base title={frontmatter.title}>
@@ -52,9 +60,9 @@ const pages = Astro.url.pathname.startsWith("/wiki/")
       <Tree heading="Personal Wiki" pages={pages} headings={headings} />
     </aside>
 
-    <article class="wiki-article">
-      <heading class="markdown">
-        <h1 id="top">{frontmatter?.title}</h1>
+    <article class:list={classlist}>
+      <heading class="markdown" >
+        <h1 id="top">{title}</h1>
       </heading>
       <section class="wiki-article__markdown markdown">
         <slot />

src/styles/layouts/_page.scss

@@ -102,4 +102,14 @@ $bp-l: 80rem;
   &__markdown {
     max-width: calc(100vw - 2em);
   }
+
+  &.has-icon {
+    background-position: top right;
+    background-repeat: no-repeat;
+    background-size: 20% auto;
+
+    &.icon-haskell {
+      background-image: url("/static/sketch/haskell.png");
+    }
+  }
 }