Sets up about and home pages.
This commit is contained in:
21
src/components/Blazestar.astro
Normal file
21
src/components/Blazestar.astro
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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,
|
||||
|
||||
@@ -1,18 +1,27 @@
|
||||
import { glob } from 'astro/loaders';
|
||||
import { defineCollection, z } from 'astro:content';
|
||||
import { glob } from "astro/loaders";
|
||||
import { defineCollection, z } from "astro:content";
|
||||
|
||||
const blog = defineCollection({
|
||||
// Load Markdown and MDX files in the `src/content/blog/` directory.
|
||||
loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
|
||||
// Type-check frontmatter using a schema
|
||||
schema: ({ image }) => z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
// Transform string to Date object
|
||||
pubDate: z.coerce.date(),
|
||||
updatedDate: z.coerce.date().optional(),
|
||||
heroImage: image().optional(),
|
||||
}),
|
||||
// Load Markdown and MDX files in the `src/content/blog/` directory.
|
||||
loader: glob({ base: "./src/content/blog", pattern: "**/*.{md,mdx}" }),
|
||||
// Type-check frontmatter using a schema
|
||||
schema: ({ image }) =>
|
||||
z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
// Transform string to Date object
|
||||
pubDate: z.coerce.date(),
|
||||
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 };
|
||||
|
||||
9
src/content/page/about.md
Normal file
9
src/content/page/about.md
Normal file
@@ -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).
|
||||
@@ -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>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
|
||||
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 fillNotches="left">
|
||||
<h1>{about.data.title}</h1>
|
||||
<Content />
|
||||
</NotchedBox>
|
||||
</RootLayout>
|
||||
|
||||
@@ -43,19 +43,20 @@ const posts = (await getCollection('blog')).sort(
|
||||
posts.map((post) => (
|
||||
<li>
|
||||
<a href={`/blog/${post.id}/`}>
|
||||
<NotchedBox fillNotches="none">
|
||||
<div class="entry">
|
||||
{post.data.heroImage && (
|
||||
<Image width={720} height={360} src={post.data.heroImage} alt="" />
|
||||
)}
|
||||
<h4 class="title">{post.data.title}</h4>
|
||||
<p class="date">
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
</p>
|
||||
{ post.data.description &&
|
||||
<p class="description">
|
||||
{post.data.description}
|
||||
</p>}</div>
|
||||
<NotchedBox fillNotches="left">
|
||||
<div class="entry">
|
||||
{post.data.heroImage && (
|
||||
<Image width={720} height={360} src={post.data.heroImage} alt="" />
|
||||
)}
|
||||
<h4 class="title">{post.data.title}</h4>
|
||||
<p class="date">
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
</p>
|
||||
{ post.data.description &&
|
||||
<p class="description">
|
||||
{post.data.description}
|
||||
</p>}
|
||||
</div>
|
||||
</NotchedBox>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -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">
|
||||
Test content
|
||||
<NotchedBox fillNotches="left">
|
||||
<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>
|
||||
|
||||
@@ -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;
|
||||
background-color: rgb(var(--background-light));
|
||||
border-radius: 2px;
|
||||
font-family: "Fira Code", monospace;
|
||||
background-color: var(--background-light);
|
||||
padding: 0.1em 0.2em;
|
||||
}
|
||||
pre {
|
||||
padding: 1.5em;
|
||||
|
||||
Reference in New Issue
Block a user