Make layout for the markdown page

Leg
Rename back to home, to reflect its purpose better

src/layouts/Markdown.astro

@@ -0,0 +1,62 @@
+---
+interface Props {
+    post: any,
+}
+
+const { post } = Astro.props;
+
+const { Content } = await post.render();
+---
+
+<a class="button" href="/" id="home">Home</a>
+
+<h1>{post.data.title}</h1>
+<p>{post.data.description}</p>
+<ul id="tags">
+    {post.data.tags.map((item: string) => ( <li class="pill">#{item}</li> ))}
+</ul>
+
+<hr>
+
+<div id="markdown">
+    <Content />
+</div>
+
+<hr>
+
+<ul id="controls">
+    <li><a class="button" href="/">Prev</a></li>
+    <li><a class="button" href="/">Next</a></li>
+</ul>
+
+<style is:global lang="scss">
+    @import "../styles/vars";
+
+    #home {
+        margin-bottom: 32px;
+    }
+
+    #tags {
+        padding-top: 16px;
+
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    #markdown {
+        flex-grow: 1;
+    }
+
+    #controls {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-content: center;
+
+        > li {
+            list-style: none;
+        }
+    }
+</style>

src/pages/leg.astro

@@ -0,0 +1,20 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="Leggy Land" src="/banner-alt.webp" alt="Temporary Banner">
+    <a class="button" href="/" id="home">Home</a>
+
+    <h1>Maned Wolf Jumpscare</h1>
+    <p>GwaGwa</p>
+
+    <hr>
+
+    <img src="/leg.jpg" alt="Two Maned wolfs having a disagreement" />
+</Layout>
+
+<style lang="scss">
+    #home {
+        margin-bottom: 32px;
+    }
+</style>

src/pages/posts/[...slug].astro

@@ -2,6 +2,7 @@
 import { getCollection } from "astro:content";
 
 import Layout from "../../layouts/Layout.astro";
+import Markdown from "../../layouts/Markdown.astro";
 
 export async function getStaticPaths() {
     const collection = await getCollection('posts')
@@ -14,37 +15,8 @@ export async function getStaticPaths() {
 }
 
 const { post } = Astro.props;
-
-const { Content } = await post.render()
 ---
 
 <Layout title="Leggy Land" src={post.data.image.url} alt={post.data.image.alt}>
-    <a class="button" href="/" id="back">Back</a>
+    <Markdown post={post} />
-    <h1>{post.data.title}</h1>
-    <p>{post.data.description}</p>
-    <ul id="tags">
-        {post.data.tags.map((item: string) => ( <li class="pill">#{item}</li> ))}
-    </ul>
-    <hr>
-
-    <div>
-        <Content />
-    </div>
 </Layout>
-
-<style is:global lang="scss">
-    @import "../../styles/vars";
-
-    #back {
-        margin-bottom: 32px;
-    }
-
-    #tags {
-        padding-top: 16px;
-
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 8px;
-    }
-</style>

src/pages/posts/index.astro

@@ -8,7 +8,8 @@ const posts = await getCollection('posts');
 ---
 
 <Layout title="Leggy Land" src="/banner-alt.webp" alt="Temporary Banner">
-    <a class="button" id="back" href="/">Back</a>
+    <a class="button" id="home" href="/">Home</a>
+
     <h1>All Posts</h1>
     <p>Some regrettable, some not so bad...</p>
 
@@ -35,7 +36,7 @@ const posts = await getCollection('posts');
         padding: 0;
     }
 
-    #back {
+    #home {
         margin-bottom: 32px;
     }
 </style>

src/pages/projects/[...slug].astro

@@ -2,6 +2,7 @@
 import { getCollection } from 'astro:content';
 
 import Layout from "../../layouts/Layout.astro";
+import Markdown from "../../layouts/Markdown.astro";
 
 export async function getStaticPaths() {
     const collection = await getCollection('projects')
@@ -14,38 +15,9 @@ export async function getStaticPaths() {
 }
 
 const { project } = Astro.props;
-
-const { Content } = await project.render()
 ---
 
 <Layout title="Leggy Land" src={project.data.image.url} alt={project.data.image.alt}>
-    <a class="button" id="back" href="/">Back</a>
+    <Markdown post={project} />
-
-    <h1>{project.data.title}</h1>
-    <p>{project.data.description}</p>
-    <ul id="tags">
-        {project.data.tags.map((item: string) => ( <li class="pill">#{item}</li> ))}
-    </ul>
-    <hr>
-
-    <div>
-        <Content />
-    </div>
 </Layout>
 
-<style is:global lang="scss">
-    @import "../../styles/vars";
-
-    #back {
-        margin-bottom: 32px;
-    }
-
-    #tags {
-        padding-top: 16px;
-
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 8px;
-    }
-</style>

src/pages/projects/index.astro

@@ -8,7 +8,7 @@ const projects = await getCollection('projects');
 ---
 
 <Layout title="Leggy Land" src="/banner-alt.webp" alt="Temporary Banner">
-    <a class="button" id="back" href="/">Back</a>
+    <a class="button" id="home" href="/">Home</a>
     <h1>All Projects</h1>
     <p>Too many, so many</p>
 
@@ -35,7 +35,7 @@ const projects = await getCollection('projects');
         padding: 0;
     }
 
-    #back {
+    #home {
         margin-bottom: 32px;
     }
 </style>

src/styles/_main.scss

@@ -5,6 +5,8 @@ main {
     width: 100%;
     max-width: 800px;
 
+    display: flex;
+    flex-direction: column;
     flex-grow: 1;
 
     border-top-left-radius: $radius;