diff --git a/.vscode/launch.json b/.vscode/launch.json index d642209..230708d 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -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" + } + ] } diff --git a/astro.config.ts b/astro.config.ts index bc5be0b..0c14c5c 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -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, - ], - } -}); \ No newline at end of file + 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], + }, +}); diff --git a/biome.json b/biome.json new file mode 100644 index 0000000..427986d --- /dev/null +++ b/biome.json @@ -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" + } + } + } + } + ] +} diff --git a/bun.lockb b/bun.lockb index a083ab2..a331ca4 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/dist/artix-install-guide/index.html b/dist/artix-install-guide/index.html index ec50e88..1dab97e 100644 --- a/dist/artix-install-guide/index.html +++ b/dist/artix-install-guide/index.html @@ -209,7 +209,7 @@ var head = document.querySelector("head") head.appendChild(script) })() -
+
•
10 min read

Artix Linux install guide

Table of Contents

Introduction

diff --git a/package.json b/package.json index fc232d0..8fd26ed 100644 --- a/package.json +++ b/package.json @@ -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"] } diff --git a/src/components/ArrowCard.astro b/src/components/ArrowCard.astro index 9574dc9..7bd7db5 100644 --- a/src/components/ArrowCard.astro +++ b/src/components/ArrowCard.astro @@ -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">; }; --- diff --git a/src/components/BackToTop.astro b/src/components/BackToTop.astro index 829f124..ba20fd2 100644 --- a/src/components/BackToTop.astro +++ b/src/components/BackToTop.astro @@ -1,7 +1,3 @@ ---- - ---- -
diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 239f038..8bc26f1 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -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"; --- diff --git a/src/components/FormattedDate.astro b/src/components/FormattedDate.astro index ee266ae..2c43400 100644 --- a/src/components/FormattedDate.astro +++ b/src/components/FormattedDate.astro @@ -1,6 +1,6 @@ --- interface Props { - date: Date; + date: Date; } const { date } = Astro.props; diff --git a/src/components/Head.astro b/src/components/Head.astro index 8796e5c..0c30419 100644 --- a/src/components/Head.astro +++ b/src/components/Head.astro @@ -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; diff --git a/src/components/Link.astro b/src/components/Link.astro index d4ed5e8..414e5a3 100644 --- a/src/components/Link.astro +++ b/src/components/Link.astro @@ -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; --- diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro index cd36334..9578fb2 100644 --- a/src/components/TableOfContents.astro +++ b/src/components/TableOfContents.astro @@ -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; } --- diff --git a/src/components/TableOfContentsHeading.astro b/src/components/TableOfContentsHeading.astro index 1b8931f..bb4a591 100644 --- a/src/components/TableOfContentsHeading.astro +++ b/src/components/TableOfContentsHeading.astro @@ -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; --- diff --git a/src/consts.ts b/src/consts.ts index 60718a7..b6f3379 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -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", }; - diff --git a/src/content.config.ts b/src/content.config.ts index 6163f73..1a99685 100644 --- a/src/content.config.ts +++ b/src/content.config.ts @@ -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 }; diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index a4d8bcc..a5cdc3e 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -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; diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 294b335..39246bf 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -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`; } diff --git a/src/pages/404.astro b/src/pages/404.astro index 04dd251..faa21f4 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -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"; --- diff --git a/src/pages/[...id].astro b/src/pages/[...id].astro index 4ed3241..6a86ae2 100644 --- a/src/pages/[...id].astro +++ b/src/pages/[...id].astro @@ -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(); diff --git a/src/pages/index.astro b/src/pages/index.astro index 2061916..2a8c6ae 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -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), +); --- diff --git a/src/pages/rss.xml.js b/src/pages/rss.xml.js index abd5110..7b21164 100644 --- a/src/pages/rss.xml.js +++ b/src/pages/rss.xml.js @@ -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}/`, + })), + }); } diff --git a/src/styles/callout.css b/src/styles/callout.css index 98cfacb..5529635 100644 --- a/src/styles/callout.css +++ b/src/styles/callout.css @@ -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"; -} \ No newline at end of file + content: "Cite"; +} diff --git a/src/styles/global.css b/src/styles/global.css index cfffdfa..0f1c3b0 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -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; } diff --git a/src/types.ts b/src/types.ts index 11b6c55..8e08d91 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,7 +1,7 @@ export type Site = { - TITLE: string; - DESCRIPTION: string; + TITLE: string; + DESCRIPTION: string; }; export type Metadata = { - TITLE: string; -}; \ No newline at end of file + TITLE: string; +}; diff --git a/tailwind.config.mjs b/tailwind.config.mjs index 25f1f15..fd16b4b 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -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")], }; diff --git a/tsconfig.json b/tsconfig.json index 101caaa..d0935a9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -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/*"] + } + } }