- {/* equivalent of ui/badge.html color="primary" light=true */}
Added in {addedIn}
)
@@ -243,8 +243,7 @@ const docsLinks = docs.links as DocsLink[];
Hello World
Lorem ipsum[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Subscript works as well!
Second level
Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
- In fermentum leo eu lectus mollis, quis dictum mi aliquet.
- Morbi eu nulla lobortis, lobortis est in, fringilla felis.
- Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
- Ut non enim metus.
diff --git a/preview/astro.config.mjs b/preview/astro.config.mjs
index cff5a5141..be8fbdb74 100644
--- a/preview/astro.config.mjs
+++ b/preview/astro.config.mjs
@@ -1,120 +1,112 @@
// @ts-check
-import { defineConfig } from 'astro/config'
-import mdx from '@astrojs/mdx'
-import { satteri } from '@astrojs/markdown-satteri'
-import beautify from 'js-beautify'
-import { execFileSync } from 'node:child_process'
-import { devNull } from 'node:os'
-import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import { satteri } from '@astrojs/markdown-satteri';
+import beautify from 'js-beautify';
+import { execFileSync } from 'node:child_process';
+import { devNull } from 'node:os';
+import { fileURLToPath } from 'node:url';
/**
- * Equivalent of the Eleventy "html-prettify" step (@tabler/preview): the
- * generated HTML is the product (users copy it 1:1), so after the build we
- * format it with prettier per .prettierrc.
+ * After build, format page HTML with prettier (users copy it 1:1).
* @returns {import('astro').AstroIntegration}
*/
function prettifyHtml() {
- return {
- name: 'prettify-html',
- hooks: {
- 'astro:build:done': async ({ dir, logger }) => {
- const outDir = fileURLToPath(dir)
- // dist/preview/ and dist/dist/ are copy-assets.mjs's copies of public/{preview,dist}
- // (demo css/js and @tabler/core's dist, including vendored libs) — not pages, and
- // some vendored libs ship their own malformed docs/*.html that trips the parser below.
- /** @param {string} file */
- const isVendorCopy = (file) => file.includes(`${outDir}preview/`) || file.includes(`${outDir}dist/`)
- // Astro appends "overflow-x: auto" to the shiki style — the
- // Eleventy pipeline doesn't have it and HTML is the product: restore 1:1.
- const { globSync } = await import('node:fs')
- const { readFileSync, writeFileSync } = await import('node:fs')
- for (const file of globSync(`${outDir}**/*.html`, { exclude: isVendorCopy })) {
- const content = readFileSync(file, 'utf8')
- const cleaned = content.replaceAll('; overflow-x: auto;', '')
- if (cleaned !== content) writeFileSync(file, cleaned)
- }
- execFileSync(
- 'npx',
- [
- 'prettier',
- '--write',
- '--parser',
- 'html',
- // Prettier's default ignore-path is [.gitignore, .prettierignore], and both
- // list "dist" (needed elsewhere so normal lint/format passes skip build
- // output) — that silently no-ops this pass on the very directory it targets.
- // Point at devNull to opt this one deliberate pass out of those ignores.
- '--ignore-path',
- devNull,
- `${outDir}**/*.html`,
- `!${outDir}preview/**`,
- `!${outDir}dist/**`,
- ],
- { stdio: 'inherit' },
- )
- logger.info('HTML formatted with prettier')
- },
- },
- }
+ return {
+ name: 'prettify-html',
+ hooks: {
+ 'astro:build:done': async ({ dir, logger }) => {
+ const outDir = fileURLToPath(dir);
+ // dist/preview/ and dist/dist/ are copy-assets.mjs's copies of public/{preview,dist}
+ // (demo css/js and @tabler/core's dist, including vendored libs) — not pages, and
+ // some vendored libs ship their own malformed docs/*.html that trips the parser below.
+ /** @param {string} file */
+ const isVendorCopy = (file) => file.includes(`${outDir}preview/`) || file.includes(`${outDir}dist/`);
+ // Strip Astro's extra "overflow-x: auto" on shiki styles.
+ const { globSync } = await import('node:fs');
+ const { readFileSync, writeFileSync } = await import('node:fs');
+ for (const file of globSync(`${outDir}**/*.html`, { exclude: isVendorCopy })) {
+ const content = readFileSync(file, 'utf8');
+ const cleaned = content.replaceAll('; overflow-x: auto;', '');
+ if (cleaned !== content) writeFileSync(file, cleaned);
+ }
+ execFileSync(
+ 'npx',
+ [
+ 'prettier',
+ '--write',
+ '--parser',
+ 'html',
+ // Prettier's default ignore-path is [.gitignore, .prettierignore], and both
+ // list "dist" (needed elsewhere so normal lint/format passes skip build
+ // output) — that silently no-ops this pass on the very directory it targets.
+ // Point at devNull to opt this one deliberate pass out of those ignores.
+ '--ignore-path',
+ devNull,
+ `${outDir}**/*.html`,
+ `!${outDir}preview/**`,
+ `!${outDir}dist/**`,
+ ],
+ { stdio: 'inherit' },
+ );
+ logger.info('HTML formatted with prettier');
+ },
+ },
+ };
}
// https://astro.build/config
export default defineConfig({
- // pages live at the package root (./pages) — all components/lib/data are
- // shared (see the @shared alias)
- srcDir: '.',
- server: {
- port: 3000,
- // bind on all interfaces so the dev server is reachable from Docker
- // port mappings and other devices on the local network
- host: true,
- },
- vite: {
- resolve: {
- alias: {
- // demo data lives in the monorepo's shared/data — single source of
- // truth shared with the Eleventy packages (no copies in src/data)
- '@data': fileURLToPath(new URL('../shared/data', import.meta.url)),
- // Astro components/lib shared with docs (single source of truth)
- '@shared': fileURLToPath(new URL('../shared', import.meta.url)),
- '@ui': fileURLToPath(new URL('../shared/ui', import.meta.url)),
- '@components': fileURLToPath(new URL('../shared/components', import.meta.url)),
- // this package's pages dir — used by @shared/lib/docs-children's glob
- '@pages': fileURLToPath(new URL('./pages', import.meta.url)),
- },
- },
- },
- build: {
- // emit sign-in.html instead of sign-in/index.html — matches the Eleventy
- // preview package layout, where the HTML files are the distributed product
- format: 'file',
- },
- // Do not collapse whitespace in the output — the HTML must stay readable
- // (like the Eleventy build); prettier finalizes formatting after the build.
- compressHTML: false,
- integrations: [mdx(), prettifyHtml()],
- markdown: {
- // markdown-it in Eleventy does not produce typographic quotes — neither do we
- processor: satteri({ features: { smartPunctuation: false } }),
- shikiConfig: {
- theme: 'github-dark',
- transformers: [
- {
- // The Eleventy docs pipeline beautifies html fences before highlighting
- preprocess(code) {
- if (this.options.lang === 'html') {
- return beautify.html(code, { indent_size: 2, wrap_line_length: 80 })
- }
- },
- // Eleventy docs emits raw shiki output: .
- // Astro adds its own astro-code class and data-language — restore the
- // exact markdown-it + shiki pipeline markup.
- pre(node) {
- node.properties.class = 'shiki github-dark'
- delete node.properties.dataLanguage
- },
- },
- ],
- },
- },
-})
+ // pages live at the package root (./pages) — all components/lib/data are
+ // shared (see the @shared alias)
+ srcDir: '.',
+ server: {
+ port: 3000,
+ // bind on all interfaces so the dev server is reachable from Docker
+ // port mappings and other devices on the local network
+ host: true,
+ },
+ vite: {
+ resolve: {
+ alias: {
+ // Demo data in shared/data (single source of truth).
+ '@data': fileURLToPath(new URL('../shared/data', import.meta.url)),
+ // Components/lib shared with docs.
+ '@shared': fileURLToPath(new URL('../shared', import.meta.url)),
+ '@ui': fileURLToPath(new URL('../shared/ui', import.meta.url)),
+ '@components': fileURLToPath(new URL('../shared/components', import.meta.url)),
+ // Used by @shared/lib/docs-children's glob.
+ '@pages': fileURLToPath(new URL('./pages', import.meta.url)),
+ },
+ },
+ },
+ build: {
+ // Emit sign-in.html instead of sign-in/index.html (HTML is the product).
+ format: 'file',
+ },
+ // Keep readable HTML; prettier formats after the build.
+ compressHTML: false,
+ integrations: [mdx(), prettifyHtml()],
+ markdown: {
+ // No typographic quote rewriting.
+ processor: satteri({ features: { smartPunctuation: false } }),
+ shikiConfig: {
+ theme: 'github-dark',
+ transformers: [
+ {
+ // Beautify html fences before highlighting.
+ preprocess(code) {
+ if (this.options.lang === 'html') {
+ return beautify.html(code, { indent_size: 2, wrap_line_length: 80 });
+ }
+ },
+ // Keep shiki classes only (drop Astro's astro-code / data-language).
+ pre(node) {
+ node.properties.class = 'shiki github-dark';
+ delete node.properties.dataLanguage;
+ },
+ },
+ ],
+ },
+ },
+});
diff --git a/preview/pages/2-step-verification-code.astro b/preview/pages/2-step-verification-code.astro
index 81d10d78b..735484d8a 100644
--- a/preview/pages/2-step-verification-code.astro
+++ b/preview/pages/2-step-verification-code.astro
@@ -1,79 +1,93 @@
---
-import FormFooter from '@ui/FormFooter.astro'
-import SingleLayout from '@shared/layouts/SingleLayout.astro'
-import Button from '@ui/Button.astro'
-import ButtonList from '@ui/ButtonList.astro'
+import FormFooter from '@ui/FormFooter.astro';
+import SingleLayout from '@shared/layouts/SingleLayout.astro';
+import Button from '@ui/Button.astro';
+import ButtonList from '@ui/ButtonList.astro';
+import CaptureScript from '@shared/components/CaptureScript.astro';
---
-
-
-
-
+ input.addEventListener('keydown', (e) => {
+ const target = e.target;
+ // If the input field is empty and Backspace is pressed, and there is a previous input field, focus it
+ if (target.value.length === 0 && e.key === 'Backspace' && i > 0) {
+ inputs[i - 1].focus();
+ }
+ });
+ });
+
+
+
-
- It may take a minute to receive your code. Haven't received it?
Resend a new code.
-
+ It may take a minute to receive your code. Haven't received it?
Resend a new code.
+
-
-
-
-
-
-
-
-
Heading 1
- Heading 2
- Heading 3
- Heading 4
- Heading 5
- Heading 6
-
-
-
This is a lead paragraph with larger text.
-
- This is a regular paragraph with bold text, italic text, and
- underlined text.
-
-
This is small muted text.
-
Primary text color
-
Success text color
-
Danger text color
-
-
-
+
+
+
+
+
+
+
+
+
+
Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+
+
This is a lead paragraph with larger text.
+
This is a regular paragraph with bold text, italic text, and
+ underlined text.
+
This is small muted text.
+
Primary text color
+
Success text color
+
Danger text color
+
+
+
-
-
-
-
-
-
-
-
Standard Buttons
-
-
-
-
-
-
-
-
-
-
-
-
Button Sizes
-
-
-
-
-
+
+
+
+
+
+
+
+
Standard Buttons
+
+
+
+
+
+
+
+
+
+
+
+
Button Sizes
+
+
+
+
+
- Icon Buttons
-
-
-
-
-
-
-
-
+
Icon Buttons
+
+
+
+
+
+
+
+
-
-
-
-
-
- This is a simple card with header and body content.
-
-
-
+
+
+
+
+
+ This is a simple card with header and body content.
+
+
+
-
-
-
-
- This card includes a footer section.
-
-
-
-
-
-
+
+
+
+
+ This card includes a footer section.
+
+
+
+
+
+
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
-
-
+
+
-
-
-
-
-
-
-
-
Tabs
-
-
-
+
+
+
+
+
+
+
+
Tabs
+
+
+
-
Pills Navigation
-
-
-
+
Pills Navigation
+
+
+
-
Breadcrumb
-
-
-
-
Pagination
- {
- /* active-item="2" is a STRING in Liquid; `i == "2"` never matches the
- integer index, so no page renders active — reproduced by passing a string. */
- }
-
+
Breadcrumb
+
+
+
+
Pagination
+ {/* activeItem="2" is a string — strict equality never matches integer index, so no page is active */}
+
-
Pagination with Text
-
-
-
-
+
Pagination with Text
+
+
+
+
-
-
-
-
-
- Unordered List
-
- - First item
- - Second item
- - Third item
-
+
+
+
+
+
+ Unordered List
+
+ - First item
+ - Second item
+ - Third item
+
- Ordered List
-
- - First item
- - Second item
- - Third item
-
-
-
-
Ordered List
+
+ - First item
+ - Second item
+ - Third item
+
+
+
+
-
-
-
-
-
-
-
-
-
- | Name |
- Email |
- Status |
-
-
-
-
- | John Doe |
- john@example.com |
- |
-
-
- | Jane Smith |
- jane@example.com |
- |
-
-
- | Bob Johnson |
- bob@example.com |
- |
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ | Name |
+ Email |
+ Status |
+
+
+
+
+ | John Doe |
+ john@example.com |
+ |
+
+
+ | Jane Smith |
+ jane@example.com |
+ |
+
+
+ | Bob Johnson |
+ bob@example.com |
+ |
+
+
+
+
+
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
Spinners
-
+
+
+
+
+
+
+
+
+
Spinners
+
-
Rating
-
-
-
+
Rating
+
+
+
-
Steps
-
-
-
-
-
-
-
-
-
+
Steps
+
+
+
+
+
+
+
+
+
-
-
-
-
-
- Status Dots
-
-
-
-
-
-
+
+
+
+
+
+ Status Dots
+
+
+
+
+
+
- Toast Notifications
-
-
-
-
-
-
Toast Notifications
+
+
+
+
+
+
-
-
-
-
-
- Input with Icons
-
-
-
-
-
-
+
+
+
+
+
+ Input with Icons
+
+
+
+
+
+
- Input Groups
-
-
-
-
-
-
+ Input Groups
+
+
+
+
+
+
- Range Slider
-
-
-
-
-
-
Range Slider
+
+
+
+
+
+
-
-
-
-
-
- Tags
-
-
-
-
-
+
+
+
+
+
+ Tags
+
+
+
+
+
- Ribbons
-
-
-
-
-
-
-
-
-
Ribbons
+
+
+
+
+
+
+
+
+
-
-
-
-
-
- Flags
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ Flags
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Payment Icons
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Payment Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
This is a sample modal dialog. You can put any content here.
-
-
-
-
-
+
+
+
+
+
This is a sample modal dialog. You can put any content here.
+
+
+
+
+
-
-
-
-
-
Success!
-
Your action was completed successfully.
-
-
-
-
-
-
+
+
+
+
+
Success!
+
Your action was completed successfully.
+
+
+
+
+
+
-
-
-
-
-
- Basic Button Group
-
-
-
-
-
+
+
+
+
+
+ Basic Button Group
+
+
+
+
+
- Button Toolbar
-
-
-
-
-
-
-
-
-
-
-
+ Button Toolbar
+
+
+
+
+
+
+
+
+
+
+
- Vertical Button Group
-
-
-
-
-
-
-
-
Vertical Button Group
+
+
+
+
+
+
+
+
-
-
-
-
-
- Basic Segmented
-
-
-
+
+
+
+
+
+ Basic Segmented
+
+
+
- With Icons
-
-
-
+ With Icons
+
+
+
- With Emojis
-
-
-
+ With Emojis
+
+
+
- With Icons and Text
-
-
-
-
-
-
With Icons and Text
+
+
+
+
+
+
-
-
-
-
-
-
-
-
Basic Collapse
-
-
-
This is collapsed content that can be toggled. It's hidden by default and shown when the button is clicked.
-
-
-
-
Multiple Targets
-
-
-
-
-
-
First collapsible content.
-
-
-
Second collapsible content.
-
-
-
-
+
+
+
+
+
+
+
+
Basic Collapse
+
+
+
+ This is collapsed content that can be toggled. It's hidden by default and shown when the button is clicked.
+
+
+
+
+
Multiple Targets
+
+
+
+
+
+
+ First collapsible content.
+
+
+
+
+ Second collapsible content.
+
+
+
+
+
-
-
-
-
-
-
-
-
Tooltips
-
-
-
-
-
-
-
-
-
Popovers
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Tooltips
+
+
+
+
+
+
+
+
+
Popovers
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
- Home
-
-
-
- Active item
-
-
-
- Settings
-
-
-
- Profile
-
-
-
- Disabled item
-
-
-
-
-
+
+
+
+
+
+
+
+
+ Home
+
+
+
+ Active item
+
+
+
+ Settings
+
+
+
+ Profile
+
+
+
+ Disabled item
+
+
+
+
+
-
-
-
-
-
- Blockquote
-
- This is a blockquote example with some sample text to demonstrate the styling.
-
-
+
+
+
+
+
+ Blockquote
+
+ This is a blockquote example with some sample text to demonstrate the styling.
+
+
- Code Block
-
+ Code Block
+
- Inline Elements
- This paragraph contains inline code, Ctrl + S keyboard shortcut, and highlighted text.
-
-
-
+
Inline Elements
+
This paragraph contains inline code, Ctrl + S keyboard shortcut, and highlighted text.
+
+
+
-
-
-
- Default avatar
-
-
-
-
-
-
-
- Avatar with icon
+
+
+
+
+ Default avatar
+
+
+
+
+
+
+
+ Avatar with icon
-
- {iconIcons.map((icon) =>
)}
-
-
-
-
-
- Avatar with icon
+
+ {iconIcons.map((icon) =>
)}
+
+
+
+
+
+ Avatar with icon
-
- {colors.map((color) =>
)}
-
-
-
-
-
- Simple avatar
-
- {people8.map((person) =>
)}
-
-
-
-
-
- Avatar placeholder
-
- {people8.map((person) =>
)}
-
-
-
-
-
- Avatar shapes
-
-
-
-
-
-
-
- Avatar sizes
-
-
-
- {sizes.map((size) =>
)}
-
-
-
-
- {sizes.map((size) =>
)}
-
-
-
-
-
-
-
- Avatar lists
-
- {
- listSizes.map((size) => (
- <>
-
-
- {people5.map((person) => (
-
- ))}
-
-
-
-
-
- {people5.map((person) => (
-
- ))}
-
-
-
-
- ))
- }
-
-
-
-
-
- Avatar placeholder
- {uploadSizes.map((size) => )}
-
-
-
-
-
-
- Avatar statuses
- {statusColors.map((color, i) => )}
-
-
-
-
-
-
- Avatar brands
- {brands.map((brand, i) => )}
-
-
-
-
+ {colors.map((color) =>
)}
+
+
+
+
+
+ Simple avatar
+
+ {people8.map((person) =>
)}
+
+
+
+
+
+ Avatar placeholder
+
+ {people8.map((person) =>
)}
+
+
+
+
+
+ Avatar shapes
+
+
+
+
+
+
+
+ Avatar sizes
+
+
+
+ {sizes.map((size) =>
)}
+
+
+
+
+ {sizes.map((size) =>
)}
+
+
+
+
+
+
+
+ Avatar lists
+
+ {
+ listSizes.map((size) => (
+ <>
+
+
+ {people5.map((person) => (
+
+ ))}
+
+
+
+
+
+ {people5.map((person) => (
+
+ ))}
+
+
+
+
+ ))
+ }
+
+
+
+
+
+ Avatar placeholder
+ {uploadSizes.map((size) => )}
+
+
+
+
+
+
+ Avatar statuses
+ {statusColors.map((color, i) => )}
+
+
+
+
+
+
+ Avatar brands
+ {brands.map((brand, i) => )}
+
+
+
+
-
-
-
-
-
- Example heading New
- Example heading New
- Example heading New
- Example heading New
- Example heading New
- Example heading New
-
-
-
-
-
-
- Badge sizes
+
+
+
+
+
+
+ Example heading New
+ Example heading New
+ Example heading New
+ Example heading New
+ Example heading New
+ Example heading New
+
+
+
+
+
+
+ Badge sizes
-
- {
- sizes.map((size) => (
-
- Default
-
- Left icon
-
-
- Right icon
-
-
-
-
-
-
- ))
- }
-
-
-
-
-
-
-
- Positioned badges
+
+ {
+ sizes.map((size) => (
+
+ Default
+
+ Left icon
+
+
+ Right icon
+
+
+
+
+
+ ))
+ }
+
+
+
+
+
+
+
+ Positioned badges
-
-
+
+
-
+
-
+
-
+
-
+
-
-
-
-
-
-
-
-
-
-
-
-
- Basic badges
-
- {colors.map((color) => {ucFirst(color)})}
-
-
-
-
-
-
-
- Light badges
-
- {colors.map((color) => {ucFirst(color)})}
-
-
-
-
-
-
-
- Outline badges
-
- {colors.map((color) => {ucFirst(color)})}
-
-
-
-
-
-
-
- Badges with icons
-
- {
- colors.map((color) => (
-
- {' '}
- {ucFirst(color)}{' '}
-
- ))
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- colors.map((color, index) => (
-
- ))
- }
-
-
-
-
-
-
-
-
- {
- colors.map((color, index) => (
-
- ))
- }
-
-
-
-
-
-
-
-
- {
- colors.map((color) => (
-
- ))
- }
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ Basic badges
+
+ {colors.map((color) => {ucFirst(color)})}
+
+
+
+
+
+
+
+ Light badges
+
+ {colors.map((color) => {ucFirst(color)})}
+
+
+
+
+
+
+
+ Outline badges
+
+ {colors.map((color) => {ucFirst(color)})}
+
+
+
+
+
+
+
+ Badges with icons
+
+ {
+ colors.map((color) => (
+
+ {' '}
+ {ucFirst(color)}{' '}
+
+ ))
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ colors.map((color, index) => (
+
+ ))
+ }
+
+
+
+
+
+
+
+
+ {
+ colors.map((color, index) => (
+
+ ))
+ }
+
+
+
+
+
+
+
+
+ {
+ colors.map((color) => (
+
+ ))
+ }
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- actions.map((action) => (
-
-
-
- ))
- }
-
-
-
-
-
-
-
-
- {
- sizes.map((size) => (
-
-
-
-
-
-
- ))
- }
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ {
+ socialColors.map(([name, app]) => (
+ {app.icon && }
+ ))
+ }
+
+
+
+
+
+
+
+
+
+
+ {
+ actions.map((action) => (
+
+
+
+ ))
+ }
+
+
+
+
+
+
+
+
+ {
+ sizes.map((size) => (
+
+
+
+
+
+
+ ))
+ }
+
+
+
+
+
- {
- colors.map((color, index) => (
-
- ))
- }
-
+ {
+ colors.map((color, index) => (
+
+ ))
+ }
+
-
-
-
-
- {
- colors.map(([name, color]) => (
-
-
-
-
- {color.title}
-
- {color.hex}
-
-
-
- ))
- }
-
-
-
-
-
-
- {
- lightColors.map(([name, color]) => (
-
-
-
-
- {color.title}
-
- {color.hex}
-
-
-
- ))
- }
-
-
-
-
-
-
- {
- grayColors.map(([name, color]) => (
-
-
-
-
- {color.title}
-
- {color.hex}
-
-
-
- ))
- }
-
-
-
-
-
-
- {
- socialColors.map(([name, color]) => (
-
-
-
-
- {color.title}
-
- {color.hex}
-
-
-
- ))
- }
-
-
-
-
-
-
-
-
-
-
-
- {gradientColors.map((color) =>
)}
-
-
-
-
- {gradientColors.map((color) =>
)}
-
-
-
-
-
-
-
+
+
+
+
+ {
+ colors.map(([name, color]) => (
+
+
+
+
+ {color.title}
+
+ {color.hex}
+
+
+
+ ))
+ }
+
+
+
+
+
+
+ {
+ lightColors.map(([name, color]) => (
+
+
+
+
+ {color.title}
+
+ {color.hex}
+
+
+
+ ))
+ }
+
+
+
+
+
+
+ {
+ grayColors.map(([name, color]) => (
+
+
+
+
+ {color.title}
+
+ {color.hex}
+
+
+
+ ))
+ }
+
+
+
+
+
+
+ {
+ socialColors.map(([name, color]) => (
+
+
+
+
+ {color.title}
+
+ {color.hex}
+
+
+
+ ))
+ }
+
+
+
+
+
+
+
+
+
+
+
+ {
+ gradientColors.map((color) => (
+
+ ))
+ }
+
+
+
+
+ {
+ gradientColors.map((color) => (
+
+ ))
+ }
+
+
+
+
+
+
+
-
-
-
-
-
-
-
- ${totalUsd}
- {btcBalance} {btc.symbol}
-
-
-
- Since last week
-
-
-
-
+
+
+
+
+
+
+
+
+
+ ${totalUsd}
+ {btcBalance} {btc.symbol}
+
+
+
+ Since last week
+
+
+
+
-
-
-
-
-
- {btc.price}
- {btc.price}
-
-
- Volume: {btc['volume-24h']}
-
-
-
-
+
+
+
+
+
+ {btc.price}
+ {btc.price}
+
+
+ Volume: {btc['volume-24h']}
+
+
+
+
-
-
-
-
-
- {ltcBtc}
- {ltc.price}
-
-
- Volume: {ltc['volume-24h'].replace('$', '')}
-
-
-
-
+
+
+
+
+
+ {ltcBtc}
+ {ltc.price}
+
+
+ Volume: {ltc['volume-24h'].replace('$', '')}
+
+
+
+
-
-
-
-
-
- {ethBtc}
- {eth.price}
-
-
- Volume: {eth['volume-24h'].replace('$', '')}
-
-
-
-
+
+
+
+
+
+ {ethBtc}
+ {eth.price}
+
+
+ Volume: {eth['volume-24h'].replace('$', '')}
+
+
+
+
-
-
-
-
-
- {xmrBtc}
- {xmr.price}
-
-
- Volume: {xmr['volume-24h'].replace('$', '')}
-
-
-
-
-
-
-
-
-
-
-
- Markets
-
-
-
-
-
-
-
- |
-
- |
- Coin |
- Price |
- Volume |
- Change |
-
-
-
- {
- markets.map((market) => (
-
- |
-
- |
- {market.coin} |
- {market.price} |
- {market.volume} |
-
-
- |
-
- ))
- }
-
-
-
-
+
+
+
+
+
+ {xmrBtc}
+ {xmr.price}
+
+
+ Volume: {xmr['volume-24h'].replace('$', '')}
+
+
+
+
+
+
+
+
+
+
+
+ Markets
+
+
+
+
+
+
+
+ |
+
+ |
+ Coin |
+ Price |
+ Volume |
+ Change |
+
+
+
+ {
+ markets.map((market) => (
+
+ |
+
+ |
+ {market.coin} |
+ {market.price} |
+ {market.volume} |
+
+
+ |
+
+ ))
+ }
+
+
+
+
-
-
-
- LTC/BTC
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Operations
-
-
-
-
+
+
+
+ LTC/BTC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
The final amount could change depending on current market conditions.
+
+
+
-
-
-
- Sell Orders
-
-
-
-
-
-
-
- | Price |
- BTC |
- Sum(BTC) |
-
-
-
- {
- orders.sell_orders.map((order) => (
-
- | {order.price} |
- {order.btc} |
- {order.sum} |
-
- ))
- }
-
-
-
-
+
+
+
+ Sell Orders
+
+
+
+
+
+
+
+ | Price |
+ BTC |
+ Sum(BTC) |
+
+
+
+ {
+ orders.sell_orders.map((order) => (
+
+ | {order.price} |
+ {order.btc} |
+ {order.sum} |
+
+ ))
+ }
+
+
+
+
-
-
-
- Buy Orders
-
-
-
-
-
-
-
- | Price |
- BTC |
- Sum(BTC) |
-
-
-
- {
- orders.buy_orders.map((order) => (
-
- | {order.price} |
- {order.btc} |
- {order.sum} |
-
- ))
- }
-
-
-
-
-
-
-
+
+
+ Buy Orders
+
+
+
+
+
+
+
+ | Price |
+ BTC |
+ Sum(BTC) |
+
+
+
+ {
+ orders.buy_orders.map((order) => (
+
+ | {order.price} |
+ {order.btc} |
+ {order.sum} |
+
+ ))
+ }
+
+
+
+
+
+
-
-
-
-
-
-
-
Tabler Emails
-
- {emailEntries.length} eye-catching, customizable and responsive email templates to improve your email communication. No coding skills needed.
-
-
-
-
-
-
-
-
-
- {
- emailEntries.map(([key, email]) => (
-
- ))
- }
-
-
-
+
+
+
+
+
+
+
Tabler Emails
+
+ {emailEntries.length} eye-catching, customizable and responsive email templates to improve your email communication. No coding skills needed.
+
+
+
+
+
+
+
+
+
+ {emailEntries.map(([key, email]) => (
+
+ ))}
+
+
+
-
-
-
-
-
-
-
-
![]()
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
![]()
+
+
+
-
-
-
-
-
-
-
-
+ emailModal.querySelector('[data-email-title]').textContent = title;
+ emailModal.querySelector('[data-email-description]').textContent = description;
+ emailModal.querySelector('[data-email-image]').src = image;
+ });
+ }
+
+
+
diff --git a/preview/pages/flags.astro b/preview/pages/flags.astro
index 288d1e5e1..d9ff9c47a 100644
--- a/preview/pages/flags.astro
+++ b/preview/pages/flags.astro
@@ -1,32 +1,37 @@
---
-import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
-import Card from '@ui/Card.astro'
-import CardHeader from '@ui/CardHeader.astro'
-import CardBody from '@ui/CardBody.astro'
-import flags from '@data/flags.json'
+import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
+import Card from '@ui/Card.astro';
+import CardHeader from '@ui/CardHeader.astro';
+import CardBody from '@ui/CardBody.astro';
+import flags from '@data/flags.json';
-// Liquid: {% for icon in (0..20) %}
{% endfor %} — 21 filler divs
-const fillers = Array.from({ length: 21 })
+// 21 filler divs for flexbox layout.
+const fillers = Array.from({ length: 21 });
---
-
-
- List of all flags
-
-
-
-
- {
- flags.map((country) => (
-
-
-
- ))
- }
- {fillers.map(() =>
)}
-
-
List of all flags
+
+
+
+
+ {
+ flags.map((country) => (
+
+
+
+ ))
+ }
+ {fillers.map(() =>
)}
+
+
diff --git a/preview/pages/gallery.astro b/preview/pages/gallery.astro
index 1f6aeb7da..6ca0db9a1 100644
--- a/preview/pages/gallery.astro
+++ b/preview/pages/gallery.astro
@@ -1,26 +1,32 @@
---
-import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
-import GalleryPhoto from '@shared/components/cards/GalleryPhoto.astro'
-import Pagination from '@ui/Pagination.astro'
-import photos from '@data/photos.json'
-import people from '@data/people.json'
+import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
+import GalleryPhoto from '@shared/components/cards/GalleryPhoto.astro';
+import Pagination from '@ui/Pagination.astro';
+import photos from '@data/photos.json';
+import people from '@data/people.json';
-// Liquid: photos | where: "horizontal", true — limit: 15; person = people[forloop.index0]
-const galleryPhotos = photos.filter((photo) => photo.horizontal).slice(0, 15)
+// Horizontal photos, limit 15; person = people[loop index].
+const galleryPhotos = photos.filter((photo) => photo.horizontal).slice(0, 15);
---
-
-
- {
- galleryPhotos.map((photo, index) => (
-
-
-
- ))
- }
-
+ {
+ galleryPhotos.map((photo, index) => (
+
+
+
+ ))
+ }
+
-
-
-
- Steps Progress
-
-
-
-
-
-
-
- Progress Background
-
-
-
-
-
-
-
- Progress Background Colors
-
-
-
-
-
-
-
- Progress Description
-
-
-
-
-
-
-
- Progress Description Sizes
-
-
-
-
-
+ document.getElementById('progress-animated-0')!.addEventListener('click', () => setWidth(0));
+ document.getElementById('progress-animated-add-10')!.addEventListener('click', () => setWidth(width + 10));
+ document.getElementById('progress-animated-minus-10')!.addEventListener('click', () => setWidth(width - 10));
+ document.getElementById('progress-animated-100')!.addEventListener('click', () => setWidth(100));
+
+
+
+
+
+
+
+
+
+
+ Steps Progress
+
+
+
+
+
+
+
+
+
+ Progress Background
+
+
+
+
+
+
+
+
+
+ Progress Background Colors
+
+
+
+
+
+
+
+
+
+ Progress Description
+
+
+
+
+
+
+
+
+
+ Progress Description Sizes
+
+
+
+
+
+
diff --git a/preview/pages/screenshot.astro b/preview/pages/screenshot.astro
index d7afdcf4a..74fc6391a 100644
--- a/preview/pages/screenshot.astro
+++ b/preview/pages/screenshot.astro
@@ -1,78 +1,76 @@
---
-// The Liquid `{% for color in site.colors %}` swatches map to site.themeColors
-// (blue…cyan), matching the reference bg-gradient-from-{color} output.
-// The large `{% comment %}…{% endcomment %}` prose/nav-segmented block in the
-// source is a Liquid comment (not rendered) — intentionally omitted.
-import BaseLayout from '@shared/layouts/BaseLayout.astro'
-import NavbarLogo from '@shared/components/navbar/NavbarLogo.astro'
-import { site } from '@shared/lib/site'
+// Color swatches use site.themeColors (blue…cyan).
+// Large prose/nav-segmented block from source template omitted (was commented out).
+import BaseLayout from '@shared/layouts/BaseLayout.astro';
+import NavbarLogo from '@shared/components/navbar/NavbarLogo.astro';
+import { site } from '@shared/lib/site';
---
-
+ .avatar-2 {
+ background-image: url(/static/avatars/032f.jpg);
+ }
+
-
-
-
-
-
-
-
- {
- site.themeColors.map((color) => (
-
- ))
- }
-
-
+
+
+
+
+
+
+
+ {
+ site.themeColors.map((color) => (
+
+ ))
+ }
+
+
-
-
+
+
-
-
+
+
diff --git a/preview/pages/sign-in-cover.astro b/preview/pages/sign-in-cover.astro
index 607e08188..34b80de76 100644
--- a/preview/pages/sign-in-cover.astro
+++ b/preview/pages/sign-in-cover.astro
@@ -1,32 +1,31 @@
---
-// Photo id=11 → the 12th entry of the unfiltered photos list (Liquid
-// filtered-photos[11]); no `horizontal` filter is applied here.
-import BaseLayout from '@shared/layouts/BaseLayout.astro'
-import NavbarLogo from '@shared/components/navbar/NavbarLogo.astro'
-import SignInForm from '@shared/components/cards/SignInForm.astro'
-import Photo from '@ui/Photo.astro'
-import photos from '@data/photos.json'
+// Photo id=11 → 12th entry of the unfiltered photos list; no horizontal filter.
+import BaseLayout from '@shared/layouts/BaseLayout.astro';
+import NavbarLogo from '@shared/components/navbar/NavbarLogo.astro';
+import SignInForm from '@shared/components/cards/SignInForm.astro';
+import Photo from '@ui/Photo.astro';
+import photos from '@data/photos.json';
---
-
-
-
-
-
-
+
+
+
+
+
+
-
Login to your account
+
Login to your account
-
+
-
- Don't have account yet?
Sign up
-
-
-
-
-
+
+ Don't have account yet?
Sign up
+
+
+
+
+
diff --git a/preview/pages/sign-in-illustration.astro b/preview/pages/sign-in-illustration.astro
index 2171d90bd..f2b46acb9 100644
--- a/preview/pages/sign-in-illustration.astro
+++ b/preview/pages/sign-in-illustration.astro
@@ -4,8 +4,7 @@ import NavbarLogo from '@shared/components/navbar/NavbarLogo.astro'
import SignInCard from '@shared/components/cards/SignInCard.astro'
import Illustration from '@ui/Illustration.astro'
-// Liquid passes show-header="1" to cards/sign-in.html, but the include renders
-// the header unconditionally — SignInCard.astro mirrors that (no prop needed).
+// show-header prop ignored — SignInCard renders header unconditionally.
---
diff --git a/preview/pages/sign-in-link.astro b/preview/pages/sign-in-link.astro
index 90d8a45c0..c2d3f92f0 100644
--- a/preview/pages/sign-in-link.astro
+++ b/preview/pages/sign-in-link.astro
@@ -1,25 +1,24 @@
---
-import SingleLayout from '@shared/layouts/SingleLayout.astro'
+import SingleLayout from '@shared/layouts/SingleLayout.astro';
-// TODO: Liquid uses {{ site.email }} — add `email` to src/lib/site.ts once it is
-// safe to touch shared files (kept local here to avoid cross-agent conflicts).
-const siteEmail = 'support@tabler.io'
+// TODO: add `email` to src/lib/site.ts — kept local here to avoid cross-agent conflicts.
+const siteEmail = 'support@tabler.io';
---
-
-
-
Check your inbox
+
+
+
Check your inbox
-
- We've sent you a magic link to {siteEmail}.
- Please click the link to confirm your address.
-
-
+
+ We've sent you a magic link to {siteEmail}.
+ Please click the link to confirm your address.
+
+
-
- Can't see the email? Please check the spam folder.
- Wrong email? Please
re-enter your address.
-
-
+
+ Can't see the email? Please check the spam folder.
+ Wrong email? Please
re-enter your address.
+
+
-
-
-
- Confirm transfer
- Please confirm the transfer of funds by signing below.
-
- I agree that the signature and initials will be the electronic representation of my signature and initials for all purposes when I (or my agent) use them on documents, including legally binding contracts - just the same as a pen-and-paper signature or initial.
+
+
+
+
+
+ Confirm transfer
+ Please confirm the transfer of funds by signing below.
+
+
+ I agree that the signature and initials will be the electronic representation of my signature and initials for all purposes when I (or my agent) use
+ them on documents, including legally binding contracts - just the same as a pen-and-paper signature or initial.
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
-
-
- Advanced demo
+
+
+
+
+
+ Advanced demo
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
-
-
Save your signature
-
+
+
+
+
+
+
Save your signature
+
-
I agree that the signature and initials will be the electronic representation of my signature and initials for all purposes when I (or my agent) use them on documents, including legally binding contracts - just the same as a pen-and-paper signature or initial.
-
-
-
-
-
+
+ I agree that the signature and initials will be the electronic representation of my signature and initials for all
+ purposes when I (or my agent) use
+ them on documents, including legally binding contracts - just the same as a pen-and-paper signature or initial.
+
+
+
+
+
+
-
-
- {
- tiles.map((tile) => (
-
-
-
-
-
-
-
-
-
{tile.title}
-
{tile.description}
-
-
-
-
-
-
- ))
- }
-
-
-
-
-
- Sign in with social media
-
-
-
- {
- socialList.map((social) => (
-
- ))
- }
-
-
-
-
+
+
+
+ {
+ tiles.map((tile) => (
+
+
+
+
+
+
+
+
+
{tile.title}
+
{tile.description}
+
+
+
+
+
+
+ ))
+ }
+
+
+
+
+
+ Sign in with social media
+
+
+
+ {
+ socialList.map((social) => (
+
+ ))
+ }
+
+
+
+
-
-
-
- List of all social media icons
-
-
-
-
- {
- socialList.map((social) => (
-
-
-
- ))
- }
- {fillers.map(() =>
)}
-
-
-
-
+
+
+
+ List of all social media icons
+
+
+
+
+ {
+ socialList.map((social) => (
+
+
+
+ ))
+ }
+ {fillers.map(() =>
)}
+
+
+
+
-
-
-
- Default tags
-
- {range(1, 14).map((i) => )}
-
-
-
-
+
+
+
+
+ Default tags
+
+ {range(1, 14).map((i) => )}
+
+
+
+
-
-
-
- Tags with flag
-
- {flags9.map((country) => )}
-
-
-
-
+
+
+
+ Tags with flag
+
+ {flags9.map((country) => )}
+
+
+
+
-
-
-
- Tags with icon
-
- {tagIcons.map((icon) => )}
-
-
-
-
+
+
+
+ Tags with icon
+
+ {tagIcons.map((icon) => )}
+
+
+
+
-
-
-
- Tags with avatar
-
- {people8.map((person) => )}
-
-
-
-
+
+
+
+ Tags with avatar
+
+ {people8.map((person) => )}
+
+
+
+
-
-
-
- Tags with status
-
- {colors.map((color) => )}
-
-
-
-
+
+
+
+ Tags with status
+
+ {colors.map((color) => )}
+
+
+
+
-
-
-
- Tags with legend
-
- {colors.map((color) => )}
-
-
-
-
+
+
+
+ Tags with legend
+
+ {colors.map((color) => )}
+
+
+
+
-
-
-
- Default tags
-
- {range(1, 6).map((i) => )}
- {range(7, 12).map((i) => )}
-
-
-
-
+
+
+
+ Default tags
+
+ {range(1, 6).map((i) => )}
+ {range(7, 12).map((i) => )}
+
+
+
+
-
-
-
- Default tags
-
- {range(1, 12).map((i) => )}
-
-
-
-
-
+
+
+
+ Default tags
+
+ {range(1, 12).map((i) => )}
+
+
+
+
+
-
- {
- columns.map((section) => (
-
- ))
- }
-
-
+
+ {
+ columns.map((section) => (
+
+ ))
+ }
+
+
-
-
+
+
+
-
-
+
+
+
diff --git a/preview/pages/terms-of-service.astro b/preview/pages/terms-of-service.astro
index 738a8d389..10f9a32cc 100644
--- a/preview/pages/terms-of-service.astro
+++ b/preview/pages/terms-of-service.astro
@@ -3,16 +3,7 @@ import SingleLayout from '@shared/layouts/SingleLayout.astro'
import CardTitle from '@ui/CardTitle.astro'
import Prose from '@ui/Prose.astro'
-// Liquid renders shared/includes/terms-of-service.md via `renderContent: "md"`
-// (markdown-it). The rendered HTML below is inlined verbatim from the reference
-// build to guarantee a 1:1 DOM match — Astro's markdown pipeline (remark +
-// smartypants) would produce different quote characters and list structure.
-// TODO: source of truth remains shared/includes/terms-of-service.md; regenerate
-// this block if the markdown changes.
-//
-// The card title is empty on purpose: the Liquid template prints {{ page.title }},
-// which is Eleventy's `page` object (no `title` property) — the reference output
-// is an empty .
+// Card title is empty on purpose.
---
diff --git a/preview/pages/text-features.astro b/preview/pages/text-features.astro
index 54c52cf80..daaf40131 100644
--- a/preview/pages/text-features.astro
+++ b/preview/pages/text-features.astro
@@ -1,98 +1,83 @@
---
-// The right column renders headings h1..h6 via a Liquid {% for i in (1..6) %}
-// loop → dynamic tag name here. {{ site.homepage }} → @data/site.json homepage.
-import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
-import Prose from '@ui/Prose.astro'
-import siteData from '@data/site.json'
+// Right column renders headings h1..h6 with dynamic tag names. Homepage URL from site.json.
+import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
+import Prose from '@ui/Prose.astro';
+import siteData from '@data/site.json';
-const homepage = siteData.homepage
+const homepage = siteData.homepage;
---
-
-
-
-
-
- Text features
+
+
+
+
+
+ Text features
- HTML provides various tags to format text and add meaning. For example, important words can be highlighted, and emphasized text can be italicized.
+ HTML provides various tags to format text and add meaning. For example, important words can be highlighted, and emphasized text can be italicized.
- If you want to visit an interesting website, check out this page.
+ If you want to visit an interesting website, check out this page.
- The term HTML is widely used in web development.
+ The term HTML is widely used in web development.
- Previously, the instruction said "Do not include images." However, "You may now add images."
+ Previously, the instruction said "Do not include images." However, "You may now add images."
- "The best way to predict the future is to create it." – Peter Drucker
+ "The best way to predict the future is to create it." – Peter Drucker
- Sometimes, highlighting important text can improve readability.
+ Sometimes, highlighting important text can improve readability.
- In JavaScript, you can log messages using the following code: console.log('Hello, world!');
+ In JavaScript, you can log messages using the following code: console.log('Hello, world!');
- To copy text on Windows, use Ctrl + C. On macOS, use Cmd + C.
+ To copy text on Windows, use Ctrl + C. On macOS, use Cmd + C.
- Water is written chemically as H2O, while Einstein’s famous equation is E = mc2.
+ Water is written chemically as H2O, while Einstein’s famous equation is E = mc2.
- Many people mistakenly spell "recieve" instead of "receive".
+ Many people mistakenly spell "recieve" instead of "receive".
- The correct way to write the date format is "February 12, 2026", not "12th February, 2026" in American English.
+ The correct way to write the date format is "February 12, 2026", not "12th February, 2026" in American English.
-
- If you need select text, you can use your mouse or keyboard. To select text using your mouse, click and drag the cursor over the text you want to highlight.
-
+
+ If you need select text, you can use your mouse or keyboard. To select text using your mouse, click and drag the cursor over the text you want to highlight.
+
- Disclaimer: This text is for demonstration purposes only.
-
-
-
-
-
-
-
-
- {
- [1, 2, 3, 4, 5, 6].map((i) => {
- const Heading = `h${i}`
- return (
-
- Heading {i} by{' '}
-
- <>
-
- @
-
- JohnDoe
-
-
- )
- })
- }
+ Disclaimer: This text is for demonstration purposes only.
+
+
+
+
+
+
+
+
+ {
+ [1, 2, 3, 4, 5, 6].map((i) => {
+ const Heading = `h${i}`;
+ return (
+
+ Heading {i} by @JohnDoe
+
+ );
+ })
+ }
-
- Tabler is a modern UI framework which provide developers with a lot of pre-build components and customizable options. It is
- build on Bootstrap, making it easy to integrate into existing projects. The design is clean, responsive, and accessible, ensuring that user can navigate through interface easily. Tabler also support all modern browsers, but some features may not work properly on Internet Explorer. With
- it's lightweight structure and optimized performance, Tabler helps developers create stunning web applications faster.
-
+
+ Tabler is a modern UI framework which provide developers with a lot of pre-build components and customizable options. It is
+ build on Bootstrap, making it easy to integrate into existing projects. The design is clean, responsive, and accessible, ensuring that user can navigate
+ through interface easily. Tabler also support all modern browsers, but some features may not work properly on Internet Explorer. With
+ it's lightweight structure and optimized performance, Tabler helps developers create stunning web applications faster.
+
-
- Hey @JohnDoe, have you seen the latest updates on #WebDevelopment16? @JaneSmith just shared an interesting article about Messenger and Netflix!
-
+ Hey @JohnDoe, have you seen the latest updates on #WebDevelopment16? @JaneSmith just shared an interesting article about Messenger and Netflix!
-
- The sky is #066fd1, the grass is rgb(47, 179, 68), fire trucks are often red, oranges are hsl(24deg, 94.49%, 49.8%). Some flowers are hwb(288.35deg, 24.31%, 21.18%).
-
+
+ The sky is #066fd1, the grass is rgb(47, 179, 68), fire trucks are often red, oranges are hsl(24deg, 94.49%, 49.8%). Some flowers are hwb(288.35deg, 24.31%, 21.18%).
+
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
- Click the "Start Tour" button to begin an interactive tour of this page. The tour will guide you through different elements and features.
-
-
-
-
-
-
-
- This is the first card in our tour. It demonstrates how Driver.js highlights elements on the page.
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ Click the "Start Tour" button to begin an interactive tour of this page.
+ The tour will guide you through different elements and features.
+
+
+
+
+
+
+
+
+ This is the first card in our tour. It demonstrates how Driver.js highlights elements on the page.
+
+
+
+
+
+
+
-
-
-
-
-
- This is a full-width card that demonstrates how the tour works with larger elements.
-
-
-
-
- | Name |
- Status |
- Role |
- |
-
-
-
-
- | John Doe |
- |
- Developer |
-
-
- |
-
-
- | Jane Smith |
- |
- Designer |
-
-
- |
-
-
-
-
-
+
+
+
+
+
+ This is a full-width card that demonstrates how the tour works with larger elements.
+
+
+
+
+ | Name |
+ Status |
+ Role |
+ |
+
+
+
+
+ | John Doe |
+ |
+ Developer |
+
+
+ |
+
+
+ | Jane Smith |
+ |
+ Designer |
+
+
+ |
+
+
+
+
+
-
-
-
-
-
-
- Settings
- Configure your application settings here.
-
-
-
+
+
+
+
+
+
+ Settings
+ Configure your application settings here.
+
+
+
-
-
-
-
-
-
- Users
- Manage your team members and permissions.
-
-
-
+
+
+
+
+
+
+ Users
+ Manage your team members and permissions.
+
+
+
-
-
-
-
-
-
- Analytics
- View your application statistics and reports.
-
-
-
-
+
+
+
+
+
+ Analytics
+ View your application statistics and reports.
+
+
+
- {
- users.map((person, idx) => {
- const index = idx + 1
- return (
-
-
-
-
-
- {person.job_title}
+
+
+ {
+ users.map((person, idx) => {
+ const index = idx + 1;
+ return (
+
+
+
+
+
+ {person.job_title}
- {index === 1 ? Owner : index < 5 ? Admin : null}
-
-
-
-
- )
- })
- }
-
+ {index === 1 ? (
+ Owner
+ ) : index < 5 ? (
+ Admin
+ ) : null}
+
+
+
+
+
+ );
+ })
+ }
+
-
+
diff --git a/shared/components/layout/HeaderActionsButtons.astro b/shared/components/layout/HeaderActionsButtons.astro
index 8307ed1d3..1c2dc4c47 100644
--- a/shared/components/layout/HeaderActionsButtons.astro
+++ b/shared/components/layout/HeaderActionsButtons.astro
@@ -1,39 +1,48 @@
---
-import Button from '@ui/Button.astro'
-import ButtonList from '@ui/ButtonList.astro'
-import Icon from '@ui/Icon.astro'
-import Modal from '../modals/Modal.astro'
-import ReportModalContent from '../modals/ReportModalContent.astro'
+import Button from '@ui/Button.astro';
+import ButtonList from '@ui/ButtonList.astro';
+import Icon from '@ui/Icon.astro';
+import Modal from '../modals/Modal.astro';
+import CaptureModal from '../CaptureModal.astro';
+import ReportModalContent from '../modals/ReportModalContent.astro';
interface Props {
- /** layout-navbar-overlap && layout-navbar-dark → the "New view" button is color="dark" */
- dark?: boolean
+ /** layout-navbar-overlap && layout-navbar-dark → the "New view" button is color="dark" */
+ dark?: boolean;
}
-const { dark } = Astro.props
+const { dark } = Astro.props;
---
-
-
-
- {
- /* Button.astro doesn't support modal-id (data-bs-toggle/target), so these two
- buttons are reproduced directly from the ui/button.html output. */
- }
-
-
- Create new report
-
-
-
-
+
+
+
+ {/* Button.astro doesn't support modal-id (data-bs-toggle/target). */}
+
+
+ Create new report
+
+
+
+
-
-
-
-
-
+
+
+
+
+
diff --git a/shared/components/layout/HeaderActionsPhotos.astro b/shared/components/layout/HeaderActionsPhotos.astro
index ec53c461d..918480416 100644
--- a/shared/components/layout/HeaderActionsPhotos.astro
+++ b/shared/components/layout/HeaderActionsPhotos.astro
@@ -1,25 +1,19 @@
---
-// ui/form/input-icon.html is inlined below — the include is called with no
-// parameters, so only the default branch renders (icon "search", addon after
-// the input, type "text", placeholder "Search…", empty value).
-// TODO: extract to src/components/ui/form/InputIcon.astro (loader, prepend,
-// icon, icon-class, class, light, rounded, input-class, type, value,
-// placeholder, aria-label, readonly params) when another page needs it.
-import Icon from '@ui/Icon.astro'
-import Button from '@ui/Button.astro'
+import Icon from '@ui/Icon.astro';
+import Button from '@ui/Button.astro';
---
diff --git a/shared/components/layout/HeaderUptime.astro b/shared/components/layout/HeaderUptime.astro
index 9b61f36b4..49a3f6d2a 100644
--- a/shared/components/layout/HeaderUptime.astro
+++ b/shared/components/layout/HeaderUptime.astro
@@ -1,39 +1,40 @@
---
-// ui/status-indicator.html is inlined here (animated green) — it is only used
-// on this page. TODO: no standalone StatusIndicator component yet.
-import Button from '@ui/Button.astro'
-import ButtonList from '@ui/ButtonList.astro'
+// TODO: no standalone StatusIndicator component yet.
+import Button from '@ui/Button.astro';
+import ButtonList from '@ui/ButtonList.astro';
---
diff --git a/shared/components/layout/PageHeader.astro b/shared/components/layout/PageHeader.astro
index 2f5be55c1..eb155e9be 100644
--- a/shared/components/layout/PageHeader.astro
+++ b/shared/components/layout/PageHeader.astro
@@ -1,5 +1,5 @@
---
-// variables in Liquid) are plain props here.
+// Layout front-matter flags are plain props here.
// TODO: layout-navbar-overlap && layout-navbar-dark → extra text-white class
// on .page-header — both unset on the homepage.
import Icon from '@ui/Icon.astro';
diff --git a/shared/components/marketing/MarketingNavbar.astro b/shared/components/marketing/MarketingNavbar.astro
index e1a3bd0a9..5a42d338a 100644
--- a/shared/components/marketing/MarketingNavbar.astro
+++ b/shared/components/marketing/MarketingNavbar.astro
@@ -1,49 +1,56 @@
---
-// The "active" class is hardcoded on the Home link in the Liquid source — it is
-// NOT derived from the current page, so every marketing page marks Home active.
-// The relative base is "../" (page|relative for the one-level-deep marketing pages).
-import NavbarLogo from '../navbar/NavbarLogo.astro'
+// "active" is hardcoded on Home — not derived from the current page.
+// Relative base is "../" for one-level-deep marketing pages.
+import NavbarLogo from '../navbar/NavbarLogo.astro';
-const base = '..'
+const base = '..';
---
diff --git a/shared/components/marketing/hero/Browser.astro b/shared/components/marketing/hero/Browser.astro
index 7b8f5d99b..057a434f3 100644
--- a/shared/components/marketing/hero/Browser.astro
+++ b/shared/components/marketing/hero/Browser.astro
@@ -1,50 +1,51 @@
---
-// Inlines ui/marketing/browser.html (the browser chrome) and
-// ui/responsive-image.html (the preview image). site.previewUrl is the browser
-// input URL; the "../" asset base matches the marketing pages' depth (page|relative = "..").
-import Icon from '@ui/Icon.astro'
-import { site } from '@shared/lib/site'
+import Icon from '@ui/Icon.astro';
+import { site } from '@shared/lib/site';
---
diff --git a/shared/components/marketing/hero/Side.astro b/shared/components/marketing/hero/Side.astro
index 5b7a174ba..048a9b740 100644
--- a/shared/components/marketing/hero/Side.astro
+++ b/shared/components/marketing/hero/Side.astro
@@ -1,78 +1,77 @@
---
-// Port of marketing/hero/side.html.
-// Inlines ui/typed.html: renders the seed span (first string) and the Typed.js init
-// (page-libs: [typed.js] loads the library), rendered directly here.
-import Icon from '@ui/Icon.astro'
-import Illustration from '@ui/Illustration.astro'
+import Icon from '@ui/Icon.astro';
+import Illustration from '@ui/Illustration.astro';
+import CaptureScript from '../../CaptureScript.astro';
-// ui/typed.html: strings = include.strings | split: '|'; id defaults to "typed".
-const strings = ['more effective', 'more efficient', 'more productive']
-const typedId = 'typed'
+const strings = ['more effective', 'more efficient', 'more productive'];
+const typedId = 'typed';
---
-
-
-
-
-
- Better email communication,
- {strings[0]}
-
-
54 eye-catching, customizable and responsive email templates to improve your email communication. No coding skills needed.
-
-
-
-
-
+
+
+
+
+ Better email communication,
+ {strings[0]}
+
+
54 eye-catching, customizable and responsive email templates to improve your email communication. No coding skills needed.
+
+
+
+
+
-// (shape class order: shape, shape-{size}, shape-{color}, {class}, rounded-circle).
-import SectionDivider from '../SectionDivider.astro'
-import Icon from '@ui/Icon.astro'
+import SectionDivider from '../SectionDivider.astro';
+import Icon from '@ui/Icon.astro';
interface Props {
- background?: string
- class?: string
- divider?: string
+ background?: string;
+ class?: string;
+ divider?: string;
}
-const { background, class: className, divider } = Astro.props
+const { background, class: className, divider } = Astro.props;
const sectionClass = ['section', background && `section-${background}`, className]
---
-
-
-
-
-
-
Mobile-optimized
-
Our email templates are fully responsive, so you can be sure they will look great on any device and screen size.
-
-
-
-
Compatible with 90+ email clients
-
Tested across 90+ email clients and devices, Tabler emails will help you make your email communication professional and reliable.
-
-
-
-
Unique, minimal design
-
Draw recipients’ attention with beautiful, minimal email designs based on Bootstrap and Material Design principles.
-
-
-
+
+
+
+
Mobile-optimized
+
Our email templates are fully responsive, so you can be sure they will look great on any device and screen size.
+
+
+
+
Compatible with 90+ email clients
+
Tested across 90+ email clients and devices, Tabler emails will help you make your email communication professional and reliable.
+
+
+
+
Unique, minimal design
+
Draw recipients’ attention with beautiful, minimal email designs based on Bootstrap and Material Design principles.
+
+
+
.
-import SectionDivider from '../SectionDivider.astro'
-import Icon from '@ui/Icon.astro'
+import SectionDivider from '../SectionDivider.astro';
+import Icon from '@ui/Icon.astro';
interface Props {
- background?: string
- class?: string
- divider?: string
+ background?: string;
+ class?: string;
+ divider?: string;
}
-const { background, class: className, divider } = Astro.props
+const { background, class: className, divider } = Astro.props;
const sectionClass = ['section', background && `section-${background}`, className]
---
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
-
Designed with users in mind
-
Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love. Every UI element has been created with attention to detail to make your interface beautiful!
-
-
-
-
-
-
-
-
Built for developers
-
Having in mind what it takes to write high-quality code, we want to help you speed up the development process and keep your code clean. Based on Bootstrap 5, Tabler is a cutting-edge solution, compatible with all modern browsers and fully responsive.
-
-
-
-
-
-
-
-
Fully customizable
-
You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
Designed with users in mind
+
+ Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love. Every UI element has been created with
+ attention to detail to make your interface beautiful!
+
+
+
+
+
+
+
+
+
Built for developers
+
+ Having in mind what it takes to write high-quality code, we want to help you speed up the development process and keep your code clean. Based on Bootstrap 5, Tabler is a cutting-edge solution, compatible with all modern
+ browsers and fully responsive.
+
+
+
+
+
+
+
+
+
Fully customizable
+
You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!
+
+
+
+
+
+
+
-
+
+
+
-
-
-
-
-
-
-
-
Designed with users in mind
-
Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love. Every UI element has been created with attention to detail to make your interface beautiful!
-
-
-
-
-
-
-
-
Built for developers
-
Having in mind what it takes to write high-quality code, we want to help you speed up the development process and keep your code clean. Based on Bootstrap 5, Tabler is a cutting-edge solution, compatible with all modern browsers and fully responsive.
-
-
-
-
-
-
-
-
Fully customizable
-
You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Designed with users in mind
+
+ Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love. Every UI element has been created with
+ attention to detail to make your interface beautiful!
+
+
+
+
+
+
+
+
+
Built for developers
+
+ Having in mind what it takes to write high-quality code, we want to help you speed up the development process and keep your code clean. Based on Bootstrap 5, Tabler is a cutting-edge solution, compatible with all modern
+ browsers and fully responsive.
+
+
+
+
+
+
+
+
+
Fully customizable
+
You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!
+
+
+
+
+
+
+
+
+
+
- {
- !hideHeader && (
-
- )
- }
+
+ {
+ !hideHeader && (
+
+ )
+ }
-
- {
- cards.map((group) => (
-
+
+ ))
+ }
+
+
-
+
diff --git a/shared/components/modals/CaptureModal.astro b/shared/components/modals/CaptureModal.astro
deleted file mode 100644
index deeae3c4d..000000000
--- a/shared/components/modals/CaptureModal.astro
+++ /dev/null
@@ -1,8 +0,0 @@
----
-// ui/modal.html — see Modal.astro for that). The captured markup is emitted
-// verbatim at the {% modals %} slot (end of ) by PageModals.
-// Registration is synchronous (a promise) — see src/lib/page-modals.ts.
-import { addPageModal } from '@shared/lib/page-modals'
-
-addPageModal(Astro.slots.render('default'))
----
diff --git a/shared/components/modals/ChangePasswordModalContent.astro b/shared/components/modals/ChangePasswordModalContent.astro
index f6109b6ef..d8a2d8a61 100644
--- a/shared/components/modals/ChangePasswordModalContent.astro
+++ b/shared/components/modals/ChangePasswordModalContent.astro
@@ -1,118 +1,122 @@
---
-// Port of parts/modals/change-password.html.
-import FormHint from '@ui/FormHint.astro'
-import Button from '@ui/Button.astro'
-import InputGroup from '@ui/InputGroup.astro'
-import FormGroup from '@ui/FormGroup.astro'
+import FormHint from '@ui/FormHint.astro';
+import Button from '@ui/Button.astro';
+import InputGroup from '@ui/InputGroup.astro';
+import FormGroup from '@ui/FormGroup.astro';
---
diff --git a/shared/components/modals/ConfirmDeleteModalContent.astro b/shared/components/modals/ConfirmDeleteModalContent.astro
index 43d33a12b..13e200198 100644
--- a/shared/components/modals/ConfirmDeleteModalContent.astro
+++ b/shared/components/modals/ConfirmDeleteModalContent.astro
@@ -1,57 +1,58 @@
---
-// Port of parts/modals/confirm-delete.html.
-import Icon from '@ui/Icon.astro'
-import Button from '@ui/Button.astro'
-import ModalClose from './ModalClose.astro'
+import Icon from '@ui/Icon.astro';
+import Button from '@ui/Button.astro';
+import ModalClose from './ModalClose.astro';
---
-
+
-
Are you sure?
-
-
Do you really want to delete this item? This action cannot be undone.
-
-
-
-
Items to be deleted:
-
- - • Item 1
- - • Item 2
- - • Item 3
-
-
-
-
-
+
Are you sure?
+
+
Do you really want to delete this item? This action cannot be undone.
+
+
+
+
Items to be deleted:
+
+ - • Item 1
+ - • Item 2
+ - • Item 3
+
+
+
+
+
-
+
-
+
+
-`,
- ),
-)
----
+
diff --git a/shared/components/modals/SignatureModalContent.astro b/shared/components/modals/SignatureModalContent.astro
index 84a4e3d7b..46469f5fe 100644
--- a/shared/components/modals/SignatureModalContent.astro
+++ b/shared/components/modals/SignatureModalContent.astro
@@ -1,5 +1,5 @@
---
-// The `sample` flag on the Liquid include is inert (ui/signature.html never reads it).
+// The `sample` flag is unused.
import CardSubtitle from '@ui/CardSubtitle.astro'
import ModalClose from './ModalClose.astro'
diff --git a/shared/components/navbar/Navbar.astro b/shared/components/navbar/Navbar.astro
index 3a0e3ad7f..dc20d8de6 100644
--- a/shared/components/navbar/Navbar.astro
+++ b/shared/components/navbar/Navbar.astro
@@ -1,21 +1,11 @@
---
-// Full port of layout/navbar.html (both condensed and non-condensed branches).
-// Called from DefaultLayout with the params default.html forwards (condensed,
-// overlap, dark, hideBrand, sticky, transparent, class, hideSearch — always
-// true there) and standalone from navigation.astro with the showcase params
-// (sample, personId, hideLogo, smallLogo, showTitle, hideIcons, hideUsername,
-// hideSearch, hideBrand, background, backgroundColor, fluidSearch).
+// Condensed and non-condensed navbar branches. DefaultLayout passes condensed,
+// overlap, dark, hideBrand, sticky, transparent, class, hideSearch; navigation
+// showcase pages also use sample, personId, hideLogo, smallLogo, showTitle,
+// hideIcons, hideUsername, background, backgroundColor, fluidSearch.
//
-// TODO: unported Liquid params (unused by any ported page):
-// - hide-menu (the `elsif include.hide-menu` branch in the condensed collapse:
-// search only, rounded=include.transparent),
-// - dark-secondary (data-bs-theme="dark" on the non-condensed inner
-// `
`).
-//
-// Note on fluid-search: in the Liquid source the search block inside the
-// condensed branch sits in `{% unless condensed %}` nested in `{% if condensed %}`
-// — dead code, it can never render. fluid-search therefore has no effect on the
-// output; the prop is accepted for parity with the include signature only.
+// fluidSearch has no effect on output (search in the condensed branch is dead
+// code); the prop is kept for call-site compatibility.
import Icon from '@ui/Icon.astro';
import NavbarLogo from './NavbarLogo.astro';
import NavbarToggler from './NavbarToggler.astro';
@@ -110,7 +100,6 @@ const headerClass = [
)
}
- {/* navbar.html passes the show-* flags with default: true */}
- {/* the Liquid search block here is inside `unless condensed` — dead code, nothing to render */}
+ {/* Search block omitted when condensed — nothing to render */}
)}
diff --git a/shared/components/navbar/NavbarLogo.astro b/shared/components/navbar/NavbarLogo.astro
index 009442ff5..86d786212 100644
--- a/shared/components/navbar/NavbarLogo.astro
+++ b/shared/components/navbar/NavbarLogo.astro
@@ -1,54 +1,57 @@
---
-// TODO: unported Liquid params: prefix (the "sidebar-brand" variant, used only
-// in layouts with a sidebar), breakpoint (assigned in Liquid but unused in the
-// markup), href ("/{href}" appended to page|relative — no ported page passes
-// it).
-import { site } from '@shared/lib/site'
+import { site } from '@shared/lib/site';
interface Props {
- href?: string
- class?: string
- /** wraps the logo in
(header=true param) */
- header?: boolean
- smallLogo?: boolean
- hideLogo?: boolean
- showTitle?: boolean
+ href?: string;
+ class?: string;
+ /** wraps the logo in
(header=true param) */
+ header?: boolean;
+ smallLogo?: boolean;
+ hideLogo?: boolean;
+ showTitle?: boolean;
}
-const { href = '.', class: className, header = false, smallLogo = false, hideLogo = false, showTitle = false } = Astro.props
+const {
+ href = '.',
+ class: className,
+ header = false,
+ smallLogo = false,
+ hideLogo = false,
+ showTitle = false,
+} = Astro.props;
-const brandClasses = ['navbar-brand navbar-brand-autodark', className]
-const logoClass = `navbar-brand-image${showTitle ? ' me-3' : ''}`
+const brandClasses = ['navbar-brand navbar-brand-autodark', className];
+const logoClass = `navbar-brand-image${showTitle ? ' me-3' : ''}`;
const logoMark =
- '
'
+ '
';
const logoText =
- '
'
+ '
';
-const logoSvg = smallLogo ? `
` : `
`
+const logoSvg = smallLogo
+ ? `
`
+ : `
`;
---
{
- header ? (
-
- '} />
-
- '} />
-
- ) : (
-
- '} />
-
- {!hideLogo && }
- {showTitle && 'Dashboard'}
-
- '} />
-
- )
+ header ? (
+
+ '} />
+
+ '} />
+
+ ) : (
+
+ '} />
+ {!hideLogo && }{showTitle && 'Dashboard'}
+ '} />
+
+ )
}
diff --git a/shared/components/navbar/NavbarMenu.astro b/shared/components/navbar/NavbarMenu.astro
index eba139b66..64633be17 100644
--- a/shared/components/navbar/NavbarMenu.astro
+++ b/shared/components/navbar/NavbarMenu.astro
@@ -1,102 +1,132 @@
---
-// TODO: %ICONS_COUNT% substitution in titles (Liquid: icons-info.count) —
-// menu.json doesn't contain that placeholder and src/data has no icons-info.json,
-// so we skip it for now.
-import Icon from '@ui/Icon.astro'
-import NavbarMenuItem from './NavbarMenuItem.astro'
-import menu from '@data/menu.json'
-import menuSample from '@data/menu-sample.json'
+// TODO: %ICONS_COUNT% substitution in titles — menu.json has no placeholder, skipped for now.
+import Icon from '@ui/Icon.astro';
+import NavbarMenuItem from './NavbarMenuItem.astro';
+import menu from '@data/menu.json';
+import menuSample from '@data/menu-sample.json';
interface Level1 {
- 'title': string
- 'title-long'?: string
- 'icon'?: string
- 'url'?: string
- 'badge'?: string
- 'active'?: boolean
- 'disabled'?: boolean
- 'right'?: boolean
- 'columns'?: number
- 'children'?: Record>
+ title: string;
+ 'title-long'?: string;
+ icon?: string;
+ url?: string;
+ badge?: string;
+ active?: boolean;
+ disabled?: boolean;
+ right?: boolean;
+ columns?: number;
+ children?: Record>;
}
interface Props {
- /** equivalent of the page-menu front matter, e.g. "dashboards.default" */
- pageMenu?: string
- sample?: boolean
- hideIcons?: boolean
- longTitles?: boolean
- keepOpen?: boolean
- autoOpen?: boolean
- class?: string
+ /** equivalent of the page-menu front matter, e.g. "dashboards.default" */
+ pageMenu?: string;
+ sample?: boolean;
+ hideIcons?: boolean;
+ longTitles?: boolean;
+ keepOpen?: boolean;
+ autoOpen?: boolean;
+ class?: string;
}
-const { pageMenu = '', sample = false, hideIcons = false, longTitles = false, keepOpen = false, autoOpen = false, class: className } = Astro.props
+const {
+ pageMenu = '',
+ sample = false,
+ hideIcons = false,
+ longTitles = false,
+ keepOpen = false,
+ autoOpen = false,
+ class: className,
+} = Astro.props;
-const currentPage = pageMenu.split('.')
-const items = Object.entries((sample ? menuSample : menu) as Record)
+const currentPage = pageMenu.split('.');
+const items = Object.entries((sample ? menuSample : menu) as Record);
-// Columns as in Liquid: per-column = ceil(size / columns), break every per-column.
+// per-column = ceil(size / columns), break every per-column.
const chunk = (arr: T[], size: number): T[][] => {
- const out: T[][] = []
- for (let i = 0; i < arr.length; i += size) out.push(arr.slice(i, i + size))
- return out
-}
+ const out: T[][] = [];
+ for (let i = 0; i < arr.length; i += size) out.push(arr.slice(i, i + size));
+ return out;
+};
---
diff --git a/shared/components/navbar/NavbarMenuItem.astro b/shared/components/navbar/NavbarMenuItem.astro
index 022972bf6..2fb726cc6 100644
--- a/shared/components/navbar/NavbarMenuItem.astro
+++ b/shared/components/navbar/NavbarMenuItem.astro
@@ -1,68 +1,88 @@
---
-// Level 2 (and 3) of the menu from layout/navbar-menu.html — a dropdown-item
-// entry, optionally with a nested dropend.
-import Icon from '@ui/Icon.astro'
+// Dropdown menu item, optionally with a nested dropend.
+import Icon from '@ui/Icon.astro';
interface Level3 {
- title: string
- url?: string
- badge?: string
+ title: string;
+ url?: string;
+ badge?: string;
}
interface Level2 extends Level3 {
- icon?: string
- color?: string
- children?: Record
+ icon?: string;
+ color?: string;
+ children?: Record;
}
interface Props {
- level1Key: string
- itemKey: string
- item: Level2
- currentPage: string[]
- keepOpen?: boolean
+ level1Key: string;
+ itemKey: string;
+ item: Level2;
+ currentPage: string[];
+ keepOpen?: boolean;
}
-const { level1Key, itemKey, item, currentPage, keepOpen = false } = Astro.props
+const { level1Key, itemKey, item, currentPage, keepOpen = false } = Astro.props;
-const hasChildren = !!item.children
-const isExternal = (url?: string) => !!url && (url.includes('http://') || url.includes('https://'))
-const relative = (url?: string) => (isExternal(url) ? url : `./${url}`)
+const hasChildren = !!item.children;
+const isExternal = (url?: string) => !!url && (url.includes('http://') || url.includes('https://'));
+const relative = (url?: string) => (isExternal(url) ? url : `./${url}`);
-const active = level1Key === currentPage[0] && itemKey === currentPage[1] && currentPage.length === 2
+const active = level1Key === currentPage[0] && itemKey === currentPage[1] && currentPage.length === 2;
-const itemClasses = ['dropdown-item', hasChildren && 'dropdown-toggle', active && 'active', item.color && `text-${item.color}`]
+const itemClasses = [
+ 'dropdown-item',
+ hasChildren && 'dropdown-toggle',
+ active && 'active',
+ item.color && `text-${item.color}`,
+]
---
-{
- hasChildren ? (
-
+ ) : (
+
+ {item.icon && }
- {item.title}
+ {item.title}
- {item.badge && {item.badge}}
-
- )
+ {item.badge && {item.badge}}
+
+ )
}
diff --git a/shared/components/navbar/NavbarSearch.astro b/shared/components/navbar/NavbarSearch.astro
index b605b158f..7f2cd0096 100644
--- a/shared/components/navbar/NavbarSearch.astro
+++ b/shared/components/navbar/NavbarSearch.astro
@@ -1,22 +1,20 @@
---
-// The Liquid include assigns `breakpoint` (default 'lg') but never uses it in
-// the markup, so the param is intentionally not ported.
-// Form action: Liquid `{{ page | relative }}/` → "./" (all ported pages are
-// root-level, see MIGRATION.md).
-import InputIcon from '@ui/form/InputIcon.astro'
+// breakpoint param (default 'lg') is unused.
+// Form action is "./" for root-level pages.
+import InputIcon from '@ui/form/InputIcon.astro';
interface Props {
- class?: string
- rounded?: boolean
+ class?: string;
+ rounded?: boolean;
}
-const { class: className, rounded = false } = Astro.props
+const { class: className, rounded = false } = Astro.props;
---
-
+
diff --git a/shared/components/navbar/NavbarSide.astro b/shared/components/navbar/NavbarSide.astro
index bc5851343..497741af2 100644
--- a/shared/components/navbar/NavbarSide.astro
+++ b/shared/components/navbar/NavbarSide.astro
@@ -1,71 +1,69 @@
---
-import Button from '@ui/Button.astro'
-import ButtonList from '@ui/ButtonList.astro'
-import NavbarSideTheme from './NavbarSideTheme.astro'
-import NavbarSideNotifications from './NavbarSideNotifications.astro'
-import NavbarSideApps from './NavbarSideApps.astro'
-import NavbarSideLanguage from './NavbarSideLanguage.astro'
-import NavbarSideUser from './NavbarSideUser.astro'
+import Button from '@ui/Button.astro';
+import ButtonList from '@ui/ButtonList.astro';
+import NavbarSideTheme from './NavbarSideTheme.astro';
+import NavbarSideNotifications from './NavbarSideNotifications.astro';
+import NavbarSideApps from './NavbarSideApps.astro';
+import NavbarSideLanguage from './NavbarSideLanguage.astro';
+import NavbarSideUser from './NavbarSideUser.astro';
interface Props {
- class?: string
- breakpoint?: string
- condensed?: boolean
- personId?: number
- hideUsername?: boolean
- dark?: boolean
- showThemeToggle?: boolean
- showNotifications?: boolean
- showApps?: boolean
- showLanguageSelector?: boolean
- showUser?: boolean
+ class?: string;
+ breakpoint?: string;
+ condensed?: boolean;
+ personId?: number;
+ hideUsername?: boolean;
+ dark?: boolean;
+ showThemeToggle?: boolean;
+ showNotifications?: boolean;
+ showApps?: boolean;
+ showLanguageSelector?: boolean;
+ showUser?: boolean;
}
const {
- class: className,
- breakpoint = 'md',
- condensed = false,
- personId = 1,
- hideUsername = false,
- dark = false,
- // As in layout/navbar-side.html: show-* flags not passed in are falsy
- // (navbar.html explicitly passes true, sidebar.html passes nothing —
- // in the sidebar only the Sponsor button renders).
- showThemeToggle = false,
- showNotifications = false,
- showApps = false,
- showLanguageSelector = false,
- showUser = false,
-} = Astro.props
+ class: className,
+ breakpoint = 'md',
+ condensed = false,
+ personId = 1,
+ hideUsername = false,
+ dark = false,
+ // show-* flags default false — sidebar only shows the Sponsor button unless set.
+ showThemeToggle = false,
+ showNotifications = false,
+ showApps = false,
+ showLanguageSelector = false,
+ showUser = false,
+} = Astro.props;
// TODO: site.githubSponsorsUrl — add to src/lib/site.ts (out of scope for this
// task; value from /Users/chomik/htdocs/tabler/shared/data/site.json).
-const githubSponsorsUrl = 'https://github.com/sponsors/codecalm'
+const githubSponsorsUrl = 'https://github.com/sponsors/codecalm';
---
- {
- !condensed && (
-
-
-
-
-
- )
- }
+ {
+ !condensed && (
+
+
+
+
+
+ )
+ }
- {
- (showThemeToggle || showNotifications || showApps || showLanguageSelector) && (
-
- {showThemeToggle && }
- {showNotifications && }
- {showApps && }
- {showLanguageSelector && }
-
- )
- }
+ {
+ (showThemeToggle || showNotifications || showApps || showLanguageSelector) && (
+
+ {showThemeToggle && }
+ {showNotifications && }
+ {showApps && }
+ {showLanguageSelector && }
+
+ )
+ }
- {showUser &&
}
+ {showUser &&
}
-
-
Registrar
-
Third Party
-
-
-
Nameservers
-
Third Party
-
-
-
-
-
Creator
-
-
-
- {creator.full_name}
-
-
-
-
-
-
Edge network
-
- Active
-
-
-
-
-
Checkbox
-
-
-
-
-
-
-
-
Longer description
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-
+
+
Registrar
+
Third Party
+
+
+
Nameservers
+
Third Party
+
+
+
+
+
Creator
+
+
+
+ {creator.full_name}
+
+
+
+
+
+
Edge network
+
+ Active
+
+
+
+
+
Checkbox
+
+
+
+
+
+
+
+
Longer description
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+
- {
- data.columns.map((column) => (
-
-
{column.name}
+ {
+ data.columns.map((column) => (
+
+
{column.name}
-
-
- {column.tasks.map((task) => (
-
-
- {task.color &&
}
+
+
+ {column.tasks.map((task) => (
+
+
+ {task.color &&
}
- {task.starred && (
-
-
-
- )}
+ {task.starred && (
+
+
+
+ )}
-
-
{task.name}
+
+
{task.name}
- {/* Liquid outputs the description unescaped; it may contain markup (e.g.
#tag) */}
- {task.description &&
}
+ {/* Description may contain markup (e.g.
#tag) — rendered with set:html */}
+ {task.description &&
}
- {task.image && (
-
-
-
- )}
+ {task.image && (
+
+
+
+ )}
-
-
-
+
+
+
+ {task.users && (
+
+ )}
+
- {task['due-date'] && (
-
- )}
+ {task['due-date'] && (
+
+ )}
-
-
- {task.likes ? task.likes : ''}
-
+
+
+ {task.likes ? task.likes : ''}
+
- {task.subtasks && (
-
- )}
- {task.comments && (
-
- )}
-
-
-
+ {task.subtasks && (
+
+ )}
+ {task.comments && (
+
+ )}
+
+
+
- {task.subtasks && (
-
- {task.subtasks.map((subtask: { name: string; done?: boolean }) => (
-
- {subtask.done ? (
-
-
- {subtask.name}
-
- ) : (
-
-
- {subtask.name}
-
- )}
-
- ))}
-
- )}
-
-
-
- ))}
-
-
-
- ))
- }
+ {task.subtasks && (
+
+ {task.subtasks.map((subtask: { name: string; done?: boolean }) => (
+
+ {subtask.done ? (
+
+
+ {subtask.name}
+
+ ) : (
+
+
+ {subtask.name}
+
+ )}
+
+ ))}
+
+ )}
+
+
+
+ ))}
+
+
+
+ ))
+ }
-less body) — unused so far.
-// Note: the `blank: true` front matter (blank.html) is inert — it is not
-// referenced by any template or Eleventy config; the empty page header on that
-// page comes purely from `page-header` being unset. No prop for it.
-import BaseLayout from './BaseLayout.astro'
-import Navbar from '@shared/components/navbar/Navbar.astro'
-import Sidebar from '@shared/components/navbar/Sidebar.astro'
-import PageHeader from '@shared/components/layout/PageHeader.astro'
-import Footer from '@shared/components/layout/Footer.astro'
+import BaseLayout from './BaseLayout.astro';
+import Navbar from '@shared/components/navbar/Navbar.astro';
+import Sidebar from '@shared/components/navbar/Sidebar.astro';
+import PageHeader from '@shared/components/layout/PageHeader.astro';
+import Footer from '@shared/components/layout/Footer.astro';
interface Props {
- title?: string
- /** page-libs from the Eleventy front matter — passed down to BaseLayout */
- pageLibs?: string[]
- /** page-header — the title in the page header */
- pageHeader?: string
- /** page-header-file — renders a layout/headers/{file} component instead of the title block */
- pageHeaderFile?: string
- /** page-header-pretitle */
- pretitle?: string
- /** page-header-description */
- description?: string
- /** page-header-actions, e.g. "buttons" */
- actions?: string
- /** page-menu from the front matter, e.g. "layout.vertical" — active menu entry */
- pageMenu?: string
- /** layout-sidebar */
- sidebar?: boolean
- /** layout-sidebar-dark */
- sidebarDark?: boolean
- /** layout-hide-topbar */
- hideTopbar?: boolean
- /** page-container-centered — adds my-auto to the .container-xl */
- containerCentered?: boolean
- /** layout-wrapper-full — page-wrapper-full + no .container-xl around the body */
- wrapperFull?: boolean
- /** page-container-class — extra classes appended to the .container-xl */
- containerClass?: string
- /** body-class front matter (e.g. "layout-boxed"/"layout-fluid") → passed to BaseLayout */
- bodyClass?: string
- /** layout-rtl → passed to BaseLayout (dir="rtl" + RTL stylesheets) */
- rtl?: boolean
- /** layout-sidebar-end */
- sidebarEnd?: boolean
- /** layout-navbar-transparent (sidebar variant) */
- navbarTransparent?: boolean
- /** layout-navbar-condensed */
- navbarCondensed?: boolean
- /** layout-navbar-dark */
- navbarDark?: boolean
- /** layout-navbar-overlap */
- navbarOverlap?: boolean
- /** layout-navbar-sticky */
- navbarSticky?: boolean
- /** layout-navbar-hide-brand */
- navbarHideBrand?: boolean
- /** layout-navbar-class */
- navbarClass?: string
+ title?: string;
+ /** Script/CSS library keys passed to BaseLayout */
+ pageLibs?: string[];
+ /** page-header — the title in the page header */
+ pageHeader?: string;
+ /** page-header-file — renders a layout/headers/{file} component instead of the title block */
+ pageHeaderFile?: string;
+ /** page-header-pretitle */
+ pretitle?: string;
+ /** page-header-description */
+ description?: string;
+ /** page-header-actions, e.g. "buttons" */
+ actions?: string;
+ /** page-menu from the front matter, e.g. "layout.vertical" — active menu entry */
+ pageMenu?: string;
+ /** layout-sidebar */
+ sidebar?: boolean;
+ /** layout-sidebar-dark */
+ sidebarDark?: boolean;
+ /** layout-hide-topbar */
+ hideTopbar?: boolean;
+ /** page-container-centered — adds my-auto to the .container-xl */
+ containerCentered?: boolean;
+ /** layout-wrapper-full — page-wrapper-full + no .container-xl around the body */
+ wrapperFull?: boolean;
+ /** page-container-class — extra classes appended to the .container-xl */
+ containerClass?: string;
+ /** body-class front matter (e.g. "layout-boxed"/"layout-fluid") → passed to BaseLayout */
+ bodyClass?: string;
+ /** layout-rtl → passed to BaseLayout (dir="rtl" + RTL stylesheets) */
+ rtl?: boolean;
+ /** layout-sidebar-end */
+ sidebarEnd?: boolean;
+ /** layout-navbar-transparent (sidebar variant) */
+ navbarTransparent?: boolean;
+ /** layout-navbar-condensed */
+ navbarCondensed?: boolean;
+ /** layout-navbar-dark */
+ navbarDark?: boolean;
+ /** layout-navbar-overlap */
+ navbarOverlap?: boolean;
+ /** layout-navbar-sticky */
+ navbarSticky?: boolean;
+ /** layout-navbar-hide-brand */
+ navbarHideBrand?: boolean;
+ /** layout-navbar-class */
+ navbarClass?: string;
}
-const { title, pageLibs, pageHeader, pageHeaderFile, pretitle, description, actions, pageMenu, sidebar, sidebarDark, hideTopbar, containerCentered, wrapperFull, containerClass, bodyClass, rtl, sidebarEnd, navbarTransparent, navbarCondensed, navbarDark, navbarOverlap, navbarSticky, navbarHideBrand, navbarClass } =
- Astro.props
+const {
+ title,
+ pageLibs,
+ pageHeader,
+ pageHeaderFile,
+ pretitle,
+ description,
+ actions,
+ pageMenu,
+ sidebar,
+ sidebarDark,
+ hideTopbar,
+ containerCentered,
+ wrapperFull,
+ containerClass,
+ bodyClass,
+ rtl,
+ sidebarEnd,
+ navbarTransparent,
+ navbarCondensed,
+ navbarDark,
+ navbarOverlap,
+ navbarSticky,
+ navbarHideBrand,
+ navbarClass,
+} = Astro.props;
---
-
- {
- sidebar && (
-
- '} />
-
- '} />
-
- )
- }
+
+ {
+ sidebar && (
+
+ '} />
+
+ '} />
+
+ )
+ }
- {
- !hideTopbar && (
-
- '} />
-
- '} />
-
- )
- }
+ {
+ !hideTopbar && (
+
+ '} />
+
+ '} />
+
+ )
+ }
-
-
-
-
+
+
+
+
-
-
- {
- wrapperFull ? (
-
- ) : (
-
-
-
- )
- }
-
-
+
+
+ {
+ wrapperFull ? (
+
+ ) : (
+
+
+
+ )
+ }
+
+
-
-
-
-
-
diff --git a/shared/layouts/ErrorLayout.astro b/shared/layouts/ErrorLayout.astro
index 356316c59..047443b66 100644
--- a/shared/layouts/ErrorLayout.astro
+++ b/shared/layouts/ErrorLayout.astro
@@ -1,37 +1,42 @@
---
-// "border-top-wide border-primary", a .page-center container and ui/empty.html
-// fed from the errors.json entry keyed by the `page-error` front matter).
-import BaseLayout from './BaseLayout.astro'
-import Empty from '@ui/Empty.astro'
-import errors from '@data/errors.json'
+// Error page: border-top banner, centered Empty from errors.json (`pageError`).
+import BaseLayout from './BaseLayout.astro';
+import Empty from '@ui/Empty.astro';
+import errors from '@data/errors.json';
interface Props {
- title?: string
- /** page-error front matter — key into errors.json ("404" | "500" | "maintenance" | …) */
- pageError: string
+ title?: string;
+ /** page-error front matter — key into errors.json ("404" | "500" | "maintenance" | …) */
+ pageError: string;
}
-const { title, pageError } = Astro.props
+const { title, pageError } = Astro.props;
type ErrorEntry = {
- illustration?: string
- title?: string | number
- header?: string
- description?: string
-}
+ illustration?: string;
+ title?: string | number;
+ header?: string;
+ description?: string;
+};
-// {% assign error = errors[page-error] %}
-const error = (errors as Record
)[pageError] ?? {}
-// {% assign header = error.header | default: 'Oops… You just found an error page' %}
-const header = error.header ?? 'Oops… You just found an error page'
+const error = (errors as Record)[pageError] ?? {};
+const header = error.header ?? 'Oops… You just found an error page';
---
-
-
-
+
+
+
diff --git a/shared/layouts/MarketingLayout.astro b/shared/layouts/MarketingLayout.astro
index 89c5d71fa..6e2bad2c8 100644
--- a/shared/layouts/MarketingLayout.astro
+++ b/shared/layouts/MarketingLayout.astro
@@ -1,160 +1,178 @@
---
-// "body-marketing body-gradient", plugins: marketing).
-// The `plugins: marketing` front matter is already covered by site.cssPlugins
-// (which includes 'marketing'), so no extra handling is needed here.
-// The footer (products/support/tabler columns, payment icons, socials, and the
-// copyright bar) lives inline in this layout, exactly as in the Liquid source.
-
-import Subheader from '@ui/Subheader.astro'
-import BaseLayout from './BaseLayout.astro'
-import MarketingNavbar from '@shared/components/marketing/MarketingNavbar.astro'
-import Payment from '@ui/Payment.astro'
-import Icon from '@ui/Icon.astro'
-import { site } from '@shared/lib/site'
+import Subheader from '@ui/Subheader.astro';
+import BaseLayout from './BaseLayout.astro';
+import MarketingNavbar from '@shared/components/marketing/MarketingNavbar.astro';
+import Payment from '@ui/Payment.astro';
+import Icon from '@ui/Icon.astro';
+import { site } from '@shared/lib/site';
interface Props {
- title?: string
- /** page-libs from the Eleventy front matter, e.g. ['typed.js'] */
- pageLibs?: string[]
+ title?: string;
+ /** Script/CSS library keys, e.g. ['typed.js'] */
+ pageLibs?: string[];
}
-const { title, pageLibs } = Astro.props
+const { title, pageLibs } = Astro.props;
-// site.base is undefined in the Eleventy build → the product links resolve to
-// an empty href (href="").
-const base = ''
+const base = '';
---
-
-
-
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
+
+
diff --git a/shared/layouts/PayLayout.astro b/shared/layouts/PayLayout.astro
index 9bd3fbfc9..9ed7b11fc 100644
--- a/shared/layouts/PayLayout.astro
+++ b/shared/layouts/PayLayout.astro
@@ -1,35 +1,35 @@
---
// Minimal navbar (small logo + close button) then a .page with the content.
-import BaseLayout from './BaseLayout.astro'
-import NavbarLogo from '@shared/components/navbar/NavbarLogo.astro'
+import BaseLayout from './BaseLayout.astro';
+import NavbarLogo from '@shared/components/navbar/NavbarLogo.astro';
interface Props {
- title?: string
- /** page-libs from the Eleventy front matter — passed down to BaseLayout */
- pageLibs?: string[]
- /** body-class front matter — passed down to BaseLayout */
- bodyClass?: string
+ title?: string;
+ /** Script/CSS library keys passed to BaseLayout */
+ pageLibs?: string[];
+ /** body-class front matter — passed down to BaseLayout */
+ bodyClass?: string;
}
-const { title, pageLibs, bodyClass } = Astro.props
+const { title, pageLibs, bodyClass } = Astro.props;
---
-
-
+
-
-
-
-
-
+
+
+
+
+
diff --git a/shared/layouts/RedirectLayout.astro b/shared/layouts/RedirectLayout.astro
index 0a64aa7ad..02c9f3362 100644
--- a/shared/layouts/RedirectLayout.astro
+++ b/shared/layouts/RedirectLayout.astro
@@ -1,47 +1,31 @@
---
-// (a bare meta-refresh document).
-//
-// The include computes:
-// {% if url contains 'http://' or 'https://' %}{{ url }}
-// {% else %}{{ page | relative }}{{ url }}{% endif %}
-// For root-level pages `{{ page | relative }}` resolves to ".".
+// Bare meta-refresh redirect document.
interface Props {
- /**
- * include.url — the raw redirect target. NOTE: shared/layouts/redirect.html
- * passes `page.redirect.to`, but in Eleventy `page` is the built-in page
- * object (no front matter), so `page.redirect` is undefined and the include
- * receives an empty url → the target collapses to the relative root ".".
- * The reference build (markdown.html) redirects to "." for this reason.
- */
- url?: string
- /**
- * `{{ page | relative }}` — the relative path to the site root from this
- * page. Defaults to "." (root-level pages); nested pages pass e.g. "../../..".
- */
- base?: string
+ /** Redirect target. Absolute http(s) URLs are used as-is; relative ones are prefixed with `base`. */
+ url?: string;
+ /** Relative path to the site root from this page. Defaults to ".". */
+ base?: string;
}
-const { url = '', base = '.' } = Astro.props
-const isAbsolute = url.includes('http://') || url.includes('https://')
-const target = isAbsolute ? url : `${base}${url}`
+const { url = '', base = '.' } = Astro.props;
+const isAbsolute = url.includes('http://') || url.includes('https://');
+const target = isAbsolute ? url : `${base}${url}`;
---
-
-
- Redirecting…
-
-
-
-
-
-
-
-
-
-
+
+
+ Redirecting…
+
+
+
+
+
+
+
+
diff --git a/shared/layouts/SettingsLayout.astro b/shared/layouts/SettingsLayout.astro
index 38f9665d4..5b2dd6d5f 100644
--- a/shared/layouts/SettingsLayout.astro
+++ b/shared/layouts/SettingsLayout.astro
@@ -1,6 +1,6 @@
---
// Wraps the page body in a card with a left settings-nav column; the active
-// nav item is driven by the `active` prop (Liquid used page.fileSlug).
+// nav item is driven by the `active` prop.
import Subheader from '@ui/Subheader.astro'
import DefaultLayout from './DefaultLayout.astro'
diff --git a/shared/lib/chart-script.ts b/shared/lib/chart-script.ts
index 08c51ab44..381fd6ebe 100644
--- a/shared/lib/chart-script.ts
+++ b/shared/lib/chart-script.ts
@@ -1,8 +1,6 @@
-// Port of ui/chart.html (Liquid) — generator of the ApexCharts