mirror of
https://github.com/youwen5/site.git
synced 2024-11-24 17:33:51 -08:00
style: use spaces and no semicolons in JS
This commit is contained in:
parent
56c82574ec
commit
5e1af688ea
GPG key ID:
865658ED1FE61EC3
121 changed files with 3603 additions and 3603 deletions
|
|
@ -1,31 +1,31 @@
|
||||||
/** @type { import("eslint").Linter.Config } */
|
/** @type { import("eslint").Linter.Config } */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
root: true,
|
root: true,
|
||||||
extends: [
|
extends: [
|
||||||
'eslint:recommended',
|
'eslint:recommended',
|
||||||
'plugin:@typescript-eslint/recommended',
|
'plugin:@typescript-eslint/recommended',
|
||||||
'plugin:svelte/recommended',
|
'plugin:svelte/recommended',
|
||||||
'prettier'
|
'prettier'
|
||||||
],
|
],
|
||||||
parser: '@typescript-eslint/parser',
|
parser: '@typescript-eslint/parser',
|
||||||
plugins: ['@typescript-eslint'],
|
plugins: ['@typescript-eslint'],
|
||||||
parserOptions: {
|
parserOptions: {
|
||||||
sourceType: 'module',
|
sourceType: 'module',
|
||||||
ecmaVersion: 2020,
|
ecmaVersion: 2020,
|
||||||
extraFileExtensions: ['.svelte']
|
extraFileExtensions: ['.svelte']
|
||||||
},
|
},
|
||||||
env: {
|
env: {
|
||||||
browser: true,
|
browser: true,
|
||||||
es2017: true,
|
es2017: true,
|
||||||
node: true
|
node: true
|
||||||
},
|
},
|
||||||
overrides: [
|
overrides: [
|
||||||
{
|
{
|
||||||
files: ['*.svelte'],
|
files: ['*.svelte'],
|
||||||
parser: 'svelte-eslint-parser',
|
parser: 'svelte-eslint-parser',
|
||||||
parserOptions: {
|
parserOptions: {
|
||||||
parser: '@typescript-eslint/parser'
|
parser: '@typescript-eslint/parser'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
overrides = [{ "files" = "*.svelte", "options" = { "parser" = "svelte" } }]
|
overrides = [{ "files" = "*.svelte", "options" = { "parser" = "svelte" } }]
|
||||||
useTabs = true
|
useTabs = false
|
||||||
singleQuote = true
|
singleQuote = true
|
||||||
trailingComma = "none"
|
trailingComma = "none"
|
||||||
printWidth = 100
|
printWidth = 100
|
||||||
proseWrap = "always"
|
proseWrap = "always"
|
||||||
plugins = ["prettier-plugin-svelte"]
|
plugins = ["prettier-plugin-svelte"]
|
||||||
|
semi = false
|
||||||
|
|
|
||||||
4
.vscode/settings.json
vendored
4
.vscode/settings.json
vendored
|
|
@ -1,4 +1,4 @@
|
||||||
{
|
{
|
||||||
"css.customData": [".vscode/tailwind.json"],
|
"css.customData": [".vscode/tailwind.json"],
|
||||||
"scss.lint.unknownAtRules": "ignore"
|
"scss.lint.unknownAtRules": "ignore"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
106
.vscode/tailwind.json
vendored
106
.vscode/tailwind.json
vendored
|
|
@ -1,55 +1,55 @@
|
||||||
{
|
{
|
||||||
"version": 1.1,
|
"version": 1.1,
|
||||||
"atDirectives": [
|
"atDirectives": [
|
||||||
{
|
{
|
||||||
"name": "@tailwind",
|
"name": "@tailwind",
|
||||||
"description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
|
"description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
|
||||||
"references": [
|
"references": [
|
||||||
{
|
{
|
||||||
"name": "Tailwind Documentation",
|
"name": "Tailwind Documentation",
|
||||||
"url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
|
"url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "@apply",
|
"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.",
|
"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": [
|
"references": [
|
||||||
{
|
{
|
||||||
"name": "Tailwind Documentation",
|
"name": "Tailwind Documentation",
|
||||||
"url": "https://tailwindcss.com/docs/functions-and-directives#apply"
|
"url": "https://tailwindcss.com/docs/functions-and-directives#apply"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "@responsive",
|
"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",
|
"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": [
|
"references": [
|
||||||
{
|
{
|
||||||
"name": "Tailwind Documentation",
|
"name": "Tailwind Documentation",
|
||||||
"url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
|
"url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "@screen",
|
"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",
|
"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": [
|
"references": [
|
||||||
{
|
{
|
||||||
"name": "Tailwind Documentation",
|
"name": "Tailwind Documentation",
|
||||||
"url": "https://tailwindcss.com/docs/functions-and-directives#screen"
|
"url": "https://tailwindcss.com/docs/functions-and-directives#screen"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "@variants",
|
"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",
|
"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": [
|
"references": [
|
||||||
{
|
{
|
||||||
"name": "Tailwind Documentation",
|
"name": "Tailwind Documentation",
|
||||||
"url": "https://tailwindcss.com/docs/functions-and-directives#variants"
|
"url": "https://tailwindcss.com/docs/functions-and-directives#variants"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
{
|
{
|
||||||
"$schema": "https://shadcn-svelte.com/schema.json",
|
"$schema": "https://shadcn-svelte.com/schema.json",
|
||||||
"style": "new-york",
|
"style": "new-york",
|
||||||
"tailwind": {
|
"tailwind": {
|
||||||
"config": "tailwind.config.js",
|
"config": "tailwind.config.js",
|
||||||
"css": "src/lib/app.pcss",
|
"css": "src/lib/app.pcss",
|
||||||
"baseColor": "zinc"
|
"baseColor": "zinc"
|
||||||
},
|
},
|
||||||
"aliases": {
|
"aliases": {
|
||||||
"components": "$lib/components",
|
"components": "$lib/components",
|
||||||
"utils": "$lib/utils"
|
"utils": "$lib/utils"
|
||||||
},
|
},
|
||||||
"typescript": true
|
"typescript": true
|
||||||
}
|
}
|
||||||
|
|
|
||||||
146
package.json
146
package.json
|
|
@ -1,75 +1,75 @@
|
||||||
{
|
{
|
||||||
"name": "coredump",
|
"name": "coredump",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite dev",
|
"dev": "vite dev",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"test": "playwright test",
|
"test": "playwright test",
|
||||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||||
"lint": "prettier --check . && eslint .",
|
"lint": "prettier --check . && eslint .",
|
||||||
"format": "prettier --write ."
|
"format": "prettier --write ."
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@playwright/test": "^1.28.1",
|
"@playwright/test": "^1.28.1",
|
||||||
"@sveltejs/kit": "^2.0.0",
|
"@sveltejs/kit": "^2.0.0",
|
||||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||||
"@types/eslint": "^8.56.0",
|
"@types/eslint": "^8.56.0",
|
||||||
"@typescript-eslint/eslint-plugin": "^7.0.0",
|
"@typescript-eslint/eslint-plugin": "^7.0.0",
|
||||||
"@typescript-eslint/parser": "^7.0.0",
|
"@typescript-eslint/parser": "^7.0.0",
|
||||||
"autoprefixer": "^10.4.19",
|
"autoprefixer": "^10.4.19",
|
||||||
"eslint": "^8.56.0",
|
"eslint": "^8.56.0",
|
||||||
"eslint-config-prettier": "^9.1.0",
|
"eslint-config-prettier": "^9.1.0",
|
||||||
"eslint-plugin-svelte": "^2.35.1",
|
"eslint-plugin-svelte": "^2.35.1",
|
||||||
"postcss": "^8.4.38",
|
"postcss": "^8.4.38",
|
||||||
"prettier": "^3.1.1",
|
"prettier": "^3.1.1",
|
||||||
"prettier-plugin-svelte": "^3.1.2",
|
"prettier-plugin-svelte": "^3.1.2",
|
||||||
"svelte": "^4.2.7",
|
"svelte": "^4.2.7",
|
||||||
"svelte-check": "^3.6.0",
|
"svelte-check": "^3.6.0",
|
||||||
"svelte-typewriter": "^3.2.3",
|
"svelte-typewriter": "^3.2.3",
|
||||||
"tailwindcss": "^3.4.3",
|
"tailwindcss": "^3.4.3",
|
||||||
"tslib": "^2.4.1",
|
"tslib": "^2.4.1",
|
||||||
"typescript": "^5.0.0",
|
"typescript": "^5.0.0",
|
||||||
"vite": "^5.0.3"
|
"vite": "^5.0.3"
|
||||||
},
|
},
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"trustedDependencies": [
|
"trustedDependencies": [
|
||||||
"svelte-preprocess",
|
"svelte-preprocess",
|
||||||
"@sveltejs/kit",
|
"@sveltejs/kit",
|
||||||
"esbuild",
|
"esbuild",
|
||||||
"@sveltejs/adapter-vercel"
|
"@sveltejs/adapter-vercel"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fontsource/geist-mono": "^5.0.2",
|
"@fontsource/geist-mono": "^5.0.2",
|
||||||
"@fontsource/geist-sans": "^5.0.2",
|
"@fontsource/geist-sans": "^5.0.2",
|
||||||
"@fontsource/merriweather": "^5.0.12",
|
"@fontsource/merriweather": "^5.0.12",
|
||||||
"@fontsource/zilla-slab": "^5.0.12",
|
"@fontsource/zilla-slab": "^5.0.12",
|
||||||
"@svelte-put/toc": "^5.0.1",
|
"@svelte-put/toc": "^5.0.1",
|
||||||
"@sveltejs/adapter-vercel": "^5.2.0",
|
"@sveltejs/adapter-vercel": "^5.2.0",
|
||||||
"@types/node": "^20.12.5",
|
"@types/node": "^20.12.5",
|
||||||
"bits-ui": "^0.21.2",
|
"bits-ui": "^0.21.2",
|
||||||
"clsx": "^2.1.0",
|
"clsx": "^2.1.0",
|
||||||
"coredump": "link:",
|
"coredump": "link:",
|
||||||
"dayjs": "^1.11.10",
|
"dayjs": "^1.11.10",
|
||||||
"mode-watcher": "^0.3.0",
|
"mode-watcher": "^0.3.0",
|
||||||
"rehype-highlight": "^7.0.0",
|
"rehype-highlight": "^7.0.0",
|
||||||
"rehype-katex": "^7.0.0",
|
"rehype-katex": "^7.0.0",
|
||||||
"rehype-stringify": "^10.0.0",
|
"rehype-stringify": "^10.0.0",
|
||||||
"remark-gfm": "^4.0.0",
|
"remark-gfm": "^4.0.0",
|
||||||
"remark-gh-alerts": "^0.0.3",
|
"remark-gh-alerts": "^0.0.3",
|
||||||
"remark-math": "^6.0.0",
|
"remark-math": "^6.0.0",
|
||||||
"remark-parse": "^11.0.0",
|
"remark-parse": "^11.0.0",
|
||||||
"remark-rehype": "^11.1.0",
|
"remark-rehype": "^11.1.0",
|
||||||
"remark-sectionize": "^2.0.0",
|
"remark-sectionize": "^2.0.0",
|
||||||
"svelte-radix": "^1.1.0",
|
"svelte-radix": "^1.1.0",
|
||||||
"svelte-sonner": "^0.3.21",
|
"svelte-sonner": "^0.3.21",
|
||||||
"tailwind-merge": "^2.2.2",
|
"tailwind-merge": "^2.2.2",
|
||||||
"tailwind-variants": "^0.2.1",
|
"tailwind-variants": "^0.2.1",
|
||||||
"toml": "^3.0.0",
|
"toml": "^3.0.0",
|
||||||
"unified": "^11.0.4",
|
"unified": "^11.0.4",
|
||||||
"vaul-svelte": "^0.3.0"
|
"vaul-svelte": "^0.3.0"
|
||||||
},
|
},
|
||||||
"packageManager": "pnpm@8.15.5+sha1.a58c038faac410c947dbdb93eb30994037d0fce2"
|
"packageManager": "pnpm@8.15.5+sha1.a58c038faac410c947dbdb93eb30994037d0fce2"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
import type { PlaywrightTestConfig } from '@playwright/test';
|
import type { PlaywrightTestConfig } from '@playwright/test'
|
||||||
|
|
||||||
const config: PlaywrightTestConfig = {
|
const config: PlaywrightTestConfig = {
|
||||||
webServer: {
|
webServer: {
|
||||||
command: 'npm run build && npm run preview',
|
command: 'npm run build && npm run preview',
|
||||||
port: 4173
|
port: 4173
|
||||||
},
|
},
|
||||||
testDir: 'tests',
|
testDir: 'tests',
|
||||||
testMatch: /(.+\.)?(test|spec)\.[jt]s/
|
testMatch: /(.+\.)?(test|spec)\.[jt]s/
|
||||||
};
|
}
|
||||||
|
|
||||||
export default config;
|
export default config
|
||||||
|
|
|
||||||
176
post.schema.json
176
post.schema.json
|
|
@ -1,90 +1,90 @@
|
||||||
{
|
{
|
||||||
"$schema": "http://json-schema.org/draft-07/schema#",
|
"$schema": "http://json-schema.org/draft-07/schema#",
|
||||||
"type": "object",
|
"type": "object",
|
||||||
"properties": {
|
"properties": {
|
||||||
"title": {
|
"title": {
|
||||||
"type": "string"
|
"type": "string"
|
||||||
},
|
},
|
||||||
"manifest": {
|
"manifest": {
|
||||||
"type": "object",
|
"type": "object",
|
||||||
"properties": {
|
"properties": {
|
||||||
"date": {
|
"date": {
|
||||||
"type": "string",
|
"type": "string",
|
||||||
"format": "date-time"
|
"format": "date-time"
|
||||||
},
|
},
|
||||||
"blurb": {
|
"blurb": {
|
||||||
"type": "string"
|
"type": "string"
|
||||||
},
|
},
|
||||||
"description": {
|
"description": {
|
||||||
"type": "string"
|
"type": "string"
|
||||||
},
|
},
|
||||||
"type": {
|
"type": {
|
||||||
"type": "string"
|
"type": "string"
|
||||||
},
|
},
|
||||||
"authors": {
|
"authors": {
|
||||||
"type": "array",
|
"type": "array",
|
||||||
"items": {
|
"items": {
|
||||||
"type": "string"
|
"type": "string"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"tags": {
|
"tags": {
|
||||||
"type": "object",
|
"type": "object",
|
||||||
"properties": {
|
"properties": {
|
||||||
"primary": {
|
"primary": {
|
||||||
"type": "array",
|
"type": "array",
|
||||||
"items": {
|
"items": {
|
||||||
"type": "string"
|
"type": "string"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"secondary": {
|
"secondary": {
|
||||||
"type": "array",
|
"type": "array",
|
||||||
"items": {
|
"items": {
|
||||||
"type": "string"
|
"type": "string"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"required": ["primary", "secondary"]
|
"required": ["primary", "secondary"]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"required": ["date", "blurb", "description", "type", "authors", "tags"]
|
"required": ["date", "blurb", "description", "type", "authors", "tags"]
|
||||||
},
|
},
|
||||||
"cover": {
|
"cover": {
|
||||||
"type": "object",
|
"type": "object",
|
||||||
"properties": {
|
"properties": {
|
||||||
"src": {
|
"src": {
|
||||||
"type": "string",
|
"type": "string",
|
||||||
"format": "uri"
|
"format": "uri"
|
||||||
},
|
},
|
||||||
"alt": {
|
"alt": {
|
||||||
"type": "string"
|
"type": "string"
|
||||||
},
|
},
|
||||||
"caption": {
|
"caption": {
|
||||||
"type": "string"
|
"type": "string"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"required": ["src", "alt", "caption"]
|
"required": ["src", "alt", "caption"]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"required": ["title", "manifest", "cover"],
|
"required": ["title", "manifest", "cover"],
|
||||||
"optional": {
|
"optional": {
|
||||||
"type": "object",
|
"type": "object",
|
||||||
"properties": {
|
"properties": {
|
||||||
"deps": {
|
"deps": {
|
||||||
"type": "object",
|
"type": "object",
|
||||||
"properties": {
|
"properties": {
|
||||||
"external": {
|
"external": {
|
||||||
"type": "object",
|
"type": "object",
|
||||||
"properties": {
|
"properties": {
|
||||||
"styles": {
|
"styles": {
|
||||||
"type": "array",
|
"type": "array",
|
||||||
"items": {
|
"items": {
|
||||||
"type": "string"
|
"type": "string"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
export default {
|
export default {
|
||||||
plugins: {
|
plugins: {
|
||||||
tailwindcss: {},
|
tailwindcss: {},
|
||||||
autoprefixer: {}
|
autoprefixer: {}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
|
||||||
16
src/app.d.ts
vendored
16
src/app.d.ts
vendored
|
|
@ -1,13 +1,13 @@
|
||||||
// See https://kit.svelte.dev/docs/types#app
|
// See https://kit.svelte.dev/docs/types#app
|
||||||
// for information about these interfaces
|
// for information about these interfaces
|
||||||
declare global {
|
declare global {
|
||||||
namespace App {
|
namespace App {
|
||||||
// interface Error {}
|
// interface Error {}
|
||||||
// interface Locals {}
|
// interface Locals {}
|
||||||
// interface PageData {}
|
// interface PageData {}
|
||||||
// interface PageState {}
|
// interface PageState {}
|
||||||
// interface Platform {}
|
// interface Platform {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export {};
|
export {}
|
||||||
|
|
|
||||||
38
src/app.html
38
src/app.html
|
|
@ -1,22 +1,22 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
||||||
<link
|
<link
|
||||||
rel="icon"
|
rel="icon"
|
||||||
href="%sveltekit.assets%/favicon-light.ico"
|
href="%sveltekit.assets%/favicon-light.ico"
|
||||||
media="(prefers-color-scheme: light)"
|
media="(prefers-color-scheme: light)"
|
||||||
/>
|
/>
|
||||||
<link
|
<link
|
||||||
rel="icon"
|
rel="icon"
|
||||||
href="%sveltekit.assets%/favicon-dark.ico"
|
href="%sveltekit.assets%/favicon-dark.ico"
|
||||||
media="(prefers-color-scheme: dark)"
|
media="(prefers-color-scheme: dark)"
|
||||||
/>
|
/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
<body data-sveltekit-preload-data="hover">
|
<body data-sveltekit-preload-data="hover">
|
||||||
<div style="display: contents">%sveltekit.body%</div>
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
60
src/globals.d.ts
vendored
60
src/globals.d.ts
vendored
|
|
@ -1,35 +1,35 @@
|
||||||
interface BlogDocument {
|
interface BlogDocument {
|
||||||
date: Date;
|
date: Date
|
||||||
title: string;
|
title: string
|
||||||
content: string;
|
content: string
|
||||||
primaryTags: string[];
|
primaryTags: string[]
|
||||||
secondaryTags: string[];
|
secondaryTags: string[]
|
||||||
blurb: string;
|
blurb: string
|
||||||
image: { src: string; alt: string; caption: string };
|
image: { src: string; alt: string; caption: string }
|
||||||
description: string;
|
description: string
|
||||||
slug: string;
|
slug: string
|
||||||
}
|
}
|
||||||
|
|
||||||
declare module 'remark-sectionize';
|
declare module 'remark-sectionize'
|
||||||
|
|
||||||
type PostMeta = {
|
type PostMeta = {
|
||||||
title: string;
|
title: string
|
||||||
manifest: {
|
manifest: {
|
||||||
authors: string[];
|
authors: string[]
|
||||||
date: Date;
|
date: Date
|
||||||
tags: { primary: string[]; secondary: string[] };
|
tags: { primary: string[]; secondary: string[] }
|
||||||
blurb: string;
|
blurb: string
|
||||||
description: string;
|
description: string
|
||||||
highlight: boolean;
|
highlight: boolean
|
||||||
};
|
}
|
||||||
cover: {
|
cover: {
|
||||||
src: string;
|
src: string
|
||||||
alt: string;
|
alt: string
|
||||||
caption: string;
|
caption: string
|
||||||
};
|
}
|
||||||
deps?: {
|
deps?: {
|
||||||
external?: {
|
external?: {
|
||||||
styles?: string[];
|
styles?: string[]
|
||||||
};
|
}
|
||||||
};
|
}
|
||||||
};
|
}
|
||||||
|
|
|
||||||
162
src/lib/app.pcss
162
src/lib/app.pcss
|
|
@ -3,112 +3,112 @@
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
--background: 0 0% 93%;
|
--background: 0 0% 93%;
|
||||||
--foreground: 240 10% 3.9%;
|
--foreground: 240 10% 3.9%;
|
||||||
|
|
||||||
--muted: 240 4.8% 90%;
|
--muted: 240 4.8% 90%;
|
||||||
--muted-foreground: 240 3.8% 46.1%;
|
--muted-foreground: 240 3.8% 46.1%;
|
||||||
|
|
||||||
--popover: 0 0% 96%;
|
--popover: 0 0% 96%;
|
||||||
--popover-foreground: 240 10% 3.9%;
|
--popover-foreground: 240 10% 3.9%;
|
||||||
|
|
||||||
--card: 0 0% 96%;
|
--card: 0 0% 96%;
|
||||||
--card-foreground: 240 10% 3.9%;
|
--card-foreground: 240 10% 3.9%;
|
||||||
|
|
||||||
--border: 240 5.9% 90%;
|
--border: 240 5.9% 90%;
|
||||||
--input: 240 5.9% 90%;
|
--input: 240 5.9% 90%;
|
||||||
|
|
||||||
--primary: 240 5.9% 10%;
|
--primary: 240 5.9% 10%;
|
||||||
--primary-foreground: 0 0% 98%;
|
--primary-foreground: 0 0% 98%;
|
||||||
|
|
||||||
--secondary: 240 4.8% 90%;
|
--secondary: 240 4.8% 90%;
|
||||||
--secondary-foreground: 240 5.9% 12%;
|
--secondary-foreground: 240 5.9% 12%;
|
||||||
|
|
||||||
--accent: 240 4.8% 90%;
|
--accent: 240 4.8% 90%;
|
||||||
--accent-foreground: 240 5.9% 12%;
|
--accent-foreground: 240 5.9% 12%;
|
||||||
|
|
||||||
--destructive: 0 72.2% 50.6%;
|
--destructive: 0 72.2% 50.6%;
|
||||||
--destructive-foreground: 0 0% 98%;
|
--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 {
|
.dark {
|
||||||
--background: 240 10% 7%;
|
--background: 240 10% 7%;
|
||||||
--foreground: 0 0% 98%;
|
--foreground: 0 0% 98%;
|
||||||
|
|
||||||
--muted: 240 3.7% 15.9%;
|
--muted: 240 3.7% 15.9%;
|
||||||
--muted-foreground: 240 5% 64.9%;
|
--muted-foreground: 240 5% 64.9%;
|
||||||
|
|
||||||
--popover: 240 10% 6%;
|
--popover: 240 10% 6%;
|
||||||
--popover-foreground: 0 0% 98%;
|
--popover-foreground: 0 0% 98%;
|
||||||
|
|
||||||
--card: 240 10% 6%;
|
--card: 240 10% 6%;
|
||||||
--card-foreground: 0 0% 98%;
|
--card-foreground: 0 0% 98%;
|
||||||
|
|
||||||
--border: 240 3.7% 15.9%;
|
--border: 240 3.7% 15.9%;
|
||||||
--input: 240 3.7% 15.9%;
|
--input: 240 3.7% 15.9%;
|
||||||
|
|
||||||
--primary: 0 0% 98%;
|
--primary: 0 0% 98%;
|
||||||
--primary-foreground: 240 5.9% 10%;
|
--primary-foreground: 240 5.9% 10%;
|
||||||
|
|
||||||
--secondary: 240 3.7% 15.9%;
|
--secondary: 240 3.7% 15.9%;
|
||||||
--secondary-foreground: 0 0% 98%;
|
--secondary-foreground: 0 0% 98%;
|
||||||
|
|
||||||
--accent: 240 3.7% 15.9%;
|
--accent: 240 3.7% 15.9%;
|
||||||
--accent-foreground: 0 0% 98%;
|
--accent-foreground: 0 0% 98%;
|
||||||
|
|
||||||
--destructive: 0 62.8% 30.6%;
|
--destructive: 0 62.8% 30.6%;
|
||||||
--destructive-foreground: 0 0% 98%;
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
|
||||||
--ring: 240 4.9% 83.9%;
|
--ring: 240 4.9% 83.9%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
* {
|
* {
|
||||||
@apply border-border;
|
@apply border-border;
|
||||||
}
|
}
|
||||||
html.smoothscroll {
|
html.smoothscroll {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground;
|
||||||
font-family:
|
font-family:
|
||||||
Geist Sans,
|
Geist Sans,
|
||||||
system-ui,
|
system-ui,
|
||||||
-apple-system,
|
-apple-system,
|
||||||
BlinkMacSystemFont,
|
BlinkMacSystemFont,
|
||||||
'Segoe UI',
|
'Segoe UI',
|
||||||
Roboto,
|
Roboto,
|
||||||
Oxygen,
|
Oxygen,
|
||||||
Ubuntu,
|
Ubuntu,
|
||||||
Cantarell,
|
Cantarell,
|
||||||
'Open Sans',
|
'Open Sans',
|
||||||
'Helvetica Neue',
|
'Helvetica Neue',
|
||||||
sans-serif;
|
sans-serif;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer components {
|
@layer components {
|
||||||
.dots-background {
|
.dots-background {
|
||||||
--dot-bg: theme('colors.background');
|
--dot-bg: theme('colors.background');
|
||||||
--dot-color: theme('colors.muted.foreground');
|
--dot-color: theme('colors.muted.foreground');
|
||||||
--dot-size: 1px;
|
--dot-size: 1px;
|
||||||
--dot-space: 22px;
|
--dot-space: 22px;
|
||||||
background:
|
background:
|
||||||
linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%)
|
linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%)
|
||||||
center / var(--dot-space) var(--dot-space),
|
center / var(--dot-space) var(--dot-space),
|
||||||
linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center /
|
linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center /
|
||||||
var(--dot-space) var(--dot-space),
|
var(--dot-space) var(--dot-space),
|
||||||
var(--dot-color);
|
var(--dot-color);
|
||||||
}
|
}
|
||||||
.link {
|
.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;
|
@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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,266 +1,266 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { fly } from 'svelte/transition';
|
import { fly } from 'svelte/transition'
|
||||||
|
|
||||||
export let height = '192';
|
export let height = '192'
|
||||||
export let width = 'auto';
|
export let width = 'auto'
|
||||||
export let href: string = '/blog';
|
export let href: string = '/blog'
|
||||||
export let transition: 'vertical' | 'horizontal' = 'horizontal';
|
export let transition: 'vertical' | 'horizontal' = 'horizontal'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
viewBox="0 0 2048 416"
|
viewBox="0 0 2048 416"
|
||||||
class="diagram select-none font-mono logo"
|
class="diagram select-none font-mono logo"
|
||||||
text-anchor="middle"
|
text-anchor="middle"
|
||||||
font-size="13px"
|
font-size="13px"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
{height}
|
{height}
|
||||||
{width}
|
{width}
|
||||||
in:fly={transition === 'horizontal'
|
in:fly={transition === 'horizontal'
|
||||||
? { x: -100, duration: 300, delay: 320 }
|
? { x: -100, duration: 300, delay: 320 }
|
||||||
: { y: -200, duration: 300 }}
|
: { y: -200, duration: 300 }}
|
||||||
out:fly={{ x: 100, duration: 300 }}
|
out:fly={{ x: 100, duration: 300 }}
|
||||||
>
|
>
|
||||||
<a {href}>
|
<a {href}>
|
||||||
<circle cx="936" cy="192" r="0.22em" class="opendot" />
|
<circle cx="936" cy="192" r="0.22em" class="opendot" />
|
||||||
<circle cx="936" cy="208" 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="128" r="0.22em" class="opendot" />
|
||||||
<circle cx="944" cy="272" 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="128" r="0.22em" class="opendot" />
|
||||||
<circle cx="952" cy="272" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="960" cy="288" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="968" cy="288" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="976" cy="176" 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="192" r="0.22em" class="opendot" />
|
||||||
<circle cx="976" cy="208" 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="224" r="0.22em" class="opendot" />
|
||||||
<circle cx="976" cy="288" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="984" cy="288" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="992" cy="288" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="1000" cy="288" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="1008" cy="160" 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="240" r="0.22em" class="opendot" />
|
||||||
<circle cx="1008" cy="288" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="1016" cy="160" 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="240" r="0.22em" class="opendot" />
|
||||||
<circle cx="1016" cy="288" 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="176" r="0.22em" class="opendot" />
|
||||||
<circle cx="1024" cy="192" 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="208" r="0.22em" class="opendot" />
|
||||||
<circle cx="1024" cy="224" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="1032" cy="288" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="1040" cy="288" 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="128" r="0.22em" class="opendot" />
|
||||||
<circle cx="1048" cy="272" 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="128" r="0.22em" class="opendot" />
|
||||||
<circle cx="1056" cy="272" 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="176" r="0.22em" class="opendot" />
|
||||||
<circle cx="1064" cy="192" 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="208" r="0.22em" class="opendot" />
|
||||||
<circle cx="1064" cy="224" 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="240" r="0.22em" class="opendot" />
|
||||||
<circle cx="1064" cy="256" r="0.22em" class="opendot" />
|
<circle cx="1064" cy="256" r="0.22em" class="opendot" />
|
||||||
<g class="text">
|
<g class="text">
|
||||||
<text x="80" y="20">$$$$$</text>
|
<text x="80" y="20">$$$$$</text>
|
||||||
<text x="80" y="36">$:::$</text>
|
<text x="80" y="36">$:::$</text>
|
||||||
<text x="1516" y="36">dddddddd</text>
|
<text x="1516" y="36">dddddddd</text>
|
||||||
<text x="84" y="52">$$$$$:::$$$$$$</text>
|
<text x="84" y="52">$$$$$:::$$$$$$</text>
|
||||||
<text x="316" y="52">tttt</text>
|
<text x="316" y="52">tttt</text>
|
||||||
<text x="440" y="52">hhhhhhh</text>
|
<text x="440" y="52">hhhhhhh</text>
|
||||||
<text x="1516" y="52">d::::::d</text>
|
<text x="1516" y="52">d::::::d</text>
|
||||||
<text x="80" y="68">$$::::::::::::::$</text>
|
<text x="80" y="68">$$::::::::::::::$</text>
|
||||||
<text x="304" y="68">ttt:::t</text>
|
<text x="304" y="68">ttt:::t</text>
|
||||||
<text x="440" y="68">h:::::h</text>
|
<text x="440" y="68">h:::::h</text>
|
||||||
<text x="1516" y="68">d::::::d</text>
|
<text x="1516" y="68">d::::::d</text>
|
||||||
<text x="76" y="84">$:::::$$$$$$$::::$</text>
|
<text x="76" y="84">$:::::$$$$$$$::::$</text>
|
||||||
<text x="304" y="84">t:::::t</text>
|
<text x="304" y="84">t:::::t</text>
|
||||||
<text x="440" y="84">h:::::h</text>
|
<text x="440" y="84">h:::::h</text>
|
||||||
<text x="1516" y="84">d::::::d</text>
|
<text x="1516" y="84">d::::::d</text>
|
||||||
<text x="28" y="100">$::::$</text>
|
<text x="28" y="100">$::::$</text>
|
||||||
<text x="128" y="100">$$$$$</text>
|
<text x="128" y="100">$$$$$</text>
|
||||||
<text x="304" y="100">t:::::t</text>
|
<text x="304" y="100">t:::::t</text>
|
||||||
<text x="440" y="100">h:::::h</text>
|
<text x="440" y="100">h:::::h</text>
|
||||||
<text x="1512" y="100">d:::::d</text>
|
<text x="1512" y="100">d:::::d</text>
|
||||||
<text x="28" y="116">$::::$</text>
|
<text x="28" y="116">$::::$</text>
|
||||||
<text x="304" y="116">ttttttt:::::ttttttt</text>
|
<text x="304" y="116">ttttttt:::::ttttttt</text>
|
||||||
<text x="468" y="116">h::::h hhhhh</text>
|
<text x="468" y="116">h::::h hhhhh</text>
|
||||||
<text x="652" y="116">eeeeeeeeeeee</text>
|
<text x="652" y="116">eeeeeeeeeeee</text>
|
||||||
<text x="868" y="116">cccccccccccccccc</text>
|
<text x="868" y="116">cccccccccccccccc</text>
|
||||||
<text x="1024" y="116">o</text>
|
<text x="1024" y="116">o</text>
|
||||||
<text x="1088" y="116">rrrrr</text>
|
<text x="1088" y="116">rrrrr</text>
|
||||||
<text x="1168" y="116">rrrrrrrrr</text>
|
<text x="1168" y="116">rrrrrrrrr</text>
|
||||||
<text x="1308" y="116">eeeeeeeeeeee</text>
|
<text x="1308" y="116">eeeeeeeeeeee</text>
|
||||||
<text x="1508" y="116">ddddddddd:::::d uuuuuu</text>
|
<text x="1508" y="116">ddddddddd:::::d uuuuuu</text>
|
||||||
<text x="1652" y="116">uuuuuu</text>
|
<text x="1652" y="116">uuuuuu</text>
|
||||||
<text x="1744" y="116">mmmmmmm</text>
|
<text x="1744" y="116">mmmmmmm</text>
|
||||||
<text x="1832" y="116">mmmmmmm</text>
|
<text x="1832" y="116">mmmmmmm</text>
|
||||||
<text x="1904" y="116">ppppp</text>
|
<text x="1904" y="116">ppppp</text>
|
||||||
<text x="1984" y="116">ppppppppp</text>
|
<text x="1984" y="116">ppppppppp</text>
|
||||||
<text x="28" y="132">$::::$</text>
|
<text x="28" y="132">$::::$</text>
|
||||||
<text x="304" y="132">t:::::::::::::::::t</text>
|
<text x="304" y="132">t:::::::::::::::::t</text>
|
||||||
<text x="480" y="132">h::::hh:::::hhh</text>
|
<text x="480" y="132">h::::hh:::::hhh</text>
|
||||||
<text x="652" y="132">ee::::::::::::ee</text>
|
<text x="652" y="132">ee::::::::::::ee</text>
|
||||||
<text x="860" y="132">cc:::::::::::::::c</text>
|
<text x="860" y="132">cc:::::::::::::::c</text>
|
||||||
<text x="1000" y="132">:::::::::::</text>
|
<text x="1000" y="132">:::::::::::</text>
|
||||||
<text x="1140" y="132">r::::rrr:::::::::r</text>
|
<text x="1140" y="132">r::::rrr:::::::::r</text>
|
||||||
<text x="1308" y="132">ee::::::::::::ee</text>
|
<text x="1308" y="132">ee::::::::::::ee</text>
|
||||||
<text x="1500" y="132">dd::::::::::::::d u::::u</text>
|
<text x="1500" y="132">dd::::::::::::::d u::::u</text>
|
||||||
<text x="1652" y="132">u::::u</text>
|
<text x="1652" y="132">u::::u</text>
|
||||||
<text x="1740" y="132">mm:::::::m</text>
|
<text x="1740" y="132">mm:::::::m</text>
|
||||||
<text x="1912" y="132">m:::::::mm p::::ppp:::::::::p</text>
|
<text x="1912" y="132">m:::::::mm p::::ppp:::::::::p</text>
|
||||||
<text x="64" y="148">$:::::$$$$$$$$$</text>
|
<text x="64" y="148">$:::::$$$$$$$$$</text>
|
||||||
<text x="304" y="148">t:::::::::::::::::t</text>
|
<text x="304" y="148">t:::::::::::::::::t</text>
|
||||||
<text x="488" y="148">h::::::::::::::hh</text>
|
<text x="488" y="148">h::::::::::::::hh</text>
|
||||||
<text x="656" y="148">e::::::eeeee:::::ee</text>
|
<text x="656" y="148">e::::::eeeee:::::ee</text>
|
||||||
<text x="1000" y="148">c:::::::::::::::::co:::::::::::::::or:::::::::::::::::r</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="1416" y="148">e::::::eeeee:::::ee d::::::::::::::::d u::::u</text>
|
||||||
<text x="1652" y="148">u::::u</text>
|
<text x="1652" y="148">u::::u</text>
|
||||||
<text x="1864" y="148">m::::::::::mm::::::::::mp:::::::::::::::::p</text>
|
<text x="1864" y="148">m::::::::::mm::::::::::mp:::::::::::::::::p</text>
|
||||||
<text x="76" y="164">$$::::::::::::$$</text>
|
<text x="76" y="164">$$::::::::::::$$</text>
|
||||||
<text x="304" y="164">tttttt:::::::tttttt</text>
|
<text x="304" y="164">tttttt:::::::tttttt</text>
|
||||||
<text x="528" y="164">h:::::::hhh::::::h e::::::e</text>
|
<text x="528" y="164">h:::::::hhh::::::h e::::::e</text>
|
||||||
<text x="704" y="164">e:::::e</text>
|
<text x="704" y="164">e:::::e</text>
|
||||||
<text x="888" y="164">c:::::::cccccc:::::co:::::ooo</text>
|
<text x="888" y="164">c:::::::cccccc:::::co:::::ooo</text>
|
||||||
<text x="1156" y="164">:::::orr::::::rrrrr::::::re::::::e</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="1464" y="164">e:::::ed:::::::ddddd:::::d u::::u</text>
|
||||||
<text x="1652" y="164">u::::u</text>
|
<text x="1652" y="164">u::::u</text>
|
||||||
<text x="1868" y="164">m::::::::::::::::::::::mpp::::::ppppp::::::p</text>
|
<text x="1868" y="164">m::::::::::::::::::::::mpp::::::ppppp::::::p</text>
|
||||||
<text x="88" y="180">$$$$$$$$$:::::$</text>
|
<text x="88" y="180">$$$$$$$$$:::::$</text>
|
||||||
<text x="304" y="180">t:::::t</text>
|
<text x="304" y="180">t:::::t</text>
|
||||||
<text x="452" y="180">h::::::h</text>
|
<text x="452" y="180">h::::::h</text>
|
||||||
<text x="620" y="180">h::::::he:::::::eeeee::::::e</text>
|
<text x="620" y="180">h::::::he:::::::eeeee::::::e</text>
|
||||||
<text x="804" y="180">c::::::c</text>
|
<text x="804" y="180">c::::::c</text>
|
||||||
<text x="924" y="180">ccccccco::::</text>
|
<text x="924" y="180">ccccccco::::</text>
|
||||||
<text x="1044" y="180">::::</text>
|
<text x="1044" y="180">::::</text>
|
||||||
<text x="1104" y="180">r:::::r</text>
|
<text x="1104" y="180">r:::::r</text>
|
||||||
<text x="1312" y="180">r:::::re:::::::eeeee::::::ed::::::d</text>
|
<text x="1312" y="180">r:::::re:::::::eeeee::::::ed::::::d</text>
|
||||||
<text x="1540" y="180">d:::::d u::::u</text>
|
<text x="1540" y="180">d:::::d u::::u</text>
|
||||||
<text x="1652" y="180">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="1820" y="180">m:::::mmm::::::mmm:::::m p:::::p</text>
|
||||||
<text x="2016" y="180">p:::::p</text>
|
<text x="2016" y="180">p:::::p</text>
|
||||||
<text x="124" y="196">$::::$</text>
|
<text x="124" y="196">$::::$</text>
|
||||||
<text x="304" y="196">t:::::t</text>
|
<text x="304" y="196">t:::::t</text>
|
||||||
<text x="448" y="196">h:::::h</text>
|
<text x="448" y="196">h:::::h</text>
|
||||||
<text x="620" y="196">h:::::he:::::::::::::::::e</text>
|
<text x="620" y="196">h:::::he:::::::::::::::::e</text>
|
||||||
<text x="800" y="196">c:::::c</text>
|
<text x="800" y="196">c:::::c</text>
|
||||||
<text x="956" y="196">::::</text>
|
<text x="956" y="196">::::</text>
|
||||||
<text x="1044" y="196">::::</text>
|
<text x="1044" y="196">::::</text>
|
||||||
<text x="1104" y="196">r:::::r</text>
|
<text x="1104" y="196">r:::::r</text>
|
||||||
<text x="1308" y="196">rrrrrrre:::::::::::::::::e d:::::d</text>
|
<text x="1308" y="196">rrrrrrre:::::::::::::::::e d:::::d</text>
|
||||||
<text x="1540" y="196">d:::::d u::::u</text>
|
<text x="1540" y="196">d:::::d u::::u</text>
|
||||||
<text x="1652" y="196">u::::u</text>
|
<text x="1652" y="196">u::::u</text>
|
||||||
<text x="1716" y="196">m::::m</text>
|
<text x="1716" y="196">m::::m</text>
|
||||||
<text x="1788" 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="1892" y="196">m::::m p:::::p</text>
|
||||||
<text x="2016" y="196">p:::::p</text>
|
<text x="2016" y="196">p:::::p</text>
|
||||||
<text x="124" y="212">$::::$</text>
|
<text x="124" y="212">$::::$</text>
|
||||||
<text x="304" y="212">t:::::t</text>
|
<text x="304" y="212">t:::::t</text>
|
||||||
<text x="448" y="212">h:::::h</text>
|
<text x="448" y="212">h:::::h</text>
|
||||||
<text x="616" y="212">h:::::he::::::eeeeeeeeeee</text>
|
<text x="616" y="212">h:::::he::::::eeeeeeeeeee</text>
|
||||||
<text x="800" y="212">c:::::c</text>
|
<text x="800" y="212">c:::::c</text>
|
||||||
<text x="956" y="212">::::</text>
|
<text x="956" y="212">::::</text>
|
||||||
<text x="1044" y="212">::::</text>
|
<text x="1044" y="212">::::</text>
|
||||||
<text x="1104" y="212">r:::::r</text>
|
<text x="1104" y="212">r:::::r</text>
|
||||||
<text x="1300" y="212">e::::::eeeeeeeeeee</text>
|
<text x="1300" y="212">e::::::eeeeeeeeeee</text>
|
||||||
<text x="1416" y="212">d:::::d</text>
|
<text x="1416" y="212">d:::::d</text>
|
||||||
<text x="1540" y="212">d:::::d u::::u</text>
|
<text x="1540" y="212">d:::::d u::::u</text>
|
||||||
<text x="1652" y="212">u::::u</text>
|
<text x="1652" y="212">u::::u</text>
|
||||||
<text x="1716" y="212">m::::m</text>
|
<text x="1716" y="212">m::::m</text>
|
||||||
<text x="1788" 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="1892" y="212">m::::m p:::::p</text>
|
||||||
<text x="2016" y="212">p:::::p</text>
|
<text x="2016" y="212">p:::::p</text>
|
||||||
<text x="24" y="228">$$$$$</text>
|
<text x="24" y="228">$$$$$</text>
|
||||||
<text x="124" y="228">$::::$</text>
|
<text x="124" y="228">$::::$</text>
|
||||||
<text x="304" y="228">t:::::t</text>
|
<text x="304" y="228">t:::::t</text>
|
||||||
<text x="420" y="228">tttttt h:::::h</text>
|
<text x="420" y="228">tttttt h:::::h</text>
|
||||||
<text x="580" y="228">h:::::he:::::::e</text>
|
<text x="580" y="228">h:::::he:::::::e</text>
|
||||||
<text x="804" y="228">c::::::c</text>
|
<text x="804" y="228">c::::::c</text>
|
||||||
<text x="924" y="228">ccccccco::::</text>
|
<text x="924" y="228">ccccccco::::</text>
|
||||||
<text x="1044" y="228">::::</text>
|
<text x="1044" y="228">::::</text>
|
||||||
<text x="1104" y="228">r:::::r</text>
|
<text x="1104" y="228">r:::::r</text>
|
||||||
<text x="1264" y="228">e:::::::e</text>
|
<text x="1264" y="228">e:::::::e</text>
|
||||||
<text x="1416" y="228">d:::::d</text>
|
<text x="1416" y="228">d:::::d</text>
|
||||||
<text x="1580" y="228">d:::::d u:::::uuuu:::::u</text>
|
<text x="1580" y="228">d:::::d u:::::uuuu:::::u</text>
|
||||||
<text x="1716" y="228">m::::m</text>
|
<text x="1716" y="228">m::::m</text>
|
||||||
<text x="1788" 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="1892" y="228">m::::m p:::::p</text>
|
||||||
<text x="2012" y="228">p::::::p</text>
|
<text x="2012" y="228">p::::::p</text>
|
||||||
<text x="76" y="244">$::::$$$$$$$:::::$</text>
|
<text x="76" y="244">$::::$$$$$$$:::::$</text>
|
||||||
<text x="376" y="244">t::::::tttt:::::t h:::::h</text>
|
<text x="376" y="244">t::::::tttt:::::t h:::::h</text>
|
||||||
<text x="584" y="244">h:::::he::::::::e</text>
|
<text x="584" y="244">h:::::he::::::::e</text>
|
||||||
<text x="888" y="244">c:::::::cccccc:::::co:::::ooo</text>
|
<text x="888" y="244">c:::::::cccccc:::::co:::::ooo</text>
|
||||||
<text x="1040" y="244">:::::</text>
|
<text x="1040" y="244">:::::</text>
|
||||||
<text x="1104" y="244">r:::::r</text>
|
<text x="1104" y="244">r:::::r</text>
|
||||||
<text x="1268" y="244">e::::::::e</text>
|
<text x="1268" y="244">e::::::::e</text>
|
||||||
<text x="1564" y="244">d::::::ddddd::::::ddu:::::::::::::::uum::::m</text>
|
<text x="1564" y="244">d::::::ddddd::::::ddu:::::::::::::::uum::::m</text>
|
||||||
<text x="1788" y="244">m::::m</text>
|
<text x="1788" y="244">m::::m</text>
|
||||||
<text x="1940" y="244">m::::m p:::::ppppp:::::::p</text>
|
<text x="1940" y="244">m::::m p:::::ppppp:::::::p</text>
|
||||||
<text x="72" y="260">$::::::::::::::$$</text>
|
<text x="72" y="260">$::::::::::::::$$</text>
|
||||||
<text x="376" y="260">tt::::::::::::::t h:::::h</text>
|
<text x="376" y="260">tt::::::::::::::t h:::::h</text>
|
||||||
<text x="616" y="260">h:::::h e::::::::eeeeeeee</text>
|
<text x="616" y="260">h:::::h e::::::::eeeeeeee</text>
|
||||||
<text x="920" y="260">c:::::::::::::::::co:::::::::::::::</text>
|
<text x="920" y="260">c:::::::::::::::::co:::::::::::::::</text>
|
||||||
<text x="1104" y="260">r:::::r</text>
|
<text x="1104" y="260">r:::::r</text>
|
||||||
<text x="1304" y="260">e::::::::eeeeeeee</text>
|
<text x="1304" y="260">e::::::::eeeeeeee</text>
|
||||||
<text x="1568" y="260">d:::::::::::::::::d u:::::::::::::::um::::m</text>
|
<text x="1568" y="260">d:::::::::::::::::d u:::::::::::::::um::::m</text>
|
||||||
<text x="1788" y="260">m::::m</text>
|
<text x="1788" y="260">m::::m</text>
|
||||||
<text x="1936" y="260">m::::m p::::::::::::::::p</text>
|
<text x="1936" y="260">m::::m p::::::::::::::::p</text>
|
||||||
<text x="68" y="276">$$$$$$:::$$$$$</text>
|
<text x="68" y="276">$$$$$$:::$$$$$</text>
|
||||||
<text x="384" y="276">tt:::::::::::tt h:::::h</text>
|
<text x="384" y="276">tt:::::::::::tt h:::::h</text>
|
||||||
<text x="544" y="276">h:::::h</text>
|
<text x="544" y="276">h:::::h</text>
|
||||||
<text x="652" y="276">ee:::::::::::::e</text>
|
<text x="652" y="276">ee:::::::::::::e</text>
|
||||||
<text x="860" y="276">cc:::::::::::::::c</text>
|
<text x="860" y="276">cc:::::::::::::::c</text>
|
||||||
<text x="1000" y="276">:::::::::::</text>
|
<text x="1000" y="276">:::::::::::</text>
|
||||||
<text x="1104" y="276">r:::::r</text>
|
<text x="1104" y="276">r:::::r</text>
|
||||||
<text x="1308" y="276">ee:::::::::::::e</text>
|
<text x="1308" y="276">ee:::::::::::::e</text>
|
||||||
<text x="1476" y="276">d:::::::::ddd::::d</text>
|
<text x="1476" y="276">d:::::::::ddd::::d</text>
|
||||||
<text x="1652" y="276">uu::::::::uu:::um::::m</text>
|
<text x="1652" y="276">uu::::::::uu:::um::::m</text>
|
||||||
<text x="1788" y="276">m::::m</text>
|
<text x="1788" y="276">m::::m</text>
|
||||||
<text x="1932" y="276">m::::m p::::::::::::::pp</text>
|
<text x="1932" y="276">m::::m p::::::::::::::pp</text>
|
||||||
<text x="72" y="292">$:::$</text>
|
<text x="72" y="292">$:::$</text>
|
||||||
<text x="352" y="292">ttttttttttt</text>
|
<text x="352" y="292">ttttttttttt</text>
|
||||||
<text x="448" y="292">hhhhhhh</text>
|
<text x="448" y="292">hhhhhhh</text>
|
||||||
<text x="544" y="292">hhhhhhh</text>
|
<text x="544" y="292">hhhhhhh</text>
|
||||||
<text x="660" y="292">eeeeeeeeeeeeee</text>
|
<text x="660" y="292">eeeeeeeeeeeeee</text>
|
||||||
<text x="868" y="292">cccccccccccccccc</text>
|
<text x="868" y="292">cccccccccccccccc</text>
|
||||||
<text x="1024" y="292">o</text>
|
<text x="1024" y="292">o</text>
|
||||||
<text x="1104" y="292">rrrrrrr</text>
|
<text x="1104" y="292">rrrrrrr</text>
|
||||||
<text x="1316" y="292">eeeeeeeeeeeeee</text>
|
<text x="1316" y="292">eeeeeeeeeeeeee</text>
|
||||||
<text x="1448" y="292">ddddddddd</text>
|
<text x="1448" y="292">ddddddddd</text>
|
||||||
<text x="1528" y="292">ddddd</text>
|
<text x="1528" y="292">ddddd</text>
|
||||||
<text x="1612" y="292">uuuuuuuu</text>
|
<text x="1612" y="292">uuuuuuuu</text>
|
||||||
<text x="1700" y="292">uuuummmmmm</text>
|
<text x="1700" y="292">uuuummmmmm</text>
|
||||||
<text x="1788" y="292">mmmmmm</text>
|
<text x="1788" y="292">mmmmmm</text>
|
||||||
<text x="1924" y="292">mmmmmm p::::::pppppppp</text>
|
<text x="1924" y="292">mmmmmm p::::::pppppppp</text>
|
||||||
<text x="72" y="308">$$$$$</text>
|
<text x="72" y="308">$$$$$</text>
|
||||||
<text x="1920" y="308">p:::::p</text>
|
<text x="1920" y="308">p:::::p</text>
|
||||||
<text x="1920" y="324">p:::::p</text>
|
<text x="1920" y="324">p:::::p</text>
|
||||||
<text x="1920" y="340">p:::::::p</text>
|
<text x="1920" y="340">p:::::::p</text>
|
||||||
<text x="1920" y="356">p:::::::p</text>
|
<text x="1920" y="356">p:::::::p</text>
|
||||||
<text x="1920" y="372">p:::::::p</text>
|
<text x="1920" y="372">p:::::::p</text>
|
||||||
<text x="1920" y="388">ppppppppp</text>
|
<text x="1920" y="388">ppppppppp</text>
|
||||||
</g>
|
</g>
|
||||||
</a>
|
</a>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
.opendot {
|
.opendot {
|
||||||
@apply stroke-primary fill-none stroke-[0.1em];
|
@apply stroke-primary fill-none stroke-[0.1em];
|
||||||
}
|
}
|
||||||
.logo {
|
.logo {
|
||||||
& .text {
|
& .text {
|
||||||
@apply fill-black dark:fill-white;
|
@apply fill-black dark:fill-white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,289 +1,289 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { fly } from 'svelte/transition';
|
import { fly } from 'svelte/transition'
|
||||||
|
|
||||||
export let height = '192';
|
export let height = '192'
|
||||||
export let width = 'auto';
|
export let width = 'auto'
|
||||||
export let href: string;
|
export let href: string
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
viewBox="0 0 2104 416"
|
viewBox="0 0 2104 416"
|
||||||
class="diagram select-none font-mono logo"
|
class="diagram select-none font-mono logo"
|
||||||
text-anchor="middle"
|
text-anchor="middle"
|
||||||
font-size="13px"
|
font-size="13px"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
{height}
|
{height}
|
||||||
{width}
|
{width}
|
||||||
in:fly={{ x: -100, duration: 300, delay: 320 }}
|
in:fly={{ x: -100, duration: 300, delay: 320 }}
|
||||||
out:fly={{ x: 100, duration: 300 }}
|
out:fly={{ x: 100, duration: 300 }}
|
||||||
>
|
>
|
||||||
<a {href}>
|
<a {href}>
|
||||||
<path d="M 112,352 L 232,112" fill="none" stroke="black" />
|
<path d="M 112,352 L 232,112" fill="none" stroke="black" />
|
||||||
<path d="M 160,352 L 280,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="144" r="0.22em" class="opendot" />
|
||||||
<circle cx="680" cy="160" 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="176" r="0.22em" class="opendot" />
|
||||||
<circle cx="680" cy="192" 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="208" r="0.22em" class="opendot" />
|
||||||
<circle cx="680" cy="224" 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="240" r="0.22em" class="opendot" />
|
||||||
<circle cx="680" cy="256" 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="128" r="0.22em" class="opendot" />
|
||||||
<circle cx="688" cy="272" 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="128" r="0.22em" class="opendot" />
|
||||||
<circle cx="696" cy="272" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="704" cy="288" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="712" cy="288" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="720" cy="176" 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="192" r="0.22em" class="opendot" />
|
||||||
<circle cx="720" cy="208" 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="224" r="0.22em" class="opendot" />
|
||||||
<circle cx="720" cy="288" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="728" cy="288" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="736" cy="288" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="744" cy="288" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="752" cy="160" 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="240" r="0.22em" class="opendot" />
|
||||||
<circle cx="752" cy="288" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="760" cy="160" 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="240" r="0.22em" class="opendot" />
|
||||||
<circle cx="760" cy="288" 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="176" r="0.22em" class="opendot" />
|
||||||
<circle cx="768" cy="192" 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="208" r="0.22em" class="opendot" />
|
||||||
<circle cx="768" cy="224" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="776" cy="288" 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="112" r="0.22em" class="opendot" />
|
||||||
<circle cx="784" cy="288" 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="128" r="0.22em" class="opendot" />
|
||||||
<circle cx="792" cy="272" 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="128" r="0.22em" class="opendot" />
|
||||||
<circle cx="800" cy="272" 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" />
|
<circle cx="808" cy="256" r="0.22em" class="opendot" />
|
||||||
<g class="text">
|
<g class="text">
|
||||||
<text x="256" y="116">/////</text>
|
<text x="256" y="116">/////</text>
|
||||||
<text x="504" y="116">yyyyyyy</text>
|
<text x="504" y="116">yyyyyyy</text>
|
||||||
<text x="648" y="116">yyyyyyy</text>
|
<text x="648" y="116">yyyyyyy</text>
|
||||||
<text x="768" y="116">o</text>
|
<text x="768" y="116">o</text>
|
||||||
<text x="836" y="116">uuuuuu</text>
|
<text x="836" y="116">uuuuuu</text>
|
||||||
<text x="916" y="116">uuuuuu</text>
|
<text x="916" y="116">uuuuuu</text>
|
||||||
<text x="984" y="116">wwwwwww</text>
|
<text x="984" y="116">wwwwwww</text>
|
||||||
<text x="1120" y="116">wwwww</text>
|
<text x="1120" y="116">wwwww</text>
|
||||||
<text x="1256" y="116">wwwwwww</text>
|
<text x="1256" y="116">wwwwwww</text>
|
||||||
<text x="1364" y="116">eeeeeeeeeeee</text>
|
<text x="1364" y="116">eeeeeeeeeeee</text>
|
||||||
<text x="1460" y="116">nnnn</text>
|
<text x="1460" y="116">nnnn</text>
|
||||||
<text x="1524" y="116">nnnnnnnn</text>
|
<text x="1524" y="116">nnnnnnnn</text>
|
||||||
<text x="1656" y="116">wwwwwww</text>
|
<text x="1656" y="116">wwwwwww</text>
|
||||||
<text x="1792" y="116">wwwww</text>
|
<text x="1792" y="116">wwwww</text>
|
||||||
<text x="1952" y="116">wwwwwwwuuuuuu</text>
|
<text x="1952" y="116">wwwwwwwuuuuuu</text>
|
||||||
<text x="2060" y="116">uuuuuu</text>
|
<text x="2060" y="116">uuuuuu</text>
|
||||||
<text x="80" y="132"><<<<<<<</text>
|
<text x="80" y="132"><<<<<<<</text>
|
||||||
<text x="248" y="132">:::::</text>
|
<text x="248" y="132">:::::</text>
|
||||||
<text x="312" y="132">>>>>>>></text>
|
<text x="312" y="132">>>>>>>></text>
|
||||||
<text x="512" y="132">y:::::y</text>
|
<text x="512" y="132">y:::::y</text>
|
||||||
<text x="640" y="132">y:::::y</text>
|
<text x="640" y="132">y:::::y</text>
|
||||||
<text x="744" y="132">:::::::::::</text>
|
<text x="744" y="132">:::::::::::</text>
|
||||||
<text x="836" y="132">u::::u</text>
|
<text x="836" y="132">u::::u</text>
|
||||||
<text x="916" y="132">u::::u</text>
|
<text x="916" y="132">u::::u</text>
|
||||||
<text x="992" y="132">w:::::w</text>
|
<text x="992" y="132">w:::::w</text>
|
||||||
<text x="1120" y="132">w:::::w</text>
|
<text x="1120" y="132">w:::::w</text>
|
||||||
<text x="1248" y="132">w:::::w</text>
|
<text x="1248" y="132">w:::::w</text>
|
||||||
<text x="1364" y="132">ee::::::::::::ee</text>
|
<text x="1364" y="132">ee::::::::::::ee</text>
|
||||||
<text x="1508" y="132">n:::nn::::::::nn</text>
|
<text x="1508" y="132">n:::nn::::::::nn</text>
|
||||||
<text x="1664" y="132">w:::::w</text>
|
<text x="1664" y="132">w:::::w</text>
|
||||||
<text x="1792" 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="1948" y="132">w:::::w u::::u</text>
|
||||||
<text x="2060" y="132">u::::u</text>
|
<text x="2060" y="132">u::::u</text>
|
||||||
<text x="72" y="148"><:::::<</text>
|
<text x="72" y="148"><:::::<</text>
|
||||||
<text x="240" y="148">:::::</text>
|
<text x="240" y="148">:::::</text>
|
||||||
<text x="320" y="148">>:::::></text>
|
<text x="320" y="148">>:::::></text>
|
||||||
<text x="520" y="148">y:::::y</text>
|
<text x="520" y="148">y:::::y</text>
|
||||||
<text x="632" y="148">y:::::y</text>
|
<text x="632" y="148">y:::::y</text>
|
||||||
<text x="772" y="148">:::::::::::::::ou::::u</text>
|
<text x="772" y="148">:::::::::::::::ou::::u</text>
|
||||||
<text x="916" y="148">u::::u</text>
|
<text x="916" y="148">u::::u</text>
|
||||||
<text x="1000" y="148">w:::::w</text>
|
<text x="1000" y="148">w:::::w</text>
|
||||||
<text x="1120" y="148">w:::::::w</text>
|
<text x="1120" y="148">w:::::::w</text>
|
||||||
<text x="1240" 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="1436" y="148">e::::::eeeee:::::een::::::::::::::nn</text>
|
||||||
<text x="1672" y="148">w:::::w</text>
|
<text x="1672" y="148">w:::::w</text>
|
||||||
<text x="1792" y="148">w:::::::w</text>
|
<text x="1792" y="148">w:::::::w</text>
|
||||||
<text x="1912" y="148">w:::::w</text>
|
<text x="1912" y="148">w:::::w</text>
|
||||||
<text x="1980" y="148">u::::u</text>
|
<text x="1980" y="148">u::::u</text>
|
||||||
<text x="2060" y="148">u::::u</text>
|
<text x="2060" y="148">u::::u</text>
|
||||||
<text x="64" y="164"><:::::<</text>
|
<text x="64" y="164"><:::::<</text>
|
||||||
<text x="232" y="164">:::::</text>
|
<text x="232" y="164">:::::</text>
|
||||||
<text x="328" y="164">>:::::></text>
|
<text x="328" y="164">>:::::></text>
|
||||||
<text x="528" y="164">y:::::y</text>
|
<text x="528" y="164">y:::::y</text>
|
||||||
<text x="624" y="164">y:::::y</text>
|
<text x="624" y="164">y:::::y</text>
|
||||||
<text x="716" y="164">:::::ooo</text>
|
<text x="716" y="164">:::::ooo</text>
|
||||||
<text x="812" y="164">:::::ou::::u</text>
|
<text x="812" y="164">:::::ou::::u</text>
|
||||||
<text x="916" y="164">u::::u</text>
|
<text x="916" y="164">u::::u</text>
|
||||||
<text x="1008" y="164">w:::::w</text>
|
<text x="1008" y="164">w:::::w</text>
|
||||||
<text x="1120" y="164">w:::::::::w</text>
|
<text x="1120" y="164">w:::::::::w</text>
|
||||||
<text x="1232" y="164">w:::::w</text>
|
<text x="1232" y="164">w:::::w</text>
|
||||||
<text x="1316" y="164">e::::::e</text>
|
<text x="1316" y="164">e::::::e</text>
|
||||||
<text x="1488" y="164">e:::::enn:::::::::::::::n</text>
|
<text x="1488" y="164">e:::::enn:::::::::::::::n</text>
|
||||||
<text x="1680" y="164">w:::::w</text>
|
<text x="1680" y="164">w:::::w</text>
|
||||||
<text x="1792" y="164">w:::::::::w</text>
|
<text x="1792" y="164">w:::::::::w</text>
|
||||||
<text x="1904" y="164">w:::::w</text>
|
<text x="1904" y="164">w:::::w</text>
|
||||||
<text x="1980" y="164">u::::u</text>
|
<text x="1980" y="164">u::::u</text>
|
||||||
<text x="2060" y="164">u::::u</text>
|
<text x="2060" y="164">u::::u</text>
|
||||||
<text x="56" y="180"><:::::<</text>
|
<text x="56" y="180"><:::::<</text>
|
||||||
<text x="224" y="180">:::::</text>
|
<text x="224" y="180">:::::</text>
|
||||||
<text x="336" y="180">>:::::></text>
|
<text x="336" y="180">>:::::></text>
|
||||||
<text x="536" y="180">y:::::y</text>
|
<text x="536" y="180">y:::::y</text>
|
||||||
<text x="616" y="180">y:::::y</text>
|
<text x="616" y="180">y:::::y</text>
|
||||||
<text x="700" y="180">::::</text>
|
<text x="700" y="180">::::</text>
|
||||||
<text x="816" y="180">::::ou::::u</text>
|
<text x="816" y="180">::::ou::::u</text>
|
||||||
<text x="916" y="180">u::::u</text>
|
<text x="916" y="180">u::::u</text>
|
||||||
<text x="1016" y="180">w:::::w</text>
|
<text x="1016" y="180">w:::::w</text>
|
||||||
<text x="1120" y="180">w:::::w:::::w</text>
|
<text x="1120" y="180">w:::::w:::::w</text>
|
||||||
<text x="1224" y="180">w:::::w</text>
|
<text x="1224" y="180">w:::::w</text>
|
||||||
<text x="1364" y="180">e:::::::eeeee::::::e</text>
|
<text x="1364" y="180">e:::::::eeeee::::::e</text>
|
||||||
<text x="1524" y="180">n:::::nnnn:::::n</text>
|
<text x="1524" y="180">n:::::nnnn:::::n</text>
|
||||||
<text x="1688" y="180">w:::::w</text>
|
<text x="1688" y="180">w:::::w</text>
|
||||||
<text x="1792" y="180">w:::::w:::::w</text>
|
<text x="1792" y="180">w:::::w:::::w</text>
|
||||||
<text x="1896" y="180">w:::::w</text>
|
<text x="1896" y="180">w:::::w</text>
|
||||||
<text x="1980" y="180">u::::u</text>
|
<text x="1980" y="180">u::::u</text>
|
||||||
<text x="2060" y="180">u::::u</text>
|
<text x="2060" y="180">u::::u</text>
|
||||||
<text x="48" y="196"><:::::<</text>
|
<text x="48" y="196"><:::::<</text>
|
||||||
<text x="216" y="196">:::::</text>
|
<text x="216" y="196">:::::</text>
|
||||||
<text x="344" y="196">>:::::></text>
|
<text x="344" y="196">>:::::></text>
|
||||||
<text x="576" y="196">y:::::y y:::::y</text>
|
<text x="576" y="196">y:::::y y:::::y</text>
|
||||||
<text x="700" y="196">::::</text>
|
<text x="700" y="196">::::</text>
|
||||||
<text x="816" y="196">::::ou::::u</text>
|
<text x="816" y="196">::::ou::::u</text>
|
||||||
<text x="916" y="196">u::::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="1120" y="196">w:::::w w:::::w w:::::w w:::::w</text>
|
||||||
<text x="1360" y="196">e:::::::::::::::::e</text>
|
<text x="1360" y="196">e:::::::::::::::::e</text>
|
||||||
<text x="1484" y="196">n::::n</text>
|
<text x="1484" y="196">n::::n</text>
|
||||||
<text x="1564" 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="1792" y="196">w:::::w w:::::w w:::::w w:::::w</text>
|
||||||
<text x="1980" y="196">u::::u</text>
|
<text x="1980" y="196">u::::u</text>
|
||||||
<text x="2060" y="196">u::::u</text>
|
<text x="2060" y="196">u::::u</text>
|
||||||
<text x="40" y="212"><:::::<</text>
|
<text x="40" y="212"><:::::<</text>
|
||||||
<text x="208" y="212">:::::</text>
|
<text x="208" y="212">:::::</text>
|
||||||
<text x="352" y="212">>:::::></text>
|
<text x="352" y="212">>:::::></text>
|
||||||
<text x="576" y="212">y:::::y:::::y</text>
|
<text x="576" y="212">y:::::y:::::y</text>
|
||||||
<text x="700" y="212">::::</text>
|
<text x="700" y="212">::::</text>
|
||||||
<text x="816" y="212">::::ou::::u</text>
|
<text x="816" y="212">::::ou::::u</text>
|
||||||
<text x="916" y="212">u::::u</text>
|
<text x="916" y="212">u::::u</text>
|
||||||
<text x="1056" y="212">w:::::w:::::w</text>
|
<text x="1056" y="212">w:::::w:::::w</text>
|
||||||
<text x="1184" 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="1356" y="212">e::::::eeeeeeeeeee</text>
|
||||||
<text x="1484" y="212">n::::n</text>
|
<text x="1484" y="212">n::::n</text>
|
||||||
<text x="1564" y="212">n::::n</text>
|
<text x="1564" y="212">n::::n</text>
|
||||||
<text x="1728" y="212">w:::::w:::::w</text>
|
<text x="1728" y="212">w:::::w:::::w</text>
|
||||||
<text x="1856" 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="1980" y="212">u::::u</text>
|
||||||
<text x="2060" y="212">u::::u</text>
|
<text x="2060" y="212">u::::u</text>
|
||||||
<text x="32" y="228"><:::::<</text>
|
<text x="32" y="228"><:::::<</text>
|
||||||
<text x="200" y="228">:::::</text>
|
<text x="200" y="228">:::::</text>
|
||||||
<text x="360" y="228">>:::::></text>
|
<text x="360" y="228">>:::::></text>
|
||||||
<text x="576" y="228">y:::::::::y</text>
|
<text x="576" y="228">y:::::::::y</text>
|
||||||
<text x="700" y="228">::::</text>
|
<text x="700" y="228">::::</text>
|
||||||
<text x="856" y="228">::::ou:::::uuuu:::::u</text>
|
<text x="856" y="228">::::ou:::::uuuu:::::u</text>
|
||||||
<text x="1056" y="228">w:::::::::w</text>
|
<text x="1056" y="228">w:::::::::w</text>
|
||||||
<text x="1184" y="228">w:::::::::w</text>
|
<text x="1184" y="228">w:::::::::w</text>
|
||||||
<text x="1320" y="228">e:::::::e</text>
|
<text x="1320" y="228">e:::::::e</text>
|
||||||
<text x="1484" y="228">n::::n</text>
|
<text x="1484" y="228">n::::n</text>
|
||||||
<text x="1564" y="228">n::::n</text>
|
<text x="1564" y="228">n::::n</text>
|
||||||
<text x="1728" y="228">w:::::::::w</text>
|
<text x="1728" y="228">w:::::::::w</text>
|
||||||
<text x="1856" y="228">w:::::::::w</text>
|
<text x="1856" y="228">w:::::::::w</text>
|
||||||
<text x="2020" y="228">u:::::uuuu:::::u</text>
|
<text x="2020" y="228">u:::::uuuu:::::u</text>
|
||||||
<text x="40" y="244"><:::::<</text>
|
<text x="40" y="244"><:::::<</text>
|
||||||
<text x="192" y="244">:::::</text>
|
<text x="192" y="244">:::::</text>
|
||||||
<text x="352" y="244">>:::::></text>
|
<text x="352" y="244">>:::::></text>
|
||||||
<text x="576" y="244">y:::::::y</text>
|
<text x="576" y="244">y:::::::y</text>
|
||||||
<text x="716" y="244">:::::ooo</text>
|
<text x="716" y="244">:::::ooo</text>
|
||||||
<text x="860" y="244">:::::ou:::::::::::::::uu</text>
|
<text x="860" y="244">:::::ou:::::::::::::::uu</text>
|
||||||
<text x="1056" y="244">w:::::::w</text>
|
<text x="1056" y="244">w:::::::w</text>
|
||||||
<text x="1184" y="244">w:::::::w</text>
|
<text x="1184" y="244">w:::::::w</text>
|
||||||
<text x="1324" y="244">e::::::::e</text>
|
<text x="1324" y="244">e::::::::e</text>
|
||||||
<text x="1484" y="244">n::::n</text>
|
<text x="1484" y="244">n::::n</text>
|
||||||
<text x="1564" y="244">n::::n</text>
|
<text x="1564" y="244">n::::n</text>
|
||||||
<text x="1728" y="244">w:::::::w</text>
|
<text x="1728" y="244">w:::::::w</text>
|
||||||
<text x="1856" y="244">w:::::::w</text>
|
<text x="1856" y="244">w:::::::w</text>
|
||||||
<text x="2028" y="244">u:::::::::::::::uu</text>
|
<text x="2028" y="244">u:::::::::::::::uu</text>
|
||||||
<text x="48" y="260"><:::::<</text>
|
<text x="48" y="260"><:::::<</text>
|
||||||
<text x="184" y="260">:::::</text>
|
<text x="184" y="260">:::::</text>
|
||||||
<text x="344" y="260">>:::::></text>
|
<text x="344" y="260">>:::::></text>
|
||||||
<text x="576" y="260">y:::::y</text>
|
<text x="576" y="260">y:::::y</text>
|
||||||
<text x="744" y="260">:::::::::::::::</text>
|
<text x="744" y="260">:::::::::::::::</text>
|
||||||
<text x="888" y="260">u:::::::::::::::u</text>
|
<text x="888" y="260">u:::::::::::::::u</text>
|
||||||
<text x="1056" y="260">w:::::w</text>
|
<text x="1056" y="260">w:::::w</text>
|
||||||
<text x="1184" y="260">w:::::w</text>
|
<text x="1184" y="260">w:::::w</text>
|
||||||
<text x="1360" y="260">e::::::::eeeeeeee</text>
|
<text x="1360" y="260">e::::::::eeeeeeee</text>
|
||||||
<text x="1484" y="260">n::::n</text>
|
<text x="1484" y="260">n::::n</text>
|
||||||
<text x="1564" y="260">n::::n</text>
|
<text x="1564" y="260">n::::n</text>
|
||||||
<text x="1728" y="260">w:::::w</text>
|
<text x="1728" y="260">w:::::w</text>
|
||||||
<text x="1856" y="260">w:::::w</text>
|
<text x="1856" y="260">w:::::w</text>
|
||||||
<text x="2032" y="260">u:::::::::::::::u</text>
|
<text x="2032" y="260">u:::::::::::::::u</text>
|
||||||
<text x="56" y="276"><:::::<</text>
|
<text x="56" y="276"><:::::<</text>
|
||||||
<text x="176" y="276">:::::</text>
|
<text x="176" y="276">:::::</text>
|
||||||
<text x="336" y="276">>:::::></text>
|
<text x="336" y="276">>:::::></text>
|
||||||
<text x="568" y="276">y:::::y</text>
|
<text x="568" y="276">y:::::y</text>
|
||||||
<text x="744" y="276">:::::::::::</text>
|
<text x="744" y="276">:::::::::::</text>
|
||||||
<text x="892" y="276">uu::::::::uu:::u</text>
|
<text x="892" y="276">uu::::::::uu:::u</text>
|
||||||
<text x="1056" y="276">w:::w</text>
|
<text x="1056" y="276">w:::w</text>
|
||||||
<text x="1184" y="276">w:::w</text>
|
<text x="1184" y="276">w:::w</text>
|
||||||
<text x="1364" y="276">ee:::::::::::::e</text>
|
<text x="1364" y="276">ee:::::::::::::e</text>
|
||||||
<text x="1484" y="276">n::::n</text>
|
<text x="1484" y="276">n::::n</text>
|
||||||
<text x="1564" y="276">n::::n</text>
|
<text x="1564" y="276">n::::n</text>
|
||||||
<text x="1728" y="276">w:::w</text>
|
<text x="1728" y="276">w:::w</text>
|
||||||
<text x="1856" y="276">w:::w</text>
|
<text x="1856" y="276">w:::w</text>
|
||||||
<text x="2036" y="276">uu::::::::uu:::u</text>
|
<text x="2036" y="276">uu::::::::uu:::u</text>
|
||||||
<text x="64" y="292"><:::::<</text>
|
<text x="64" y="292"><:::::<</text>
|
||||||
<text x="168" y="292">:::::</text>
|
<text x="168" y="292">:::::</text>
|
||||||
<text x="328" y="292">>:::::></text>
|
<text x="328" y="292">>:::::></text>
|
||||||
<text x="560" y="292">y:::::y</text>
|
<text x="560" y="292">y:::::y</text>
|
||||||
<text x="768" y="292">o</text>
|
<text x="768" y="292">o</text>
|
||||||
<text x="876" y="292">uuuuuuuu</text>
|
<text x="876" y="292">uuuuuuuu</text>
|
||||||
<text x="940" y="292">uuuu</text>
|
<text x="940" y="292">uuuu</text>
|
||||||
<text x="1056" y="292">www</text>
|
<text x="1056" y="292">www</text>
|
||||||
<text x="1184" y="292">www</text>
|
<text x="1184" y="292">www</text>
|
||||||
<text x="1372" y="292">eeeeeeeeeeeeee</text>
|
<text x="1372" y="292">eeeeeeeeeeeeee</text>
|
||||||
<text x="1484" y="292">nnnnnn</text>
|
<text x="1484" y="292">nnnnnn</text>
|
||||||
<text x="1564" y="292">nnnnnn</text>
|
<text x="1564" y="292">nnnnnn</text>
|
||||||
<text x="1728" y="292">www</text>
|
<text x="1728" y="292">www</text>
|
||||||
<text x="1856" y="292">www</text>
|
<text x="1856" y="292">www</text>
|
||||||
<text x="2020" y="292">uuuuuuuu</text>
|
<text x="2020" y="292">uuuuuuuu</text>
|
||||||
<text x="2084" y="292">uuuu</text>
|
<text x="2084" y="292">uuuu</text>
|
||||||
<text x="72" y="308"><:::::<</text>
|
<text x="72" y="308"><:::::<</text>
|
||||||
<text x="160" y="308">:::::</text>
|
<text x="160" y="308">:::::</text>
|
||||||
<text x="320" y="308">>:::::></text>
|
<text x="320" y="308">>:::::></text>
|
||||||
<text x="552" y="308">y:::::y</text>
|
<text x="552" y="308">y:::::y</text>
|
||||||
<text x="80" y="324"><<<<<<<</text>
|
<text x="80" y="324"><<<<<<<</text>
|
||||||
<text x="152" y="324">:::::</text>
|
<text x="152" y="324">:::::</text>
|
||||||
<text x="312" y="324">>>>>>>></text>
|
<text x="312" y="324">>>>>>>></text>
|
||||||
<text x="544" y="324">y:::::y</text>
|
<text x="544" y="324">y:::::y</text>
|
||||||
<text x="144" y="340">:::::</text>
|
<text x="144" y="340">:::::</text>
|
||||||
<text x="536" y="340">y:::::y</text>
|
<text x="536" y="340">y:::::y</text>
|
||||||
<text x="136" y="356">/////</text>
|
<text x="136" y="356">/////</text>
|
||||||
<text x="528" y="356">y:::::y</text>
|
<text x="528" y="356">y:::::y</text>
|
||||||
<text x="512" y="372">yyyyyyy</text>
|
<text x="512" y="372">yyyyyyy</text>
|
||||||
</g>
|
</g>
|
||||||
</a>
|
</a>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
.opendot {
|
.opendot {
|
||||||
@apply stroke-primary fill-none stroke-[0.1em];
|
@apply stroke-primary fill-none stroke-[0.1em];
|
||||||
}
|
}
|
||||||
.logo {
|
.logo {
|
||||||
& .text {
|
& .text {
|
||||||
@apply fill-black dark:fill-white;
|
@apply fill-black dark:fill-white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,29 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte'
|
||||||
import { fly } from 'svelte/transition';
|
import { fly } from 'svelte/transition'
|
||||||
import Button from './ui/button/button.svelte';
|
import Button from './ui/button/button.svelte'
|
||||||
import { ChevronUp } from 'svelte-radix';
|
import { ChevronUp } from 'svelte-radix'
|
||||||
|
|
||||||
let showButton = false;
|
let showButton = false
|
||||||
|
|
||||||
function handleScroll() {
|
function handleScroll() {
|
||||||
const threshold = 400;
|
const threshold = 400
|
||||||
|
|
||||||
showButton = window.scrollY > threshold;
|
showButton = window.scrollY > threshold
|
||||||
}
|
}
|
||||||
|
|
||||||
function scrollToTop() {
|
function scrollToTop() {
|
||||||
window.scrollTo({
|
window.scrollTo({
|
||||||
top: 0,
|
top: 0,
|
||||||
behavior: 'smooth'
|
behavior: 'smooth'
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:window on:scroll={handleScroll} />
|
<svelte:window on:scroll={handleScroll} />
|
||||||
|
|
||||||
{#if showButton}
|
{#if showButton}
|
||||||
<div class="fixed bottom-10 right-10 z-40" transition:fly={{ y: 50, duration: 150 }}>
|
<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>
|
<Button size="icon" class="scale-125 md:scale-150" on:click={scrollToTop}><ChevronUp /></Button>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import ChevronRight from 'svelte-radix/ChevronRight.svelte';
|
import ChevronRight from 'svelte-radix/ChevronRight.svelte'
|
||||||
import * as Card from '$lib/components/ui/card';
|
import * as Card from '$lib/components/ui/card'
|
||||||
import Separator from '$lib/components/ui/separator/separator.svelte';
|
import Separator from '$lib/components/ui/separator/separator.svelte'
|
||||||
|
|
||||||
export let archived: Object | undefined = undefined;
|
export let archived: Object | undefined = undefined
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
|
@ -11,25 +11,25 @@
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<Card.Root class="bg-primary-foreground backdrop-blur-sm border-primary/10 min-h-[600px]">
|
<Card.Root class="bg-primary-foreground backdrop-blur-sm border-primary/10 min-h-[600px]">
|
||||||
<Card.Header>
|
<Card.Header>
|
||||||
<h2 class="text-3xl font-serif font-bold mb-6" id="archive">Archive</h2>
|
<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>
|
<h3 class="text-3xl font-serif font-medium text-muted-foreground" id="2024">2024</h3>
|
||||||
<Separator class="mt-4 bg-primary/10 h-1" />
|
<Separator class="mt-4 bg-primary/10 h-1" />
|
||||||
</Card.Header>
|
</Card.Header>
|
||||||
<Card.Content>
|
<Card.Content>
|
||||||
{#if archived}
|
{#if archived}
|
||||||
<div class="grid grid-cols-1 gap-2 mb-8">
|
<div class="grid grid-cols-1 gap-2 mb-8">
|
||||||
<h3 class="text-2xl font-serif font-bold">Placeholder Title</h3>
|
<h3 class="text-2xl font-serif font-bold">Placeholder Title</h3>
|
||||||
<p class="text-lg text-muted-foreground">Placeholder</p>
|
<p class="text-lg text-muted-foreground">Placeholder</p>
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<a href="/blog/2021/01" class="text-primary hover:underline text-lg font-serif"
|
<a href="/blog/2021/01" class="text-primary hover:underline text-lg font-serif"
|
||||||
>Read more</a
|
>Read more</a
|
||||||
>
|
>
|
||||||
<ChevronRight class="w-6 h-6 text-primary" />
|
<ChevronRight class="w-6 h-6 text-primary" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<p class="text-lg text-muted-foreground">Nothing here yet.</p>
|
<p class="text-lg text-muted-foreground">Nothing here yet.</p>
|
||||||
{/if}
|
{/if}
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
</Card.Root>
|
</Card.Root>
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,35 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import PostMetadata from './PostMetadata.svelte';
|
import PostMetadata from './PostMetadata.svelte'
|
||||||
import Crumbs from './Crumbs.svelte';
|
import Crumbs from './Crumbs.svelte'
|
||||||
|
|
||||||
export let doc: BlogDocument;
|
export let doc: BlogDocument
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
<Crumbs slug={doc.slug} title={doc.title} />
|
<Crumbs slug={doc.slug} title={doc.title} />
|
||||||
<header class="space-y-6">
|
<header class="space-y-6">
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<h1 class="scroll-m-20 text-5xl font-bold font-serif tracking-tight">
|
<h1 class="scroll-m-20 text-5xl font-bold font-serif tracking-tight">
|
||||||
{doc.title}
|
{doc.title}
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-balance text-lg text-muted-foreground">
|
<p class="text-balance text-lg text-muted-foreground">
|
||||||
{doc.blurb}
|
{doc.blurb}
|
||||||
</p>
|
</p>
|
||||||
<PostMetadata
|
<PostMetadata
|
||||||
primaryTags={doc.primaryTags}
|
primaryTags={doc.primaryTags}
|
||||||
secondaryTags={doc.secondaryTags}
|
secondaryTags={doc.secondaryTags}
|
||||||
date={doc.date}
|
date={doc.date}
|
||||||
length={doc.content.length}
|
length={doc.content.length}
|
||||||
reverseDateAndRest
|
reverseDateAndRest
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<figure class="w-full lg:w-[80%]">
|
<figure class="w-full lg:w-[80%]">
|
||||||
<img src={doc.image.src} alt={doc.image.alt} class="rounded-xl shadow-md" />
|
<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>
|
<figcaption class="mt-2 text-center text-muted-foreground">{doc.image.caption}</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="markdown-body mb-8 font-serif">
|
<div class="markdown-body mb-8 font-serif">
|
||||||
{@html doc.content}
|
{@html doc.content}
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,24 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import * as Breadcrumb from '../ui/breadcrumb';
|
import * as Breadcrumb from '../ui/breadcrumb'
|
||||||
|
|
||||||
export let slug: string;
|
export let slug: string
|
||||||
export let title: string;
|
export let title: string
|
||||||
|
|
||||||
$: trail = slug.split('/').slice(0, slug.split('/').length - 1);
|
$: trail = slug.split('/').slice(0, slug.split('/').length - 1)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Breadcrumb.Root class="mb-4">
|
<Breadcrumb.Root class="mb-4">
|
||||||
<Breadcrumb.List>
|
<Breadcrumb.List>
|
||||||
<Breadcrumb.Item><Breadcrumb.Link href="/blog">The Coredump</Breadcrumb.Link></Breadcrumb.Item>
|
<Breadcrumb.Item><Breadcrumb.Link href="/blog">The Coredump</Breadcrumb.Link></Breadcrumb.Item>
|
||||||
<Breadcrumb.Separator />
|
<Breadcrumb.Separator />
|
||||||
{#each trail as crumb, i}
|
{#each trail as crumb, i}
|
||||||
<Breadcrumb.Item>{crumb}</Breadcrumb.Item>
|
<Breadcrumb.Item>{crumb}</Breadcrumb.Item>
|
||||||
<Breadcrumb.Separator />
|
<Breadcrumb.Separator />
|
||||||
{/each}
|
{/each}
|
||||||
<Breadcrumb.Item>
|
<Breadcrumb.Item>
|
||||||
<Breadcrumb.Page>
|
<Breadcrumb.Page>
|
||||||
{title}
|
{title}
|
||||||
</Breadcrumb.Page>
|
</Breadcrumb.Page>
|
||||||
</Breadcrumb.Item>
|
</Breadcrumb.Item>
|
||||||
</Breadcrumb.List>
|
</Breadcrumb.List>
|
||||||
</Breadcrumb.Root>
|
</Breadcrumb.Root>
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,39 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import * as Card from '$lib/components/ui/card';
|
import * as Card from '$lib/components/ui/card'
|
||||||
import Button from '../ui/button/button.svelte';
|
import Button from '../ui/button/button.svelte'
|
||||||
import PostMetadata from './PostMetadata.svelte';
|
import PostMetadata from './PostMetadata.svelte'
|
||||||
|
|
||||||
export let doc: {
|
export let doc: {
|
||||||
metadata: PostMeta;
|
metadata: PostMeta
|
||||||
content: string;
|
content: string
|
||||||
slug: string;
|
slug: string
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Card.Root>
|
<Card.Root>
|
||||||
<Card.Header>
|
<Card.Header>
|
||||||
<h3 class="text-3xl lg:text-4xl font-serif font-bold mb-4 leading-tight">
|
<h3 class="text-3xl lg:text-4xl font-serif font-bold mb-4 leading-tight">
|
||||||
{doc.metadata.title}
|
{doc.metadata.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p class="text-muted-foreground text-xl">{doc.metadata.manifest.blurb}</p>
|
<p class="text-muted-foreground text-xl">{doc.metadata.manifest.blurb}</p>
|
||||||
<PostMetadata
|
<PostMetadata
|
||||||
primaryTags={doc.metadata.manifest.tags.primary}
|
primaryTags={doc.metadata.manifest.tags.primary}
|
||||||
secondaryTags={doc.metadata.manifest.tags.secondary}
|
secondaryTags={doc.metadata.manifest.tags.secondary}
|
||||||
date={doc.metadata.manifest.date}
|
date={doc.metadata.manifest.date}
|
||||||
length={doc.content.split(' ').length}
|
length={doc.content.split(' ').length}
|
||||||
/>
|
/>
|
||||||
</Card.Header>
|
</Card.Header>
|
||||||
<Card.Content class="grid grid-cols-3 gap-6">
|
<Card.Content class="grid grid-cols-3 gap-6">
|
||||||
<img
|
<img
|
||||||
src={doc.metadata.cover.src}
|
src={doc.metadata.cover.src}
|
||||||
alt={doc.metadata.cover.alt}
|
alt={doc.metadata.cover.alt}
|
||||||
class="col-span-3 md:col-span-1 rounded-2xl shadow-md"
|
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">
|
<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>
|
<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"
|
<Button variant="outline" href={`/blog/${doc.slug}`} class="text-xl flex-grow sm:flex-grow-0"
|
||||||
>Read More</Button
|
>Read More</Button
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
</Card.Root>
|
</Card.Root>
|
||||||
|
|
|
||||||
|
|
@ -17,38 +17,38 @@
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Badge from '../ui/badge/badge.svelte';
|
import Badge from '../ui/badge/badge.svelte'
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs'
|
||||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||||
|
|
||||||
dayjs.extend(relativeTime);
|
dayjs.extend(relativeTime)
|
||||||
|
|
||||||
export let primaryTags: string[] = [];
|
export let primaryTags: string[] = []
|
||||||
export let secondaryTags: string[] = [];
|
export let secondaryTags: string[] = []
|
||||||
export let date: Date;
|
export let date: Date
|
||||||
export let length: number;
|
export let length: number
|
||||||
export let reverseDateAndRest: boolean = false;
|
export let reverseDateAndRest: boolean = false
|
||||||
|
|
||||||
let dayjsDate = dayjs(date);
|
let dayjsDate = dayjs(date)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="grid grid-cols-1">
|
<div class="grid grid-cols-1">
|
||||||
{#if !reverseDateAndRest}
|
{#if !reverseDateAndRest}
|
||||||
<p class="text-muted-foreground/80 my-1 text-lg">{dayjsDate.format('MMMM DD, YYYY')}</p>
|
<p class="text-muted-foreground/80 my-1 text-lg">{dayjsDate.format('MMMM DD, YYYY')}</p>
|
||||||
{/if}
|
{/if}
|
||||||
<span class="flex items-center flex-wrap my-2 gap-2">
|
<span class="flex items-center flex-wrap my-2 gap-2">
|
||||||
{#each primaryTags as tag}
|
{#each primaryTags as tag}
|
||||||
<Badge>{tag}</Badge>
|
<Badge>{tag}</Badge>
|
||||||
{/each}
|
{/each}
|
||||||
{#each secondaryTags as tag}
|
{#each secondaryTags as tag}
|
||||||
<Badge variant="secondary">{tag}</Badge>
|
<Badge variant="secondary">{tag}</Badge>
|
||||||
{/each}
|
{/each}
|
||||||
</span>
|
</span>
|
||||||
<!-- Assuming adult silent reading rate of 238 wpm -->
|
<!-- Assuming adult silent reading rate of 238 wpm -->
|
||||||
<span class="text-muted-foreground text-sm mt-2">
|
<span class="text-muted-foreground text-sm mt-2">
|
||||||
{dayjsDate.fromNow()} | {Math.ceil(length / 238)} min read | {length} words
|
{dayjsDate.fromNow()} | {Math.ceil(length / 238)} min read | {length} words
|
||||||
</span>
|
</span>
|
||||||
{#if reverseDateAndRest}
|
{#if reverseDateAndRest}
|
||||||
<p class="text-muted-foreground/80 text-xl mt-4">{dayjsDate.format('MMMM DD, YYYY')}</p>
|
<p class="text-muted-foreground/80 text-xl mt-4">{dayjsDate.format('MMMM DD, YYYY')}</p>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,26 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Separator from './ui/separator/separator.svelte';
|
import Separator from './ui/separator/separator.svelte'
|
||||||
import Socials from './Socials.svelte';
|
import Socials from './Socials.svelte'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<footer class="h-24 px-4 mb-12 text-sm md:text-md xl:text-lg">
|
<footer class="h-24 px-4 mb-12 text-sm md:text-md xl:text-lg">
|
||||||
<Separator class="mb-4" />
|
<Separator class="mb-4" />
|
||||||
<div class="flex justify-center flex-col gap-4">
|
<div class="flex justify-center flex-col gap-4">
|
||||||
<Socials center />
|
<Socials center />
|
||||||
<p class="text-muted-foreground text-center">
|
<p class="text-muted-foreground text-center">
|
||||||
© 2024 Youwen Wu | Powered by <a
|
© 2024 Youwen Wu | Powered by <a
|
||||||
href="https://kit.svelte.dev"
|
href="https://kit.svelte.dev"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="hover:underline"><strong>SvelteKit</strong></a
|
class="hover:underline"><strong>SvelteKit</strong></a
|
||||||
>
|
>
|
||||||
and
|
and
|
||||||
<a href="https://www.shadcn-svelte.com/" class="hover:underline" target="_blank"
|
<a href="https://www.shadcn-svelte.com/" class="hover:underline" target="_blank"
|
||||||
><strong>shadcn-svelte</strong></a
|
><strong>shadcn-svelte</strong></a
|
||||||
>
|
>
|
||||||
|
|
|
|
||||||
<a href="https://github.com/couscousdude/coredump" target="_blank" class="hover:underline"
|
<a href="https://github.com/couscousdude/coredump" target="_blank" class="hover:underline"
|
||||||
>View the source</a
|
>View the source</a
|
||||||
>
|
>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,30 @@
|
||||||
<script>
|
<script>
|
||||||
import { fly } from 'svelte/transition';
|
import { fly } from 'svelte/transition'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="w-full fixed top-0 left-0 z-50" transition:fly={{ duration: 200, y: -6 }}>
|
<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="h-1.5 w-full bg-muted-foreground overflow-hidden">
|
||||||
<div class="progress w-full h-full bg-muted left-right"></div>
|
<div class="progress w-full h-full bg-muted left-right"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
.progress {
|
.progress {
|
||||||
animation: progress 0.8s infinite linear;
|
animation: progress 0.8s infinite linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-right {
|
.left-right {
|
||||||
transform-origin: 0% 50%;
|
transform-origin: 0% 50%;
|
||||||
}
|
}
|
||||||
@keyframes progress {
|
@keyframes progress {
|
||||||
0% {
|
0% {
|
||||||
transform: translateX(0) scaleX(0);
|
transform: translateX(0) scaleX(0);
|
||||||
}
|
}
|
||||||
40% {
|
40% {
|
||||||
transform: translateX(0) scaleX(0.4);
|
transform: translateX(0) scaleX(0.4);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translateX(100%) scaleX(0.5);
|
transform: translateX(100%) scaleX(0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,84 +1,84 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Name from '$lib/assets/Name.svelte';
|
import Name from '$lib/assets/Name.svelte'
|
||||||
import { HamburgerMenu } from 'svelte-radix';
|
import { HamburgerMenu } from 'svelte-radix'
|
||||||
import { Drawer } from 'vaul-svelte';
|
import { Drawer } from 'vaul-svelte'
|
||||||
import Separator from '../ui/separator/separator.svelte';
|
import Separator from '../ui/separator/separator.svelte'
|
||||||
import Button from '../ui/button/button.svelte';
|
import Button from '../ui/button/button.svelte'
|
||||||
import { Sun, Moon, Home, Person, File, Backpack } from 'svelte-radix';
|
import { Sun, Moon, Home, Person, File, Backpack } from 'svelte-radix'
|
||||||
import ThemePicker from '../ThemePicker.svelte';
|
import ThemePicker from '../ThemePicker.svelte'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Drawer.Root direction="top">
|
<Drawer.Root direction="top">
|
||||||
<Drawer.Trigger asChild let:builder>
|
<Drawer.Trigger asChild let:builder>
|
||||||
<Button variant="outline" size="icon" builders={[builder]} class="px-2 md:hidden">
|
<Button variant="outline" size="icon" builders={[builder]} class="px-2 md:hidden">
|
||||||
<HamburgerMenu class="icon border-1 border-primary" />
|
<HamburgerMenu class="icon border-1 border-primary" />
|
||||||
</Button>
|
</Button>
|
||||||
</Drawer.Trigger>
|
</Drawer.Trigger>
|
||||||
<Drawer.Portal>
|
<Drawer.Portal>
|
||||||
<Drawer.Overlay class="fixed inset-0 bg-black/40" />
|
<Drawer.Overlay class="fixed inset-0 bg-black/40" />
|
||||||
<Drawer.Content
|
<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"
|
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="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">
|
<div class="mx-auto max-w-md">
|
||||||
<Drawer.Title class="font-medium">
|
<Drawer.Title class="font-medium">
|
||||||
<span class="px-2 flex justify-center">
|
<span class="px-2 flex justify-center">
|
||||||
<Name href="/" width="80vw" height="auto" />
|
<Name href="/" width="80vw" height="auto" />
|
||||||
</span>
|
</span>
|
||||||
<Separator class="bg-zinc-300 h-1 rounded-3xl mt-1 dark:bg-zinc-500" />
|
<Separator class="bg-zinc-300 h-1 rounded-3xl mt-1 dark:bg-zinc-500" />
|
||||||
</Drawer.Title>
|
</Drawer.Title>
|
||||||
<div class="grid grid-cols-1 my-10 gap-4">
|
<div class="grid grid-cols-1 my-10 gap-4">
|
||||||
<Drawer.Close asChild let:builder>
|
<Drawer.Close asChild let:builder>
|
||||||
<Button
|
<Button
|
||||||
variant="link"
|
variant="link"
|
||||||
href="/"
|
href="/"
|
||||||
builders={[builder]}
|
builders={[builder]}
|
||||||
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
|
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
|
||||||
><Home class="mr-2" />Home</Button
|
><Home class="mr-2" />Home</Button
|
||||||
>
|
>
|
||||||
</Drawer.Close>
|
</Drawer.Close>
|
||||||
<Separator class="bg-zinc-400 dark:bg-zinc-500" />
|
<Separator class="bg-zinc-400 dark:bg-zinc-500" />
|
||||||
<Drawer.Close asChild let:builder>
|
<Drawer.Close asChild let:builder>
|
||||||
<Button
|
<Button
|
||||||
variant="link"
|
variant="link"
|
||||||
href="/about"
|
href="/about"
|
||||||
builders={[builder]}
|
builders={[builder]}
|
||||||
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
|
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
|
||||||
><Person class="mr-2" />About Me</Button
|
><Person class="mr-2" />About Me</Button
|
||||||
>
|
>
|
||||||
</Drawer.Close>
|
</Drawer.Close>
|
||||||
<Separator class="bg-zinc-400 dark:bg-zinc-500" />
|
<Separator class="bg-zinc-400 dark:bg-zinc-500" />
|
||||||
<Drawer.Close asChild let:builder>
|
<Drawer.Close asChild let:builder>
|
||||||
<Button
|
<Button
|
||||||
variant="link"
|
variant="link"
|
||||||
href="/portfolio"
|
href="/portfolio"
|
||||||
builders={[builder]}
|
builders={[builder]}
|
||||||
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
|
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
|
||||||
><Backpack class="mr-2" />Portfolio</Button
|
><Backpack class="mr-2" />Portfolio</Button
|
||||||
>
|
>
|
||||||
</Drawer.Close>
|
</Drawer.Close>
|
||||||
<Separator class="bg-zinc-400 dark:bg-zinc-500" />
|
<Separator class="bg-zinc-400 dark:bg-zinc-500" />
|
||||||
<Drawer.Close asChild let:builder>
|
<Drawer.Close asChild let:builder>
|
||||||
<Button
|
<Button
|
||||||
href="/blog"
|
href="/blog"
|
||||||
variant="link"
|
variant="link"
|
||||||
builders={[builder]}
|
builders={[builder]}
|
||||||
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
|
class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
|
||||||
><File class="mr-2" />Blog</Button
|
><File class="mr-2" />Blog</Button
|
||||||
>
|
>
|
||||||
</Drawer.Close>
|
</Drawer.Close>
|
||||||
<Separator class="bg-zinc-300 h-1 rounded-3xl mt-1 dark:bg-zinc-500 my-2" />
|
<Separator class="bg-zinc-300 h-1 rounded-3xl mt-1 dark:bg-zinc-500 my-2" />
|
||||||
<ThemePicker let:builder hideLabel wide>
|
<ThemePicker let:builder hideLabel wide>
|
||||||
<Button variant="outline" size="lg" builders={[builder]}>
|
<Button variant="outline" size="lg" builders={[builder]}>
|
||||||
<Sun class="mr-4 dark:hidden" />
|
<Sun class="mr-4 dark:hidden" />
|
||||||
<Moon class="mr-4 hidden dark:block" />
|
<Moon class="mr-4 hidden dark:block" />
|
||||||
Change Theme
|
Change Theme
|
||||||
</Button>
|
</Button>
|
||||||
</ThemePicker>
|
</ThemePicker>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mx-auto mb-8 h-1.5 w-12 flex-shrink-0 rounded-full bg-zinc-300" />
|
<div class="mx-auto mb-8 h-1.5 w-12 flex-shrink-0 rounded-full bg-zinc-300" />
|
||||||
</div>
|
</div>
|
||||||
</Drawer.Content>
|
</Drawer.Content>
|
||||||
</Drawer.Portal>
|
</Drawer.Portal>
|
||||||
</Drawer.Root>
|
</Drawer.Root>
|
||||||
|
|
|
||||||
|
|
@ -1,76 +1,76 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Name from '$lib/assets/Name.svelte';
|
import Name from '$lib/assets/Name.svelte'
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte'
|
||||||
import { navigating } from '$app/stores';
|
import { navigating } from '$app/stores'
|
||||||
import Coredump from '$lib/assets/Coredump.svelte';
|
import Coredump from '$lib/assets/Coredump.svelte'
|
||||||
import Separator from '../ui/separator/separator.svelte';
|
import Separator from '../ui/separator/separator.svelte'
|
||||||
import Drawer from './Drawer.svelte';
|
import Drawer from './Drawer.svelte'
|
||||||
import ThemePicker from '../ThemePicker.svelte';
|
import ThemePicker from '../ThemePicker.svelte'
|
||||||
import Button from '../ui/button/button.svelte';
|
import Button from '../ui/button/button.svelte'
|
||||||
import { Moon, Sun } from 'svelte-radix';
|
import { Moon, Sun } from 'svelte-radix'
|
||||||
|
|
||||||
let current: 'blog' | 'about' | 'home' | 'portfolio' | string;
|
let current: 'blog' | 'about' | 'home' | 'portfolio' | string
|
||||||
|
|
||||||
const updateCurrent = () => {
|
const updateCurrent = () => {
|
||||||
const path = window.location.pathname;
|
const path = window.location.pathname
|
||||||
if (path === '/') {
|
if (path === '/') {
|
||||||
current = 'home';
|
current = 'home'
|
||||||
} else {
|
} else {
|
||||||
const segments = path.split('/');
|
const segments = path.split('/')
|
||||||
current = segments[1] || 'home';
|
current = segments[1] || 'home'
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
return navigating.subscribe(updateCurrent);
|
return navigating.subscribe(updateCurrent)
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<nav
|
<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">
|
<div class="container mx-auto flex justify-between items-center h-full gap-6 overflow-x-auto">
|
||||||
<Drawer />
|
<Drawer />
|
||||||
{#if current === 'blog'}
|
{#if current === 'blog'}
|
||||||
<Coredump height="95%" href="/blog" />
|
<Coredump height="95%" href="/blog" />
|
||||||
{:else}
|
{:else}
|
||||||
<Name height="95%" href="/" />
|
<Name height="95%" href="/" />
|
||||||
{/if}
|
{/if}
|
||||||
<div class="gap-4 lg:gap-14 justify-around align-middle hidden md:flex">
|
<div class="gap-4 lg:gap-14 justify-around align-middle hidden md:flex">
|
||||||
<a
|
<a
|
||||||
href="/"
|
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="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
|
class:selected={current === 'home'}>Home</a
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href="/about"
|
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="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
|
class:selected={current === 'about'}>About</a
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href="/portfolio"
|
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="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
|
class:selected={current === 'portfolio'}>Portfolio</a
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href="/blog"
|
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="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
|
class:selected={current === 'blog'}>Blog</a
|
||||||
>
|
>
|
||||||
<ThemePicker let:builder>
|
<ThemePicker let:builder>
|
||||||
<Button builders={[builder]} variant="outline" size="icon" class="my-1">
|
<Button builders={[builder]} variant="outline" size="icon" class="my-1">
|
||||||
<Sun class="dark:hidden" />
|
<Sun class="dark:hidden" />
|
||||||
<Moon class="hidden dark:block" />
|
<Moon class="hidden dark:block" />
|
||||||
<span class="sr-only">Toggle theme</span>
|
<span class="sr-only">Toggle theme</span>
|
||||||
</Button>
|
</Button>
|
||||||
</ThemePicker>
|
</ThemePicker>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Separator />
|
<Separator />
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
.selected {
|
.selected {
|
||||||
@apply bg-zinc-300 dark:bg-zinc-600;
|
@apply bg-zinc-300 dark:bg-zinc-600;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,103 +1,103 @@
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
InstagramLogo,
|
InstagramLogo,
|
||||||
TwitterLogo,
|
TwitterLogo,
|
||||||
GithubLogo,
|
GithubLogo,
|
||||||
LinkedinLogo,
|
LinkedinLogo,
|
||||||
DiscordLogo,
|
DiscordLogo,
|
||||||
EnvelopeClosed,
|
EnvelopeClosed,
|
||||||
ClipboardCopy
|
ClipboardCopy
|
||||||
} from 'svelte-radix';
|
} from 'svelte-radix'
|
||||||
import * as Popover from '$lib/components/ui/popover';
|
import * as Popover from '$lib/components/ui/popover'
|
||||||
|
|
||||||
export let center = false;
|
export let center = false
|
||||||
|
|
||||||
import Button from './ui/button/button.svelte';
|
import Button from './ui/button/button.svelte'
|
||||||
import { toast } from 'svelte-sonner';
|
import { toast } from 'svelte-sonner'
|
||||||
|
|
||||||
const copyDiscord = async () => {
|
const copyDiscord = async () => {
|
||||||
try {
|
try {
|
||||||
await navigator.clipboard.writeText('couscousdude');
|
await navigator.clipboard.writeText('couscousdude')
|
||||||
toast('Copied Discord username to clipboard');
|
toast('Copied Discord username to clipboard')
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e)
|
||||||
toast('Failed to copy Discord username to clipboard');
|
toast('Failed to copy Discord username to clipboard')
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex gap-2 mt-2 flex-wrap" class:justify-center={center}>
|
<div class="flex gap-2 mt-2 flex-wrap" class:justify-center={center}>
|
||||||
<Button
|
<Button
|
||||||
class="hover:scale-110 transition-transform"
|
class="hover:scale-110 transition-transform"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
href="https://github.com/couscousdude"
|
href="https://github.com/couscousdude"
|
||||||
>
|
>
|
||||||
<GithubLogo />
|
<GithubLogo />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
class="hover:scale-110 transition-transform"
|
class="hover:scale-110 transition-transform"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
href="https://www.instagram.com/uncle_uwon/"><InstagramLogo /></Button
|
href="https://www.instagram.com/uncle_uwon/"><InstagramLogo /></Button
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
class="hover:scale-110 transition-transform"
|
class="hover:scale-110 transition-transform"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
href="https://twitter.com/couscousdude"><TwitterLogo /></Button
|
href="https://twitter.com/couscousdude"><TwitterLogo /></Button
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
class="hover:scale-110 transition-transform"
|
class="hover:scale-110 transition-transform"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
href="https://www.linkedin.com/in/youwen-wu-306221288/>"
|
href="https://www.linkedin.com/in/youwen-wu-306221288/>"
|
||||||
>
|
>
|
||||||
<LinkedinLogo />
|
<LinkedinLogo />
|
||||||
</Button>
|
</Button>
|
||||||
<Popover.Root>
|
<Popover.Root>
|
||||||
<Popover.Trigger asChild let:builder>
|
<Popover.Trigger asChild let:builder>
|
||||||
<Button
|
<Button
|
||||||
class="hover:scale-110 transition-transform"
|
class="hover:scale-110 transition-transform"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
builders={[builder]}
|
builders={[builder]}
|
||||||
>
|
>
|
||||||
<DiscordLogo />
|
<DiscordLogo />
|
||||||
</Button>
|
</Button>
|
||||||
</Popover.Trigger>
|
</Popover.Trigger>
|
||||||
<Popover.Content>
|
<Popover.Content>
|
||||||
Discord (for some reason) doesn't support direct links to profiles. You can find me on discord
|
Discord (for some reason) doesn't support direct links to profiles. You can find me on discord
|
||||||
with my username, <strong>@couscousdude</strong>.
|
with my username, <strong>@couscousdude</strong>.
|
||||||
<Button variant="outline" size="icon" on:click={copyDiscord} class="mt-2"
|
<Button variant="outline" size="icon" on:click={copyDiscord} class="mt-2"
|
||||||
><ClipboardCopy /></Button
|
><ClipboardCopy /></Button
|
||||||
>
|
>
|
||||||
</Popover.Content>
|
</Popover.Content>
|
||||||
</Popover.Root>
|
</Popover.Root>
|
||||||
<Popover.Root>
|
<Popover.Root>
|
||||||
<Popover.Trigger asChild let:builder>
|
<Popover.Trigger asChild let:builder>
|
||||||
<Button
|
<Button
|
||||||
class="hover:scale-110 transition-transform"
|
class="hover:scale-110 transition-transform"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
builders={[builder]}
|
builders={[builder]}
|
||||||
>
|
>
|
||||||
<EnvelopeClosed />
|
<EnvelopeClosed />
|
||||||
</Button>
|
</Button>
|
||||||
</Popover.Trigger>
|
</Popover.Trigger>
|
||||||
<Popover.Content>
|
<Popover.Content>
|
||||||
<p>
|
<p>
|
||||||
You can reach my Gmail at <a class="link" href="mailto:youwenw@gmail.com"
|
You can reach my Gmail at <a class="link" href="mailto:youwenw@gmail.com"
|
||||||
>youwenw@gmail.com</a
|
>youwenw@gmail.com</a
|
||||||
>
|
>
|
||||||
</p>
|
</p>
|
||||||
<br />
|
<br />
|
||||||
<p>
|
<p>
|
||||||
Or, if you prefer, you can securely email me on Protonmail at <a
|
Or, if you prefer, you can securely email me on Protonmail at <a
|
||||||
class="link"
|
class="link"
|
||||||
href="mailto:youwenw@protonmail.com">youwenw@protonmail.com</a
|
href="mailto:youwenw@protonmail.com">youwenw@protonmail.com</a
|
||||||
>
|
>
|
||||||
</p>
|
</p>
|
||||||
</Popover.Content>
|
</Popover.Content>
|
||||||
</Popover.Root>
|
</Popover.Root>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,34 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte'
|
||||||
import { fly } from 'svelte/transition';
|
import { fly } from 'svelte/transition'
|
||||||
|
|
||||||
export let items: string[];
|
export let items: string[]
|
||||||
export let interval: number = 2000;
|
export let interval: number = 2000
|
||||||
export let beforeText: string = '';
|
export let beforeText: string = ''
|
||||||
|
|
||||||
let currentIndex: number = 0;
|
let currentIndex: number = 0
|
||||||
let timer: number;
|
let timer: number
|
||||||
let temp = true;
|
let temp = true
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
timer = setInterval(() => {
|
timer = setInterval(() => {
|
||||||
currentIndex = (currentIndex + 1) % items.length;
|
currentIndex = (currentIndex + 1) % items.length
|
||||||
temp = !temp;
|
temp = !temp
|
||||||
}, interval);
|
}, interval)
|
||||||
|
|
||||||
return () => clearInterval(timer);
|
return () => clearInterval(timer)
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex gap-2 text-nowrap flex-wrap">
|
<div class="flex gap-2 text-nowrap flex-wrap">
|
||||||
{beforeText}
|
{beforeText}
|
||||||
{#if temp}
|
{#if temp}
|
||||||
<p in:fly={{ y: -50, duration: 300, delay: 320 }} out:fly={{ y: 50, duration: 300 }}>
|
<p in:fly={{ y: -50, duration: 300, delay: 320 }} out:fly={{ y: 50, duration: 300 }}>
|
||||||
{items[currentIndex]}
|
{items[currentIndex]}
|
||||||
</p>
|
</p>
|
||||||
{:else}
|
{:else}
|
||||||
<p in:fly={{ y: -50, duration: 300, delay: 320 }} out:fly={{ y: 50, duration: 300 }}>
|
<p in:fly={{ y: -50, duration: 300, delay: 320 }} out:fly={{ y: 50, duration: 300 }}>
|
||||||
{items[currentIndex]}
|
{items[currentIndex]}
|
||||||
</p>
|
</p>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -10,37 +10,37 @@
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
|
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js'
|
||||||
import { setMode } from 'mode-watcher';
|
import { setMode } from 'mode-watcher'
|
||||||
|
|
||||||
export let hideLabel: boolean = false;
|
export let hideLabel: boolean = false
|
||||||
export let wide: boolean = false;
|
export let wide: boolean = false
|
||||||
|
|
||||||
let modes = [
|
let modes = [
|
||||||
{ value: 'light', label: 'Light' },
|
{ value: 'light', label: 'Light' },
|
||||||
{ value: 'dark', label: 'Dark' },
|
{ value: 'dark', label: 'Dark' },
|
||||||
{ value: 'system', label: 'System' }
|
{ value: 'system', label: 'System' }
|
||||||
];
|
]
|
||||||
|
|
||||||
const changeMode = (mode: string) => {
|
const changeMode = (mode: string) => {
|
||||||
setMode(mode as 'light' | 'dark' | 'system');
|
setMode(mode as 'light' | 'dark' | 'system')
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DropdownMenu.Root>
|
<DropdownMenu.Root>
|
||||||
<DropdownMenu.Trigger asChild let:builder>
|
<DropdownMenu.Trigger asChild let:builder>
|
||||||
<slot {builder} />
|
<slot {builder} />
|
||||||
</DropdownMenu.Trigger>
|
</DropdownMenu.Trigger>
|
||||||
<DropdownMenu.Content class={wide ? 'w-[80%]' : ''}>
|
<DropdownMenu.Content class={wide ? 'w-[80%]' : ''}>
|
||||||
{#if !hideLabel}
|
{#if !hideLabel}
|
||||||
<DropdownMenu.Label>Color Theme</DropdownMenu.Label>
|
<DropdownMenu.Label>Color Theme</DropdownMenu.Label>
|
||||||
{/if}
|
{/if}
|
||||||
<DropdownMenu.Group>
|
<DropdownMenu.Group>
|
||||||
{#each modes as { value, label } (value)}
|
{#each modes as { value, label } (value)}
|
||||||
<DropdownMenu.Item on:click={() => changeMode(value)} class={wide ? 'text-md' : ''}>
|
<DropdownMenu.Item on:click={() => changeMode(value)} class={wide ? 'text-md' : ''}>
|
||||||
{label}</DropdownMenu.Item
|
{label}</DropdownMenu.Item
|
||||||
>
|
>
|
||||||
{/each}
|
{/each}
|
||||||
</DropdownMenu.Group>
|
</DropdownMenu.Group>
|
||||||
</DropdownMenu.Content>
|
</DropdownMenu.Content>
|
||||||
</DropdownMenu.Root>
|
</DropdownMenu.Root>
|
||||||
|
|
|
||||||
|
|
@ -1,40 +1,40 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { toclink, type TocStore } from '@svelte-put/toc';
|
import { toclink, type TocStore } from '@svelte-put/toc'
|
||||||
import * as Accordion from '$lib/components/ui/accordion';
|
import * as Accordion from '$lib/components/ui/accordion'
|
||||||
import * as Card from '$lib/components/ui/card';
|
import * as Card from '$lib/components/ui/card'
|
||||||
|
|
||||||
export let tocStore: TocStore;
|
export let tocStore: TocStore
|
||||||
|
|
||||||
const calcTextClasses = (el: HTMLElement) => {
|
const calcTextClasses = (el: HTMLElement) => {
|
||||||
if (el.tagName === 'H1') return 'text-lg font-medium';
|
if (el.tagName === 'H1') return 'text-lg font-medium'
|
||||||
if (el.tagName === 'H2') return 'text-lg';
|
if (el.tagName === 'H2') return 'text-lg'
|
||||||
return 'text-sm text-muted-foreground';
|
return 'text-sm text-muted-foreground'
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Card.Root class="lg:hidden">
|
<Card.Root class="lg:hidden">
|
||||||
<Card.Content>
|
<Card.Content>
|
||||||
<Accordion.Root>
|
<Accordion.Root>
|
||||||
<Accordion.Item value="toc">
|
<Accordion.Item value="toc">
|
||||||
<Accordion.Trigger>
|
<Accordion.Trigger>
|
||||||
<p class="text-lg">On this page</p>
|
<p class="text-lg">On this page</p>
|
||||||
</Accordion.Trigger>
|
</Accordion.Trigger>
|
||||||
<Accordion.Content>
|
<Accordion.Content>
|
||||||
{#if $tocStore.items.size}
|
{#if $tocStore.items.size}
|
||||||
<ol class="border-l-4 border-l-muted px-4">
|
<ol class="border-l-4 border-l-muted px-4">
|
||||||
{#each $tocStore.items.values() as tocItem}
|
{#each $tocStore.items.values() as tocItem}
|
||||||
<li class="py-0.5">
|
<li class="py-0.5">
|
||||||
<!-- svelte-ignore a11y-missing-attribute a11y-missing-content -->
|
<!-- svelte-ignore a11y-missing-attribute a11y-missing-content -->
|
||||||
<a
|
<a
|
||||||
use:toclink={{ store: tocStore, tocItem, observe: true }}
|
use:toclink={{ store: tocStore, tocItem, observe: true }}
|
||||||
class={`${calcTextClasses(tocItem.element)}`}
|
class={`${calcTextClasses(tocItem.element)}`}
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ol>
|
</ol>
|
||||||
{/if}
|
{/if}
|
||||||
</Accordion.Content>
|
</Accordion.Content>
|
||||||
</Accordion.Item>
|
</Accordion.Item>
|
||||||
</Accordion.Root>
|
</Accordion.Root>
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
</Card.Root>
|
</Card.Root>
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,41 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { toclink, type TocStore } from '@svelte-put/toc';
|
import { toclink, type TocStore } from '@svelte-put/toc'
|
||||||
import * as Card from '$lib/components/ui/card';
|
import * as Card from '$lib/components/ui/card'
|
||||||
|
|
||||||
export let tocStore: TocStore;
|
export let tocStore: TocStore
|
||||||
|
|
||||||
const calcTextClasses = (el: HTMLElement) => {
|
const calcTextClasses = (el: HTMLElement) => {
|
||||||
if (el.tagName === 'H1') return 'text-md xl:text-lg font-medium';
|
if (el.tagName === 'H1') return 'text-md xl:text-lg font-medium'
|
||||||
if (el.tagName === 'H2') return 'text-md xl:text-lg';
|
if (el.tagName === 'H2') return 'text-md xl:text-lg'
|
||||||
if (el.id === 'end-marker') return 'text-lg xl:text-xl';
|
if (el.id === 'end-marker') return 'text-lg xl:text-xl'
|
||||||
return 'text-sm text-muted-foreground';
|
return 'text-sm text-muted-foreground'
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Card.Root>
|
<Card.Root>
|
||||||
<Card.Header>
|
<Card.Header>
|
||||||
<Card.Title><p class="text-lg xl:text-xl font-serif">On this page</p></Card.Title>
|
<Card.Title><p class="text-lg xl:text-xl font-serif">On this page</p></Card.Title>
|
||||||
</Card.Header>
|
</Card.Header>
|
||||||
<Card.Content>
|
<Card.Content>
|
||||||
{#if $tocStore.items.size}
|
{#if $tocStore.items.size}
|
||||||
<ol>
|
<ol>
|
||||||
{#each $tocStore.items.values() as tocItem}
|
{#each $tocStore.items.values() as tocItem}
|
||||||
<li>
|
<li>
|
||||||
<!-- svelte-ignore a11y-missing-attribute a11y-missing-content -->
|
<!-- svelte-ignore a11y-missing-attribute a11y-missing-content -->
|
||||||
<a
|
<a
|
||||||
use:toclink={{ store: tocStore, tocItem, observe: true }}
|
use:toclink={{ store: tocStore, tocItem, observe: true }}
|
||||||
class:highlighted={$tocStore.activeItem === tocItem}
|
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)}`}
|
class={`hover:bg-muted px-2 py-1 rounded-r-sm transition-all border-l-secondary border-l-4 ${calcTextClasses(tocItem.element)}`}
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ol>
|
</ol>
|
||||||
{/if}
|
{/if}
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
</Card.Root>
|
</Card.Root>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
.highlighted {
|
.highlighted {
|
||||||
@apply bg-blue-200 dark:bg-blue-900 border-l-blue-500;
|
@apply bg-blue-200 dark:bg-blue-900 border-l-blue-500;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,64 +1,64 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { TocStore } from '@svelte-put/toc';
|
import type { TocStore } from '@svelte-put/toc'
|
||||||
import Separator from '../ui/separator/separator.svelte';
|
import Separator from '../ui/separator/separator.svelte'
|
||||||
import { Accordion } from 'bits-ui';
|
import { Accordion } from 'bits-ui'
|
||||||
import { toclink } from '@svelte-put/toc';
|
import { toclink } from '@svelte-put/toc'
|
||||||
import { CaretDown } from 'svelte-radix';
|
import { CaretDown } from 'svelte-radix'
|
||||||
import { slide } from 'svelte/transition';
|
import { slide } from 'svelte/transition'
|
||||||
|
|
||||||
export let tocStore: TocStore;
|
export let tocStore: TocStore
|
||||||
export let placeholder: string;
|
export let placeholder: string
|
||||||
|
|
||||||
const calcTextClasses = (el: HTMLElement) => {
|
const calcTextClasses = (el: HTMLElement) => {
|
||||||
if (el.tagName === 'H2') return 'text-xl';
|
if (el.tagName === 'H2') return 'text-xl'
|
||||||
return 'text-md text-muted-foreground';
|
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 = () => {
|
const close = () => {
|
||||||
value = '';
|
value = ''
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<nav class="fixed top-16 left-0 w-full bg-background bg-opacity-50 backdrop-blur-lg z-30 lg:hidden">
|
<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.Root class="px-8" bind:value>
|
||||||
<Accordion.Item value="toc">
|
<Accordion.Item value="toc">
|
||||||
<Accordion.Trigger
|
<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"
|
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}
|
>{currentDisplayed}
|
||||||
<span
|
<span
|
||||||
class="inline-flex size-8 items-center justify-center rounded-[7px] bg-transparent transition-all hover:bg-dark-10"
|
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
|
><CaretDown class="size-[18px] transition-all duration-200" /></span
|
||||||
>
|
>
|
||||||
</Accordion.Trigger>
|
</Accordion.Trigger>
|
||||||
<Accordion.Content transition={slide} transitionConfig={{ duration: 200 }} class="pb-[25px]">
|
<Accordion.Content transition={slide} transitionConfig={{ duration: 200 }} class="pb-[25px]">
|
||||||
{#if $tocStore.items.size}
|
{#if $tocStore.items.size}
|
||||||
<ol>
|
<ol>
|
||||||
{#each $tocStore.items.values() as tocItem}
|
{#each $tocStore.items.values() as tocItem}
|
||||||
{@const selected = $tocStore.activeItem === tocItem}
|
{@const selected = $tocStore.activeItem === tocItem}
|
||||||
<li class="border-l-secondary border-l-4 py-1" class:highlighted={selected}>
|
<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 -->
|
<!-- svelte-ignore a11y-missing-attribute a11y-missing-content a11y-click-events-have-key-events a11y-interactive-supports-focus a11y -->
|
||||||
<a
|
<a
|
||||||
use:toclink={{ store: tocStore, tocItem, observe: true }}
|
use:toclink={{ store: tocStore, tocItem, observe: true }}
|
||||||
on:click={close}
|
on:click={close}
|
||||||
role="button"
|
role="button"
|
||||||
class={`hover:bg-muted px-2 py-1 rounded-r-sm transition-all ${calcTextClasses(tocItem.element)}`}
|
class={`hover:bg-muted px-2 py-1 rounded-r-sm transition-all ${calcTextClasses(tocItem.element)}`}
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ol>
|
</ol>
|
||||||
{/if}
|
{/if}
|
||||||
</Accordion.Content>
|
</Accordion.Content>
|
||||||
</Accordion.Item>
|
</Accordion.Item>
|
||||||
</Accordion.Root>
|
</Accordion.Root>
|
||||||
<Separator />
|
<Separator />
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
.highlighted {
|
.highlighted {
|
||||||
@apply bg-blue-200 dark:bg-blue-900 border-l-blue-500;
|
@apply bg-blue-200 dark:bg-blue-900 border-l-blue-500;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<main class="dots-background w-full h-screen">
|
<main class="dots-background w-full h-screen">
|
||||||
<div class="container max-w-3xl mx-auto p-10">
|
<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">
|
<h1 class="text-4xl md:text-5xl font-bold text-center tracking-tight mt-20">
|
||||||
🚧 Under Construction 🚧
|
🚧 Under Construction 🚧
|
||||||
</h1>
|
</h1>
|
||||||
<div class="text-2xl md:text-3xl font-medium mt-10 text-center">
|
<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>
|
<p>Please excuse the mess! This page is currently under construction.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,26 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Accordion as AccordionPrimitive } from 'bits-ui';
|
import { Accordion as AccordionPrimitive } from 'bits-ui'
|
||||||
import { slide } from 'svelte/transition';
|
import { slide } from 'svelte/transition'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = AccordionPrimitive.ContentProps;
|
type $$Props = AccordionPrimitive.ContentProps
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let transition: $$Props['transition'] = slide;
|
export let transition: $$Props['transition'] = slide
|
||||||
export let transitionConfig: $$Props['transitionConfig'] = {
|
export let transitionConfig: $$Props['transitionConfig'] = {
|
||||||
duration: 200
|
duration: 200
|
||||||
};
|
}
|
||||||
|
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<AccordionPrimitive.Content
|
<AccordionPrimitive.Content
|
||||||
class={cn('overflow-hidden text-sm', className)}
|
class={cn('overflow-hidden text-sm', className)}
|
||||||
{transition}
|
{transition}
|
||||||
{transitionConfig}
|
{transitionConfig}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<div class="pb-4 pt-0">
|
<div class="pb-4 pt-0">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</AccordionPrimitive.Content>
|
</AccordionPrimitive.Content>
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Accordion as AccordionPrimitive } from 'bits-ui';
|
import { Accordion as AccordionPrimitive } from 'bits-ui'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = AccordionPrimitive.ItemProps;
|
type $$Props = AccordionPrimitive.ItemProps
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
export let value: $$Props['value'];
|
export let value: $$Props['value']
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<AccordionPrimitive.Item {value} class={cn('border-b', className)} {...$$restProps}>
|
<AccordionPrimitive.Item {value} class={cn('border-b', className)} {...$$restProps}>
|
||||||
<slot />
|
<slot />
|
||||||
</AccordionPrimitive.Item>
|
</AccordionPrimitive.Item>
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,26 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Accordion as AccordionPrimitive } from 'bits-ui';
|
import { Accordion as AccordionPrimitive } from 'bits-ui'
|
||||||
import ChevronDown from 'svelte-radix/ChevronDown.svelte';
|
import ChevronDown from 'svelte-radix/ChevronDown.svelte'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = AccordionPrimitive.TriggerProps;
|
type $$Props = AccordionPrimitive.TriggerProps
|
||||||
type $$Events = AccordionPrimitive.TriggerEvents;
|
type $$Events = AccordionPrimitive.TriggerEvents
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let level: AccordionPrimitive.HeaderProps['level'] = 3;
|
export let level: AccordionPrimitive.HeaderProps['level'] = 3
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<AccordionPrimitive.Header {level} class="flex">
|
<AccordionPrimitive.Header {level} class="flex">
|
||||||
<AccordionPrimitive.Trigger
|
<AccordionPrimitive.Trigger
|
||||||
class={cn(
|
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',
|
'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
on:click
|
on:click
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<ChevronDown class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
|
<ChevronDown class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
|
||||||
</AccordionPrimitive.Trigger>
|
</AccordionPrimitive.Trigger>
|
||||||
</AccordionPrimitive.Header>
|
</AccordionPrimitive.Header>
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
import { Accordion as AccordionPrimitive } from 'bits-ui';
|
import { Accordion as AccordionPrimitive } from 'bits-ui'
|
||||||
import Content from './accordion-content.svelte';
|
import Content from './accordion-content.svelte'
|
||||||
import Item from './accordion-item.svelte';
|
import Item from './accordion-item.svelte'
|
||||||
import Trigger from './accordion-trigger.svelte';
|
import Trigger from './accordion-trigger.svelte'
|
||||||
|
|
||||||
const Root = AccordionPrimitive.Root;
|
const Root = AccordionPrimitive.Root
|
||||||
export {
|
export {
|
||||||
Root,
|
Root,
|
||||||
Content,
|
Content,
|
||||||
Item,
|
Item,
|
||||||
Trigger,
|
Trigger,
|
||||||
//
|
//
|
||||||
Root as Accordion,
|
Root as Accordion,
|
||||||
Content as AccordionContent,
|
Content as AccordionContent,
|
||||||
Item as AccordionItem,
|
Item as AccordionItem,
|
||||||
Trigger as AccordionTrigger
|
Trigger as AccordionTrigger
|
||||||
};
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
|
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
|
||||||
import { buttonVariants } from '$lib/components/ui/button/index.js';
|
import { buttonVariants } from '$lib/components/ui/button/index.js'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = AlertDialogPrimitive.ActionProps;
|
type $$Props = AlertDialogPrimitive.ActionProps
|
||||||
type $$Events = AlertDialogPrimitive.ActionEvents;
|
type $$Events = AlertDialogPrimitive.ActionEvents
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<AlertDialogPrimitive.Action
|
<AlertDialogPrimitive.Action
|
||||||
class={cn(buttonVariants(), className)}
|
class={cn(buttonVariants(), className)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
on:click
|
on:click
|
||||||
on:keydown
|
on:keydown
|
||||||
let:builder
|
let:builder
|
||||||
>
|
>
|
||||||
<slot {builder} />
|
<slot {builder} />
|
||||||
</AlertDialogPrimitive.Action>
|
</AlertDialogPrimitive.Action>
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
|
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
|
||||||
import { buttonVariants } from '$lib/components/ui/button/index.js';
|
import { buttonVariants } from '$lib/components/ui/button/index.js'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = AlertDialogPrimitive.CancelProps;
|
type $$Props = AlertDialogPrimitive.CancelProps
|
||||||
type $$Events = AlertDialogPrimitive.CancelEvents;
|
type $$Events = AlertDialogPrimitive.CancelEvents
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<AlertDialogPrimitive.Cancel
|
<AlertDialogPrimitive.Cancel
|
||||||
class={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
|
class={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
on:click
|
on:click
|
||||||
on:keydown
|
on:keydown
|
||||||
let:builder
|
let:builder
|
||||||
>
|
>
|
||||||
<slot {builder} />
|
<slot {builder} />
|
||||||
</AlertDialogPrimitive.Cancel>
|
</AlertDialogPrimitive.Cancel>
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,27 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
|
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
|
||||||
import * as AlertDialog from './index.js';
|
import * as AlertDialog from './index.js'
|
||||||
import { cn, flyAndScale } from '$lib/utils.js';
|
import { cn, flyAndScale } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = AlertDialogPrimitive.ContentProps;
|
type $$Props = AlertDialogPrimitive.ContentProps
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let transition: $$Props['transition'] = flyAndScale;
|
export let transition: $$Props['transition'] = flyAndScale
|
||||||
export let transitionConfig: $$Props['transitionConfig'] = undefined;
|
export let transitionConfig: $$Props['transitionConfig'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<AlertDialog.Portal>
|
<AlertDialog.Portal>
|
||||||
<AlertDialog.Overlay />
|
<AlertDialog.Overlay />
|
||||||
<AlertDialogPrimitive.Content
|
<AlertDialogPrimitive.Content
|
||||||
{transition}
|
{transition}
|
||||||
{transitionConfig}
|
{transitionConfig}
|
||||||
class={cn(
|
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',
|
'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
|
className
|
||||||
)}
|
)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</AlertDialogPrimitive.Content>
|
</AlertDialogPrimitive.Content>
|
||||||
</AlertDialog.Portal>
|
</AlertDialog.Portal>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
|
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = AlertDialogPrimitive.DescriptionProps;
|
type $$Props = AlertDialogPrimitive.DescriptionProps
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<AlertDialogPrimitive.Description
|
<AlertDialogPrimitive.Description
|
||||||
class={cn('text-sm text-muted-foreground', className)}
|
class={cn('text-sm text-muted-foreground', className)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</AlertDialogPrimitive.Description>
|
</AlertDialogPrimitive.Description>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLAttributes } from 'svelte/elements';
|
import type { HTMLAttributes } from 'svelte/elements'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = HTMLAttributes<HTMLDivElement>;
|
type $$Props = HTMLAttributes<HTMLDivElement>
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
|
class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLAttributes } from 'svelte/elements';
|
import type { HTMLAttributes } from 'svelte/elements'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = HTMLAttributes<HTMLDivElement>;
|
type $$Props = HTMLAttributes<HTMLDivElement>
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...$$restProps}>
|
<div class={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...$$restProps}>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
|
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
|
||||||
import { fade } from 'svelte/transition';
|
import { fade } from 'svelte/transition'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = AlertDialogPrimitive.OverlayProps;
|
type $$Props = AlertDialogPrimitive.OverlayProps
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let transition: $$Props['transition'] = fade;
|
export let transition: $$Props['transition'] = fade
|
||||||
export let transitionConfig: $$Props['transitionConfig'] = {
|
export let transitionConfig: $$Props['transitionConfig'] = {
|
||||||
duration: 150
|
duration: 150
|
||||||
};
|
}
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<AlertDialogPrimitive.Overlay
|
<AlertDialogPrimitive.Overlay
|
||||||
{transition}
|
{transition}
|
||||||
{transitionConfig}
|
{transitionConfig}
|
||||||
class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)}
|
class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<script lang="ts">
|
<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>
|
</script>
|
||||||
|
|
||||||
<AlertDialogPrimitive.Portal {...$$restProps}>
|
<AlertDialogPrimitive.Portal {...$$restProps}>
|
||||||
<slot />
|
<slot />
|
||||||
</AlertDialogPrimitive.Portal>
|
</AlertDialogPrimitive.Portal>
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
|
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = AlertDialogPrimitive.TitleProps;
|
type $$Props = AlertDialogPrimitive.TitleProps
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let level: $$Props['level'] = 'h3';
|
export let level: $$Props['level'] = 'h3'
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<AlertDialogPrimitive.Title class={cn('text-lg font-semibold', className)} {level} {...$$restProps}>
|
<AlertDialogPrimitive.Title class={cn('text-lg font-semibold', className)} {level} {...$$restProps}>
|
||||||
<slot />
|
<slot />
|
||||||
</AlertDialogPrimitive.Title>
|
</AlertDialogPrimitive.Title>
|
||||||
|
|
|
||||||
|
|
@ -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 Title from './alert-dialog-title.svelte'
|
||||||
import Action from './alert-dialog-action.svelte';
|
import Action from './alert-dialog-action.svelte'
|
||||||
import Cancel from './alert-dialog-cancel.svelte';
|
import Cancel from './alert-dialog-cancel.svelte'
|
||||||
import Portal from './alert-dialog-portal.svelte';
|
import Portal from './alert-dialog-portal.svelte'
|
||||||
import Footer from './alert-dialog-footer.svelte';
|
import Footer from './alert-dialog-footer.svelte'
|
||||||
import Header from './alert-dialog-header.svelte';
|
import Header from './alert-dialog-header.svelte'
|
||||||
import Overlay from './alert-dialog-overlay.svelte';
|
import Overlay from './alert-dialog-overlay.svelte'
|
||||||
import Content from './alert-dialog-content.svelte';
|
import Content from './alert-dialog-content.svelte'
|
||||||
import Description from './alert-dialog-description.svelte';
|
import Description from './alert-dialog-description.svelte'
|
||||||
|
|
||||||
const Root = AlertDialogPrimitive.Root;
|
const Root = AlertDialogPrimitive.Root
|
||||||
const Trigger = AlertDialogPrimitive.Trigger;
|
const Trigger = AlertDialogPrimitive.Trigger
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Root,
|
Root,
|
||||||
Title,
|
Title,
|
||||||
Action,
|
Action,
|
||||||
Cancel,
|
Cancel,
|
||||||
Portal,
|
Portal,
|
||||||
Footer,
|
Footer,
|
||||||
Header,
|
Header,
|
||||||
Trigger,
|
Trigger,
|
||||||
Overlay,
|
Overlay,
|
||||||
Content,
|
Content,
|
||||||
Description,
|
Description,
|
||||||
//
|
//
|
||||||
Root as AlertDialog,
|
Root as AlertDialog,
|
||||||
Title as AlertDialogTitle,
|
Title as AlertDialogTitle,
|
||||||
Action as AlertDialogAction,
|
Action as AlertDialogAction,
|
||||||
Cancel as AlertDialogCancel,
|
Cancel as AlertDialogCancel,
|
||||||
Portal as AlertDialogPortal,
|
Portal as AlertDialogPortal,
|
||||||
Footer as AlertDialogFooter,
|
Footer as AlertDialogFooter,
|
||||||
Header as AlertDialogHeader,
|
Header as AlertDialogHeader,
|
||||||
Trigger as AlertDialogTrigger,
|
Trigger as AlertDialogTrigger,
|
||||||
Overlay as AlertDialogOverlay,
|
Overlay as AlertDialogOverlay,
|
||||||
Content as AlertDialogContent,
|
Content as AlertDialogContent,
|
||||||
Description as AlertDialogDescription
|
Description as AlertDialogDescription
|
||||||
};
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { type Variant, badgeVariants } from './index.js';
|
import { type Variant, badgeVariants } from './index.js'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
let className: string | undefined | null = undefined;
|
let className: string | undefined | null = undefined
|
||||||
export let href: string | undefined = undefined;
|
export let href: string | undefined = undefined
|
||||||
export let variant: Variant = 'default';
|
export let variant: Variant = 'default'
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:element
|
<svelte:element
|
||||||
this={href ? 'a' : 'span'}
|
this={href ? 'a' : 'span'}
|
||||||
{href}
|
{href}
|
||||||
class={cn(badgeVariants({ variant, className }))}
|
class={cn(badgeVariants({ variant, className }))}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</svelte:element>
|
</svelte:element>
|
||||||
|
|
|
||||||
|
|
@ -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({
|
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',
|
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: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
|
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',
|
secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||||
destructive:
|
destructive:
|
||||||
'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
|
'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
|
||||||
outline: 'text-foreground'
|
outline: 'text-foreground'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
variant: 'default'
|
variant: 'default'
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
export type Variant = VariantProps<typeof badgeVariants>['variant'];
|
export type Variant = VariantProps<typeof badgeVariants>['variant']
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,24 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLAttributes } from 'svelte/elements';
|
import type { HTMLAttributes } from 'svelte/elements'
|
||||||
import DotsHorizontal from 'svelte-radix/DotsHorizontal.svelte';
|
import DotsHorizontal from 'svelte-radix/DotsHorizontal.svelte'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = HTMLAttributes<HTMLSpanElement> & {
|
type $$Props = HTMLAttributes<HTMLSpanElement> & {
|
||||||
el?: HTMLSpanElement;
|
el?: HTMLSpanElement
|
||||||
};
|
}
|
||||||
|
|
||||||
export let el: $$Props['el'] = undefined;
|
export let el: $$Props['el'] = undefined
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<span
|
<span
|
||||||
bind:this={el}
|
bind:this={el}
|
||||||
role="presentation"
|
role="presentation"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class={cn('flex h-9 w-9 items-center justify-center', className)}
|
class={cn('flex h-9 w-9 items-center justify-center', className)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<DotsHorizontal class="h-4 w-4 outline-none" tabindex="-1" />
|
<DotsHorizontal class="h-4 w-4 outline-none" tabindex="-1" />
|
||||||
<span class="sr-only">More</span>
|
<span class="sr-only">More</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLLiAttributes } from 'svelte/elements';
|
import type { HTMLLiAttributes } from 'svelte/elements'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = HTMLLiAttributes & {
|
type $$Props = HTMLLiAttributes & {
|
||||||
el?: HTMLLIElement;
|
el?: HTMLLIElement
|
||||||
};
|
}
|
||||||
|
|
||||||
export let el: $$Props['el'] = undefined;
|
export let el: $$Props['el'] = undefined
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<li bind:this={el} class={cn('inline-flex items-center gap-1.5', className)}>
|
<li bind:this={el} class={cn('inline-flex items-center gap-1.5', className)}>
|
||||||
<slot />
|
<slot />
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,31 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLAnchorAttributes } from 'svelte/elements';
|
import type { HTMLAnchorAttributes } from 'svelte/elements'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = HTMLAnchorAttributes & {
|
type $$Props = HTMLAnchorAttributes & {
|
||||||
el?: HTMLAnchorElement;
|
el?: HTMLAnchorElement
|
||||||
asChild?: boolean;
|
asChild?: boolean
|
||||||
};
|
}
|
||||||
|
|
||||||
export let href: $$Props['href'] = undefined;
|
export let href: $$Props['href'] = undefined
|
||||||
export let el: $$Props['el'] = undefined;
|
export let el: $$Props['el'] = undefined
|
||||||
export let asChild: $$Props['asChild'] = false;
|
export let asChild: $$Props['asChild'] = false
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
|
|
||||||
let attrs: Record<string, unknown>;
|
let attrs: Record<string, unknown>
|
||||||
|
|
||||||
$: attrs = {
|
$: attrs = {
|
||||||
class: cn('transition-colors hover:text-foreground', className),
|
class: cn('transition-colors hover:text-foreground', className),
|
||||||
href,
|
href,
|
||||||
...$$restProps
|
...$$restProps
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if asChild}
|
{#if asChild}
|
||||||
<slot {attrs} />
|
<slot {attrs} />
|
||||||
{:else}
|
{:else}
|
||||||
<a bind:this={el} {...attrs} {href}>
|
<a bind:this={el} {...attrs} {href}>
|
||||||
<slot {attrs} />
|
<slot {attrs} />
|
||||||
</a>
|
</a>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,23 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLOlAttributes } from 'svelte/elements';
|
import type { HTMLOlAttributes } from 'svelte/elements'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = HTMLOlAttributes & {
|
type $$Props = HTMLOlAttributes & {
|
||||||
el?: HTMLOListElement;
|
el?: HTMLOListElement
|
||||||
};
|
}
|
||||||
|
|
||||||
export let el: $$Props['el'] = undefined;
|
export let el: $$Props['el'] = undefined
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ol
|
<ol
|
||||||
bind:this={el}
|
bind:this={el}
|
||||||
class={cn(
|
class={cn(
|
||||||
'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
|
'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</ol>
|
</ol>
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,23 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLAttributes } from 'svelte/elements';
|
import type { HTMLAttributes } from 'svelte/elements'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = HTMLAttributes<HTMLSpanElement> & {
|
type $$Props = HTMLAttributes<HTMLSpanElement> & {
|
||||||
el?: HTMLSpanElement;
|
el?: HTMLSpanElement
|
||||||
};
|
}
|
||||||
|
|
||||||
export let el: $$Props['el'] = undefined;
|
export let el: $$Props['el'] = undefined
|
||||||
export let className: $$Props['class'] = undefined;
|
export let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<span
|
<span
|
||||||
bind:this={el}
|
bind:this={el}
|
||||||
role="link"
|
role="link"
|
||||||
aria-disabled="true"
|
aria-disabled="true"
|
||||||
aria-current="page"
|
aria-current="page"
|
||||||
class={cn('font-normal text-foreground', className)}
|
class={cn('font-normal text-foreground', className)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,25 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLLiAttributes } from 'svelte/elements';
|
import type { HTMLLiAttributes } from 'svelte/elements'
|
||||||
import ChevronRight from 'svelte-radix/ChevronRight.svelte';
|
import ChevronRight from 'svelte-radix/ChevronRight.svelte'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = HTMLLiAttributes & {
|
type $$Props = HTMLLiAttributes & {
|
||||||
el?: HTMLLIElement;
|
el?: HTMLLIElement
|
||||||
};
|
}
|
||||||
|
|
||||||
export let el: $$Props['el'] = undefined;
|
export let el: $$Props['el'] = undefined
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<li
|
<li
|
||||||
role="presentation"
|
role="presentation"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class={cn('[&>svg]:size-3.5', className)}
|
class={cn('[&>svg]:size-3.5', className)}
|
||||||
bind:this={el}
|
bind:this={el}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<slot>
|
<slot>
|
||||||
<ChevronRight tabindex="-1" />
|
<ChevronRight tabindex="-1" />
|
||||||
</slot>
|
</slot>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLAttributes } from 'svelte/elements';
|
import type { HTMLAttributes } from 'svelte/elements'
|
||||||
|
|
||||||
type $$Props = HTMLAttributes<HTMLElement> & {
|
type $$Props = HTMLAttributes<HTMLElement> & {
|
||||||
el?: HTMLElement;
|
el?: HTMLElement
|
||||||
};
|
}
|
||||||
|
|
||||||
export let el: $$Props['el'] = undefined;
|
export let el: $$Props['el'] = undefined
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<nav class={className} bind:this={el} aria-label="breadcrumb" {...$$restProps}>
|
<nav class={className} bind:this={el} aria-label="breadcrumb" {...$$restProps}>
|
||||||
<slot />
|
<slot />
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,25 @@
|
||||||
import Root from './breadcrumb.svelte';
|
import Root from './breadcrumb.svelte'
|
||||||
import Ellipsis from './breadcrumb-ellipsis.svelte';
|
import Ellipsis from './breadcrumb-ellipsis.svelte'
|
||||||
import Item from './breadcrumb-item.svelte';
|
import Item from './breadcrumb-item.svelte'
|
||||||
import Separator from './breadcrumb-separator.svelte';
|
import Separator from './breadcrumb-separator.svelte'
|
||||||
import Link from './breadcrumb-link.svelte';
|
import Link from './breadcrumb-link.svelte'
|
||||||
import List from './breadcrumb-list.svelte';
|
import List from './breadcrumb-list.svelte'
|
||||||
import Page from './breadcrumb-page.svelte';
|
import Page from './breadcrumb-page.svelte'
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Root,
|
Root,
|
||||||
Ellipsis,
|
Ellipsis,
|
||||||
Item,
|
Item,
|
||||||
Separator,
|
Separator,
|
||||||
Link,
|
Link,
|
||||||
List,
|
List,
|
||||||
Page,
|
Page,
|
||||||
//
|
//
|
||||||
Root as Breadcrumb,
|
Root as Breadcrumb,
|
||||||
Ellipsis as BreadcrumbEllipsis,
|
Ellipsis as BreadcrumbEllipsis,
|
||||||
Item as BreadcrumbItem,
|
Item as BreadcrumbItem,
|
||||||
Separator as BreadcrumbSeparator,
|
Separator as BreadcrumbSeparator,
|
||||||
Link as BreadcrumbLink,
|
Link as BreadcrumbLink,
|
||||||
List as BreadcrumbList,
|
List as BreadcrumbList,
|
||||||
Page as BreadcrumbPage
|
Page as BreadcrumbPage
|
||||||
};
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,25 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Button as ButtonPrimitive } from 'bits-ui';
|
import { Button as ButtonPrimitive } from 'bits-ui'
|
||||||
import { type Events, type Props, buttonVariants } from './index.js';
|
import { type Events, type Props, buttonVariants } from './index.js'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = Props;
|
type $$Props = Props
|
||||||
type $$Events = Events;
|
type $$Events = Events
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let variant: $$Props['variant'] = 'default';
|
export let variant: $$Props['variant'] = 'default'
|
||||||
export let size: $$Props['size'] = 'default';
|
export let size: $$Props['size'] = 'default'
|
||||||
export let builders: $$Props['builders'] = [];
|
export let builders: $$Props['builders'] = []
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ButtonPrimitive.Root
|
<ButtonPrimitive.Root
|
||||||
{builders}
|
{builders}
|
||||||
class={cn(buttonVariants({ variant, size, className }))}
|
class={cn(buttonVariants({ variant, size, className }))}
|
||||||
type="button"
|
type="button"
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
on:click
|
on:click
|
||||||
on:keydown
|
on:keydown
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</ButtonPrimitive.Root>
|
</ButtonPrimitive.Root>
|
||||||
|
|
|
||||||
|
|
@ -1,49 +1,49 @@
|
||||||
import type { Button as ButtonPrimitive } from 'bits-ui';
|
import type { Button as ButtonPrimitive } from 'bits-ui'
|
||||||
import { type VariantProps, tv } from 'tailwind-variants';
|
import { type VariantProps, tv } from 'tailwind-variants'
|
||||||
import Root from './button.svelte';
|
import Root from './button.svelte'
|
||||||
|
|
||||||
const buttonVariants = tv({
|
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',
|
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: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
|
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
|
||||||
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
||||||
outline:
|
outline:
|
||||||
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
'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',
|
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
||||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||||
link: 'text-primary underline-offset-4 hover:underline'
|
link: 'text-primary underline-offset-4 hover:underline'
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
default: 'h-9 px-4 py-2',
|
default: 'h-9 px-4 py-2',
|
||||||
sm: 'h-8 rounded-md px-3 text-xs',
|
sm: 'h-8 rounded-md px-3 text-xs',
|
||||||
lg: 'h-10 rounded-md px-8',
|
lg: 'h-10 rounded-md px-8',
|
||||||
icon: 'h-9 w-9'
|
icon: 'h-9 w-9'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
variant: 'default',
|
variant: 'default',
|
||||||
size: 'default'
|
size: 'default'
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
type Variant = VariantProps<typeof buttonVariants>['variant'];
|
type Variant = VariantProps<typeof buttonVariants>['variant']
|
||||||
type Size = VariantProps<typeof buttonVariants>['size'];
|
type Size = VariantProps<typeof buttonVariants>['size']
|
||||||
|
|
||||||
type Props = ButtonPrimitive.Props & {
|
type Props = ButtonPrimitive.Props & {
|
||||||
variant?: Variant;
|
variant?: Variant
|
||||||
size?: Size;
|
size?: Size
|
||||||
};
|
}
|
||||||
|
|
||||||
type Events = ButtonPrimitive.Events;
|
type Events = ButtonPrimitive.Events
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Root,
|
Root,
|
||||||
type Props,
|
type Props,
|
||||||
type Events,
|
type Events,
|
||||||
//
|
//
|
||||||
Root as Button,
|
Root as Button,
|
||||||
type Props as ButtonProps,
|
type Props as ButtonProps,
|
||||||
type Events as ButtonEvents,
|
type Events as ButtonEvents,
|
||||||
buttonVariants
|
buttonVariants
|
||||||
};
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLAttributes } from 'svelte/elements';
|
import type { HTMLAttributes } from 'svelte/elements'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = HTMLAttributes<HTMLDivElement>;
|
type $$Props = HTMLAttributes<HTMLDivElement>
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={cn('p-6 pt-0', className)} {...$$restProps}>
|
<div class={cn('p-6 pt-0', className)} {...$$restProps}>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLAttributes } from 'svelte/elements';
|
import type { HTMLAttributes } from 'svelte/elements'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = HTMLAttributes<HTMLParagraphElement>;
|
type $$Props = HTMLAttributes<HTMLParagraphElement>
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
|
<p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
|
||||||
<slot />
|
<slot />
|
||||||
</p>
|
</p>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLAttributes } from 'svelte/elements';
|
import type { HTMLAttributes } from 'svelte/elements'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = HTMLAttributes<HTMLDivElement>;
|
type $$Props = HTMLAttributes<HTMLDivElement>
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={cn('flex items-center p-6 pt-0', className)} {...$$restProps}>
|
<div class={cn('flex items-center p-6 pt-0', className)} {...$$restProps}>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLAttributes } from 'svelte/elements';
|
import type { HTMLAttributes } from 'svelte/elements'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = HTMLAttributes<HTMLDivElement>;
|
type $$Props = HTMLAttributes<HTMLDivElement>
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={cn('flex flex-col space-y-1.5 p-6', className)} {...$$restProps}>
|
<div class={cn('flex flex-col space-y-1.5 p-6', className)} {...$$restProps}>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLAttributes } from 'svelte/elements';
|
import type { HTMLAttributes } from 'svelte/elements'
|
||||||
import type { HeadingLevel } from './index.js';
|
import type { HeadingLevel } from './index.js'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = HTMLAttributes<HTMLHeadingElement> & {
|
type $$Props = HTMLAttributes<HTMLHeadingElement> & {
|
||||||
tag?: HeadingLevel;
|
tag?: HeadingLevel
|
||||||
};
|
}
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let tag: $$Props['tag'] = 'h3';
|
export let tag: $$Props['tag'] = 'h3'
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:element
|
<svelte:element
|
||||||
this={tag}
|
this={tag}
|
||||||
class={cn('font-semibold leading-none tracking-tight', className)}
|
class={cn('font-semibold leading-none tracking-tight', className)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</svelte:element>
|
</svelte:element>
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,22 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLAttributes } from 'svelte/elements';
|
import type { HTMLAttributes } from 'svelte/elements'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = HTMLAttributes<HTMLDivElement>;
|
type $$Props = HTMLAttributes<HTMLDivElement>
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||||
<div
|
<div
|
||||||
class={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
|
class={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
on:click
|
on:click
|
||||||
on:focusin
|
on:focusin
|
||||||
on:focusout
|
on:focusout
|
||||||
on:mouseenter
|
on:mouseenter
|
||||||
on:mouseleave
|
on:mouseleave
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,24 @@
|
||||||
import Root from './card.svelte';
|
import Root from './card.svelte'
|
||||||
import Content from './card-content.svelte';
|
import Content from './card-content.svelte'
|
||||||
import Description from './card-description.svelte';
|
import Description from './card-description.svelte'
|
||||||
import Footer from './card-footer.svelte';
|
import Footer from './card-footer.svelte'
|
||||||
import Header from './card-header.svelte';
|
import Header from './card-header.svelte'
|
||||||
import Title from './card-title.svelte';
|
import Title from './card-title.svelte'
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Root,
|
Root,
|
||||||
Content,
|
Content,
|
||||||
Description,
|
Description,
|
||||||
Footer,
|
Footer,
|
||||||
Header,
|
Header,
|
||||||
Title,
|
Title,
|
||||||
//
|
//
|
||||||
Root as Card,
|
Root as Card,
|
||||||
Content as CardContent,
|
Content as CardContent,
|
||||||
Description as CardDescription,
|
Description as CardDescription,
|
||||||
Footer as CardFooter,
|
Footer as CardFooter,
|
||||||
Header as CardHeader,
|
Header as CardHeader,
|
||||||
Title as CardTitle
|
Title as CardTitle
|
||||||
};
|
}
|
||||||
|
|
||||||
export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,24 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Drawer as DrawerPrimitive } from 'vaul-svelte';
|
import { Drawer as DrawerPrimitive } from 'vaul-svelte'
|
||||||
import DrawerOverlay from './drawer-overlay.svelte';
|
import DrawerOverlay from './drawer-overlay.svelte'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = DrawerPrimitive.ContentProps;
|
type $$Props = DrawerPrimitive.ContentProps
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DrawerPrimitive.Portal>
|
<DrawerPrimitive.Portal>
|
||||||
<DrawerOverlay />
|
<DrawerOverlay />
|
||||||
<DrawerPrimitive.Content
|
<DrawerPrimitive.Content
|
||||||
class={cn(
|
class={cn(
|
||||||
'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
|
'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
|
<div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
|
||||||
<slot />
|
<slot />
|
||||||
</DrawerPrimitive.Content>
|
</DrawerPrimitive.Content>
|
||||||
</DrawerPrimitive.Portal>
|
</DrawerPrimitive.Portal>
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Drawer as DrawerPrimitive } from 'vaul-svelte';
|
import { Drawer as DrawerPrimitive } from 'vaul-svelte'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = DrawerPrimitive.DescriptionProps;
|
type $$Props = DrawerPrimitive.DescriptionProps
|
||||||
|
|
||||||
export let el: $$Props['el'] = undefined;
|
export let el: $$Props['el'] = undefined
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DrawerPrimitive.Description
|
<DrawerPrimitive.Description
|
||||||
bind:el
|
bind:el
|
||||||
class={cn('text-sm text-muted-foreground', className)}
|
class={cn('text-sm text-muted-foreground', className)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</DrawerPrimitive.Description>
|
</DrawerPrimitive.Description>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLAttributes } from 'svelte/elements';
|
import type { HTMLAttributes } from 'svelte/elements'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = HTMLAttributes<HTMLDivElement> & {
|
type $$Props = HTMLAttributes<HTMLDivElement> & {
|
||||||
el?: HTMLDivElement;
|
el?: HTMLDivElement
|
||||||
};
|
}
|
||||||
|
|
||||||
export let el: $$Props['el'] = undefined;
|
export let el: $$Props['el'] = undefined
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div bind:this={el} class={cn('mt-auto flex flex-col gap-2 p-4', className)} {...$$restProps}>
|
<div bind:this={el} class={cn('mt-auto flex flex-col gap-2 p-4', className)} {...$$restProps}>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLAttributes } from 'svelte/elements';
|
import type { HTMLAttributes } from 'svelte/elements'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = HTMLAttributes<HTMLDivElement> & {
|
type $$Props = HTMLAttributes<HTMLDivElement> & {
|
||||||
el?: HTMLDivElement;
|
el?: HTMLDivElement
|
||||||
};
|
}
|
||||||
export let el: $$Props['el'] = undefined;
|
export let el: $$Props['el'] = undefined
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
bind:this={el}
|
bind:this={el}
|
||||||
class={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
|
class={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Drawer as DrawerPrimitive } from 'vaul-svelte';
|
import { Drawer as DrawerPrimitive } from 'vaul-svelte'
|
||||||
|
|
||||||
type $$Props = DrawerPrimitive.Props;
|
type $$Props = DrawerPrimitive.Props
|
||||||
export let shouldScaleBackground: $$Props['shouldScaleBackground'] = true;
|
export let shouldScaleBackground: $$Props['shouldScaleBackground'] = true
|
||||||
export let open: $$Props['open'] = false;
|
export let open: $$Props['open'] = false
|
||||||
export let activeSnapPoint: $$Props['activeSnapPoint'] = undefined;
|
export let activeSnapPoint: $$Props['activeSnapPoint'] = undefined
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>
|
<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>
|
||||||
<slot />
|
<slot />
|
||||||
</DrawerPrimitive.NestedRoot>
|
</DrawerPrimitive.NestedRoot>
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Drawer as DrawerPrimitive } from 'vaul-svelte';
|
import { Drawer as DrawerPrimitive } from 'vaul-svelte'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = DrawerPrimitive.OverlayProps;
|
type $$Props = DrawerPrimitive.OverlayProps
|
||||||
|
|
||||||
export let el: $$Props['el'] = undefined;
|
export let el: $$Props['el'] = undefined
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DrawerPrimitive.Overlay
|
<DrawerPrimitive.Overlay
|
||||||
bind:el
|
bind:el
|
||||||
class={cn('fixed inset-0 z-50 bg-black/80', className)}
|
class={cn('fixed inset-0 z-50 bg-black/80', className)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</DrawerPrimitive.Overlay>
|
</DrawerPrimitive.Overlay>
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Drawer as DrawerPrimitive } from 'vaul-svelte';
|
import { Drawer as DrawerPrimitive } from 'vaul-svelte'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = DrawerPrimitive.TitleProps;
|
type $$Props = DrawerPrimitive.TitleProps
|
||||||
|
|
||||||
export let el: $$Props['el'] = undefined;
|
export let el: $$Props['el'] = undefined
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DrawerPrimitive.Title
|
<DrawerPrimitive.Title
|
||||||
bind:el
|
bind:el
|
||||||
class={cn('text-lg font-semibold leading-none tracking-tight', className)}
|
class={cn('text-lg font-semibold leading-none tracking-tight', className)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</DrawerPrimitive.Title>
|
</DrawerPrimitive.Title>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Drawer as DrawerPrimitive } from 'vaul-svelte';
|
import { Drawer as DrawerPrimitive } from 'vaul-svelte'
|
||||||
|
|
||||||
type $$Props = DrawerPrimitive.Props;
|
type $$Props = DrawerPrimitive.Props
|
||||||
export let shouldScaleBackground: $$Props['shouldScaleBackground'] = true;
|
export let shouldScaleBackground: $$Props['shouldScaleBackground'] = true
|
||||||
export let open: $$Props['open'] = false;
|
export let open: $$Props['open'] = false
|
||||||
export let activeSnapPoint: $$Props['activeSnapPoint'] = undefined;
|
export let activeSnapPoint: $$Props['activeSnapPoint'] = undefined
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DrawerPrimitive.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>
|
<DrawerPrimitive.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>
|
||||||
<slot />
|
<slot />
|
||||||
</DrawerPrimitive.Root>
|
</DrawerPrimitive.Root>
|
||||||
|
|
|
||||||
|
|
@ -1,40 +1,40 @@
|
||||||
import { Drawer as DrawerPrimitive } from 'vaul-svelte';
|
import { Drawer as DrawerPrimitive } from 'vaul-svelte'
|
||||||
|
|
||||||
import Root from './drawer.svelte';
|
import Root from './drawer.svelte'
|
||||||
import Content from './drawer-content.svelte';
|
import Content from './drawer-content.svelte'
|
||||||
import Description from './drawer-description.svelte';
|
import Description from './drawer-description.svelte'
|
||||||
import Overlay from './drawer-overlay.svelte';
|
import Overlay from './drawer-overlay.svelte'
|
||||||
import Footer from './drawer-footer.svelte';
|
import Footer from './drawer-footer.svelte'
|
||||||
import Header from './drawer-header.svelte';
|
import Header from './drawer-header.svelte'
|
||||||
import Title from './drawer-title.svelte';
|
import Title from './drawer-title.svelte'
|
||||||
import NestedRoot from './drawer-nested.svelte';
|
import NestedRoot from './drawer-nested.svelte'
|
||||||
|
|
||||||
const Trigger = DrawerPrimitive.Trigger;
|
const Trigger = DrawerPrimitive.Trigger
|
||||||
const Portal = DrawerPrimitive.Portal;
|
const Portal = DrawerPrimitive.Portal
|
||||||
const Close = DrawerPrimitive.Close;
|
const Close = DrawerPrimitive.Close
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Root,
|
Root,
|
||||||
NestedRoot,
|
NestedRoot,
|
||||||
Content,
|
Content,
|
||||||
Description,
|
Description,
|
||||||
Overlay,
|
Overlay,
|
||||||
Footer,
|
Footer,
|
||||||
Header,
|
Header,
|
||||||
Title,
|
Title,
|
||||||
Trigger,
|
Trigger,
|
||||||
Portal,
|
Portal,
|
||||||
Close,
|
Close,
|
||||||
//
|
//
|
||||||
Root as Drawer,
|
Root as Drawer,
|
||||||
NestedRoot as DrawerNestedRoot,
|
NestedRoot as DrawerNestedRoot,
|
||||||
Content as DrawerContent,
|
Content as DrawerContent,
|
||||||
Description as DrawerDescription,
|
Description as DrawerDescription,
|
||||||
Overlay as DrawerOverlay,
|
Overlay as DrawerOverlay,
|
||||||
Footer as DrawerFooter,
|
Footer as DrawerFooter,
|
||||||
Header as DrawerHeader,
|
Header as DrawerHeader,
|
||||||
Title as DrawerTitle,
|
Title as DrawerTitle,
|
||||||
Trigger as DrawerTrigger,
|
Trigger as DrawerTrigger,
|
||||||
Portal as DrawerPortal,
|
Portal as DrawerPortal,
|
||||||
Close as DrawerClose
|
Close as DrawerClose
|
||||||
};
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,35 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
|
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
|
||||||
import Check from 'svelte-radix/Check.svelte';
|
import Check from 'svelte-radix/Check.svelte'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
|
type $$Props = DropdownMenuPrimitive.CheckboxItemProps
|
||||||
type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
|
type $$Events = DropdownMenuPrimitive.CheckboxItemEvents
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let checked: $$Props['checked'] = undefined;
|
export let checked: $$Props['checked'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DropdownMenuPrimitive.CheckboxItem
|
<DropdownMenuPrimitive.CheckboxItem
|
||||||
bind:checked
|
bind:checked
|
||||||
class={cn(
|
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',
|
'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
|
className
|
||||||
)}
|
)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
on:click
|
on:click
|
||||||
on:keydown
|
on:keydown
|
||||||
on:focusin
|
on:focusin
|
||||||
on:focusout
|
on:focusout
|
||||||
on:pointerdown
|
on:pointerdown
|
||||||
on:pointerleave
|
on:pointerleave
|
||||||
on:pointermove
|
on:pointermove
|
||||||
>
|
>
|
||||||
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
<DropdownMenuPrimitive.CheckboxIndicator>
|
<DropdownMenuPrimitive.CheckboxIndicator>
|
||||||
<Check class="h-4 w-4" />
|
<Check class="h-4 w-4" />
|
||||||
</DropdownMenuPrimitive.CheckboxIndicator>
|
</DropdownMenuPrimitive.CheckboxIndicator>
|
||||||
</span>
|
</span>
|
||||||
<slot />
|
<slot />
|
||||||
</DropdownMenuPrimitive.CheckboxItem>
|
</DropdownMenuPrimitive.CheckboxItem>
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,26 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
|
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
|
||||||
import { cn, flyAndScale } from '$lib/utils.js';
|
import { cn, flyAndScale } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = DropdownMenuPrimitive.ContentProps;
|
type $$Props = DropdownMenuPrimitive.ContentProps
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let sideOffset: $$Props['sideOffset'] = 4;
|
export let sideOffset: $$Props['sideOffset'] = 4
|
||||||
export let transition: $$Props['transition'] = flyAndScale;
|
export let transition: $$Props['transition'] = flyAndScale
|
||||||
export let transitionConfig: $$Props['transitionConfig'] = undefined;
|
export let transitionConfig: $$Props['transitionConfig'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DropdownMenuPrimitive.Content
|
<DropdownMenuPrimitive.Content
|
||||||
{transition}
|
{transition}
|
||||||
{transitionConfig}
|
{transitionConfig}
|
||||||
{sideOffset}
|
{sideOffset}
|
||||||
class={cn(
|
class={cn(
|
||||||
'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
|
'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
on:keydown
|
on:keydown
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</DropdownMenuPrimitive.Content>
|
</DropdownMenuPrimitive.Content>
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,31 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
|
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = DropdownMenuPrimitive.ItemProps & {
|
type $$Props = DropdownMenuPrimitive.ItemProps & {
|
||||||
inset?: boolean;
|
inset?: boolean
|
||||||
};
|
}
|
||||||
type $$Events = DropdownMenuPrimitive.ItemEvents;
|
type $$Events = DropdownMenuPrimitive.ItemEvents
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let inset: $$Props['inset'] = undefined;
|
export let inset: $$Props['inset'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DropdownMenuPrimitive.Item
|
<DropdownMenuPrimitive.Item
|
||||||
class={cn(
|
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',
|
'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',
|
inset && 'pl-8',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
on:click
|
on:click
|
||||||
on:keydown
|
on:keydown
|
||||||
on:focusin
|
on:focusin
|
||||||
on:focusout
|
on:focusout
|
||||||
on:pointerdown
|
on:pointerdown
|
||||||
on:pointerleave
|
on:pointerleave
|
||||||
on:pointermove
|
on:pointermove
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</DropdownMenuPrimitive.Item>
|
</DropdownMenuPrimitive.Item>
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
|
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = DropdownMenuPrimitive.LabelProps & {
|
type $$Props = DropdownMenuPrimitive.LabelProps & {
|
||||||
inset?: boolean;
|
inset?: boolean
|
||||||
};
|
}
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let inset: $$Props['inset'] = undefined;
|
export let inset: $$Props['inset'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DropdownMenuPrimitive.Label
|
<DropdownMenuPrimitive.Label
|
||||||
class={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
|
class={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</DropdownMenuPrimitive.Label>
|
</DropdownMenuPrimitive.Label>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<script lang="ts">
|
<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>
|
</script>
|
||||||
|
|
||||||
<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
|
<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
|
||||||
<slot />
|
<slot />
|
||||||
</DropdownMenuPrimitive.RadioGroup>
|
</DropdownMenuPrimitive.RadioGroup>
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,35 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
|
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
|
||||||
import DotFilled from 'svelte-radix/DotFilled.svelte';
|
import DotFilled from 'svelte-radix/DotFilled.svelte'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = DropdownMenuPrimitive.RadioItemProps;
|
type $$Props = DropdownMenuPrimitive.RadioItemProps
|
||||||
type $$Events = DropdownMenuPrimitive.RadioItemEvents;
|
type $$Events = DropdownMenuPrimitive.RadioItemEvents
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let value: DropdownMenuPrimitive.RadioItemProps['value'];
|
export let value: DropdownMenuPrimitive.RadioItemProps['value']
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DropdownMenuPrimitive.RadioItem
|
<DropdownMenuPrimitive.RadioItem
|
||||||
class={cn(
|
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',
|
'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
|
className
|
||||||
)}
|
)}
|
||||||
{value}
|
{value}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
on:click
|
on:click
|
||||||
on:keydown
|
on:keydown
|
||||||
on:focusin
|
on:focusin
|
||||||
on:focusout
|
on:focusout
|
||||||
on:pointerdown
|
on:pointerdown
|
||||||
on:pointerleave
|
on:pointerleave
|
||||||
on:pointermove
|
on:pointermove
|
||||||
>
|
>
|
||||||
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
<DropdownMenuPrimitive.RadioIndicator>
|
<DropdownMenuPrimitive.RadioIndicator>
|
||||||
<DotFilled class="h-4 w-4 fill-current" />
|
<DotFilled class="h-4 w-4 fill-current" />
|
||||||
</DropdownMenuPrimitive.RadioIndicator>
|
</DropdownMenuPrimitive.RadioIndicator>
|
||||||
</span>
|
</span>
|
||||||
<slot />
|
<slot />
|
||||||
</DropdownMenuPrimitive.RadioItem>
|
</DropdownMenuPrimitive.RadioItem>
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
|
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = DropdownMenuPrimitive.SeparatorProps;
|
type $$Props = DropdownMenuPrimitive.SeparatorProps
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DropdownMenuPrimitive.Separator
|
<DropdownMenuPrimitive.Separator
|
||||||
class={cn('-mx-1 my-1 h-px bg-muted', className)}
|
class={cn('-mx-1 my-1 h-px bg-muted', className)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { HTMLAttributes } from 'svelte/elements';
|
import type { HTMLAttributes } from 'svelte/elements'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = HTMLAttributes<HTMLSpanElement>;
|
type $$Props = HTMLAttributes<HTMLSpanElement>
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<span class={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...$$restProps}>
|
<span class={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...$$restProps}>
|
||||||
<slot />
|
<slot />
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,29 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
|
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
|
||||||
import { cn, flyAndScale } from '$lib/utils.js';
|
import { cn, flyAndScale } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = DropdownMenuPrimitive.SubContentProps;
|
type $$Props = DropdownMenuPrimitive.SubContentProps
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let transition: $$Props['transition'] = flyAndScale;
|
export let transition: $$Props['transition'] = flyAndScale
|
||||||
export let transitionConfig: $$Props['transitionConfig'] = {
|
export let transitionConfig: $$Props['transitionConfig'] = {
|
||||||
x: -10,
|
x: -10,
|
||||||
y: 0
|
y: 0
|
||||||
};
|
}
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DropdownMenuPrimitive.SubContent
|
<DropdownMenuPrimitive.SubContent
|
||||||
{transition}
|
{transition}
|
||||||
{transitionConfig}
|
{transitionConfig}
|
||||||
class={cn(
|
class={cn(
|
||||||
'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none',
|
'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
on:keydown
|
on:keydown
|
||||||
on:focusout
|
on:focusout
|
||||||
on:pointermove
|
on:pointermove
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</DropdownMenuPrimitive.SubContent>
|
</DropdownMenuPrimitive.SubContent>
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,32 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
|
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
|
||||||
import ChevronRight from 'svelte-radix/ChevronRight.svelte';
|
import ChevronRight from 'svelte-radix/ChevronRight.svelte'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
|
type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
|
||||||
inset?: boolean;
|
inset?: boolean
|
||||||
};
|
}
|
||||||
type $$Events = DropdownMenuPrimitive.SubTriggerEvents;
|
type $$Events = DropdownMenuPrimitive.SubTriggerEvents
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let inset: $$Props['inset'] = undefined;
|
export let inset: $$Props['inset'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DropdownMenuPrimitive.SubTrigger
|
<DropdownMenuPrimitive.SubTrigger
|
||||||
class={cn(
|
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',
|
'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',
|
inset && 'pl-8',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
on:click
|
on:click
|
||||||
on:keydown
|
on:keydown
|
||||||
on:focusin
|
on:focusin
|
||||||
on:focusout
|
on:focusout
|
||||||
on:pointerleave
|
on:pointerleave
|
||||||
on:pointermove
|
on:pointermove
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<ChevronRight class="ml-auto h-4 w-4" />
|
<ChevronRight class="ml-auto h-4 w-4" />
|
||||||
</DropdownMenuPrimitive.SubTrigger>
|
</DropdownMenuPrimitive.SubTrigger>
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,48 @@
|
||||||
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
|
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
|
||||||
import Item from './dropdown-menu-item.svelte';
|
import Item from './dropdown-menu-item.svelte'
|
||||||
import Label from './dropdown-menu-label.svelte';
|
import Label from './dropdown-menu-label.svelte'
|
||||||
import Content from './dropdown-menu-content.svelte';
|
import Content from './dropdown-menu-content.svelte'
|
||||||
import Shortcut from './dropdown-menu-shortcut.svelte';
|
import Shortcut from './dropdown-menu-shortcut.svelte'
|
||||||
import RadioItem from './dropdown-menu-radio-item.svelte';
|
import RadioItem from './dropdown-menu-radio-item.svelte'
|
||||||
import Separator from './dropdown-menu-separator.svelte';
|
import Separator from './dropdown-menu-separator.svelte'
|
||||||
import RadioGroup from './dropdown-menu-radio-group.svelte';
|
import RadioGroup from './dropdown-menu-radio-group.svelte'
|
||||||
import SubContent from './dropdown-menu-sub-content.svelte';
|
import SubContent from './dropdown-menu-sub-content.svelte'
|
||||||
import SubTrigger from './dropdown-menu-sub-trigger.svelte';
|
import SubTrigger from './dropdown-menu-sub-trigger.svelte'
|
||||||
import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
|
import CheckboxItem from './dropdown-menu-checkbox-item.svelte'
|
||||||
|
|
||||||
const Sub = DropdownMenuPrimitive.Sub;
|
const Sub = DropdownMenuPrimitive.Sub
|
||||||
const Root = DropdownMenuPrimitive.Root;
|
const Root = DropdownMenuPrimitive.Root
|
||||||
const Trigger = DropdownMenuPrimitive.Trigger;
|
const Trigger = DropdownMenuPrimitive.Trigger
|
||||||
const Group = DropdownMenuPrimitive.Group;
|
const Group = DropdownMenuPrimitive.Group
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Sub,
|
Sub,
|
||||||
Root,
|
Root,
|
||||||
Item,
|
Item,
|
||||||
Label,
|
Label,
|
||||||
Group,
|
Group,
|
||||||
Trigger,
|
Trigger,
|
||||||
Content,
|
Content,
|
||||||
Shortcut,
|
Shortcut,
|
||||||
Separator,
|
Separator,
|
||||||
RadioItem,
|
RadioItem,
|
||||||
SubContent,
|
SubContent,
|
||||||
SubTrigger,
|
SubTrigger,
|
||||||
RadioGroup,
|
RadioGroup,
|
||||||
CheckboxItem,
|
CheckboxItem,
|
||||||
//
|
//
|
||||||
Root as DropdownMenu,
|
Root as DropdownMenu,
|
||||||
Sub as DropdownMenuSub,
|
Sub as DropdownMenuSub,
|
||||||
Item as DropdownMenuItem,
|
Item as DropdownMenuItem,
|
||||||
Label as DropdownMenuLabel,
|
Label as DropdownMenuLabel,
|
||||||
Group as DropdownMenuGroup,
|
Group as DropdownMenuGroup,
|
||||||
Content as DropdownMenuContent,
|
Content as DropdownMenuContent,
|
||||||
Trigger as DropdownMenuTrigger,
|
Trigger as DropdownMenuTrigger,
|
||||||
Shortcut as DropdownMenuShortcut,
|
Shortcut as DropdownMenuShortcut,
|
||||||
RadioItem as DropdownMenuRadioItem,
|
RadioItem as DropdownMenuRadioItem,
|
||||||
Separator as DropdownMenuSeparator,
|
Separator as DropdownMenuSeparator,
|
||||||
RadioGroup as DropdownMenuRadioGroup,
|
RadioGroup as DropdownMenuRadioGroup,
|
||||||
SubContent as DropdownMenuSubContent,
|
SubContent as DropdownMenuSubContent,
|
||||||
SubTrigger as DropdownMenuSubTrigger,
|
SubTrigger as DropdownMenuSubTrigger,
|
||||||
CheckboxItem as DropdownMenuCheckboxItem
|
CheckboxItem as DropdownMenuCheckboxItem
|
||||||
};
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
import { Popover as PopoverPrimitive } from 'bits-ui';
|
import { Popover as PopoverPrimitive } from 'bits-ui'
|
||||||
import Content from './popover-content.svelte';
|
import Content from './popover-content.svelte'
|
||||||
const Root = PopoverPrimitive.Root;
|
const Root = PopoverPrimitive.Root
|
||||||
const Trigger = PopoverPrimitive.Trigger;
|
const Trigger = PopoverPrimitive.Trigger
|
||||||
const Close = PopoverPrimitive.Close;
|
const Close = PopoverPrimitive.Close
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Root,
|
Root,
|
||||||
Content,
|
Content,
|
||||||
Trigger,
|
Trigger,
|
||||||
Close,
|
Close,
|
||||||
//
|
//
|
||||||
Root as Popover,
|
Root as Popover,
|
||||||
Content as PopoverContent,
|
Content as PopoverContent,
|
||||||
Trigger as PopoverTrigger,
|
Trigger as PopoverTrigger,
|
||||||
Close as PopoverClose
|
Close as PopoverClose
|
||||||
};
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,27 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Popover as PopoverPrimitive } from 'bits-ui';
|
import { Popover as PopoverPrimitive } from 'bits-ui'
|
||||||
import { cn, flyAndScale } from '$lib/utils.js';
|
import { cn, flyAndScale } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = PopoverPrimitive.ContentProps;
|
type $$Props = PopoverPrimitive.ContentProps
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let transition: $$Props['transition'] = flyAndScale;
|
export let transition: $$Props['transition'] = flyAndScale
|
||||||
export let transitionConfig: $$Props['transitionConfig'] = undefined;
|
export let transitionConfig: $$Props['transitionConfig'] = undefined
|
||||||
export let align: $$Props['align'] = 'center';
|
export let align: $$Props['align'] = 'center'
|
||||||
export let sideOffset: $$Props['sideOffset'] = 4;
|
export let sideOffset: $$Props['sideOffset'] = 4
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<PopoverPrimitive.Content
|
<PopoverPrimitive.Content
|
||||||
{transition}
|
{transition}
|
||||||
{transitionConfig}
|
{transitionConfig}
|
||||||
{align}
|
{align}
|
||||||
{sideOffset}
|
{sideOffset}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
class={cn(
|
class={cn(
|
||||||
'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
|
'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</PopoverPrimitive.Content>
|
</PopoverPrimitive.Content>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
import Scrollbar from './scroll-area-scrollbar.svelte';
|
import Scrollbar from './scroll-area-scrollbar.svelte'
|
||||||
import Root from './scroll-area.svelte';
|
import Root from './scroll-area.svelte'
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Root,
|
Root,
|
||||||
Scrollbar,
|
Scrollbar,
|
||||||
//,
|
//,
|
||||||
Root as ScrollArea,
|
Root as ScrollArea,
|
||||||
Scrollbar as ScrollAreaScrollbar
|
Scrollbar as ScrollAreaScrollbar
|
||||||
};
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,27 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
|
import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
|
type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
|
||||||
orientation?: 'vertical' | 'horizontal';
|
orientation?: 'vertical' | 'horizontal'
|
||||||
};
|
}
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let orientation: $$Props['orientation'] = 'vertical';
|
export let orientation: $$Props['orientation'] = 'vertical'
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ScrollAreaPrimitive.Scrollbar
|
<ScrollAreaPrimitive.Scrollbar
|
||||||
{orientation}
|
{orientation}
|
||||||
class={cn(
|
class={cn(
|
||||||
'flex touch-none select-none transition-colors',
|
'flex touch-none select-none transition-colors',
|
||||||
orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
|
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',
|
orientation === 'horizontal' && 'h-2.5 w-full border-t border-t-transparent p-px',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<ScrollAreaPrimitive.Thumb
|
<ScrollAreaPrimitive.Thumb
|
||||||
class={cn('relative rounded-full bg-border', orientation === 'vertical' && 'flex-1')}
|
class={cn('relative rounded-full bg-border', orientation === 'vertical' && 'flex-1')}
|
||||||
/>
|
/>
|
||||||
</ScrollAreaPrimitive.Scrollbar>
|
</ScrollAreaPrimitive.Scrollbar>
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,32 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
|
import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui'
|
||||||
import { Scrollbar } from './index.js';
|
import { Scrollbar } from './index.js'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = ScrollAreaPrimitive.Props & {
|
type $$Props = ScrollAreaPrimitive.Props & {
|
||||||
orientation?: 'vertical' | 'horizontal' | 'both';
|
orientation?: 'vertical' | 'horizontal' | 'both'
|
||||||
scrollbarXClasses?: string;
|
scrollbarXClasses?: string
|
||||||
scrollbarYClasses?: string;
|
scrollbarYClasses?: string
|
||||||
};
|
}
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
export let orientation = 'vertical';
|
export let orientation = 'vertical'
|
||||||
export let scrollbarXClasses: string = '';
|
export let scrollbarXClasses: string = ''
|
||||||
export let scrollbarYClasses: string = '';
|
export let scrollbarYClasses: string = ''
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ScrollAreaPrimitive.Root {...$$restProps} class={cn('relative overflow-hidden', className)}>
|
<ScrollAreaPrimitive.Root {...$$restProps} class={cn('relative overflow-hidden', className)}>
|
||||||
<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
|
<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
|
||||||
<ScrollAreaPrimitive.Content>
|
<ScrollAreaPrimitive.Content>
|
||||||
<slot />
|
<slot />
|
||||||
</ScrollAreaPrimitive.Content>
|
</ScrollAreaPrimitive.Content>
|
||||||
</ScrollAreaPrimitive.Viewport>
|
</ScrollAreaPrimitive.Viewport>
|
||||||
{#if orientation === 'vertical' || orientation === 'both'}
|
{#if orientation === 'vertical' || orientation === 'both'}
|
||||||
<Scrollbar orientation="vertical" class={scrollbarYClasses} />
|
<Scrollbar orientation="vertical" class={scrollbarYClasses} />
|
||||||
{/if}
|
{/if}
|
||||||
{#if orientation === 'horizontal' || orientation === 'both'}
|
{#if orientation === 'horizontal' || orientation === 'both'}
|
||||||
<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
|
<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
|
||||||
{/if}
|
{/if}
|
||||||
<ScrollAreaPrimitive.Corner />
|
<ScrollAreaPrimitive.Corner />
|
||||||
</ScrollAreaPrimitive.Root>
|
</ScrollAreaPrimitive.Root>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import Root from './separator.svelte';
|
import Root from './separator.svelte'
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Root,
|
Root,
|
||||||
//
|
//
|
||||||
Root as Separator
|
Root as Separator
|
||||||
};
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,22 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Separator as SeparatorPrimitive } from 'bits-ui';
|
import { Separator as SeparatorPrimitive } from 'bits-ui'
|
||||||
import { cn } from '$lib/utils.js';
|
import { cn } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = SeparatorPrimitive.Props;
|
type $$Props = SeparatorPrimitive.Props
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let orientation: $$Props['orientation'] = 'horizontal';
|
export let orientation: $$Props['orientation'] = 'horizontal'
|
||||||
export let decorative: $$Props['decorative'] = undefined;
|
export let decorative: $$Props['decorative'] = undefined
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<SeparatorPrimitive.Root
|
<SeparatorPrimitive.Root
|
||||||
class={cn(
|
class={cn(
|
||||||
'shrink-0 bg-border',
|
'shrink-0 bg-border',
|
||||||
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
|
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{orientation}
|
{orientation}
|
||||||
{decorative}
|
{decorative}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
export { default as Toaster } from './sonner.svelte';
|
export { default as Toaster } from './sonner.svelte'
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
|
import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner'
|
||||||
import { mode } from 'mode-watcher';
|
import { mode } from 'mode-watcher'
|
||||||
|
|
||||||
type $$Props = SonnerProps;
|
type $$Props = SonnerProps
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Sonner
|
<Sonner
|
||||||
theme={$mode}
|
theme={$mode}
|
||||||
class="toaster group"
|
class="toaster group"
|
||||||
toastOptions={{
|
toastOptions={{
|
||||||
classes: {
|
classes: {
|
||||||
toast:
|
toast:
|
||||||
'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
|
'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
|
||||||
description: 'group-[.toast]:text-muted-foreground',
|
description: 'group-[.toast]:text-muted-foreground',
|
||||||
actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
|
actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
|
||||||
cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
|
cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
import { Tooltip as TooltipPrimitive } from 'bits-ui';
|
import { Tooltip as TooltipPrimitive } from 'bits-ui'
|
||||||
import Content from './tooltip-content.svelte';
|
import Content from './tooltip-content.svelte'
|
||||||
|
|
||||||
const Root = TooltipPrimitive.Root;
|
const Root = TooltipPrimitive.Root
|
||||||
const Trigger = TooltipPrimitive.Trigger;
|
const Trigger = TooltipPrimitive.Trigger
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Root,
|
Root,
|
||||||
Trigger,
|
Trigger,
|
||||||
Content,
|
Content,
|
||||||
//
|
//
|
||||||
Root as Tooltip,
|
Root as Tooltip,
|
||||||
Content as TooltipContent,
|
Content as TooltipContent,
|
||||||
Trigger as TooltipTrigger
|
Trigger as TooltipTrigger
|
||||||
};
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,28 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Tooltip as TooltipPrimitive } from 'bits-ui';
|
import { Tooltip as TooltipPrimitive } from 'bits-ui'
|
||||||
import { cn, flyAndScale } from '$lib/utils.js';
|
import { cn, flyAndScale } from '$lib/utils.js'
|
||||||
|
|
||||||
type $$Props = TooltipPrimitive.ContentProps;
|
type $$Props = TooltipPrimitive.ContentProps
|
||||||
|
|
||||||
let className: $$Props['class'] = undefined;
|
let className: $$Props['class'] = undefined
|
||||||
export let sideOffset: $$Props['sideOffset'] = 4;
|
export let sideOffset: $$Props['sideOffset'] = 4
|
||||||
export let transition: $$Props['transition'] = flyAndScale;
|
export let transition: $$Props['transition'] = flyAndScale
|
||||||
export let transitionConfig: $$Props['transitionConfig'] = {
|
export let transitionConfig: $$Props['transitionConfig'] = {
|
||||||
y: 8,
|
y: 8,
|
||||||
duration: 150
|
duration: 150
|
||||||
};
|
}
|
||||||
export { className as class };
|
export { className as class }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<TooltipPrimitive.Content
|
<TooltipPrimitive.Content
|
||||||
{transition}
|
{transition}
|
||||||
{transitionConfig}
|
{transitionConfig}
|
||||||
{sideOffset}
|
{sideOffset}
|
||||||
class={cn(
|
class={cn(
|
||||||
'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground',
|
'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</TooltipPrimitive.Content>
|
</TooltipPrimitive.Content>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,167 +1,167 @@
|
||||||
.markdown-body {
|
.markdown-body {
|
||||||
@apply text-primary/90;
|
@apply text-primary/90;
|
||||||
h2 {
|
h2 {
|
||||||
@apply text-3xl font-serif mb-5 mt-16;
|
@apply text-3xl font-serif mb-5 mt-16;
|
||||||
}
|
}
|
||||||
section:first-child h2 {
|
section:first-child h2 {
|
||||||
@apply mt-6;
|
@apply mt-6;
|
||||||
}
|
}
|
||||||
h3,
|
h3,
|
||||||
h4 {
|
h4 {
|
||||||
@apply text-2xl mb-5 mt-12 text-muted-foreground;
|
@apply text-2xl mb-5 mt-12 text-muted-foreground;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
@apply leading-loose my-2;
|
@apply leading-loose my-2;
|
||||||
}
|
}
|
||||||
|
|
||||||
ol,
|
ol,
|
||||||
ul {
|
ul {
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
}
|
}
|
||||||
ol li ol,
|
ol li ol,
|
||||||
ol li ul,
|
ol li ul,
|
||||||
ul li ol,
|
ul li ol,
|
||||||
ul li ul {
|
ul li ul {
|
||||||
margin: 0 2em;
|
margin: 0 2em;
|
||||||
}
|
}
|
||||||
ol li p,
|
ol li p,
|
||||||
ul li p {
|
ul li p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@apply text-blue-500 dark:text-blue-600 hover:underline;
|
@apply text-blue-500 dark:text-blue-600 hover:underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
dl {
|
dl {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
}
|
}
|
||||||
dl dt {
|
dl dt {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
dl dd {
|
dl dd {
|
||||||
margin: -1em 0 1em 1em;
|
margin: -1em 0 1em 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
@apply max-w-[80%] mx-auto my-8 rounded-xl shadow-lg;
|
@apply max-w-[80%] mx-auto my-8 rounded-xl shadow-lg;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote:not(.markdown-alert) {
|
blockquote:not(.markdown-alert) {
|
||||||
@apply border-l-4 border-l-muted-foreground my-4 pl-4 italic mx-4;
|
@apply border-l-4 border-l-muted-foreground my-4 pl-4 italic mx-4;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
@apply max-w-3xl xl:max-w-5xl;
|
@apply max-w-3xl xl:max-w-5xl;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
caption-side: bottom;
|
caption-side: bottom;
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2em;
|
||||||
}
|
}
|
||||||
table * {
|
table * {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
table thead,
|
table thead,
|
||||||
table tr {
|
table tr {
|
||||||
display: table;
|
display: table;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
table tr:nth-child(even) {
|
table tr:nth-child(even) {
|
||||||
background-color: rgba(200, 200, 200, 0.2);
|
background-color: rgba(200, 200, 200, 0.2);
|
||||||
}
|
}
|
||||||
table tbody {
|
table tbody {
|
||||||
display: block;
|
display: block;
|
||||||
max-height: 70vh;
|
max-height: 70vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
table td,
|
table td,
|
||||||
table th {
|
table th {
|
||||||
padding: 0.25em;
|
padding: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
table,
|
table,
|
||||||
.highlight > pre,
|
.highlight > pre,
|
||||||
pre.example {
|
pre.example {
|
||||||
@apply p-4 border-2 border-primary/10 font-sans;
|
@apply p-4 border-2 border-primary/10 font-sans;
|
||||||
max-height: 70vh;
|
max-height: 70vh;
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
figure {
|
figure {
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
}
|
}
|
||||||
figure figcaption {
|
figure figcaption {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 0.75em;
|
font-size: 0.75em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: grey;
|
color: grey;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* KaTeX formatting */
|
/* KaTeX formatting */
|
||||||
.katex-display {
|
.katex-display {
|
||||||
@apply max-w-3xl overflow-x-auto overflow-y-hidden;
|
@apply max-w-3xl overflow-x-auto overflow-y-hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Markdown Alert formatting */
|
/* Markdown Alert formatting */
|
||||||
.markdown-alert {
|
.markdown-alert {
|
||||||
@apply border-l-4 rounded-xl px-4 py-1 my-4 shadow-md dark:shadow-none;
|
@apply border-l-4 rounded-xl px-4 py-1 my-4 shadow-md dark:shadow-none;
|
||||||
}
|
}
|
||||||
.markdown-alert.markdown-alert-caution {
|
.markdown-alert.markdown-alert-caution {
|
||||||
@apply border-l-red-600 bg-red-100 dark:bg-red-900 dark:text-red-100;
|
@apply border-l-red-600 bg-red-100 dark:bg-red-900 dark:text-red-100;
|
||||||
}
|
}
|
||||||
.markdown-alert-title {
|
.markdown-alert-title {
|
||||||
@apply font-medium text-xl font-sans;
|
@apply font-medium text-xl font-sans;
|
||||||
}
|
}
|
||||||
.markdown-alert-caution > .markdown-alert-title {
|
.markdown-alert-caution > .markdown-alert-title {
|
||||||
@apply text-red-600 fill-red-600 dark:text-red-100 dark:fill-red-100;
|
@apply text-red-600 fill-red-600 dark:text-red-100 dark:fill-red-100;
|
||||||
}
|
}
|
||||||
.markdown-alert.markdown-alert-tip {
|
.markdown-alert.markdown-alert-tip {
|
||||||
@apply border-l-green-600 bg-green-100 dark:bg-green-900 dark:text-green-100;
|
@apply border-l-green-600 bg-green-100 dark:bg-green-900 dark:text-green-100;
|
||||||
}
|
}
|
||||||
.markdown-alert-tip > .markdown-alert-title {
|
.markdown-alert-tip > .markdown-alert-title {
|
||||||
@apply text-green-600 fill-green-600 dark:text-green-100 dark:fill-green-100;
|
@apply text-green-600 fill-green-600 dark:text-green-100 dark:fill-green-100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-alert.markdown-alert-important {
|
.markdown-alert.markdown-alert-important {
|
||||||
@apply border-l-purple-600 bg-purple-100 dark:bg-purple-900 dark:text-purple-100;
|
@apply border-l-purple-600 bg-purple-100 dark:bg-purple-900 dark:text-purple-100;
|
||||||
}
|
}
|
||||||
.markdown-alert-important > .markdown-alert-title {
|
.markdown-alert-important > .markdown-alert-title {
|
||||||
@apply text-purple-600 fill-purple-600 dark:text-purple-100 dark:fill-purple-100;
|
@apply text-purple-600 fill-purple-600 dark:text-purple-100 dark:fill-purple-100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-alert.markdown-alert-note {
|
.markdown-alert.markdown-alert-note {
|
||||||
@apply border-l-blue-600 bg-blue-100 dark:bg-blue-900 dark:text-blue-100;
|
@apply border-l-blue-600 bg-blue-100 dark:bg-blue-900 dark:text-blue-100;
|
||||||
}
|
}
|
||||||
.markdown-alert-note > .markdown-alert-title {
|
.markdown-alert-note > .markdown-alert-title {
|
||||||
@apply text-blue-600 fill-blue-600 dark:text-blue-100 dark:fill-blue-100;
|
@apply text-blue-600 fill-blue-600 dark:text-blue-100 dark:fill-blue-100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-alert.markdown-alert-warning {
|
.markdown-alert.markdown-alert-warning {
|
||||||
@apply border-l-yellow-600 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-100;
|
@apply border-l-yellow-600 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-100;
|
||||||
}
|
}
|
||||||
.markdown-alert-warning > .markdown-alert-title {
|
.markdown-alert-warning > .markdown-alert-title {
|
||||||
@apply text-yellow-600 fill-yellow-600 dark:text-yellow-100 dark:fill-yellow-100;
|
@apply text-yellow-600 fill-yellow-600 dark:text-yellow-100 dark:fill-yellow-100;
|
||||||
}
|
}
|
||||||
.markdown-alert .markdown-alert-title .octicon {
|
.markdown-alert .markdown-alert-title .octicon {
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
overflow: visible !important;
|
overflow: visible !important;
|
||||||
|
|
||||||
-webkit-mask: var(--oct-icon) no-repeat;
|
-webkit-mask: var(--oct-icon) no-repeat;
|
||||||
mask: var(--oct-icon) no-repeat;
|
mask: var(--oct-icon) no-repeat;
|
||||||
-webkit-mask-size: 100% 100%;
|
-webkit-mask-size: 100% 100%;
|
||||||
mask-size: 100% 100%;
|
mask-size: 100% 100%;
|
||||||
background-color: currentColor;
|
background-color: currentColor;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: -0.125em;
|
vertical-align: -0.125em;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
}
|
}
|
||||||
.hljs {
|
.hljs {
|
||||||
@apply my-4 rounded-xl shadow-lg overflow-x-auto text-wrap;
|
@apply my-4 rounded-xl shadow-lg overflow-x-auto text-wrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,56 +1,56 @@
|
||||||
import { type ClassValue, clsx } from 'clsx';
|
import { type ClassValue, clsx } from 'clsx'
|
||||||
import { twMerge } from 'tailwind-merge';
|
import { twMerge } from 'tailwind-merge'
|
||||||
import { cubicOut } from 'svelte/easing';
|
import { cubicOut } from 'svelte/easing'
|
||||||
import type { TransitionConfig } from 'svelte/transition';
|
import type { TransitionConfig } from 'svelte/transition'
|
||||||
|
|
||||||
export function cn(...inputs: ClassValue[]) {
|
export function cn(...inputs: ClassValue[]) {
|
||||||
return twMerge(clsx(inputs));
|
return twMerge(clsx(inputs))
|
||||||
}
|
}
|
||||||
|
|
||||||
type FlyAndScaleParams = {
|
type FlyAndScaleParams = {
|
||||||
y?: number;
|
y?: number
|
||||||
x?: number;
|
x?: number
|
||||||
start?: number;
|
start?: number
|
||||||
duration?: number;
|
duration?: number
|
||||||
};
|
}
|
||||||
|
|
||||||
export const flyAndScale = (
|
export const flyAndScale = (
|
||||||
node: Element,
|
node: Element,
|
||||||
params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
|
params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
|
||||||
): TransitionConfig => {
|
): TransitionConfig => {
|
||||||
const style = getComputedStyle(node);
|
const style = getComputedStyle(node)
|
||||||
const transform = style.transform === 'none' ? '' : style.transform;
|
const transform = style.transform === 'none' ? '' : style.transform
|
||||||
|
|
||||||
const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
|
const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
|
||||||
const [minA, maxA] = scaleA;
|
const [minA, maxA] = scaleA
|
||||||
const [minB, maxB] = scaleB;
|
const [minB, maxB] = scaleB
|
||||||
|
|
||||||
const percentage = (valueA - minA) / (maxA - minA);
|
const percentage = (valueA - minA) / (maxA - minA)
|
||||||
const valueB = percentage * (maxB - minB) + minB;
|
const valueB = percentage * (maxB - minB) + minB
|
||||||
|
|
||||||
return valueB;
|
return valueB
|
||||||
};
|
}
|
||||||
|
|
||||||
const styleToString = (style: Record<string, number | string | undefined>): string => {
|
const styleToString = (style: Record<string, number | string | undefined>): string => {
|
||||||
return Object.keys(style).reduce((str, key) => {
|
return Object.keys(style).reduce((str, key) => {
|
||||||
if (style[key] === undefined) return str;
|
if (style[key] === undefined) return str
|
||||||
return str + `${key}:${style[key]};`;
|
return str + `${key}:${style[key]};`
|
||||||
}, '');
|
}, '')
|
||||||
};
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
duration: params.duration ?? 200,
|
duration: params.duration ?? 200,
|
||||||
delay: 0,
|
delay: 0,
|
||||||
css: (t) => {
|
css: (t) => {
|
||||||
const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
|
const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0])
|
||||||
const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
|
const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0])
|
||||||
const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
|
const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1])
|
||||||
|
|
||||||
return styleToString({
|
return styleToString({
|
||||||
transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
|
transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
|
||||||
opacity: t
|
opacity: t
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
easing: cubicOut
|
easing: cubicOut
|
||||||
};
|
}
|
||||||
};
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,52 +1,52 @@
|
||||||
import { readdir, readFile } from 'fs/promises';
|
import { readdir, readFile } from 'fs/promises'
|
||||||
import { join } from 'path';
|
import { join } from 'path'
|
||||||
import toml from 'toml';
|
import toml from 'toml'
|
||||||
|
|
||||||
const crawl = async () => {
|
const crawl = async () => {
|
||||||
const blogPath = join(process.cwd(), 'blog');
|
const blogPath = join(process.cwd(), 'blog')
|
||||||
const years = await readdir(blogPath);
|
const years = await readdir(blogPath)
|
||||||
|
|
||||||
const posts: {
|
const posts: {
|
||||||
[key: string]: {
|
[key: string]: {
|
||||||
metadata: PostMeta;
|
metadata: PostMeta
|
||||||
content: string;
|
content: string
|
||||||
};
|
}
|
||||||
} = {};
|
} = {}
|
||||||
|
|
||||||
for (const year of years) {
|
for (const year of years) {
|
||||||
const yearPath = join(blogPath, year);
|
const yearPath = join(blogPath, year)
|
||||||
const directories = await readdir(yearPath);
|
const directories = await readdir(yearPath)
|
||||||
|
|
||||||
for (const directory of directories) {
|
for (const directory of directories) {
|
||||||
const postPath = join(yearPath, directory);
|
const postPath = join(yearPath, directory)
|
||||||
try {
|
try {
|
||||||
await readFile(join(postPath, '.blogignore'), 'utf-8');
|
await readFile(join(postPath, '.blogignore'), 'utf-8')
|
||||||
continue;
|
continue
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// If the file doesn't exist, continue with the rest of the code
|
// If the file doesn't exist, continue with the rest of the code
|
||||||
}
|
}
|
||||||
const postTomlPath = join(postPath, 'post.toml');
|
const postTomlPath = join(postPath, 'post.toml')
|
||||||
const contentPath = join(postPath, 'content.md');
|
const contentPath = join(postPath, 'content.md')
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const postToml = await readFile(postTomlPath, 'utf-8');
|
const postToml = await readFile(postTomlPath, 'utf-8')
|
||||||
const content = await readFile(contentPath, 'utf-8');
|
const content = await readFile(contentPath, 'utf-8')
|
||||||
|
|
||||||
const metadata = toml.parse(postToml);
|
const metadata = toml.parse(postToml)
|
||||||
|
|
||||||
posts[`${year}/${directory}`] = {
|
posts[`${year}/${directory}`] = {
|
||||||
metadata,
|
metadata,
|
||||||
content
|
content
|
||||||
};
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
throw new Error(`Error reading post: ${error}`);
|
throw new Error(`Error reading post: ${error}`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return posts;
|
return posts
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
const postsResult = await crawl();
|
const postsResult = await crawl()
|
||||||
if (!postsResult) throw new Error('No posts found!');
|
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
Loading…
Reference in a new issue