youwen5/site
1
0
Fork 0
mirror of https://github.com/youwen5/site.git synced 2024-11-24 17:33:51 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: use spaces and no semicolons in JS

Browse source
This commit is contained in:
Youwen Wu 2024-05-05 10:59:14 -07:00
parent 56c82574ec
commit 5e1af688ea
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
121 changed files with 3603 additions and 3603 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
.eslintrc.cjs
View file

@ -1,31 +1,31 @@
/** @type { import("eslint").Linter.Config } */
module.exports = {
root: true,
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:svelte/recommended',
'prettier'
],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020,
extraFileExtensions: ['.svelte']
},
env: {
browser: true,
es2017: true,
node: true
},
overrides: [
{
files: ['*.svelte'],
parser: 'svelte-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser'
}
}
]
};
root: true,
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:svelte/recommended',
'prettier'
],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020,
extraFileExtensions: ['.svelte']
},
env: {
browser: true,
es2017: true,
node: true
},
overrides: [
{
files: ['*.svelte'],
parser: 'svelte-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser'
}
}
]
}

3
.prettierrc.toml
View file

@ -1,7 +1,8 @@
overrides = [{ "files" = "*.svelte", "options" = { "parser" = "svelte" } }]
useTabs = true
useTabs = false
singleQuote = true
trailingComma = "none"
printWidth = 100
proseWrap = "always"
plugins = ["prettier-plugin-svelte"]
semi = false

4
.vscode/settings.json vendored
View file

@ -1,4 +1,4 @@
{
"css.customData": [".vscode/tailwind.json"],
"scss.lint.unknownAtRules": "ignore"
"css.customData": [".vscode/tailwind.json"],
"scss.lint.unknownAtRules": "ignore"
}

106
.vscode/tailwind.json vendored
View file

@ -1,55 +1,55 @@
{
"version": 1.1,
"atDirectives": [
{
"name": "@tailwind",
"description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
}
]
},
{
"name": "@apply",
"description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#apply"
}
]
},
{
"name": "@responsive",
"description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
}
]
},
{
"name": "@screen",
"description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#screen"
}
]
},
{
"name": "@variants",
"description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#variants"
}
]
}
]
"version": 1.1,
"atDirectives": [
{
"name": "@tailwind",
"description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
}
]
},
{
"name": "@apply",
"description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#apply"
}
]
},
{
"name": "@responsive",
"description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
}
]
},
{
"name": "@screen",
"description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#screen"
}
]
},
{
"name": "@variants",
"description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#variants"
}
]
}
]
}

24
components.json
View file

@ -1,14 +1,14 @@
{
"$schema": "https://shadcn-svelte.com/schema.json",
"style": "new-york",
"tailwind": {
"config": "tailwind.config.js",
"css": "src/lib/app.pcss",
"baseColor": "zinc"
},
"aliases": {
"components": "$lib/components",
"utils": "$lib/utils"
},
"typescript": true
"$schema": "https://shadcn-svelte.com/schema.json",
"style": "new-york",
"tailwind": {
"config": "tailwind.config.js",
"css": "src/lib/app.pcss",
"baseColor": "zinc"
},
"aliases": {
"components": "$lib/components",
"utils": "$lib/utils"
},
"typescript": true
}

146
package.json
View file

@ -1,75 +1,75 @@
{
"name": "coredump",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"test": "playwright test",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"format": "prettier --write ."
},
"devDependencies": {
"@playwright/test": "^1.28.1",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/eslint": "^8.56.0",
"@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^7.0.0",
"autoprefixer": "^10.4.19",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1",
"postcss": "^8.4.38",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
"svelte": "^4.2.7",
"svelte-check": "^3.6.0",
"svelte-typewriter": "^3.2.3",
"tailwindcss": "^3.4.3",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.3"
},
"type": "module",
"trustedDependencies": [
"svelte-preprocess",
"@sveltejs/kit",
"esbuild",
"@sveltejs/adapter-vercel"
],
"dependencies": {
"@fontsource/geist-mono": "^5.0.2",
"@fontsource/geist-sans": "^5.0.2",
"@fontsource/merriweather": "^5.0.12",
"@fontsource/zilla-slab": "^5.0.12",
"@svelte-put/toc": "^5.0.1",
"@sveltejs/adapter-vercel": "^5.2.0",
"@types/node": "^20.12.5",
"bits-ui": "^0.21.2",
"clsx": "^2.1.0",
"coredump": "link:",
"dayjs": "^1.11.10",
"mode-watcher": "^0.3.0",
"rehype-highlight": "^7.0.0",
"rehype-katex": "^7.0.0",
"rehype-stringify": "^10.0.0",
"remark-gfm": "^4.0.0",
"remark-gh-alerts": "^0.0.3",
"remark-math": "^6.0.0",
"remark-parse": "^11.0.0",
"remark-rehype": "^11.1.0",
"remark-sectionize": "^2.0.0",
"svelte-radix": "^1.1.0",
"svelte-sonner": "^0.3.21",
"tailwind-merge": "^2.2.2",
"tailwind-variants": "^0.2.1",
"toml": "^3.0.0",
"unified": "^11.0.4",
"vaul-svelte": "^0.3.0"
},
"packageManager": "pnpm@8.15.5+sha1.a58c038faac410c947dbdb93eb30994037d0fce2"
"name": "coredump",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"test": "playwright test",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"format": "prettier --write ."
},
"devDependencies": {
"@playwright/test": "^1.28.1",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/eslint": "^8.56.0",
"@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^7.0.0",
"autoprefixer": "^10.4.19",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1",
"postcss": "^8.4.38",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
"svelte": "^4.2.7",
"svelte-check": "^3.6.0",
"svelte-typewriter": "^3.2.3",
"tailwindcss": "^3.4.3",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.3"
},
"type": "module",
"trustedDependencies": [
"svelte-preprocess",
"@sveltejs/kit",
"esbuild",
"@sveltejs/adapter-vercel"
],
"dependencies": {
"@fontsource/geist-mono": "^5.0.2",
"@fontsource/geist-sans": "^5.0.2",
"@fontsource/merriweather": "^5.0.12",
"@fontsource/zilla-slab": "^5.0.12",
"@svelte-put/toc": "^5.0.1",
"@sveltejs/adapter-vercel": "^5.2.0",
"@types/node": "^20.12.5",
"bits-ui": "^0.21.2",
"clsx": "^2.1.0",
"coredump": "link:",
"dayjs": "^1.11.10",
"mode-watcher": "^0.3.0",
"rehype-highlight": "^7.0.0",
"rehype-katex": "^7.0.0",
"rehype-stringify": "^10.0.0",
"remark-gfm": "^4.0.0",
"remark-gh-alerts": "^0.0.3",
"remark-math": "^6.0.0",
"remark-parse": "^11.0.0",
"remark-rehype": "^11.1.0",
"remark-sectionize": "^2.0.0",
"svelte-radix": "^1.1.0",
"svelte-sonner": "^0.3.21",
"tailwind-merge": "^2.2.2",
"tailwind-variants": "^0.2.1",
"toml": "^3.0.0",
"unified": "^11.0.4",
"vaul-svelte": "^0.3.0"
},
"packageManager": "pnpm@8.15.5+sha1.a58c038faac410c947dbdb93eb30994037d0fce2"
}

18
playwright.config.ts
View file

@ -1,12 +1,12 @@
import type { PlaywrightTestConfig } from '@playwright/test';
import type { PlaywrightTestConfig } from '@playwright/test'
const config: PlaywrightTestConfig = {
webServer: {
command: 'npm run build && npm run preview',
port: 4173
},
testDir: 'tests',
testMatch: /(.+\.)?(test|spec)\.[jt]s/
};
webServer: {
command: 'npm run build && npm run preview',
port: 4173
},
testDir: 'tests',
testMatch: /(.+\.)?(test|spec)\.[jt]s/
}
export default config;
export default config

176
post.schema.json
View file

@ -1,90 +1,90 @@
{
"$schema": "http://json-schema.org/draft-07/schema#",
"type": "object",
"properties": {
"title": {
"type": "string"
},
"manifest": {
"type": "object",
"properties": {
"date": {
"type": "string",
"format": "date-time"
},
"blurb": {
"type": "string"
},
"description": {
"type": "string"
},
"type": {
"type": "string"
},
"authors": {
"type": "array",
"items": {
"type": "string"
}
},
"tags": {
"type": "object",
"properties": {
"primary": {
"type": "array",
"items": {
"type": "string"
}
},
"secondary": {
"type": "array",
"items": {
"type": "string"
}
}
},
"required": ["primary", "secondary"]
}
},
"required": ["date", "blurb", "description", "type", "authors", "tags"]
},
"cover": {
"type": "object",
"properties": {
"src": {
"type": "string",
"format": "uri"
},
"alt": {
"type": "string"
},
"caption": {
"type": "string"
}
},
"required": ["src", "alt", "caption"]
}
},
"required": ["title", "manifest", "cover"],
"optional": {
"type": "object",
"properties": {
"deps": {
"type": "object",
"properties": {
"external": {
"type": "object",
"properties": {
"styles": {
"type": "array",
"items": {
"type": "string"
}
}
}
}
}
}
}
}
"$schema": "http://json-schema.org/draft-07/schema#",
"type": "object",
"properties": {
"title": {
"type": "string"
},
"manifest": {
"type": "object",
"properties": {
"date": {
"type": "string",
"format": "date-time"
},
"blurb": {
"type": "string"
},
"description": {
"type": "string"
},
"type": {
"type": "string"
},
"authors": {
"type": "array",
"items": {
"type": "string"
}
},
"tags": {
"type": "object",
"properties": {
"primary": {
"type": "array",
"items": {
"type": "string"
}
},
"secondary": {
"type": "array",
"items": {
"type": "string"
}
}
},
"required": ["primary", "secondary"]
}
},
"required": ["date", "blurb", "description", "type", "authors", "tags"]
},
"cover": {
"type": "object",
"properties": {
"src": {
"type": "string",
"format": "uri"
},
"alt": {
"type": "string"
},
"caption": {
"type": "string"
}
},
"required": ["src", "alt", "caption"]
}
},
"required": ["title", "manifest", "cover"],
"optional": {
"type": "object",
"properties": {
"deps": {
"type": "object",
"properties": {
"external": {
"type": "object",
"properties": {
"styles": {
"type": "array",
"items": {
"type": "string"
}
}
}
}
}
}
}
}
}

10
postcss.config.js
View file

@ -1,6 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
};
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}

16
src/app.d.ts vendored
View file

@ -1,13 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};
export {}

38
src/app.html
View file

@ -1,22 +1,22 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<link
rel="icon"
href="%sveltekit.assets%/favicon-light.ico"
media="(prefers-color-scheme: light)"
/>
<link
rel="icon"
href="%sveltekit.assets%/favicon-dark.ico"
media="(prefers-color-scheme: dark)"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<link
rel="icon"
href="%sveltekit.assets%/favicon-light.ico"
media="(prefers-color-scheme: light)"
/>
<link
rel="icon"
href="%sveltekit.assets%/favicon-dark.ico"
media="(prefers-color-scheme: dark)"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

60
src/globals.d.ts vendored
View file

@ -1,35 +1,35 @@
interface BlogDocument {
date: Date;
title: string;
content: string;
primaryTags: string[];
secondaryTags: string[];
blurb: string;
image: { src: string; alt: string; caption: string };
description: string;
slug: string;
date: Date
title: string
content: string
primaryTags: string[]
secondaryTags: string[]
blurb: string
image: { src: string; alt: string; caption: string }
description: string
slug: string
}
declare module 'remark-sectionize';
declare module 'remark-sectionize'
type PostMeta = {
title: string;
manifest: {
authors: string[];
date: Date;
tags: { primary: string[]; secondary: string[] };
blurb: string;
description: string;
highlight: boolean;
};
cover: {
src: string;
alt: string;
caption: string;
};
deps?: {
external?: {
styles?: string[];
};
};
};
title: string
manifest: {
authors: string[]
date: Date
tags: { primary: string[]; secondary: string[] }
blurb: string
description: string
highlight: boolean
}
cover: {
src: string
alt: string
caption: string
}
deps?: {
external?: {
styles?: string[]
}
}
}

162
src/lib/app.pcss
View file

@ -3,112 +3,112 @@
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 93%;
--foreground: 240 10% 3.9%;
:root {
--background: 0 0% 93%;
--foreground: 240 10% 3.9%;
--muted: 240 4.8% 90%;
--muted-foreground: 240 3.8% 46.1%;
--muted: 240 4.8% 90%;
--muted-foreground: 240 3.8% 46.1%;
--popover: 0 0% 96%;
--popover-foreground: 240 10% 3.9%;
--popover: 0 0% 96%;
--popover-foreground: 240 10% 3.9%;
--card: 0 0% 96%;
--card-foreground: 240 10% 3.9%;
--card: 0 0% 96%;
--card-foreground: 240 10% 3.9%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 90%;
--secondary-foreground: 240 5.9% 12%;
--secondary: 240 4.8% 90%;
--secondary-foreground: 240 5.9% 12%;
--accent: 240 4.8% 90%;
--accent-foreground: 240 5.9% 12%;
--accent: 240 4.8% 90%;
--accent-foreground: 240 5.9% 12%;
--destructive: 0 72.2% 50.6%;
--destructive-foreground: 0 0% 98%;
--destructive: 0 72.2% 50.6%;
--destructive-foreground: 0 0% 98%;
--ring: 240 10% 3.9%;
--ring: 240 10% 3.9%;
--radius: 0.5rem;
--radius: 0.5rem;
--cursor-color: theme('colors.foreground');
}
--cursor-color: theme('colors.foreground');
}
.dark {
--background: 240 10% 7%;
--foreground: 0 0% 98%;
.dark {
--background: 240 10% 7%;
--foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--popover: 240 10% 6%;
--popover-foreground: 0 0% 98%;
--popover: 240 10% 6%;
--popover-foreground: 0 0% 98%;
--card: 240 10% 6%;
--card-foreground: 0 0% 98%;
--card: 240 10% 6%;
--card-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--ring: 240 4.9% 83.9%;
}
--ring: 240 4.9% 83.9%;
}
}
@layer base {
* {
@apply border-border;
}
html.smoothscroll {
scroll-behavior: smooth;
}
body {
@apply bg-background text-foreground;
font-family:
Geist Sans,
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Open Sans',
'Helvetica Neue',
sans-serif;
}
* {
@apply border-border;
}
html.smoothscroll {
scroll-behavior: smooth;
}
body {
@apply bg-background text-foreground;
font-family:
Geist Sans,
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Open Sans',
'Helvetica Neue',
sans-serif;
}
}
@layer components {
.dots-background {
--dot-bg: theme('colors.background');
--dot-color: theme('colors.muted.foreground');
--dot-size: 1px;
--dot-space: 22px;
background:
linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%)
center / var(--dot-space) var(--dot-space),
linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center /
var(--dot-space) var(--dot-space),
var(--dot-color);
}
.link {
@apply text-blue-500 dark:text-blue-600 hover:text-blue-600 dark:hover:text-blue-500 hover:underline visited:text-purple-500 dark:visited:text-purple-600;
}
.dots-background {
--dot-bg: theme('colors.background');
--dot-color: theme('colors.muted.foreground');
--dot-size: 1px;
--dot-space: 22px;
background:
linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%)
center / var(--dot-space) var(--dot-space),
linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center /
var(--dot-space) var(--dot-space),
var(--dot-color);
}
.link {
@apply text-blue-500 dark:text-blue-600 hover:text-blue-600 dark:hover:text-blue-500 hover:underline visited:text-purple-500 dark:visited:text-purple-600;
}
}

512
src/lib/assets/Coredump.svelte
View file

@ -1,266 +1,266 @@
<script lang="ts">
import { fly } from 'svelte/transition';
import { fly } from 'svelte/transition'
export let height = '192';
export let width = 'auto';
export let href: string = '/blog';
export let transition: 'vertical' | 'horizontal' = 'horizontal';
export let height = '192'
export let width = 'auto'
export let href: string = '/blog'
export let transition: 'vertical' | 'horizontal' = 'horizontal'
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 2048 416"
class="diagram select-none font-mono logo"
text-anchor="middle"
font-size="13px"
stroke-linecap="round"
fill="currentColor"
{height}
{width}
in:fly={transition === 'horizontal'
? { x: -100, duration: 300, delay: 320 }
: { y: -200, duration: 300 }}
out:fly={{ x: 100, duration: 300 }}
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 2048 416"
class="diagram select-none font-mono logo"
text-anchor="middle"
font-size="13px"
stroke-linecap="round"
fill="currentColor"
{height}
{width}
in:fly={transition === 'horizontal'
? { x: -100, duration: 300, delay: 320 }
: { y: -200, duration: 300 }}
out:fly={{ x: 100, duration: 300 }}
>
<a {href}>
<circle cx="936" cy="192" r="0.22em" class="opendot" />
<circle cx="936" cy="208" r="0.22em" class="opendot" />
<circle cx="944" cy="128" r="0.22em" class="opendot" />
<circle cx="944" cy="272" r="0.22em" class="opendot" />
<circle cx="952" cy="128" r="0.22em" class="opendot" />
<circle cx="952" cy="272" r="0.22em" class="opendot" />
<circle cx="960" cy="112" r="0.22em" class="opendot" />
<circle cx="960" cy="288" r="0.22em" class="opendot" />
<circle cx="968" cy="112" r="0.22em" class="opendot" />
<circle cx="968" cy="288" r="0.22em" class="opendot" />
<circle cx="976" cy="112" r="0.22em" class="opendot" />
<circle cx="976" cy="176" r="0.22em" class="opendot" />
<circle cx="976" cy="192" r="0.22em" class="opendot" />
<circle cx="976" cy="208" r="0.22em" class="opendot" />
<circle cx="976" cy="224" r="0.22em" class="opendot" />
<circle cx="976" cy="288" r="0.22em" class="opendot" />
<circle cx="984" cy="112" r="0.22em" class="opendot" />
<circle cx="984" cy="288" r="0.22em" class="opendot" />
<circle cx="992" cy="112" r="0.22em" class="opendot" />
<circle cx="992" cy="288" r="0.22em" class="opendot" />
<circle cx="1000" cy="112" r="0.22em" class="opendot" />
<circle cx="1000" cy="288" r="0.22em" class="opendot" />
<circle cx="1008" cy="112" r="0.22em" class="opendot" />
<circle cx="1008" cy="160" r="0.22em" class="opendot" />
<circle cx="1008" cy="240" r="0.22em" class="opendot" />
<circle cx="1008" cy="288" r="0.22em" class="opendot" />
<circle cx="1016" cy="112" r="0.22em" class="opendot" />
<circle cx="1016" cy="160" r="0.22em" class="opendot" />
<circle cx="1016" cy="240" r="0.22em" class="opendot" />
<circle cx="1016" cy="288" r="0.22em" class="opendot" />
<circle cx="1024" cy="176" r="0.22em" class="opendot" />
<circle cx="1024" cy="192" r="0.22em" class="opendot" />
<circle cx="1024" cy="208" r="0.22em" class="opendot" />
<circle cx="1024" cy="224" r="0.22em" class="opendot" />
<circle cx="1032" cy="112" r="0.22em" class="opendot" />
<circle cx="1032" cy="288" r="0.22em" class="opendot" />
<circle cx="1040" cy="112" r="0.22em" class="opendot" />
<circle cx="1040" cy="288" r="0.22em" class="opendot" />
<circle cx="1048" cy="128" r="0.22em" class="opendot" />
<circle cx="1048" cy="272" r="0.22em" class="opendot" />
<circle cx="1056" cy="128" r="0.22em" class="opendot" />
<circle cx="1056" cy="272" r="0.22em" class="opendot" />
<circle cx="1064" cy="176" r="0.22em" class="opendot" />
<circle cx="1064" cy="192" r="0.22em" class="opendot" />
<circle cx="1064" cy="208" r="0.22em" class="opendot" />
<circle cx="1064" cy="224" r="0.22em" class="opendot" />
<circle cx="1064" cy="240" r="0.22em" class="opendot" />
<circle cx="1064" cy="256" r="0.22em" class="opendot" />
<g class="text">
<text x="80" y="20">$$$$$</text>
<text x="80" y="36">$:::$</text>
<text x="1516" y="36">dddddddd</text>
<text x="84" y="52">$$$$$:::$$$$$$</text>
<text x="316" y="52">tttt</text>
<text x="440" y="52">hhhhhhh</text>
<text x="1516" y="52">d::::::d</text>
<text x="80" y="68">$$::::::::::::::$</text>
<text x="304" y="68">ttt:::t</text>
<text x="440" y="68">h:::::h</text>
<text x="1516" y="68">d::::::d</text>
<text x="76" y="84">$:::::$$$$$$$::::$</text>
<text x="304" y="84">t:::::t</text>
<text x="440" y="84">h:::::h</text>
<text x="1516" y="84">d::::::d</text>
<text x="28" y="100">$::::$</text>
<text x="128" y="100">$$$$$</text>
<text x="304" y="100">t:::::t</text>
<text x="440" y="100">h:::::h</text>
<text x="1512" y="100">d:::::d</text>
<text x="28" y="116">$::::$</text>
<text x="304" y="116">ttttttt:::::ttttttt</text>
<text x="468" y="116">h::::h hhhhh</text>
<text x="652" y="116">eeeeeeeeeeee</text>
<text x="868" y="116">cccccccccccccccc</text>
<text x="1024" y="116">o</text>
<text x="1088" y="116">rrrrr</text>
<text x="1168" y="116">rrrrrrrrr</text>
<text x="1308" y="116">eeeeeeeeeeee</text>
<text x="1508" y="116">ddddddddd:::::d uuuuuu</text>
<text x="1652" y="116">uuuuuu</text>
<text x="1744" y="116">mmmmmmm</text>
<text x="1832" y="116">mmmmmmm</text>
<text x="1904" y="116">ppppp</text>
<text x="1984" y="116">ppppppppp</text>
<text x="28" y="132">$::::$</text>
<text x="304" y="132">t:::::::::::::::::t</text>
<text x="480" y="132">h::::hh:::::hhh</text>
<text x="652" y="132">ee::::::::::::ee</text>
<text x="860" y="132">cc:::::::::::::::c</text>
<text x="1000" y="132">:::::::::::</text>
<text x="1140" y="132">r::::rrr:::::::::r</text>
<text x="1308" y="132">ee::::::::::::ee</text>
<text x="1500" y="132">dd::::::::::::::d u::::u</text>
<text x="1652" y="132">u::::u</text>
<text x="1740" y="132">mm:::::::m</text>
<text x="1912" y="132">m:::::::mm p::::ppp:::::::::p</text>
<text x="64" y="148">$:::::$$$$$$$$$</text>
<text x="304" y="148">t:::::::::::::::::t</text>
<text x="488" y="148">h::::::::::::::hh</text>
<text x="656" y="148">e::::::eeeee:::::ee</text>
<text x="1000" y="148">c:::::::::::::::::co:::::::::::::::or:::::::::::::::::r</text>
<text x="1416" y="148">e::::::eeeee:::::ee d::::::::::::::::d u::::u</text>
<text x="1652" y="148">u::::u</text>
<text x="1864" y="148">m::::::::::mm::::::::::mp:::::::::::::::::p</text>
<text x="76" y="164">$$::::::::::::$$</text>
<text x="304" y="164">tttttt:::::::tttttt</text>
<text x="528" y="164">h:::::::hhh::::::h e::::::e</text>
<text x="704" y="164">e:::::e</text>
<text x="888" y="164">c:::::::cccccc:::::co:::::ooo</text>
<text x="1156" y="164">:::::orr::::::rrrrr::::::re::::::e</text>
<text x="1464" y="164">e:::::ed:::::::ddddd:::::d u::::u</text>
<text x="1652" y="164">u::::u</text>
<text x="1868" y="164">m::::::::::::::::::::::mpp::::::ppppp::::::p</text>
<text x="88" y="180">$$$$$$$$$:::::$</text>
<text x="304" y="180">t:::::t</text>
<text x="452" y="180">h::::::h</text>
<text x="620" y="180">h::::::he:::::::eeeee::::::e</text>
<text x="804" y="180">c::::::c</text>
<text x="924" y="180">ccccccco::::</text>
<text x="1044" y="180">::::</text>
<text x="1104" y="180">r:::::r</text>
<text x="1312" y="180">r:::::re:::::::eeeee::::::ed::::::d</text>
<text x="1540" y="180">d:::::d u::::u</text>
<text x="1652" y="180">u::::u</text>
<text x="1820" y="180">m:::::mmm::::::mmm:::::m p:::::p</text>
<text x="2016" y="180">p:::::p</text>
<text x="124" y="196">$::::$</text>
<text x="304" y="196">t:::::t</text>
<text x="448" y="196">h:::::h</text>
<text x="620" y="196">h:::::he:::::::::::::::::e</text>
<text x="800" y="196">c:::::c</text>
<text x="956" y="196">::::</text>
<text x="1044" y="196">::::</text>
<text x="1104" y="196">r:::::r</text>
<text x="1308" y="196">rrrrrrre:::::::::::::::::e d:::::d</text>
<text x="1540" y="196">d:::::d u::::u</text>
<text x="1652" y="196">u::::u</text>
<text x="1716" y="196">m::::m</text>
<text x="1788" y="196">m::::m</text>
<text x="1892" y="196">m::::m p:::::p</text>
<text x="2016" y="196">p:::::p</text>
<text x="124" y="212">$::::$</text>
<text x="304" y="212">t:::::t</text>
<text x="448" y="212">h:::::h</text>
<text x="616" y="212">h:::::he::::::eeeeeeeeeee</text>
<text x="800" y="212">c:::::c</text>
<text x="956" y="212">::::</text>
<text x="1044" y="212">::::</text>
<text x="1104" y="212">r:::::r</text>
<text x="1300" y="212">e::::::eeeeeeeeeee</text>
<text x="1416" y="212">d:::::d</text>
<text x="1540" y="212">d:::::d u::::u</text>
<text x="1652" y="212">u::::u</text>
<text x="1716" y="212">m::::m</text>
<text x="1788" y="212">m::::m</text>
<text x="1892" y="212">m::::m p:::::p</text>
<text x="2016" y="212">p:::::p</text>
<text x="24" y="228">$$$$$</text>
<text x="124" y="228">$::::$</text>
<text x="304" y="228">t:::::t</text>
<text x="420" y="228">tttttt h:::::h</text>
<text x="580" y="228">h:::::he:::::::e</text>
<text x="804" y="228">c::::::c</text>
<text x="924" y="228">ccccccco::::</text>
<text x="1044" y="228">::::</text>
<text x="1104" y="228">r:::::r</text>
<text x="1264" y="228">e:::::::e</text>
<text x="1416" y="228">d:::::d</text>
<text x="1580" y="228">d:::::d u:::::uuuu:::::u</text>
<text x="1716" y="228">m::::m</text>
<text x="1788" y="228">m::::m</text>
<text x="1892" y="228">m::::m p:::::p</text>
<text x="2012" y="228">p::::::p</text>
<text x="76" y="244">$::::$$$$$$$:::::$</text>
<text x="376" y="244">t::::::tttt:::::t h:::::h</text>
<text x="584" y="244">h:::::he::::::::e</text>
<text x="888" y="244">c:::::::cccccc:::::co:::::ooo</text>
<text x="1040" y="244">:::::</text>
<text x="1104" y="244">r:::::r</text>
<text x="1268" y="244">e::::::::e</text>
<text x="1564" y="244">d::::::ddddd::::::ddu:::::::::::::::uum::::m</text>
<text x="1788" y="244">m::::m</text>
<text x="1940" y="244">m::::m p:::::ppppp:::::::p</text>
<text x="72" y="260">$::::::::::::::$$</text>
<text x="376" y="260">tt::::::::::::::t h:::::h</text>
<text x="616" y="260">h:::::h e::::::::eeeeeeee</text>
<text x="920" y="260">c:::::::::::::::::co:::::::::::::::</text>
<text x="1104" y="260">r:::::r</text>
<text x="1304" y="260">e::::::::eeeeeeee</text>
<text x="1568" y="260">d:::::::::::::::::d u:::::::::::::::um::::m</text>
<text x="1788" y="260">m::::m</text>
<text x="1936" y="260">m::::m p::::::::::::::::p</text>
<text x="68" y="276">$$$$$$:::$$$$$</text>
<text x="384" y="276">tt:::::::::::tt h:::::h</text>
<text x="544" y="276">h:::::h</text>
<text x="652" y="276">ee:::::::::::::e</text>
<text x="860" y="276">cc:::::::::::::::c</text>
<text x="1000" y="276">:::::::::::</text>
<text x="1104" y="276">r:::::r</text>
<text x="1308" y="276">ee:::::::::::::e</text>
<text x="1476" y="276">d:::::::::ddd::::d</text>
<text x="1652" y="276">uu::::::::uu:::um::::m</text>
<text x="1788" y="276">m::::m</text>
<text x="1932" y="276">m::::m p::::::::::::::pp</text>
<text x="72" y="292">$:::$</text>
<text x="352" y="292">ttttttttttt</text>
<text x="448" y="292">hhhhhhh</text>
<text x="544" y="292">hhhhhhh</text>
<text x="660" y="292">eeeeeeeeeeeeee</text>
<text x="868" y="292">cccccccccccccccc</text>
<text x="1024" y="292">o</text>
<text x="1104" y="292">rrrrrrr</text>
<text x="1316" y="292">eeeeeeeeeeeeee</text>
<text x="1448" y="292">ddddddddd</text>
<text x="1528" y="292">ddddd</text>
<text x="1612" y="292">uuuuuuuu</text>
<text x="1700" y="292">uuuummmmmm</text>
<text x="1788" y="292">mmmmmm</text>
<text x="1924" y="292">mmmmmm p::::::pppppppp</text>
<text x="72" y="308">$$$$$</text>
<text x="1920" y="308">p:::::p</text>
<text x="1920" y="324">p:::::p</text>
<text x="1920" y="340">p:::::::p</text>
<text x="1920" y="356">p:::::::p</text>
<text x="1920" y="372">p:::::::p</text>
<text x="1920" y="388">ppppppppp</text>
</g>
</a>
<a {href}>
<circle cx="936" cy="192" r="0.22em" class="opendot" />
<circle cx="936" cy="208" r="0.22em" class="opendot" />
<circle cx="944" cy="128" r="0.22em" class="opendot" />
<circle cx="944" cy="272" r="0.22em" class="opendot" />
<circle cx="952" cy="128" r="0.22em" class="opendot" />
<circle cx="952" cy="272" r="0.22em" class="opendot" />
<circle cx="960" cy="112" r="0.22em" class="opendot" />
<circle cx="960" cy="288" r="0.22em" class="opendot" />
<circle cx="968" cy="112" r="0.22em" class="opendot" />
<circle cx="968" cy="288" r="0.22em" class="opendot" />
<circle cx="976" cy="112" r="0.22em" class="opendot" />
<circle cx="976" cy="176" r="0.22em" class="opendot" />
<circle cx="976" cy="192" r="0.22em" class="opendot" />
<circle cx="976" cy="208" r="0.22em" class="opendot" />
<circle cx="976" cy="224" r="0.22em" class="opendot" />
<circle cx="976" cy="288" r="0.22em" class="opendot" />
<circle cx="984" cy="112" r="0.22em" class="opendot" />
<circle cx="984" cy="288" r="0.22em" class="opendot" />
<circle cx="992" cy="112" r="0.22em" class="opendot" />
<circle cx="992" cy="288" r="0.22em" class="opendot" />
<circle cx="1000" cy="112" r="0.22em" class="opendot" />
<circle cx="1000" cy="288" r="0.22em" class="opendot" />
<circle cx="1008" cy="112" r="0.22em" class="opendot" />
<circle cx="1008" cy="160" r="0.22em" class="opendot" />
<circle cx="1008" cy="240" r="0.22em" class="opendot" />
<circle cx="1008" cy="288" r="0.22em" class="opendot" />
<circle cx="1016" cy="112" r="0.22em" class="opendot" />
<circle cx="1016" cy="160" r="0.22em" class="opendot" />
<circle cx="1016" cy="240" r="0.22em" class="opendot" />
<circle cx="1016" cy="288" r="0.22em" class="opendot" />
<circle cx="1024" cy="176" r="0.22em" class="opendot" />
<circle cx="1024" cy="192" r="0.22em" class="opendot" />
<circle cx="1024" cy="208" r="0.22em" class="opendot" />
<circle cx="1024" cy="224" r="0.22em" class="opendot" />
<circle cx="1032" cy="112" r="0.22em" class="opendot" />
<circle cx="1032" cy="288" r="0.22em" class="opendot" />
<circle cx="1040" cy="112" r="0.22em" class="opendot" />
<circle cx="1040" cy="288" r="0.22em" class="opendot" />
<circle cx="1048" cy="128" r="0.22em" class="opendot" />
<circle cx="1048" cy="272" r="0.22em" class="opendot" />
<circle cx="1056" cy="128" r="0.22em" class="opendot" />
<circle cx="1056" cy="272" r="0.22em" class="opendot" />
<circle cx="1064" cy="176" r="0.22em" class="opendot" />
<circle cx="1064" cy="192" r="0.22em" class="opendot" />
<circle cx="1064" cy="208" r="0.22em" class="opendot" />
<circle cx="1064" cy="224" r="0.22em" class="opendot" />
<circle cx="1064" cy="240" r="0.22em" class="opendot" />
<circle cx="1064" cy="256" r="0.22em" class="opendot" />
<g class="text">
<text x="80" y="20">$$$$$</text>
<text x="80" y="36">$:::$</text>
<text x="1516" y="36">dddddddd</text>
<text x="84" y="52">$$$$$:::$$$$$$</text>
<text x="316" y="52">tttt</text>
<text x="440" y="52">hhhhhhh</text>
<text x="1516" y="52">d::::::d</text>
<text x="80" y="68">$$::::::::::::::$</text>
<text x="304" y="68">ttt:::t</text>
<text x="440" y="68">h:::::h</text>
<text x="1516" y="68">d::::::d</text>
<text x="76" y="84">$:::::$$$$$$$::::$</text>
<text x="304" y="84">t:::::t</text>
<text x="440" y="84">h:::::h</text>
<text x="1516" y="84">d::::::d</text>
<text x="28" y="100">$::::$</text>
<text x="128" y="100">$$$$$</text>
<text x="304" y="100">t:::::t</text>
<text x="440" y="100">h:::::h</text>
<text x="1512" y="100">d:::::d</text>
<text x="28" y="116">$::::$</text>
<text x="304" y="116">ttttttt:::::ttttttt</text>
<text x="468" y="116">h::::h hhhhh</text>
<text x="652" y="116">eeeeeeeeeeee</text>
<text x="868" y="116">cccccccccccccccc</text>
<text x="1024" y="116">o</text>
<text x="1088" y="116">rrrrr</text>
<text x="1168" y="116">rrrrrrrrr</text>
<text x="1308" y="116">eeeeeeeeeeee</text>
<text x="1508" y="116">ddddddddd:::::d uuuuuu</text>
<text x="1652" y="116">uuuuuu</text>
<text x="1744" y="116">mmmmmmm</text>
<text x="1832" y="116">mmmmmmm</text>
<text x="1904" y="116">ppppp</text>
<text x="1984" y="116">ppppppppp</text>
<text x="28" y="132">$::::$</text>
<text x="304" y="132">t:::::::::::::::::t</text>
<text x="480" y="132">h::::hh:::::hhh</text>
<text x="652" y="132">ee::::::::::::ee</text>
<text x="860" y="132">cc:::::::::::::::c</text>
<text x="1000" y="132">:::::::::::</text>
<text x="1140" y="132">r::::rrr:::::::::r</text>
<text x="1308" y="132">ee::::::::::::ee</text>
<text x="1500" y="132">dd::::::::::::::d u::::u</text>
<text x="1652" y="132">u::::u</text>
<text x="1740" y="132">mm:::::::m</text>
<text x="1912" y="132">m:::::::mm p::::ppp:::::::::p</text>
<text x="64" y="148">$:::::$$$$$$$$$</text>
<text x="304" y="148">t:::::::::::::::::t</text>
<text x="488" y="148">h::::::::::::::hh</text>
<text x="656" y="148">e::::::eeeee:::::ee</text>
<text x="1000" y="148">c:::::::::::::::::co:::::::::::::::or:::::::::::::::::r</text>
<text x="1416" y="148">e::::::eeeee:::::ee d::::::::::::::::d u::::u</text>
<text x="1652" y="148">u::::u</text>
<text x="1864" y="148">m::::::::::mm::::::::::mp:::::::::::::::::p</text>
<text x="76" y="164">$$::::::::::::$$</text>
<text x="304" y="164">tttttt:::::::tttttt</text>
<text x="528" y="164">h:::::::hhh::::::h e::::::e</text>
<text x="704" y="164">e:::::e</text>
<text x="888" y="164">c:::::::cccccc:::::co:::::ooo</text>
<text x="1156" y="164">:::::orr::::::rrrrr::::::re::::::e</text>
<text x="1464" y="164">e:::::ed:::::::ddddd:::::d u::::u</text>
<text x="1652" y="164">u::::u</text>
<text x="1868" y="164">m::::::::::::::::::::::mpp::::::ppppp::::::p</text>
<text x="88" y="180">$$$$$$$$$:::::$</text>
<text x="304" y="180">t:::::t</text>
<text x="452" y="180">h::::::h</text>
<text x="620" y="180">h::::::he:::::::eeeee::::::e</text>
<text x="804" y="180">c::::::c</text>
<text x="924" y="180">ccccccco::::</text>
<text x="1044" y="180">::::</text>
<text x="1104" y="180">r:::::r</text>
<text x="1312" y="180">r:::::re:::::::eeeee::::::ed::::::d</text>
<text x="1540" y="180">d:::::d u::::u</text>
<text x="1652" y="180">u::::u</text>
<text x="1820" y="180">m:::::mmm::::::mmm:::::m p:::::p</text>
<text x="2016" y="180">p:::::p</text>
<text x="124" y="196">$::::$</text>
<text x="304" y="196">t:::::t</text>
<text x="448" y="196">h:::::h</text>
<text x="620" y="196">h:::::he:::::::::::::::::e</text>
<text x="800" y="196">c:::::c</text>
<text x="956" y="196">::::</text>
<text x="1044" y="196">::::</text>
<text x="1104" y="196">r:::::r</text>
<text x="1308" y="196">rrrrrrre:::::::::::::::::e d:::::d</text>
<text x="1540" y="196">d:::::d u::::u</text>
<text x="1652" y="196">u::::u</text>
<text x="1716" y="196">m::::m</text>
<text x="1788" y="196">m::::m</text>
<text x="1892" y="196">m::::m p:::::p</text>
<text x="2016" y="196">p:::::p</text>
<text x="124" y="212">$::::$</text>
<text x="304" y="212">t:::::t</text>
<text x="448" y="212">h:::::h</text>
<text x="616" y="212">h:::::he::::::eeeeeeeeeee</text>
<text x="800" y="212">c:::::c</text>
<text x="956" y="212">::::</text>
<text x="1044" y="212">::::</text>
<text x="1104" y="212">r:::::r</text>
<text x="1300" y="212">e::::::eeeeeeeeeee</text>
<text x="1416" y="212">d:::::d</text>
<text x="1540" y="212">d:::::d u::::u</text>
<text x="1652" y="212">u::::u</text>
<text x="1716" y="212">m::::m</text>
<text x="1788" y="212">m::::m</text>
<text x="1892" y="212">m::::m p:::::p</text>
<text x="2016" y="212">p:::::p</text>
<text x="24" y="228">$$$$$</text>
<text x="124" y="228">$::::$</text>
<text x="304" y="228">t:::::t</text>
<text x="420" y="228">tttttt h:::::h</text>
<text x="580" y="228">h:::::he:::::::e</text>
<text x="804" y="228">c::::::c</text>
<text x="924" y="228">ccccccco::::</text>
<text x="1044" y="228">::::</text>
<text x="1104" y="228">r:::::r</text>
<text x="1264" y="228">e:::::::e</text>
<text x="1416" y="228">d:::::d</text>
<text x="1580" y="228">d:::::d u:::::uuuu:::::u</text>
<text x="1716" y="228">m::::m</text>
<text x="1788" y="228">m::::m</text>
<text x="1892" y="228">m::::m p:::::p</text>
<text x="2012" y="228">p::::::p</text>
<text x="76" y="244">$::::$$$$$$$:::::$</text>
<text x="376" y="244">t::::::tttt:::::t h:::::h</text>
<text x="584" y="244">h:::::he::::::::e</text>
<text x="888" y="244">c:::::::cccccc:::::co:::::ooo</text>
<text x="1040" y="244">:::::</text>
<text x="1104" y="244">r:::::r</text>
<text x="1268" y="244">e::::::::e</text>
<text x="1564" y="244">d::::::ddddd::::::ddu:::::::::::::::uum::::m</text>
<text x="1788" y="244">m::::m</text>
<text x="1940" y="244">m::::m p:::::ppppp:::::::p</text>
<text x="72" y="260">$::::::::::::::$$</text>
<text x="376" y="260">tt::::::::::::::t h:::::h</text>
<text x="616" y="260">h:::::h e::::::::eeeeeeee</text>
<text x="920" y="260">c:::::::::::::::::co:::::::::::::::</text>
<text x="1104" y="260">r:::::r</text>
<text x="1304" y="260">e::::::::eeeeeeee</text>
<text x="1568" y="260">d:::::::::::::::::d u:::::::::::::::um::::m</text>
<text x="1788" y="260">m::::m</text>
<text x="1936" y="260">m::::m p::::::::::::::::p</text>
<text x="68" y="276">$$$$$$:::$$$$$</text>
<text x="384" y="276">tt:::::::::::tt h:::::h</text>
<text x="544" y="276">h:::::h</text>
<text x="652" y="276">ee:::::::::::::e</text>
<text x="860" y="276">cc:::::::::::::::c</text>
<text x="1000" y="276">:::::::::::</text>
<text x="1104" y="276">r:::::r</text>
<text x="1308" y="276">ee:::::::::::::e</text>
<text x="1476" y="276">d:::::::::ddd::::d</text>
<text x="1652" y="276">uu::::::::uu:::um::::m</text>
<text x="1788" y="276">m::::m</text>
<text x="1932" y="276">m::::m p::::::::::::::pp</text>
<text x="72" y="292">$:::$</text>
<text x="352" y="292">ttttttttttt</text>
<text x="448" y="292">hhhhhhh</text>
<text x="544" y="292">hhhhhhh</text>
<text x="660" y="292">eeeeeeeeeeeeee</text>
<text x="868" y="292">cccccccccccccccc</text>
<text x="1024" y="292">o</text>
<text x="1104" y="292">rrrrrrr</text>
<text x="1316" y="292">eeeeeeeeeeeeee</text>
<text x="1448" y="292">ddddddddd</text>
<text x="1528" y="292">ddddd</text>
<text x="1612" y="292">uuuuuuuu</text>
<text x="1700" y="292">uuuummmmmm</text>
<text x="1788" y="292">mmmmmm</text>
<text x="1924" y="292">mmmmmm p::::::pppppppp</text>
<text x="72" y="308">$$$$$</text>
<text x="1920" y="308">p:::::p</text>
<text x="1920" y="324">p:::::p</text>
<text x="1920" y="340">p:::::::p</text>
<text x="1920" y="356">p:::::::p</text>
<text x="1920" y="372">p:::::::p</text>
<text x="1920" y="388">ppppppppp</text>
</g>
</a>
</svg>
<style lang="postcss">
.opendot {
@apply stroke-primary fill-none stroke-[0.1em];
}
.logo {
& .text {
@apply fill-black dark:fill-white;
}
}
.opendot {
@apply stroke-primary fill-none stroke-[0.1em];
}
.logo {
& .text {
@apply fill-black dark:fill-white;
}
}
</style>

558
src/lib/assets/Name.svelte
View file

@ -1,289 +1,289 @@
<script lang="ts">
import { fly } from 'svelte/transition';
import { fly } from 'svelte/transition'
export let height = '192';
export let width = 'auto';
export let href: string;
export let height = '192'
export let width = 'auto'
export let href: string
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 2104 416"
class="diagram select-none font-mono logo"
text-anchor="middle"
font-size="13px"
stroke-linecap="round"
fill="currentColor"
{height}
{width}
in:fly={{ x: -100, duration: 300, delay: 320 }}
out:fly={{ x: 100, duration: 300 }}
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 2104 416"
class="diagram select-none font-mono logo"
text-anchor="middle"
font-size="13px"
stroke-linecap="round"
fill="currentColor"
{height}
{width}
in:fly={{ x: -100, duration: 300, delay: 320 }}
out:fly={{ x: 100, duration: 300 }}
>
<a {href}>
<path d="M 112,352 L 232,112" fill="none" stroke="black" />
<path d="M 160,352 L 280,112" fill="none" stroke="black" />
<circle cx="680" cy="144" r="0.22em" class="opendot" />
<circle cx="680" cy="160" r="0.22em" class="opendot" />
<circle cx="680" cy="176" r="0.22em" class="opendot" />
<circle cx="680" cy="192" r="0.22em" class="opendot" />
<circle cx="680" cy="208" r="0.22em" class="opendot" />
<circle cx="680" cy="224" r="0.22em" class="opendot" />
<circle cx="680" cy="240" r="0.22em" class="opendot" />
<circle cx="680" cy="256" r="0.22em" class="opendot" />
<circle cx="688" cy="128" r="0.22em" class="opendot" />
<circle cx="688" cy="272" r="0.22em" class="opendot" />
<circle cx="696" cy="128" r="0.22em" class="opendot" />
<circle cx="696" cy="272" r="0.22em" class="opendot" />
<circle cx="704" cy="112" r="0.22em" class="opendot" />
<circle cx="704" cy="288" r="0.22em" class="opendot" />
<circle cx="712" cy="112" r="0.22em" class="opendot" />
<circle cx="712" cy="288" r="0.22em" class="opendot" />
<circle cx="720" cy="112" r="0.22em" class="opendot" />
<circle cx="720" cy="176" r="0.22em" class="opendot" />
<circle cx="720" cy="192" r="0.22em" class="opendot" />
<circle cx="720" cy="208" r="0.22em" class="opendot" />
<circle cx="720" cy="224" r="0.22em" class="opendot" />
<circle cx="720" cy="288" r="0.22em" class="opendot" />
<circle cx="728" cy="112" r="0.22em" class="opendot" />
<circle cx="728" cy="288" r="0.22em" class="opendot" />
<circle cx="736" cy="112" r="0.22em" class="opendot" />
<circle cx="736" cy="288" r="0.22em" class="opendot" />
<circle cx="744" cy="112" r="0.22em" class="opendot" />
<circle cx="744" cy="288" r="0.22em" class="opendot" />
<circle cx="752" cy="112" r="0.22em" class="opendot" />
<circle cx="752" cy="160" r="0.22em" class="opendot" />
<circle cx="752" cy="240" r="0.22em" class="opendot" />
<circle cx="752" cy="288" r="0.22em" class="opendot" />
<circle cx="760" cy="112" r="0.22em" class="opendot" />
<circle cx="760" cy="160" r="0.22em" class="opendot" />
<circle cx="760" cy="240" r="0.22em" class="opendot" />
<circle cx="760" cy="288" r="0.22em" class="opendot" />
<circle cx="768" cy="176" r="0.22em" class="opendot" />
<circle cx="768" cy="192" r="0.22em" class="opendot" />
<circle cx="768" cy="208" r="0.22em" class="opendot" />
<circle cx="768" cy="224" r="0.22em" class="opendot" />
<circle cx="776" cy="112" r="0.22em" class="opendot" />
<circle cx="776" cy="288" r="0.22em" class="opendot" />
<circle cx="784" cy="112" r="0.22em" class="opendot" />
<circle cx="784" cy="288" r="0.22em" class="opendot" />
<circle cx="792" cy="128" r="0.22em" class="opendot" />
<circle cx="792" cy="272" r="0.22em" class="opendot" />
<circle cx="800" cy="128" r="0.22em" class="opendot" />
<circle cx="800" cy="272" r="0.22em" class="opendot" />
<circle cx="808" cy="256" r="0.22em" class="opendot" />
<g class="text">
<text x="256" y="116">/////</text>
<text x="504" y="116">yyyyyyy</text>
<text x="648" y="116">yyyyyyy</text>
<text x="768" y="116">o</text>
<text x="836" y="116">uuuuuu</text>
<text x="916" y="116">uuuuuu</text>
<text x="984" y="116">wwwwwww</text>
<text x="1120" y="116">wwwww</text>
<text x="1256" y="116">wwwwwww</text>
<text x="1364" y="116">eeeeeeeeeeee</text>
<text x="1460" y="116">nnnn</text>
<text x="1524" y="116">nnnnnnnn</text>
<text x="1656" y="116">wwwwwww</text>
<text x="1792" y="116">wwwww</text>
<text x="1952" y="116">wwwwwwwuuuuuu</text>
<text x="2060" y="116">uuuuuu</text>
<text x="80" y="132">&lt;&lt;&lt;&lt;&lt;&lt;&lt;</text>
<text x="248" y="132">:::::</text>
<text x="312" y="132">&gt;&gt;&gt;&gt;&gt;&gt;&gt;</text>
<text x="512" y="132">y:::::y</text>
<text x="640" y="132">y:::::y</text>
<text x="744" y="132">:::::::::::</text>
<text x="836" y="132">u::::u</text>
<text x="916" y="132">u::::u</text>
<text x="992" y="132">w:::::w</text>
<text x="1120" y="132">w:::::w</text>
<text x="1248" y="132">w:::::w</text>
<text x="1364" y="132">ee::::::::::::ee</text>
<text x="1508" y="132">n:::nn::::::::nn</text>
<text x="1664" y="132">w:::::w</text>
<text x="1792" y="132">w:::::w</text>
<text x="1948" y="132">w:::::w u::::u</text>
<text x="2060" y="132">u::::u</text>
<text x="72" y="148">&lt;:::::&lt;</text>
<text x="240" y="148">:::::</text>
<text x="320" y="148">&gt;:::::&gt;</text>
<text x="520" y="148">y:::::y</text>
<text x="632" y="148">y:::::y</text>
<text x="772" y="148">:::::::::::::::ou::::u</text>
<text x="916" y="148">u::::u</text>
<text x="1000" y="148">w:::::w</text>
<text x="1120" y="148">w:::::::w</text>
<text x="1240" y="148">w:::::w</text>
<text x="1436" y="148">e::::::eeeee:::::een::::::::::::::nn</text>
<text x="1672" y="148">w:::::w</text>
<text x="1792" y="148">w:::::::w</text>
<text x="1912" y="148">w:::::w</text>
<text x="1980" y="148">u::::u</text>
<text x="2060" y="148">u::::u</text>
<text x="64" y="164">&lt;:::::&lt;</text>
<text x="232" y="164">:::::</text>
<text x="328" y="164">&gt;:::::&gt;</text>
<text x="528" y="164">y:::::y</text>
<text x="624" y="164">y:::::y</text>
<text x="716" y="164">:::::ooo</text>
<text x="812" y="164">:::::ou::::u</text>
<text x="916" y="164">u::::u</text>
<text x="1008" y="164">w:::::w</text>
<text x="1120" y="164">w:::::::::w</text>
<text x="1232" y="164">w:::::w</text>
<text x="1316" y="164">e::::::e</text>
<text x="1488" y="164">e:::::enn:::::::::::::::n</text>
<text x="1680" y="164">w:::::w</text>
<text x="1792" y="164">w:::::::::w</text>
<text x="1904" y="164">w:::::w</text>
<text x="1980" y="164">u::::u</text>
<text x="2060" y="164">u::::u</text>
<text x="56" y="180">&lt;:::::&lt;</text>
<text x="224" y="180">:::::</text>
<text x="336" y="180">&gt;:::::&gt;</text>
<text x="536" y="180">y:::::y</text>
<text x="616" y="180">y:::::y</text>
<text x="700" y="180">::::</text>
<text x="816" y="180">::::ou::::u</text>
<text x="916" y="180">u::::u</text>
<text x="1016" y="180">w:::::w</text>
<text x="1120" y="180">w:::::w:::::w</text>
<text x="1224" y="180">w:::::w</text>
<text x="1364" y="180">e:::::::eeeee::::::e</text>
<text x="1524" y="180">n:::::nnnn:::::n</text>
<text x="1688" y="180">w:::::w</text>
<text x="1792" y="180">w:::::w:::::w</text>
<text x="1896" y="180">w:::::w</text>
<text x="1980" y="180">u::::u</text>
<text x="2060" y="180">u::::u</text>
<text x="48" y="196">&lt;:::::&lt;</text>
<text x="216" y="196">:::::</text>
<text x="344" y="196">&gt;:::::&gt;</text>
<text x="576" y="196">y:::::y y:::::y</text>
<text x="700" y="196">::::</text>
<text x="816" y="196">::::ou::::u</text>
<text x="916" y="196">u::::u</text>
<text x="1120" y="196">w:::::w w:::::w w:::::w w:::::w</text>
<text x="1360" y="196">e:::::::::::::::::e</text>
<text x="1484" y="196">n::::n</text>
<text x="1564" y="196">n::::n</text>
<text x="1792" y="196">w:::::w w:::::w w:::::w w:::::w</text>
<text x="1980" y="196">u::::u</text>
<text x="2060" y="196">u::::u</text>
<text x="40" y="212">&lt;:::::&lt;</text>
<text x="208" y="212">:::::</text>
<text x="352" y="212">&gt;:::::&gt;</text>
<text x="576" y="212">y:::::y:::::y</text>
<text x="700" y="212">::::</text>
<text x="816" y="212">::::ou::::u</text>
<text x="916" y="212">u::::u</text>
<text x="1056" y="212">w:::::w:::::w</text>
<text x="1184" y="212">w:::::w:::::w</text>
<text x="1356" y="212">e::::::eeeeeeeeeee</text>
<text x="1484" y="212">n::::n</text>
<text x="1564" y="212">n::::n</text>
<text x="1728" y="212">w:::::w:::::w</text>
<text x="1856" y="212">w:::::w:::::w</text>
<text x="1980" y="212">u::::u</text>
<text x="2060" y="212">u::::u</text>
<text x="32" y="228">&lt;:::::&lt;</text>
<text x="200" y="228">:::::</text>
<text x="360" y="228">&gt;:::::&gt;</text>
<text x="576" y="228">y:::::::::y</text>
<text x="700" y="228">::::</text>
<text x="856" y="228">::::ou:::::uuuu:::::u</text>
<text x="1056" y="228">w:::::::::w</text>
<text x="1184" y="228">w:::::::::w</text>
<text x="1320" y="228">e:::::::e</text>
<text x="1484" y="228">n::::n</text>
<text x="1564" y="228">n::::n</text>
<text x="1728" y="228">w:::::::::w</text>
<text x="1856" y="228">w:::::::::w</text>
<text x="2020" y="228">u:::::uuuu:::::u</text>
<text x="40" y="244">&lt;:::::&lt;</text>
<text x="192" y="244">:::::</text>
<text x="352" y="244">&gt;:::::&gt;</text>
<text x="576" y="244">y:::::::y</text>
<text x="716" y="244">:::::ooo</text>
<text x="860" y="244">:::::ou:::::::::::::::uu</text>
<text x="1056" y="244">w:::::::w</text>
<text x="1184" y="244">w:::::::w</text>
<text x="1324" y="244">e::::::::e</text>
<text x="1484" y="244">n::::n</text>
<text x="1564" y="244">n::::n</text>
<text x="1728" y="244">w:::::::w</text>
<text x="1856" y="244">w:::::::w</text>
<text x="2028" y="244">u:::::::::::::::uu</text>
<text x="48" y="260">&lt;:::::&lt;</text>
<text x="184" y="260">:::::</text>
<text x="344" y="260">&gt;:::::&gt;</text>
<text x="576" y="260">y:::::y</text>
<text x="744" y="260">:::::::::::::::</text>
<text x="888" y="260">u:::::::::::::::u</text>
<text x="1056" y="260">w:::::w</text>
<text x="1184" y="260">w:::::w</text>
<text x="1360" y="260">e::::::::eeeeeeee</text>
<text x="1484" y="260">n::::n</text>
<text x="1564" y="260">n::::n</text>
<text x="1728" y="260">w:::::w</text>
<text x="1856" y="260">w:::::w</text>
<text x="2032" y="260">u:::::::::::::::u</text>
<text x="56" y="276">&lt;:::::&lt;</text>
<text x="176" y="276">:::::</text>
<text x="336" y="276">&gt;:::::&gt;</text>
<text x="568" y="276">y:::::y</text>
<text x="744" y="276">:::::::::::</text>
<text x="892" y="276">uu::::::::uu:::u</text>
<text x="1056" y="276">w:::w</text>
<text x="1184" y="276">w:::w</text>
<text x="1364" y="276">ee:::::::::::::e</text>
<text x="1484" y="276">n::::n</text>
<text x="1564" y="276">n::::n</text>
<text x="1728" y="276">w:::w</text>
<text x="1856" y="276">w:::w</text>
<text x="2036" y="276">uu::::::::uu:::u</text>
<text x="64" y="292">&lt;:::::&lt;</text>
<text x="168" y="292">:::::</text>
<text x="328" y="292">&gt;:::::&gt;</text>
<text x="560" y="292">y:::::y</text>
<text x="768" y="292">o</text>
<text x="876" y="292">uuuuuuuu</text>
<text x="940" y="292">uuuu</text>
<text x="1056" y="292">www</text>
<text x="1184" y="292">www</text>
<text x="1372" y="292">eeeeeeeeeeeeee</text>
<text x="1484" y="292">nnnnnn</text>
<text x="1564" y="292">nnnnnn</text>
<text x="1728" y="292">www</text>
<text x="1856" y="292">www</text>
<text x="2020" y="292">uuuuuuuu</text>
<text x="2084" y="292">uuuu</text>
<text x="72" y="308">&lt;:::::&lt;</text>
<text x="160" y="308">:::::</text>
<text x="320" y="308">&gt;:::::&gt;</text>
<text x="552" y="308">y:::::y</text>
<text x="80" y="324">&lt;&lt;&lt;&lt;&lt;&lt;&lt;</text>
<text x="152" y="324">:::::</text>
<text x="312" y="324">&gt;&gt;&gt;&gt;&gt;&gt;&gt;</text>
<text x="544" y="324">y:::::y</text>
<text x="144" y="340">:::::</text>
<text x="536" y="340">y:::::y</text>
<text x="136" y="356">/////</text>
<text x="528" y="356">y:::::y</text>
<text x="512" y="372">yyyyyyy</text>
</g>
</a>
<a {href}>
<path d="M 112,352 L 232,112" fill="none" stroke="black" />
<path d="M 160,352 L 280,112" fill="none" stroke="black" />
<circle cx="680" cy="144" r="0.22em" class="opendot" />
<circle cx="680" cy="160" r="0.22em" class="opendot" />
<circle cx="680" cy="176" r="0.22em" class="opendot" />
<circle cx="680" cy="192" r="0.22em" class="opendot" />
<circle cx="680" cy="208" r="0.22em" class="opendot" />
<circle cx="680" cy="224" r="0.22em" class="opendot" />
<circle cx="680" cy="240" r="0.22em" class="opendot" />
<circle cx="680" cy="256" r="0.22em" class="opendot" />
<circle cx="688" cy="128" r="0.22em" class="opendot" />
<circle cx="688" cy="272" r="0.22em" class="opendot" />
<circle cx="696" cy="128" r="0.22em" class="opendot" />
<circle cx="696" cy="272" r="0.22em" class="opendot" />
<circle cx="704" cy="112" r="0.22em" class="opendot" />
<circle cx="704" cy="288" r="0.22em" class="opendot" />
<circle cx="712" cy="112" r="0.22em" class="opendot" />
<circle cx="712" cy="288" r="0.22em" class="opendot" />
<circle cx="720" cy="112" r="0.22em" class="opendot" />
<circle cx="720" cy="176" r="0.22em" class="opendot" />
<circle cx="720" cy="192" r="0.22em" class="opendot" />
<circle cx="720" cy="208" r="0.22em" class="opendot" />
<circle cx="720" cy="224" r="0.22em" class="opendot" />
<circle cx="720" cy="288" r="0.22em" class="opendot" />
<circle cx="728" cy="112" r="0.22em" class="opendot" />
<circle cx="728" cy="288" r="0.22em" class="opendot" />
<circle cx="736" cy="112" r="0.22em" class="opendot" />
<circle cx="736" cy="288" r="0.22em" class="opendot" />
<circle cx="744" cy="112" r="0.22em" class="opendot" />
<circle cx="744" cy="288" r="0.22em" class="opendot" />
<circle cx="752" cy="112" r="0.22em" class="opendot" />
<circle cx="752" cy="160" r="0.22em" class="opendot" />
<circle cx="752" cy="240" r="0.22em" class="opendot" />
<circle cx="752" cy="288" r="0.22em" class="opendot" />
<circle cx="760" cy="112" r="0.22em" class="opendot" />
<circle cx="760" cy="160" r="0.22em" class="opendot" />
<circle cx="760" cy="240" r="0.22em" class="opendot" />
<circle cx="760" cy="288" r="0.22em" class="opendot" />
<circle cx="768" cy="176" r="0.22em" class="opendot" />
<circle cx="768" cy="192" r="0.22em" class="opendot" />
<circle cx="768" cy="208" r="0.22em" class="opendot" />
<circle cx="768" cy="224" r="0.22em" class="opendot" />
<circle cx="776" cy="112" r="0.22em" class="opendot" />
<circle cx="776" cy="288" r="0.22em" class="opendot" />
<circle cx="784" cy="112" r="0.22em" class="opendot" />
<circle cx="784" cy="288" r="0.22em" class="opendot" />
<circle cx="792" cy="128" r="0.22em" class="opendot" />
<circle cx="792" cy="272" r="0.22em" class="opendot" />
<circle cx="800" cy="128" r="0.22em" class="opendot" />
<circle cx="800" cy="272" r="0.22em" class="opendot" />
<circle cx="808" cy="256" r="0.22em" class="opendot" />
<g class="text">
<text x="256" y="116">/////</text>
<text x="504" y="116">yyyyyyy</text>
<text x="648" y="116">yyyyyyy</text>
<text x="768" y="116">o</text>
<text x="836" y="116">uuuuuu</text>
<text x="916" y="116">uuuuuu</text>
<text x="984" y="116">wwwwwww</text>
<text x="1120" y="116">wwwww</text>
<text x="1256" y="116">wwwwwww</text>
<text x="1364" y="116">eeeeeeeeeeee</text>
<text x="1460" y="116">nnnn</text>
<text x="1524" y="116">nnnnnnnn</text>
<text x="1656" y="116">wwwwwww</text>
<text x="1792" y="116">wwwww</text>
<text x="1952" y="116">wwwwwwwuuuuuu</text>
<text x="2060" y="116">uuuuuu</text>
<text x="80" y="132">&lt;&lt;&lt;&lt;&lt;&lt;&lt;</text>
<text x="248" y="132">:::::</text>
<text x="312" y="132">&gt;&gt;&gt;&gt;&gt;&gt;&gt;</text>
<text x="512" y="132">y:::::y</text>
<text x="640" y="132">y:::::y</text>
<text x="744" y="132">:::::::::::</text>
<text x="836" y="132">u::::u</text>
<text x="916" y="132">u::::u</text>
<text x="992" y="132">w:::::w</text>
<text x="1120" y="132">w:::::w</text>
<text x="1248" y="132">w:::::w</text>
<text x="1364" y="132">ee::::::::::::ee</text>
<text x="1508" y="132">n:::nn::::::::nn</text>
<text x="1664" y="132">w:::::w</text>
<text x="1792" y="132">w:::::w</text>
<text x="1948" y="132">w:::::w u::::u</text>
<text x="2060" y="132">u::::u</text>
<text x="72" y="148">&lt;:::::&lt;</text>
<text x="240" y="148">:::::</text>
<text x="320" y="148">&gt;:::::&gt;</text>
<text x="520" y="148">y:::::y</text>
<text x="632" y="148">y:::::y</text>
<text x="772" y="148">:::::::::::::::ou::::u</text>
<text x="916" y="148">u::::u</text>
<text x="1000" y="148">w:::::w</text>
<text x="1120" y="148">w:::::::w</text>
<text x="1240" y="148">w:::::w</text>
<text x="1436" y="148">e::::::eeeee:::::een::::::::::::::nn</text>
<text x="1672" y="148">w:::::w</text>
<text x="1792" y="148">w:::::::w</text>
<text x="1912" y="148">w:::::w</text>
<text x="1980" y="148">u::::u</text>
<text x="2060" y="148">u::::u</text>
<text x="64" y="164">&lt;:::::&lt;</text>
<text x="232" y="164">:::::</text>
<text x="328" y="164">&gt;:::::&gt;</text>
<text x="528" y="164">y:::::y</text>
<text x="624" y="164">y:::::y</text>
<text x="716" y="164">:::::ooo</text>
<text x="812" y="164">:::::ou::::u</text>
<text x="916" y="164">u::::u</text>
<text x="1008" y="164">w:::::w</text>
<text x="1120" y="164">w:::::::::w</text>
<text x="1232" y="164">w:::::w</text>
<text x="1316" y="164">e::::::e</text>
<text x="1488" y="164">e:::::enn:::::::::::::::n</text>
<text x="1680" y="164">w:::::w</text>
<text x="1792" y="164">w:::::::::w</text>
<text x="1904" y="164">w:::::w</text>
<text x="1980" y="164">u::::u</text>
<text x="2060" y="164">u::::u</text>
<text x="56" y="180">&lt;:::::&lt;</text>
<text x="224" y="180">:::::</text>
<text x="336" y="180">&gt;:::::&gt;</text>
<text x="536" y="180">y:::::y</text>
<text x="616" y="180">y:::::y</text>
<text x="700" y="180">::::</text>
<text x="816" y="180">::::ou::::u</text>
<text x="916" y="180">u::::u</text>
<text x="1016" y="180">w:::::w</text>
<text x="1120" y="180">w:::::w:::::w</text>
<text x="1224" y="180">w:::::w</text>
<text x="1364" y="180">e:::::::eeeee::::::e</text>
<text x="1524" y="180">n:::::nnnn:::::n</text>
<text x="1688" y="180">w:::::w</text>
<text x="1792" y="180">w:::::w:::::w</text>
<text x="1896" y="180">w:::::w</text>
<text x="1980" y="180">u::::u</text>
<text x="2060" y="180">u::::u</text>
<text x="48" y="196">&lt;:::::&lt;</text>
<text x="216" y="196">:::::</text>
<text x="344" y="196">&gt;:::::&gt;</text>
<text x="576" y="196">y:::::y y:::::y</text>
<text x="700" y="196">::::</text>
<text x="816" y="196">::::ou::::u</text>
<text x="916" y="196">u::::u</text>
<text x="1120" y="196">w:::::w w:::::w w:::::w w:::::w</text>
<text x="1360" y="196">e:::::::::::::::::e</text>
<text x="1484" y="196">n::::n</text>
<text x="1564" y="196">n::::n</text>
<text x="1792" y="196">w:::::w w:::::w w:::::w w:::::w</text>
<text x="1980" y="196">u::::u</text>
<text x="2060" y="196">u::::u</text>
<text x="40" y="212">&lt;:::::&lt;</text>
<text x="208" y="212">:::::</text>
<text x="352" y="212">&gt;:::::&gt;</text>
<text x="576" y="212">y:::::y:::::y</text>
<text x="700" y="212">::::</text>
<text x="816" y="212">::::ou::::u</text>
<text x="916" y="212">u::::u</text>
<text x="1056" y="212">w:::::w:::::w</text>
<text x="1184" y="212">w:::::w:::::w</text>
<text x="1356" y="212">e::::::eeeeeeeeeee</text>
<text x="1484" y="212">n::::n</text>
<text x="1564" y="212">n::::n</text>
<text x="1728" y="212">w:::::w:::::w</text>
<text x="1856" y="212">w:::::w:::::w</text>
<text x="1980" y="212">u::::u</text>
<text x="2060" y="212">u::::u</text>
<text x="32" y="228">&lt;:::::&lt;</text>
<text x="200" y="228">:::::</text>
<text x="360" y="228">&gt;:::::&gt;</text>
<text x="576" y="228">y:::::::::y</text>
<text x="700" y="228">::::</text>
<text x="856" y="228">::::ou:::::uuuu:::::u</text>
<text x="1056" y="228">w:::::::::w</text>
<text x="1184" y="228">w:::::::::w</text>
<text x="1320" y="228">e:::::::e</text>
<text x="1484" y="228">n::::n</text>
<text x="1564" y="228">n::::n</text>
<text x="1728" y="228">w:::::::::w</text>
<text x="1856" y="228">w:::::::::w</text>
<text x="2020" y="228">u:::::uuuu:::::u</text>
<text x="40" y="244">&lt;:::::&lt;</text>
<text x="192" y="244">:::::</text>
<text x="352" y="244">&gt;:::::&gt;</text>
<text x="576" y="244">y:::::::y</text>
<text x="716" y="244">:::::ooo</text>
<text x="860" y="244">:::::ou:::::::::::::::uu</text>
<text x="1056" y="244">w:::::::w</text>
<text x="1184" y="244">w:::::::w</text>
<text x="1324" y="244">e::::::::e</text>
<text x="1484" y="244">n::::n</text>
<text x="1564" y="244">n::::n</text>
<text x="1728" y="244">w:::::::w</text>
<text x="1856" y="244">w:::::::w</text>
<text x="2028" y="244">u:::::::::::::::uu</text>
<text x="48" y="260">&lt;:::::&lt;</text>
<text x="184" y="260">:::::</text>
<text x="344" y="260">&gt;:::::&gt;</text>
<text x="576" y="260">y:::::y</text>
<text x="744" y="260">:::::::::::::::</text>
<text x="888" y="260">u:::::::::::::::u</text>
<text x="1056" y="260">w:::::w</text>
<text x="1184" y="260">w:::::w</text>
<text x="1360" y="260">e::::::::eeeeeeee</text>
<text x="1484" y="260">n::::n</text>
<text x="1564" y="260">n::::n</text>
<text x="1728" y="260">w:::::w</text>
<text x="1856" y="260">w:::::w</text>
<text x="2032" y="260">u:::::::::::::::u</text>
<text x="56" y="276">&lt;:::::&lt;</text>
<text x="176" y="276">:::::</text>
<text x="336" y="276">&gt;:::::&gt;</text>
<text x="568" y="276">y:::::y</text>
<text x="744" y="276">:::::::::::</text>
<text x="892" y="276">uu::::::::uu:::u</text>
<text x="1056" y="276">w:::w</text>
<text x="1184" y="276">w:::w</text>
<text x="1364" y="276">ee:::::::::::::e</text>
<text x="1484" y="276">n::::n</text>
<text x="1564" y="276">n::::n</text>
<text x="1728" y="276">w:::w</text>
<text x="1856" y="276">w:::w</text>
<text x="2036" y="276">uu::::::::uu:::u</text>
<text x="64" y="292">&lt;:::::&lt;</text>
<text x="168" y="292">:::::</text>
<text x="328" y="292">&gt;:::::&gt;</text>
<text x="560" y="292">y:::::y</text>
<text x="768" y="292">o</text>
<text x="876" y="292">uuuuuuuu</text>
<text x="940" y="292">uuuu</text>
<text x="1056" y="292">www</text>
<text x="1184" y="292">www</text>
<text x="1372" y="292">eeeeeeeeeeeeee</text>
<text x="1484" y="292">nnnnnn</text>
<text x="1564" y="292">nnnnnn</text>
<text x="1728" y="292">www</text>
<text x="1856" y="292">www</text>
<text x="2020" y="292">uuuuuuuu</text>
<text x="2084" y="292">uuuu</text>
<text x="72" y="308">&lt;:::::&lt;</text>
<text x="160" y="308">:::::</text>
<text x="320" y="308">&gt;:::::&gt;</text>
<text x="552" y="308">y:::::y</text>
<text x="80" y="324">&lt;&lt;&lt;&lt;&lt;&lt;&lt;</text>
<text x="152" y="324">:::::</text>
<text x="312" y="324">&gt;&gt;&gt;&gt;&gt;&gt;&gt;</text>
<text x="544" y="324">y:::::y</text>
<text x="144" y="340">:::::</text>
<text x="536" y="340">y:::::y</text>
<text x="136" y="356">/////</text>
<text x="528" y="356">y:::::y</text>
<text x="512" y="372">yyyyyyy</text>
</g>
</a>
</svg>
<style lang="postcss">
.opendot {
@apply stroke-primary fill-none stroke-[0.1em];
}
.logo {
& .text {
@apply fill-black dark:fill-white;
}
}
.opendot {
@apply stroke-primary fill-none stroke-[0.1em];
}
.logo {
& .text {
@apply fill-black dark:fill-white;
}
}
</style>

36
src/lib/components/BackToTop.svelte
View file

@ -1,29 +1,29 @@
<script>
import { onMount } from 'svelte';
import { fly } from 'svelte/transition';
import Button from './ui/button/button.svelte';
import { ChevronUp } from 'svelte-radix';
import { onMount } from 'svelte'
import { fly } from 'svelte/transition'
import Button from './ui/button/button.svelte'
import { ChevronUp } from 'svelte-radix'
let showButton = false;
let showButton = false
function handleScroll() {
const threshold = 400;
function handleScroll() {
const threshold = 400
showButton = window.scrollY > threshold;
}
showButton = window.scrollY > threshold
}
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
})
}
</script>
<svelte:window on:scroll={handleScroll} />
{#if showButton}
<div class="fixed bottom-10 right-10 z-40" transition:fly={{ y: 50, duration: 150 }}>
<Button size="icon" class="scale-125 md:scale-150" on:click={scrollToTop}><ChevronUp /></Button>
</div>
<div class="fixed bottom-10 right-10 z-40" transition:fly={{ y: 50, duration: 150 }}>
<Button size="icon" class="scale-125 md:scale-150" on:click={scrollToTop}><ChevronUp /></Button>
</div>
{/if}

50
src/lib/components/Blog/Archive.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts">
import ChevronRight from 'svelte-radix/ChevronRight.svelte';
import * as Card from '$lib/components/ui/card';
import Separator from '$lib/components/ui/separator/separator.svelte';
import ChevronRight from 'svelte-radix/ChevronRight.svelte'
import * as Card from '$lib/components/ui/card'
import Separator from '$lib/components/ui/separator/separator.svelte'
export let archived: Object | undefined = undefined;
export let archived: Object | undefined = undefined
</script>
<!--
@ -11,25 +11,25 @@
-->
<Card.Root class="bg-primary-foreground backdrop-blur-sm border-primary/10 min-h-[600px]">
<Card.Header>
<h2 class="text-3xl font-serif font-bold mb-6" id="archive">Archive</h2>
<h3 class="text-3xl font-serif font-medium text-muted-foreground" id="2024">2024</h3>
<Separator class="mt-4 bg-primary/10 h-1" />
</Card.Header>
<Card.Content>
{#if archived}
<div class="grid grid-cols-1 gap-2 mb-8">
<h3 class="text-2xl font-serif font-bold">Placeholder Title</h3>
<p class="text-lg text-muted-foreground">Placeholder</p>
<div class="flex items-center gap-2">
<a href="/blog/2021/01" class="text-primary hover:underline text-lg font-serif"
>Read more</a
>
<ChevronRight class="w-6 h-6 text-primary" />
</div>
</div>
{:else}
<p class="text-lg text-muted-foreground">Nothing here yet.</p>
{/if}
</Card.Content>
<Card.Header>
<h2 class="text-3xl font-serif font-bold mb-6" id="archive">Archive</h2>
<h3 class="text-3xl font-serif font-medium text-muted-foreground" id="2024">2024</h3>
<Separator class="mt-4 bg-primary/10 h-1" />
</Card.Header>
<Card.Content>
{#if archived}
<div class="grid grid-cols-1 gap-2 mb-8">
<h3 class="text-2xl font-serif font-bold">Placeholder Title</h3>
<p class="text-lg text-muted-foreground">Placeholder</p>
<div class="flex items-center gap-2">
<a href="/blog/2021/01" class="text-primary hover:underline text-lg font-serif"
>Read more</a
>
<ChevronRight class="w-6 h-6 text-primary" />
</div>
</div>
{:else}
<p class="text-lg text-muted-foreground">Nothing here yet.</p>
{/if}
</Card.Content>
</Card.Root>

56
src/lib/components/Blog/Article.svelte
View file

@ -1,35 +1,35 @@
<script lang="ts">
import PostMetadata from './PostMetadata.svelte';
import Crumbs from './Crumbs.svelte';
import PostMetadata from './PostMetadata.svelte'
import Crumbs from './Crumbs.svelte'
export let doc: BlogDocument;
export let doc: BlogDocument
</script>
<article>
<Crumbs slug={doc.slug} title={doc.title} />
<header class="space-y-6">
<div class="space-y-2">
<h1 class="scroll-m-20 text-5xl font-bold font-serif tracking-tight">
{doc.title}
</h1>
<p class="text-balance text-lg text-muted-foreground">
{doc.blurb}
</p>
<PostMetadata
primaryTags={doc.primaryTags}
secondaryTags={doc.secondaryTags}
date={doc.date}
length={doc.content.length}
reverseDateAndRest
/>
</div>
<figure class="w-full lg:w-[80%]">
<img src={doc.image.src} alt={doc.image.alt} class="rounded-xl shadow-md" />
<figcaption class="mt-2 text-center text-muted-foreground">{doc.image.caption}</figcaption>
</figure>
</header>
<Crumbs slug={doc.slug} title={doc.title} />
<header class="space-y-6">
<div class="space-y-2">
<h1 class="scroll-m-20 text-5xl font-bold font-serif tracking-tight">
{doc.title}
</h1>
<p class="text-balance text-lg text-muted-foreground">
{doc.blurb}
</p>
<PostMetadata
primaryTags={doc.primaryTags}
secondaryTags={doc.secondaryTags}
date={doc.date}
length={doc.content.length}
reverseDateAndRest
/>
</div>
<figure class="w-full lg:w-[80%]">
<img src={doc.image.src} alt={doc.image.alt} class="rounded-xl shadow-md" />
<figcaption class="mt-2 text-center text-muted-foreground">{doc.image.caption}</figcaption>
</figure>
</header>
<div class="markdown-body mb-8 font-serif">
{@html doc.content}
</div>
<div class="markdown-body mb-8 font-serif">
{@html doc.content}
</div>
</article>

34
src/lib/components/Blog/Crumbs.svelte
View file

@ -1,24 +1,24 @@
<script lang="ts">
import * as Breadcrumb from '../ui/breadcrumb';
import * as Breadcrumb from '../ui/breadcrumb'
export let slug: string;
export let title: string;
export let slug: string
export let title: string
$: trail = slug.split('/').slice(0, slug.split('/').length - 1);
$: trail = slug.split('/').slice(0, slug.split('/').length - 1)
</script>
<Breadcrumb.Root class="mb-4">
<Breadcrumb.List>
<Breadcrumb.Item><Breadcrumb.Link href="/blog">The Coredump</Breadcrumb.Link></Breadcrumb.Item>
<Breadcrumb.Separator />
{#each trail as crumb, i}
<Breadcrumb.Item>{crumb}</Breadcrumb.Item>
<Breadcrumb.Separator />
{/each}
<Breadcrumb.Item>
<Breadcrumb.Page>
{title}
</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
<Breadcrumb.List>
<Breadcrumb.Item><Breadcrumb.Link href="/blog">The Coredump</Breadcrumb.Link></Breadcrumb.Item>
<Breadcrumb.Separator />
{#each trail as crumb, i}
<Breadcrumb.Item>{crumb}</Breadcrumb.Item>
<Breadcrumb.Separator />
{/each}
<Breadcrumb.Item>
<Breadcrumb.Page>
{title}
</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>

66
src/lib/components/Blog/PostCard.svelte
View file

@ -1,39 +1,39 @@
<script lang="ts">
import * as Card from '$lib/components/ui/card';
import Button from '../ui/button/button.svelte';
import PostMetadata from './PostMetadata.svelte';
import * as Card from '$lib/components/ui/card'
import Button from '../ui/button/button.svelte'
import PostMetadata from './PostMetadata.svelte'
export let doc: {
metadata: PostMeta;
content: string;
slug: string;
};
export let doc: {
metadata: PostMeta
content: string
slug: string
}
</script>
<Card.Root>
<Card.Header>
<h3 class="text-3xl lg:text-4xl font-serif font-bold mb-4 leading-tight">
{doc.metadata.title}
</h3>
<p class="text-muted-foreground text-xl">{doc.metadata.manifest.blurb}</p>
<PostMetadata
primaryTags={doc.metadata.manifest.tags.primary}
secondaryTags={doc.metadata.manifest.tags.secondary}
date={doc.metadata.manifest.date}
length={doc.content.split(' ').length}
/>
</Card.Header>
<Card.Content class="grid grid-cols-3 gap-6">
<img
src={doc.metadata.cover.src}
alt={doc.metadata.cover.alt}
class="col-span-3 md:col-span-1 rounded-2xl shadow-md"
/>
<div class="flex flex-col justify-around col-span-3 md:col-span-2 gap-4">
<p class="text-primary/95 font-serif leading-relaxed">{doc.metadata.manifest.description}</p>
<Button variant="outline" href={`/blog/${doc.slug}`} class="text-xl flex-grow sm:flex-grow-0"
>Read More</Button
>
</div>
</Card.Content>
<Card.Header>
<h3 class="text-3xl lg:text-4xl font-serif font-bold mb-4 leading-tight">
{doc.metadata.title}
</h3>
<p class="text-muted-foreground text-xl">{doc.metadata.manifest.blurb}</p>
<PostMetadata
primaryTags={doc.metadata.manifest.tags.primary}
secondaryTags={doc.metadata.manifest.tags.secondary}
date={doc.metadata.manifest.date}
length={doc.content.split(' ').length}
/>
</Card.Header>
<Card.Content class="grid grid-cols-3 gap-6">
<img
src={doc.metadata.cover.src}
alt={doc.metadata.cover.alt}
class="col-span-3 md:col-span-1 rounded-2xl shadow-md"
/>
<div class="flex flex-col justify-around col-span-3 md:col-span-2 gap-4">
<p class="text-primary/95 font-serif leading-relaxed">{doc.metadata.manifest.description}</p>
<Button variant="outline" href={`/blog/${doc.slug}`} class="text-xl flex-grow sm:flex-grow-0"
>Read More</Button
>
</div>
</Card.Content>
</Card.Root>

56
src/lib/components/Blog/PostMetadata.svelte
View file

@ -17,38 +17,38 @@
-->
<script lang="ts">
import Badge from '../ui/badge/badge.svelte';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import Badge from '../ui/badge/badge.svelte'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(relativeTime);
dayjs.extend(relativeTime)
export let primaryTags: string[] = [];
export let secondaryTags: string[] = [];
export let date: Date;
export let length: number;
export let reverseDateAndRest: boolean = false;
export let primaryTags: string[] = []
export let secondaryTags: string[] = []
export let date: Date
export let length: number
export let reverseDateAndRest: boolean = false
let dayjsDate = dayjs(date);
let dayjsDate = dayjs(date)
</script>
<div class="grid grid-cols-1">
{#if !reverseDateAndRest}
<p class="text-muted-foreground/80 my-1 text-lg">{dayjsDate.format('MMMM DD, YYYY')}</p>
{/if}
<span class="flex items-center flex-wrap my-2 gap-2">
{#each primaryTags as tag}
<Badge>{tag}</Badge>
{/each}
{#each secondaryTags as tag}
<Badge variant="secondary">{tag}</Badge>
{/each}
</span>
<!-- Assuming adult silent reading rate of 238 wpm -->
<span class="text-muted-foreground text-sm mt-2">
{dayjsDate.fromNow()} | {Math.ceil(length / 238)} min read | {length} words
</span>
{#if reverseDateAndRest}
<p class="text-muted-foreground/80 text-xl mt-4">{dayjsDate.format('MMMM DD, YYYY')}</p>
{/if}
{#if !reverseDateAndRest}
<p class="text-muted-foreground/80 my-1 text-lg">{dayjsDate.format('MMMM DD, YYYY')}</p>
{/if}
<span class="flex items-center flex-wrap my-2 gap-2">
{#each primaryTags as tag}
<Badge>{tag}</Badge>
{/each}
{#each secondaryTags as tag}
<Badge variant="secondary">{tag}</Badge>
{/each}
</span>
<!-- Assuming adult silent reading rate of 238 wpm -->
<span class="text-muted-foreground text-sm mt-2">
{dayjsDate.fromNow()} | {Math.ceil(length / 238)} min read | {length} words
</span>
{#if reverseDateAndRest}
<p class="text-muted-foreground/80 text-xl mt-4">{dayjsDate.format('MMMM DD, YYYY')}</p>
{/if}
</div>

42
src/lib/components/Footer.svelte
View file

@ -1,26 +1,26 @@
<script lang="ts">
import Separator from './ui/separator/separator.svelte';
import Socials from './Socials.svelte';
import Separator from './ui/separator/separator.svelte'
import Socials from './Socials.svelte'
</script>
<footer class="h-24 px-4 mb-12 text-sm md:text-md xl:text-lg">
<Separator class="mb-4" />
<div class="flex justify-center flex-col gap-4">
<Socials center />
<p class="text-muted-foreground text-center">
&copy 2024 Youwen Wu | Powered by <a
href="https://kit.svelte.dev"
target="_blank"
class="hover:underline"><strong>SvelteKit</strong></a
>
and
<a href="https://www.shadcn-svelte.com/" class="hover:underline" target="_blank"
><strong>shadcn-svelte</strong></a
>
|
<a href="https://github.com/couscousdude/coredump" target="_blank" class="hover:underline"
>View the source</a
>
</p>
</div>
<Separator class="mb-4" />
<div class="flex justify-center flex-col gap-4">
<Socials center />
<p class="text-muted-foreground text-center">
&copy 2024 Youwen Wu | Powered by <a
href="https://kit.svelte.dev"
target="_blank"
class="hover:underline"><strong>SvelteKit</strong></a
>
and
<a href="https://www.shadcn-svelte.com/" class="hover:underline" target="_blank"
><strong>shadcn-svelte</strong></a
>
|
<a href="https://github.com/couscousdude/coredump" target="_blank" class="hover:underline"
>View the source</a
>
</p>
</div>
</footer>

42
src/lib/components/Loading.svelte
View file

@ -1,30 +1,30 @@
<script>
import { fly } from 'svelte/transition';
import { fly } from 'svelte/transition'
</script>
<div class="w-full fixed top-0 left-0 z-50" transition:fly={{ duration: 200, y: -6 }}>
<div class="h-1.5 w-full bg-muted-foreground overflow-hidden">
<div class="progress w-full h-full bg-muted left-right"></div>
</div>
<div class="h-1.5 w-full bg-muted-foreground overflow-hidden">
<div class="progress w-full h-full bg-muted left-right"></div>
</div>
</div>
<style lang="postcss">
.progress {
animation: progress 0.8s infinite linear;
}
.progress {
animation: progress 0.8s infinite linear;
}
.left-right {
transform-origin: 0% 50%;
}
@keyframes progress {
0% {
transform: translateX(0) scaleX(0);
}
40% {
transform: translateX(0) scaleX(0.4);
}
100% {
transform: translateX(100%) scaleX(0.5);
}
}
.left-right {
transform-origin: 0% 50%;
}
@keyframes progress {
0% {
transform: translateX(0) scaleX(0);
}
40% {
transform: translateX(0) scaleX(0.4);
}
100% {
transform: translateX(100%) scaleX(0.5);
}
}
</style>

158
src/lib/components/Navbar/Drawer.svelte
View file

@ -1,84 +1,84 @@
<script lang="ts">
import Name from '$lib/assets/Name.svelte';
import { HamburgerMenu } from 'svelte-radix';
import { Drawer } from 'vaul-svelte';
import Separator from '../ui/separator/separator.svelte';
import Button from '../ui/button/button.svelte';
import { Sun, Moon, Home, Person, File, Backpack } from 'svelte-radix';
import ThemePicker from '../ThemePicker.svelte';
import Name from '$lib/assets/Name.svelte'
import { HamburgerMenu } from 'svelte-radix'
import { Drawer } from 'vaul-svelte'
import Separator from '../ui/separator/separator.svelte'
import Button from '../ui/button/button.svelte'
import { Sun, Moon, Home, Person, File, Backpack } from 'svelte-radix'
import ThemePicker from '../ThemePicker.svelte'
</script>
<Drawer.Root direction="top">
<Drawer.Trigger asChild let:builder>
<Button variant="outline" size="icon" builders={[builder]} class="px-2 md:hidden">
<HamburgerMenu class="icon border-1 border-primary" />
</Button>
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Overlay class="fixed inset-0 bg-black/40" />
<Drawer.Content
class="fixed top-0 left-0 right-0 mb-24 flex flex-col rounded-b-2xl z-50 bg-accent dark:bg-zinc-900"
>
<div class="flex-1 rounded-b-2xl bg-accent dark:bg-zinc-900 p-4 shadow-xl dark:shadow-none">
<div class="mx-auto max-w-md">
<Drawer.Title class="font-medium">
<span class="px-2 flex justify-center">
<Name href="/" width="80vw" height="auto" />
</span>
<Separator class="bg-zinc-300 h-1 rounded-3xl mt-1 dark:bg-zinc-500" />
</Drawer.Title>
<div class="grid grid-cols-1 my-10 gap-4">
<Drawer.Close asChild let:builder>
<Button
variant="link"
href="/"
builders={[builder]}
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
><Home class="mr-2" />Home</Button
>
</Drawer.Close>
<Separator class="bg-zinc-400 dark:bg-zinc-500" />
<Drawer.Close asChild let:builder>
<Button
variant="link"
href="/about"
builders={[builder]}
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
><Person class="mr-2" />About Me</Button
>
</Drawer.Close>
<Separator class="bg-zinc-400 dark:bg-zinc-500" />
<Drawer.Close asChild let:builder>
<Button
variant="link"
href="/portfolio"
builders={[builder]}
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
><Backpack class="mr-2" />Portfolio</Button
>
</Drawer.Close>
<Separator class="bg-zinc-400 dark:bg-zinc-500" />
<Drawer.Close asChild let:builder>
<Button
href="/blog"
variant="link"
builders={[builder]}
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
><File class="mr-2" />Blog</Button
>
</Drawer.Close>
<Separator class="bg-zinc-300 h-1 rounded-3xl mt-1 dark:bg-zinc-500 my-2" />
<ThemePicker let:builder hideLabel wide>
<Button variant="outline" size="lg" builders={[builder]}>
<Sun class="mr-4 dark:hidden" />
<Moon class="mr-4 hidden dark:block" />
Change Theme
</Button>
</ThemePicker>
</div>
</div>
<div class="mx-auto mb-8 h-1.5 w-12 flex-shrink-0 rounded-full bg-zinc-300" />
</div>
</Drawer.Content>
</Drawer.Portal>
<Drawer.Trigger asChild let:builder>
<Button variant="outline" size="icon" builders={[builder]} class="px-2 md:hidden">
<HamburgerMenu class="icon border-1 border-primary" />
</Button>
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Overlay class="fixed inset-0 bg-black/40" />
<Drawer.Content
class="fixed top-0 left-0 right-0 mb-24 flex flex-col rounded-b-2xl z-50 bg-accent dark:bg-zinc-900"
>
<div class="flex-1 rounded-b-2xl bg-accent dark:bg-zinc-900 p-4 shadow-xl dark:shadow-none">
<div class="mx-auto max-w-md">
<Drawer.Title class="font-medium">
<span class="px-2 flex justify-center">
<Name href="/" width="80vw" height="auto" />
</span>
<Separator class="bg-zinc-300 h-1 rounded-3xl mt-1 dark:bg-zinc-500" />
</Drawer.Title>
<div class="grid grid-cols-1 my-10 gap-4">
<Drawer.Close asChild let:builder>
<Button
variant="link"
href="/"
builders={[builder]}
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
><Home class="mr-2" />Home</Button
>
</Drawer.Close>
<Separator class="bg-zinc-400 dark:bg-zinc-500" />
<Drawer.Close asChild let:builder>
<Button
variant="link"
href="/about"
builders={[builder]}
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
><Person class="mr-2" />About Me</Button
>
</Drawer.Close>
<Separator class="bg-zinc-400 dark:bg-zinc-500" />
<Drawer.Close asChild let:builder>
<Button
variant="link"
href="/portfolio"
builders={[builder]}
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
><Backpack class="mr-2" />Portfolio</Button
>
</Drawer.Close>
<Separator class="bg-zinc-400 dark:bg-zinc-500" />
<Drawer.Close asChild let:builder>
<Button
href="/blog"
variant="link"
builders={[builder]}
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
><File class="mr-2" />Blog</Button
>
</Drawer.Close>
<Separator class="bg-zinc-300 h-1 rounded-3xl mt-1 dark:bg-zinc-500 my-2" />
<ThemePicker let:builder hideLabel wide>
<Button variant="outline" size="lg" builders={[builder]}>
<Sun class="mr-4 dark:hidden" />
<Moon class="mr-4 hidden dark:block" />
Change Theme
</Button>
</ThemePicker>
</div>
</div>
<div class="mx-auto mb-8 h-1.5 w-12 flex-shrink-0 rounded-full bg-zinc-300" />
</div>
</Drawer.Content>
</Drawer.Portal>
</Drawer.Root>

128
src/lib/components/Navbar/Navbar.svelte
View file

@ -1,76 +1,76 @@
<script lang="ts">
import Name from '$lib/assets/Name.svelte';
import { onMount } from 'svelte';
import { navigating } from '$app/stores';
import Coredump from '$lib/assets/Coredump.svelte';
import Separator from '../ui/separator/separator.svelte';
import Drawer from './Drawer.svelte';
import ThemePicker from '../ThemePicker.svelte';
import Button from '../ui/button/button.svelte';
import { Moon, Sun } from 'svelte-radix';
import Name from '$lib/assets/Name.svelte'
import { onMount } from 'svelte'
import { navigating } from '$app/stores'
import Coredump from '$lib/assets/Coredump.svelte'
import Separator from '../ui/separator/separator.svelte'
import Drawer from './Drawer.svelte'
import ThemePicker from '../ThemePicker.svelte'
import Button from '../ui/button/button.svelte'
import { Moon, Sun } from 'svelte-radix'
let current: 'blog' | 'about' | 'home' | 'portfolio' | string;
let current: 'blog' | 'about' | 'home' | 'portfolio' | string
const updateCurrent = () => {
const path = window.location.pathname;
if (path === '/') {
current = 'home';
} else {
const segments = path.split('/');
current = segments[1] || 'home';
}
};
const updateCurrent = () => {
const path = window.location.pathname
if (path === '/') {
current = 'home'
} else {
const segments = path.split('/')
current = segments[1] || 'home'
}
}
onMount(() => {
return navigating.subscribe(updateCurrent);
});
onMount(() => {
return navigating.subscribe(updateCurrent)
})
</script>
<nav
class="h-16 lg:h-24 bg-background bg-opacity-50 backdrop-blur-lg fixed w-full z-40 font-serif tracking-tight"
class="h-16 lg:h-24 bg-background bg-opacity-50 backdrop-blur-lg fixed w-full z-40 font-serif tracking-tight"
>
<div class="container mx-auto flex justify-between items-center h-full gap-6 overflow-x-auto">
<Drawer />
{#if current === 'blog'}
<Coredump height="95%" href="/blog" />
{:else}
<Name height="95%" href="/" />
{/if}
<div class="gap-4 lg:gap-14 justify-around align-middle hidden md:flex">
<a
href="/"
class="text-lg sm:text-xl md:text-2xl font-medium text-primary px-4 py-1 rounded-3xl hover:bg-zinc-300 dark:hover:bg-zinc-800 transition-colors duration-200"
class:selected={current === 'home'}>Home</a
>
<a
href="/about"
class="text-lg sm:text-xl md:text-2xl font-medium text-primary px-4 py-1 rounded-3xl hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors duration-200"
class:selected={current === 'about'}>About</a
>
<a
href="/portfolio"
class="text-lg sm:text-xl md:text-2xl font-medium text-primary px-4 py-1 rounded-3xl hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors duration-200"
class:selected={current === 'portfolio'}>Portfolio</a
>
<a
href="/blog"
class="text-lg sm:text-xl md:text-2xl font-medium text-primary px-4 py-1 rounded-3xl hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors duration-200"
class:selected={current === 'blog'}>Blog</a
>
<ThemePicker let:builder>
<Button builders={[builder]} variant="outline" size="icon" class="my-1">
<Sun class="dark:hidden" />
<Moon class="hidden dark:block" />
<span class="sr-only">Toggle theme</span>
</Button>
</ThemePicker>
</div>
</div>
<Separator />
<div class="container mx-auto flex justify-between items-center h-full gap-6 overflow-x-auto">
<Drawer />
{#if current === 'blog'}
<Coredump height="95%" href="/blog" />
{:else}
<Name height="95%" href="/" />
{/if}
<div class="gap-4 lg:gap-14 justify-around align-middle hidden md:flex">
<a
href="/"
class="text-lg sm:text-xl md:text-2xl font-medium text-primary px-4 py-1 rounded-3xl hover:bg-zinc-300 dark:hover:bg-zinc-800 transition-colors duration-200"
class:selected={current === 'home'}>Home</a
>
<a
href="/about"
class="text-lg sm:text-xl md:text-2xl font-medium text-primary px-4 py-1 rounded-3xl hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors duration-200"
class:selected={current === 'about'}>About</a
>
<a
href="/portfolio"
class="text-lg sm:text-xl md:text-2xl font-medium text-primary px-4 py-1 rounded-3xl hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors duration-200"
class:selected={current === 'portfolio'}>Portfolio</a
>
<a
href="/blog"
class="text-lg sm:text-xl md:text-2xl font-medium text-primary px-4 py-1 rounded-3xl hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors duration-200"
class:selected={current === 'blog'}>Blog</a
>
<ThemePicker let:builder>
<Button builders={[builder]} variant="outline" size="icon" class="my-1">
<Sun class="dark:hidden" />
<Moon class="hidden dark:block" />
<span class="sr-only">Toggle theme</span>
</Button>
</ThemePicker>
</div>
</div>
<Separator />
</nav>
<style lang="postcss">
.selected {
@apply bg-zinc-300 dark:bg-zinc-600;
}
.selected {
@apply bg-zinc-300 dark:bg-zinc-600;
}
</style>

190
src/lib/components/Socials.svelte
View file

@ -1,103 +1,103 @@
<script>
import {
InstagramLogo,
TwitterLogo,
GithubLogo,
LinkedinLogo,
DiscordLogo,
EnvelopeClosed,
ClipboardCopy
} from 'svelte-radix';
import * as Popover from '$lib/components/ui/popover';
import {
InstagramLogo,
TwitterLogo,
GithubLogo,
LinkedinLogo,
DiscordLogo,
EnvelopeClosed,
ClipboardCopy
} from 'svelte-radix'
import * as Popover from '$lib/components/ui/popover'
export let center = false;
export let center = false
import Button from './ui/button/button.svelte';
import { toast } from 'svelte-sonner';
import Button from './ui/button/button.svelte'
import { toast } from 'svelte-sonner'
const copyDiscord = async () => {
try {
await navigator.clipboard.writeText('couscousdude');
toast('Copied Discord username to clipboard');
} catch (e) {
console.error(e);
toast('Failed to copy Discord username to clipboard');
}
};
const copyDiscord = async () => {
try {
await navigator.clipboard.writeText('couscousdude')
toast('Copied Discord username to clipboard')
} catch (e) {
console.error(e)
toast('Failed to copy Discord username to clipboard')
}
}
</script>
<div class="flex gap-2 mt-2 flex-wrap" class:justify-center={center}>
<Button
class="hover:scale-110 transition-transform"
variant="ghost"
size="icon"
href="https://github.com/couscousdude"
>
<GithubLogo />
</Button>
<Button
class="hover:scale-110 transition-transform"
variant="ghost"
size="icon"
href="https://www.instagram.com/uncle_uwon/"><InstagramLogo /></Button
>
<Button
class="hover:scale-110 transition-transform"
variant="ghost"
size="icon"
href="https://twitter.com/couscousdude"><TwitterLogo /></Button
>
<Button
class="hover:scale-110 transition-transform"
variant="ghost"
size="icon"
href="https://www.linkedin.com/in/youwen-wu-306221288/>"
>
<LinkedinLogo />
</Button>
<Popover.Root>
<Popover.Trigger asChild let:builder>
<Button
class="hover:scale-110 transition-transform"
variant="ghost"
size="icon"
builders={[builder]}
>
<DiscordLogo />
</Button>
</Popover.Trigger>
<Popover.Content>
Discord (for some reason) doesn't support direct links to profiles. You can find me on discord
with my username, <strong>@couscousdude</strong>.
<Button variant="outline" size="icon" on:click={copyDiscord} class="mt-2"
><ClipboardCopy /></Button
>
</Popover.Content>
</Popover.Root>
<Popover.Root>
<Popover.Trigger asChild let:builder>
<Button
class="hover:scale-110 transition-transform"
variant="ghost"
size="icon"
builders={[builder]}
>
<EnvelopeClosed />
</Button>
</Popover.Trigger>
<Popover.Content>
<p>
You can reach my Gmail at <a class="link" href="mailto:youwenw@gmail.com"
>youwenw@gmail.com</a
>
</p>
<br />
<p>
Or, if you prefer, you can securely email me on Protonmail at <a
class="link"
href="mailto:youwenw@protonmail.com">youwenw@protonmail.com</a
>
</p>
</Popover.Content>
</Popover.Root>
<Button
class="hover:scale-110 transition-transform"
variant="ghost"
size="icon"
href="https://github.com/couscousdude"
>
<GithubLogo />
</Button>
<Button
class="hover:scale-110 transition-transform"
variant="ghost"
size="icon"
href="https://www.instagram.com/uncle_uwon/"><InstagramLogo /></Button
>
<Button
class="hover:scale-110 transition-transform"
variant="ghost"
size="icon"
href="https://twitter.com/couscousdude"><TwitterLogo /></Button
>
<Button
class="hover:scale-110 transition-transform"
variant="ghost"
size="icon"
href="https://www.linkedin.com/in/youwen-wu-306221288/>"
>
<LinkedinLogo />
</Button>
<Popover.Root>
<Popover.Trigger asChild let:builder>
<Button
class="hover:scale-110 transition-transform"
variant="ghost"
size="icon"
builders={[builder]}
>
<DiscordLogo />
</Button>
</Popover.Trigger>
<Popover.Content>
Discord (for some reason) doesn't support direct links to profiles. You can find me on discord
with my username, <strong>@couscousdude</strong>.
<Button variant="outline" size="icon" on:click={copyDiscord} class="mt-2"
><ClipboardCopy /></Button
>
</Popover.Content>
</Popover.Root>
<Popover.Root>
<Popover.Trigger asChild let:builder>
<Button
class="hover:scale-110 transition-transform"
variant="ghost"
size="icon"
builders={[builder]}
>
<EnvelopeClosed />
</Button>
</Popover.Trigger>
<Popover.Content>
<p>
You can reach my Gmail at <a class="link" href="mailto:youwenw@gmail.com"
>youwenw@gmail.com</a
>
</p>
<br />
<p>
Or, if you prefer, you can securely email me on Protonmail at <a
class="link"
href="mailto:youwenw@protonmail.com">youwenw@protonmail.com</a
>
</p>
</Popover.Content>
</Popover.Root>
</div>

50
src/lib/components/TextCycle.svelte
View file

@ -1,34 +1,34 @@
<script lang="ts">
import { onMount } from 'svelte';
import { fly } from 'svelte/transition';
import { onMount } from 'svelte'
import { fly } from 'svelte/transition'
export let items: string[];
export let interval: number = 2000;
export let beforeText: string = '';
export let items: string[]
export let interval: number = 2000
export let beforeText: string = ''
let currentIndex: number = 0;
let timer: number;
let temp = true;
let currentIndex: number = 0
let timer: number
let temp = true
onMount(() => {
timer = setInterval(() => {
currentIndex = (currentIndex + 1) % items.length;
temp = !temp;
}, interval);
onMount(() => {
timer = setInterval(() => {
currentIndex = (currentIndex + 1) % items.length
temp = !temp
}, interval)
return () => clearInterval(timer);
});
return () => clearInterval(timer)
})
</script>
<div class="flex gap-2 text-nowrap flex-wrap">
{beforeText}
{#if temp}
<p in:fly={{ y: -50, duration: 300, delay: 320 }} out:fly={{ y: 50, duration: 300 }}>
{items[currentIndex]}
</p>
{:else}
<p in:fly={{ y: -50, duration: 300, delay: 320 }} out:fly={{ y: 50, duration: 300 }}>
{items[currentIndex]}
</p>
{/if}
{beforeText}
{#if temp}
<p in:fly={{ y: -50, duration: 300, delay: 320 }} out:fly={{ y: 50, duration: 300 }}>
{items[currentIndex]}
</p>
{:else}
<p in:fly={{ y: -50, duration: 300, delay: 320 }} out:fly={{ y: 50, duration: 300 }}>
{items[currentIndex]}
</p>
{/if}
</div>

54
src/lib/components/ThemePicker.svelte
View file

@ -10,37 +10,37 @@
-->
<script lang="ts">
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
import { setMode } from 'mode-watcher';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js'
import { setMode } from 'mode-watcher'
export let hideLabel: boolean = false;
export let wide: boolean = false;
export let hideLabel: boolean = false
export let wide: boolean = false
let modes = [
{ value: 'light', label: 'Light' },
{ value: 'dark', label: 'Dark' },
{ value: 'system', label: 'System' }
];
let modes = [
{ value: 'light', label: 'Light' },
{ value: 'dark', label: 'Dark' },
{ value: 'system', label: 'System' }
]
const changeMode = (mode: string) => {
setMode(mode as 'light' | 'dark' | 'system');
};
const changeMode = (mode: string) => {
setMode(mode as 'light' | 'dark' | 'system')
}
</script>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<slot {builder} />
</DropdownMenu.Trigger>
<DropdownMenu.Content class={wide ? 'w-[80%]' : ''}>
{#if !hideLabel}
<DropdownMenu.Label>Color Theme</DropdownMenu.Label>
{/if}
<DropdownMenu.Group>
{#each modes as { value, label } (value)}
<DropdownMenu.Item on:click={() => changeMode(value)} class={wide ? 'text-md' : ''}>
{label}</DropdownMenu.Item
>
{/each}
</DropdownMenu.Group>
</DropdownMenu.Content>
<DropdownMenu.Trigger asChild let:builder>
<slot {builder} />
</DropdownMenu.Trigger>
<DropdownMenu.Content class={wide ? 'w-[80%]' : ''}>
{#if !hideLabel}
<DropdownMenu.Label>Color Theme</DropdownMenu.Label>
{/if}
<DropdownMenu.Group>
{#each modes as { value, label } (value)}
<DropdownMenu.Item on:click={() => changeMode(value)} class={wide ? 'text-md' : ''}>
{label}</DropdownMenu.Item
>
{/each}
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu.Root>

66
src/lib/components/Toc/MobileToc.svelte
View file

@ -1,40 +1,40 @@
<script lang="ts">
import { toclink, type TocStore } from '@svelte-put/toc';
import * as Accordion from '$lib/components/ui/accordion';
import * as Card from '$lib/components/ui/card';
import { toclink, type TocStore } from '@svelte-put/toc'
import * as Accordion from '$lib/components/ui/accordion'
import * as Card from '$lib/components/ui/card'
export let tocStore: TocStore;
export let tocStore: TocStore
const calcTextClasses = (el: HTMLElement) => {
if (el.tagName === 'H1') return 'text-lg font-medium';
if (el.tagName === 'H2') return 'text-lg';
return 'text-sm text-muted-foreground';
};
const calcTextClasses = (el: HTMLElement) => {
if (el.tagName === 'H1') return 'text-lg font-medium'
if (el.tagName === 'H2') return 'text-lg'
return 'text-sm text-muted-foreground'
}
</script>
<Card.Root class="lg:hidden">
<Card.Content>
<Accordion.Root>
<Accordion.Item value="toc">
<Accordion.Trigger>
<p class="text-lg">On this page</p>
</Accordion.Trigger>
<Accordion.Content>
{#if $tocStore.items.size}
<ol class="border-l-4 border-l-muted px-4">
{#each $tocStore.items.values() as tocItem}
<li class="py-0.5">
<!-- svelte-ignore a11y-missing-attribute a11y-missing-content -->
<a
use:toclink={{ store: tocStore, tocItem, observe: true }}
class={`${calcTextClasses(tocItem.element)}`}
/>
</li>
{/each}
</ol>
{/if}
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</Card.Content>
<Card.Content>
<Accordion.Root>
<Accordion.Item value="toc">
<Accordion.Trigger>
<p class="text-lg">On this page</p>
</Accordion.Trigger>
<Accordion.Content>
{#if $tocStore.items.size}
<ol class="border-l-4 border-l-muted px-4">
{#each $tocStore.items.values() as tocItem}
<li class="py-0.5">
<!-- svelte-ignore a11y-missing-attribute a11y-missing-content -->
<a
use:toclink={{ store: tocStore, tocItem, observe: true }}
class={`${calcTextClasses(tocItem.element)}`}
/>
</li>
{/each}
</ol>
{/if}
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</Card.Content>
</Card.Root>

62
src/lib/components/Toc/StickyToc.svelte
View file

@ -1,41 +1,41 @@
<script lang="ts">
import { toclink, type TocStore } from '@svelte-put/toc';
import * as Card from '$lib/components/ui/card';
import { toclink, type TocStore } from '@svelte-put/toc'
import * as Card from '$lib/components/ui/card'
export let tocStore: TocStore;
export let tocStore: TocStore
const calcTextClasses = (el: HTMLElement) => {
if (el.tagName === 'H1') return 'text-md xl:text-lg font-medium';
if (el.tagName === 'H2') return 'text-md xl:text-lg';
if (el.id === 'end-marker') return 'text-lg xl:text-xl';
return 'text-sm text-muted-foreground';
};
const calcTextClasses = (el: HTMLElement) => {
if (el.tagName === 'H1') return 'text-md xl:text-lg font-medium'
if (el.tagName === 'H2') return 'text-md xl:text-lg'
if (el.id === 'end-marker') return 'text-lg xl:text-xl'
return 'text-sm text-muted-foreground'
}
</script>
<Card.Root>
<Card.Header>
<Card.Title><p class="text-lg xl:text-xl font-serif">On this page</p></Card.Title>
</Card.Header>
<Card.Content>
{#if $tocStore.items.size}
<ol>
{#each $tocStore.items.values() as tocItem}
<li>
<!-- svelte-ignore a11y-missing-attribute a11y-missing-content -->
<a
use:toclink={{ store: tocStore, tocItem, observe: true }}
class:highlighted={$tocStore.activeItem === tocItem}
class={`hover:bg-muted px-2 py-1 rounded-r-sm transition-all border-l-secondary border-l-4 ${calcTextClasses(tocItem.element)}`}
/>
</li>
{/each}
</ol>
{/if}
</Card.Content>
<Card.Header>
<Card.Title><p class="text-lg xl:text-xl font-serif">On this page</p></Card.Title>
</Card.Header>
<Card.Content>
{#if $tocStore.items.size}
<ol>
{#each $tocStore.items.values() as tocItem}
<li>
<!-- svelte-ignore a11y-missing-attribute a11y-missing-content -->
<a
use:toclink={{ store: tocStore, tocItem, observe: true }}
class:highlighted={$tocStore.activeItem === tocItem}
class={`hover:bg-muted px-2 py-1 rounded-r-sm transition-all border-l-secondary border-l-4 ${calcTextClasses(tocItem.element)}`}
/>
</li>
{/each}
</ol>
{/if}
</Card.Content>
</Card.Root>
<style lang="postcss">
.highlighted {
@apply bg-blue-200 dark:bg-blue-900 border-l-blue-500;
}
.highlighted {
@apply bg-blue-200 dark:bg-blue-900 border-l-blue-500;
}
</style>

102
src/lib/components/Toc/TocHeader.svelte
View file

@ -1,64 +1,64 @@
<script lang="ts">
import type { TocStore } from '@svelte-put/toc';
import Separator from '../ui/separator/separator.svelte';
import { Accordion } from 'bits-ui';
import { toclink } from '@svelte-put/toc';
import { CaretDown } from 'svelte-radix';
import { slide } from 'svelte/transition';
import type { TocStore } from '@svelte-put/toc'
import Separator from '../ui/separator/separator.svelte'
import { Accordion } from 'bits-ui'
import { toclink } from '@svelte-put/toc'
import { CaretDown } from 'svelte-radix'
import { slide } from 'svelte/transition'
export let tocStore: TocStore;
export let placeholder: string;
export let tocStore: TocStore
export let placeholder: string
const calcTextClasses = (el: HTMLElement) => {
if (el.tagName === 'H2') return 'text-xl';
return 'text-md text-muted-foreground';
};
const calcTextClasses = (el: HTMLElement) => {
if (el.tagName === 'H2') return 'text-xl'
return 'text-md text-muted-foreground'
}
$: currentDisplayed = $tocStore.activeItem ? $tocStore.activeItem.text : placeholder;
$: currentDisplayed = $tocStore.activeItem ? $tocStore.activeItem.text : placeholder
let value: string;
let value: string
const close = () => {
value = '';
};
const close = () => {
value = ''
}
</script>
<nav class="fixed top-16 left-0 w-full bg-background bg-opacity-50 backdrop-blur-lg z-30 lg:hidden">
<Accordion.Root class="px-8" bind:value>
<Accordion.Item value="toc">
<Accordion.Trigger
class="text-lg font-medium flex w-full flex-1 items-center justify-between py-1 transition-all [&[data-state=open]>span>svg]:rotate-180"
>{currentDisplayed}
<span
class="inline-flex size-8 items-center justify-center rounded-[7px] bg-transparent transition-all hover:bg-dark-10"
><CaretDown class="size-[18px] transition-all duration-200" /></span
>
</Accordion.Trigger>
<Accordion.Content transition={slide} transitionConfig={{ duration: 200 }} class="pb-[25px]">
{#if $tocStore.items.size}
<ol>
{#each $tocStore.items.values() as tocItem}
{@const selected = $tocStore.activeItem === tocItem}
<li class="border-l-secondary border-l-4 py-1" class:highlighted={selected}>
<!-- svelte-ignore a11y-missing-attribute a11y-missing-content a11y-click-events-have-key-events a11y-interactive-supports-focus a11y -->
<a
use:toclink={{ store: tocStore, tocItem, observe: true }}
on:click={close}
role="button"
class={`hover:bg-muted px-2 py-1 rounded-r-sm transition-all ${calcTextClasses(tocItem.element)}`}
/>
</li>
{/each}
</ol>
{/if}
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
<Separator />
<Accordion.Root class="px-8" bind:value>
<Accordion.Item value="toc">
<Accordion.Trigger
class="text-lg font-medium flex w-full flex-1 items-center justify-between py-1 transition-all [&[data-state=open]>span>svg]:rotate-180"
>{currentDisplayed}
<span
class="inline-flex size-8 items-center justify-center rounded-[7px] bg-transparent transition-all hover:bg-dark-10"
><CaretDown class="size-[18px] transition-all duration-200" /></span
>
</Accordion.Trigger>
<Accordion.Content transition={slide} transitionConfig={{ duration: 200 }} class="pb-[25px]">
{#if $tocStore.items.size}
<ol>
{#each $tocStore.items.values() as tocItem}
{@const selected = $tocStore.activeItem === tocItem}
<li class="border-l-secondary border-l-4 py-1" class:highlighted={selected}>
<!-- svelte-ignore a11y-missing-attribute a11y-missing-content a11y-click-events-have-key-events a11y-interactive-supports-focus a11y -->
<a
use:toclink={{ store: tocStore, tocItem, observe: true }}
on:click={close}
role="button"
class={`hover:bg-muted px-2 py-1 rounded-r-sm transition-all ${calcTextClasses(tocItem.element)}`}
/>
</li>
{/each}
</ol>
{/if}
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
<Separator />
</nav>
<style lang="postcss">
.highlighted {
@apply bg-blue-200 dark:bg-blue-900 border-l-blue-500;
}
.highlighted {
@apply bg-blue-200 dark:bg-blue-900 border-l-blue-500;
}
</style>

16
src/lib/components/UnderConstruction.svelte
View file

@ -1,10 +1,10 @@
<main class="dots-background w-full h-screen">
<div class="container max-w-3xl mx-auto p-10">
<h1 class="text-4xl md:text-5xl font-bold text-center tracking-tight mt-20">
🚧 Under Construction 🚧
</h1>
<div class="text-2xl md:text-3xl font-medium mt-10 text-center">
<p>Please excuse the mess! This page is currently under construction.</p>
</div>
</div>
<div class="container max-w-3xl mx-auto p-10">
<h1 class="text-4xl md:text-5xl font-bold text-center tracking-tight mt-20">
🚧 Under Construction 🚧
</h1>
<div class="text-2xl md:text-3xl font-medium mt-10 text-center">
<p>Please excuse the mess! This page is currently under construction.</p>
</div>
</div>
</main>

34
src/lib/components/ui/accordion/accordion-content.svelte
View file

@ -1,26 +1,26 @@
<script lang="ts">
import { Accordion as AccordionPrimitive } from 'bits-ui';
import { slide } from 'svelte/transition';
import { cn } from '$lib/utils.js';
import { Accordion as AccordionPrimitive } from 'bits-ui'
import { slide } from 'svelte/transition'
import { cn } from '$lib/utils.js'
type $$Props = AccordionPrimitive.ContentProps;
type $$Props = AccordionPrimitive.ContentProps
let className: $$Props['class'] = undefined;
export let transition: $$Props['transition'] = slide;
export let transitionConfig: $$Props['transitionConfig'] = {
duration: 200
};
let className: $$Props['class'] = undefined
export let transition: $$Props['transition'] = slide
export let transitionConfig: $$Props['transitionConfig'] = {
duration: 200
}
export { className as class };
export { className as class }
</script>
<AccordionPrimitive.Content
class={cn('overflow-hidden text-sm', className)}
{transition}
{transitionConfig}
{...$$restProps}
class={cn('overflow-hidden text-sm', className)}
{transition}
{transitionConfig}
{...$$restProps}
>
<div class="pb-4 pt-0">
<slot />
</div>
<div class="pb-4 pt-0">
<slot />
</div>
</AccordionPrimitive.Content>

14
src/lib/components/ui/accordion/accordion-item.svelte
View file

@ -1,14 +1,14 @@
<script lang="ts">
import { Accordion as AccordionPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
import { Accordion as AccordionPrimitive } from 'bits-ui'
import { cn } from '$lib/utils.js'
type $$Props = AccordionPrimitive.ItemProps;
type $$Props = AccordionPrimitive.ItemProps
let className: $$Props['class'] = undefined;
export { className as class };
export let value: $$Props['value'];
let className: $$Props['class'] = undefined
export { className as class }
export let value: $$Props['value']
</script>
<AccordionPrimitive.Item {value} class={cn('border-b', className)} {...$$restProps}>
<slot />
<slot />
</AccordionPrimitive.Item>

38
src/lib/components/ui/accordion/accordion-trigger.svelte
View file

@ -1,26 +1,26 @@
<script lang="ts">
import { Accordion as AccordionPrimitive } from 'bits-ui';
import ChevronDown from 'svelte-radix/ChevronDown.svelte';
import { cn } from '$lib/utils.js';
import { Accordion as AccordionPrimitive } from 'bits-ui'
import ChevronDown from 'svelte-radix/ChevronDown.svelte'
import { cn } from '$lib/utils.js'
type $$Props = AccordionPrimitive.TriggerProps;
type $$Events = AccordionPrimitive.TriggerEvents;
type $$Props = AccordionPrimitive.TriggerProps
type $$Events = AccordionPrimitive.TriggerEvents
let className: $$Props['class'] = undefined;
export let level: AccordionPrimitive.HeaderProps['level'] = 3;
export { className as class };
let className: $$Props['class'] = undefined
export let level: AccordionPrimitive.HeaderProps['level'] = 3
export { className as class }
</script>
<AccordionPrimitive.Header {level} class="flex">
<AccordionPrimitive.Trigger
class={cn(
'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
className
)}
{...$$restProps}
on:click
>
<slot />
<ChevronDown class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
</AccordionPrimitive.Trigger>
<AccordionPrimitive.Trigger
class={cn(
'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
className
)}
{...$$restProps}
on:click
>
<slot />
<ChevronDown class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>

30
src/lib/components/ui/accordion/index.ts
View file

@ -1,17 +1,17 @@
import { Accordion as AccordionPrimitive } from 'bits-ui';
import Content from './accordion-content.svelte';
import Item from './accordion-item.svelte';
import Trigger from './accordion-trigger.svelte';
import { Accordion as AccordionPrimitive } from 'bits-ui'
import Content from './accordion-content.svelte'
import Item from './accordion-item.svelte'
import Trigger from './accordion-trigger.svelte'
const Root = AccordionPrimitive.Root;
const Root = AccordionPrimitive.Root
export {
Root,
Content,
Item,
Trigger,
//
Root as Accordion,
Content as AccordionContent,
Item as AccordionItem,
Trigger as AccordionTrigger
};
Root,
Content,
Item,
Trigger,
//
Root as Accordion,
Content as AccordionContent,
Item as AccordionItem,
Trigger as AccordionTrigger
}

26
src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
View file

@ -1,21 +1,21 @@
<script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { buttonVariants } from '$lib/components/ui/button/index.js';
import { cn } from '$lib/utils.js';
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
import { buttonVariants } from '$lib/components/ui/button/index.js'
import { cn } from '$lib/utils.js'
type $$Props = AlertDialogPrimitive.ActionProps;
type $$Events = AlertDialogPrimitive.ActionEvents;
type $$Props = AlertDialogPrimitive.ActionProps
type $$Events = AlertDialogPrimitive.ActionEvents
let className: $$Props['class'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export { className as class }
</script>
<AlertDialogPrimitive.Action
class={cn(buttonVariants(), className)}
{...$$restProps}
on:click
on:keydown
let:builder
class={cn(buttonVariants(), className)}
{...$$restProps}
on:click
on:keydown
let:builder
>
<slot {builder} />
<slot {builder} />
</AlertDialogPrimitive.Action>

26
src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
View file

@ -1,21 +1,21 @@
<script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { buttonVariants } from '$lib/components/ui/button/index.js';
import { cn } from '$lib/utils.js';
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
import { buttonVariants } from '$lib/components/ui/button/index.js'
import { cn } from '$lib/utils.js'
type $$Props = AlertDialogPrimitive.CancelProps;
type $$Events = AlertDialogPrimitive.CancelEvents;
type $$Props = AlertDialogPrimitive.CancelProps
type $$Events = AlertDialogPrimitive.CancelEvents
let className: $$Props['class'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export { className as class }
</script>
<AlertDialogPrimitive.Cancel
class={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
{...$$restProps}
on:click
on:keydown
let:builder
class={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
{...$$restProps}
on:click
on:keydown
let:builder
>
<slot {builder} />
<slot {builder} />
</AlertDialogPrimitive.Cancel>

40
src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
View file

@ -1,27 +1,27 @@
<script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import * as AlertDialog from './index.js';
import { cn, flyAndScale } from '$lib/utils.js';
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
import * as AlertDialog from './index.js'
import { cn, flyAndScale } from '$lib/utils.js'
type $$Props = AlertDialogPrimitive.ContentProps;
type $$Props = AlertDialogPrimitive.ContentProps
let className: $$Props['class'] = undefined;
export let transition: $$Props['transition'] = flyAndScale;
export let transitionConfig: $$Props['transitionConfig'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export let transition: $$Props['transition'] = flyAndScale
export let transitionConfig: $$Props['transitionConfig'] = undefined
export { className as class }
</script>
<AlertDialog.Portal>
<AlertDialog.Overlay />
<AlertDialogPrimitive.Content
{transition}
{transitionConfig}
class={cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full',
className
)}
{...$$restProps}
>
<slot />
</AlertDialogPrimitive.Content>
<AlertDialog.Overlay />
<AlertDialogPrimitive.Content
{transition}
{transitionConfig}
class={cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full',
className
)}
{...$$restProps}
>
<slot />
</AlertDialogPrimitive.Content>
</AlertDialog.Portal>

16
src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
View file

@ -1,16 +1,16 @@
<script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
import { cn } from '$lib/utils.js'
type $$Props = AlertDialogPrimitive.DescriptionProps;
type $$Props = AlertDialogPrimitive.DescriptionProps
let className: $$Props['class'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export { className as class }
</script>
<AlertDialogPrimitive.Description
class={cn('text-sm text-muted-foreground', className)}
{...$$restProps}
class={cn('text-sm text-muted-foreground', className)}
{...$$restProps}
>
<slot />
<slot />
</AlertDialogPrimitive.Description>

16
src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
View file

@ -1,16 +1,16 @@
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements'
import { cn } from '$lib/utils.js'
type $$Props = HTMLAttributes<HTMLDivElement>;
type $$Props = HTMLAttributes<HTMLDivElement>
let className: $$Props['class'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export { className as class }
</script>
<div
class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
{...$$restProps}
class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
{...$$restProps}
>
<slot />
<slot />
</div>

12
src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements'
import { cn } from '$lib/utils.js'
type $$Props = HTMLAttributes<HTMLDivElement>;
type $$Props = HTMLAttributes<HTMLDivElement>
let className: $$Props['class'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export { className as class }
</script>
<div class={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...$$restProps}>
<slot />
<slot />
</div>

28
src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
View file

@ -1,21 +1,21 @@
<script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { fade } from 'svelte/transition';
import { cn } from '$lib/utils.js';
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
import { fade } from 'svelte/transition'
import { cn } from '$lib/utils.js'
type $$Props = AlertDialogPrimitive.OverlayProps;
type $$Props = AlertDialogPrimitive.OverlayProps
let className: $$Props['class'] = undefined;
export let transition: $$Props['transition'] = fade;
export let transitionConfig: $$Props['transitionConfig'] = {
duration: 150
};
export { className as class };
let className: $$Props['class'] = undefined
export let transition: $$Props['transition'] = fade
export let transitionConfig: $$Props['transitionConfig'] = {
duration: 150
}
export { className as class }
</script>
<AlertDialogPrimitive.Overlay
{transition}
{transitionConfig}
class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)}
{...$$restProps}
{transition}
{transitionConfig}
class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)}
{...$$restProps}
/>

6
src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
type $$Props = AlertDialogPrimitive.PortalProps;
type $$Props = AlertDialogPrimitive.PortalProps
</script>
<AlertDialogPrimitive.Portal {...$$restProps}>
<slot />
<slot />
</AlertDialogPrimitive.Portal>

14
src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
View file

@ -1,14 +1,14 @@
<script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
import { cn } from '$lib/utils.js'
type $$Props = AlertDialogPrimitive.TitleProps;
type $$Props = AlertDialogPrimitive.TitleProps
let className: $$Props['class'] = undefined;
export let level: $$Props['level'] = 'h3';
export { className as class };
let className: $$Props['class'] = undefined
export let level: $$Props['level'] = 'h3'
export { className as class }
</script>
<AlertDialogPrimitive.Title class={cn('text-lg font-semibold', className)} {level} {...$$restProps}>
<slot />
<slot />
</AlertDialogPrimitive.Title>

72
src/lib/components/ui/alert-dialog/index.ts
View file

@ -1,40 +1,40 @@
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
import Title from './alert-dialog-title.svelte';
import Action from './alert-dialog-action.svelte';
import Cancel from './alert-dialog-cancel.svelte';
import Portal from './alert-dialog-portal.svelte';
import Footer from './alert-dialog-footer.svelte';
import Header from './alert-dialog-header.svelte';
import Overlay from './alert-dialog-overlay.svelte';
import Content from './alert-dialog-content.svelte';
import Description from './alert-dialog-description.svelte';
import Title from './alert-dialog-title.svelte'
import Action from './alert-dialog-action.svelte'
import Cancel from './alert-dialog-cancel.svelte'
import Portal from './alert-dialog-portal.svelte'
import Footer from './alert-dialog-footer.svelte'
import Header from './alert-dialog-header.svelte'
import Overlay from './alert-dialog-overlay.svelte'
import Content from './alert-dialog-content.svelte'
import Description from './alert-dialog-description.svelte'
const Root = AlertDialogPrimitive.Root;
const Trigger = AlertDialogPrimitive.Trigger;
const Root = AlertDialogPrimitive.Root
const Trigger = AlertDialogPrimitive.Trigger
export {
Root,
Title,
Action,
Cancel,
Portal,
Footer,
Header,
Trigger,
Overlay,
Content,
Description,
//
Root as AlertDialog,
Title as AlertDialogTitle,
Action as AlertDialogAction,
Cancel as AlertDialogCancel,
Portal as AlertDialogPortal,
Footer as AlertDialogFooter,
Header as AlertDialogHeader,
Trigger as AlertDialogTrigger,
Overlay as AlertDialogOverlay,
Content as AlertDialogContent,
Description as AlertDialogDescription
};
Root,
Title,
Action,
Cancel,
Portal,
Footer,
Header,
Trigger,
Overlay,
Content,
Description,
//
Root as AlertDialog,
Title as AlertDialogTitle,
Action as AlertDialogAction,
Cancel as AlertDialogCancel,
Portal as AlertDialogPortal,
Footer as AlertDialogFooter,
Header as AlertDialogHeader,
Trigger as AlertDialogTrigger,
Overlay as AlertDialogOverlay,
Content as AlertDialogContent,
Description as AlertDialogDescription
}

22
src/lib/components/ui/badge/badge.svelte
View file

@ -1,18 +1,18 @@
<script lang="ts">
import { type Variant, badgeVariants } from './index.js';
import { cn } from '$lib/utils.js';
import { type Variant, badgeVariants } from './index.js'
import { cn } from '$lib/utils.js'
let className: string | undefined | null = undefined;
export let href: string | undefined = undefined;
export let variant: Variant = 'default';
export { className as class };
let className: string | undefined | null = undefined
export let href: string | undefined = undefined
export let variant: Variant = 'default'
export { className as class }
</script>
<svelte:element
this={href ? 'a' : 'span'}
{href}
class={cn(badgeVariants({ variant, className }))}
{...$$restProps}
this={href ? 'a' : 'span'}
{href}
class={cn(badgeVariants({ variant, className }))}
{...$$restProps}
>
<slot />
<slot />
</svelte:element>

34
src/lib/components/ui/badge/index.ts
View file

@ -1,20 +1,20 @@
import { type VariantProps, tv } from 'tailwind-variants';
import { type VariantProps, tv } from 'tailwind-variants'
export { default as Badge } from './badge.svelte';
export { default as Badge } from './badge.svelte'
export const badgeVariants = tv({
base: 'inline-flex select-none items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
variants: {
variant: {
default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
destructive:
'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
outline: 'text-foreground'
}
},
defaultVariants: {
variant: 'default'
}
});
base: 'inline-flex select-none items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
variants: {
variant: {
default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
destructive:
'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
outline: 'text-foreground'
}
},
defaultVariants: {
variant: 'default'
}
})
export type Variant = VariantProps<typeof badgeVariants>['variant'];
export type Variant = VariantProps<typeof badgeVariants>['variant']

32
src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
View file

@ -1,24 +1,24 @@
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import DotsHorizontal from 'svelte-radix/DotsHorizontal.svelte';
import { cn } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements'
import DotsHorizontal from 'svelte-radix/DotsHorizontal.svelte'
import { cn } from '$lib/utils.js'
type $$Props = HTMLAttributes<HTMLSpanElement> & {
el?: HTMLSpanElement;
};
type $$Props = HTMLAttributes<HTMLSpanElement> & {
el?: HTMLSpanElement
}
export let el: $$Props['el'] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined
export { className as class }
</script>
<span
bind:this={el}
role="presentation"
aria-hidden="true"
class={cn('flex h-9 w-9 items-center justify-center', className)}
{...$$restProps}
bind:this={el}
role="presentation"
aria-hidden="true"
class={cn('flex h-9 w-9 items-center justify-center', className)}
{...$$restProps}
>
<DotsHorizontal class="h-4 w-4 outline-none" tabindex="-1" />
<span class="sr-only">More</span>
<DotsHorizontal class="h-4 w-4 outline-none" tabindex="-1" />
<span class="sr-only">More</span>
</span>

18
src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
View file

@ -1,16 +1,16 @@
<script lang="ts">
import type { HTMLLiAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
import type { HTMLLiAttributes } from 'svelte/elements'
import { cn } from '$lib/utils.js'
type $$Props = HTMLLiAttributes & {
el?: HTMLLIElement;
};
type $$Props = HTMLLiAttributes & {
el?: HTMLLIElement
}
export let el: $$Props['el'] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined
export { className as class }
</script>
<li bind:this={el} class={cn('inline-flex items-center gap-1.5', className)}>
<slot />
<slot />
</li>

42
src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
View file

@ -1,31 +1,31 @@
<script lang="ts">
import type { HTMLAnchorAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
import type { HTMLAnchorAttributes } from 'svelte/elements'
import { cn } from '$lib/utils.js'
type $$Props = HTMLAnchorAttributes & {
el?: HTMLAnchorElement;
asChild?: boolean;
};
type $$Props = HTMLAnchorAttributes & {
el?: HTMLAnchorElement
asChild?: boolean
}
export let href: $$Props['href'] = undefined;
export let el: $$Props['el'] = undefined;
export let asChild: $$Props['asChild'] = false;
let className: $$Props['class'] = undefined;
export { className as class };
export let href: $$Props['href'] = undefined
export let el: $$Props['el'] = undefined
export let asChild: $$Props['asChild'] = false
let className: $$Props['class'] = undefined
export { className as class }
let attrs: Record<string, unknown>;
let attrs: Record<string, unknown>
$: attrs = {
class: cn('transition-colors hover:text-foreground', className),
href,
...$$restProps
};
$: attrs = {
class: cn('transition-colors hover:text-foreground', className),
href,
...$$restProps
}
</script>
{#if asChild}
<slot {attrs} />
<slot {attrs} />
{:else}
<a bind:this={el} {...attrs} {href}>
<slot {attrs} />
</a>
<a bind:this={el} {...attrs} {href}>
<slot {attrs} />
</a>
{/if}

30
src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
View file

@ -1,23 +1,23 @@
<script lang="ts">
import type { HTMLOlAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
import type { HTMLOlAttributes } from 'svelte/elements'
import { cn } from '$lib/utils.js'
type $$Props = HTMLOlAttributes & {
el?: HTMLOListElement;
};
type $$Props = HTMLOlAttributes & {
el?: HTMLOListElement
}
export let el: $$Props['el'] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined
export { className as class }
</script>
<ol
bind:this={el}
class={cn(
'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
className
)}
{...$$restProps}
bind:this={el}
class={cn(
'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
className
)}
{...$$restProps}
>
<slot />
<slot />
</ol>

30
src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
View file

@ -1,23 +1,23 @@
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements'
import { cn } from '$lib/utils.js'
type $$Props = HTMLAttributes<HTMLSpanElement> & {
el?: HTMLSpanElement;
};
type $$Props = HTMLAttributes<HTMLSpanElement> & {
el?: HTMLSpanElement
}
export let el: $$Props['el'] = undefined;
export let className: $$Props['class'] = undefined;
export { className as class };
export let el: $$Props['el'] = undefined
export let className: $$Props['class'] = undefined
export { className as class }
</script>
<span
bind:this={el}
role="link"
aria-disabled="true"
aria-current="page"
class={cn('font-normal text-foreground', className)}
{...$$restProps}
bind:this={el}
role="link"
aria-disabled="true"
aria-current="page"
class={cn('font-normal text-foreground', className)}
{...$$restProps}
>
<slot />
<slot />
</span>

34
src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
View file

@ -1,25 +1,25 @@
<script lang="ts">
import type { HTMLLiAttributes } from 'svelte/elements';
import ChevronRight from 'svelte-radix/ChevronRight.svelte';
import { cn } from '$lib/utils.js';
import type { HTMLLiAttributes } from 'svelte/elements'
import ChevronRight from 'svelte-radix/ChevronRight.svelte'
import { cn } from '$lib/utils.js'
type $$Props = HTMLLiAttributes & {
el?: HTMLLIElement;
};
type $$Props = HTMLLiAttributes & {
el?: HTMLLIElement
}
export let el: $$Props['el'] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined
export { className as class }
</script>
<li
role="presentation"
aria-hidden="true"
class={cn('[&>svg]:size-3.5', className)}
bind:this={el}
{...$$restProps}
role="presentation"
aria-hidden="true"
class={cn('[&>svg]:size-3.5', className)}
bind:this={el}
{...$$restProps}
>
<slot>
<ChevronRight tabindex="-1" />
</slot>
<slot>
<ChevronRight tabindex="-1" />
</slot>
</li>

16
src/lib/components/ui/breadcrumb/breadcrumb.svelte
View file

@ -1,15 +1,15 @@
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import type { HTMLAttributes } from 'svelte/elements'
type $$Props = HTMLAttributes<HTMLElement> & {
el?: HTMLElement;
};
type $$Props = HTMLAttributes<HTMLElement> & {
el?: HTMLElement
}
export let el: $$Props['el'] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined
export { className as class }
</script>
<nav class={className} bind:this={el} aria-label="breadcrumb" {...$$restProps}>
<slot />
<slot />
</nav>

46
src/lib/components/ui/breadcrumb/index.ts
View file

@ -1,25 +1,25 @@
import Root from './breadcrumb.svelte';
import Ellipsis from './breadcrumb-ellipsis.svelte';
import Item from './breadcrumb-item.svelte';
import Separator from './breadcrumb-separator.svelte';
import Link from './breadcrumb-link.svelte';
import List from './breadcrumb-list.svelte';
import Page from './breadcrumb-page.svelte';
import Root from './breadcrumb.svelte'
import Ellipsis from './breadcrumb-ellipsis.svelte'
import Item from './breadcrumb-item.svelte'
import Separator from './breadcrumb-separator.svelte'
import Link from './breadcrumb-link.svelte'
import List from './breadcrumb-list.svelte'
import Page from './breadcrumb-page.svelte'
export {
Root,
Ellipsis,
Item,
Separator,
Link,
List,
Page,
//
Root as Breadcrumb,
Ellipsis as BreadcrumbEllipsis,
Item as BreadcrumbItem,
Separator as BreadcrumbSeparator,
Link as BreadcrumbLink,
List as BreadcrumbList,
Page as BreadcrumbPage
};
Root,
Ellipsis,
Item,
Separator,
Link,
List,
Page,
//
Root as Breadcrumb,
Ellipsis as BreadcrumbEllipsis,
Item as BreadcrumbItem,
Separator as BreadcrumbSeparator,
Link as BreadcrumbLink,
List as BreadcrumbList,
Page as BreadcrumbPage
}

34
src/lib/components/ui/button/button.svelte
View file

@ -1,25 +1,25 @@
<script lang="ts">
import { Button as ButtonPrimitive } from 'bits-ui';
import { type Events, type Props, buttonVariants } from './index.js';
import { cn } from '$lib/utils.js';
import { Button as ButtonPrimitive } from 'bits-ui'
import { type Events, type Props, buttonVariants } from './index.js'
import { cn } from '$lib/utils.js'
type $$Props = Props;
type $$Events = Events;
type $$Props = Props
type $$Events = Events
let className: $$Props['class'] = undefined;
export let variant: $$Props['variant'] = 'default';
export let size: $$Props['size'] = 'default';
export let builders: $$Props['builders'] = [];
export { className as class };
let className: $$Props['class'] = undefined
export let variant: $$Props['variant'] = 'default'
export let size: $$Props['size'] = 'default'
export let builders: $$Props['builders'] = []
export { className as class }
</script>
<ButtonPrimitive.Root
{builders}
class={cn(buttonVariants({ variant, size, className }))}
type="button"
{...$$restProps}
on:click
on:keydown
{builders}
class={cn(buttonVariants({ variant, size, className }))}
type="button"
{...$$restProps}
on:click
on:keydown
>
<slot />
<slot />
</ButtonPrimitive.Root>

82
src/lib/components/ui/button/index.ts
View file

@ -1,49 +1,49 @@
import type { Button as ButtonPrimitive } from 'bits-ui';
import { type VariantProps, tv } from 'tailwind-variants';
import Root from './button.svelte';
import type { Button as ButtonPrimitive } from 'bits-ui'
import { type VariantProps, tv } from 'tailwind-variants'
import Root from './button.svelte'
const buttonVariants = tv({
base: 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
variants: {
variant: {
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
outline:
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline'
},
size: {
default: 'h-9 px-4 py-2',
sm: 'h-8 rounded-md px-3 text-xs',
lg: 'h-10 rounded-md px-8',
icon: 'h-9 w-9'
}
},
defaultVariants: {
variant: 'default',
size: 'default'
}
});
base: 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
variants: {
variant: {
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
outline:
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline'
},
size: {
default: 'h-9 px-4 py-2',
sm: 'h-8 rounded-md px-3 text-xs',
lg: 'h-10 rounded-md px-8',
icon: 'h-9 w-9'
}
},
defaultVariants: {
variant: 'default',
size: 'default'
}
})
type Variant = VariantProps<typeof buttonVariants>['variant'];
type Size = VariantProps<typeof buttonVariants>['size'];
type Variant = VariantProps<typeof buttonVariants>['variant']
type Size = VariantProps<typeof buttonVariants>['size']
type Props = ButtonPrimitive.Props & {
variant?: Variant;
size?: Size;
};
variant?: Variant
size?: Size
}
type Events = ButtonPrimitive.Events;
type Events = ButtonPrimitive.Events
export {
Root,
type Props,
type Events,
//
Root as Button,
type Props as ButtonProps,
type Events as ButtonEvents,
buttonVariants
};
Root,
type Props,
type Events,
//
Root as Button,
type Props as ButtonProps,
type Events as ButtonEvents,
buttonVariants
}

12
src/lib/components/ui/card/card-content.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements'
import { cn } from '$lib/utils.js'
type $$Props = HTMLAttributes<HTMLDivElement>;
type $$Props = HTMLAttributes<HTMLDivElement>
let className: $$Props['class'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export { className as class }
</script>
<div class={cn('p-6 pt-0', className)} {...$$restProps}>
<slot />
<slot />
</div>

12
src/lib/components/ui/card/card-description.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements'
import { cn } from '$lib/utils.js'
type $$Props = HTMLAttributes<HTMLParagraphElement>;
type $$Props = HTMLAttributes<HTMLParagraphElement>
let className: $$Props['class'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export { className as class }
</script>
<p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
<slot />
<slot />
</p>

12
src/lib/components/ui/card/card-footer.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements'
import { cn } from '$lib/utils.js'
type $$Props = HTMLAttributes<HTMLDivElement>;
type $$Props = HTMLAttributes<HTMLDivElement>
let className: $$Props['class'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export { className as class }
</script>
<div class={cn('flex items-center p-6 pt-0', className)} {...$$restProps}>
<slot />
<slot />
</div>

12
src/lib/components/ui/card/card-header.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements'
import { cn } from '$lib/utils.js'
type $$Props = HTMLAttributes<HTMLDivElement>;
type $$Props = HTMLAttributes<HTMLDivElement>
let className: $$Props['class'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export { className as class }
</script>
<div class={cn('flex flex-col space-y-1.5 p-6', className)} {...$$restProps}>
<slot />
<slot />
</div>

26
src/lib/components/ui/card/card-title.svelte
View file

@ -1,21 +1,21 @@
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import type { HeadingLevel } from './index.js';
import { cn } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements'
import type { HeadingLevel } from './index.js'
import { cn } from '$lib/utils.js'
type $$Props = HTMLAttributes<HTMLHeadingElement> & {
tag?: HeadingLevel;
};
type $$Props = HTMLAttributes<HTMLHeadingElement> & {
tag?: HeadingLevel
}
let className: $$Props['class'] = undefined;
export let tag: $$Props['tag'] = 'h3';
export { className as class };
let className: $$Props['class'] = undefined
export let tag: $$Props['tag'] = 'h3'
export { className as class }
</script>
<svelte:element
this={tag}
class={cn('font-semibold leading-none tracking-tight', className)}
{...$$restProps}
this={tag}
class={cn('font-semibold leading-none tracking-tight', className)}
{...$$restProps}
>
<slot />
<slot />
</svelte:element>

26
src/lib/components/ui/card/card.svelte
View file

@ -1,22 +1,22 @@
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements'
import { cn } from '$lib/utils.js'
type $$Props = HTMLAttributes<HTMLDivElement>;
type $$Props = HTMLAttributes<HTMLDivElement>
let className: $$Props['class'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export { className as class }
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
{...$$restProps}
on:click
on:focusin
on:focusout
on:mouseenter
on:mouseleave
class={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
{...$$restProps}
on:click
on:focusin
on:focusout
on:mouseenter
on:mouseleave
>
<slot />
<slot />
</div>

42
src/lib/components/ui/card/index.ts
View file

@ -1,24 +1,24 @@
import Root from './card.svelte';
import Content from './card-content.svelte';
import Description from './card-description.svelte';
import Footer from './card-footer.svelte';
import Header from './card-header.svelte';
import Title from './card-title.svelte';
import Root from './card.svelte'
import Content from './card-content.svelte'
import Description from './card-description.svelte'
import Footer from './card-footer.svelte'
import Header from './card-header.svelte'
import Title from './card-title.svelte'
export {
Root,
Content,
Description,
Footer,
Header,
Title,
//
Root as Card,
Content as CardContent,
Description as CardDescription,
Footer as CardFooter,
Header as CardHeader,
Title as CardTitle
};
Root,
Content,
Description,
Footer,
Header,
Title,
//
Root as Card,
Content as CardContent,
Description as CardDescription,
Footer as CardFooter,
Header as CardHeader,
Title as CardTitle
}
export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'

34
src/lib/components/ui/drawer/drawer-content.svelte
View file

@ -1,24 +1,24 @@
<script lang="ts">
import { Drawer as DrawerPrimitive } from 'vaul-svelte';
import DrawerOverlay from './drawer-overlay.svelte';
import { cn } from '$lib/utils.js';
import { Drawer as DrawerPrimitive } from 'vaul-svelte'
import DrawerOverlay from './drawer-overlay.svelte'
import { cn } from '$lib/utils.js'
type $$Props = DrawerPrimitive.ContentProps;
type $$Props = DrawerPrimitive.ContentProps
let className: $$Props['class'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export { className as class }
</script>
<DrawerPrimitive.Portal>
<DrawerOverlay />
<DrawerPrimitive.Content
class={cn(
'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
className
)}
{...$$restProps}
>
<div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
<slot />
</DrawerPrimitive.Content>
<DrawerOverlay />
<DrawerPrimitive.Content
class={cn(
'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
className
)}
{...$$restProps}
>
<div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
<slot />
</DrawerPrimitive.Content>
</DrawerPrimitive.Portal>

20
src/lib/components/ui/drawer/drawer-description.svelte
View file

@ -1,18 +1,18 @@
<script lang="ts">
import { Drawer as DrawerPrimitive } from 'vaul-svelte';
import { cn } from '$lib/utils.js';
import { Drawer as DrawerPrimitive } from 'vaul-svelte'
import { cn } from '$lib/utils.js'
type $$Props = DrawerPrimitive.DescriptionProps;
type $$Props = DrawerPrimitive.DescriptionProps
export let el: $$Props['el'] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined
export { className as class }
</script>
<DrawerPrimitive.Description
bind:el
class={cn('text-sm text-muted-foreground', className)}
{...$$restProps}
bind:el
class={cn('text-sm text-muted-foreground', className)}
{...$$restProps}
>
<slot />
<slot />
</DrawerPrimitive.Description>

18
src/lib/components/ui/drawer/drawer-footer.svelte
View file

@ -1,16 +1,16 @@
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements'
import { cn } from '$lib/utils.js'
type $$Props = HTMLAttributes<HTMLDivElement> & {
el?: HTMLDivElement;
};
type $$Props = HTMLAttributes<HTMLDivElement> & {
el?: HTMLDivElement
}
export let el: $$Props['el'] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined
export { className as class }
</script>
<div bind:this={el} class={cn('mt-auto flex flex-col gap-2 p-4', className)} {...$$restProps}>
<slot />
<slot />
</div>

24
src/lib/components/ui/drawer/drawer-header.svelte
View file

@ -1,19 +1,19 @@
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements'
import { cn } from '$lib/utils.js'
type $$Props = HTMLAttributes<HTMLDivElement> & {
el?: HTMLDivElement;
};
export let el: $$Props['el'] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
type $$Props = HTMLAttributes<HTMLDivElement> & {
el?: HTMLDivElement
}
export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined
export { className as class }
</script>
<div
bind:this={el}
class={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
{...$$restProps}
bind:this={el}
class={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
{...$$restProps}
>
<slot />
<slot />
</div>

12
src/lib/components/ui/drawer/drawer-nested.svelte
View file

@ -1,12 +1,12 @@
<script lang="ts">
import { Drawer as DrawerPrimitive } from 'vaul-svelte';
import { Drawer as DrawerPrimitive } from 'vaul-svelte'
type $$Props = DrawerPrimitive.Props;
export let shouldScaleBackground: $$Props['shouldScaleBackground'] = true;
export let open: $$Props['open'] = false;
export let activeSnapPoint: $$Props['activeSnapPoint'] = undefined;
type $$Props = DrawerPrimitive.Props
export let shouldScaleBackground: $$Props['shouldScaleBackground'] = true
export let open: $$Props['open'] = false
export let activeSnapPoint: $$Props['activeSnapPoint'] = undefined
</script>
<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>
<slot />
<slot />
</DrawerPrimitive.NestedRoot>

20
src/lib/components/ui/drawer/drawer-overlay.svelte
View file

@ -1,18 +1,18 @@
<script lang="ts">
import { Drawer as DrawerPrimitive } from 'vaul-svelte';
import { cn } from '$lib/utils.js';
import { Drawer as DrawerPrimitive } from 'vaul-svelte'
import { cn } from '$lib/utils.js'
type $$Props = DrawerPrimitive.OverlayProps;
type $$Props = DrawerPrimitive.OverlayProps
export let el: $$Props['el'] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined
export { className as class }
</script>
<DrawerPrimitive.Overlay
bind:el
class={cn('fixed inset-0 z-50 bg-black/80', className)}
{...$$restProps}
bind:el
class={cn('fixed inset-0 z-50 bg-black/80', className)}
{...$$restProps}
>
<slot />
<slot />
</DrawerPrimitive.Overlay>

20
src/lib/components/ui/drawer/drawer-title.svelte
View file

@ -1,18 +1,18 @@
<script lang="ts">
import { Drawer as DrawerPrimitive } from 'vaul-svelte';
import { cn } from '$lib/utils.js';
import { Drawer as DrawerPrimitive } from 'vaul-svelte'
import { cn } from '$lib/utils.js'
type $$Props = DrawerPrimitive.TitleProps;
type $$Props = DrawerPrimitive.TitleProps
export let el: $$Props['el'] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined
export { className as class }
</script>
<DrawerPrimitive.Title
bind:el
class={cn('text-lg font-semibold leading-none tracking-tight', className)}
{...$$restProps}
bind:el
class={cn('text-lg font-semibold leading-none tracking-tight', className)}
{...$$restProps}
>
<slot />
<slot />
</DrawerPrimitive.Title>

12
src/lib/components/ui/drawer/drawer.svelte
View file

@ -1,12 +1,12 @@
<script lang="ts">
import { Drawer as DrawerPrimitive } from 'vaul-svelte';
import { Drawer as DrawerPrimitive } from 'vaul-svelte'
type $$Props = DrawerPrimitive.Props;
export let shouldScaleBackground: $$Props['shouldScaleBackground'] = true;
export let open: $$Props['open'] = false;
export let activeSnapPoint: $$Props['activeSnapPoint'] = undefined;
type $$Props = DrawerPrimitive.Props
export let shouldScaleBackground: $$Props['shouldScaleBackground'] = true
export let open: $$Props['open'] = false
export let activeSnapPoint: $$Props['activeSnapPoint'] = undefined
</script>
<DrawerPrimitive.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>
<slot />
<slot />
</DrawerPrimitive.Root>

72
src/lib/components/ui/drawer/index.ts
View file

@ -1,40 +1,40 @@
import { Drawer as DrawerPrimitive } from 'vaul-svelte';
import { Drawer as DrawerPrimitive } from 'vaul-svelte'
import Root from './drawer.svelte';
import Content from './drawer-content.svelte';
import Description from './drawer-description.svelte';
import Overlay from './drawer-overlay.svelte';
import Footer from './drawer-footer.svelte';
import Header from './drawer-header.svelte';
import Title from './drawer-title.svelte';
import NestedRoot from './drawer-nested.svelte';
import Root from './drawer.svelte'
import Content from './drawer-content.svelte'
import Description from './drawer-description.svelte'
import Overlay from './drawer-overlay.svelte'
import Footer from './drawer-footer.svelte'
import Header from './drawer-header.svelte'
import Title from './drawer-title.svelte'
import NestedRoot from './drawer-nested.svelte'
const Trigger = DrawerPrimitive.Trigger;
const Portal = DrawerPrimitive.Portal;
const Close = DrawerPrimitive.Close;
const Trigger = DrawerPrimitive.Trigger
const Portal = DrawerPrimitive.Portal
const Close = DrawerPrimitive.Close
export {
Root,
NestedRoot,
Content,
Description,
Overlay,
Footer,
Header,
Title,
Trigger,
Portal,
Close,
//
Root as Drawer,
NestedRoot as DrawerNestedRoot,
Content as DrawerContent,
Description as DrawerDescription,
Overlay as DrawerOverlay,
Footer as DrawerFooter,
Header as DrawerHeader,
Title as DrawerTitle,
Trigger as DrawerTrigger,
Portal as DrawerPortal,
Close as DrawerClose
};
Root,
NestedRoot,
Content,
Description,
Overlay,
Footer,
Header,
Title,
Trigger,
Portal,
Close,
//
Root as Drawer,
NestedRoot as DrawerNestedRoot,
Content as DrawerContent,
Description as DrawerDescription,
Overlay as DrawerOverlay,
Footer as DrawerFooter,
Header as DrawerHeader,
Title as DrawerTitle,
Trigger as DrawerTrigger,
Portal as DrawerPortal,
Close as DrawerClose
}

54
src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
View file

@ -1,35 +1,35 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import Check from 'svelte-radix/Check.svelte';
import { cn } from '$lib/utils.js';
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
import Check from 'svelte-radix/Check.svelte'
import { cn } from '$lib/utils.js'
type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
type $$Props = DropdownMenuPrimitive.CheckboxItemProps
type $$Events = DropdownMenuPrimitive.CheckboxItemEvents
let className: $$Props['class'] = undefined;
export let checked: $$Props['checked'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export let checked: $$Props['checked'] = undefined
export { className as class }
</script>
<DropdownMenuPrimitive.CheckboxItem
bind:checked
class={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
className
)}
{...$$restProps}
on:click
on:keydown
on:focusin
on:focusout
on:pointerdown
on:pointerleave
on:pointermove
bind:checked
class={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
className
)}
{...$$restProps}
on:click
on:keydown
on:focusin
on:focusout
on:pointerdown
on:pointerleave
on:pointermove
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.CheckboxIndicator>
<Check class="h-4 w-4" />
</DropdownMenuPrimitive.CheckboxIndicator>
</span>
<slot />
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.CheckboxIndicator>
<Check class="h-4 w-4" />
</DropdownMenuPrimitive.CheckboxIndicator>
</span>
<slot />
</DropdownMenuPrimitive.CheckboxItem>

36
src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
View file

@ -1,26 +1,26 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import { cn, flyAndScale } from '$lib/utils.js';
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
import { cn, flyAndScale } from '$lib/utils.js'
type $$Props = DropdownMenuPrimitive.ContentProps;
type $$Props = DropdownMenuPrimitive.ContentProps
let className: $$Props['class'] = undefined;
export let sideOffset: $$Props['sideOffset'] = 4;
export let transition: $$Props['transition'] = flyAndScale;
export let transitionConfig: $$Props['transitionConfig'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export let sideOffset: $$Props['sideOffset'] = 4
export let transition: $$Props['transition'] = flyAndScale
export let transitionConfig: $$Props['transitionConfig'] = undefined
export { className as class }
</script>
<DropdownMenuPrimitive.Content
{transition}
{transitionConfig}
{sideOffset}
class={cn(
'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
className
)}
{...$$restProps}
on:keydown
{transition}
{transitionConfig}
{sideOffset}
class={cn(
'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
className
)}
{...$$restProps}
on:keydown
>
<slot />
<slot />
</DropdownMenuPrimitive.Content>

46
src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
View file

@ -1,31 +1,31 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
import { cn } from '$lib/utils.js'
type $$Props = DropdownMenuPrimitive.ItemProps & {
inset?: boolean;
};
type $$Events = DropdownMenuPrimitive.ItemEvents;
type $$Props = DropdownMenuPrimitive.ItemProps & {
inset?: boolean
}
type $$Events = DropdownMenuPrimitive.ItemEvents
let className: $$Props['class'] = undefined;
export let inset: $$Props['inset'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export let inset: $$Props['inset'] = undefined
export { className as class }
</script>
<DropdownMenuPrimitive.Item
class={cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
inset && 'pl-8',
className
)}
on:click
on:keydown
on:focusin
on:focusout
on:pointerdown
on:pointerleave
on:pointermove
{...$$restProps}
class={cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
inset && 'pl-8',
className
)}
on:click
on:keydown
on:focusin
on:focusout
on:pointerdown
on:pointerleave
on:pointermove
{...$$restProps}
>
<slot />
<slot />
</DropdownMenuPrimitive.Item>

22
src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
View file

@ -1,19 +1,19 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
import { cn } from '$lib/utils.js'
type $$Props = DropdownMenuPrimitive.LabelProps & {
inset?: boolean;
};
type $$Props = DropdownMenuPrimitive.LabelProps & {
inset?: boolean
}
let className: $$Props['class'] = undefined;
export let inset: $$Props['inset'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export let inset: $$Props['inset'] = undefined
export { className as class }
</script>
<DropdownMenuPrimitive.Label
class={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
{...$$restProps}
class={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
{...$$restProps}
>
<slot />
<slot />
</DropdownMenuPrimitive.Label>

8
src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
View file

@ -1,11 +1,11 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
type $$Props = DropdownMenuPrimitive.RadioGroupProps;
type $$Props = DropdownMenuPrimitive.RadioGroupProps
export let value: $$Props['value'] = undefined;
export let value: $$Props['value'] = undefined
</script>
<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
<slot />
<slot />
</DropdownMenuPrimitive.RadioGroup>

54
src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
View file

@ -1,35 +1,35 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import DotFilled from 'svelte-radix/DotFilled.svelte';
import { cn } from '$lib/utils.js';
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
import DotFilled from 'svelte-radix/DotFilled.svelte'
import { cn } from '$lib/utils.js'
type $$Props = DropdownMenuPrimitive.RadioItemProps;
type $$Events = DropdownMenuPrimitive.RadioItemEvents;
type $$Props = DropdownMenuPrimitive.RadioItemProps
type $$Events = DropdownMenuPrimitive.RadioItemEvents
let className: $$Props['class'] = undefined;
export let value: DropdownMenuPrimitive.RadioItemProps['value'];
export { className as class };
let className: $$Props['class'] = undefined
export let value: DropdownMenuPrimitive.RadioItemProps['value']
export { className as class }
</script>
<DropdownMenuPrimitive.RadioItem
class={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
className
)}
{value}
{...$$restProps}
on:click
on:keydown
on:focusin
on:focusout
on:pointerdown
on:pointerleave
on:pointermove
class={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
className
)}
{value}
{...$$restProps}
on:click
on:keydown
on:focusin
on:focusout
on:pointerdown
on:pointerleave
on:pointermove
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.RadioIndicator>
<DotFilled class="h-4 w-4 fill-current" />
</DropdownMenuPrimitive.RadioIndicator>
</span>
<slot />
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.RadioIndicator>
<DotFilled class="h-4 w-4 fill-current" />
</DropdownMenuPrimitive.RadioIndicator>
</span>
<slot />
</DropdownMenuPrimitive.RadioItem>

14
src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
View file

@ -1,14 +1,14 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
import { cn } from '$lib/utils.js'
type $$Props = DropdownMenuPrimitive.SeparatorProps;
type $$Props = DropdownMenuPrimitive.SeparatorProps
let className: $$Props['class'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export { className as class }
</script>
<DropdownMenuPrimitive.Separator
class={cn('-mx-1 my-1 h-px bg-muted', className)}
{...$$restProps}
class={cn('-mx-1 my-1 h-px bg-muted', className)}
{...$$restProps}
/>

12
src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements'
import { cn } from '$lib/utils.js'
type $$Props = HTMLAttributes<HTMLSpanElement>;
type $$Props = HTMLAttributes<HTMLSpanElement>
let className: $$Props['class'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export { className as class }
</script>
<span class={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...$$restProps}>
<slot />
<slot />
</span>

42
src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
View file

@ -1,29 +1,29 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import { cn, flyAndScale } from '$lib/utils.js';
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
import { cn, flyAndScale } from '$lib/utils.js'
type $$Props = DropdownMenuPrimitive.SubContentProps;
type $$Props = DropdownMenuPrimitive.SubContentProps
let className: $$Props['class'] = undefined;
export let transition: $$Props['transition'] = flyAndScale;
export let transitionConfig: $$Props['transitionConfig'] = {
x: -10,
y: 0
};
export { className as class };
let className: $$Props['class'] = undefined
export let transition: $$Props['transition'] = flyAndScale
export let transitionConfig: $$Props['transitionConfig'] = {
x: -10,
y: 0
}
export { className as class }
</script>
<DropdownMenuPrimitive.SubContent
{transition}
{transitionConfig}
class={cn(
'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none',
className
)}
{...$$restProps}
on:keydown
on:focusout
on:pointermove
{transition}
{transitionConfig}
class={cn(
'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none',
className
)}
{...$$restProps}
on:keydown
on:focusout
on:pointermove
>
<slot />
<slot />
</DropdownMenuPrimitive.SubContent>

48
src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
View file

@ -1,32 +1,32 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import ChevronRight from 'svelte-radix/ChevronRight.svelte';
import { cn } from '$lib/utils.js';
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
import ChevronRight from 'svelte-radix/ChevronRight.svelte'
import { cn } from '$lib/utils.js'
type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
inset?: boolean;
};
type $$Events = DropdownMenuPrimitive.SubTriggerEvents;
type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
inset?: boolean
}
type $$Events = DropdownMenuPrimitive.SubTriggerEvents
let className: $$Props['class'] = undefined;
export let inset: $$Props['inset'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export let inset: $$Props['inset'] = undefined
export { className as class }
</script>
<DropdownMenuPrimitive.SubTrigger
class={cn(
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground',
inset && 'pl-8',
className
)}
{...$$restProps}
on:click
on:keydown
on:focusin
on:focusout
on:pointerleave
on:pointermove
class={cn(
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground',
inset && 'pl-8',
className
)}
{...$$restProps}
on:click
on:keydown
on:focusin
on:focusout
on:pointerleave
on:pointermove
>
<slot />
<ChevronRight class="ml-auto h-4 w-4" />
<slot />
<ChevronRight class="ml-auto h-4 w-4" />
</DropdownMenuPrimitive.SubTrigger>

90
src/lib/components/ui/dropdown-menu/index.ts
View file

@ -1,48 +1,48 @@
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import Item from './dropdown-menu-item.svelte';
import Label from './dropdown-menu-label.svelte';
import Content from './dropdown-menu-content.svelte';
import Shortcut from './dropdown-menu-shortcut.svelte';
import RadioItem from './dropdown-menu-radio-item.svelte';
import Separator from './dropdown-menu-separator.svelte';
import RadioGroup from './dropdown-menu-radio-group.svelte';
import SubContent from './dropdown-menu-sub-content.svelte';
import SubTrigger from './dropdown-menu-sub-trigger.svelte';
import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
import Item from './dropdown-menu-item.svelte'
import Label from './dropdown-menu-label.svelte'
import Content from './dropdown-menu-content.svelte'
import Shortcut from './dropdown-menu-shortcut.svelte'
import RadioItem from './dropdown-menu-radio-item.svelte'
import Separator from './dropdown-menu-separator.svelte'
import RadioGroup from './dropdown-menu-radio-group.svelte'
import SubContent from './dropdown-menu-sub-content.svelte'
import SubTrigger from './dropdown-menu-sub-trigger.svelte'
import CheckboxItem from './dropdown-menu-checkbox-item.svelte'
const Sub = DropdownMenuPrimitive.Sub;
const Root = DropdownMenuPrimitive.Root;
const Trigger = DropdownMenuPrimitive.Trigger;
const Group = DropdownMenuPrimitive.Group;
const Sub = DropdownMenuPrimitive.Sub
const Root = DropdownMenuPrimitive.Root
const Trigger = DropdownMenuPrimitive.Trigger
const Group = DropdownMenuPrimitive.Group
export {
Sub,
Root,
Item,
Label,
Group,
Trigger,
Content,
Shortcut,
Separator,
RadioItem,
SubContent,
SubTrigger,
RadioGroup,
CheckboxItem,
//
Root as DropdownMenu,
Sub as DropdownMenuSub,
Item as DropdownMenuItem,
Label as DropdownMenuLabel,
Group as DropdownMenuGroup,
Content as DropdownMenuContent,
Trigger as DropdownMenuTrigger,
Shortcut as DropdownMenuShortcut,
RadioItem as DropdownMenuRadioItem,
Separator as DropdownMenuSeparator,
RadioGroup as DropdownMenuRadioGroup,
SubContent as DropdownMenuSubContent,
SubTrigger as DropdownMenuSubTrigger,
CheckboxItem as DropdownMenuCheckboxItem
};
Sub,
Root,
Item,
Label,
Group,
Trigger,
Content,
Shortcut,
Separator,
RadioItem,
SubContent,
SubTrigger,
RadioGroup,
CheckboxItem,
//
Root as DropdownMenu,
Sub as DropdownMenuSub,
Item as DropdownMenuItem,
Label as DropdownMenuLabel,
Group as DropdownMenuGroup,
Content as DropdownMenuContent,
Trigger as DropdownMenuTrigger,
Shortcut as DropdownMenuShortcut,
RadioItem as DropdownMenuRadioItem,
Separator as DropdownMenuSeparator,
RadioGroup as DropdownMenuRadioGroup,
SubContent as DropdownMenuSubContent,
SubTrigger as DropdownMenuSubTrigger,
CheckboxItem as DropdownMenuCheckboxItem
}

30
src/lib/components/ui/popover/index.ts
View file

@ -1,17 +1,17 @@
import { Popover as PopoverPrimitive } from 'bits-ui';
import Content from './popover-content.svelte';
const Root = PopoverPrimitive.Root;
const Trigger = PopoverPrimitive.Trigger;
const Close = PopoverPrimitive.Close;
import { Popover as PopoverPrimitive } from 'bits-ui'
import Content from './popover-content.svelte'
const Root = PopoverPrimitive.Root
const Trigger = PopoverPrimitive.Trigger
const Close = PopoverPrimitive.Close
export {
Root,
Content,
Trigger,
Close,
//
Root as Popover,
Content as PopoverContent,
Trigger as PopoverTrigger,
Close as PopoverClose
};
Root,
Content,
Trigger,
Close,
//
Root as Popover,
Content as PopoverContent,
Trigger as PopoverTrigger,
Close as PopoverClose
}

38
src/lib/components/ui/popover/popover-content.svelte
View file

@ -1,27 +1,27 @@
<script lang="ts">
import { Popover as PopoverPrimitive } from 'bits-ui';
import { cn, flyAndScale } from '$lib/utils.js';
import { Popover as PopoverPrimitive } from 'bits-ui'
import { cn, flyAndScale } from '$lib/utils.js'
type $$Props = PopoverPrimitive.ContentProps;
type $$Props = PopoverPrimitive.ContentProps
let className: $$Props['class'] = undefined;
export let transition: $$Props['transition'] = flyAndScale;
export let transitionConfig: $$Props['transitionConfig'] = undefined;
export let align: $$Props['align'] = 'center';
export let sideOffset: $$Props['sideOffset'] = 4;
export { className as class };
let className: $$Props['class'] = undefined
export let transition: $$Props['transition'] = flyAndScale
export let transitionConfig: $$Props['transitionConfig'] = undefined
export let align: $$Props['align'] = 'center'
export let sideOffset: $$Props['sideOffset'] = 4
export { className as class }
</script>
<PopoverPrimitive.Content
{transition}
{transitionConfig}
{align}
{sideOffset}
{...$$restProps}
class={cn(
'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
className
)}
{transition}
{transitionConfig}
{align}
{sideOffset}
{...$$restProps}
class={cn(
'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
className
)}
>
<slot />
<slot />
</PopoverPrimitive.Content>

16
src/lib/components/ui/scroll-area/index.ts
View file

@ -1,10 +1,10 @@
import Scrollbar from './scroll-area-scrollbar.svelte';
import Root from './scroll-area.svelte';
import Scrollbar from './scroll-area-scrollbar.svelte'
import Root from './scroll-area.svelte'
export {
Root,
Scrollbar,
//,
Root as ScrollArea,
Scrollbar as ScrollAreaScrollbar
};
Root,
Scrollbar,
//,
Root as ScrollArea,
Scrollbar as ScrollAreaScrollbar
}

38
src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
View file

@ -1,27 +1,27 @@
<script lang="ts">
import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui'
import { cn } from '$lib/utils.js'
type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
orientation?: 'vertical' | 'horizontal';
};
type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
orientation?: 'vertical' | 'horizontal'
}
let className: $$Props['class'] = undefined;
export let orientation: $$Props['orientation'] = 'vertical';
export { className as class };
let className: $$Props['class'] = undefined
export let orientation: $$Props['orientation'] = 'vertical'
export { className as class }
</script>
<ScrollAreaPrimitive.Scrollbar
{orientation}
class={cn(
'flex touch-none select-none transition-colors',
orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
orientation === 'horizontal' && 'h-2.5 w-full border-t border-t-transparent p-px',
className
)}
{orientation}
class={cn(
'flex touch-none select-none transition-colors',
orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
orientation === 'horizontal' && 'h-2.5 w-full border-t border-t-transparent p-px',
className
)}
>
<slot />
<ScrollAreaPrimitive.Thumb
class={cn('relative rounded-full bg-border', orientation === 'vertical' && 'flex-1')}
/>
<slot />
<ScrollAreaPrimitive.Thumb
class={cn('relative rounded-full bg-border', orientation === 'vertical' && 'flex-1')}
/>
</ScrollAreaPrimitive.Scrollbar>

50
src/lib/components/ui/scroll-area/scroll-area.svelte
View file

@ -1,32 +1,32 @@
<script lang="ts">
import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
import { Scrollbar } from './index.js';
import { cn } from '$lib/utils.js';
import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui'
import { Scrollbar } from './index.js'
import { cn } from '$lib/utils.js'
type $$Props = ScrollAreaPrimitive.Props & {
orientation?: 'vertical' | 'horizontal' | 'both';
scrollbarXClasses?: string;
scrollbarYClasses?: string;
};
type $$Props = ScrollAreaPrimitive.Props & {
orientation?: 'vertical' | 'horizontal' | 'both'
scrollbarXClasses?: string
scrollbarYClasses?: string
}
let className: $$Props['class'] = undefined;
export { className as class };
export let orientation = 'vertical';
export let scrollbarXClasses: string = '';
export let scrollbarYClasses: string = '';
let className: $$Props['class'] = undefined
export { className as class }
export let orientation = 'vertical'
export let scrollbarXClasses: string = ''
export let scrollbarYClasses: string = ''
</script>
<ScrollAreaPrimitive.Root {...$$restProps} class={cn('relative overflow-hidden', className)}>
<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
<ScrollAreaPrimitive.Content>
<slot />
</ScrollAreaPrimitive.Content>
</ScrollAreaPrimitive.Viewport>
{#if orientation === 'vertical' || orientation === 'both'}
<Scrollbar orientation="vertical" class={scrollbarYClasses} />
{/if}
{#if orientation === 'horizontal' || orientation === 'both'}
<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
{/if}
<ScrollAreaPrimitive.Corner />
<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
<ScrollAreaPrimitive.Content>
<slot />
</ScrollAreaPrimitive.Content>
</ScrollAreaPrimitive.Viewport>
{#if orientation === 'vertical' || orientation === 'both'}
<Scrollbar orientation="vertical" class={scrollbarYClasses} />
{/if}
{#if orientation === 'horizontal' || orientation === 'both'}
<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
{/if}
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>

10
src/lib/components/ui/separator/index.ts
View file

@ -1,7 +1,7 @@
import Root from './separator.svelte';
import Root from './separator.svelte'
export {
Root,
//
Root as Separator
};
Root,
//
Root as Separator
}

30
src/lib/components/ui/separator/separator.svelte
View file

@ -1,22 +1,22 @@
<script lang="ts">
import { Separator as SeparatorPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
import { Separator as SeparatorPrimitive } from 'bits-ui'
import { cn } from '$lib/utils.js'
type $$Props = SeparatorPrimitive.Props;
type $$Props = SeparatorPrimitive.Props
let className: $$Props['class'] = undefined;
export let orientation: $$Props['orientation'] = 'horizontal';
export let decorative: $$Props['decorative'] = undefined;
export { className as class };
let className: $$Props['class'] = undefined
export let orientation: $$Props['orientation'] = 'horizontal'
export let decorative: $$Props['decorative'] = undefined
export { className as class }
</script>
<SeparatorPrimitive.Root
class={cn(
'shrink-0 bg-border',
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
className
)}
{orientation}
{decorative}
{...$$restProps}
class={cn(
'shrink-0 bg-border',
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
className
)}
{orientation}
{decorative}
{...$$restProps}
/>

2
src/lib/components/ui/sonner/index.ts
View file

@ -1 +1 @@
export { default as Toaster } from './sonner.svelte';
export { default as Toaster } from './sonner.svelte'

30
src/lib/components/ui/sonner/sonner.svelte
View file

@ -1,21 +1,21 @@
<script lang="ts">
import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
import { mode } from 'mode-watcher';
import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner'
import { mode } from 'mode-watcher'
type $$Props = SonnerProps;
type $$Props = SonnerProps
</script>
<Sonner
theme={$mode}
class="toaster group"
toastOptions={{
classes: {
toast:
'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
description: 'group-[.toast]:text-muted-foreground',
actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
}
}}
{...$$restProps}
theme={$mode}
class="toaster group"
toastOptions={{
classes: {
toast:
'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
description: 'group-[.toast]:text-muted-foreground',
actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
}
}}
{...$$restProps}
/>

24
src/lib/components/ui/tooltip/index.ts
View file

@ -1,15 +1,15 @@
import { Tooltip as TooltipPrimitive } from 'bits-ui';
import Content from './tooltip-content.svelte';
import { Tooltip as TooltipPrimitive } from 'bits-ui'
import Content from './tooltip-content.svelte'
const Root = TooltipPrimitive.Root;
const Trigger = TooltipPrimitive.Trigger;
const Root = TooltipPrimitive.Root
const Trigger = TooltipPrimitive.Trigger
export {
Root,
Trigger,
Content,
//
Root as Tooltip,
Content as TooltipContent,
Trigger as TooltipTrigger
};
Root,
Trigger,
Content,
//
Root as Tooltip,
Content as TooltipContent,
Trigger as TooltipTrigger
}

40
src/lib/components/ui/tooltip/tooltip-content.svelte
View file

@ -1,28 +1,28 @@
<script lang="ts">
import { Tooltip as TooltipPrimitive } from 'bits-ui';
import { cn, flyAndScale } from '$lib/utils.js';
import { Tooltip as TooltipPrimitive } from 'bits-ui'
import { cn, flyAndScale } from '$lib/utils.js'
type $$Props = TooltipPrimitive.ContentProps;
type $$Props = TooltipPrimitive.ContentProps
let className: $$Props['class'] = undefined;
export let sideOffset: $$Props['sideOffset'] = 4;
export let transition: $$Props['transition'] = flyAndScale;
export let transitionConfig: $$Props['transitionConfig'] = {
y: 8,
duration: 150
};
export { className as class };
let className: $$Props['class'] = undefined
export let sideOffset: $$Props['sideOffset'] = 4
export let transition: $$Props['transition'] = flyAndScale
export let transitionConfig: $$Props['transitionConfig'] = {
y: 8,
duration: 150
}
export { className as class }
</script>
<TooltipPrimitive.Content
{transition}
{transitionConfig}
{sideOffset}
class={cn(
'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground',
className
)}
{...$$restProps}
{transition}
{transitionConfig}
{sideOffset}
class={cn(
'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground',
className
)}
{...$$restProps}
>
<slot />
<slot />
</TooltipPrimitive.Content>

964
src/lib/styles/katex.css
View file

File diff suppressed because it is too large Load diff

300
src/lib/styles/markdown.pcss
View file

@ -1,167 +1,167 @@
.markdown-body {
@apply text-primary/90;
h2 {
@apply text-3xl font-serif mb-5 mt-16;
}
section:first-child h2 {
@apply mt-6;
}
h3,
h4 {
@apply text-2xl mb-5 mt-12 text-muted-foreground;
}
@apply text-primary/90;
h2 {
@apply text-3xl font-serif mb-5 mt-16;
}
section:first-child h2 {
@apply mt-6;
}
h3,
h4 {
@apply text-2xl mb-5 mt-12 text-muted-foreground;
}
p {
@apply leading-loose my-2;
}
p {
@apply leading-loose my-2;
}
ol,
ul {
margin: 1em;
}
ol li ol,
ol li ul,
ul li ol,
ul li ul {
margin: 0 2em;
}
ol li p,
ul li p {
margin: 0;
}
ol,
ul {
margin: 1em;
}
ol li ol,
ol li ul,
ul li ol,
ul li ul {
margin: 0 2em;
}
ol li p,
ul li p {
margin: 0;
}
a {
@apply text-blue-500 dark:text-blue-600 hover:underline;
}
a {
@apply text-blue-500 dark:text-blue-600 hover:underline;
}
dl {
font-family: monospace;
}
dl dt {
font-weight: bold;
}
dl dd {
margin: -1em 0 1em 1em;
}
dl {
font-family: monospace;
}
dl dt {
font-weight: bold;
}
dl dd {
margin: -1em 0 1em 1em;
}
img {
@apply max-w-[80%] mx-auto my-8 rounded-xl shadow-lg;
}
img {
@apply max-w-[80%] mx-auto my-8 rounded-xl shadow-lg;
}
blockquote:not(.markdown-alert) {
@apply border-l-4 border-l-muted-foreground my-4 pl-4 italic mx-4;
}
blockquote:not(.markdown-alert) {
@apply border-l-4 border-l-muted-foreground my-4 pl-4 italic mx-4;
}
table {
@apply max-w-3xl xl:max-w-5xl;
font-size: 1rem;
text-align: left;
caption-side: bottom;
margin-bottom: 2em;
}
table * {
border: none;
}
table thead,
table tr {
display: table;
table-layout: fixed;
width: 100%;
}
table tr:nth-child(even) {
background-color: rgba(200, 200, 200, 0.2);
}
table tbody {
display: block;
max-height: 70vh;
overflow-y: auto;
}
table td,
table th {
padding: 0.25em;
}
table {
@apply max-w-3xl xl:max-w-5xl;
font-size: 1rem;
text-align: left;
caption-side: bottom;
margin-bottom: 2em;
}
table * {
border: none;
}
table thead,
table tr {
display: table;
table-layout: fixed;
width: 100%;
}
table tr:nth-child(even) {
background-color: rgba(200, 200, 200, 0.2);
}
table tbody {
display: block;
max-height: 70vh;
overflow-y: auto;
}
table td,
table th {
padding: 0.25em;
}
table,
.highlight > pre,
pre.example {
@apply p-4 border-2 border-primary/10 font-sans;
max-height: 70vh;
margin: 1em 0;
overflow: auto;
font-size: 0.85rem;
}
table,
.highlight > pre,
pre.example {
@apply p-4 border-2 border-primary/10 font-sans;
max-height: 70vh;
margin: 1em 0;
overflow: auto;
font-size: 0.85rem;
}
figure {
margin: 1em 0;
}
figure figcaption {
font-family: monospace;
font-size: 0.75em;
text-align: center;
color: grey;
}
figure {
margin: 1em 0;
}
figure figcaption {
font-family: monospace;
font-size: 0.75em;
text-align: center;
color: grey;
}
/* KaTeX formatting */
.katex-display {
@apply max-w-3xl overflow-x-auto overflow-y-hidden;
}
/* KaTeX formatting */
.katex-display {
@apply max-w-3xl overflow-x-auto overflow-y-hidden;
}
/* Markdown Alert formatting */
.markdown-alert {
@apply border-l-4 rounded-xl px-4 py-1 my-4 shadow-md dark:shadow-none;
}
.markdown-alert.markdown-alert-caution {
@apply border-l-red-600 bg-red-100 dark:bg-red-900 dark:text-red-100;
}
.markdown-alert-title {
@apply font-medium text-xl font-sans;
}
.markdown-alert-caution > .markdown-alert-title {
@apply text-red-600 fill-red-600 dark:text-red-100 dark:fill-red-100;
}
.markdown-alert.markdown-alert-tip {
@apply border-l-green-600 bg-green-100 dark:bg-green-900 dark:text-green-100;
}
.markdown-alert-tip > .markdown-alert-title {
@apply text-green-600 fill-green-600 dark:text-green-100 dark:fill-green-100;
}
/* Markdown Alert formatting */
.markdown-alert {
@apply border-l-4 rounded-xl px-4 py-1 my-4 shadow-md dark:shadow-none;
}
.markdown-alert.markdown-alert-caution {
@apply border-l-red-600 bg-red-100 dark:bg-red-900 dark:text-red-100;
}
.markdown-alert-title {
@apply font-medium text-xl font-sans;
}
.markdown-alert-caution > .markdown-alert-title {
@apply text-red-600 fill-red-600 dark:text-red-100 dark:fill-red-100;
}
.markdown-alert.markdown-alert-tip {
@apply border-l-green-600 bg-green-100 dark:bg-green-900 dark:text-green-100;
}
.markdown-alert-tip > .markdown-alert-title {
@apply text-green-600 fill-green-600 dark:text-green-100 dark:fill-green-100;
}
.markdown-alert.markdown-alert-important {
@apply border-l-purple-600 bg-purple-100 dark:bg-purple-900 dark:text-purple-100;
}
.markdown-alert-important > .markdown-alert-title {
@apply text-purple-600 fill-purple-600 dark:text-purple-100 dark:fill-purple-100;
}
.markdown-alert.markdown-alert-important {
@apply border-l-purple-600 bg-purple-100 dark:bg-purple-900 dark:text-purple-100;
}
.markdown-alert-important > .markdown-alert-title {
@apply text-purple-600 fill-purple-600 dark:text-purple-100 dark:fill-purple-100;
}
.markdown-alert.markdown-alert-note {
@apply border-l-blue-600 bg-blue-100 dark:bg-blue-900 dark:text-blue-100;
}
.markdown-alert-note > .markdown-alert-title {
@apply text-blue-600 fill-blue-600 dark:text-blue-100 dark:fill-blue-100;
}
.markdown-alert.markdown-alert-note {
@apply border-l-blue-600 bg-blue-100 dark:bg-blue-900 dark:text-blue-100;
}
.markdown-alert-note > .markdown-alert-title {
@apply text-blue-600 fill-blue-600 dark:text-blue-100 dark:fill-blue-100;
}
.markdown-alert.markdown-alert-warning {
@apply border-l-yellow-600 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-100;
}
.markdown-alert-warning > .markdown-alert-title {
@apply text-yellow-600 fill-yellow-600 dark:text-yellow-100 dark:fill-yellow-100;
}
.markdown-alert .markdown-alert-title .octicon {
margin-right: 0.5rem;
overflow: visible !important;
.markdown-alert.markdown-alert-warning {
@apply border-l-yellow-600 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-100;
}
.markdown-alert-warning > .markdown-alert-title {
@apply text-yellow-600 fill-yellow-600 dark:text-yellow-100 dark:fill-yellow-100;
}
.markdown-alert .markdown-alert-title .octicon {
margin-right: 0.5rem;
overflow: visible !important;
-webkit-mask: var(--oct-icon) no-repeat;
mask: var(--oct-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
background-color: currentColor;
color: inherit;
display: inline-block;
vertical-align: -0.125em;
width: 1em;
height: 1em;
}
.hljs {
@apply my-4 rounded-xl shadow-lg overflow-x-auto text-wrap;
}
-webkit-mask: var(--oct-icon) no-repeat;
mask: var(--oct-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
background-color: currentColor;
color: inherit;
display: inline-block;
vertical-align: -0.125em;
width: 1em;
height: 1em;
}
.hljs {
@apply my-4 rounded-xl shadow-lg overflow-x-auto text-wrap;
}
}

84
src/lib/utils.ts
View file

@ -1,56 +1,56 @@
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { cubicOut } from 'svelte/easing';
import type { TransitionConfig } from 'svelte/transition';
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
import { cubicOut } from 'svelte/easing'
import type { TransitionConfig } from 'svelte/transition'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
return twMerge(clsx(inputs))
}
type FlyAndScaleParams = {
y?: number;
x?: number;
start?: number;
duration?: number;
};
y?: number
x?: number
start?: number
duration?: number
}
export const flyAndScale = (
node: Element,
params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
node: Element,
params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
): TransitionConfig => {
const style = getComputedStyle(node);
const transform = style.transform === 'none' ? '' : style.transform;
const style = getComputedStyle(node)
const transform = style.transform === 'none' ? '' : style.transform
const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
const [minA, maxA] = scaleA;
const [minB, maxB] = scaleB;
const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
const [minA, maxA] = scaleA
const [minB, maxB] = scaleB
const percentage = (valueA - minA) / (maxA - minA);
const valueB = percentage * (maxB - minB) + minB;
const percentage = (valueA - minA) / (maxA - minA)
const valueB = percentage * (maxB - minB) + minB
return valueB;
};
return valueB
}
const styleToString = (style: Record<string, number | string | undefined>): string => {
return Object.keys(style).reduce((str, key) => {
if (style[key] === undefined) return str;
return str + `${key}:${style[key]};`;
}, '');
};
const styleToString = (style: Record<string, number | string | undefined>): string => {
return Object.keys(style).reduce((str, key) => {
if (style[key] === undefined) return str
return str + `${key}:${style[key]};`
}, '')
}
return {
duration: params.duration ?? 200,
delay: 0,
css: (t) => {
const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
return {
duration: params.duration ?? 200,
delay: 0,
css: (t) => {
const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0])
const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0])
const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1])
return styleToString({
transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
opacity: t
});
},
easing: cubicOut
};
};
return styleToString({
transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
opacity: t
})
},
easing: cubicOut
}
}

84
src/lib/utils/crawl.ts
View file

@ -1,52 +1,52 @@
import { readdir, readFile } from 'fs/promises';
import { join } from 'path';
import toml from 'toml';
import { readdir, readFile } from 'fs/promises'
import { join } from 'path'
import toml from 'toml'
const crawl = async () => {
const blogPath = join(process.cwd(), 'blog');
const years = await readdir(blogPath);
const blogPath = join(process.cwd(), 'blog')
const years = await readdir(blogPath)
const posts: {
[key: string]: {
metadata: PostMeta;
content: string;
};
} = {};
const posts: {
[key: string]: {
metadata: PostMeta
content: string
}
} = {}
for (const year of years) {
const yearPath = join(blogPath, year);
const directories = await readdir(yearPath);
for (const year of years) {
const yearPath = join(blogPath, year)
const directories = await readdir(yearPath)
for (const directory of directories) {
const postPath = join(yearPath, directory);
try {
await readFile(join(postPath, '.blogignore'), 'utf-8');
continue;
} catch (error) {
// If the file doesn't exist, continue with the rest of the code
}
const postTomlPath = join(postPath, 'post.toml');
const contentPath = join(postPath, 'content.md');
for (const directory of directories) {
const postPath = join(yearPath, directory)
try {
await readFile(join(postPath, '.blogignore'), 'utf-8')
continue
} catch (error) {
// If the file doesn't exist, continue with the rest of the code
}
const postTomlPath = join(postPath, 'post.toml')
const contentPath = join(postPath, 'content.md')
try {
const postToml = await readFile(postTomlPath, 'utf-8');
const content = await readFile(contentPath, 'utf-8');
try {
const postToml = await readFile(postTomlPath, 'utf-8')
const content = await readFile(contentPath, 'utf-8')
const metadata = toml.parse(postToml);
const metadata = toml.parse(postToml)
posts[`${year}/${directory}`] = {
metadata,
content
};
} catch (error) {
throw new Error(`Error reading post: ${error}`);
}
}
return posts;
}
};
posts[`${year}/${directory}`] = {
metadata,
content
}
} catch (error) {
throw new Error(`Error reading post: ${error}`)
}
}
return posts
}
}
const postsResult = await crawl();
if (!postsResult) throw new Error('No posts found!');
const postsResult = await crawl()
if (!postsResult) throw new Error('No posts found!')
export const posts = postsResult;
export const posts = postsResult

Some files were not shown because too many files have changed in this diff Show more