From 2c498e9da25335a91e25989d60c4dbcebe1ad733 Mon Sep 17 00:00:00 2001
From: Maciej Jur <maciej@kamoshi.org>
Date: Wed, 8 Nov 2023 23:28:06 +0100
Subject: [PATCH] feat(styles): article icon

---
 src/content/config.ts            |  3 ++-
 src/content/posts/typeclasses.md |  2 +-
 src/layouts/Wiki.astro           | 14 +++++++++++---
 src/styles/layouts/_page.scss    | 10 ++++++++++
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/content/config.ts b/src/content/config.ts
index 0a6017e..7c7ae6f 100644
--- a/src/content/config.ts
+++ b/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({
diff --git a/src/content/posts/typeclasses.md b/src/content/posts/typeclasses.md
index 0537dcf..dedd3b7 100644
--- a/src/content/posts/typeclasses.md
+++ b/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
diff --git a/src/layouts/Wiki.astro b/src/layouts/Wiki.astro
index a96d932..906bd00 100644
--- a/src/layouts/Wiki.astro
+++ b/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 />
diff --git a/src/styles/layouts/_page.scss b/src/styles/layouts/_page.scss
index 178cbdc..f2f9248 100644
--- a/src/styles/layouts/_page.scss
+++ b/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");
+    }
+  }
 }