add area color identifiers

activatedgeek · Mar 7, 2024 · 907bfd7 · 907bfd7
1 parent 492a407
commit 907bfd7
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,6 +1,13 @@
 ---
+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);
 ---
 
 <style>
@@ -17,8 +24,19 @@ import { PiTreeBold } from "react-icons/pi";
       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 data-pagefind-ignore>
   <nav>
     <ul>

diff --git a/src/components/Html.astro b/src/components/Html.astro
@@ -7,7 +7,7 @@ import Footer from "./Footer.astro";
 import "@styles/main.css";
 
 const {
-  frontmatter: { title, description, date, updated, keywords, authors },
+  frontmatter: { title, description, area, date, updated, keywords, authors },
 } = Astro.props;
 
 const canonicalURL = new URL(Astro.url.pathname, import.meta.env.SITE);
@@ -19,6 +19,10 @@ const authorsList = await Promise.all(
 const {
   data: { name: siteAuthorName },
 } = await getEntry("authors", "sk");
+
+const {
+  data: { backgroundColor: themeColor },
+} = await getEntry(area.collection, area.id);
 ---
 
 <html lang="en">
@@ -32,6 +36,7 @@ const {
     <link rel="canonical" href={canonicalURL.href} />
 
     <title>{title} | {siteAuthorName}</title>
+    <meta name="theme-color" content={themeColor} />
     <meta name="description" content={description} />
     {
       authorsList.map(({ data: { name, url } }) => (
@@ -81,7 +86,7 @@ const {
     <slot name="head" />
   </head>
   <body>
-    <Header />
+    <Header area={area} />
     <slot />
     <Footer />
   </body>

diff --git a/src/pages/search.astro b/src/pages/search.astro
@@ -4,6 +4,7 @@ import Html from "@components/Html.astro";
 const frontmatter = {
   title: "Search",
   authors: [{ collection: "authors", id: "sk" }],
+  area: { collection: "areas", id: "meta" },
   date: new Date(),
 };