refactor: consolidate layouts by migrating writing pages to main layout and removing redundant components

app/layouts/main.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+defineProps<{
+    title?: string;
+    description?: string;
+}>();
+</script>
+
 <template>
     <div>
         <svg width="0" height="0" aria-hidden="true" style="position: absolute">
@@ -17,12 +24,20 @@
             <div class="trace right"></div>
 
             <header class="header">
-                <slot name="header">
+                <div class="header-upper">
-                    <h1 class="name">Jaron</h1>
+                    <slot name="header-upper" />
-                    <p class="title">
+                </div>
-                        Software Engineer by trade &mdash; builder by nature.
+                <div class="header-lower">
-                    </p>
+                    <slot name="header-lower">
-                </slot>
+                        <h1 class="name">{{ title || 'Jaron' }}</h1>
+                        <p class="title">
+                            {{
+                                description ||
+                                'Software Engineer by trade — builder by nature.'
+                            }}
+                        </p>
+                    </slot>
+                </div>
             </header>
 
             <main>
@@ -110,6 +125,15 @@ svg[height='0'] {
 .header {
     display: flex;
     flex-direction: column;
+}
+
+.header-upper {
+    height: 8vh;
+}
+
+.header-lower {
+    display: flex;
+    flex-direction: column;
     align-items: flex-start;
     gap: 16px;
 
@@ -118,12 +142,11 @@ svg[height='0'] {
     padding: 2rem;
     color: var(--bg);
 
-    margin-top: 8vh;
     position: relative;
     isolation: isolate;
 }
 
-.header::before {
+.header-lower::before {
     content: '';
     position: absolute;
     inset: 0;

app/layouts/writing.vue

@@ -1,189 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-    title?: string;
-    description?: string;
-}>();
-</script>
-
-<template>
-    <div>
-        <svg width="0" height="0" aria-hidden="true" style="position: absolute">
-            <filter id="grainy" x="0" y="0" width="100%" height="100%">
-                <feTurbulence
-                    type="fractalNoise"
-                    baseFrequency=".85"
-                    numOctaves="3"
-                ></feTurbulence>
-                <feColorMatrix type="saturate" values="0"></feColorMatrix>
-                <feBlend mode="multiply" in="SourceGraphic"></feBlend>
-            </filter>
-        </svg>
-        <div class="page-wrapper">
-            <div class="trace left"></div>
-
-            <div class="trace right"></div>
-
-            <header class="header">
-                <h1 class="name">{{ title || 'Jaron' }}</h1>
-                <p v-if="description" class="title">
-                    {{ description }}
-                </p>
-                <p v-else class="title">
-                    Software Engineer by trade &mdash; builder by nature.
-                </p>
-            </header>
-
-            <main>
-                <slot />
-                <div style="flex: 1"></div>
-            </main>
-
-            <footer class="footer">
-                <div class="footer-upper">
-                    <div class="flex-center">
-                        <p>
-                            <a class="punch-link" href="mailto:yo@jp.wtf"
-                                >Say hi.</a
-                            >
-                        </p>
-                        <div class="flex-ff"></div>
-                        <p style="text-align: right">
-                            Let's make something cool.
-                        </p>
-                    </div>
-                </div>
-                <div class="footer-lower">
-                    <div class="flex-center">
-                        <p style="text-align: right">Est. 2003</p>
-                        <div class="flex-ff"></div>
-                        <p style="text-align: right">Austin, TX</p>
-                    </div>
-                </div>
-            </footer>
-        </div>
-    </div>
-</template>
-
-<style>
-.page-wrapper {
-    --main-width: 50vw;
-    width: var(--main-width);
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    position: relative;
-}
-
-main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.trace {
-    position: absolute;
-    top: 0;
-    height: 100%;
-    width: 1px;
-    background: var(--muted);
-    z-index: 1;
-}
-
-.trace.left {
-    left: 0;
-}
-
-.trace.right {
-    right: 0;
-}
-
-svg[height='0'] {
-    position: fixed;
-}
-
-.name {
-    font-size: 4rem;
-    font-weight: 400;
-    line-height: 1.2;
-    margin: 0;
-}
-
-.title {
-    font-weight: 300;
-    margin: 0;
-    font-style: italic;
-}
-
-.header {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-
-    border-top: 1px solid var(--muted);
-    border-bottom: 1px solid var(--muted);
-    padding: 2rem;
-    color: var(--bg);
-
-    margin-top: 8vh;
-    position: relative;
-    isolation: isolate;
-}
-
-.header::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: url('/blend.jpeg');
-    background-size: cover;
-    background-position: left top;
-    background-repeat: no-repeat;
-    filter: url(#grainy);
-    z-index: -1;
-}
-
-.footer-upper {
-    border-top: 1px solid var(--muted);
-    border-bottom: 1px solid var(--muted);
-    padding: 2rem;
-    color: var(--bg);
-    min-height: 10vh;
-    position: relative;
-    isolation: isolate;
-}
-
-.footer-upper::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: url('/blend.jpeg');
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    filter: url(#grainy);
-    z-index: -1;
-}
-
-.footer-lower {
-    padding: 1rem;
-    height: 8vh;
-    font-size: small;
-}
-
-@media (max-width: 1024px) {
-    .page-wrapper {
-        --main-width: 80vw;
-    }
-}
-
-@media (max-width: 768px) {
-    .page-wrapper {
-        --main-width: 100vw;
-    }
-
-    .trace {
-        display: none;
-    }
-}
-</style>

app/pages/writing/[...slug].vue

@@ -14,12 +14,46 @@ useSeoMeta({
 });
 
 definePageMeta({
-    layout: 'writing',
+    layout: 'main',
 });
 </script>
 
 <template>
-    <NuxtLayout name="writing" :title="page?.title" :description="page?.description">
+    <NuxtLayout
-        <ContentRenderer v-if="page" :value="page" />
+        name="main"
+        :title="page?.title"
+        :description="page?.description"
+    >
+        <template #header-upper>
+            <div class="header-upper-inner">
+                <NuxtLink href="/writing"><-- Back</NuxtLink>
+            </div>
+        </template>
+        <ContentRenderer class="writing__content" v-if="page" :value="page" />
     </NuxtLayout>
 </template>
+
+<style scoped>
+.header-upper-inner {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    height: 100%;
+    padding: 0 2rem;
+}
+
+.header-upper-inner a {
+    font-size: small;
+    color: var(--text);
+    text-decoration: underline;
+    text-underline-offset: 4px;
+}
+
+.writing__content {
+    padding: 2rem;
+}
+
+:deep(.writing__content > :first-child) {
+    margin-top: 0;
+}
+</style>

app/pages/writing/index.vue

@@ -1,21 +1,9 @@
 <script setup lang="ts">
-const { data: home } = await useAsyncData(() =>
+const { data: pages } = await useAsyncData('writing-pages', () =>
-    queryCollection('writing').path('/writing').first(),
+    queryCollection('writing').all(),
 );
-
-useSeoMeta({
-    title: home.value?.title,
-    description: home.value?.description,
-});
 </script>
 
 <template>
-    <NuxtLayout
+    <NuxtLayout name="main"> </NuxtLayout>
-        name="writing"
-        :title="home?.title"
-        :description="home?.description"
-    >
-        <ContentRenderer v-if="home" :value="home" />
-        <div v-else>Home not found</div>
-    </NuxtLayout>
 </template>

content/writing/index.md

@@ -1,8 +0,0 @@
----
-title: Writing
-description: Some thoughts I've had over the years. Not all of them are good, but here we are.
----
-
-# Hello Content
-
-blah blah blah

content/writing/thing.md

@@ -1,8 +1,6 @@
 ---
-description: This is a test.
+title: Writing
-title: Thing
+description: Some thoughts I've had over the years. Not all of them are good, but here we are.
 ---
 
-# Hello Content
-
 blah blah blah