redesign c:
This commit is contained in:
zackartz
parent
4ae31ee714
commit
f50572713b
19 changed files with 13891 additions and 1501 deletions
|
|
@ -1,5 +1,8 @@
|
|||
{
|
||||
"devToolbar": {
|
||||
"enabled": false
|
||||
},
|
||||
"_variables": {
|
||||
"lastUpdateCheck": 1716930083693
|
||||
}
|
||||
}
|
||||
13
.prettierrc.mjs
Normal file
13
.prettierrc.mjs
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// .prettierrc.mjs
|
||||
/** @type {import("prettier").Config} */
|
||||
export default {
|
||||
plugins: ["prettier-plugin-astro"],
|
||||
overrides: [
|
||||
{
|
||||
files: "*.astro",
|
||||
options: {
|
||||
parser: "astro",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -3,13 +3,14 @@ import mdx from "@astrojs/mdx";
|
|||
import sitemap from "@astrojs/sitemap";
|
||||
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
import syntaxTheme from "./syntax-theme.json";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: "https://zackmyers.io",
|
||||
markdown: {
|
||||
shikiConfig: {
|
||||
theme: "catppuccin-frappe",
|
||||
theme: syntaxTheme,
|
||||
},
|
||||
},
|
||||
integrations: [mdx(), sitemap(), tailwind()],
|
||||
|
|
|
|||
8377
package-lock.json
generated
Normal file
8377
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -21,6 +21,8 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@catppuccin/tailwindcss": "^0.1.6",
|
||||
"@tailwindcss/typography": "^0.5.12"
|
||||
"@tailwindcss/typography": "^0.5.12",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-plugin-astro": "^0.14.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4360
pnpm-lock.yaml
generated
4360
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,17 +1,17 @@
|
|||
---
|
||||
// Import the global.css file here so that it is included on
|
||||
// all pages through the use of the <BaseHead /> component.
|
||||
import '../styles/global.css';
|
||||
import "../styles/global.css";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
title: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
|
||||
const { title, description, image = '/blog-placeholder-2.jpg' } = Astro.props;
|
||||
const { title, description, image = "/blog-placeholder-2.jpg" } = Astro.props;
|
||||
---
|
||||
|
||||
<!-- Global Metadata -->
|
||||
|
|
@ -20,7 +20,7 @@ const { title, description, image = '/blog-placeholder-2.jpg' } = Astro.props;
|
|||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
|
||||
<link rel="stylesheet" href="/fonts/Iosevka.css">
|
||||
<link rel="stylesheet" href="/fonts/Iosevka.css" />
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href={canonicalURL} />
|
||||
|
|
|
|||
|
|
@ -2,47 +2,46 @@
|
|||
const today = new Date();
|
||||
---
|
||||
|
||||
<footer>
|
||||
© {today.getFullYear()} Zachary Myers. All rights reserved.
|
||||
<div class="social-links">
|
||||
<a href="https://twitter.com/_zackartz" target="_blank">
|
||||
<span class="sr-only">Follow Zack on Twitter</span>
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/twitter"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
<a href="https://github.com/zackartz" target="_blank">
|
||||
<span class="sr-only">Go to Zacks's GitHub repo</span>
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/github"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
<footer class="flex flex-col items-center w-full">
|
||||
<p>
|
||||
© {today.getFullYear()} Zachary Myers. All rights reserved.
|
||||
<div class="flex mt-4 space-x-3">
|
||||
<a href="https://twitter.com/_zackartz" target="_blank">
|
||||
<span class="sr-only">Follow Zack on Twitter</span>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
aria-hidden="true"
|
||||
width="32"
|
||||
height="32"
|
||||
astro-icon="social/twitter"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
<a href="https://github.com/zackartz" target="_blank">
|
||||
<span class="sr-only">Go to Zacks's GitHub repo</span>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
aria-hidden="true"
|
||||
width="32"
|
||||
height="32"
|
||||
astro-icon="social/github"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</p>
|
||||
<style>
|
||||
footer {
|
||||
padding: 2em 1em 6em 1em;
|
||||
background: linear-gradient(var(--gray-gradient)) no-repeat;
|
||||
color: rgb(var(--gray));
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</footer>
|
||||
<style>
|
||||
footer {
|
||||
padding: 2em 1em 6em 1em;
|
||||
background: linear-gradient(var(--gray-gradient)) no-repeat;
|
||||
color: rgb(var(--gray));
|
||||
text-align: center;
|
||||
}
|
||||
.social-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.social-links a {
|
||||
text-decoration: none;
|
||||
color: rgb(var(--gray));
|
||||
}
|
||||
.social-links a:hover {
|
||||
color: rgb(var(--gray-dark));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
---
|
||||
interface Props {
|
||||
date: Date;
|
||||
date: Date;
|
||||
}
|
||||
|
||||
const { date } = Astro.props;
|
||||
---
|
||||
|
||||
<time class="text-ctp-sky" datetime={date.toISOString()}>
|
||||
{
|
||||
date.toLocaleDateString('en-us', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
{
|
||||
date.toLocaleDateString("en-us", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
})
|
||||
}
|
||||
</time>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,46 @@
|
|||
---
|
||||
import HeaderLink from './HeaderLink.astro';
|
||||
import { SITE_TITLE } from '../consts';
|
||||
import HeaderLink from "./HeaderLink.astro";
|
||||
import { SITE_TITLE } from "../consts";
|
||||
---
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<h2 class="p-5 font-bold"><a href="/">{SITE_TITLE}</a></h2>
|
||||
<div class="absolute w-screen flex justify-center top-0 p-5 space-x-4">
|
||||
<HeaderLink href="/">Home</HeaderLink>
|
||||
<HeaderLink href="/blog">Blog</HeaderLink>
|
||||
<HeaderLink href="/about">About</HeaderLink>
|
||||
<HeaderLink target="_blank" href="https://cv.zackster.zip">CV</HeaderLink>
|
||||
</div>
|
||||
<div class="p-5 flex absolute top-0 right-0 space-x-4">
|
||||
<a href="https://twitter.com/_zackartz" target="_blank">
|
||||
<span class="sr-only">Follow Zack on Twitter</span>
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="19" height="19" astro-icon="social/twitter"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
<a href="https://github.com/zackartz" target="_blank">
|
||||
<span class="sr-only">Go to Zacks's GitHub repo</span>
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="19" height="19" astro-icon="social/github"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="flex relative justify-center pb-16 w-full">
|
||||
<h2 class="absolute left-0 p-5 font-bold"><a href="/">{SITE_TITLE}</a></h2>
|
||||
<div class="flex absolute top-0 justify-center p-5 space-x-4">
|
||||
<HeaderLink href="/">Home</HeaderLink>
|
||||
<HeaderLink href="/blog">Blog</HeaderLink>
|
||||
<HeaderLink href="/about">About</HeaderLink>
|
||||
<HeaderLink target="_blank" href="https://cv.zackster.zip">CV</HeaderLink>
|
||||
</div>
|
||||
<div class="flex absolute top-0 right-0 p-5 space-x-4">
|
||||
<a href="https://twitter.com/_zackartz" target="_blank">
|
||||
<span class="sr-only">Follow Zack on Twitter</span>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
aria-hidden="true"
|
||||
width="19"
|
||||
height="19"
|
||||
astro-icon="social/twitter"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
<a href="https://github.com/zackartz" target="_blank">
|
||||
<span class="sr-only">Go to Zacks's GitHub repo</span>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
aria-hidden="true"
|
||||
width="19"
|
||||
height="19"
|
||||
astro-icon="social/github"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
---
|
||||
import type { HTMLAttributes } from 'astro/types';
|
||||
import type { HTMLAttributes } from "astro/types";
|
||||
|
||||
type Props = HTMLAttributes<'a'>;
|
||||
type Props = HTMLAttributes<"a">;
|
||||
|
||||
const { href, class: className, ...props } = Astro.props;
|
||||
|
||||
const { pathname } = Astro.url;
|
||||
const subpath = pathname.match(/[^\/]+/g);
|
||||
const isActive = href === pathname || href === '/' + subpath?.[0];
|
||||
const isActive = href === pathname || href === "/" + subpath?.[0];
|
||||
---
|
||||
|
||||
<a href={href} class:list={[className, { active: isActive }]} {...props}>
|
||||
<slot />
|
||||
<slot />
|
||||
</a>
|
||||
<style>
|
||||
a {
|
||||
@apply inline-block no-underline;
|
||||
}
|
||||
a.active {
|
||||
font-weight: bolder;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a {
|
||||
@apply inline-block no-underline;
|
||||
}
|
||||
a.active {
|
||||
font-weight: bolder;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,79 +1,73 @@
|
|||
---
|
||||
import BaseHead from '../components/BaseHead.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import FormattedDate from '../components/FormattedDate.astro';
|
||||
import FormattedDate from "../components/FormattedDate.astro";
|
||||
|
||||
type Props = any;
|
||||
|
||||
const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
|
||||
const { title, pubDate, updatedDate, heroImage } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang="en" class="ctp-mocha bg-ctp-base">
|
||||
<head>
|
||||
<BaseHead title={title} description={description} />
|
||||
<style>
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
}
|
||||
.hero-image img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
.prose {
|
||||
width: 720px;
|
||||
max-width: calc(100% - 2em);
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
color: rgb(var(--gray-dark));
|
||||
}
|
||||
.title {
|
||||
margin-bottom: 1em;
|
||||
padding: 1em 0;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
}
|
||||
.title h1 {
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
.date {
|
||||
margin-bottom: 0.5em;
|
||||
color: rgb(var(--gray));
|
||||
}
|
||||
.last-updated-on {
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<head>
|
||||
<style>
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
}
|
||||
.hero-image img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
.prose {
|
||||
width: 720px;
|
||||
max-width: calc(100% - 2em);
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
color: rgb(var(--gray-dark));
|
||||
}
|
||||
.title {
|
||||
margin-bottom: 1em;
|
||||
padding: 1em 0;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
}
|
||||
.title h1 {
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
.date {
|
||||
margin-bottom: 0.5em;
|
||||
color: rgb(var(--gray));
|
||||
}
|
||||
.last-updated-on {
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<main class="px-8 bg-base">
|
||||
<article>
|
||||
<div class="hero-image">
|
||||
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
|
||||
</div>
|
||||
<div class="prose lg:prose-xl">
|
||||
<div class="title">
|
||||
<div class="date">
|
||||
<FormattedDate date={pubDate} />
|
||||
{
|
||||
updatedDate && (
|
||||
<div class="last-updated-on">
|
||||
Last updated on <FormattedDate date={updatedDate} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<h1 class="text-ctp-text">{title}</h1>
|
||||
<hr class="border-ctp-surface0" />
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
|
||||
<body class="bg-base">
|
||||
<Header />
|
||||
<main class="px-8">
|
||||
<article>
|
||||
<div class="hero-image">
|
||||
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
|
||||
</div>
|
||||
<div class="prose lg:prose-xl">
|
||||
<div class="title">
|
||||
<div class="date">
|
||||
<FormattedDate date={pubDate} />
|
||||
{
|
||||
updatedDate && (
|
||||
<div class="last-updated-on">
|
||||
Last updated on <FormattedDate date={updatedDate} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<h1 class="text-ctp-text">{title}</h1>
|
||||
<hr class="border-ctp-surface0" />
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
21
src/layouts/Layout.astro
Normal file
21
src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
import BaseHead from "../components/BaseHead.astro";
|
||||
import Header from "../components/Header.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
|
||||
const { title, description } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en" class="ctp-mocha">
|
||||
<head>
|
||||
<BaseHead title={title} description={description} />
|
||||
</head>
|
||||
<body class="flex justify-center bg-ctp-crust">
|
||||
<div class="relative w-full max-w-6xl min-h-screen bg-ctp-base">
|
||||
<Header />
|
||||
<slot />
|
||||
<Footer />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +1,21 @@
|
|||
---
|
||||
import Layout from '../layouts/BlogPost.astro';
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import BlogPost from "../layouts/BlogPost.astro";
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="About Me"
|
||||
description="About Zachary Myers"
|
||||
pubDate={new Date('April 13 2024')}
|
||||
>
|
||||
<article>
|
||||
<h3 class="">Hey there!</h3>
|
||||
<p class="">My name is Zachary Myers, I am a software engineer from Honolulu, now living in Saint Joseph, MI. I am most interested in backend programming, and primarily use languages like Rust and Go, though also have plenty of experience with JavaScript and TypeScript as well. I am looking for work! Feel free to <a href="https://cv.zackster.zip" target="_blank">check out my cv</a> and <a href="mailto:me@zackmyers.io">reach out</a> if you are interested!</p>
|
||||
</article>
|
||||
<Layout title="About Me" description="About Zachary Myers">
|
||||
<BlogPost title="About" description="About Zachary" pubDate={new Date()}>
|
||||
<article>
|
||||
<h3 class="">Hey there!</h3>
|
||||
<p class="">
|
||||
My name is Zachary Myers, I am a software engineer from Honolulu, now
|
||||
living in Saint Joseph, MI. I am most interested in backend programming,
|
||||
and primarily use languages like Rust and Go, though also have plenty of
|
||||
experience with JavaScript and TypeScript as well. I am looking for
|
||||
work! Feel free to <a href="https://cv.zackster.zip" target="_blank"
|
||||
>check out my cv</a
|
||||
> and <a href="mailto:me@zackmyers.io">reach out</a> if you are interested!
|
||||
</p>
|
||||
</article>
|
||||
</BlogPost>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,22 @@
|
|||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
import BlogPost from '../../layouts/BlogPost.astro';
|
||||
import { getCollection } from "astro:content";
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import BlogPost from "../../layouts/BlogPost.astro";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts: any[] = await getCollection('blog');
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.slug },
|
||||
props: post,
|
||||
}));
|
||||
const posts: any[] = await getCollection("blog");
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.slug },
|
||||
props: post,
|
||||
}));
|
||||
}
|
||||
|
||||
const post: any = Astro.props;
|
||||
const { Content } = await post.render();
|
||||
---
|
||||
|
||||
<BlogPost class="prose lg:prose-xl" {...post.data}>
|
||||
<Content />
|
||||
</BlogPost>
|
||||
<Layout>
|
||||
<BlogPost class="prose lg:prose-xl" {...post.data}>
|
||||
<Content />
|
||||
</BlogPost>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,57 @@
|
|||
---
|
||||
import BaseHead from '../../components/BaseHead.astro';
|
||||
import Header from '../../components/Header.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
|
||||
import { getCollection } from 'astro:content';
|
||||
import FormattedDate from '../../components/FormattedDate.astro';
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import FormattedDate from "../../components/FormattedDate.astro";
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
|
||||
import { getCollection } from "astro:content";
|
||||
|
||||
const posts: any[] = (await getCollection('blog')).sort(
|
||||
(a: any, b: any) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
|
||||
const posts: any[] = (await getCollection("blog")).sort(
|
||||
(a: any, b: any) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(),
|
||||
);
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en" class="ctp-mocha bg-ctp-base">
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<main class="w-full flex justify-center">
|
||||
{posts.length === 0 && <p class="py-48">Sorry! No posts at the minute, coming soon!</p>}
|
||||
<section>
|
||||
<ul class="space-y-4">
|
||||
{
|
||||
posts.sort((a, b) => b.data.pubDate - a.data.pubDate).map((post) => (
|
||||
<li class="p-4 rounded-xl shadow-lg border border-ctp-surface2">
|
||||
<a href={`/blog/${post.slug}/`}>
|
||||
<img class="rounded-lg" width={720} height={360} src={post.data.heroImage} alt="" />
|
||||
<h4 class="text-2xl p-3 font-bold text-center text-ctp-mauve">{post.data.title}</h4>
|
||||
<p class="text-center">
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
<Layout title={SITE_TITLE} description={SITE_DESCRIPTION}>
|
||||
<main class="flex relative justify-center w-full">
|
||||
{
|
||||
posts.length === 0 && (
|
||||
<p class="py-48">Sorry! No posts at the minute, coming soon!</p>
|
||||
)
|
||||
}
|
||||
<section class="p-16">
|
||||
<h1 class="pb-8 w-3/4 text-4xl font-bold leading-gi">
|
||||
My thoughts on NixOS, Rust, and other software tools.
|
||||
</h1>
|
||||
<h2 class="pb-24 text-lg">
|
||||
My thoughts & experiences collected into one place.
|
||||
</h2>
|
||||
<div class="border-l border-ctp-surface0">
|
||||
<ul class="space-y-4">
|
||||
{
|
||||
posts
|
||||
.sort((a, b) => b.data.pubDate - a.data.pubDate)
|
||||
.map((post) => (
|
||||
<div class="flex">
|
||||
<div class="p-4 my-auto w-[164px]">
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
</div>
|
||||
|
||||
<li class="w-full">
|
||||
<div class="flex flex-col p-8 w-full rounded-xl border transition-all border-ctp-base hover:border-ctp-surface0">
|
||||
<a href={`/blog/${post.slug}/`}>
|
||||
<h4 class="text-lg font-bold text-ctp-mauve">
|
||||
{post.data.title}
|
||||
</h4>
|
||||
<h5 class="mt-2 text-sm">{post.data.description}</h5>
|
||||
<p class="pt-2 text-sm font-bold text-ctp-blue">
|
||||
Read ->
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,46 @@
|
|||
---
|
||||
import BaseHead from '../components/BaseHead.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
|
||||
import BaseHead from "../components/BaseHead.astro";
|
||||
import Header from "../components/Header.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en" class="ctp-mocha bg-ctp-base">
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
</head>
|
||||
<body class="h-screen bg-base relative">
|
||||
<Header />
|
||||
<main class="p-16 flex flex-col w-full h-[84%]
|
||||
<html lang="en" class="ctp-mocha bg-ctp-crust">
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
</head>
|
||||
<body class="relative h-screen">
|
||||
<Header />
|
||||
<main class="p-16 flex flex-col w-full h-[84%]
|
||||
justify-center items-center">
|
||||
<div class="flex flex-col items-center space-y-4">
|
||||
<h1 class="font-bold text-ctp-text text-5xl">Zachary Myers</h1>
|
||||
<p class="py-4 text-ctp-blue">Software Engineer, Hardware Hacker, Photographer</p>
|
||||
</div>
|
||||
<a href="/about">
|
||||
<button class="rounded-full bg-ctp-blue text-black w-32 mt-4 flex px-4 py-3 justify-center">About me <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
<div class="absolute bottom-5">
|
||||
<Footer />
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
<div class="flex flex-col items-center space-y-4">
|
||||
<h1 class="text-5xl font-bold text-ctp-text">Zachary Myers</h1>
|
||||
<p class="py-4 text-ctp-blue">
|
||||
Software Engineer, Hardware Hacker, Photographer
|
||||
</p>
|
||||
</div>
|
||||
<a href="/about">
|
||||
<button
|
||||
class="flex justify-center py-3 px-4 mt-4 w-32 text-black rounded-full bg-ctp-blue"
|
||||
>About me <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
<div class="absolute bottom-5">
|
||||
<Footer />
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,10 @@
|
|||
--gray-dark: var(--ctp-text);
|
||||
}
|
||||
|
||||
::selection {
|
||||
@apply bg-ctp-mauve text-ctp-base;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
@apply text-ctp-text;
|
||||
|
|
|
|||
2059
syntax-theme.json
Normal file
2059
syntax-theme.json
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue