the horrors

2025-03-17 12:49:54 +00:00 · 2025-03-17 12:49:54 +00:00 · 4245370f61
commit 4245370f61
parent 0d9be3d002
48 changed files with 2513 additions and 265 deletions
--- a/src/components/ui/Box.astro
+++ b/src/components/ui/Box.astro
@ -0,0 +1,20 @@
+---
+interface Props {
+  title?: string;
+  description?: string;
+  icon?: string;
+}
+
+const { title, description, icon } = Astro.props;
+---
+
+<div
+  class="border-3 border-light-pu dark:border-dark-pu px-4 py-3 mt-5 w-fit"
+>
+  <span class="mb-1">
+    {icon && <i class={`fa-lg mr-1 ${icon}`} />}
+    {title && <span class="text-lg font-bold">{title}</span>}
+    {description && <span class="text-sm text-gray-500">{description}</span>}
+  </span>
+  <slot />
+</div>
--- a/src/components/ui/Footer.astro
+++ b/src/components/ui/Footer.astro
@ -0,0 +1,14 @@
+---
+
+---
+
+<footer class="mt-12 text-sm text-light-tx-2 dark:text-dark-tx-2">
+  <p>© {new Date().getFullYear()} Ivy Turner</p>
+  <p>
+    <a class="underline" href="https://github.com/ivyturner">github</a> ~
+    <a class="underline" href="https://github.com/ivyturner/trellis">
+      ivyturner/trellis
+    </a>
+  </p>
+  <p>love yourself.</p>
+</footer>
--- a/src/components/ui/Head.astro
+++ b/src/components/ui/Head.astro
@ -0,0 +1,40 @@
+---
+import siteConfig from "~/site.config";
+import { descriptionConstructor, titleConstructor } from "~/lib/metadata";
+
+const { title, description } = Astro.props;
+---
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{titleConstructor(title)}</title>
+  <meta name="description" content={descriptionConstructor(description)} />
+  <meta name="author" content="Ivy Turner" />
+
+  {/* og */}
+  <meta property="og:title" content={titleConstructor(title)} />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://ivyneeds.rest" />
+  <meta property="og:image" content="https://ivyneeds.rest/image.jpg" />
+  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  <meta name="theme-color" content="#5E409D" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+
+  
+  {/* font awesone */}
+  <link
+    href="https://cdn.laker.tech/web/fa/css/fontawesome.css"
+    rel="stylesheet"
+  />
+  <link href="https://cdn.laker.tech/web/fa/css/brands.css" rel="stylesheet" />
+  <link href="https://cdn.laker.tech/web/fa/css/solid.css" rel="stylesheet" />
+
+  {/* analytics */}
+
+
+  {/* astro generator */}
+  <meta name="generator" content={Astro.generator} />
+</head>
--- a/src/components/ui/Header.astro
+++ b/src/components/ui/Header.astro
@ -0,0 +1,34 @@
+---
+import Navigation from "./Navigation.astro";
+import conf from "~/site.config";
+
+let headertext = conf.siteName;
+let headerurl = "/";
+let headerarrow = false;
+
+function isBlog() {
+  return Astro.url.pathname.startsWith("/blog");
+}
+
+if (isBlog()) {
+  headertext = "Everything And The Girl";
+  headerurl = "/blog";
+  headerarrow = true;
+}
+---
+
+<header class="md:flex md:justify-between md:items-center mb-4">
+  <h1 class="text-2xl font-bold">
+    {
+      headerarrow && (
+        <span class="mr-2">
+          <a href="/">
+            <i class="fa-solid fa-arrow-left text-light-pu dark:text-dark-pu" />
+          </a>
+        </span>
+      )
+    }
+    <a href={headerurl}>{headertext}</a>
+  </h1>
+  <Navigation />
+</header>
--- a/src/components/ui/Navigation.astro
+++ b/src/components/ui/Navigation.astro
@ -0,0 +1,51 @@
+---
+const headerLinks = [
+  {
+    label: "About",
+    href: "/about",
+    icon: "fa-solid fa-user", // font awesome css class
+  },
+  {
+    label: "Projects",
+    href: "/projects",
+    icon: "fa-solid fa-folder",
+  },
+  {
+    label: "Notes",
+    href: "/notes",
+    icon: "fa-solid fa-sticky-note",
+  },
+  {
+    label: "Blog",
+    href: "/blog",
+    icon: "fa-solid fa-blog",
+  },
+  {
+    label: "Contact",
+    href: "/contact",
+    icon: "fa-solid fa-envelope",
+  },
+  {
+    label: "More",
+    href: "/more",
+    icon: "fa-solid fa-ellipsis",
+  },
+];
+---
+
+<nav class="flex flex-row gap-4">
+  {
+    headerLinks.map((link) => (
+      <span>
+        <i class={`${link.icon} mr-0.5 text-sm`} />
+        <a
+          href={link.href}
+          class="underline decoration-wavy underline-offset-4 decoration-1.5
+        decoration-light-pu dark:decoration-dark-pu"
+        >
+          {link.label}
+        </a>
+      </span>
+    ))
+  }
+</nav>
--- a/src/components/ui/SizeWarning.astro
+++ b/src/components/ui/SizeWarning.astro
@ -0,0 +1,3 @@
+<div class="bg-light-ye dark:bg-dark-ye sm:block md:hidden text-black">
+	<p>This view port may be too small.</p> <p>Try ivyneeds.rest on a bigger screen.</p>
+</div>
--- a/src/components/ui/Strapline.astro
+++ b/src/components/ui/Strapline.astro
@ -0,0 +1,24 @@
+---
+import Date from "../util/Date.astro";
+
+const { title, description, icon, date } = Astro.props;
+---
+
+<div class="mb-4">
+  <h2 class="text-xl font-bold">
+    <i class={`${icon} text-xl mr-2 text-light-pu dark:text-dark-pu`}></i>
+    {title}
+  </h2>
+  <p class="mt-2 text-sm text-light-tx-2 dark:text-dark-tx-2">{description}</p>
+  {
+    () => {
+      if (date) {
+        return (
+          <p class="mt-2 text-sm text-light-tx-2 dark:text-dark-tx-2">
+            last updated: <Date date={date} />
+          </p>
+        );
+      }
+    }
+  }
+</div>