Updates and more

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

@@ -0,0 +1,72 @@
+---
+import { getCollection } from 'astro:content'
+import NavbarLayout from "../../layouts/NavbarLayout.astro";
+import {astroI18n, createGetStaticPaths} from "astro-i18n";
+
+export const getStaticPaths = createGetStaticPaths(async () => {
+    let posts = await getCollection("help");
+
+    return posts.filter(value => value.id.split("/")[0] === astroI18n.locale).map((page) => ({
+        props: { page }, params: { slug: page.slug }
+    }) )
+})
+
+const { page } = Astro.props;
+const { Content } = await page.render();
+---
+
+
+<NavbarLayout title={page.data.title}>
+    <article>
+        <h1 class="text-left">{page.data.title}</h1>
+        <Content />
+    </article>
+</NavbarLayout>
+
+<style is:global>
+    article {
+        width: clamp(75%, 25rem, 100vw);
+        @apply mx-auto bg-gray-100 px-4 py-8 rounded-b-md shadow-md pt-40 sm:pt-28 md:pt-14
+            dark:text-white dark:bg-neutral-900;
+
+        p {
+            @apply my-4 leading-7;
+        }
+
+        h1 {
+            @apply text-4xl font-bold mt-4 text-center;
+        }
+
+        h2 {
+            @apply text-3xl font-bold mt-4;
+        }
+
+        h3 {
+            @apply text-2xl font-bold mt-4;
+        }
+
+        h4 {
+            @apply text-xl font-bold mt-4;
+        }
+
+        a {
+            @apply text-blue-500 hover:text-blue-700;
+        }
+
+        ol>li, ul>li {
+            @apply ml-4;
+        }
+
+        ol {
+            @apply list-decimal;
+        }
+
+        ul {
+            @apply list-disc;
+        }
+
+        pre.astro-code {
+            @apply w-fit p-4 rounded-md border-2 border-gray-600 my-4;
+        }
+    }
+</style>