From 863884e256a073c05fb3ac61c09ef3bb5a3db292 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Thu, 13 Aug 2026 17:32:38 +0200 Subject: [PATCH] Link 20 more demo pages to their docs, and lint the paths (#2869) Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> --- .agents/skills/demo-pages/SKILL.md | 120 ++++++++++++++++++++++++ .agents/skills/mr-description/SKILL.md | 2 + .agents/skills/write-docs/SKILL.md | 11 +++ .build/check-docs-links.ts | 14 +++ .changeset/more-demo-page-docs-links.md | 5 + preview/pages/card-gradients.astro | 2 + preview/pages/cards.astro | 2 + preview/pages/charts.astro | 2 + preview/pages/colorpicker.astro | 2 + preview/pages/dropzone.astro | 2 + preview/pages/empty.astro | 2 + preview/pages/flags.astro | 2 + preview/pages/form-elements.astro | 2 + preview/pages/fullcalendar.astro | 2 + preview/pages/icons.astro | 2 + preview/pages/inline-player.astro | 2 + preview/pages/lightbox.astro | 2 + preview/pages/maps-vector.astro | 2 + preview/pages/maps.astro | 2 + preview/pages/payment-providers.astro | 2 + preview/pages/progress.astro | 2 + preview/pages/signatures.astro | 2 + preview/pages/tables.astro | 2 + preview/pages/typography.astro | 2 + preview/pages/wysiwyg.astro | 2 + 25 files changed, 192 insertions(+) create mode 100644 .agents/skills/demo-pages/SKILL.md create mode 100644 .changeset/more-demo-page-docs-links.md diff --git a/.agents/skills/demo-pages/SKILL.md b/.agents/skills/demo-pages/SKILL.md new file mode 100644 index 000000000..98215266a --- /dev/null +++ b/.agents/skills/demo-pages/SKILL.md @@ -0,0 +1,120 @@ +--- +name: demo-pages +description: >- + Build or update a Tabler demo page under `preview/pages/*.astro` — the pages + that show a component's variants side by side. Use whenever the user asks to + add, extend, or clean up a preview/demo page, and on your own after adding a + new `shared/ui` component that has no page showing it. Covers the page + skeleton, the header (title, description, docs link, actions), the card grid, + heading levels, and how to verify the result in the browser. +--- + +# Write a Tabler demo page + +Demo pages live in `preview/pages/*.astro` and are served at `/` in dev, `/.html` in the build. Each one shows the variants of a single component so a reader can compare them at a glance. They are not documentation — the prose is one line per card; the depth lives in `docs/content/**` (see the `write-docs` skill). + +## 1. Page skeleton + +```astro +--- +import DefaultLayout from '@shared/layouts/DefaultLayout.astro' +import Card from '@ui/Card.astro' +import CardBody from '@ui/CardBody.astro' +import CardTitle from '@ui/CardTitle.astro' +import CardSubtitle from '@ui/CardSubtitle.astro' +import DocsLink from '@ui/DocsLink.astro' +--- + + + + +
+
+ + + Basic + One sentence on what this variant is for. + … + + +
+
+ +``` + +- `title` — browser title. It also becomes the page header, so **do not repeat it in a `pageHeader` prop**; `pageHeader` exists only for a header that differs from the browser title (`title="Dashboard" pageHeader="Boxed layout"`), or as `pageHeader={false}` for a page with no header at all. +- `description` — renders under the page title *and* fills ``. One sentence, present tense, says what the component is for. +- `pageMenu` — the menu entry to highlight, e.g. `base.badges`. Match an existing key in `shared/data/menu.json`. +- Never hand-roll a title block inside the page body. The page header is the layout's job. + +## 2. Page header extras + +Anything to the right of the title goes in the `page-header-actions` slot, as a direct child of ``: + +```astro + +``` + +- **Docs link:** `path` is the page's path under `docs/content/**` without the extension — `docs/content/ui/components/badge.mdx` → `/ui/components/badge`. Add one whenever a matching docs page exists. +- **Check the path with `pnpm run check-docs-links`.** It resolves every `` against `docs/content/**` and fails on a typo, so you do not need a browser for this. +- If you do open the link, use `docs-dev.tabler.io`, which serves `dev`. `docs.tabler.io` serves the last release and still has the pre-content-collection urls, so a valid page can 404 there. A 404 on production alone is never a reason to change a path. +- **Prebuilt action groups** (`HeaderActionsButtons`, `HeaderActionsPrint`, `HeaderActionsPhotos`, …) live in `shared/components/layout/` and go in the same slot: ``. There is no `actions="buttons"` prop any more. + +## 3. Card grid + +- One card per variant, in `
` with `col-*` wrappers. Keep column widths consistent down the page. +- `CardTitle` names the variant in 1-3 words. `CardSubtitle` explains it in one sentence, naming the prop or class it demonstrates: "Add `showClose` to let users close the alert." +- Put the class or prop in `` inside the subtitle. Readers scan for the token. +- Never write `

` or `
` by hand — use the components, which also keep the heading level right. + +## 4. Heading levels + +`CardTitle` and `CardHeader` render `h2`, directly under the page `h1`. Pass `as="h3"` only for a card nested under its own `h2` section heading. Do not introduce raw `

`/`

` headings for card titles; that is what made pages mix levels before. + +## 5. Spacing between inline elements + +Use the list wrappers instead of margin utilities on each child: + +| Wrapper | For | +| --- | --- | +| `` | rows of buttons | +| `` | rows of badges | +| `` | rows of tags | +| `` | rows or stacks of avatars | + +The pluralised class names (`.badges-list`, `.tags-list`) are deprecated aliases of `.badge-list` / `.tag-list`. Do not add `me-2`/`mb-2` to individual items. + +## 6. Data and repetition + +- Loop over `shared/data/*.json` (`site.json` colors, `people.json`, `flags.json`) instead of pasting 20 near-identical blocks. +- Cast JSON entries to a named type in the frontmatter when you index into them; `astro check` is part of the quality gates. + +## 7. Registering the page + +- Add the page to `shared/data/menu.json` so it is reachable, and use the same key in `pageMenu`. +- A new `shared/ui` component usually needs both a demo page and a docs page. After finishing here, check `docs/content/**` and consult the `write-docs` skill if it is missing. + +## 8. Verify in the browser + +Never hand the page to the user unchecked. + +1. `preview_start` with the `preview` config from `.claude/launch.json`, then open `/`. +2. Screenshot it, and read the console for errors. +3. For a page built by looping over data, assert the rendered structure instead of eyeballing it: + +```shell +curl -s http://localhost:3000/badges | grep -o '/statuses --jq '.[0].environment_url' curl -s -o /dev/null -w '%{http_code}\n' ``` +**Links to the published docs** (not a Vercel preview) belong to a different pair of hosts: `docs.tabler.io` serves the last release, `docs-dev.tabler.io` serves `dev`. Check any `docs.tabler.io` link you mention against `docs-dev.tabler.io` — production still serves the pre-content-collection URLs, so a page that exists in `docs/content/**` can 404 there without being a broken link. + If the diff touches specific routes or pages, append that path. Path shape differs per project: - **Preview pages use the `.html` extension**: `preview/pages/icons.astro` → `/icons.html`, not `/icons`. diff --git a/.agents/skills/write-docs/SKILL.md b/.agents/skills/write-docs/SKILL.md index 24972bced..1602b1ecd 100644 --- a/.agents/skills/write-docs/SKILL.md +++ b/.agents/skills/write-docs/SKILL.md @@ -114,6 +114,17 @@ Prose and example markup are only as accurate as their source. Before writing ex 8. Ensure prose is in simple English. 9. Verify heading hierarchy (`##` then `###`) and snippet validity. +## 8a. Checking a page on the published site + +Two hosts serve the docs, and they are not in sync: + +| Host | Serves | +| --- | --- | +| `docs.tabler.io` | the last release — can be many commits behind `dev` | +| `docs-dev.tabler.io` | the `dev` branch | + +Check a page's live url on `docs-dev.tabler.io`. Production still serves the pre-content-collection urls, so a page that exists in `docs/content/**` can return 404 there while being perfectly fine. A 404 on `docs.tabler.io` alone never justifies renaming a page or rewriting a link — confirm on `docs-dev.tabler.io` first. + ## 9. Rules while updating existing docs - Preserve valid existing content that is still correct. diff --git a/.build/check-docs-links.ts b/.build/check-docs-links.ts index 16d1b950b..c7be88b5b 100644 --- a/.build/check-docs-links.ts +++ b/.build/check-docs-links.ts @@ -4,6 +4,7 @@ // - menu/link urls in shared/data/docs.json // - redirect destinations in docs/astro.config.mjs // - href string literals in docs .astro components +// - docs paths linked from the demo site: and getDocsUrl('…') // Anchors are checked against heading slugs computed with github-slugger — // the same library the markdown pipeline uses. Demo markup inside // blocks and code fences is ignored; its links are illustrative by design. @@ -218,6 +219,19 @@ for (const file of sync(join(repoRoot, 'docs', '{components,layouts,pages}', '** } } +// 5. Docs paths used by the demo site — and getDocsUrl('…'). +// These render as absolute docs.tabler.io urls, so a typo only shows up in a browser. +for (const file of sync(join(repoRoot, '{preview,shared}', '**', '*.astro'), { ignore: '**/node_modules/**' })) { + const label = relative(repoRoot, file) + const source = readFileSync(file, 'utf8') + for (const match of source.matchAll(/]*?\spath=["'](\/[^"']*)["']/g)) { + checkTarget(label, match[1] ?? '') + } + for (const match of source.matchAll(/getDocsUrl\(\s*["'](\/[^"']*)["']/g)) { + checkTarget(label, match[1] ?? '') + } +} + const uniqueErrors = [...new Set(errors)] if (uniqueErrors.length > 0) { console.error(`Found ${uniqueErrors.length} dead link(s) (${checkedLinks} links checked):\n`) diff --git a/.changeset/more-demo-page-docs-links.md b/.changeset/more-demo-page-docs-links.md new file mode 100644 index 000000000..ea4e037b8 --- /dev/null +++ b/.changeset/more-demo-page-docs-links.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Added `DocsLink` to the header of 20 more demo pages, including Cards, Charts, Tables and Typography. diff --git a/preview/pages/card-gradients.astro b/preview/pages/card-gradients.astro index 612b91b3a..5c59ab045 100644 --- a/preview/pages/card-gradients.astro +++ b/preview/pages/card-gradients.astro @@ -12,9 +12,11 @@ import ProfileContact from '@shared/components/cards/ProfileContact.astro' import SmallStats from '@shared/components/cards/SmallStats.astro' import people from '@data/people.json' import { requireIndex } from '@shared/lib/array' +import DocsLink from '@ui/DocsLink.astro' --- +
diff --git a/preview/pages/cards.astro b/preview/pages/cards.astro index be2d0b59f..cd92300af 100644 --- a/preview/pages/cards.astro +++ b/preview/pages/cards.astro @@ -12,12 +12,14 @@ import CardBackgroundIcon from '@shared/components/cards/CardBackgroundIcon.astr import CreditCard from '@shared/components/cards/CreditCard.astro' import EmptyTeam from '@shared/components/cards/EmptyTeam.astro' import BodyPlaceholder from '@shared/components/cards/BodyPlaceholder.astro' +import DocsLink from '@ui/DocsLink.astro' const cardsStack = ['First', 'Second', 'Third'] const cardsStackColors = ['red', 'green', 'blue'] --- +
diff --git a/preview/pages/charts.astro b/preview/pages/charts.astro index 19edff0d4..942c88b84 100644 --- a/preview/pages/charts.astro +++ b/preview/pages/charts.astro @@ -8,11 +8,13 @@ import CardHeader from '@ui/CardHeader.astro' import CardBody from '@ui/CardBody.astro' import chartsData from '@data/charts.json' import { capitalize } from '@shared/lib/string-format' +import DocsLink from '@ui/DocsLink.astro' const demoCharts = Object.entries(chartsData as Record).filter(([, chart]) => chart && chart.demo) --- +
diff --git a/preview/pages/colorpicker.astro b/preview/pages/colorpicker.astro index 1170aa8f0..4998972a4 100644 --- a/preview/pages/colorpicker.astro +++ b/preview/pages/colorpicker.astro @@ -5,11 +5,13 @@ import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' import Colorpicker from '@ui/Colorpicker.astro' import site from '@data/site.json' +import DocsLink from '@ui/DocsLink.astro' const colors = Object.values(site.colors) as { hex: string; title: string }[] --- + Basic diff --git a/preview/pages/dropzone.astro b/preview/pages/dropzone.astro index 4f9379553..fee66aeee 100644 --- a/preview/pages/dropzone.astro +++ b/preview/pages/dropzone.astro @@ -4,9 +4,11 @@ import Dropzone from '@ui/Dropzone.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' +import DocsLink from '@ui/DocsLink.astro' --- +
diff --git a/preview/pages/empty.astro b/preview/pages/empty.astro index e0b3eb277..0cf493be3 100644 --- a/preview/pages/empty.astro +++ b/preview/pages/empty.astro @@ -1,7 +1,9 @@ --- import DefaultLayout from '@shared/layouts/DefaultLayout.astro' +import DocsLink from '@ui/DocsLink.astro' --- + diff --git a/preview/pages/flags.astro b/preview/pages/flags.astro index 866ae0e87..137a98fb7 100644 --- a/preview/pages/flags.astro +++ b/preview/pages/flags.astro @@ -5,12 +5,14 @@ import CardHeader from '@ui/CardHeader.astro' import CardBody from '@ui/CardBody.astro' import flags from '@data/flags.json' import CardTitle from '@ui/CardTitle.astro' +import DocsLink from '@ui/DocsLink.astro' // 21 filler divs for flexbox layout. const fillers = Array.from({ length: 21 }) --- + List of all flags diff --git a/preview/pages/form-elements.astro b/preview/pages/form-elements.astro index 4a771722d..bf2072232 100644 --- a/preview/pages/form-elements.astro +++ b/preview/pages/form-elements.astro @@ -20,6 +20,7 @@ import CardTitle from '@ui/CardTitle.astro' import FormGroup from '@ui/FormGroup.astro' import people from '@data/people.json' import { requireIndex } from '@shared/lib/array' +import DocsLink from '@ui/DocsLink.astro' const httpMethods = ['GET', 'POST', 'PUT', 'HEAD', 'DELETE', 'PATCH'] const comparisons = [ @@ -51,6 +52,7 @@ const rows = [ --- +
diff --git a/preview/pages/fullcalendar.astro b/preview/pages/fullcalendar.astro index 36f1e17db..d385d2827 100644 --- a/preview/pages/fullcalendar.astro +++ b/preview/pages/fullcalendar.astro @@ -3,9 +3,11 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import Fullcalendar from '@ui/Fullcalendar.astro' +import DocsLink from '@ui/DocsLink.astro' --- + diff --git a/preview/pages/icons.astro b/preview/pages/icons.astro index f6f628f23..07a3c2691 100644 --- a/preview/pages/icons.astro +++ b/preview/pages/icons.astro @@ -2,9 +2,11 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import IconsBanner from '@shared/components/cards/IconsBanner.astro' import Icons from '@shared/components/cards/Icons.astro' +import DocsLink from '@ui/DocsLink.astro' --- +
diff --git a/preview/pages/inline-player.astro b/preview/pages/inline-player.astro index cf3190dd6..649340f92 100644 --- a/preview/pages/inline-player.astro +++ b/preview/pages/inline-player.astro @@ -6,11 +6,13 @@ import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' import InlinePlayer from '@ui/InlinePlayer.astro' import players from '@data/inline-players.json' +import DocsLink from '@ui/DocsLink.astro' type Provider = { 'title': string; 'type': string; 'id': string; 'embed-id': string | number } --- +
{ (players as Provider[]).map((provider) => ( diff --git a/preview/pages/lightbox.astro b/preview/pages/lightbox.astro index 37da55788..ee3cb97d0 100644 --- a/preview/pages/lightbox.astro +++ b/preview/pages/lightbox.astro @@ -3,11 +3,13 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Photo from '@ui/Photo.astro' import photos from '@data/photos.json' +import DocsLink from '@ui/DocsLink.astro' const filteredPhotos = photos.filter((photo) => photo.horizontal) --- +
{ filteredPhotos.map((photo) => ( diff --git a/preview/pages/maps-vector.astro b/preview/pages/maps-vector.astro index 5634e90b9..52efd6470 100644 --- a/preview/pages/maps-vector.astro +++ b/preview/pages/maps-vector.astro @@ -4,9 +4,11 @@ import MapVector from '@ui/MapVector.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' +import DocsLink from '@ui/DocsLink.astro' --- +
diff --git a/preview/pages/maps.astro b/preview/pages/maps.astro index 001a76848..7428f7dfe 100644 --- a/preview/pages/maps.astro +++ b/preview/pages/maps.astro @@ -6,12 +6,14 @@ import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import maps from '@data/maps.json' import CardTitle from '@ui/CardTitle.astro' +import DocsLink from '@ui/DocsLink.astro' type MapData = { title?: string; card?: boolean } const mapEntries = Object.entries(maps as Record) --- +
{ mapEntries.map(([mapId, data]) => diff --git a/preview/pages/payment-providers.astro b/preview/pages/payment-providers.astro index 6bb615166..c9b1bf4e8 100644 --- a/preview/pages/payment-providers.astro +++ b/preview/pages/payment-providers.astro @@ -6,11 +6,13 @@ import CardHeader from '@ui/CardHeader.astro' import CardBody from '@ui/CardBody.astro' import payments from '@data/payments.json' import CardTitle from '@ui/CardTitle.astro' +import DocsLink from '@ui/DocsLink.astro' const providers = payments as { name: string; logo: string }[] --- +
diff --git a/preview/pages/progress.astro b/preview/pages/progress.astro index 6b7d30d67..5936d88b7 100644 --- a/preview/pages/progress.astro +++ b/preview/pages/progress.astro @@ -9,9 +9,11 @@ import Progress from '@ui/Progress.astro' import ProgressSteps from '@ui/ProgressSteps.astro' import ProgressBg from '@ui/ProgressBg.astro' import ProgressDescription from '@ui/ProgressDescription.astro' +import DocsLink from '@ui/DocsLink.astro' --- +
diff --git a/preview/pages/signatures.astro b/preview/pages/signatures.astro index aa4196606..c7eed9a65 100644 --- a/preview/pages/signatures.astro +++ b/preview/pages/signatures.astro @@ -10,6 +10,7 @@ import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' import FormGroup from '@ui/FormGroup.astro' import CaptureModal from '@shared/components/CaptureModal.astro' +import DocsLink from '@ui/DocsLink.astro' const simpleJs = `signaturePad.fromDataURL("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA1OTIgMjAwIj4KICA8ZyBjbGlwLXBhdGg9InVybCgjYSkiPgogICAgPHBhdGggZmlsbD0iIzAwMCIgZD0iTTEzMi4wOTIgNzkuMDY1YzAgLjMwNC0uMzU1IDEuNDAzLTEuMDYzIDMuMjk4LS42OTQgMS44OTQtMS4xNDIgMy4wMjItMS4zNDUgMy4zODQtMi4zNDIgMy44NDctNi43NiA3LjE4LTEzLjI1MiAxMC4wMDEtNS4zNjUgMi4yMjctMTMuNDU1IDUuNTktMjQuMjcgMTAuMDg4YTE0OC4xOSAxNDguMTkgMCAwIDAtMTAuMzQ3IDMuMTI0Yy0yLjY5Ljg4Mi02LjU4NiAyLjk1LTExLjY5IDYuMjA0YTE4Ny42NiAxODcuNjYgMCAwIDAtMS4wNjMgMTAuMTk2IDQwNy40OSA0MDcuNDkgMCAwIDEtMS40MzIgMTUuMzM4Yy0uODgyIDEuMTg2LTEuOTg4IDEuNzc5LTMuMzE4IDEuNzc5LjExNSAwIC4xNzMtLjAxNS4xNzMtLjA0NC0uMjAyLS4xMDEtLjg5Ni0uMjgyLTIuMDgyLS41NDJ2LTIuODg1YzAtMi43MDUuMjMxLTUuNDYuNjk0LTguMjY2IDAtLjA1Ny4yNTMtLjc3My43Ni0yLjE0Ny41MDUtMS4zMzEuNzU4LTIuMTQxLjc1OC0yLjQzIDAtMS42MDUtLjI5Ni0zLjI0LS44ODktNC45MDMtLjM5IDEuMTI4LTEuMTEzIDEuODU5LTIuMTY5IDIuMTkxLTEuMjQ0LS43MjMtMS44NjUtMS45ODgtMS44NjUtMy43OTYgMC0uMjAzIDEuMDQ4LTEuNzI5IDMuMTQ1LTQuNTc4IDIuMTQtMi45NjUgMy4zODMtNS4wMDQgMy43My02LjExNy4yNzUtLjgxLjc2Ny0zLjQ1IDEuNDc1LTcuOTE5IDEuMDQxLTYuNjEgMS45Ni0xMS40NCAyLjc1NS0xNC40OTEgMS42OTItNi42MzkgMy42OTQtMTAuODYyIDYuMDA4LTEyLjY3bDIuNDMgMS44MjN2MS44NjVjLTEuNTA1IDEuMTU3LTIuNTY3IDMuMjYyLTMuMTkgNi4zMTMtLjE4Ny45NC0uNjM2IDMuMzQxLTEuMzQ0IDcuMjAzLS4xNDUuNzA4LS43MjMgMi41NDUtMS43MzUgNS41MS0uOTExIDIuNjAzLTEuMzY3IDQuMTg3LTEuMzY3IDQuNzUxdjUuNDI0Yy4yNi4yNDUuNS4zNjguNzE2LjM2OCAxLjIxNSAwIDMuMTA5LS41MDYgNS42ODMtMS41MTggMy4wOC0xLjE1NyA1LjAxNy0xLjg1MSA1LjgxMy0yLjA4MyAxMy4wNzEtMy4zODQgMjMuMTUtNy4yMzggMzAuMjM1LTExLjU2MyA2LjIxOC0zLjc0NiA5Ljk5Mi02LjI5OCAxMS4zMjItNy42NTggMS41NzYtMS41NjIgMi4zNjQtMy42NjYgMi4zNjQtNi4zMTMgMC00LjY3MS0yLjEwNC04LjU2OS02LjMxMi0xMS42OTMtMy44Ni0yLjkwNy04LjE5MS00LjM2LTEyLjk5Mi00LjM2LTMuNzg4IDAtOC4yNzEuNDYyLTEzLjQ0NyAxLjM4OC02LjY2NiAxLjIxNS0xMi45MiAyLjkwNy0xOC43NjIgNS4wNzYtOC44NjQgMy4yODQtMTMuNzM2IDYuODM0LTE0LjYxOCAxMC42NTJsLTEuMDg1LjgwM0M1OC44MzkgNzguNDIyIDU4IDc3LjA2MiA1OCA3NS43OWMwLTEuODA4IDEuODgtNC4wMTQgNS42NC02LjYxNyAzLjA4LTIuMTQgNS44Mi0zLjU2NSA4LjIyLTQuMjc0IDE1Ljk0OS00LjkxNyAyNy44NjQtNy4zNzYgMzUuNzQ0LTcuMzc2IDcuNDYxIDAgMTMuNDEyIDEuOTUzIDE3Ljg1MSA1Ljg1NyA0LjQyNCAzLjg2MiA2LjYzNyA5LjA5IDYuNjM3IDE1LjY4NVptMzIuMjk1IDU1LjQwN3YxLjkwOWMtLjU5Mi44MjQtMS4yNDMgMS4yMzYtMS45NTIgMS4yMzYtLjQ0OCAwLTEuOTczLTEuMzU5LTQuNTc2LTQuMDc4LTIuNjAzLTIuNzMzLTQuMzM4LTQuMS01LjIwNi00LjEgMCAuMDU4LTMuMDggMS4yNDQtOS4yMzkgMy41NTgtNi4zMDUgMi4zNDMtMTAuMzE3IDMuNTE0LTEyLjAzOCAzLjUxNC0xLjQxNyAwLTIuOTg2LS42OTQtNC43MDctMi4wODMtMS43Mi0xLjM3NC0yLjU4MS0yLjY2OC0yLjU4MS0zLjg4MyAwLTMuMTM4IDMuNDM0LTYuNzk3IDEwLjMwMy0xMC45NzcgNi40MzQtMy45NjMgMTEuMzQzLTUuOTQ0IDE0LjcyNy01Ljk0NCAxLjQxNyAwIDIuNjkuODEgMy44MTcgMi40M3YxLjgyMmMtLjU2NC44MS0xLjIxNCAxLjIxNS0xLjk1MiAxLjIxNS0uMTMgMC0uNjE0LS4xODEtMS40NTMtLjU0My0uODM5LS4zNzYtMS4zMzctLjU2NC0xLjQ5Ni0uNTY0LTEuMTI4IDAtMy43MTcgMS4xNjUtNy43NjUgMy40OTMtMy44MzIgMi4xNjktNi4zOTkgMy43ODktNy43IDQuODYtMS4zMDIgMS4xMjgtMi4xMzMgMi40MTUtMi40OTQgMy44NjEuOTgzLjkyNiAyLjE1NCAxLjM4OCAzLjUxMyAxLjM4OC43MDkgMCA0LjEwNy0xLjE3MSAxMC4xOTQtMy41MTQgNi4wNzMtMi4zNzIgOS43NDYtMy41NTggMTEuMDE5LTMuNTU4IDEuODY1IDAgMy4yMS40NyA0LjAzNCAxLjQxLjE4OC4yMTcuOTA0IDEuNDkgMi4xNDcgMy44MThhMjEuOTAyIDIxLjkwMiAwIDAgMCAzLjQwNSA0LjczWm02OS44ODQtMTkuNzQydjEuOTUzYy0yLjk5MyAyLjQ1OC01Ljg5OSA1LjIxMy04LjcxOSA4LjI2NS04Ljc2MiA5LjQ1OS0xNC42NjIgMTQuMTg4LTE3LjY5OSAxNC4xODgtMi40NTggMC01LjE5OC0yLjIyLTguMjItNi42NmwtNi41MjgtOS42NTRjLTEuMjQ0LjIwMy0zLjQ5MiAyLjQ2Ni02Ljc0NiA2Ljc5LTMuMDUxIDQuMTIyLTUuODQyIDYuMTgzLTguMzcyIDYuMTgzbC0xLjE5My0uNjI5Yy0uODgyLTEuNjItMi41MzgtNS4xNy00Ljk2Ny0xMC42NTItMi42NDYtNS45MjktMy45NjktOS4zMDYtMy45NjktMTAuMTMxIDAtMS40MzIuODQ2LTIuNjE4IDIuNTM4LTMuNTU4IDEuNjkxIDIuMDQgMy4zNTQgNC44NjcgNC45ODggOC40ODMgMi40NTggNS4zMzYgMy44NzUgOC4zMyA0LjI1MSA4Ljk4MWgyLjA2MWMuNTY0LTEuMDQxIDEuODk0LTIuNjU0IDMuOTkxLTQuODM4LjczNy0xLjEyOCAxLjgyMi0yLjY5IDMuMjUzLTQuNjg2IDEuNjc3LTIuMzcyIDMuMDk1LTMuNTU3IDQuMjUxLTMuNTU3IDEuMDcgMCAxLjk3NC41OTIgMi43MTEgMS43NzggMS4wNzEgMS42OTMgMi45ODYgNC43MyA1Ljc0OCA5LjExMiAzLjA1MSA0Ljc0NCA1LjMgNy4xMTYgNi43NDYgNy4xMTYgMS4wNyAwIDUuMDgyLTMuMDgxIDEyLjAzNy05LjI0MiA2Ljk3LTYuMTYxIDEwLjc5NS05LjI0MiAxMS40NzQtOS4yNDJoMi4zNjRabTQ0LjU3MyAxOS41MjVjLTEuMDQyIDEuMjQ0LTIuNDAxIDEuODY2LTQuMDc4IDEuODY2aC0xNC45ODhjLTMuNDcgMC03LjMzOC0uNTIxLTExLjYwNC0xLjU2Mi01LjU5NS0xLjM2LTguNzYyLTMuMDY3LTkuNS01LjEyLS44MDktMi4zMTQtMS4yMTQtNC41MzQtMS4yMTQtNi42NiAwLTQuMjY3IDEuODM2LTcuNTQzIDUuNTA5LTkuODI4IDMuMDk0LTEuOTgxIDYuODc2LTIuOTcyIDExLjM0NC0yLjk3MiAzLjg0NiAwIDYuODk3LjgzMiA5LjE1MyAyLjQ5NSAyLjI1NSAxLjY0OSAzLjM4MyAzLjg5OCAzLjM4MyA2Ljc0NyAwIDEuNTkxLTIuNzExIDMuMzI2LTguMTMzIDUuMjA2LTQuNDgzIDEuNjItNy43NDQgMi40My05Ljc4MiAyLjQzYTQuNDkgNC40OSAwIDAgMS0uNjczLS4wNDNjMCAuMzktLjMxMS44NjgtLjkzMiAxLjQzMi4zMzIuNTY0IDEuOTgxIDEuMjE0IDQuOTQ1IDEuOTUyIDIuNjYuNjggNC41NTUgMS4wMiA1LjY4MiAxLjAyaDEzLjQ3YzAgLjAyOSAxLjY5OS4yODIgNS4wOTcuNzU5IDEuMDcuNjggMS44NDMgMS40MzkgMi4zMjEgMi4yNzhabS0xNy40NjEtMTYuOWMtMS41NzYtMS42MDUtNC4xMTMtMi40MDgtNy42MTMtMi40MDgtMi40NTggMC00LjczNS40NzctNi44MzIgMS40MzItMi43MDQgMS4yNDQtNC4wNTYgMi45MjktNC4wNTYgNS4wNTUgMCAuNzUyLjI1MyAxLjI4Ny43NTkgMS42MDVoMi43MTFjLjk1NSAwIDMuNTUtLjgwMyA3Ljc4Ny0yLjQwOCA0LjIzNy0xLjYyIDYuNjUyLTIuNzEyIDcuMjQ0LTMuMjc2Wm0zMi40OTEtNTMuMzAyLTIuNDA3IDUzLjU2M2MtLjE0NS4xMTUtLjIxNy40NTUtLjIxNyAxLjAxOSAwIC41NjQuMDcyIDEuMzM4LjIxNyAyLjMyMS4zMDQgMi42NjIgMS4wNDEgNy42OTUgMi4yMTIgMTUuMDk5LS4wNTguMjQ2LS41NDIuNTI4LTEuNDUzLjg0N2EyLjkyIDIuOTIgMCAwIDEtLjQ1NS4wNDNjLTIuOTY1IDAtNC44ODgtMy40MjEtNS43Ny0xMC4yNjEtLjAyOS0uMTQ1LS4wNDMtLjQyNy0uMDQzLS44NDYgMC0xLjMzMS4wNzItNC4wNTcuMjE3LTguMTc5LjIwMi01LjMwOC40NDEtMTAuODYyLjcxNS0xNi42NjEuMDg3LTIuMTk4LjQxMi02LjI5MS45NzYtMTIuMjc5LjUzNS01LjQ4MS44MDMtOS41NTIuODAzLTEyLjIxNCAwLTguMDk5LjUzNS0xMy43NiAxLjYwNS0xNi45ODZsLjY1MS0uMDQzaC4xOTVjLjk2OSAwIDEuNjE5LjUzNSAxLjk1MiAxLjYwNS4yNi43MDkuNTI4IDEuNy44MDIgMi45NzJabTExNC4yMTggNjguMTg0Yy0uNjggMS4zMDItMS41MTEgMS45NTMtMi40OTQgMS45NTMtLjQ5MiAwLTEuNjQyLS4zNjktMy40NDktMS4xMDctMi4xNjktLjg4Mi0zLjQzNC0xLjM4MS0zLjc5Ni0xLjQ5Ny0xLjU5LS4zOS0zLjk3Ni0uNzM3LTcuMTU3LTEuMDQxLTMuODQ3LS4zNzYtNi4yMzItLjY4Ny03LjE1OC0uOTMzLTQuNDk3LTEuMTEzLTEwLjAyLTIuNC0xNi41NzEtMy44NjEtMy4wOC0uNjgtNy4wMi0yLjMyMS0xMS44MjEtNC45MjUtNS44Ny0zLjE4Mi04LjgwNi01LjgwNy04LjgwNi03Ljg3NSAwLS40MTkgMy42OC0zLjgxMSAxMS4wNC0xMC4xNzQgOC4wMjYtNi45MTMgMTIuMjc3LTEwLjYwOSAxMi43NTQtMTEuMDg2LjQ2My0uNzA5IDEuMi0xLjcxNCAyLjIxMi0zLjAxNS4yNzUtLjI2IDIuNTc0LTIuMzY1IDYuODk4LTYuMzEzIDMuNDg0LTMuMTk3IDYuMzY5LTUuNzEzIDguNjU0LTcuNTUgMy41NTctMi44NzggNi43MTYtNC45NjggOS40NzgtNi4yNy40MDUuMzc3Ljg0Ni41ODYgMS4zMjMuNjN2My4xMDJsLS4zOS4yMTdhNTkuMDEgNTkuMDEgMCAwIDAtNi4zMTIgNC40NDdjLTYuOTEyIDUuNjI2LTE5LjczIDE3LjgwNC0zOC40NTYgMzYuNTMzIDUuNTM4IDMuOTQ4IDEzLjE3MyA2Ljg4NCAyMi45MDUgOC44MDggMS4wMjYuMTg4IDcuMTg2IDEuNzI4IDE4LjQ3OSA0LjYyMSAxLjM4OC4zMzIgNC4wNDIuOTc2IDcuOTYgMS45My4yODkuMDg3IDEuODU4IDEuMjIyIDQuNzA3IDMuNDA2Wm0tNTguNTQtNTMuMzQ1LTYuNjU5IDU3LjIyOWMtLjQ0OC40NjItMS4yNjUuNjk0LTIuNDUxLjY5NC0yLjAxIDAtMy4wMTUtLjcyMy0zLjAxNS0yLjE3IDAtLjU2NC40NDEtNC4yODEgMS4zMjMtMTEuMTUuMzYyLTIuNTYgMS40NDYtOS45NzIgMy4yNTQtMjIuMjM3LjMxOC0yLjUxNi45MTEtNy4wMjEgMS43NzgtMTMuNTE1LjczOC01LjEyIDEuOC05LjUxIDMuMTg5LTEzLjE2OCAxLjc0OS4zNjEgMi42MjQgMS41MTggMi42MjQgMy40NyAwIC4zMDQtLjAxNC41ODYtLjA0My44NDdabTk5LjQyNSAzMy43MTJjMCAxLjE4Ni0yLjE0NyA0LjE1OC02LjQ0MiA4LjkxNi0zLjc4OCA0LjE4LTYuNjAxIDYuOTQzLTguNDM3IDguMjg4LS45MjYuNjc5LTIuOTE0IDIuMTU1LTUuOTY1IDQuNDI1LTEuMjcyLjg5Ny0zLjIyNCAxLjc4Ni01Ljg1NiAyLjY2OS0yLjY3NS44NjctNC43NzkgMS4zMDEtNi4zMTIgMS4zMDEtMi44NzcgMC01LjI2My0xLjg1MS03LjE1Ny01LjU1NC0xLjU0OC0zLjAyMi0yLjMyMS02LjE2OC0yLjMyMS05LjQzNiAwLTIuNzE5LjU2NC01LjUwMyAxLjY5Mi04LjM1My40MTkgMCAuODUzLS4xOTUgMS4zMDEtLjU4NS41MzUuMzAzIDEuMjcyLjg5NiAyLjIxMiAxLjc3OS0uMjg5IDIuMjI3LS40MzMgNC4xNzItLjQzMyA1LjgzNSAwIDYuODQxIDIuMjE5IDEwLjI2MiA2LjY1OCAxMC4yNjIgNC4yOTUgMCA5LjQ1LTIuNjY5IDE1LjQ2NS04LjAwNi45NTQtLjg1MyA1LjQ3My01LjA3NiAxMy41NTYtMTIuNjY5aC42NzJjLjkxMSAwIDEuMzY3LjM3NiAxLjM2NyAxLjEyOFptMzguNDEyIDEuMDJjMCAuNTkzLS4yOTYgMy45Ny0uODg5IDEwLjEzMWE3MjIuMzI4IDcyMi4zMjggMCAwIDEtMS44NjUgMTYuNzA0Yy0uMDU4LjQ0OS0uNTA3LjY3My0xLjM0NS42NzMtMS4wOTkgMC0yLjAwMy0xLjM4OS0yLjcxMS00LjE2NS0uNTM1LTIuMTEyLS44MDMtMy45ODUtLjgwMy01LjYxOSAwLS42MjIuMzU0LTIuODU3IDEuMDYzLTYuNzA0LjcyMy0zLjgzMiAxLjA4NC02LjA1MiAxLjA4NC02LjY2IDAtMS42NjMtLjQ0OC0yLjQ5NC0xLjM0NC0yLjQ5NC0xLjE1NyAwLTMuNjMgMS4wMDUtNy40MTggMy4wMTUtMy4yODMgMS43NS01LjY2OSAzLjE3NS03LjE1OCA0LjI3NC0yLjg0OCAyLjA5Ny02LjA4IDUuMjUtOS42OTUgOS40NTgtLjU5My42OC0xLjc1NyAxLjk3NC0zLjQ5MiAzLjg4NC0uNjY1LjcwOC0yLjAwMyAxLjA3Ny00LjAxMyAxLjEwNnYtMi44NDJjMC0xLjMxNiAyLjU5Ni00LjIzOCA3Ljc4Ny04Ljc2NGExMTMuMjg2IDExMy4yODYgMCAwIDEgMTMuMDU3LTkuODI4YzYuMzc3LTQuMTUxIDExLjEyLTYuMjI2IDE0LjIyOC02LjIyNi44MjUgMCAxLjYxMy40NDggMi4zNjUgMS4zNDUuNzY2LjkxMSAxLjE0OSAxLjgxNSAxLjE0OSAyLjcxMlpNNTM0IDEzNC40NzJ2MS45MDljLS41OTMuODI0LTEuMjQzIDEuMjM2LTEuOTUyIDEuMjM2LS40NDggMC0xLjk3NC0xLjM1OS00LjU3Ny00LjA3OC0yLjYwMi0yLjczMy00LjMzNy00LjEtNS4yMDUtNC4xIDAgLjA1OC0zLjA4IDEuMjQ0LTkuMjQgMy41NTgtNi4zMDQgMi4zNDMtMTAuMzE3IDMuNTE0LTEyLjAzOCAzLjUxNC0xLjQxNyAwLTIuOTg1LS42OTQtNC43MDYtMi4wODMtMS43MjEtMS4zNzQtMi41ODEtMi42NjgtMi41ODEtMy44ODMgMC0zLjEzOCAzLjQzNC02Ljc5NyAxMC4zMDItMTAuOTc3IDYuNDM1LTMuOTYzIDExLjM0NC01Ljk0NCAxNC43MjgtNS45NDQgMS40MTcgMCAyLjY4OS44MSAzLjgxNyAyLjQzdjEuODIyYy0uNTY0LjgxLTEuMjE1IDEuMjE1LTEuOTUyIDEuMjE1LS4xMyAwLS42MTUtLjE4MS0xLjQ1My0uNTQzLS44MzktLjM3Ni0xLjMzOC0uNTY0LTEuNDk3LS41NjQtMS4xMjggMC0zLjcxNiAxLjE2NS03Ljc2NSAzLjQ5My0zLjgzMiAyLjE2OS02LjM5OCAzLjc4OS03LjcgNC44Ni0xLjMwMSAxLjEyOC0yLjEzMiAyLjQxNS0yLjQ5NCAzLjg2MS45ODMuOTI2IDIuMTU1IDEuMzg4IDMuNTE0IDEuMzg4LjcwOCAwIDQuMTA2LTEuMTcxIDEwLjE5NC0zLjUxNCA2LjA3My0yLjM3MiA5Ljc0Ni0zLjU1OCAxMS4wMTgtMy41NTggMS44NjYgMCAzLjIxLjQ3IDQuMDM1IDEuNDEuMTg3LjIxNy45MDMgMS40OSAyLjE0NyAzLjgxOGEyMS45MDIgMjEuOTAyIDAgMCAwIDMuNDA1IDQuNzNaIi8+CiAgPC9nPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJhIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTU4IDQ5aDQ3NnYxMDJINTh6Ii8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KPC9zdmc+");` @@ -58,6 +59,7 @@ document.querySelector("#signature-advanced-png").addEventListener("click", func --- +
diff --git a/preview/pages/tables.astro b/preview/pages/tables.astro index 40f842146..470535b82 100644 --- a/preview/pages/tables.astro +++ b/preview/pages/tables.astro @@ -5,9 +5,11 @@ import Progressbg from '@shared/components/cards/tables/Progressbg.astro' import Invoices from '@shared/components/cards/Invoices.astro' import AdvancedTable from '@ui/AdvancedTable.astro' import Card from '@ui/Card.astro' +import DocsLink from '@ui/DocsLink.astro' --- +
diff --git a/preview/pages/typography.astro b/preview/pages/typography.astro index a1ec98a38..b10265514 100644 --- a/preview/pages/typography.astro +++ b/preview/pages/typography.astro @@ -1,8 +1,10 @@ --- import DefaultLayout from '@shared/layouts/DefaultLayout.astro' +import DocsLink from '@ui/DocsLink.astro' --- +
diff --git a/preview/pages/wysiwyg.astro b/preview/pages/wysiwyg.astro index 1d3f9f693..879fc6003 100644 --- a/preview/pages/wysiwyg.astro +++ b/preview/pages/wysiwyg.astro @@ -4,9 +4,11 @@ import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import Wysiwyg from '@ui/Wysiwyg.astro' import FormGroup from '@ui/FormGroup.astro' +import DocsLink from '@ui/DocsLink.astro' --- +