kennethnym/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use catppuccin theme

Browse Source
This commit is contained in:
Kenneth
2024-05-14 00:01:06 +01:00
parent c2e2beaa47
commit 8be90fe64e
7 changed files with 41 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
astro.config.mjs
View File

@@ -1,11 +1,18 @@
import { defineConfig } from 'astro/config'; import { defineConfig } from "astro/config";
import mdx from '@astrojs/mdx'; import mdx from "@astrojs/mdx";
import sitemap from '@astrojs/sitemap'; import sitemap from "@astrojs/sitemap";
import tailwind from "@astrojs/tailwind"; import tailwind from "@astrojs/tailwind";
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
site: 'https://kennethnym.com', site: "https://kennethnym.com",
integrations: [mdx(), sitemap(), tailwind()] integrations: [mdx(), sitemap(), tailwind()],
}); markdown: {
shikiConfig: {
// Choose from Shiki's built-in themes (or add your own)
// https://shiki.style/themes
theme: "catppuccin-mocha",
},
},
});

1
package.json
View File

@@ -20,6 +20,7 @@
"typescript": "^5.4.2" "typescript": "^5.4.2"
}, },
"devDependencies": { "devDependencies": {
"@catppuccin/tailwindcss": "^0.1.6",
"@flydotio/dockerfile": "latest", "@flydotio/dockerfile": "latest",
"@tailwindcss/typography": "^0.5.10", "@tailwindcss/typography": "^0.5.10",
"prettier": "^3.2.5", "prettier": "^3.2.5",

11
pnpm-lock.yaml generated
View File

@@ -31,6 +31,9 @@ dependencies:
version: 5.4.2 version: 5.4.2
devDependencies: devDependencies:
'@catppuccin/tailwindcss':
specifier: ^0.1.6
version: 0.1.6(tailwindcss@3.4.1)
'@flydotio/dockerfile': '@flydotio/dockerfile':
specifier: latest specifier: latest
version: 0.5.2 version: 0.5.2
@@ -445,6 +448,14 @@ packages:
to-fast-properties: 2.0.0 to-fast-properties: 2.0.0
dev: false dev: false
/@catppuccin/tailwindcss@0.1.6(tailwindcss@3.4.1):
resolution: {integrity: sha512-V+Y0AwZ5SSyvOVAcDl7Ng30xy+m82OKnEJ+9+kcZZ7lRyXuZrAb2GScdq9XR3v+ggt8qiZ/G4TvaC9cJ88AAXA==}
peerDependencies:
tailwindcss: '>=3.0.0'
dependencies:
tailwindcss: 3.4.1
dev: true
/@emmetio/abbreviation@2.3.3: /@emmetio/abbreviation@2.3.3:
resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==} resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==}
dependencies: dependencies:

5
src/components/Link.astro
View File

@@ -6,8 +6,9 @@ const { href, class: className, ...props } = Astro.props;
href={href} href={href}
class:list={[ class:list={[
"underline", "underline",
"dark:visited:text-purple-300", "text-blue",
"visited:text-purple-500", "hover:text-lavender",
"visited:text-mauve",
className, className,
]}><slot /></a ]}><slot /></a
> >

4
src/layouts/BlogPost.astro
View File

@@ -10,12 +10,12 @@ type Props = CollectionEntry<"blog">["data"];
const { title, description, pubDate, updatedDate, heroImage } = Astro.props; const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
--- ---
<html lang="en"> <html lang="en" class="latte dark:mocha">
<head> <head>
<BaseHead title={title} description={description} image={heroImage} /> <BaseHead title={title} description={description} image={heroImage} />
</head> </head>
<body class="bg-amber-50 dark:bg-gray-900 dark:text-white dark:text-opacity-80 max-w-prose m-auto p-8"> <body class="bg-base text-text max-w-prose m-auto p-8">
<Header /> <Header />
<main class="py-10"> <main class="py-10">
<article> <article>

6
src/pages/index.astro
View File

@@ -12,12 +12,12 @@ const posts = (await getBlogs()).sort(
--- ---
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="latte dark:mocha">
<head> <head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head> </head>
<body <body
class="bg-amber-50 dark:bg-gray-900 text-gray-600 dark:text-white dark:text-opacity-70 max-w-4xl m-auto p-8" class="bg-base text-text max-w-4xl m-auto p-8"
> >
<header> <header>
<p class="font-bold text-2xl">kennethnym</p> <p class="font-bold text-2xl">kennethnym</p>
@@ -44,7 +44,7 @@ const posts = (await getBlogs()).sort(
<ul> <ul>
{ {
posts.map((post) => ( posts.map((post) => (
<li class="flex flex-row justify-between hover:bg-amber-100 dark:hover:bg-gray-700 -mx-2 px-2 rounded"> <li class="flex flex-row justify-between hover:bg-opacity-10 hover:bg-text -mx-2 px-2 rounded">
<Link href={`/blog/${post.slug}`}>{post.data.title}</Link> <Link href={`/blog/${post.slug}`}>{post.data.title}</Link>
<FormattedDate date={post.data.pubDate} /> <FormattedDate date={post.data.pubDate} />
</li> </li>

15
tailwind.config.mjs
View File

@@ -1,10 +1,11 @@
import typography from "@tailwindcss/typography" import typography from "@tailwindcss/typography";
import catppuccin from "@catppuccin/tailwindcss";
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
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: {},
}, },
plugins: [typography], plugins: [typography, catppuccin],
} };