zoey/web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: the catppuccin update

Browse source
This commit is contained in:
zackartz 2024-05-05 18:25:40 -04:00
parent 25ca02da0a
commit 141de7c95f
No known key found for this signature in database
GPG key ID: 5B53E53A9A514DBA
13 changed files with 1326 additions and 3116 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
.direnv/

5
astro.config.mjs
View file

@ -7,5 +7,10 @@ import tailwind from "@astrojs/tailwind";
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
site: "https://zackmyers.io", site: "https://zackmyers.io",
markdown: {
shikiConfig: {
theme: "catppuccin-frappe",
},
},
integrations: [mdx(), sitemap(), tailwind()], integrations: [mdx(), sitemap(), tailwind()],
}); });

1
flake.nix
View file

@ -74,6 +74,7 @@
pkgs.nodePackages.pnpm pkgs.nodePackages.pnpm
# pkgs.yarn # pkgs.yarn
pkgs.prettierd
pkgs.nodePackages.typescript pkgs.nodePackages.typescript
pkgs.nodePackages.typescript-language-server pkgs.nodePackages.typescript-language-server
pkgs.nodePackages."@tailwindcss/language-server" pkgs.nodePackages."@tailwindcss/language-server"

1
package.json
View file

@ -20,6 +20,7 @@
"typescript": "^5.4.5" "typescript": "^5.4.5"
}, },
"devDependencies": { "devDependencies": {
"@catppuccin/tailwindcss": "^0.1.6",
"@tailwindcss/typography": "^0.5.12" "@tailwindcss/typography": "^0.5.12"
} }
} }

4341
pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff

2
src/components/FormattedDate.astro
View file

@ -6,7 +6,7 @@ interface Props {
const { date } = Astro.props; const { date } = Astro.props;
--- ---
<time datetime={date.toISOString()}> <time class="text-ctp-sky" datetime={date.toISOString()}>
{ {
date.toLocaleDateString('en-us', { date.toLocaleDateString('en-us', {
year: 'numeric', year: 'numeric',

11
src/content/blog/deploy-astro-on-nixos.md
View file

@ -61,6 +61,17 @@ Now, lets add the package spec:
```nix ```nix
{ {
outputs = {
systems,
nixpkgs,
self,
...
} @ inputs: let
eachSystem = f:
nixpkgs.lib.genAttrs (import systems) (
system:
f nixpkgs.legacyPackages.${system}
);
in { in {
# add packages :) # add packages :)
packages = eachSystem (pkgs: { packages = eachSystem (pkgs: {

15
src/layouts/BlogPost.astro
View file

@ -9,15 +9,10 @@ type Props = any;
const { title, description, pubDate, updatedDate, heroImage } = Astro.props; const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
--- ---
<html lang="en"> <html lang="en" class="ctp-mocha bg-ctp-base">
<head> <head>
<BaseHead title={title} description={description} /> <BaseHead title={title} description={description} />
<style> <style>
main {
width: calc(100% - 2em);
max-width: 100%;
margin: 0;
}
.hero-image { .hero-image {
width: 100%; width: 100%;
} }
@ -53,9 +48,9 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
</style> </style>
</head> </head>
<body> <body class="bg-base">
<Header /> <Header />
<main> <main class="px-8">
<article> <article>
<div class="hero-image"> <div class="hero-image">
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />} {heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
@ -72,8 +67,8 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
) )
} }
</div> </div>
<h1>{title}</h1> <h1 class="text-ctp-text">{title}</h1>
<hr /> <hr class="border-ctp-surface0" />
</div> </div>
<slot /> <slot />
</div> </div>

4
src/pages/about.astro
View file

@ -8,7 +8,7 @@ import Layout from '../layouts/BlogPost.astro';
pubDate={new Date('April 13 2024')} pubDate={new Date('April 13 2024')}
> >
<article> <article>
<h3>Hey there!</h3> <h3 class="">Hey there!</h3>
<p>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="/cv.pdf" target="_blank">check out my cv</a> and <a href="mailto:me@zackmyers.io">reach out</a> if you are interested!</p> <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="/cv.pdf" target="_blank">check out my cv</a> and <a href="mailto:me@zackmyers.io">reach out</a> if you are interested!</p>
</article> </article>
</Layout> </Layout>

8
src/pages/blog/index.astro
View file

@ -12,7 +12,7 @@ const posts: any[] = (await getCollection('blog')).sort(
--- ---
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="ctp-mocha bg-ctp-base">
<head> <head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head> </head>
@ -24,11 +24,11 @@ const posts: any[] = (await getCollection('blog')).sort(
<ul class="space-y-4"> <ul class="space-y-4">
{ {
posts.sort((a, b) => b.data.pubDate - a.data.pubDate).map((post) => ( posts.sort((a, b) => b.data.pubDate - a.data.pubDate).map((post) => (
<li class="p-4 rounded-xl shadow-lg border border-gray-300"> <li class="p-4 rounded-xl shadow-lg border border-ctp-surface2">
<a href={`/blog/${post.slug}/`}> <a href={`/blog/${post.slug}/`}>
<img class="rounded-lg" width={720} height={360} src={post.data.heroImage} alt="" /> <img class="rounded-lg" width={720} height={360} src={post.data.heroImage} alt="" />
<h4 class="text-2xl p-3 font-bold text-center">{post.data.title}</h4> <h4 class="text-2xl p-3 font-bold text-center text-ctp-mauve">{post.data.title}</h4>
<p class="text-gray-700 text-center"> <p class="text-center">
<FormattedDate date={post.data.pubDate} /> <FormattedDate date={post.data.pubDate} />
</p> </p>
</a> </a>

10
src/pages/index.astro
View file

@ -6,20 +6,20 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
--- ---
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="ctp-mocha bg-ctp-base">
<head> <head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head> </head>
<body class="h-screen relative"> <body class="h-screen bg-base relative">
<Header /> <Header />
<main class="p-16 flex flex-col w-full h-[84%] <main class="p-16 flex flex-col w-full h-[84%]
justify-center items-center"> justify-center items-center">
<div class="flex flex-col items-center space-y-4"> <div class="flex flex-col items-center space-y-4">
<h1 class="font-bold text-5xl">Zachary Myers</h1> <h1 class="font-bold text-ctp-text text-5xl">Zachary Myers</h1>
<p class="py-4">Software Engineer, Hardware Hacker, Photographer</p> <p class="py-4 text-ctp-blue">Software Engineer, Hardware Hacker, Photographer</p>
</div> </div>
<a href="/about"> <a href="/about">
<button class="rounded-full bg-black text-white 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"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
</svg> </svg>
</button> </button>

13
src/styles/global.css
View file

@ -0,0 +1,13 @@
@tailwind base;
@tailwind utilities;
@tailwind components;
:root {
--gray-dark: var(--ctp-text);
}
@layer base {
html {
@apply text-ctp-text;
}
}

30
tailwind.config.mjs
View file

@ -2,10 +2,36 @@
export default { export default {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: { theme: {
extend: {}, extend: {
typography: (theme) => ({
DEFAULT: {
css: {
color: "rgba(var(--ctp-text), 1)",
"--tw-prose-body": "rgba(var(--ctp-text), 1)",
"--tw-prose-headings": "rgba(var(--ctp-mauve), 1)",
"--tw-prose-hr": "rgba(var(--ctp-surface0), 1)",
"--tw-prose-code": "rgba(var(--ctp-pink), 1)",
a: {
color: "rgba(var(--ctp-blue), 1)",
"text-decoration-thickness": ".1em",
"text-underline-offset": "4px",
"&:hover": {
color: "rgba(var(--ctp-sky), 1)",
},
},
},
},
}),
},
fontFamily: { fontFamily: {
sans: ["Iosevka Web", "ui-monospace", "monospace"], sans: ["Iosevka Web", "ui-monospace", "monospace"],
}, },
}, },
plugins: [require("@tailwindcss/typography")], plugins: [
require("@catppuccin/tailwindcss")({
prefix: "ctp",
defaultFlavor: "mocha",
}),
require("@tailwindcss/typography"),
],
}; };