Create my own pages

src/layouts/Markdown.astro

@@ -0,0 +1,58 @@
+---
+import Layout from "./Layout.astro";
+import Pill from "../components/Pill.astro";
+const { frontmatter } = Astro.props;
+---
+
+<Layout title="Leggy Land" src={frontmatter.image.url} alt={frontmatter.image.alt}>
+    <a id="back" href="/">Back</a>
+    <h1>{frontmatter.title}</h1>
+    <p>By {frontmatter.author}</p>
+
+    <ul id="tags">
+        {frontmatter.tags.map((item) => (
+                <Pill name={item} />
+        ))}
+    </ul>
+
+    <hr>
+    <slot />
+</Layout>
+
+<style is:global lang="scss">
+    @import "../styles/vars";
+
+    #back {
+        margin-bottom: 32px;
+        padding: 0 32px;
+
+        width: max-content;
+        height: 35px;
+
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+
+        text-decoration: none;
+
+        border-radius: 9999px;
+        border: 2px solid $gray;
+        background-color: $gray;
+        color: $light;
+
+        &:hover, &:focus-visible {
+            background-color: transparent;
+        }
+    }
+
+    #tags {
+        padding-top: 16px;
+
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+</style>