From 61b4c0d0d4cb08377d2964cf16f360674b9d3f7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n=20UB?=
<22903142+adrian-ub@users.noreply.github.com>
Date: Fri, 26 Jul 2024 19:15:21 -0500
Subject: [PATCH] feat: add component preview
---
apps/www/.vscode/simple-query.code-snippets | 18 +
apps/www/astro.config.mjs | 93 +++--
apps/www/package.json | 2 +
.../www/src/components/ComponentPreview.astro | 107 +++++
.../src/components/starlight/PageTitle.astro | 7 +-
.../content/docs/docs/components/alert.mdx | 48 +++
apps/www/src/lib/highlighter-theme.json | 380 ++++++++++++++++++
.../registry/default/example/alert-demo.ts | 32 ++
.../registry/new-york/example/alert-demo.ts | 32 ++
apps/www/src/style/markdown.css | 66 +++
pnpm-lock.yaml | 67 +++
11 files changed, 810 insertions(+), 42 deletions(-)
create mode 100644 apps/www/.vscode/simple-query.code-snippets
create mode 100644 apps/www/src/components/ComponentPreview.astro
create mode 100644 apps/www/src/content/docs/docs/components/alert.mdx
create mode 100644 apps/www/src/lib/highlighter-theme.json
create mode 100644 apps/www/src/registry/default/example/alert-demo.ts
create mode 100644 apps/www/src/registry/new-york/example/alert-demo.ts
diff --git a/apps/www/.vscode/simple-query.code-snippets b/apps/www/.vscode/simple-query.code-snippets
new file mode 100644
index 0000000..09979bf
--- /dev/null
+++ b/apps/www/.vscode/simple-query.code-snippets
@@ -0,0 +1,18 @@
+{
+ "query target": {
+ "scope": "typescriptreact,javascriptreact",
+ "prefix": "$:target",
+ "body": [
+ "data-target={$('$1')}"
+ ]
+ },
+ "query ready block": {
+ "scope": "typescript,javascript",
+ "prefix": "$:ready",
+ "body": [
+ "$.ready(async () => {",
+ " $1",
+ "});"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/apps/www/astro.config.mjs b/apps/www/astro.config.mjs
index 6c639f7..e01badc 100644
--- a/apps/www/astro.config.mjs
+++ b/apps/www/astro.config.mjs
@@ -2,48 +2,61 @@ import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";
import tailwind from "@astrojs/tailwind";
import angular from "@analogjs/astro-angular";
-
import { siteConfig } from "./src/config/site";
+import theme from "./src/lib/highlighter-theme.json";
+
+import simpleStackQuery from "simple-stack-query";
// https://astro.build/config
export default defineConfig({
site: siteConfig.url,
- integrations: [
- angular(),
- starlight({
- title: siteConfig.name,
- logo: {
- dark: "./src/assets/logo-dark.svg",
- light: "./src/assets/logo-light.svg",
- },
- favicon: "./src/assets/logo-dark.svg",
- social: {
- github: siteConfig.links.github,
- "x.com": siteConfig.links.twitter,
- },
- sidebar: [
- {
- label: "Getting Started",
- autogenerate: {
- directory: "docs",
- },
- },
- ],
- customCss: ["./src/tailwind.css"],
- components: {
- Header: "./src/components/starlight/header/Header.astro",
- PageFrame: "./src/components/starlight/PageFrame.astro",
- SiteTitle: "./src/components/starlight/SiteTitle.astro",
- SocialIcons: "./src/components/starlight/SocialIcons.astro",
- Search: "./src/components/starlight/Search.astro",
- Hero: "./src/components/starlight/Hero.astro",
- ContentPanel: "./src/components/starlight/ContentPanel.astro",
- PageTitle: "./src/components/starlight/PageTitle.astro",
- MarkdownContent: "./src/components/starlight/MarkdownContent.astro",
- TwoColumnContent: "./src/components/starlight/TwoColumnContent.astro",
- Sidebar: "./src/components/starlight/Sidebar.astro",
- },
- }),
- tailwind(),
- ],
-});
+ integrations: [starlight({
+ title: siteConfig.name,
+ expressiveCode: {
+ themes: [theme]
+ },
+ logo: {
+ dark: "./src/assets/logo-dark.svg",
+ light: "./src/assets/logo-light.svg"
+ },
+ favicon: "./src/assets/logo-dark.svg",
+ social: {
+ github: siteConfig.links.github,
+ "x.com": siteConfig.links.twitter
+ },
+ sidebar: [{
+ label: "Getting Started",
+ items: [{
+ label: "Introduction",
+ slug: "docs"
+ }]
+ }, {
+ label: "Components",
+ autogenerate: {
+ directory: "docs/components"
+ }
+ }],
+ customCss: ["./src/tailwind.css"],
+ components: {
+ Header: "./src/components/starlight/header/Header.astro",
+ PageFrame: "./src/components/starlight/PageFrame.astro",
+ SiteTitle: "./src/components/starlight/SiteTitle.astro",
+ SocialIcons: "./src/components/starlight/SocialIcons.astro",
+ Search: "./src/components/starlight/Search.astro",
+ Hero: "./src/components/starlight/Hero.astro",
+ ContentPanel: "./src/components/starlight/ContentPanel.astro",
+ PageTitle: "./src/components/starlight/PageTitle.astro",
+ MarkdownContent: "./src/components/starlight/MarkdownContent.astro",
+ TwoColumnContent: "./src/components/starlight/TwoColumnContent.astro",
+ Sidebar: "./src/components/starlight/Sidebar.astro"
+ }
+ }), tailwind(), angular(), simpleStackQuery()],
+ vite: {
+ optimizeDeps: {
+ include: ["@radix-ng/primitives", "@angular/common", "@angular/core", "@angular/cdk", "@ng-icons/core", "@ng-icons/lucide"]
+ },
+ ssr: {
+ noExternal: ["@radix-ng/primitives", "@angular/cdk", "@ng-icons/core", "@ng-icons/lucide"]
+ }
+ }
+});
\ No newline at end of file
diff --git a/apps/www/package.json b/apps/www/package.json
index 8d9ac63..cda9d9c 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -28,6 +28,7 @@
"@astrojs/starlight-tailwind": "^2.0.3",
"@astrojs/tailwind": "^5.1.0",
"@ng-icons/core": "^29.0.0",
+ "@ng-icons/lucide": "^29.0.0",
"@ng-icons/radix-icons": "^29.0.0",
"@pagefind/default-ui": "^1.1.0",
"@radix-ng/primitives": "^0.8.2",
@@ -37,6 +38,7 @@
"lodash.template": "^4.5.0",
"rxjs": "^7.8.1",
"sharp": "^0.32.5",
+ "simple-stack-query": "^0.1.1",
"tailwind-merge": "^2.4.0",
"tailwindcss": "^3.4.4",
"tslib": "^2.6.3",
diff --git a/apps/www/src/components/ComponentPreview.astro b/apps/www/src/components/ComponentPreview.astro
new file mode 100644
index 0000000..81b7b91
--- /dev/null
+++ b/apps/www/src/components/ComponentPreview.astro
@@ -0,0 +1,107 @@
+---
+import path from "path";
+import { styles } from "@/registry/styles";
+import { readFileSync } from "fs";
+
+import { Tabs, TabItem, Code } from "@astrojs/starlight/components";
+
+export interface Props {
+ name: string;
+}
+const { name } = Astro.props;
+
+const components = await Promise.all(
+ styles.map(async (style) => {
+ const filename = path.join(
+ process.cwd(),
+ "src",
+ "registry",
+ style.name,
+ "example",
+ `${name}.ts`
+ );
+ const Component = (await import(/* @vite-ignore */ `${filename}`)).default;
+ const code = readFileSync(`${filename}`)
+ .toString()
+ .replace(/export\s+default\s+.*;\s*/, "")
+ .replace(/@\/registry\/.*\/ui/g, "@/components/ui");
+
+ return {
+ style,
+ Component,
+ code,
+ };
+ })
+);
+---
+
+
+
+
+
+
+
+
+
+
+
+ {
+ components.map(({ Component, style }, index) => (
+
+
+
+ ))
+ }
+
+
+
+
+
+
+ {
+ components.map(({ code, style }, index) => (
+
+
+
+ ))
+ }
+
+
+
+
+
+
diff --git a/apps/www/src/components/starlight/PageTitle.astro b/apps/www/src/components/starlight/PageTitle.astro
index 8237d55..c6e674c 100644
--- a/apps/www/src/components/starlight/PageTitle.astro
+++ b/apps/www/src/components/starlight/PageTitle.astro
@@ -1,9 +1,12 @@
---
-import { cn } from "@/lib/utils";
-import { PAGE_TITLE_ID } from "../../constants";
import type { Props } from "@astrojs/starlight/props";
+import {} from "@ng-icons/radix-icon";
+
+import { cn } from "@/lib/utils";
import { badgeVariants } from "@/registry/new-york/ui/badge.directive";
+
+import { PAGE_TITLE_ID } from "../../constants";
---
+
+## Installation
+
+
+
+ ```bash
+ npx shadcn-ng@latest add alert
+ ```
+
+
+
+
+ 1. Copy and paste the following code into your project.
+
+ 2. Update the import paths to match your project setup.
+
+
+
+
+
+## Usage
+
+```ts
+import {
+ UbAlertDirective,
+ UbAlertDescriptionDirective,
+ UbAlertTitleDirective,
+} from "@/components/ui/alert.directive";
+```
+
+```angular-html
+
+
Heads up!
+
+ You can add components and dependencies to your app using the cli.
+
+
+```
diff --git a/apps/www/src/lib/highlighter-theme.json b/apps/www/src/lib/highlighter-theme.json
new file mode 100644
index 0000000..d1a46c3
--- /dev/null
+++ b/apps/www/src/lib/highlighter-theme.json
@@ -0,0 +1,380 @@
+{
+ "name": "Lambda Studio — Blackout",
+ "semanticHighlighting": true,
+ "colors": {
+ "editorLink.activeForeground": "#ca8a0488",
+ "foreground": "#fff8",
+ "button.background": "#fff",
+ "button.foreground": "#000",
+ "button.hoverBackground": "#fffb",
+ "list.highlightForeground": "#fff",
+ "textLink.foreground": "#fff",
+ "scrollbar.shadow": "#000",
+ "textLink.activeForeground": "#fff8",
+ "editor.lineHighlightBackground": "#8881",
+ "editor.lineHighlightBorder": "#8882",
+ "editorCursor.foreground": "#fff",
+ "editor.findMatchBackground": "#fff8",
+ "editor.findMatchHighlightBackground": "#fff2",
+ "list.activeSelectionForeground": "#fff",
+ "list.focusForeground": "#fff",
+ "list.hoverForeground": "#fff",
+ "list.inactiveSelectionForeground": "#fff",
+ "list.inactiveSelectionBackground": "#000",
+ "list.focusBackground": "#000",
+ "list.focusAndSelectionOutline": "#000",
+ "list.focusHighlightForeground": "#fff",
+ "list.hoverBackground": "#000",
+ "list.focusOutline": "#000",
+ "list.activeSelectionBackground": "#000",
+ "editorIndentGuide.background": "#fff2",
+ "editor.background": "#000",
+ "editor.foreground": "#fff",
+ "editor.foldBackground": "#000",
+ "editor.hoverHighlightBackground": "#000",
+ "editor.selectionBackground": "#8888",
+ "editor.inactiveSelectionBackground": "#8882",
+ "gitDecoration.modifiedResourceForeground": "#fff",
+ "gitDecoration.untrackedResourceForeground": "#a7cb7b",
+ "gitDecoration.conflictingResourceForeground": "#ca8a04",
+ "gitDecoration.deletedResourceForeground": "#c97b89",
+ "listFilterWidget.background": "#000",
+ "input.background": "#fff1",
+ "titleBar.activeForeground": "#fff",
+ "editorWidget.background": "#000",
+ "editorGutter.background": "#000",
+ "debugToolBar.background": "#000",
+ "commandCenter.background": "#000",
+ "sideBarSectionHeader.background": "#000",
+ "focusBorder": "#fff8",
+ "titleBar.activeBackground": "#000",
+ "titleBar.inactiveBackground": "#000",
+ "breadcrumb.background": "#000",
+ "activityBar.background": "#000",
+ "activityBar.foreground": "#fff8",
+ "panel.background": "#000",
+ "sideBar.background": "#000",
+ "sideBarTitle.foreground": "#fff8",
+ "tab.hoverBackground": "#000",
+ "terminal.background": "#000",
+ "statusBar.background": "#000",
+ "statusBar.foreground": "#fff8",
+ "selection.background": "#fff2",
+ "editorPane.background": "#000",
+ "badge.background": "#000",
+ "banner.background": "#000",
+ "menu.background": "#000",
+ "activityBarBadge.background": "#000",
+ "activityBarBadge.foreground": "#fff8",
+ "editorLineNumber.foreground": "#fff2",
+ "editorLineNumber.activeForeground": "#fff8",
+ "statusBarItem.errorBackground": "#f43f5e"
+ },
+ "semanticTokenColors": {
+ "comment": {
+ "foreground": "#fff4"
+ },
+ "keyword": {
+ "foreground": "#fff8"
+ },
+ "string": {
+ "foreground": "#fff8"
+ },
+ "selfKeyword": {
+ "foreground": "#fff",
+ "bold": true
+ },
+ "method.declaration": {
+ "foreground": "#fff",
+ "bold": true
+ },
+ "method.definition": {
+ "foreground": "#fff",
+ "bold": true
+ },
+ "method": {
+ "foreground": "#fff",
+ "bold": false
+ },
+ "function.declaration": {
+ "foreground": "#fff",
+ "bold": true
+ },
+ "function.definition": {
+ "foreground": "#fff",
+ "bold": true
+ },
+ "function": {
+ "foreground": "#fff",
+ "bold": false
+ },
+ "property": {
+ "foreground": "#fff"
+ },
+ "enumMember": {
+ "foreground": "#fff8",
+ "bold": false
+ },
+ "enum": {
+ "foreground": "#fff",
+ "bold": true
+ },
+ "boolean": {
+ "foreground": "#fff8"
+ },
+ "number": {
+ "foreground": "#fff8"
+ },
+ "type": {
+ "foreground": "#fff",
+ "bold": true
+ },
+ "typeAlias": {
+ "foreground": "#fff",
+ "bold": true
+ },
+ "class": {
+ "foreground": "#fff",
+ "bold": true
+ },
+ "selfTypeKeyword": {
+ "foreground": "#fff",
+ "bold": true
+ },
+ "builtinType": {
+ "foreground": "#fff",
+ "bold": true
+ },
+ "interface": {
+ "foreground": "#fff8",
+ "bold": false
+ },
+ "typeParameter": {
+ "foreground": "#fff",
+ "bold": true
+ },
+ "lifetime": {
+ "foreground": "#fff8",
+ "italic": false,
+ "bold": false
+ },
+ "namespace": {
+ "foreground": "#fff"
+ },
+ "macro": {
+ "foreground": "#fff",
+ "bold": false
+ },
+ "decorator": {
+ "foreground": "#fff",
+ "bold": false
+ },
+ "builtinAttribute": {
+ "foreground": "#fff",
+ "bold": false
+ },
+ "generic.attribute": {
+ "foreground": "#fff"
+ },
+ "derive": {
+ "foreground": "#fff"
+ },
+ "operator": {
+ "foreground": "#fff8"
+ },
+ "variable": {
+ "foreground": "#fff"
+ },
+ "variable.readonly": {
+ "foreground": "#fff8"
+ },
+ "parameter": {
+ "foreground": "#fff"
+ },
+ "variable.mutable": {
+ "underline": true
+ },
+ "parameter.mutable": {
+ "underline": true
+ },
+ "selfKeyword.mutable": {
+ "underline": true
+ },
+ "variable.constant": {
+ "foreground": "#fff8"
+ },
+ "struct": {
+ "foreground": "#fff",
+ "bold": true
+ }
+ },
+ "tokenColors": [
+ {
+ "name": "Fallback Operator",
+ "scope": ["keyword.operator"],
+ "settings": {
+ "foreground": "#fff8"
+ }
+ },
+ {
+ "name": "Fallback keywords",
+ "scope": [
+ "storage.type.ts",
+ "keyword",
+ "keyword.other",
+ "keyword.control",
+ "storage.type",
+ "storage.modifier"
+ ],
+ "settings": {
+ "foreground": "#fff8"
+ }
+ },
+ {
+ "name": "Fallback strings",
+ "scope": ["string"],
+ "settings": {
+ "foreground": "#fff8"
+ }
+ },
+ {
+ "name": "Fallback JSON Properties",
+ "scope": ["support.type.property-name.json"],
+ "settings": {
+ "foreground": "#fff"
+ }
+ },
+ {
+ "name": "Fallback string variables",
+ "scope": ["string variable", "string meta.interpolation"],
+ "settings": {
+ "foreground": "#fff"
+ }
+ },
+ {
+ "name": "Fallback comments",
+ "scope": ["comment"],
+ "settings": {
+ "foreground": "#fff4"
+ }
+ },
+ {
+ "name": "Fallback constants",
+ "scope": ["constant"],
+ "settings": {
+ "foreground": "#fff8"
+ }
+ },
+ {
+ "name": "Fallback self/this",
+ "scope": ["variable.language.this"],
+ "settings": {
+ "foreground": "#fff"
+ }
+ },
+ {
+ "name": "Fallback types",
+ "scope": [
+ "entity.other.alias",
+ "source.php support.class",
+ "entity.name.type",
+ "meta.function-call support.class",
+ "keyword.other.type",
+ "entity.other.inherited-class"
+ ],
+ "settings": {
+ "foreground": "#fff",
+ "fontStyle": "bold"
+ }
+ },
+ {
+ "name": "Fallback method calls",
+ "scope": ["meta.method-call entity.name.function"],
+ "settings": {
+ "foreground": "#fff",
+ "fontStyle": ""
+ }
+ },
+ {
+ "name": "Fallback function calls",
+ "scope": [
+ "meta.function-call entity.name.function",
+ "meta.function-call support.function",
+ "meta.function.call entity.name.function"
+ ],
+ "settings": {
+ "foreground": "#fff",
+ "fontStyle": ""
+ }
+ },
+ {
+ "name": "Fallback enums & constants",
+ "scope": ["constant.enum", "constant.other"],
+ "settings": {
+ "foreground": "#fff8"
+ }
+ },
+ {
+ "name": "Fallback Properties & func arguments",
+ "scope": [
+ "variable.other.property",
+ "entity.name.goto-label",
+ "entity.name.variable.parameter"
+ ],
+ "settings": {
+ "foreground": "#fff"
+ }
+ },
+ {
+ "name": "Fallback functions & methods declarations",
+ "scope": [
+ "entity.name.function",
+ "support.function",
+ "support.function.constructor",
+ "entity.name.function meta.function-call meta.method-call"
+ ],
+ "settings": {
+ "foreground": "#fff",
+ "fontStyle": "bold"
+ }
+ },
+ {
+ "name": "HTML Tags",
+ "scope": [
+ "meta.tag entity.name.tag.html",
+ "entity.name.tag.template.html"
+ ],
+ "settings": {
+ "foreground": "#fff"
+ }
+ },
+ {
+ "name": "HTML Attributes",
+ "scope": ["entity.other.attribute-name.html"],
+ "settings": {
+ "foreground": "#fff8"
+ }
+ },
+ {
+ "name": "HTML Custom Tag",
+ "scope": ["meta.tag.other.unrecognized.html entity.name.tag.html"],
+ "settings": {
+ "foreground": "#fff"
+ }
+ },
+ {
+ "name": "HTML Keywords",
+ "scope": ["text.html keyword"],
+ "settings": {
+ "foreground": "#fff"
+ }
+ },
+ {
+ "name": "Punctuations",
+ "scope": ["punctuation", "meta.brace"],
+ "settings": {
+ "foreground": "#fff8"
+ }
+ }
+ ]
+}
diff --git a/apps/www/src/registry/default/example/alert-demo.ts b/apps/www/src/registry/default/example/alert-demo.ts
new file mode 100644
index 0000000..f90de53
--- /dev/null
+++ b/apps/www/src/registry/default/example/alert-demo.ts
@@ -0,0 +1,32 @@
+import { Component } from "@angular/core";
+import { NgIconComponent, provideIcons } from "@ng-icons/core";
+import { lucideTerminal } from "@ng-icons/lucide";
+
+import {
+ UbAlertDirective,
+ UbAlertTitleDirective,
+ UbAlertDescriptionDirective,
+} from "@/registry/default/ui/alert.directive";
+
+@Component({
+ standalone: true,
+ imports: [
+ NgIconComponent,
+ UbAlertDirective,
+ UbAlertTitleDirective,
+ UbAlertDescriptionDirective,
+ ],
+ viewProviders: [provideIcons({ lucideTerminal })],
+ template: `
+
+
+
Heads up!
+
+ You can add components and dependencies to your app using the cli.
+
+
+ `,
+})
+export class AlertDemoComponent {}
+
+export default AlertDemoComponent;
diff --git a/apps/www/src/registry/new-york/example/alert-demo.ts b/apps/www/src/registry/new-york/example/alert-demo.ts
new file mode 100644
index 0000000..20fb30c
--- /dev/null
+++ b/apps/www/src/registry/new-york/example/alert-demo.ts
@@ -0,0 +1,32 @@
+import { Component } from "@angular/core";
+import { NgIconComponent, provideIcons } from "@ng-icons/core";
+import { lucideTerminal } from "@ng-icons/lucide";
+
+import {
+ UbAlertDirective,
+ UbAlertTitleDirective,
+ UbAlertDescriptionDirective,
+} from "@/registry/new-york/ui/alert.directive";
+
+@Component({
+ standalone: true,
+ imports: [
+ NgIconComponent,
+ UbAlertDirective,
+ UbAlertTitleDirective,
+ UbAlertDescriptionDirective,
+ ],
+ viewProviders: [provideIcons({ lucideTerminal })],
+ template: `
+
+
+
Heads up!
+
+ You can add components and dependencies to your app using the cli.
+
+
+ `,
+})
+export class AlertDemoComponent {}
+
+export default AlertDemoComponent;
diff --git a/apps/www/src/style/markdown.css b/apps/www/src/style/markdown.css
index b6d2549..f4ef294 100644
--- a/apps/www/src/style/markdown.css
+++ b/apps/www/src/style/markdown.css
@@ -1,3 +1,69 @@
+.sl-marldown-content h1:not(:where(.not-content *)) {
+ @apply mt-2 scroll-m-20 text-4xl font-bold;
+}
+.sl-markdown-content h2:not(:where(.not-content *)) {
+ @apply mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0;
+}
+.sl-marldown-content h3:not(:where(.not-content *)) {
+ @apply mt-8 scroll-m-20 text-xl font-semibold tracking-tight;
+}
+.sl-marldown-content h4:not(:where(.not-content *)) {
+ @apply mt-8 scroll-m-20 text-lg font-semibold tracking-tight;
+}
+.sl-marldown-content h5:not(:where(.not-content *)) {
+ @apply mt-8 scroll-m-20 text-lg font-semibold tracking-tight;
+}
+.sl-marldown-content h6:not(:where(.not-content *)) {
+ @apply mt-8 scroll-m-20 text-base font-semibold tracking-tight;
+}
+.sl-markdown-content a:not(:where(.not-content *)) {
+ @apply font-medium underline underline-offset-4;
+}
+.sl-markdown-content p:not(:where(.not-content *)) {
+ @apply leading-7 [&:not(:first-child)]:mt-6;
+}
+.sl-markdown-content
+ ul:not(:where(.not-content *))
+ + :not(:where(.sl-steps *)) {
+ @apply my-6 ml-6 list-disc;
+}
+.sl-markdown-content
+ ol:not(:where(.not-content *))
+ + :not(:where(.sl-steps *)) {
+ @apply my-6 ml-6 list-decimal;
+}
+.sl-markdown-content
+ li:not(:where(.not-content *))
+ + :not(:where(.sl-steps *)) {
+ @apply mt-2;
+}
+.sl-markdown-content blockquote:not(:where(.not-content *)) {
+ @apply mt-6 border-l-2 pl-6 italic;
+}
+.sl-markdown-content img:not(:where(.not-content *)) {
+ @apply rounded-md;
+}
+.sl-markdown-content hr:not(:where(.not-content *)) {
+ @apply my-4 md:my-8;
+}
+.sl-markdown-content table:not(:where(.not-content *)) {
+ @apply w-full overflow-hidden rounded-lg;
+}
+.sl-markdown-content tr:not(:where(.not-content *)) {
+ @apply m-0 border-t p-0;
+}
+.sl-markdown-content th:not(:where(.not-content *)) {
+ @apply border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right;
+}
+.sl-markdown-content td:not(:where(.not-content *)) {
+ @apply border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right;
+}
+.sl-markdown-content pre:not(:where(.not-content *)) {
+ @apply mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900;
+}
+.sl-markdown-content code:not(:where(.not-content *)) {
+ @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm;
+}
.sl-markdown-content
:not(a, strong, em, del, span, input, code)
+ :not(a, strong, em, del, span, input, code, :where(.not-content *)) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6438cc5..6b11f65 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -80,6 +80,9 @@ importers:
'@ng-icons/core':
specifier: ^29.0.0
version: 29.0.0(@angular/core@18.1.2(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1)
+ '@ng-icons/lucide':
+ specifier: ^29.0.0
+ version: 29.0.0
'@ng-icons/radix-icons':
specifier: ^29.0.0
version: 29.0.0
@@ -107,6 +110,9 @@ importers:
sharp:
specifier: ^0.32.5
version: 0.32.6
+ simple-stack-query:
+ specifier: ^0.1.1
+ version: 0.1.1(@types/node@20.14.11)(less@4.2.0)(sass@1.77.6)(terser@5.29.2)
tailwind-merge:
specifier: ^2.4.0
version: 2.4.0
@@ -1170,6 +1176,14 @@ packages:
'@changesets/write@0.3.1':
resolution: {integrity: sha512-SyGtMXzH3qFqlHKcvFY2eX+6b0NGiFcNav8AFsYwy5l8hejOeoeTDemu5Yjmke2V5jpzY+pBvM0vCCQ3gdZpfw==}
+ '@clack/core@0.3.4':
+ resolution: {integrity: sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==}
+
+ '@clack/prompts@0.7.0':
+ resolution: {integrity: sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==}
+ bundledDependencies:
+ - is-unicode-supported
+
'@cspotcode/source-map-support@0.8.1':
resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
engines: {node: '>=12'}
@@ -1762,6 +1776,9 @@ packages:
'@angular/core': '>=18.0.0'
rxjs: ^6.5.3 || ^7.4.0
+ '@ng-icons/lucide@29.0.0':
+ resolution: {integrity: sha512-sTkxb5rdRHtRyomKuQcT9s3OcJnA6WEF1e569PAXwxppswQcVoUceohkTaHkN43z2YqTNE7pcfMB35EmvpTI0g==}
+
'@ng-icons/radix-icons@29.0.0':
resolution: {integrity: sha512-t7B2LVGMsrqrwhkjc8zLsw5v6AjBnx/vpDzu2KFF7DitXVDlqNG6HEcy6TVtVHgsNlRamtYR4OoBSZspDApFnw==}
@@ -5768,6 +5785,10 @@ packages:
simple-get@4.0.1:
resolution: {integrity: sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==}
+ simple-stack-query@0.1.1:
+ resolution: {integrity: sha512-jqx20JqAndY+64qha/+fD36oYLaIh4e7vdH/0kuH0HtYC7Wdno2b6+CeXxTT7dqyn1OEwe+LrEyMDnASh9Olow==}
+ engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0}
+
simple-swizzle@0.2.2:
resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
@@ -6343,6 +6364,10 @@ packages:
vfile@6.0.2:
resolution: {integrity: sha512-zND7NlS8rJYb/sPqkb13ZvbbUoExdbi4w3SfRrMq6R3FvnLQmmfpajJNITuuYm6AZ5uao9vy4BAos3EXBPf2rg==}
+ vite-plugin-simple-scope@2.0.2:
+ resolution: {integrity: sha512-UvF++rRZbmGK4A+JsTo0YVKw55wk5IyBTgURspzlkjbt66FXWMOND5yZmGB/2CtFky7wKNz6LHB2B6gHCVrfAw==}
+ engines: {node: '>=18.14.1'}
+
vite@5.3.2:
resolution: {integrity: sha512-6lA7OBHBlXUxiJxbO5aAY2fsHHzDr1q7DvXYnyZycRs2Dz+dXBWuhpWHvmljTRTpQC2uvGmUFFkSHF2vGo90MA==}
engines: {node: ^18.0.0 || >=20.0.0}
@@ -8777,6 +8802,17 @@ snapshots:
human-id: 1.0.2
prettier: 2.8.8
+ '@clack/core@0.3.4':
+ dependencies:
+ picocolors: 1.0.1
+ sisteransi: 1.0.5
+
+ '@clack/prompts@0.7.0':
+ dependencies:
+ '@clack/core': 0.3.4
+ picocolors: 1.0.1
+ sisteransi: 1.0.5
+
'@cspotcode/source-map-support@0.8.1':
dependencies:
'@jridgewell/trace-mapping': 0.3.9
@@ -9256,6 +9292,10 @@ snapshots:
rxjs: 7.8.1
tslib: 2.6.3
+ '@ng-icons/lucide@29.0.0':
+ dependencies:
+ tslib: 2.6.3
+
'@ng-icons/radix-icons@29.0.0':
dependencies:
tslib: 2.6.3
@@ -14121,6 +14161,20 @@ snapshots:
once: 1.4.0
simple-concat: 1.0.1
+ simple-stack-query@0.1.1(@types/node@20.14.11)(less@4.2.0)(sass@1.77.6)(terser@5.29.2):
+ dependencies:
+ '@clack/prompts': 0.7.0
+ kleur: 4.1.5
+ vite-plugin-simple-scope: 2.0.2(@types/node@20.14.11)(less@4.2.0)(sass@1.77.6)(terser@5.29.2)
+ transitivePeerDependencies:
+ - '@types/node'
+ - less
+ - lightningcss
+ - sass
+ - stylus
+ - sugarss
+ - terser
+
simple-swizzle@0.2.2:
dependencies:
is-arrayish: 0.3.2
@@ -14814,6 +14868,19 @@ snapshots:
unist-util-stringify-position: 4.0.0
vfile-message: 4.0.2
+ vite-plugin-simple-scope@2.0.2(@types/node@20.14.11)(less@4.2.0)(sass@1.77.6)(terser@5.29.2):
+ dependencies:
+ typescript: 5.5.3
+ vite: 5.3.4(@types/node@20.14.11)(less@4.2.0)(sass@1.77.6)(terser@5.29.2)
+ transitivePeerDependencies:
+ - '@types/node'
+ - less
+ - lightningcss
+ - sass
+ - stylus
+ - sugarss
+ - terser
+
vite@5.3.2(@types/node@20.14.11)(less@4.2.0)(sass@1.77.6)(terser@5.29.2):
dependencies:
esbuild: 0.21.5