Create MainLayout for xypnox theme and poem for poems

xypnox · Jan 6, 2024 · 0dfc89e · 0dfc89e
1 parent 6a76cbe
commit 0dfc89e
Show file tree

Hide file tree

Showing 19 changed files with 326 additions and 223 deletions.
diff --git a/src/components/Toc.astro b/src/components/Toc.astro
@@ -24,6 +24,8 @@ function buildToc(headings: Heading[]) {
   return toc;
 }
 
+console.log({ headings });
+
 const toc = buildToc(headings);
 ---
 

diff --git a/src/content/coverData.ts → src/data/coverData.ts b/src/content/coverData.ts → src/data/coverData.ts
diff --git a/src/dataTypes.ts b/src/dataTypes.ts
@@ -31,4 +31,5 @@ export interface BaseLayoutProps {
   showLoading?: boolean;
   htmlClass?: string;
   hideNav?: boolean;
+  themeCssVars?: Record<string, string>;
 }
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -1,15 +1,13 @@
 ---
-import { themeCssVars } from "../theme";
-import Navbar from "../components/nav/Navbar.astro";
-import Footer from "../components/footer.astro";
-import "../styles/content.css";
 import Loading from "../components/Loading.astro";
 import Meta from "../components/meta.astro";
 import type { BaseLayoutProps } from "../dataTypes";
 
+import "../styles/reset.css";
+
 export interface Props extends BaseLayoutProps {}
 
-const { title, meta, showLoading, hideNav, htmlClass } = Astro.props;
+const { title, meta, showLoading, htmlClass, themeCssVars } = Astro.props;
 ---
 
 <!doctype html>
@@ -19,112 +17,18 @@ const { title, meta, showLoading, hideNav, htmlClass } = Astro.props;
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,600;1,400&display=swap"
-      rel="stylesheet"
-    />
-
     <Meta {...meta} title={meta?.title ?? title} />
     <slot name="head" />
   </head>
+
   <body>
     {!(showLoading === false) && <Loading />}
-    {!hideNav && <Navbar />}
     <slot />
-    {!hideNav && <Footer />}
-  </body><script>
+  </body>
+
+  <script>
     import "iconify-icon";
   </script>
-
-  <style is:global define:vars={themeCssVars}>
-    * {
-      box-sizing: border-box;
-    }
-    html {
-      font-family: var(--font-family);
-      color: var(--text);
-      background-color: var(--background);
-      font-size: var(--font-size-base);
-      min-height: 100vh;
-      scroll-behavior: smooth;
-    }
-
-    body {
-      margin: 0;
-      padding: 1rem;
-      /* background-image: url("/nnnoise.svg"); */
-      min-height: 100vh;
-    }
-
-    a {
-      color: var(--primary-color);
-    }
-
-    .content img {
-      max-width: 100%;
-      height: auto;
-      margin: 0 auto;
-    }
-
-    pre.astro-code {
-      padding: 1rem;
-      font-size: 1rem;
-      background-color: var(--surface) !important;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      margin: 1rem 0;
-    }
-
-    h1,
-    h2,
-    h3 {
-      line-height: 1.2;
-    }
-
-    hr {
-      border: none;
-      border-top: 2px dashed var(--border);
-      width: 100%;
-      height: 2px;
-      margin: 3rem 0;
-    }
-
-    @keyframes backgroundMove {
-      0% {
-        background-position: 0% 50%;
-      }
-      50% {
-        background-position: 100% 50%;
-      }
-      100% {
-        background-position: 0% 50%;
-      }
-    }
-
-    .text-gradient-fx:hover {
-      background: var(--animated-gradient);
-      background-size: 200% 200%;
-      animation: backgroundMove 3s ease infinite;
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .text-gradient-fx-constant {
-      background: var(--animated-gradient);
-      background-size: 200% 200%;
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      animation: backgroundMove 3s ease infinite;
-    }
-  </style>
 </html>
+
+<style is:global define:vars={themeCssVars ?? {}}></style>
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -0,0 +1,107 @@
+---
+import Footer from "../components/footer.astro";
+import Navbar from "../components/nav/Navbar.astro";
+import type { BaseLayoutProps } from "../dataTypes";
+import BaseLayout from "./BaseLayout.astro";
+
+import { themeCssVars } from "../theme";
+
+import "../styles/content.css";
+
+export interface Props extends BaseLayoutProps {}
+
+const props = Astro.props;
+---
+
+<BaseLayout {...props} themeCssVars={themeCssVars}>
+  {!props.hideNav && <Navbar />}
+  <slot />
+  {!props.hideNav && <Footer />}
+</BaseLayout>
+
+<style is:global>
+  html {
+    font-family: var(--font-family);
+    color: var(--text);
+    background-color: var(--background);
+    font-size: var(--font-size-base);
+    min-height: 100vh;
+    scroll-behavior: smooth;
+  }
+
+  body {
+    margin: 0;
+    padding: 1rem;
+    /* background-image: url("/nnnoise.svg"); */
+    min-height: 100vh;
+  }
+
+  a {
+    color: var(--primary-color);
+  }
+
+  .content img {
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto;
+  }
+
+  pre.astro-code {
+    padding: 1rem;
+    font-size: 1rem;
+    background-color: var(--surface) !important;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 1rem 0;
+  }
+
+  h1,
+  h2,
+  h3 {
+    line-height: 1.2;
+  }
+
+  hr {
+    border: none;
+    border-top: 2px dashed var(--border);
+    width: 100%;
+    height: 2px;
+    margin: 3rem 0;
+  }
+
+  @keyframes backgroundMove {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
+  .text-gradient-fx:hover {
+    background: var(--animated-gradient);
+    background-size: 200% 200%;
+    animation: backgroundMove 3s ease infinite;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .text-gradient-fx-constant {
+    background: var(--animated-gradient);
+    background-size: 200% 200%;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: backgroundMove 3s ease infinite;
+  }
+</style>
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
@@ -1,5 +1,5 @@
 ---
-import BaseLayout from "./BaseLayout.astro";
+import MainLayout from "./MainLayout.astro";
 import type { MarkdownLayoutProps } from "astro";
 
 type Props = MarkdownLayoutProps<{
@@ -10,7 +10,7 @@ type Props = MarkdownLayoutProps<{
 const { frontmatter } = Astro.props;
 ---
 
-<BaseLayout title={frontmatter.title}>
+<MainLayout title={frontmatter.title}>
   <main>
     <header>
       <h1>{frontmatter.title}</h1>
@@ -20,7 +20,7 @@ const { frontmatter } = Astro.props;
       <slot />
     </div>
   </main>
-</BaseLayout>
+</MainLayout>
 
 <style>
   header {

diff --git a/src/layouts/PoemLayout.astro b/src/layouts/PoemLayout.astro
@@ -12,36 +12,36 @@ const props = Astro.props;
   {...props}
   hideNav
   htmlClass="poems-root"
-  meta= {{
+  meta={{
     ...props.meta,
-    image: '/poems-social.png',
+    image: "/poems-social.png",
   }}
+  themeCssVars={poemThemeCssVars}
 >
   <main>
     <slot />
   </main>
   <footer>
     <p>
       <a href="/poems">Poems</a> by <a href="/">xypnox</a>
-      |
-      <a href="/poems/rss.xml">RSS</a>
+      | <a href="/poems/rss.xml">RSS</a>
     </p>
   </footer>
 </BaseLayout>
 
-<style is:global define:vars={poemThemeCssVars}>
-  @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,700&family=EB+Garamond:ital,wght@0,400;0,700;1,400&display=swap");
+<style is:global>
+  @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,700&family=EB+Garamond:ital@0;1&display=swap");
 
   html.poems-root {
+    font-size: var(--font-size-base);
     background-color: var(--poems-background);
     color: var(--poems-text);
   }
 
   html.poems-root main,
   html.poems-root footer {
     font-family: var(--poems-fontFamily);
-    font-size: var(--font-size-base);
-    max-width: 80ch;
+    max-width: 800px;
     margin: 8rem auto 2rem;
   }
 
@@ -51,6 +51,12 @@ const props = Astro.props;
     border-top: 2px dashed var(--poems-border);
   }
 
+  .headingFont {
+    font-family: var(--poems-headingFont);
+    font-weight: 700;
+    font-style: italic;
+  }
+
   html.poems-root a {
     color: var(--poems-text);
     font-family: var(--poems-fontFamily);

diff --git a/src/pages/blag/index.astro b/src/pages/blag/index.astro
@@ -1,5 +1,5 @@
 ---
-import Layout from "../../layouts/BaseLayout.astro";
+import Layout from "../../layouts/MainLayout.astro";
 import Blag from "../../vectors/blag.astro";
 import TagList from "../../components/tagList.astro";
 import { blogEntries } from '../../lib/dataAstro'

diff --git a/src/pages/blag/posts/[...slug].astro b/src/pages/blag/posts/[...slug].astro
@@ -1,7 +1,7 @@
 ---
 import { Image } from "astro:assets";
 import type { CollectionEntry } from "astro:content";
-import Layout from "../../../layouts/BaseLayout.astro";
+import Layout from "../../../layouts/MainLayout.astro";
 import Toc from "../../../components/Toc.astro";
 import Tag from "../../../components/nav/Tag.astro";
 import { blogStaticPaths } from "../../../lib/dataAstro";

diff --git a/src/pages/blag/tags/[...slug].astro b/src/pages/blag/tags/[...slug].astro
@@ -1,5 +1,5 @@
 ---
-import Layout from "../../../layouts/BaseLayout.astro";
+import Layout from "../../../layouts/MainLayout.astro";
 import TagList from "../../../components/tagList.astro";
 import BlogGrid from "../../../components/blogGrid.astro";
 import { tagStaticPaths, filteredByTag } from "../../../lib/dataAstro";

diff --git a/src/pages/design/covers.astro b/src/pages/design/covers.astro
@@ -1,11 +1,11 @@
 ---
-import Layout from "../../layouts/BaseLayout.astro";
-import { Covers } from "../../content/coverData";
+import Layout from "../../layouts/MainLayout.astro";
+import { Covers as coversData } from "../../data/coverData";
 import { ImageCollage } from "../../components/imageGrid";
 import PageHeader from '../../components/pageHeader.astro'
 import PageNav from '../../components/nav/pageNav.astro'
 
-const covers = Covers.map((coverCollection) => ({
+const covers = coversData.map((coverCollection) => ({
   ...coverCollection,
   slug: coverCollection.name.toLowerCase().replace(" ", "-"),
   covers: coverCollection.covers.map((cover) => ({

diff --git a/src/pages/design/index.astro b/src/pages/design/index.astro
@@ -1,5 +1,5 @@
 ---
-import Layout from "../../layouts/BaseLayout.astro";
+import Layout from "../../layouts/MainLayout.astro";
 import PageHeader from '../../components/pageHeader.astro'
 
 const designSections = [

diff --git a/src/pages/design/logos.astro b/src/pages/design/logos.astro
@@ -1,5 +1,5 @@
 ---
-import Layout from "../../layouts/BaseLayout.astro";
+import Layout from "../../layouts/MainLayout.astro";
 import { iconsData } from "../../content/iconsData";
 import { ImageCollage } from "../../components/imageGrid";
 import PageHeader from '../../components/pageHeader.astro'
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,8 @@ function buildToc(headings: Heading[]) { @@
       return toc;
     }
+    console.log({ headings });
     const toc = buildToc(headings);
     ---
@@ Expand Down @@