consistent header and footers

activatedgeek · Dec 8, 2024 · d703a00 · d703a00
1 parent 1e9f9c1
commit d703a00
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 105 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -19,8 +19,7 @@ const {
 
 <style>
   footer {
-    border-top: solid var(--pico-muted-border-color)
-      calc(3 * var(--pico-border-width));
+    padding-top: 0;
 
     > nav {
       width: 100%;

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,64 +1,75 @@
 ---
-import { getEntry } from "astro:content";
 import { IoSearch } from "react-icons/io5";
 import { PiTreeBold } from "react-icons/pi";
-
-const { area } = Astro.props;
-
-const {
-  data: { backgroundColor },
-} = await getEntry(area.collection, area.id);
+import { TfiThought } from "react-icons/tfi";
 ---
 
-<style>
-  header {
-    padding: 0 var(--pico-typography-spacing-vertical);
-  }
-
-  a {
-    display: inline-flex;
-    vertical-align: middle;
-    align-items: center;
-
-    > span {
-      margin-left: calc(var(--pico-spacing) * 0.5);
-    }
-  }
-
-  div.area-identifier {
-    width: 100vw;
-    height: calc(7 * var(--pico-border-width));
-    background-color: var(--area-background-color);
-  }
-</style>
-
-<div
-  class="area-identifier"
-  style={`--area-background-color: ${backgroundColor};`}
->
-</div>
 <header>
   <nav>
     <ul>
       <li>
-        <a href="/">
-          <image src="/sk.svg" alt="SK Logo" width={70} height="auto" />
+        <a title="Home" href="/">
+          <img
+            style="width: 1.3em; height: auto;"
+            src="/favicon.svg"
+            alt="SK Logo"
+          />
         </a>
       </li>
     </ul>
     <ul>
       <li>
-        <a title="Search" href="/search">
-          <IoSearch color="var(--pico-primary)" />
-          <span>Search</span>
+        <a title="Knowledge Base" href="/kb">
+          <PiTreeBold />
+          <span>KB</span>
         </a>
       </li>
       <li>
-        <a title="Knowledge Base" href="/kb">
-          <PiTreeBold color="var(--pico-primary)" />
-          <span>KB</span>
+        <a title="Thoughts" href="/thoughts">
+          <TfiThought />
+          <span>Thoughts</span>
+        </a>
+      </li>
+      <li>
+        <a title="Search" href="/search">
+          <IoSearch />
+          <span>Search</span>
         </a>
       </li>
     </ul>
   </nav>
 </header>
+
+<style>
+  header {
+    text-align: center;
+    position: sticky;
+    top: 0;
+    > nav {
+      display: inline-flex;
+      align-items: center;
+      padding: calc(0.2 * var(--pico-spacing)) var(--pico-spacing);
+      backdrop-filter: blur(4px) saturate(50%);
+      background-color: rgba(255, 255, 255, 0.75);
+      border-radius: calc(4 * var(--pico-border-radius));
+      border: 2px solid rgba(209, 213, 219, 0.3);
+
+      > ul {
+        > li {
+          display: inline-flex;
+          align-items: center;
+          padding: 0 var(--pico-nav-element-spacing-horizontal);
+          > a {
+            display: inline-flex;
+            align-items: center;
+            padding: 0 var(--pico-nav-element-spacing-horizontal);
+
+            > span {
+              margin: 0 calc(0.2 * var(--pico-spacing));
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/MDPage.astro b/src/components/MDPage.astro
@@ -12,14 +12,14 @@ const { page } = Astro.props;
 const { data: frontmatter } = page;
 const { Content } = await page.render();
 
-const { title, description, date, updated, area, comments } = frontmatter;
+const { title, description, date, updated, area, comments, hideMetadata } =
+  frontmatter;
 ---
 
 <style>
   section {
     padding-bottom: calc(0.5 * var(--pico-spacing));
-    border-bottom: solid var(--pico-muted-border-color)
-      calc(1.2 * var(--pico-border-width));
+    margin-bottom: 0;
 
     > h1 {
       margin-bottom: calc(0.25 * var(--pico-typography-spacing-vertical));
@@ -56,6 +56,13 @@ const { title, description, date, updated, area, comments } = frontmatter;
       }
     }
   }
+
+  main > hr {
+    margin: var(--pico-spacing) 0;
+    width: 100vw;
+    position: relative;
+    left: calc(-50vw + 50%);
+  }
 </style>
 
 <Html frontmatter={frontmatter}>
@@ -66,10 +73,10 @@ const { title, description, date, updated, area, comments } = frontmatter;
     slot="head"
   />
   <main data-pagefind-body>
-    <section>
+    <section style="text-align: center;">
       <h1 style="--pico-font-size: 2.5rem;">{title}</h1>
       <p style="--pico-font-size: 1.5rem;">{description}</p>
-      <div>
+      <div style={hideMetadata ? "display: none;" : "display: inline-block;"}>
         <div>
           {
             updated || date ? (
@@ -98,6 +105,7 @@ const { title, description, date, updated, area, comments } = frontmatter;
         </div>
       </div>
     </section>
+    <hr />
     <Content />
     <slot />
     {
@@ -107,5 +115,6 @@ const { title, description, date, updated, area, comments } = frontmatter;
         </section>
       ) : null
     }
+    <hr />
   </main>
 </Html>
diff --git a/src/components/THtml.astro b/src/components/THtml.astro
@@ -1,15 +1,14 @@
 ---
 import { getEntry } from "astro:content";
-import { PiTreeBold } from "react-icons/pi";
-import { TfiThought } from "react-icons/tfi";
-import { IoSearch } from "react-icons/io5";
 
+import Header from "./Header.astro";
+import Footer from "./Footer.astro";
 import Goatcounter from "./Goatcounter.astro";
 
 import "@styles/main.css";
 
 const {
-  frontmatter: { title, description, area, date, updated, keywords, authors },
+  frontmatter: { title, description, date, keywords },
 } = Astro.props;
 
 const canonicalURL = new URL(Astro.url.pathname, import.meta.env.SITE);
@@ -52,52 +51,14 @@ const {
       ) : null
     }
 
-    {
-      updated ? (
-        <meta
-          property="article:modified_time"
-          content={updated.toISOString()}
-        />
-      ) : null
-    }
-
     <Goatcounter />
 
     <slot name="head" />
   </head>
   <body>
-    <header>
-      <nav>
-        <ul>
-          <li>
-            <a title="Home" href="/">
-              <img style="width: 1.3em; height: auto;" src="/favicon.svg" />
-            </a>
-          </li>
-        </ul>
-        <ul>
-          <li>
-            <a title="Knowledge Base" href="/kb">
-              <PiTreeBold />
-              <span>Knowledge Base</span>
-            </a>
-          </li>
-          <li>
-            <a title="Thoughts" href="/thoughts">
-              <TfiThought />
-              <span>Thoughts</span>
-            </a>
-          </li>
-          <li>
-            <a title="Search" href="/search">
-              <IoSearch />
-              <span>Search</span>
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </header>
+    <Header />
     <slot />
+    <Footer />
   </body>
 </html>
 

diff --git a/src/content/config.ts b/src/content/config.ts
@@ -32,6 +32,7 @@ const kb = defineCollection({
     authors: z.array(reference("authors")).optional().default(["sk"]),
     unlisted: z.boolean().default(false),
     comments: z.boolean().default(true),
+    hideMetadata: z.boolean().default(false),
   }),
 });
 

diff --git a/src/content/kb/index.md b/src/content/kb/index.md
@@ -4,6 +4,8 @@ description: My second brain.
 date: Jul 14 2020, 19:07 -0700
 updated: May 26 2023, 23:42 -0400
 area: meta
+comments: false
+hideMetadata: true
 unlisted: true
 ---
 

diff --git a/src/content/kb/meta/about.md b/src/content/kb/meta/about.md
@@ -4,6 +4,8 @@ description: I do normal science.
 date: Jun 6 2020, 20:02 -0700
 updated: Jun 15 2023, 12:30 -0400
 area: meta
+comments: false
+hideMetadata: true
 unlisted: true
 ---
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -10,7 +10,6 @@ export const prerender = true;
 const {
   props: { page },
 } = await processCollectionItem(await getEntry("kb", "meta/about"));
-page.data = { ...page.data, comments: false };
 ---
 
 <MDPage page={page}>

diff --git a/src/pages/kb/index.astro b/src/pages/kb/index.astro
@@ -9,7 +9,6 @@ export const prerender = true;
 const {
   props: { page },
 } = await processCollectionItem(await getEntry("kb", "index"));
-page.data = { ...page.data, comments: false };
 ---
 
 <MDPage page={page} />
diff --git a/src/pages/thoughts/[page].astro b/src/pages/thoughts/[page].astro
@@ -29,8 +29,8 @@ const {
         {frontmatter.description}
       </p>
     </section>
+    <hr />
     <section>
-      <hr />
       {
         data.map(async (page) => {
           const { Content } = await page.render();
@@ -48,7 +48,6 @@ const {
           );
         })
       }
-      <hr />
     </section>
     <nav>
       <ul>
@@ -77,6 +76,7 @@ const {
         </li>
       </ul>
     </nav>
+    <hr />
   </main>
 </THtml>
 
@@ -85,6 +85,13 @@ const {
     text-align: center;
   }
 
+  main > hr {
+    margin: var(--pico-spacing) 0;
+    width: 100vw;
+    position: relative;
+    left: calc(-50vw + 50%);
+  }
+
   section {
     > article {
       box-shadow: 0 0 0.5rem var(--pico-muted-border-color);
@@ -94,13 +101,6 @@ const {
         font-size: small;
       }
     }
-
-    > hr {
-      margin: var(--pico-spacing) 0;
-      width: 100vw;
-      position: relative;
-      left: calc(-50vw + 50%);
-    }
   }
 
   section:last-of-type {

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -81,10 +81,11 @@ p.hint.error {
 }
 
 section.toc {
-  display: block;
+  display: inline-flex;
   width: 100%;
 
   > details.toc-details {
+    margin: auto;
     background-color: rgba(255, 255, 255, 0.9);
     border: solid var(--pico-muted-border-color) var(--pico-border-width);
     border-radius: var(--pico-border-radius);