create layout and pages

2022-12-06 23:01:38 -05:00
commit 2ea432eca4
13 changed files with 9653 additions and 0 deletions
@@ -0,0 +1,12 @@
+---
+
+---
+
+<footer>
+	<p>
+		Copyright 2022 - <a href="https://ghall.dev">Graham Hall</a>
+	</p>
+	<p>
+		Built with <a href="https://astro.build">Astro</a> and <a href="https://picocss.com">Pico.css</a>
+	</p>
+</footer>
@@ -0,0 +1,21 @@
+---
+
+---
+
+<div>
+	<nav>
+		<ul>
+			<li>
+				<span style={{ fontSize: '1.6rem' }}>Graham Hall</span>
+			</li>
+		</ul>
+		<ul>
+			<li>
+				<a href="/">📝 Blog</a>
+			</li>
+			<li>
+				<a href="/about">👨‍💻 About</a>
+			</li>
+		</ul>
+	</nav>
+</div>
@@ -0,0 +1 @@
+/// <reference types="astro/client" />
@@ -0,0 +1,29 @@
+---
+import '@picocss/pico'
+
+import Header from '../components/Header.astro'
+import Footer from '../components/Footer.astro'
+
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body class="container">
+		<Header />
+		<slot />
+		<Footer />
+	</body>
+</html>
+
@@ -0,0 +1,14 @@
+---
+layout: '../layouts/Layout.astro'
+title: 'About'
+---
+
+## Hello World!
+
+My name is Graham Hall, a web developer from Rhode Island.
+
+When I'm not writing code, I'm usually enjoying one of my other hobbies; video games, music, hiking, photography, art, the list goes on...
+
+I write about web development on [my other blog](https://ghall.dev/blog), but I wanted an outlet to write about some of my other interests. So, I put together this site to share whatever's on my mind about the world of tech, gaming, life, whatever strikes my fancy.
+
+If you want to get in touch, I'm on [Mastodon](https://home.social/@ghalldev).
@@ -0,0 +1,23 @@
+---
+import { format } from 'date-fns';
+import { Markup } from 'astro-remote';
+
+import Layout from '../layouts/Layout.astro';
+
+const response = await fetch(`https://api.cosmicjs.com/v2/buckets/${import.meta.env.BUCKET_SLUG}/objects?pretty=true&query=%7B%22type%22%3A%22blog-posts%22%7D&read_key=${import.meta.env.BUCKET_READ_KEY}&limit=20&props=slug,title,content`)
+const posts = await response.json();
+
+---
+
+<Layout title="Blog">
+	<div>
+		{posts.objects.map(post => (
+			<article >
+				<div style={{ display: 'flex', justifyContent: 'space-between' }}>
+					<h4>{post.title}</h4>
+				</div>
+				<Markup content={post.content} />
+			</article>
+		))}
+	</div>
+</Layout>