diff --git a/.changeset/card-title-heading-level.md b/.changeset/card-title-heading-level.md new file mode 100644 index 000000000..b0a91f010 --- /dev/null +++ b/.changeset/card-title-heading-level.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Fixed heading order by making `CardTitle` and `CardHeader` render `h2`, so cards no longer skip a level under the page `h1`. diff --git a/.changeset/demo-page-titles-in-header.md b/.changeset/demo-page-titles-in-header.md new file mode 100644 index 000000000..3593d02d3 --- /dev/null +++ b/.changeset/demo-page-titles-in-header.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": minor +--- + +Updated the demo pages to show their title and description in the page header, with `pageHeader` falling back to `title`. diff --git a/.changeset/page-header-actions-slot.md b/.changeset/page-header-actions-slot.md new file mode 100644 index 000000000..51b7eea4c --- /dev/null +++ b/.changeset/page-header-actions-slot.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": minor +--- + +Removed the `actions` preset prop from `DefaultLayout`; pages now fill a `page-header-actions` slot instead. diff --git a/.changeset/preview-meta-description.md b/.changeset/preview-meta-description.md new file mode 100644 index 000000000..f58028141 --- /dev/null +++ b/.changeset/preview-meta-description.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Added a `meta` description tag, filled from the page `description` prop. diff --git a/preview/pages/2-step-verification-code.astro b/preview/pages/2-step-verification-code.astro index 28bc7cb4a..1321b0ca6 100644 --- a/preview/pages/2-step-verification-code.astro +++ b/preview/pages/2-step-verification-code.astro @@ -4,12 +4,13 @@ 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' +import CardTitle from '@ui/CardTitle.astro' ---
-

Authenticate Your Account

+ Authenticate Your Account

Please confirm your account by entering the authorization code sent to +1 856-672-8552. diff --git a/preview/pages/2-step-verification.astro b/preview/pages/2-step-verification.astro index 8fb84688b..1a27391a4 100644 --- a/preview/pages/2-step-verification.astro +++ b/preview/pages/2-step-verification.astro @@ -6,12 +6,13 @@ import SingleLayout from '@shared/layouts/SingleLayout.astro' import Button from '@ui/Button.astro' import FormGroup from '@ui/FormGroup.astro' import flags from '@data/flags.json' +import CardTitle from '@ui/CardTitle.astro' ---

-

2-Step Verification

+ 2-Step Verification diff --git a/shared/components/cards/Subscribe.astro b/shared/components/cards/Subscribe.astro index 887d46054..a993c2559 100644 --- a/shared/components/cards/Subscribe.astro +++ b/shared/components/cards/Subscribe.astro @@ -3,6 +3,7 @@ import Avatar from '@ui/Avatar.astro' import CardDropdown from '@ui/CardDropdown.astro' import people from '@data/people.json' import { requireIndex } from '@shared/lib/array' +import CardTitle from '@ui/CardTitle.astro' interface Person { full_name?: string @@ -26,9 +27,9 @@ const person = requireIndex(people as Person[], personId)
-

+ {person.full_name} -

+
Working in {person.company}
diff --git a/shared/components/cards/TasksDue.astro b/shared/components/cards/TasksDue.astro index c57f417d4..6fff3b172 100644 --- a/shared/components/cards/TasksDue.astro +++ b/shared/components/cards/TasksDue.astro @@ -4,6 +4,7 @@ import Icon from '@ui/Icon.astro' import ListGroup from '@ui/ListGroup.astro' import ListGroupItem from '@ui/ListGroupItem.astro' import crmDashboard from '@data/crm-dashboard.json' +import CardTitle from '@ui/CardTitle.astro' const tasks = crmDashboard.tasks_due --- @@ -11,7 +12,7 @@ const tasks = crmDashboard.tasks_due
-

{tasks.title}

+ {tasks.title} {tasks.badge}
diff --git a/shared/components/cards/TeamLeaderboard.astro b/shared/components/cards/TeamLeaderboard.astro index e94fe859f..8041f802e 100644 --- a/shared/components/cards/TeamLeaderboard.astro +++ b/shared/components/cards/TeamLeaderboard.astro @@ -5,6 +5,7 @@ import ListGroup from '@ui/ListGroup.astro' import ListGroupItem from '@ui/ListGroupItem.astro' import Progress from '@ui/Progress.astro' import crmDashboard from '@data/crm-dashboard.json' +import CardTitle from '@ui/CardTitle.astro' const leaderboard = crmDashboard.leaderboard --- @@ -12,7 +13,7 @@ const leaderboard = crmDashboard.leaderboard
-

Team leaderboard

+ Team leaderboard Q2 - May 1, 2026
diff --git a/shared/components/cards/UserCardBg.astro b/shared/components/cards/UserCardBg.astro index 23aa1f3e8..b74d14f36 100644 --- a/shared/components/cards/UserCardBg.astro +++ b/shared/components/cards/UserCardBg.astro @@ -5,6 +5,7 @@ import Avatar from '@ui/Avatar.astro' import people from '@data/people.json' import photos from '@data/photos.json' import { requireIndex } from '@shared/lib/array' +import CardTitle from '@ui/CardTitle.astro' interface Person { full_name?: string @@ -33,7 +34,7 @@ const photo = requireIndex(photos as Photo[], personId)
-

{person.full_name}

+ {person.full_name}
{person.job_title}
diff --git a/shared/components/cards/UserCardBig.astro b/shared/components/cards/UserCardBig.astro index 15c834b05..cd520fc9b 100644 --- a/shared/components/cards/UserCardBig.astro +++ b/shared/components/cards/UserCardBig.astro @@ -2,6 +2,7 @@ import Avatar from '@ui/Avatar.astro' import people from '@data/people.json' import { requireIndex } from '@shared/lib/array' +import CardTitle from '@ui/CardTitle.astro' interface Person { full_name?: string @@ -23,7 +24,7 @@ const person = requireIndex(people as Person[], personId)
-

{person.full_name}

+ {person.full_name}
{person.job_title}
View full profile diff --git a/shared/components/cards/UserInfo.astro b/shared/components/cards/UserInfo.astro index 4c2f8650f..43ab8a4a3 100644 --- a/shared/components/cards/UserInfo.astro +++ b/shared/components/cards/UserInfo.astro @@ -4,6 +4,7 @@ import Icon from '@ui/Icon.astro' import Flag from '@ui/Flag.astro' import people from '@data/people.json' import { requireIndex } from '@shared/lib/array' +import CardTitle from '@ui/CardTitle.astro' interface Person { university?: string @@ -21,7 +22,7 @@ const person = requireIndex(people as Person[], 24)
-

Basic info

+ Basic info
Went to: {person.university} diff --git a/shared/components/cards/Weather.astro b/shared/components/cards/Weather.astro index fe578a442..392c70693 100644 --- a/shared/components/cards/Weather.astro +++ b/shared/components/cards/Weather.astro @@ -1,5 +1,6 @@ --- import Icon from '@ui/Icon.astro' +import CardTitle from '@ui/CardTitle.astro' interface Props { city?: string @@ -18,7 +19,7 @@ const { city = 'Warsaw', temperature = 20, color = 'blue', icon = 'cloud-rain',
-

{city}

+ {city}
diff --git a/shared/components/cards/charts/PipelineFunnel.astro b/shared/components/cards/charts/PipelineFunnel.astro index 71b741bdd..480b4420d 100644 --- a/shared/components/cards/charts/PipelineFunnel.astro +++ b/shared/components/cards/charts/PipelineFunnel.astro @@ -1,18 +1,19 @@ --- import Progress from '@ui/Progress.astro' import crmDashboard from '@data/crm-dashboard.json' +import CardTitle from '@ui/CardTitle.astro' const funnel = crmDashboard.pipeline_funnel ---
-

+
{funnel.title}
{funnel.period}
-

+
{ funnel.items.map((item) => ( diff --git a/shared/components/layout/PageHeader.astro b/shared/components/layout/PageHeader.astro index 7b4e33c26..ad460fa13 100644 --- a/shared/components/layout/PageHeader.astro +++ b/shared/components/layout/PageHeader.astro @@ -2,13 +2,6 @@ // 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 HeaderActionsButtons from './HeaderActionsButtons.astro'; -import HeaderActionsPrint from './HeaderActionsPrint.astro'; -import HeaderActionsPhotos from './HeaderActionsPhotos.astro'; -import HeaderActionsBreadcrumb from './HeaderActionsBreadcrumb.astro'; -import HeaderActionsAddBoard from './HeaderActionsAddBoard.astro'; -import HeaderActionsAddJob from './HeaderActionsAddJob.astro'; -import HeaderActionsUsers from './HeaderActionsUsers.astro'; import HeaderProfile from './HeaderProfile.astro'; import HeaderUptime from './HeaderUptime.astro'; import PageTitle from '@ui/PageTitle.astro'; @@ -20,8 +13,6 @@ interface Props { pretitle?: string | undefined; /** page-header-description */ description?: string | undefined; - /** page-header-actions — name of an include from layout/header-actions/, e.g. "buttons" */ - actions?: string | undefined; /** page-header-class */ class?: string; /** page-header-file — name of an include from layout/headers/, e.g. "profile" */ @@ -30,7 +21,9 @@ interface Props { textWhite?: boolean | undefined; } -const { title, pretitle, description, actions, class: className, file, textWhite } = Astro.props; +const { title, pretitle, description, class: className, file, textWhite } = Astro.props; + +const actionsSlot = ((await Astro.slots.render('actions')) ?? '').trim(); --- {file === 'profile' && } @@ -54,17 +47,11 @@ const { title, pretitle, description, actions, class: className, file, textWhite {description &&
{description}
}
- {actions && ( + {actionsSlot && (
- {actions === 'buttons' && } - {actions === 'print' && } - {actions === 'photos' && } - {actions === 'breadcrumb' && } - {actions === 'add-board' && } - {actions === 'add-job' && } - {actions === 'users' && } +
)} diff --git a/shared/components/navbar/NavbarSideApps.astro b/shared/components/navbar/NavbarSideApps.astro index a321aba6e..857e7cd94 100644 --- a/shared/components/navbar/NavbarSideApps.astro +++ b/shared/components/navbar/NavbarSideApps.astro @@ -3,6 +3,7 @@ import { staticPath } from '@shared/lib/assets' import CardActions from '@ui/CardActions.astro' import Icon from '@ui/Icon.astro' import brands from '@data/brands.json' +import CardTitle from '@ui/CardTitle.astro' --- @@ -14,7 +15,7 @@ import brands from '@data/brands.json'
-

My Apps

+ My Apps diff --git a/shared/layouts/BaseLayout.astro b/shared/layouts/BaseLayout.astro index 619c977e7..ec1db65b2 100644 --- a/shared/layouts/BaseLayout.astro +++ b/shared/layouts/BaseLayout.astro @@ -15,9 +15,11 @@ interface Props { rtl?: boolean | undefined /** Relative asset base: '.' for root pages, '..' one level deep */ base?: string + /** — falls back to the site description */ + description?: string | undefined } -const { title, pageLibs = [], bodyClass, rtl = false, base = '.' } = Astro.props +const { title, pageLibs = [], bodyClass, rtl = false, base = '.', description } = Astro.props // Development build: unminified assets, dev favicon. const environment = 'development' @@ -44,6 +46,7 @@ const libJsFiles = (head: boolean) => pageLibEntries.filter(([, lib]) => Boolean {title ? `${title} - ` : ''}{site.title} - {site.descriptionShort} + diff --git a/shared/layouts/DefaultLayout.astro b/shared/layouts/DefaultLayout.astro index 38137c0a2..1ad7870ff 100644 --- a/shared/layouts/DefaultLayout.astro +++ b/shared/layouts/DefaultLayout.astro @@ -10,16 +10,14 @@ interface Props { title?: string | undefined /** Script/CSS library keys passed to BaseLayout */ pageLibs?: string[] - /** page-header — the title in the page header */ - pageHeader?: string | undefined + /** page-header — the title in the page header. Defaults to `title`; pass false for no page header */ + pageHeader?: string | false | undefined /** page-header-file — renders a layout/headers/{file} component instead of the title block */ pageHeaderFile?: string | undefined /** page-header-pretitle */ pretitle?: string | undefined /** page-header-description */ description?: string | undefined - /** page-header-actions, e.g. "buttons" */ - actions?: string | undefined /** page-menu from the front matter, e.g. "layout.vertical" — active menu entry */ pageMenu?: string | undefined /** layout-sidebar */ @@ -56,11 +54,14 @@ interface Props { 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, pageMenu, sidebar, sidebarDark, hideTopbar, containerCentered, wrapperFull, containerClass, bodyClass, rtl, sidebarEnd, navbarTransparent, navbarCondensed, navbarDark, navbarOverlap, navbarSticky, navbarHideBrand, navbarClass } = Astro.props + +// Most pages repeat the page title verbatim, so `pageHeader` falls back to `title`. +// Pages that deliberately have no header (blank, playgrounds) pass pageHeader={false}. +const headerTitle = pageHeader === false ? undefined : (pageHeader ?? title) --- - +
{ sidebar && ( @@ -84,7 +85,9 @@ const { title, pageLibs, pageHeader, pageHeaderFile, pretitle, description, acti
- + + + diff --git a/shared/ui/AdvancedTable.astro b/shared/ui/AdvancedTable.astro index ea8b9595f..b72bd47b1 100644 --- a/shared/ui/AdvancedTable.astro +++ b/shared/ui/AdvancedTable.astro @@ -11,6 +11,7 @@ import people from '@data/people.json' import tableProperties from '@data/table-properties.json' import CaptureScript from '../components/CaptureScript.astro' import { requireIndex } from '@shared/lib/array' +import CardTitle from '@ui/CardTitle.astro' interface Props { id?: string @@ -55,7 +56,7 @@ const sortKeys = headers.map((header) => header['data-sort'])
-

Employee

+ Employee

Table description.

diff --git a/shared/ui/CardHeader.astro b/shared/ui/CardHeader.astro index ccd8abaff..a82946267 100644 --- a/shared/ui/CardHeader.astro +++ b/shared/ui/CardHeader.astro @@ -1,7 +1,7 @@ --- import type { HTMLTag } from 'astro/types' -// Card header (.card-header) with an optional h3.card-title; slot renders after the title. +// Card header (.card-header) with an optional h2.card-title; slot renders after the title. // `as` must stay out of the Props body: Astro's frontmatter scanner bails on a member // literally named `as` and silently falls back to untyped props. @@ -12,7 +12,8 @@ interface Props extends PolymorphicProps { class?: string } -const { title, as: TitleTag = 'h3', class: className }: Props = Astro.props +// h2 to match CardTitle — cards sit directly under the page h1. +const { title, as: TitleTag = 'h2', class: className }: Props = Astro.props ---
diff --git a/shared/ui/CardTitle.astro b/shared/ui/CardTitle.astro index 25f953ec7..22265d54d 100644 --- a/shared/ui/CardTitle.astro +++ b/shared/ui/CardTitle.astro @@ -12,7 +12,9 @@ interface Props extends PolymorphicProps { id?: string } -const { as: Tag = 'h3', class: className, id }: Props = Astro.props +// h2 by default: cards sit directly under the page h1, so h3 would skip a level. +// Pass as="h3" for a card nested under its own h2 section heading. +const { as: Tag = 'h2', class: className, id }: Props = Astro.props --- diff --git a/shared/ui/DocsLink.astro b/shared/ui/DocsLink.astro new file mode 100644 index 000000000..c92840f1f --- /dev/null +++ b/shared/ui/DocsLink.astro @@ -0,0 +1,21 @@ +--- +import Icon from '@ui/Icon.astro' +import { getDocsUrl } from '@shared/lib/string-format' + +// Link from a demo page to its documentation page, e.g. . + +interface Props { + /** Docs path, appended to the docs base URL */ + path: string + /** Link label */ + text?: string + class?: string +} + +const { path, text = 'Docs', class: className }: Props = Astro.props +--- + + + {text} + +