refactor(all): biomejs

This commit is contained in:
z0x 2025-01-14 22:41:22 -05:00
parent 9c22eceaf7
commit a519150e9f
29 changed files with 540 additions and 489 deletions

18
.vscode/launch.json vendored
View file

@ -1,11 +1,11 @@
{ {
"version": "0.2.0", "version": "0.2.0",
"configurations": [ "configurations": [
{ {
"command": "./node_modules/.bin/astro dev", "command": "./node_modules/.bin/astro dev",
"name": "Development server", "name": "Development server",
"request": "launch", "request": "launch",
"type": "node-terminal" "type": "node-terminal"
} }
] ]
} }

View file

@ -1,28 +1,25 @@
import { defineConfig } from "astro/config"; import sitemap from "@astrojs/sitemap";
import tailwind from "@astrojs/tailwind"; import tailwind from "@astrojs/tailwind";
import remarkCallout from "@r4ai/remark-callout"; import remarkCallout from "@r4ai/remark-callout";
import sitemap from "@astrojs/sitemap";
import umami from "@yeskunall/astro-umami"; import umami from "@yeskunall/astro-umami";
import { defineConfig } from "astro/config";
export default defineConfig({ export default defineConfig({
site: "https://blog.z0x.ca", site: "https://blog.z0x.ca",
integrations: [ integrations: [
tailwind({ tailwind({
nesting: true, nesting: true,
}), }),
umami({ umami({
id: "b691181e-cad7-4c23-b16a-709872a0a7ab", id: "b691181e-cad7-4c23-b16a-709872a0a7ab",
endpointUrl: "https://umami.z0x.ca", endpointUrl: "https://umami.z0x.ca",
}), }),
sitemap(), sitemap(),
], ],
markdown: { markdown: {
shikiConfig: { shikiConfig: {
theme: "css-variables", theme: "css-variables",
}, },
remarkPlugins: [ remarkPlugins: [remarkCallout],
remarkCallout, },
],
}
}); });

43
biome.json Normal file
View file

@ -0,0 +1,43 @@
{
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"vcs": {
"enabled": false,
"clientKind": "git",
"useIgnoreFile": false
},
"files": {
"ignoreUnknown": false,
"ignore": ["node_modules", "dist"]
},
"formatter": {
"enabled": true,
"indentStyle": "tab"
},
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"javascript": {
"formatter": {
"quoteStyle": "double"
}
},
"overrides": [
{
"include": ["*.astro"],
"linter": {
"rules": {
"style": {
"useConst": "off",
"useImportType": "off"
}
}
}
}
]
}

BIN
bun.lockb

Binary file not shown.

File diff suppressed because one or more lines are too long

View file

@ -1,30 +1,32 @@
{ {
"name": "blog.z0x.ca", "name": "blog.z0x.ca",
"type": "module", "type": "module",
"version": "1.0.0", "version": "1.0.0",
"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.9.4", "@astrojs/check": "^0.9.4",
"@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/geist-mono": "^5.1.1",
"@fontsource/geist-sans": "^5.1.0", "@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.5", "astro": "^5.1.5",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"tailwind-merge": "^2.6.0", "tailwind-merge": "^2.6.0",
"tailwindcss": "^3.4.17", "tailwindcss": "^3.4.17",
"typescript": "^5.7.3" "typescript": "^5.7.3"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/typography": "^0.5.16" "@biomejs/biome": "1.9.4",
} "@tailwindcss/typography": "^0.5.16"
},
"trustedDependencies": ["@biomejs/biome"]
} }

View file

@ -2,11 +2,11 @@
import type { CollectionEntry } from "astro:content"; import type { CollectionEntry } from "astro:content";
type Props = { type Props = {
entry: CollectionEntry<"blog">; entry: CollectionEntry<"blog">;
}; };
const { entry } = Astro.props as { const { entry } = Astro.props as {
entry: CollectionEntry<"blog">; entry: CollectionEntry<"blog">;
}; };
--- ---

View file

@ -1,7 +1,3 @@
---
---
<button <button
id="back-to-top" id="back-to-top"
class="group relative flex w-fit flex-nowrap rounded border border-black/15 py-1.5 pl-8 pr-3 transition-colors duration-300 ease-in-out hover:bg-black/5 hover:text-black focus-visible:bg-black/5 focus-visible:text-black dark:border-white/20 dark:hover:bg-white/5 dark:hover:text-white dark:focus-visible:bg-white/5 dark:focus-visible:text-white" class="group relative flex w-fit flex-nowrap rounded border border-black/15 py-1.5 pl-8 pr-3 transition-colors duration-300 ease-in-out hover:bg-black/5 hover:text-black focus-visible:bg-black/5 focus-visible:text-black dark:border-white/20 dark:hover:bg-white/5 dark:hover:text-white dark:focus-visible:bg-white/5 dark:focus-visible:text-white"

View file

@ -1,6 +1,6 @@
--- ---
interface Props { interface Props {
type: "default" | "info" | "warning" | "error"; type: "default" | "info" | "warning" | "error";
} }
const { type = "default" } = Astro.props; const { type = "default" } = Astro.props;
@ -8,11 +8,11 @@ const { type = "default" } = Astro.props;
let emoji = "💡"; let emoji = "💡";
if (type === "info") { if (type === "info") {
emoji = ""; emoji = "";
} else if (type === "warning") { } else if (type === "warning") {
emoji = "⚠️"; emoji = "⚠️";
} else if (type === "error") { } else if (type === "error") {
emoji = "🚨"; emoji = "🚨";
} }
--- ---

View file

@ -1,5 +1 @@
---
---
<div class="mx-auto max-w-screen-sm px-3"><slot /></div> <div class="mx-auto max-w-screen-sm px-3"><slot /></div>

View file

@ -1,6 +1,6 @@
--- ---
import Container from "@components/Container.astro";
import BackToTop from "@components/BackToTop.astro"; import BackToTop from "@components/BackToTop.astro";
import Container from "@components/Container.astro";
import { SITE } from "@consts"; import { SITE } from "@consts";
--- ---

View file

@ -1,6 +1,6 @@
--- ---
interface Props { interface Props {
date: Date; date: Date;
} }
const { date } = Astro.props; const { date } = Astro.props;

View file

@ -24,9 +24,9 @@ import "@fontsource/geist-mono/800.css";
import "@fontsource/geist-mono/900.css"; import "@fontsource/geist-mono/900.css";
interface Props { interface Props {
title: string; title: string;
description: string; description: string;
image?: string; image?: string;
} }
const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props; const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;

View file

@ -2,18 +2,18 @@
import { cn } from "@lib/utils"; import { cn } from "@lib/utils";
type Props = { type Props = {
href: string; href: string;
external?: boolean; external?: boolean;
underline?: boolean; underline?: boolean;
group?: boolean; group?: boolean;
}; };
const { const {
href, href,
external, external,
underline = true, underline = true,
group = false, group = false,
...rest ...rest
} = Astro.props; } = Astro.props;
--- ---

View file

@ -5,24 +5,24 @@ const { headings } = Astro.props;
const toc = buildToc(headings); const toc = buildToc(headings);
export interface Heading { export interface Heading {
depth: number; depth: number;
id: string; id: string;
text: string; text: string;
} }
function buildToc(headings: Heading[]) { function buildToc(headings: Heading[]) {
const toc: Heading[] = []; const toc: Heading[] = [];
const parentHeadings = new Map(); const parentHeadings = new Map();
headings.forEach((h) => { headings.forEach((h) => {
const heading = { ...h, subheadings: [] }; const heading = { ...h, subheadings: [] };
parentHeadings.set(heading.depth, heading); parentHeadings.set(heading.depth, heading);
if (heading.depth === 2) { if (heading.depth === 2) {
toc.push(heading); toc.push(heading);
} else { } else {
parentHeadings.get(heading.depth - 1).subheadings.push(heading); parentHeadings.get(heading.depth - 1).subheadings.push(heading);
} }
}); });
return toc; return toc;
} }
--- ---

View file

@ -1,6 +1,6 @@
--- ---
import type { Heading } from "./TableOfContents.astro";
import Link from "./Link.astro"; import Link from "./Link.astro";
import type { Heading } from "./TableOfContents.astro";
const { heading } = Astro.props; const { heading } = Astro.props;
--- ---

View file

@ -1,9 +1,8 @@
import type { Metadata, Site } from "@types"; import type { Metadata, Site } from "@types";
export const SITE: Site = { export const SITE: Site = {
TITLE: "z0x", TITLE: "z0x",
DESCRIPTION: "z0x's blog", DESCRIPTION: "z0x's blog",
}; };
export const HOME: Metadata = { export const HOME: Metadata = {
TITLE: "blog", TITLE: "blog",
}; };

View file

@ -1,14 +1,14 @@
import { defineCollection, z } from "astro:content"; import { defineCollection, z } from "astro:content";
import { glob } from 'astro/loaders'; import { glob } from "astro/loaders";
const blog = defineCollection({ const blog = defineCollection({
loader: glob({ pattern: '**/*.{md,mdx}', base: "./src/content" }), loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content" }),
schema: z.object({ schema: z.object({
title: z.string(), title: z.string(),
description: z.string(), description: z.string(),
date: z.coerce.date(), date: z.coerce.date(),
draft: z.boolean().optional(), draft: z.boolean().optional(),
}), }),
}); });
export const collections = { blog }; export const collections = { blog };

View file

@ -1,11 +1,11 @@
--- ---
import Head from "@components/Head.astro";
import Footer from "@components/Footer.astro"; import Footer from "@components/Footer.astro";
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;

View file

@ -1,13 +1,13 @@
import { clsx, type ClassValue } from "clsx"; import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)); return twMerge(clsx(inputs));
} }
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;
const readingTimeMinutes = (wordCount / 200 + 1).toFixed(); const readingTimeMinutes = (wordCount / 200 + 1).toFixed();
return `${readingTimeMinutes} min read`; return `${readingTimeMinutes} min read`;
} }

View file

@ -1,7 +1,7 @@
--- ---
import Layout from "@layouts/Layout.astro";
import Container from "@components/Container.astro"; import Container from "@components/Container.astro";
import { SITE } from "@consts"; import { SITE } from "@consts";
import Layout from "@layouts/Layout.astro";
--- ---
<Layout title="404" description={SITE.DESCRIPTION}> <Layout title="404" description={SITE.DESCRIPTION}>

View file

@ -1,41 +1,45 @@
--- ---
import { type CollectionEntry, getCollection, render } from "astro:content"; import { type CollectionEntry, getCollection, render } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Container from "@components/Container.astro"; import Container from "@components/Container.astro";
import FormattedDate from "@components/FormattedDate.astro"; import FormattedDate from "@components/FormattedDate.astro";
import { readingTime } from "@lib/utils";
import PostNavigation from "@components/PostNavigation.astro"; import PostNavigation from "@components/PostNavigation.astro";
import TableOfContents from "@components/TableOfContents.astro"; import TableOfContents from "@components/TableOfContents.astro";
import Layout from "@layouts/Layout.astro";
import { readingTime } from "@lib/utils";
export async function getStaticPaths() { export async function getStaticPaths() {
const posts = (await getCollection("blog")).filter((post) => !post.data.draft).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf()); const posts = (await getCollection("blog"))
return posts.map((post) => ({ .filter((post) => !post.data.draft)
params: { id: post.id }, .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
props: post, return posts.map((post) => ({
})); params: { id: post.id },
props: post,
}));
} }
type Props = CollectionEntry<"blog">; type Props = CollectionEntry<"blog">;
const posts = (await getCollection("blog")).filter((post) => !post.data.draft).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf()); const posts = (await getCollection("blog"))
.filter((post) => !post.data.draft)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
function getNextPost() { function getNextPost() {
let postIndex; let postIndex;
for (const post of posts) { for (const post of posts) {
if (post.id === Astro.params.id) { if (post.id === Astro.params.id) {
postIndex = posts.indexOf(post); postIndex = posts.indexOf(post);
return posts[postIndex + 1]; return posts[postIndex + 1];
} }
} }
} }
function getPrevPost() { function getPrevPost() {
let postIndex; let postIndex;
for (const post of posts) { for (const post of posts) {
if (post.id === Astro.params.id) { if (post.id === Astro.params.id) {
postIndex = posts.indexOf(post); postIndex = posts.indexOf(post);
return posts[postIndex - 1]; return posts[postIndex - 1];
} }
} }
} }
const nextPost = getNextPost(); const nextPost = getNextPost();

View file

@ -1,27 +1,31 @@
--- ---
import { type CollectionEntry, getCollection } from "astro:content"; import { type CollectionEntry, getCollection } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Container from "@components/Container.astro";
import ArrowCard from "@components/ArrowCard.astro"; import ArrowCard from "@components/ArrowCard.astro";
import Container from "@components/Container.astro";
import { SITE } from "@consts"; import { SITE } from "@consts";
import { HOME } from "@consts"; import { HOME } from "@consts";
import Layout from "@layouts/Layout.astro";
const data = (await getCollection("blog")).filter((post) => !post.data.draft).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf()); const data = (await getCollection("blog"))
.filter((post) => !post.data.draft)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
type Acc = { type Acc = {
[year: string]: CollectionEntry<"blog">[]; [year: string]: CollectionEntry<"blog">[];
}; };
const posts = data.reduce((acc: Acc, post) => { const posts = data.reduce((acc: Acc, post) => {
const year = post.data.date.getFullYear().toString(); const year = post.data.date.getFullYear().toString();
if (!acc[year]) { if (!acc[year]) {
acc[year] = []; acc[year] = [];
} }
acc[year].push(post); acc[year].push(post);
return acc; return acc;
}, {}); }, {});
const years = Object.keys(posts).sort((a, b) => parseInt(b) - parseInt(a)); const years = Object.keys(posts).sort(
(a, b) => Number.parseInt(b) - Number.parseInt(a),
);
--- ---
<Layout title={HOME.TITLE} description={SITE.DESCRIPTION}> <Layout title={HOME.TITLE} description={SITE.DESCRIPTION}>

View file

@ -1,24 +1,23 @@
import { getCollection } from "astro:content";
import rss from "@astrojs/rss"; import rss from "@astrojs/rss";
import { SITE } from "@consts"; import { SITE } from "@consts";
import { getCollection } from "astro:content";
export async function GET(context) { export async function GET(context) {
const blog = (await getCollection("blog")).filter((post) => !post.data.draft); const blog = (await getCollection("blog")).filter((post) => !post.data.draft);
const items = [...blog].sort(
(a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf(),
);
const items = [...blog].sort( return rss({
(a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf(), title: SITE.TITLE,
); description: SITE.DESCRIPTION,
site: context.site,
return rss({ items: items.map((item) => ({
title: SITE.TITLE, title: item.data.title,
description: SITE.DESCRIPTION, description: item.data.description,
site: context.site, pubDate: item.data.date,
items: items.map((item) => ({ link: `/${item.id}/`,
title: item.data.title, })),
description: item.data.description, });
pubDate: item.data.date,
link: `/${item.id}/`,
})),
});
} }

View file

@ -1,384 +1,395 @@
[data-callout] { [data-callout] {
& { & {
@apply my-6 space-y-2 rounded-lg border border-blue-600/20 bg-blue-400/20 p-4 pb-5 dark:border-blue-800/20 dark:bg-blue-600/10; @apply my-6 space-y-2 rounded-lg border border-blue-600/20 bg-blue-400/20 p-4 pb-5 dark:border-blue-800/20 dark:bg-blue-600/10;
} }
& > [data-callout-title] { & > [data-callout-title] {
& { & {
@apply flex flex-row items-start gap-2 p-0 font-bold text-blue-500; @apply flex flex-row items-start gap-2 p-0 font-bold text-blue-500;
} }
&:not:only-child { &:not:only-child {
@apply mb-2; @apply mb-2;
} }
&:empty::after { &:empty::after {
content: "Note"; content: "Note";
} }
&::before { &::before {
@apply mt-1 block h-5 w-5 bg-current content-[""]; @apply mt-1 block h-5 w-5 bg-current content-[""];
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: cover; mask-size: cover;
/* lucide-pencil */ /* lucide-pencil */
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTE3IDNhMi44NSAyLjgzIDAgMSAxIDQgNEw3LjUgMjAuNUwyIDIybDEuNS01LjVabS0yIDJsNCA0Ii8+PC9zdmc+"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTE3IDNhMi44NSAyLjgzIDAgMSAxIDQgNEw3LjUgMjAuNUwyIDIybDEuNS01LjVabS0yIDJsNCA0Ii8+PC9zdmc+");
} }
} }
& > [data-callout-body] { & > [data-callout-body] {
& { & {
@apply space-y-2; @apply space-y-2;
} }
& > * { & > * {
@apply m-0; @apply m-0;
} }
} }
} }
details[data-callout] > summary[data-callout-title] { details[data-callout] > summary[data-callout-title] {
& { & {
@apply cursor-pointer; @apply cursor-pointer;
} }
&::after { &::after {
@apply w-full bg-right bg-no-repeat; @apply w-full bg-right bg-no-repeat;
content: ""; content: "";
/* lucide:chevron-right */ /* lucide:chevron-right */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im05IDE4bDYtNmwtNi02Ii8+PC9zdmc+"); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im05IDE4bDYtNmwtNi02Ii8+PC9zdmc+");
background-size: 1.5rem; background-size: 1.5rem;
} }
&:not(:empty)::after { &:not(:empty)::after {
@apply my-auto ml-auto h-6 w-6; @apply my-auto ml-auto h-6 w-6;
} }
} }
details[data-callout][open] > summary[data-callout-title]::after { details[data-callout][open] > summary[data-callout-title]::after {
/* lucide:chevron-down */ /* lucide:chevron-down */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im02IDlsNiA2bDYtNiIvPjwvc3ZnPg=="); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im02IDlsNiA2bDYtNiIvPjwvc3ZnPg==");
} }
[data-callout][data-callout-type="info"] { [data-callout][data-callout-type="info"] {
& { & {
@apply border-blue-600/20 bg-blue-400/20 dark:border-blue-800/20 dark:bg-blue-600/10; @apply border-blue-600/20 bg-blue-400/20 dark:border-blue-800/20 dark:bg-blue-600/10;
} }
& > [data-callout-title] { & > [data-callout-title] {
& { & {
@apply text-blue-500; @apply text-blue-500;
} }
&:empty::after { &:empty::after {
content: "Info"; content: "Info";
} }
&::before { &::before {
/* lucide:info */ /* lucide:info */
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTEyIDE2di00bTAtNGguMDEiLz48L2c+PC9zdmc+"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTEyIDE2di00bTAtNGguMDEiLz48L2c+PC9zdmc+");
} }
} }
} }
[data-callout][data-callout-type="todo"] { [data-callout][data-callout-type="todo"] {
& { & {
@apply border-blue-600/20 bg-blue-400/20 dark:border-blue-800/20 dark:bg-blue-600/10; @apply border-blue-600/20 bg-blue-400/20 dark:border-blue-800/20 dark:bg-blue-600/10;
} }
& > [data-callout-title] { & > [data-callout-title] {
& { & {
@apply text-blue-500; @apply text-blue-500;
} }
&:empty::after { &:empty::after {
content: "ToDo"; content: "ToDo";
} }
&::before { &::before {
/* lucide:circle-check-big */ /* lucide:circle-check-big */
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0yMiAxMS4wOFYxMmExMCAxMCAwIDEgMS01LjkzLTkuMTQiLz48cGF0aCBkPSJtOSAxMWwzIDNMMjIgNCIvPjwvZz48L3N2Zz4="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0yMiAxMS4wOFYxMmExMCAxMCAwIDEgMS01LjkzLTkuMTQiLz48cGF0aCBkPSJtOSAxMWwzIDNMMjIgNCIvPjwvZz48L3N2Zz4=");
} }
} }
} }
[data-callout][data-callout-type="abstract"], [data-callout][data-callout-type="abstract"],
[data-callout][data-callout-type="summary"], [data-callout][data-callout-type="summary"],
[data-callout][data-callout-type="tldr"] { [data-callout][data-callout-type="tldr"] {
& { & {
@apply border-cyan-600/20 bg-cyan-400/20 dark:border-cyan-800/20 dark:bg-cyan-600/10; @apply border-cyan-600/20 bg-cyan-400/20 dark:border-cyan-800/20 dark:bg-cyan-600/10;
} }
& > [data-callout-title] { & > [data-callout-title] {
& { & {
@apply text-cyan-500; @apply text-cyan-500;
} }
&::before { &::before {
/* lucide:clipboard-list */ /* lucide:clipboard-list */
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHJlY3Qgd2lkdGg9IjgiIGhlaWdodD0iNCIgeD0iOCIgeT0iMiIgcng9IjEiIHJ5PSIxIi8+PHBhdGggZD0iTTE2IDRoMmEyIDIgMCAwIDEgMiAydjE0YTIgMiAwIDAgMS0yIDJINmEyIDIgMCAwIDEtMi0yVjZhMiAyIDAgMCAxIDItMmgybTQgN2g0bS00IDVoNG0tOC01aC4wMU04IDE2aC4wMSIvPjwvZz48L3N2Zz4="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHJlY3Qgd2lkdGg9IjgiIGhlaWdodD0iNCIgeD0iOCIgeT0iMiIgcng9IjEiIHJ5PSIxIi8+PHBhdGggZD0iTTE2IDRoMmEyIDIgMCAwIDEgMiAydjE0YTIgMiAwIDAgMS0yIDJINmEyIDIgMCAwIDEtMi0yVjZhMiAyIDAgMCAxIDItMmgybTQgN2g0bS00IDVoNG0tOC01aC4wMU04IDE2aC4wMSIvPjwvZz48L3N2Zz4=");
} }
} }
} }
[data-callout][data-callout-type="abstract"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="abstract"]
content: "Abstract"; > [data-callout-title]:empty::after {
content: "Abstract";
} }
[data-callout][data-callout-type="summary"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="summary"]
content: "Summary"; > [data-callout-title]:empty::after {
content: "Summary";
} }
[data-callout][data-callout-type="tldr"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="tldr"] > [data-callout-title]:empty::after {
content: "TL;DR"; content: "TL;DR";
} }
[data-callout][data-callout-type="tip"], [data-callout][data-callout-type="tip"],
[data-callout][data-callout-type="hint"], [data-callout][data-callout-type="hint"],
[data-callout][data-callout-type="important"] { [data-callout][data-callout-type="important"] {
& { & {
@apply border-cyan-600/20 bg-cyan-400/20 dark:border-cyan-800/20 dark:bg-cyan-600/10; @apply border-cyan-600/20 bg-cyan-400/20 dark:border-cyan-800/20 dark:bg-cyan-600/10;
} }
& > [data-callout-title] { & > [data-callout-title] {
& { & {
@apply text-cyan-500; @apply text-cyan-500;
} }
&::before { &::before {
/* lucide:flame */ /* lucide:flame */
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTguNSAxNC41QTIuNSAyLjUgMCAwIDAgMTEgMTJjMC0xLjM4LS41LTItMS0zYy0xLjA3Mi0yLjE0My0uMjI0LTQuMDU0IDItNmMuNSAyLjUgMiA0LjkgNCA2LjVjMiAxLjYgMyAzLjUgMyA1LjVhNyA3IDAgMSAxLTE0IDBjMC0xLjE1My40MzMtMi4yOTQgMS0zYTIuNSAyLjUgMCAwIDAgMi41IDIuNSIvPjwvc3ZnPg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTguNSAxNC41QTIuNSAyLjUgMCAwIDAgMTEgMTJjMC0xLjM4LS41LTItMS0zYy0xLjA3Mi0yLjE0My0uMjI0LTQuMDU0IDItNmMuNSAyLjUgMiA0LjkgNCA2LjVjMiAxLjYgMyAzLjUgMyA1LjVhNyA3IDAgMSAxLTE0IDBjMC0xLjE1My40MzMtMi4yOTQgMS0zYTIuNSAyLjUgMCAwIDAgMi41IDIuNSIvPjwvc3ZnPg==");
} }
} }
} }
[data-callout][data-callout-type="tip"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="tip"] > [data-callout-title]:empty::after {
content: "Tip"; content: "Tip";
} }
[data-callout][data-callout-type="hint"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="hint"] > [data-callout-title]:empty::after {
content: "Hint"; content: "Hint";
} }
[data-callout][data-callout-type="important"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="important"]
content: "Important"; > [data-callout-title]:empty::after {
content: "Important";
} }
[data-callout][data-callout-type="success"], [data-callout][data-callout-type="success"],
[data-callout][data-callout-type="check"], [data-callout][data-callout-type="check"],
[data-callout][data-callout-type="done"] { [data-callout][data-callout-type="done"] {
& { & {
@apply border-green-600/20 bg-green-400/20 dark:border-green-800/20 dark:bg-green-600/10; @apply border-green-600/20 bg-green-400/20 dark:border-green-800/20 dark:bg-green-600/10;
} }
& > [data-callout-title] { & > [data-callout-title] {
& { & {
@apply text-green-500; @apply text-green-500;
} }
&::before { &::before {
/* lucide:check */ /* lucide:check */
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTIwIDZMOSAxN2wtNS01Ii8+PC9zdmc+"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTIwIDZMOSAxN2wtNS01Ii8+PC9zdmc+");
} }
} }
} }
[data-callout][data-callout-type="success"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="success"]
content: "Success"; > [data-callout-title]:empty::after {
content: "Success";
} }
[data-callout][data-callout-type="check"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="check"] > [data-callout-title]:empty::after {
content: "Check"; content: "Check";
} }
[data-callout][data-callout-type="done"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="done"] > [data-callout-title]:empty::after {
content: "Done"; content: "Done";
} }
[data-callout][data-callout-type="question"], [data-callout][data-callout-type="question"],
[data-callout][data-callout-type="help"], [data-callout][data-callout-type="help"],
[data-callout][data-callout-type="faq"] { [data-callout][data-callout-type="faq"] {
& { & {
@apply border-orange-600/20 bg-orange-400/20 dark:border-orange-800/20 dark:bg-orange-600/10; @apply border-orange-600/20 bg-orange-400/20 dark:border-orange-800/20 dark:bg-orange-600/10;
} }
& > [data-callout-title] { & > [data-callout-title] {
& { & {
@apply text-orange-500; @apply text-orange-500;
} }
&::before { &::before {
/* lucide:circle-help */ /* lucide:circle-help */
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48cGF0aCBkPSJNOS4wOSA5YTMgMyAwIDAgMSA1LjgzIDFjMCAyLTMgMy0zIDNtLjA4IDRoLjAxIi8+PC9nPjwvc3ZnPg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48cGF0aCBkPSJNOS4wOSA5YTMgMyAwIDAgMSA1LjgzIDFjMCAyLTMgMy0zIDNtLjA4IDRoLjAxIi8+PC9nPjwvc3ZnPg==");
} }
} }
} }
[data-callout][data-callout-type="question"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="question"]
content: "Question"; > [data-callout-title]:empty::after {
content: "Question";
} }
[data-callout][data-callout-type="help"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="help"] > [data-callout-title]:empty::after {
content: "Help"; content: "Help";
} }
[data-callout][data-callout-type="faq"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="faq"] > [data-callout-title]:empty::after {
content: "FAQ"; content: "FAQ";
} }
[data-callout][data-callout-type="warning"], [data-callout][data-callout-type="warning"],
[data-callout][data-callout-type="caution"], [data-callout][data-callout-type="caution"],
[data-callout][data-callout-type="attention"] { [data-callout][data-callout-type="attention"] {
& { & {
@apply border-orange-600/20 bg-orange-400/20 dark:border-orange-800/20 dark:bg-orange-600/10; @apply border-orange-600/20 bg-orange-400/20 dark:border-orange-800/20 dark:bg-orange-600/10;
} }
& > [data-callout-title] { & > [data-callout-title] {
& { & {
@apply text-orange-500; @apply text-orange-500;
} }
&::before { &::before {
/* lucide:triangle-alert */ /* lucide:triangle-alert */
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTIxLjczIDE4bC04LTE0YTIgMiAwIDAgMC0zLjQ4IDBsLTggMTRBMiAyIDAgMCAwIDQgMjFoMTZhMiAyIDAgMCAwIDEuNzMtM00xMiA5djRtMCA0aC4wMSIvPjwvc3ZnPg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTIxLjczIDE4bC04LTE0YTIgMiAwIDAgMC0zLjQ4IDBsLTggMTRBMiAyIDAgMCAwIDQgMjFoMTZhMiAyIDAgMCAwIDEuNzMtM00xMiA5djRtMCA0aC4wMSIvPjwvc3ZnPg==");
} }
} }
} }
[data-callout][data-callout-type="warning"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="warning"]
content: "Warning"; > [data-callout-title]:empty::after {
content: "Warning";
} }
[data-callout][data-callout-type="caution"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="caution"]
content: "Caution"; > [data-callout-title]:empty::after {
content: "Caution";
} }
[data-callout][data-callout-type="attention"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="attention"]
content: "Attention"; > [data-callout-title]:empty::after {
content: "Attention";
} }
[data-callout][data-callout-type="failure"], [data-callout][data-callout-type="failure"],
[data-callout][data-callout-type="fail"], [data-callout][data-callout-type="fail"],
[data-callout][data-callout-type="missing"] { [data-callout][data-callout-type="missing"] {
& { & {
@apply border-red-600/20 bg-red-400/20 dark:border-red-800/20 dark:bg-red-600/10; @apply border-red-600/20 bg-red-400/20 dark:border-red-800/20 dark:bg-red-600/10;
} }
& > [data-callout-title] { & > [data-callout-title] {
& { & {
@apply text-red-500; @apply text-red-500;
} }
&::before { &::before {
/* lucide:check */ /* lucide:check */
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTIwIDZMOSAxN2wtNS01Ii8+PC9zdmc+"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTIwIDZMOSAxN2wtNS01Ii8+PC9zdmc+");
} }
} }
} }
[data-callout][data-callout-type="failure"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="failure"]
content: "Failure"; > [data-callout-title]:empty::after {
content: "Failure";
} }
[data-callout][data-callout-type="fail"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="fail"] > [data-callout-title]:empty::after {
content: "Fail"; content: "Fail";
} }
[data-callout][data-callout-type="missing"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="missing"]
content: "Missing"; > [data-callout-title]:empty::after {
content: "Missing";
} }
[data-callout][data-callout-type="danger"], [data-callout][data-callout-type="danger"],
[data-callout][data-callout-type="error"] { [data-callout][data-callout-type="error"] {
& { & {
@apply border-red-600/20 bg-red-400/20 dark:border-red-800/20 dark:bg-red-600/10; @apply border-red-600/20 bg-red-400/20 dark:border-red-800/20 dark:bg-red-600/10;
} }
& > [data-callout-title] { & > [data-callout-title] {
& { & {
@apply text-red-500; @apply text-red-500;
} }
&::before { &::before {
/* lucide:zap */ /* lucide:zap */
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXphcCI+PHBhdGggZD0iTTQgMTRhMSAxIDAgMCAxLS43OC0xLjYzbDkuOS0xMC4yYS41LjUgMCAwIDEgLjg2LjQ2bC0xLjkyIDYuMDJBMSAxIDAgMCAwIDEzIDEwaDdhMSAxIDAgMCAxIC43OCAxLjYzbC05LjkgMTAuMmEuNS41IDAgMCAxLS44Ni0uNDZsMS45Mi02LjAyQTEgMSAwIDAgMCAxMSAxNHoiLz48L3N2Zz4="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXphcCI+PHBhdGggZD0iTTQgMTRhMSAxIDAgMCAxLS43OC0xLjYzbDkuOS0xMC4yYS41LjUgMCAwIDEgLjg2LjQ2bC0xLjkyIDYuMDJBMSAxIDAgMCAwIDEzIDEwaDdhMSAxIDAgMCAxIC43OCAxLjYzbC05LjkgMTAuMmEuNS41IDAgMCAxLS44Ni0uNDZsMS45Mi02LjAyQTEgMSAwIDAgMCAxMSAxNHoiLz48L3N2Zz4=");
} }
} }
} }
[data-callout][data-callout-type="danger"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="danger"] > [data-callout-title]:empty::after {
content: "Danger"; content: "Danger";
} }
[data-callout][data-callout-type="error"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="error"] > [data-callout-title]:empty::after {
content: "Error"; content: "Error";
} }
[data-callout][data-callout-type="bug"] { [data-callout][data-callout-type="bug"] {
& { & {
@apply border-red-600/20 bg-red-400/20 dark:border-red-800/20 dark:bg-red-600/10; @apply border-red-600/20 bg-red-400/20 dark:border-red-800/20 dark:bg-red-600/10;
} }
& > [data-callout-title] { & > [data-callout-title] {
& { & {
@apply text-red-500; @apply text-red-500;
} }
&::before { &::before {
/* lucide:bug */ /* lucide:bug */
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHBhdGggZD0ibTggMmwxLjg4IDEuODhtNC4yNCAwTDE2IDJNOSA3LjEzdi0xYTMuMDAzIDMuMDAzIDAgMSAxIDYgMHYxIi8+PHBhdGggZD0iTTEyIDIwYy0zLjMgMC02LTIuNy02LTZ2LTNhNCA0IDAgMCAxIDQtNGg0YTQgNCAwIDAgMSA0IDR2M2MwIDMuMy0yLjcgNi02IDZtMCAwdi05Ii8+PHBhdGggZD0iTTYuNTMgOUM0LjYgOC44IDMgNy4xIDMgNW0zIDhIMm0xIDhjMC0yLjEgMS43LTMuOSAzLjgtNE0yMC45NyA1YzAgMi4xLTEuNiAzLjgtMy41IDRNMjIgMTNoLTRtLS44IDRjMi4xLjEgMy44IDEuOSAzLjggNCIvPjwvZz48L3N2Zz4="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHBhdGggZD0ibTggMmwxLjg4IDEuODhtNC4yNCAwTDE2IDJNOSA3LjEzdi0xYTMuMDAzIDMuMDAzIDAgMSAxIDYgMHYxIi8+PHBhdGggZD0iTTEyIDIwYy0zLjMgMC02LTIuNy02LTZ2LTNhNCA0IDAgMCAxIDQtNGg0YTQgNCAwIDAgMSA0IDR2M2MwIDMuMy0yLjcgNi02IDZtMCAwdi05Ii8+PHBhdGggZD0iTTYuNTMgOUM0LjYgOC44IDMgNy4xIDMgNW0zIDhIMm0xIDhjMC0yLjEgMS43LTMuOSAzLjgtNE0yMC45NyA1YzAgMi4xLTEuNiAzLjgtMy41IDRNMjIgMTNoLTRtLS44IDRjMi4xLjEgMy44IDEuOSAzLjggNCIvPjwvZz48L3N2Zz4=");
} }
} }
} }
[data-callout][data-callout-type="bug"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="bug"] > [data-callout-title]:empty::after {
content: "Bug"; content: "Bug";
} }
[data-callout][data-callout-type="example"] { [data-callout][data-callout-type="example"] {
& { & {
@apply border-purple-600/20 bg-purple-400/20 dark:border-purple-800/20 dark:bg-purple-600/10; @apply border-purple-600/20 bg-purple-400/20 dark:border-purple-800/20 dark:bg-purple-600/10;
} }
& > [data-callout-title] { & > [data-callout-title] {
& { & {
@apply text-purple-500; @apply text-purple-500;
} }
&::before { &::before {
/* lucide:list */ /* lucide:list */
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTggNmgxM004IDEyaDEzTTggMThoMTNNMyA2aC4wMU0zIDEyaC4wMU0zIDE4aC4wMSIvPjwvc3ZnPg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTggNmgxM004IDEyaDEzTTggMThoMTNNMyA2aC4wMU0zIDEyaC4wMU0zIDE4aC4wMSIvPjwvc3ZnPg==");
} }
} }
} }
[data-callout][data-callout-type="example"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="example"]
content: "Example"; > [data-callout-title]:empty::after {
content: "Example";
} }
[data-callout][data-callout-type="quote"], [data-callout][data-callout-type="quote"],
[data-callout][data-callout-type="cite"] { [data-callout][data-callout-type="cite"] {
& { & {
@apply border-zinc-600/20 bg-zinc-400/20 dark:border-zinc-800/20 dark:bg-zinc-600/15; @apply border-zinc-600/20 bg-zinc-400/20 dark:border-zinc-800/20 dark:bg-zinc-600/15;
} }
& > [data-callout-title] { & > [data-callout-title] {
& { & {
@apply text-zinc-500; @apply text-zinc-500;
} }
&::before { &::before {
/* lucide:quote */ /* lucide:quote */
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTMgMjFjMyAwIDctMSA3LThWNWMwLTEuMjUtLjc1Ni0yLjAxNy0yLTJINGMtMS4yNSAwLTIgLjc1LTIgMS45NzJWMTFjMCAxLjI1Ljc1IDIgMiAyYzEgMCAxIDAgMSAxdjFjMCAxLTEgMi0yIDJzLTEgLjAwOC0xIDEuMDMxVjIwYzAgMSAwIDEgMSAxbTEyIDBjMyAwIDctMSA3LThWNWMwLTEuMjUtLjc1Ny0yLjAxNy0yLTJoLTRjLTEuMjUgMC0yIC43NS0yIDEuOTcyVjExYzAgMS4yNS43NSAyIDIgMmguNzVjMCAyLjI1LjI1IDQtMi43NSA0djNjMCAxIDAgMSAxIDEiLz48L3N2Zz4="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTMgMjFjMyAwIDctMSA3LThWNWMwLTEuMjUtLjc1Ni0yLjAxNy0yLTJINGMtMS4yNSAwLTIgLjc1LTIgMS45NzJWMTFjMCAxLjI1Ljc1IDIgMiAyYzEgMCAxIDAgMSAxdjFjMCAxLTEgMi0yIDJzLTEgLjAwOC0xIDEuMDMxVjIwYzAgMSAwIDEgMSAxbTEyIDBjMyAwIDctMSA3LThWNWMwLTEuMjUtLjc1Ny0yLjAxNy0yLTJoLTRjLTEuMjUgMC0yIC43NS0yIDEuOTcyVjExYzAgMS4yNS43NSAyIDIgMmguNzVjMCAyLjI1LjI1IDQtMi43NSA0djNjMCAxIDAgMSAxIDEiLz48L3N2Zz4=");
} }
} }
} }
[data-callout][data-callout-type="quote"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="quote"] > [data-callout-title]:empty::after {
content: "Quote"; content: "Quote";
} }
[data-callout][data-callout-type="cite"] > [data-callout-title]:empty::after { [data-callout][data-callout-type="cite"] > [data-callout-title]:empty::after {
content: "Cite"; content: "Cite";
} }

View file

@ -3,114 +3,114 @@
@tailwind utilities; @tailwind utilities;
html { html {
overflow-y: auto; overflow-y: auto;
color-scheme: light; color-scheme: light;
scroll-padding-top: 100px; scroll-padding-top: 100px;
} }
html.dark { html.dark {
color-scheme: dark; color-scheme: dark;
} }
html, html,
body { body {
@apply size-full; @apply size-full;
} }
body { body {
@apply font-sans antialiased; @apply font-sans antialiased;
@apply flex flex-col; @apply flex flex-col;
@apply bg-neutral-100 dark:bg-neutral-900; @apply bg-neutral-100 dark:bg-neutral-900;
@apply text-black/75 dark:text-white/75; @apply text-black/75 dark:text-white/75;
} }
header { header {
@apply fixed left-0 right-0 top-0 z-50 py-6; @apply fixed left-0 right-0 top-0 z-50 py-6;
@apply bg-neutral-100/75 dark:bg-neutral-900/75; @apply bg-neutral-100/75 dark:bg-neutral-900/75;
@apply saturate-200 backdrop-blur-sm; @apply saturate-200 backdrop-blur-sm;
} }
main { main {
@apply flex-1 py-10; @apply flex-1 py-10;
} }
footer { footer {
@apply py-6 text-sm; @apply py-6 text-sm;
} }
article { article {
@apply prose prose-neutral max-w-full dark:prose-invert prose-img:mx-auto prose-img:my-auto; @apply prose prose-neutral max-w-full dark:prose-invert prose-img:mx-auto prose-img:my-auto;
@apply prose-headings:font-semibold; @apply prose-headings:font-semibold;
@apply prose-headings:text-black prose-headings:dark:text-white; @apply prose-headings:text-black prose-headings:dark:text-white;
} }
@layer utilities { @layer utilities {
article a { article a {
@apply font-sans text-current underline underline-offset-[3px]; @apply font-sans text-current underline underline-offset-[3px];
@apply decoration-black/30 dark:decoration-white/30; @apply decoration-black/30 dark:decoration-white/30;
@apply transition-colors duration-300 ease-in-out; @apply transition-colors duration-300 ease-in-out;
} }
article a:hover { article a:hover {
@apply text-black dark:text-white; @apply text-black dark:text-white;
@apply decoration-black/50 dark:decoration-white/50; @apply decoration-black/50 dark:decoration-white/50;
} }
} }
.animate { .animate {
@apply -translate-y-3 opacity-0; @apply -translate-y-3 opacity-0;
@apply transition-all duration-300 ease-out; @apply transition-all duration-300 ease-out;
} }
.animate.show { .animate.show {
@apply translate-y-0 opacity-100; @apply translate-y-0 opacity-100;
} }
html #back-to-top { html #back-to-top {
@apply pointer-events-none opacity-0; @apply pointer-events-none opacity-0;
} }
html.scrolled #back-to-top { html.scrolled #back-to-top {
@apply pointer-events-auto opacity-100; @apply pointer-events-auto opacity-100;
} }
pre { pre {
@apply border border-black/15 py-5 dark:border-white/20; @apply border border-black/15 py-5 dark:border-white/20;
} }
:root { :root {
--astro-code-foreground: #09090b; --astro-code-foreground: #09090b;
--astro-code-background: #fafafa; --astro-code-background: #fafafa;
--astro-code-token-comment: #a19595; --astro-code-token-comment: #a19595;
--astro-code-token-keyword: #f47067; --astro-code-token-keyword: #f47067;
--astro-code-token-string: #00a99a; --astro-code-token-string: #00a99a;
--astro-code-token-function: #429996; --astro-code-token-function: #429996;
--astro-code-token-constant: #2b70c5; --astro-code-token-constant: #2b70c5;
--astro-code-token-parameter: #4e8fdf; --astro-code-token-parameter: #4e8fdf;
--astro-code-token-string-expression: #ae42a0; --astro-code-token-string-expression: #ae42a0;
--astro-code-token-punctuation: #8996a3; --astro-code-token-punctuation: #8996a3;
--astro-code-token-link: #8d85ff; --astro-code-token-link: #8d85ff;
} }
.dark { .dark {
--astro-code-foreground: #fafafa; --astro-code-foreground: #fafafa;
--astro-code-background: #09090b; --astro-code-background: #09090b;
--astro-code-token-comment: #a19595; --astro-code-token-comment: #a19595;
--astro-code-token-keyword: #f47067; --astro-code-token-keyword: #f47067;
--astro-code-token-string: #00a99a; --astro-code-token-string: #00a99a;
--astro-code-token-function: #6eafad; --astro-code-token-function: #6eafad;
--astro-code-token-constant: #b3cceb; --astro-code-token-constant: #b3cceb;
--astro-code-token-parameter: #4e8fdf; --astro-code-token-parameter: #4e8fdf;
--astro-code-token-string-expression: #bf7db6; --astro-code-token-string-expression: #bf7db6;
--astro-code-token-punctuation: #8996a3; --astro-code-token-punctuation: #8996a3;
--astro-code-token-link: #8d85ff; --astro-code-token-link: #8d85ff;
} }
.copy-code { .copy-code {
@apply absolute right-3 top-3 grid size-9 place-content-center rounded border border-black/15 bg-neutral-100 text-center duration-300 ease-in-out dark:border-white/20 dark:bg-neutral-900; @apply absolute right-3 top-3 grid size-9 place-content-center rounded border border-black/15 bg-neutral-100 text-center duration-300 ease-in-out dark:border-white/20 dark:bg-neutral-900;
} }
.copy-code:hover { .copy-code:hover {
@apply bg-[#E9E9E9] transition-colors dark:bg-[#232323]; @apply bg-[#E9E9E9] transition-colors dark:bg-[#232323];
} }
.copy-code:active { .copy-code:active {
@apply scale-90 transition-transform; @apply scale-90 transition-transform;
} }

View file

@ -1,7 +1,7 @@
export type Site = { export type Site = {
TITLE: string; TITLE: string;
DESCRIPTION: string; DESCRIPTION: string;
}; };
export type Metadata = { export type Metadata = {
TITLE: string; TITLE: string;
}; };

View file

@ -1,15 +1,15 @@
import defaultTheme from "tailwindcss/defaultTheme"; import defaultTheme from "tailwindcss/defaultTheme";
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
darkMode: "class", darkMode: "class",
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: {
fontFamily: { fontFamily: {
sans: ["Geist Sans", ...defaultTheme.fontFamily.sans], sans: ["Geist Sans", ...defaultTheme.fontFamily.sans],
mono: ["Geist Mono", ...defaultTheme.fontFamily.mono], mono: ["Geist Mono", ...defaultTheme.fontFamily.mono],
}, },
}, },
}, },
plugins: [require("@tailwindcss/typography")], plugins: [require("@tailwindcss/typography")],
}; };

View file

@ -1,12 +1,12 @@
{ {
"extends": "astro/tsconfigs/strict", "extends": "astro/tsconfigs/strict",
"include": [".astro/types.d.ts", "**/*"], "include": [".astro/types.d.ts", "**/*"],
"exclude": ["dist"], "exclude": ["dist"],
"compilerOptions": { "compilerOptions": {
"strictNullChecks": true, "strictNullChecks": true,
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@*": ["./src/*"] "@*": ["./src/*"]
} }
} }
} }