From d05429a785aebce7f36072b9f94a5d2b3d0088ef Mon Sep 17 00:00:00 2001 From: codecalm Date: Tue, 4 Aug 2026 00:38:58 +0200 Subject: [PATCH] Refactor ScreenshotLayout and remove unused pages --- screenshots/layouts/ScreenshotLayout.astro | 128 ++++++++++++++++-- screenshots/pages/active-subscriptions.astro | 8 ++ screenshots/pages/avatar-list.astro | 14 -- screenshots/pages/badge.astro | 24 ---- screenshots/pages/button.astro | 32 ----- screenshots/pages/conversion-rate.astro | 8 ++ screenshots/pages/index.astro | 7 +- screenshots/pages/new-clients.astro | 8 ++ screenshots/pages/revenue.astro | 8 ++ screenshots/pages/sales-overview.astro | 8 ++ screenshots/pages/sales.astro | 8 ++ screenshots/pages/total-users.astro | 8 ++ screenshots/pages/welcome.astro | 8 ++ .../cards/charts/ConversionRate.astro | 24 ++++ .../cards/charts/SalesOverview.astro | 31 +++++ shared/data/charts.json | 19 +++ 16 files changed, 257 insertions(+), 86 deletions(-) create mode 100644 screenshots/pages/active-subscriptions.astro delete mode 100644 screenshots/pages/avatar-list.astro delete mode 100644 screenshots/pages/badge.astro delete mode 100644 screenshots/pages/button.astro create mode 100644 screenshots/pages/conversion-rate.astro create mode 100644 screenshots/pages/new-clients.astro create mode 100644 screenshots/pages/revenue.astro create mode 100644 screenshots/pages/sales-overview.astro create mode 100644 screenshots/pages/sales.astro create mode 100644 screenshots/pages/total-users.astro create mode 100644 screenshots/pages/welcome.astro create mode 100644 shared/components/cards/charts/ConversionRate.astro create mode 100644 shared/components/cards/charts/SalesOverview.astro diff --git a/screenshots/layouts/ScreenshotLayout.astro b/screenshots/layouts/ScreenshotLayout.astro index 03186cef4..0025dd5f1 100644 --- a/screenshots/layouts/ScreenshotLayout.astro +++ b/screenshots/layouts/ScreenshotLayout.astro @@ -1,19 +1,49 @@ --- // Chrome-free layout for component screenshots: just @tabler/core CSS/JS -// around a single component, no navbar/sidebar/demo styling. Dark/light is -// driven by the same ?theme= query param and dist/js/tabler-theme.min.js -// as preview/pages/screenshot.astro, so a screenshot tool can request -// /button.html?theme=dark without depending on stored/localStorage state. +// around a single component, no navbar/sidebar/demo styling. Modeled 1:1 on +// preview/pages/screenshot.astro (the marketing hero-shot page): a fixed +// 1024x768 .screenshot canvas with the Tabler logo above an elevated +// .screenshot-card, on a soft gradient backdrop. Dark/light is driven by the +// same ?theme= query param + dist/js/tabler-theme(.min).js + the +// hide-theme-light/hide-theme-dark nav-segmented toggle as that page, so a +// screenshot tool can request /button.html?theme=dark without depending on +// stored/localStorage state. +import NavbarLogo from '@shared/components/navbar/NavbarLogo.astro' +import PageScripts from '@shared/components/PageScripts.astro' +import libs from '@tabler/core/libs.json' + interface Props { title: string /** dir="rtl" + the .rtl.css variant of tabler.css */ rtl?: boolean - /** extra classes on the wrapping container the component is rendered into */ + /** the Tabler logo above the card (+ balancing spacer below it) */ + showLogo?: boolean + /** wrap the component in the elevated .screenshot-card; when false the slot renders bare */ + showCard?: boolean + /** caps the [data-screenshot-target] width at columns * 320px */ + columns?: number + /** CSS zoom applied to [data-screenshot-target] */ + zoom?: number + /** third-party libs from libs.json the component needs, e.g. ['apexcharts'] */ + pageLibs?: string[] + /** extra classes on the component wrapper */ class?: string } -const { title, rtl = false, class: className } = Astro.props +const { title, rtl = false, showLogo = true, showCard = true, columns, zoom = 1, pageLibs = [], class: className } = Astro.props +const targetStyle = [columns && `max-width: ${columns * 310}px`, `zoom: ${zoom}`].filter(Boolean).join('; ') const rtlSuffix = rtl ? '.rtl' : '' +// core/dist only has .min. files after a full `pnpm build`; `astro dev` (this +// package's own dev-prepare-less dev script) runs against whatever core's own +// dev watcher last emitted, which is unminified — so match the served core +// build instead of hardcoding one variant. +const min = import.meta.env.DEV ? '' : '.min' + +type Lib = { npm?: string; js?: string[]; css?: string[] } +const pageLibEntries = Object.entries(libs as Record).filter(([name]) => pageLibs.includes(name)) +const libHref = (lib: Lib, file: string) => `/dist/libs/${lib.npm}/${file}` +const libCssFiles = pageLibEntries.flatMap(([, lib]) => (lib.css ?? []).map((file) => libHref(lib, file))) +const libJsFiles = pageLibEntries.flatMap(([, lib]) => (lib.js ?? []).map((file) => libHref(lib, file))) --- @@ -26,7 +56,9 @@ const rtlSuffix = rtl ? '.rtl' : '' - + + + {libCssFiles.map((href) => )} - + -
- +
+
+ { + showLogo && ( + + ) + } + +
+ +
+ + {showLogo && + + +
- + {libJsFiles.map((src) => + + + +