z0x/blog.z0x.ca
Code Actions

refactor(all): biomejs

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

18
.vscode/launch.json vendored
View file

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

41
astro.config.ts
View file

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

Binary file not shown.

2
dist/artix-install-guide/index.html vendored
View file

File diff suppressed because one or more lines are too long

58
package.json
View file

@ -1,30 +1,32 @@
{
"name": "blog.z0x.ca",
"type": "module",
"version": "1.0.0",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro check && astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/check": "^0.9.4",
"@astrojs/rss": "^4.0.11",
"@astrojs/sitemap": "^3.2.1",
"@astrojs/tailwind": "^5.1.4",
"@fontsource/geist-mono": "^5.1.1",
"@fontsource/geist-sans": "^5.1.0",
"@r4ai/remark-callout": "^0.6.2",
"@yeskunall/astro-umami": "^0.0.3",
"astro": "^5.1.5",
"clsx": "^2.1.1",
"tailwind-merge": "^2.6.0",
"tailwindcss": "^3.4.17",
"typescript": "^5.7.3"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.16"
}
"name": "blog.z0x.ca",
"type": "module",
"version": "1.0.0",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro check && astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/check": "^0.9.4",
"@astrojs/rss": "^4.0.11",
"@astrojs/sitemap": "^3.2.1",
"@astrojs/tailwind": "^5.1.4",
"@fontsource/geist-mono": "^5.1.1",
"@fontsource/geist-sans": "^5.1.0",
"@r4ai/remark-callout": "^0.6.2",
"@yeskunall/astro-umami": "^0.0.3",
"astro": "^5.1.5",
"clsx": "^2.1.1",
"tailwind-merge": "^2.6.0",
"tailwindcss": "^3.4.17",
"typescript": "^5.7.3"
},
"devDependencies": {
"@biomejs/biome": "1.9.4",
"@tailwindcss/typography": "^0.5.16"
},
"trustedDependencies": ["@biomejs/biome"]
}

4
src/components/ArrowCard.astro
View file

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

4
src/components/BackToTop.astro
View file

@ -1,7 +1,3 @@
---
---
<button
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"

8
src/components/Callout.astro
View file

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

4
src/components/Container.astro
View file

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

2
src/components/Footer.astro
View file

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

2
src/components/FormattedDate.astro
View file

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

6
src/components/Head.astro
View file

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

18
src/components/Link.astro
View file

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

30
src/components/TableOfContents.astro
View file

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

2
src/components/TableOfContentsHeading.astro
View file

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

7
src/consts.ts
View file

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

16
src/content.config.ts
View file

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

6
src/layouts/Layout.astro
View file

@ -1,11 +1,11 @@
---
import Head from "@components/Head.astro";
import Footer from "@components/Footer.astro";
import Head from "@components/Head.astro";
import { SITE } from "@consts";
type Props = {
title: string;
description: string;
title: string;
description: string;
};
const { title, description } = Astro.props;

12
src/lib/utils.ts
View file

@ -1,13 +1,13 @@
import { clsx, type ClassValue } from "clsx";
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
return twMerge(clsx(inputs));
}
export function readingTime(html: string) {
const textOnly = html.replace(/<[^>]+>/g, "");
const wordCount = textOnly.split(/\s+/).length;
const readingTimeMinutes = (wordCount / 200 + 1).toFixed();
return `${readingTimeMinutes} min read`;
const textOnly = html.replace(/<[^>]+>/g, "");
const wordCount = textOnly.split(/\s+/).length;
const readingTimeMinutes = (wordCount / 200 + 1).toFixed();
return `${readingTimeMinutes} min read`;
}

2
src/pages/404.astro
View file

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

48
src/pages/[...id].astro
View file

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

26
src/pages/index.astro
View file

@ -1,27 +1,31 @@
---
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 Container from "@components/Container.astro";
import { SITE } 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 = {
[year: string]: CollectionEntry<"blog">[];
[year: string]: CollectionEntry<"blog">[];
};
const posts = data.reduce((acc: Acc, post) => {
const year = post.data.date.getFullYear().toString();
if (!acc[year]) {
acc[year] = [];
}
acc[year].push(post);
return acc;
const year = post.data.date.getFullYear().toString();
if (!acc[year]) {
acc[year] = [];
}
acc[year].push(post);
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}>

33
src/pages/rss.xml.js
View file

@ -1,24 +1,23 @@
import { getCollection } from "astro:content";
import rss from "@astrojs/rss";
import { SITE } from "@consts";
import { getCollection } from "astro:content";
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(
(a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf(),
);
return rss({
title: SITE.TITLE,
description: SITE.DESCRIPTION,
site: context.site,
items: items.map((item) => ({
title: item.data.title,
description: item.data.description,
pubDate: item.data.date,
link: `/${item.id}/`,
})),
});
return rss({
title: SITE.TITLE,
description: SITE.DESCRIPTION,
site: context.site,
items: items.map((item) => ({
title: item.data.title,
description: item.data.description,
pubDate: item.data.date,
link: `/${item.id}/`,
})),
});
}

469
src/styles/callout.css
View file

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

114
src/styles/global.css
View file

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

6
src/types.ts
View file

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

22
tailwind.config.mjs
View file

@ -1,15 +1,15 @@
import defaultTheme from "tailwindcss/defaultTheme";
/** @type {import('tailwindcss').Config} */
export default {
darkMode: "class",
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
extend: {
fontFamily: {
sans: ["Geist Sans", ...defaultTheme.fontFamily.sans],
mono: ["Geist Mono", ...defaultTheme.fontFamily.mono],
},
},
},
plugins: [require("@tailwindcss/typography")],
darkMode: "class",
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
extend: {
fontFamily: {
sans: ["Geist Sans", ...defaultTheme.fontFamily.sans],
mono: ["Geist Mono", ...defaultTheme.fontFamily.mono],
},
},
},
plugins: [require("@tailwindcss/typography")],
};

20
tsconfig.json
View file

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