From 33b2a01c9dd030f59b2e7c4eb06c1393cd30b457 Mon Sep 17 00:00:00 2001
From: sudoer777 <git@sudoer.ch>
Date: Fri, 9 Jun 2023 15:11:28 -0500
Subject: [PATCH] Add article page and credits

---
 src/components/content/global/Footer.astro | 30 +++++++++++++++++-----
 src/components/content/global/Navbar.astro |  4 +--
 src/components/content/index/Section.astro |  3 +--
 src/layouts/Article.astro                  | 28 ++++++++++++++++++++
 src/pages/credits.mdx                      | 26 +++++++++++++++++++
 tailwind.config.cjs                        |  4 +--
 6 files changed, 83 insertions(+), 12 deletions(-)
 create mode 100644 src/layouts/Article.astro
 create mode 100644 src/pages/credits.mdx

diff --git a/src/components/content/global/Footer.astro b/src/components/content/global/Footer.astro
index 502179d..46d7c2a 100644
--- a/src/components/content/global/Footer.astro
+++ b/src/components/content/global/Footer.astro
@@ -1,11 +1,29 @@
 ---
 const paddingX = 'px-[.75rem]'
 const paddingY = 'py-[.5rem]'
+
+interface NavItem {
+    text: string
+    link: string
+}
+
+const links: NavItem[] = [{ text: 'site credits', link: '/credits' }]
 ---
 
-<footer class={`flex ${paddingX} ${paddingY}`}>
-    <span class="mr-auto">Copyright Ethan Reece</span>
-    <nav>
-        <a>site credits</a>
-    </nav>
-</footer>
+<section>
+    <footer class={`flex ${paddingX} ${paddingY}`}>
+        <span class="mr-auto">Copyright Ethan Reece</span>
+        <nav>
+            {
+                links.map((link) => (
+                    <a
+                        href={link.link}
+                        class="hover:underline focus-visible:underline focus-visible:outline-none"
+                    >
+                        {link.text}
+                    </a>
+                ))
+            }
+        </nav>
+    </footer>
+</section>
diff --git a/src/components/content/global/Navbar.astro b/src/components/content/global/Navbar.astro
index dade66d..20205ac 100644
--- a/src/components/content/global/Navbar.astro
+++ b/src/components/content/global/Navbar.astro
@@ -23,7 +23,7 @@ const mainButtonPaddingX = 'px-[.75rem]'
 const mainButtonPaddingY = 'py-[.5rem]'
 ---
 
-<div class="fixed z-navbar w-full backdrop-blur-sm">
+<section class="fixed z-navbar w-full backdrop-blur-sm">
     <div
         class={`max-h-navbar-h bg-background-light ${paddingX} ${paddingY} opacity-80`}
     >
@@ -45,4 +45,4 @@ const mainButtonPaddingY = 'py-[.5rem]'
             }
         </nav>
     </div>
-</div>
+</section>
diff --git a/src/components/content/index/Section.astro b/src/components/content/index/Section.astro
index fd06a76..d94a7d8 100644
--- a/src/components/content/index/Section.astro
+++ b/src/components/content/index/Section.astro
@@ -11,14 +11,13 @@ const { title, slug, background } = Astro.props.frontmatter
 const fontSize = 'text-[1rem]'
 const fontSizeH2 = 'text-[1.5rem]'
 
-const paddingX = 'px-[1rem]'
 const paddingT = 'pt-[1.5rem]'
 const paddingB = 'pb-[2.5rem]'
 const anchorDistance = 'mt-[-5rem] pt-[5rem]'
 ---
 
 <section
-    class={`${paddingX} ${paddingT} ${paddingB} ${fontSize} ${
+    class={`px-screen-x ${paddingT} ${paddingB} ${fontSize} ${
         background ? 'bg-background-dark' : ''
     }`}
 >
diff --git a/src/layouts/Article.astro b/src/layouts/Article.astro
new file mode 100644
index 0000000..1a9095c
--- /dev/null
+++ b/src/layouts/Article.astro
@@ -0,0 +1,28 @@
+---
+import type { MDXLayoutProps } from 'astro'
+import Base from './Base.astro'
+
+type Props = MDXLayoutProps<{
+    title: string
+    description: string
+}>
+
+const { title, description } = Astro.props.frontmatter
+---
+
+<Base title={`${title} - Ethan Reece`} description={description}>
+    <article class="px-screen-x">
+        <div class="mx-auto max-w-page-w">
+            <section>
+                <header>
+                    <h1 class="pb-[1.5rem] pt-[.75rem] text-[2rem] font-bold">
+                        {title}
+                    </h1>
+                </header>
+            </section>
+            <section class="space-y-paragraph">
+                <slot />
+            </section>
+        </div>
+    </article>
+</Base>
diff --git a/src/pages/credits.mdx b/src/pages/credits.mdx
new file mode 100644
index 0000000..cf0a17b
--- /dev/null
+++ b/src/pages/credits.mdx
@@ -0,0 +1,26 @@
+---
+layout: '../layouts/Article.astro'
+title: 'Site Credits'
+---
+
+Framework: Astro with TypeScript and MDX
+
+Runtime: Node.js
+
+Package management: pnpm
+
+CSS: Tailwind (with Astro extension)
+
+Font: JetBrains Mono (using Fontsource)
+
+Circuitboard Pattern: Hero Patterns
+
+Icons: Hero Icons (using Astro Icon)
+
+IDE: VSCodium
+
+Code formatting: Prettier, ESLint, Astro MDX
+
+Optimization: Astro Prefetch, Astro Sitemap, Astro Imagetools (using Sharp), Astro Robots.txt, Astro SEO, Autoprefixer, CSSNano
+
+Source code: On Forgejo
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index c5a63c9..aa624e4 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -28,8 +28,8 @@ module.exports = {
             circuitboard: '40rem',
         },
         spacing: {
-            'screen-x': '2rem',
-            'screen-y': '1rem',
+            'screen-x': '1rem',
+            'screen-y': '1.5rem',
             'navbar-h': '4rem',
             paragraph: '1rem',
         },