Markdown Syntax highlighting

Vitesse theme
Draft tag in posts
leg

astro.config.mjs

@@ -1,4 +1,14 @@
 import { defineConfig } from "astro/config";
 
+import syntaxTheme from "./syntax-theme.json";
+
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+    output: "static",
+    markdown: {
+        syntaxHighlight: "shiki",
+        shikiConfig: {
+            theme: syntaxTheme,
+        },
+    },
+})

src/content/content.ts

@@ -3,6 +3,7 @@ import { z, defineCollection } from "astro:content";
 const postsCollection = defineCollection({
     type: "content",
     schema: z.object({
+        draft: z.boolean().optional(),
         title: z.string(),
         description: z.string(),
         pubDate: z.date(),
@@ -14,6 +15,7 @@ const postsCollection = defineCollection({
 const projectsCollection = defineCollection({
     type: "content",
     schema: z.object({
+        draft: z.boolean().optional(),
         title: z.string(),
         description: z.string(),
         image: z.string().optional(),

src/content/posts/markdown-cheat-sheet.md

@@ -1,4 +1,6 @@
 ---
+#draft: true
+
 title: This is an example Post
 description: "Cheat Sheet for Markdown"
 pubDate: 2022-07-08
@@ -80,7 +82,7 @@ These elements extend the basic syntax by adding additional features. Not all Ma
 
 ### Fenced Code Block
 
-```
+```json
 {
   "firstName": "John",
   "lastName": "Smith",

src/layouts/Markdown.astro

@@ -10,30 +10,43 @@ const { Content } = await post.render();
 
 <a class="button" href="/" id="home">Home</a>
 
-<h1>{post.data.title}</h1>
+<div class="header">
-<p>{post.data.description}</p>
+    <h1>{post.data.title}</h1>
-<ul id="tags" class="pill-list">
+    <p>{post.data.description}</p>
-    {post.data.tags.map((item: string) => ( <li class="pill">#{item}</li> ))}
+    <ul id="tags" class="pill-list">
-</ul>
+        {post.data.tags.map((item: string) => ( <li class="pill">#{item}</li> ))}
+    </ul>
+</div>
 
 <hr>
 
 <div id="markdown">
-    <Content />
+<Content />
 </div>
 
 <hr>
 
 <ul id="controls">
-    <li>{prev && <a class="button" href=`${base}/${prev.slug}` id="prev">{prev.data.title}</a>}</li>
+    <li>
-    <li>{next && <a class="button" href=`${base}/${next.slug}` id="next">{next?.data.title}</a>}</li>
+        {prev && (
+            <a class="button" href=`${base}/${prev.slug}` id="prev">
+                { prev.data.title }
+            </a>
+        )}
+    </li>
+    <li>
+        {next && (
+            <a class="button" href=`${base}/${next.slug}` id="next">
+                { next?.data.title }
+            </a>
+        )}
+    </li>
 </ul>
 
 <style is:global lang="scss">
     @import "../styles/vars";
 
     #home { margin-bottom: 32px; }
-    #tags { padding-top: 16px; }
 
     #controls {
         display: flex;
@@ -43,6 +56,10 @@ const { Content } = await post.render();
 
         > li {
             list-style: none;
+
+            > .button {
+                // background-color: transparent;
+            }
         }
     }
 
@@ -50,7 +67,10 @@ const { Content } = await post.render();
         flex-grow: 1;
 
         h1, h2, h3, h4, h5, h6 {
-            padding-bottom: 16px;
+            padding-bottom: 8px;
+        }
+        h2, h3, h4, h5, h6 {
+            padding-top: 16px;
         }
 
         p {
@@ -77,7 +97,7 @@ const { Content } = await post.render();
             border-top: 2px solid $gray;
         }
 
-        code {
+        p code {
             padding: 2px 4px;
 
             font-size: 13px;
@@ -89,28 +109,102 @@ const { Content } = await post.render();
             overflow-x: auto
         }
 
-        pre {
-            padding: 8px;
-
-            white-space: pre-wrap;
-            word-wrap: break-word;
-
-            border-radius: $radius;
-            background-color: $gray !important;
-            color: $light;
-
-            overflow-x: scroll;
-
-            > code {
-                padding: 0;
-            }
-        }
-
         blockquote {
             margin: 8px 0 8px 16px;
             padding: 0 8px;
             font-style: italic;
             border-left: 2px solid $orange;
         }
+
+        table {
+            width: 100%;
+
+            border: 1px solid $gray;
+
+            border-collapse: collapse;
+
+            tr {
+                border-bottom: 1px solid $gray;
+
+                &:last-of-type {
+                    border: 0 solid transparent;
+                }
+
+                th, td {
+                    padding: 8px 16px;
+
+                    font-size: 13px;
+
+                    border-right: 1px solid $gray;
+
+                    &:last-of-type {
+                        border: 0 solid transparent;
+                    }
+                }
+
+                th {
+                    font-weight: bolder;
+
+                    background-color: $gray;
+                }
+            }
+        }
+
+        // pre {
+        //     padding: 8px;
+        //
+        //     white-space: pre-wrap;
+        //     word-wrap: break-word;
+        //
+        //     border-radius: $radius;
+        //     background-color: $gray !important;
+        //     color: $light;
+        //
+        //     overflow-x: scroll;
+        //
+        //     > code {
+        //         padding: 0;
+        //     }
+        // }
+
+        .astro-code {
+            padding: 36px 8px 8px;
+
+            position: relative;
+
+            display: block;
+
+            border-radius: $radius;
+
+            &::before {
+                content: "lang: " attr(data-language);
+
+                padding: 4px 8px;
+
+                width: 100%;
+                height: 28px;
+
+                position: absolute;
+                top: 0;
+                left: 0;
+
+                font-size: 13px;
+
+                background-color: $gray;
+                color: $light;
+            }
+        }
+
+        .footnotes {
+            margin-top: 32px;
+            padding: 16px;
+
+            border-radius: $radius;
+            background-color: $gray;
+
+            > h2 {
+                padding-top: 0;
+            }
+        }
     }
 </style>

src/pages/index.astro

@@ -17,13 +17,14 @@ const posts = await getPosts("posts");
 ---
 
 <Layout title="Leggy Land" src={BannerImg} alt="Temporary Banner">
-	<h1>Leggy Land</h1>
+	<div class="header">
-	<p>Made with Coffee, lots of it.</p>
+		<h1>Leggy Land</h1>
-
+		<p>Made with Coffee, lots of it.</p>
-	<div style="margin: 16px 0 32px">
 		<Music />
 	</div>
 
+	<hr>
+
 	<div class="section">
 		<h2>Who am I</h2>
 		<p>
@@ -49,21 +50,33 @@ const posts = await getPosts("posts");
 	<div class="section">
 		<h2>Tools</h2>
 		<ul class="pill-list">
-			{tools.map(tool => ( <li class="pill large">{tool}</li> ))}
+			{tools.map(tool => (
+				<li class="pill large">
+					{tool}
+				</li>
+			))}
 		</ul>
 	</div>
 
 	<div class="section">
 		<h2>Languages</h2>
 		<ul class="pill-list">
-			{languages.map(language => ( <li class="pill large">{language}</li> ))}
+			{languages.map(language => (
+				<li class="pill large">
+					{language}
+				</li>
+			))}
 		</ul>
 	</div>
 
 	<div class="section">
 		<h2>Frameworks</h2>
 		<ul class="pill-list">
-			{frameworks.map(framework => ( <li class="pill large">{framework}</li> ))}
+			{frameworks.map(framework => (
+				<li class="pill large">
+					{framework}
+				</li>
+			))}
 		</ul>
 	</div>
 

src/pages/leg.astro

@@ -6,8 +6,10 @@ import BannerImg from "../../../public/banner-alt.webp";
 <Layout title="LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG" src={BannerImg} alt="Temporary Banner">
     <a class="button" href="/" id="home">Home</a>
 
-    <h1>Maned Wolf Jumpscare</h1>
+    <div class="header">
-    <p>GwaGwa</p>
+        <h1>Maned Wolf Jumpscare</h1>
+        <p>GwaGwa</p>
+    </div>
 
     <hr>
 

src/pages/posts/index.astro

@@ -1,18 +1,19 @@
 ---
-import { getCollection } from 'astro:content';
+import { getPosts } from "../../utils";
-
 import Layout from "../../layouts/Layout.astro";
 import Card from "../../components/Card.astro";
 import BannerImg from "../../../public/banner-alt.webp";
 
-const posts = await getCollection('posts');
+const posts = await getPosts("posts");
 ---
 
 <Layout title="Leggy Land - All Posts" src={BannerImg} alt="Temporary Banner">
     <a class="button" id="home" href="/">Home</a>
 
-    <h1>All Posts</h1>
+    <div class="header">
-    <p>Egg Book</p>
+        <h1>All Posts</h1>
+        <p>Egg Book</p>
+    </div>
 
     <hr>
 

src/pages/projects/index.astro

@@ -1,17 +1,19 @@
 ---
-import { getCollection } from 'astro:content';
+import { getPosts } from "../../utils";
-
 import Layout from "../../layouts/Layout.astro";
 import Card from "../../components/Card.astro";
 import BannerImg from "../../../public/banner-alt.webp";
 
-const projects = await getCollection('projects');
+const projects = await getPosts("projects");
 ---
 
 <Layout title="Leggy Land - All Projects" src={BannerImg} alt="Temporary Banner">
     <a class="button" id="home" href="/">Home</a>
-    <h1>All Projects</h1>
+
-    <p>Come back next week for 4 new projects!</p>
+    <div class="header">
+        <h1>All Projects</h1>
+        <p>Come back next week for 4 new projects!</p>
+    </div>
 
     <hr>
 

src/styles/_header.scss

@@ -0,0 +1,9 @@
+.header {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    > h1 {
+        margin-bottom: calc((16px - 4px) * -1);
+    }
+}

src/styles/styles.scss

@@ -3,6 +3,7 @@
 @import "reset";
 @import "main";
 @import "banner";
+@import "header";
 @import "section";
 @import "button";
 @import "pill";