Implementing Blog

src/layouts/blogPost.astro

@@ -0,0 +1,66 @@
+---
+import Layout from "./Layout.astro";
+const { frontmatter } = Astro.props;
+
+const title = `${frontmatter.title} - Firq FGO Site`;
+const description = frontmatter.description;
+const options_date: Intl.DateTimeFormatOptions = {
+    year: "numeric",
+    month: "long",
+    day: "2-digit",
+}
+const date = new Date(frontmatter.pubDate).toLocaleDateString('en-GB', options_date);
+---
+
+<Layout title={title} currentpage="blog" descriptionOverride={description}>
+    <div>
+        <h1>
+            {frontmatter.title}
+        </h1>
+        <p>by {frontmatter.author} • Published on {date}</p>
+        <article>
+            <slot />
+        </article>
+    </div>
+</Layout>
+
+<style>
+    h1 {
+        color: white;
+        margin: 0.5rem 0px 0.5rem 15rem;
+        padding: 0.25rem 0.75rem;
+        width: max-content;
+        background-color: var(--c-darkgray);
+    }
+    p {
+        color: white;
+        margin: 0.5rem 0px 0.5rem 15rem;
+        padding: 0.25rem 0.75rem;
+        width: max-content;
+        background-color: var(--c-gray);
+    }
+    article :global(h2) {
+        color: white;
+        padding: 0.25rem 0.75rem;
+        width: max-content;
+        background-color: var(--c-darkgray);
+    }
+    article :global(a) {
+        color: var(--c-darkpurple);
+        text-decoration: none;
+    }
+    article {
+        color: white;
+        margin: 0.5rem 15em 0.5rem 15rem;
+        font-size: 1.1em;
+        padding-bottom: 5rem;
+    }
+    article :global(.astro-code) {
+        padding-left: 2em;
+        width: auto;
+    }
+    article :global(code) {
+        font-weight: bold;
+        color: orange;
+    }
+</style>