Sets up about and home pages.

src/components/Blazestar.astro

@@ -0,0 +1,21 @@
+---
+---
+<span class="logo">
+  <span class="blazestar">Blazestar</span><span class="dot">.</span><span class="net">net</span>
+</span>
+<style>
+  .logo {
+    color: var(--color-light-text);
+    font-family: 'Fira Code', monospace;
+
+    .dot {
+      color: var(--color-red);
+      margin: 0 -0.1em;
+    }
+
+    .net {
+      color: var(--color-red);
+      font-size: 75%;
+    }
+  }
+</style>

src/components/Header.astro

@@ -1,11 +1,11 @@
 ---
 import HeaderLink from './HeaderLink.astro';
-import Logo from './Logo.astro';
+import Blazestar from './Blazestar.astro';
 ---
 
 <header>
 	<nav>
-    <h2><Logo /></h2>
+    <h2><Blazestar /></h2>
 		<div class="internal-links">
 			<HeaderLink href="/">Home</HeaderLink>
 			<HeaderLink href="/blog">Blog</HeaderLink>

src/components/Logo.astro

@@ -1,39 +0,0 @@
----
----
-<div class="logo">
-  <span class="blazestar">Blazestar</span>
-  <span class="dot">.</span>
-  <span class="net">net</span>
-</div>
-<style>
-  .logo {
-    color: var(--color-light-text);
-    font-family: 'Fira Code', monospace;
-    /* display: grid; */
-    /* grid-template-columns: max-content 1fr; */
-    /* grid-template-areas:  */
-    /*   "dot blazestar" */
-    /*   "dot net"; */
-    /* align-items: last baseline; */
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-
-    .blazestar {
-      grid-area: blazestar;
-      font-size: 150%;
-    }
-
-    .dot {
-      color: var(--color-red);
-      grid-area: dot;
-      font-size: 150%;
-      margin-right: -0.1em;
-    }
-
-    .net {
-      grid-area: net;
-      color: var(--color-red);
-    }
-  }
-</style>

src/components/Sidebar.astro

@@ -1,11 +1,11 @@
 ---
 import SidebarLink from './SidebarLink.astro';
-import Logo from './Logo.astro';
+import Blazestar from './Blazestar.astro';
 ---
 
 <header>
 	<nav>
-    <h2><Logo></Logo></h2>
+    <h2><Blazestar /></h2>
 		<div class="internal-links">
 			<SidebarLink href="/">Home</SidebarLink>
 			<SidebarLink href="/blog">Blog</SidebarLink>
@@ -38,9 +38,10 @@ import Logo from './Logo.astro';
 		margin: 0;
 		padding: 0 1em;
 	}
+
 	h2 {
 		margin-bottom: 0.5em;
-		font-size: 1em;
+    font-size: 1.5em;
 	}
 
 	h2 a,

src/content.config.ts

@@ -1,18 +1,27 @@
-import { glob } from 'astro/loaders';
+import { glob } from "astro/loaders";
-import { defineCollection, z } from 'astro:content';
+import { defineCollection, z } from "astro:content";
 
 const blog = defineCollection({
-	// Load Markdown and MDX files in the `src/content/blog/` directory.
+  // Load Markdown and MDX files in the `src/content/blog/` directory.
-	loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
+  loader: glob({ base: "./src/content/blog", pattern: "**/*.{md,mdx}" }),
-	// Type-check frontmatter using a schema
+  // Type-check frontmatter using a schema
-	schema: ({ image }) => z.object({
+  schema: ({ image }) =>
-		title: z.string(),
+    z.object({
-		description: z.string(),
+      title: z.string(),
-		// Transform string to Date object
+      description: z.string(),
-		pubDate: z.coerce.date(),
+      // Transform string to Date object
-		updatedDate: z.coerce.date().optional(),
+      pubDate: z.coerce.date(),
-		heroImage: image().optional(),
+      updatedDate: z.coerce.date().optional(),
-	}),
+      heroImage: image().optional(),
+    }),
 });
 
-export const collections = { blog };
+const page = defineCollection({
+  loader: glob({ base: "./src/content/page", pattern: "**/*.{md,mdx}" }),
+  schema: ({ image }) =>
+    z.object({
+      title: z.string(),
+    }),
+});
+
+export const collections = { blog, page };

src/content/page/about.md

@@ -0,0 +1,9 @@
+---
+title: About
+---
+
+Hi! I'm Drew, but I also go by `Periodic` in most online spaces. I am a human being who exists both in meatspace and cyberspace.
+
+I do full stack web-development: A little front-end, a little back-end, database optimization, infrastructure automation, the whole deal.
+
+I have been a software developer from a young age and have spent two decades in the tech industry. I've done freelance, start-ups (Asana, Fossa) and some big corps (Google, Visa).

src/pages/about.astro

@@ -1,60 +1,20 @@
 ---
 import RootLayout from '../layouts/RootLayout.astro';
 import NotchedBox from '../components/NotchedBox.astro';
+import { getEntry, render } from 'astro:content';
+
+const about = await getEntry('page', 'about');
+
+if (!about) {
+  throw new Error('Page not found');
+}
+
+const { Content } = await render(about);
 ---
 
 <RootLayout>
-  <NotchedBox>
+  <NotchedBox fillNotches="left">
-	<p>
+    <h1>{about.data.title}</h1>
-		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+<Content />
-		labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo
-		viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam
-		adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus
-		et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus
-		vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque
-		sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
-	</p>
-
-	<p>
-		Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non
-		tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non
-		blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna
-		porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis
-		massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc.
-		Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis
-		bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra
-		massa massa ultricies mi.
-	</p>
-
-	<p>
-		Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl
-		suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet
-		nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae
-		turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem
-		dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat
-		semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus
-		vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum
-		facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam
-		vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla
-		urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
-	</p>
-
-	<p>
-		Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper
-		viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc
-		scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur
-		gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus
-		pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim
-		blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id
-		cursus metus aliquam eleifend mi.
-	</p>
-
-	<p>
-		Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta
-		nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam
-		tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci
-		ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar
-		proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
-	</p>
   </NotchedBox>
 </RootLayout>

src/pages/blog/index.astro

@@ -43,19 +43,20 @@ const posts = (await getCollection('blog')).sort(
         posts.map((post) => (
           <li>
             <a href={`/blog/${post.id}/`}>
-              <NotchedBox fillNotches="none">
+              <NotchedBox fillNotches="left">
-            <div class="entry">
+                <div class="entry">
-                {post.data.heroImage && (
+                  {post.data.heroImage && (
-                  <Image width={720} height={360} src={post.data.heroImage} alt="" />
+                    <Image width={720} height={360} src={post.data.heroImage} alt="" />
-                )}
+                  )}
-                <h4 class="title">{post.data.title}</h4>
+                  <h4 class="title">{post.data.title}</h4>
-                <p class="date">
+                  <p class="date">
-                  <FormattedDate date={post.data.pubDate} />
+                    <FormattedDate date={post.data.pubDate} />
-                </p>
+                  </p>
-            { post.data.description && 
+                  { post.data.description && 
-            <p class="description">
+                    <p class="description">
-              {post.data.description}
+                      {post.data.description}
-            </p>}</div>
+                  </p>}
+                </div>
               </NotchedBox>
             </a>
           </li>

src/pages/index.astro

@@ -1,10 +1,26 @@
 ---
 import NotchedBox from '../components/NotchedBox.astro';
+import Blazestar from '../components/Blazestar.astro';
 import RootLayout from '../layouts/RootLayout.astro';
 ---
 
 <RootLayout>
-  <NotchedBox fillNotches="none">
+  <NotchedBox fillNotches="left">
-    Test content
+    <h1>Welcome to <Blazestar /></h1>
+    <p>
+      This is the personal homepage for <code>Periodic</code>, a human who spends a lot of time with technology.  I believe that our virtual lives are as valuable as our physical ones and that the two are inextricably linked.
+    </p>
+    <p>
+      Topics that may be covered (in no particular order):
+      <ul>
+        <li>Programming</li>
+        <li>Software Engineering</li>
+        <li>Start-ups</li>
+        <li>Cooperative Economies</li>
+        <li>Sustainability</li>
+        <li>Astronomy</li>
+        <li>Nature</li>
+      </ul>
+    </p>
   </NotchedBox>
 </RootLayout>

src/styles/global.css

@@ -7,13 +7,14 @@
 :root {
   --color-gold: #e99c1a;
   --color-space-blue: #1c2329;
+  --color-space-blue-light: #2a3138;
   --color-gray: #7f8c8d;
   --color-light-text: #dcdcc6;
   --color-red: #d75422;
 
   --color-accent: var(--color-red);
   --background: var(--color-space-blue);
-  --background-light: lighten(var(--color-space-blue));
+  --background-light: var(--color-space-blue-light);
 
   --font-size-sm: calc(var(--font-size-md) / 1.2);
   --font-size-md: 20px;
@@ -168,9 +169,9 @@ img {
   border-radius: 8px;
 }
 code {
-  padding: 2px 5px;
+  font-family: "Fira Code", monospace;
-  background-color: rgb(var(--background-light));
+  background-color: var(--background-light);
-  border-radius: 2px;
+  padding: 0.1em 0.2em;
 }
 pre {
   padding: 1.5em;