--- // Chrome-free layout for component screenshots: just @tabler/core CSS/JS // 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 Logo from '@shared/components/navbar/Logo.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 /** the Tabler logo at the bottom of the frame */ showLogo?: 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[] /** core CSS plugins (site.cssPlugins), e.g. ['socials'] for tabler-socials.css */ cssPlugins?: string[] /** extra classes on the component wrapper */ class?: string } const { title, rtl = false, showLogo = true, columns, zoom = 1, pageLibs = [], cssPlugins = [], class: className } = Astro.props // tabler-vendors.css carries the third-party styling (the ApexCharts tokens // among them, which is what themes a chart's labels, grid and legend for the // color mode). A page that pulls a lib in needs it, so it is added rather than // left to every page to remember — the preview loads it on every page. const stylePlugins = [...new Set([...(pageLibs.length > 0 ? ['vendors'] : []), ...cssPlugins])] 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))) --- {title} - Tabler screenshots {stylePlugins.map((plugin) => )} {libCssFiles.map((href) => )}
{ showLogo && ( ) }
{libJsFiles.map((src) =>