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

migrate to tailwindcss 4
Some checks failed
/ Deploy website to server (push) Failing after 1m50s
Details

Browse Source
This commit is contained in:
Kenneth
2025-08-03 23:02:35 +01:00
parent 35ba12de9e
commit 9d0e68f5f6
10 changed files with 3821 additions and 4158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
astro.config.mjs
View File

@@ -4,12 +4,13 @@ import sitemap from "@astrojs/sitemap";
import remarkMath from "remark-math"; import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex"; import rehypeKatex from "rehype-katex";
import tailwind from "@astrojs/tailwind"; import tailwindcss from "@tailwindcss/vite";
// 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()],
markdown: { markdown: {
shikiConfig: { shikiConfig: {
// Choose from Shiki's built-in themes (or add your own) // Choose from Shiki's built-in themes (or add your own)
@@ -19,4 +20,8 @@ export default defineConfig({
remarkPlugins: [remarkMath], remarkPlugins: [remarkMath],
rehypePlugins: [rehypeKatex], rehypePlugins: [rehypeKatex],
}, },
vite: {
plugins: [tailwindcss()],
},
}); });

60
package.json
View File

@@ -1,31 +1,31 @@
{ {
"name": "website", "name": "website",
"type": "module", "type": "module",
"version": "0.0.1", "version": "0.0.1",
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",
"start": "astro dev", "start": "astro dev",
"build": "astro check && astro build", "build": "astro check && astro build",
"preview": "astro preview", "preview": "astro preview",
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/check": "^0.5.6", "@astrojs/check": "^0.5.6",
"@astrojs/mdx": "^2.1.1", "@astrojs/mdx": "^2.1.1",
"@astrojs/rss": "^4.0.5", "@astrojs/rss": "^4.0.5",
"@astrojs/sitemap": "^3.1.1", "@astrojs/sitemap": "^3.1.1",
"@astrojs/tailwind": "^5.1.0", "@tailwindcss/vite": "^4.1.11",
"astro": "^4.4.15", "astro": "^4.4.15",
"tailwindcss": "^3.4.1", "tailwindcss": "^4.1.11",
"typescript": "^5.4.2" "typescript": "^5.4.2"
}, },
"devDependencies": { "devDependencies": {
"@catppuccin/tailwindcss": "^0.1.6", "@catppuccin/tailwindcss": "1.0.0",
"@flydotio/dockerfile": "latest", "@flydotio/dockerfile": "latest",
"@tailwindcss/typography": "^0.5.10", "@tailwindcss/typography": "^0.5.10",
"prettier": "^3.2.5", "prettier": "^3.2.5",
"prettier-plugin-astro": "^0.13.0", "prettier-plugin-astro": "^0.13.0",
"rehype-katex": "^7.0.1", "rehype-katex": "^7.0.1",
"remark-math": "^6.0.0" "remark-math": "^6.0.0"
} }
} }

7849
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

20
src/components/BaseHead.astro
View File

@@ -1,7 +1,7 @@
--- ---
// Import the global.css file here so that it is included on // Import the global.css file here so that it is included on
// all pages through the use of the <BaseHead /> component. // all pages through the use of the <BaseHead /> component.
import '../styles/global.css'; import "../styles/global.css";
interface Props { interface Props {
title: string; title: string;
@@ -11,7 +11,7 @@ interface Props {
const canonicalURL = new URL(Astro.url.pathname, Astro.site); const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props; const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
--- ---
<!-- Global Metadata --> <!-- Global Metadata -->
@@ -23,11 +23,19 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
<link rel="canonical" href={canonicalURL} /> <link rel="canonical" href={canonicalURL} />
<!-- RSS autodiscovery --> <!-- RSS autodiscovery -->
<link rel="alternate" type="application/rss+xml" title={title} href={`${Astro.site}rss.xml`} /> <link
rel="alternate"
type="application/rss+xml"
title={title}
href={`${Astro.site}rss.xml`}
/>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet"> <link
href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap"
rel="stylesheet"
/>
<!-- Primary Meta Tags --> <!-- Primary Meta Tags -->
<title>{title}</title> <title>{title}</title>

8
src/components/CommandLine.astro
View File

@@ -1,15 +1,15 @@
<div id="command-line" class="w-full flex flex-row bg-base"> <div id="command-line" class="w-full flex flex-row bg-ctp-base">
<input <input
aria-hidden="true" aria-hidden="true"
id="command-line-input" id="command-line-input"
type="text" type="text"
class="bg-base focus:outline-none active:outline-none cursor-default caret-transparent m-0" class="bg-ctp-base focus:outline-none active:outline-none cursor-default caret-transparent m-0"
/> />
<div id="caret" aria-hidden="true" class="bg-text inline-block">&nbsp;</div> <div id="caret" aria-hidden="true" class="bg-text inline-block">&nbsp;</div>
<p <p
aria-hidden="true" aria-hidden="true"
id="status-text" id="status-text"
class="absolute w-full h-full bg-base hidden italic" class="absolute w-full h-full bg-ctp-base hidden italic"
> >
</p> </p>
</div> </div>
@@ -94,7 +94,7 @@
} else { } else {
statusText.innerHTML = `E492: Not an editor command: ${command}`; statusText.innerHTML = `E492: Not an editor command: ${command}`;
statusText.classList.remove("hidden"); statusText.classList.remove("hidden");
statusText.classList.add("text-red"); statusText.classList.add("text-ctp-red");
} }
} }

6
src/components/Link.astro
View File

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

12
src/components/LuaLine.astro
View File

@@ -4,10 +4,10 @@ import CommandLine from "./CommandLine.astro";
--- ---
<div class="hidden sm:block absolute w-full bottom-0"> <div class="hidden sm:block absolute w-full bottom-0">
<footer class="w-full bg-crust flex flex-row leading-tight"> <footer class="w-full bg-ctp-mantle flex flex-row leading-tight">
<span <span
id="status-indicator" id="status-indicator"
class="bg-blue font-bold text-base inline-block leading-tight" class="bg-ctp-blue font-bold text-ctp-base inline-block leading-tight"
>&nbsp;NORMAL&nbsp;</span >&nbsp;NORMAL&nbsp;</span
> >
<div id="project-list" class="flex flex-row bg-surface0"> <div id="project-list" class="flex flex-row bg-surface0">
@@ -40,14 +40,14 @@ import CommandLine from "./CommandLine.astro";
cmdLine.addEventListener("cmdmodeenabled", () => { cmdLine.addEventListener("cmdmodeenabled", () => {
statusIndicator.innerHTML = "&nbsp;COMMAND&nbsp;"; statusIndicator.innerHTML = "&nbsp;COMMAND&nbsp;";
statusIndicator.classList.remove("bg-blue"); statusIndicator.classList.remove("bg-ctp-blue");
statusIndicator.classList.add("bg-peach"); statusIndicator.classList.add("bg-ctp-peach");
}); });
cmdLine.addEventListener("cmdmodedisabled", () => { cmdLine.addEventListener("cmdmodedisabled", () => {
statusIndicator.innerHTML = "&nbsp;NORMAL&nbsp;"; statusIndicator.innerHTML = "&nbsp;NORMAL&nbsp;";
statusIndicator.classList.add("bg-blue"); statusIndicator.classList.add("bg-ctp-blue");
statusIndicator.classList.remove("bg-peach"); statusIndicator.classList.remove("bg-ctp-peach");
}); });
window.addEventListener("openhelp", () => { window.addEventListener("openhelp", () => {

4
src/layouts/BlogPost.astro
View File

@@ -18,7 +18,7 @@ const {
--- ---
<!doctype html> <!doctype html>
<html lang="en" class="latte dark:mocha"> <html lang="en" class="dark:mocha">
<head> <head>
<BaseHead title={title} description={description} image={heroImage} /> <BaseHead title={title} description={description} image={heroImage} />
{ {
@@ -31,7 +31,7 @@ const {
} }
</head> </head>
<body class="blog bg-base text-text max-w-prose m-auto p-8"> <body class="blog bg-ctp-base text-ctp-text max-w-prose m-auto p-8">
<Header /> <Header />
<main class="py-10"> <main class="py-10">
<article> <article>

4
src/pages/index.astro
View File

@@ -13,12 +13,12 @@ const posts = (await getBlogs()).sort(
--- ---
<!doctype html> <!doctype html>
<html lang="en" class="latte dark:mocha bg-base"> <html lang="en" class="dark:mocha bg-ctp-base">
<head> <head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head> </head>
<body <body
class="tilde-background text-text h-screen m-auto sm:flex items-center justify-center sm:overflow-hidden" class="tilde-background text-ctp-text h-screen m-auto sm:flex items-center justify-center sm:overflow-hidden"
> >
<div class="visible p-8 sm:hidden"> <div class="visible p-8 sm:hidden">
<header> <header>

7
src/styles/global.css
View File

@@ -1,3 +1,10 @@
@import "tailwindcss";
@import "@catppuccin/tailwindcss/mocha.css";
@plugin "@tailwindcss/typography";
@source inline("text-ctp-red");
@font-face { @font-face {
font-family: "CommitMono"; font-family: "CommitMono";
src: url("/fonts/CommitMono-400-Regular.otf") format("opentype"); src: url("/fonts/CommitMono-400-Regular.otf") format("opentype");