z0x/blog.z0x.ca
Code Actions

fix(index): 🎨 fix TOC, add Nunito font

Browse source
This commit is contained in:
z0x 2025-01-17 20:36:33 -05:00
parent d81008b119
commit 06d90b6413
8 changed files with 23 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

11
package.json
View file

@ -14,8 +14,7 @@
"@astrojs/rss": "^4.0.11", "@astrojs/rss": "^4.0.11",
"@astrojs/sitemap": "^3.2.1", "@astrojs/sitemap": "^3.2.1",
"@astrojs/tailwind": "^5.1.4", "@astrojs/tailwind": "^5.1.4",
"@fontsource/geist-mono": "^5.1.1", "@fontsource-variable/nunito": "^5.1.1",
"@fontsource/geist-sans": "^5.1.0",
"@r4ai/remark-callout": "^0.6.2", "@r4ai/remark-callout": "^0.6.2",
"@yeskunall/astro-umami": "^0.0.3", "@yeskunall/astro-umami": "^0.0.3",
"astro": "^5.1.7", "astro": "^5.1.7",
@ -28,5 +27,9 @@
"@biomejs/biome": "1.9.4", "@biomejs/biome": "1.9.4",
"@tailwindcss/typography": "^0.5.16" "@tailwindcss/typography": "^0.5.16"
}, },
"trustedDependencies": ["@biomejs/biome", "esbuild", "sharp"] "trustedDependencies": [
} "@biomejs/biome",
"esbuild",
"sharp"
]
}

24
src/components/Head.astro
View file

@ -1,25 +1,7 @@
--- ---
import "../styles/global.css"; import "../styles/global.css";
import "../styles/callout.css"; import "../styles/callout.css";
import "@fontsource-variable/nunito";
import "@fontsource/geist-sans/100.css";
import "@fontsource/geist-sans/200.css";
import "@fontsource/geist-sans/300.css";
import "@fontsource/geist-sans/400.css";
import "@fontsource/geist-sans/500.css";
import "@fontsource/geist-sans/600.css";
import "@fontsource/geist-sans/700.css";
import "@fontsource/geist-sans/800.css";
import "@fontsource/geist-sans/900.css";
import "@fontsource/geist-mono/100.css";
import "@fontsource/geist-mono/200.css";
import "@fontsource/geist-mono/300.css";
import "@fontsource/geist-mono/400.css";
import "@fontsource/geist-mono/500.css";
import "@fontsource/geist-mono/600.css";
import "@fontsource/geist-mono/700.css";
import "@fontsource/geist-mono/800.css";
import "@fontsource/geist-mono/900.css";
interface Props { interface Props {
title: string; title: string;
@ -33,10 +15,6 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22></text></svg>"
/>
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>{title}</title> <title>{title}</title>

2
src/components/TableOfContents.astro
View file

@ -6,7 +6,7 @@ const toc = buildToc(headings);
export interface Heading { export interface Heading {
depth: number; depth: number;
id: string; slug: string;
text: string; text: string;
} }

4
src/components/TableOfContentsHeading.astro
View file

@ -1,12 +1,12 @@
--- ---
import Link from "./Link.astro";
import type { Heading } from "./TableOfContents.astro"; import type { Heading } from "./TableOfContents.astro";
import Link from "./Link.astro";
const { heading } = Astro.props; const { heading } = Astro.props;
--- ---
<li class="list-inside list-disc px-6 py-1.5 text-sm"> <li class="list-inside list-disc px-6 py-1.5 text-sm">
<Link href={"#" + heading.id} underline> <Link href={"#" + heading.slug} underline>
{heading.text} {heading.text}
</Link> </Link>
{ {

6
src/layouts/Layout.astro
View file

@ -4,14 +4,14 @@ import Head from "@components/Head.astro";
import { SITE } from "@consts"; import { SITE } from "@consts";
type Props = { type Props = {
title: string; title: string;
description: string; description: string;
}; };
const { title, description } = Astro.props; const { title, description } = Astro.props;
--- ---
<html> <html lang="en">
<head> <head>
<Head title={`${title} | ${SITE.TITLE}`} description={description} /> <Head title={`${title} | ${SITE.TITLE}`} description={description} />
</head> </head>

8
src/lib/utils.ts
View file

@ -5,6 +5,14 @@ export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)); return twMerge(clsx(inputs));
} }
export function formatDate(date: Date) {
return Intl.DateTimeFormat("en-SE", {
year: "numeric",
month: "2-digit",
day: "2-digit",
}).format(date);
}
export function readingTime(html: string) { export function readingTime(html: string) {
const textOnly = html.replace(/<[^>]+>/g, ""); const textOnly = html.replace(/<[^>]+>/g, "");
const wordCount = textOnly.split(/\s+/).length; const wordCount = textOnly.split(/\s+/).length;

3
tailwind.config.mjs
View file

@ -6,8 +6,7 @@ export default {
theme: { theme: {
extend: { extend: {
fontFamily: { fontFamily: {
sans: ["Geist Sans", ...defaultTheme.fontFamily.sans], sans: ["Nunito", ...defaultTheme.fontFamily.sans],
mono: ["Geist Mono", ...defaultTheme.fontFamily.mono],
}, },
}, },
}, },