From 55828f5f953b599b93a5165601898792db8a0050 Mon Sep 17 00:00:00 2001
From: Fabian Hiller <hillerfabian11@gmail.com>
Date: Mon, 4 Mar 2024 22:08:32 -0500
Subject: [PATCH] Add Credits component to blog post layout

---
 website/src/routes/blog/(posts)/layout.tsx    | 35 +++++++++++++++++--
 .../should-we-change-valibots-api/index.mdx   |  2 ++
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/website/src/routes/blog/(posts)/layout.tsx b/website/src/routes/blog/(posts)/layout.tsx
index 6ab538def..c113f61a0 100644
--- a/website/src/routes/blog/(posts)/layout.tsx
+++ b/website/src/routes/blog/(posts)/layout.tsx
@@ -1,27 +1,56 @@
 import { component$, Slot } from '@builder.io/qwik';
-import { useDocumentHead } from '@builder.io/qwik-city';
-import { PostCover, PostMeta } from '~/components';
+import { useDocumentHead, useLocation } from '@builder.io/qwik-city';
+import { Credits, IconButton, PostCover, PostMeta } from '~/components';
+import { PenIcon } from '~/icons';
 
 export default component$(() => {
+  // Use document head and location
   const head = useDocumentHead();
+  const location = useLocation();
+
   return (
-    <main class="flex flex-1 justify-center py-12 md:py-20 lg:py-32">
+    <main class="flex flex-1 flex-col items-center py-12 md:py-20 lg:py-32">
+      {/* Article */}
       <article class="flex w-full max-w-screen-xl flex-col space-y-12 md:space-y-20 lg:space-y-24">
         <div class="mx-8 flex max-w-screen-md flex-col space-y-5 md:items-center md:space-y-7 md:self-center lg:mx-10 lg:space-y-9">
+          {/* Title */}
           <h1 class="text-2xl font-medium leading-normal text-slate-900 md:text-center md:text-3xl md:leading-normal lg:text-4xl lg:leading-normal dark:text-slate-200">
             {head.title}
           </h1>
+
+          {/* Meta */}
           <PostMeta
             variant="post"
             authors={head.frontmatter.authors}
             published={head.frontmatter.published}
           />
         </div>
+
+        {/* Cover */}
         <PostCover variant="post" label={head.frontmatter.cover} />
+
+        {/* Content */}
         <div class="mdx flex w-full max-w-screen-lg flex-col lg:self-center">
           <Slot />
+
+          {/* Edit page buttton */}
+          <IconButton
+            class="mx-8 lg:mx-10"
+            variant="secondary"
+            type="link"
+            href={`https://github.com/fabian-hiller/valibot/blob/main/website/src/routes/blog/(posts)${location.url.pathname.slice(5)}index.mdx`}
+            target="_blank"
+            label="Edit page"
+          >
+            <PenIcon class="h-[18px]" />
+          </IconButton>
         </div>
       </article>
+
+      {/* Credits */}
+      <div class="w-full max-w-screen-lg">
+        <Credits />
+      </div>
     </main>
   );
 });
diff --git a/website/src/routes/blog/(posts)/should-we-change-valibots-api/index.mdx b/website/src/routes/blog/(posts)/should-we-change-valibots-api/index.mdx
index 4b70e7c6b..930ba0f1a 100644
--- a/website/src/routes/blog/(posts)/should-we-change-valibots-api/index.mdx
+++ b/website/src/routes/blog/(posts)/should-we-change-valibots-api/index.mdx
@@ -8,6 +8,8 @@ authors:
   - fabian-hiller
   - Demivan
   - xcfox
+contributors:
+  - fabian-hiller
 ---
 
 import NpmDownloads from './npm-downloads.jpg?jsx';