From 118ca4bd00bd89f05a3c92673c57a1d6e10d0c53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Thu, 13 Aug 2026 01:19:12 +0200 Subject: [PATCH] Move demo page titles, actions and docs links into the layout header (#2867) --- .changeset/card-title-heading-level.md | 5 +++ .changeset/demo-page-titles-in-header.md | 5 +++ .changeset/page-header-actions-slot.md | 5 +++ .changeset/preview-meta-description.md | 5 +++ preview/pages/2-step-verification-code.astro | 3 +- preview/pages/2-step-verification.astro | 3 +- preview/pages/accordion.astro | 13 ++----- preview/pages/activity.astro | 2 +- preview/pages/alerts.astro | 25 +++++-------- preview/pages/avatars.astro | 36 ++++++++----------- preview/pages/badges.astro | 13 ++----- preview/pages/blank.astro | 2 +- preview/pages/buttons.astro | 12 ++----- preview/pages/card-actions.astro | 6 ++-- preview/pages/card-gradients.astro | 2 +- preview/pages/cards-masonry.astro | 2 +- preview/pages/cards.astro | 2 +- preview/pages/carousel.astro | 13 ++----- preview/pages/changelog.astro | 2 +- preview/pages/charts.astro | 2 +- preview/pages/chat.astro | 2 +- preview/pages/colorpicker.astro | 2 +- preview/pages/colors.astro | 13 ++----- preview/pages/cookie-banner.astro | 2 +- preview/pages/dashboard-crm.astro | 2 +- preview/pages/dashboard-crypto.astro | 23 ++++++------ preview/pages/datagrid.astro | 13 ++----- preview/pages/datatables.astro | 2 +- preview/pages/dropdowns.astro | 13 ++----- preview/pages/dropzone.astro | 2 +- preview/pages/empty.astro | 2 +- preview/pages/faq.astro | 4 ++- preview/pages/flags.astro | 5 +-- preview/pages/form-elements.astro | 4 +-- preview/pages/fullcalendar.astro | 2 +- preview/pages/gallery.astro | 4 ++- preview/pages/icons.astro | 2 +- preview/pages/illustrations.astro | 2 +- preview/pages/index.astro | 4 ++- preview/pages/inline-player.astro | 2 +- preview/pages/invoice.astro | 4 ++- preview/pages/job-listing.astro | 4 ++- preview/pages/layout-boxed.astro | 4 ++- preview/pages/layout-combo.astro | 4 ++- preview/pages/layout-condensed.astro | 4 ++- preview/pages/layout-fluid-vertical.astro | 4 ++- preview/pages/layout-fluid.astro | 4 ++- preview/pages/layout-horizontal.astro | 4 ++- preview/pages/layout-navbar-dark.astro | 4 ++- preview/pages/layout-navbar-overlap.astro | 4 ++- preview/pages/layout-navbar-sticky.astro | 4 ++- preview/pages/layout-rtl.astro | 4 ++- preview/pages/layout-vertical-right.astro | 4 ++- .../pages/layout-vertical-transparent.astro | 4 ++- preview/pages/layout-vertical.astro | 4 ++- preview/pages/lightbox.astro | 2 +- preview/pages/lists.astro | 13 ++----- preview/pages/logs.astro | 2 +- preview/pages/map-fullsize.astro | 2 +- preview/pages/maps-vector.astro | 2 +- preview/pages/maps.astro | 5 +-- preview/pages/modals.astro | 13 ++----- preview/pages/music.astro | 2 +- preview/pages/navigation.astro | 13 ++----- preview/pages/offcanvas.astro | 14 ++------ preview/pages/pagination.astro | 13 ++----- preview/pages/patterns.astro | 13 ++----- preview/pages/payment-providers.astro | 7 ++-- preview/pages/photogrid.astro | 2 +- preview/pages/placeholder.astro | 13 ++----- preview/pages/playground-categories.astro | 2 +- preview/pages/playground-layout.astro | 4 +-- preview/pages/playground.astro | 3 +- preview/pages/pricing-table.astro | 2 +- preview/pages/pricing.astro | 2 +- preview/pages/profile.astro | 2 +- preview/pages/progress.astro | 2 +- preview/pages/prose.astro | 13 ++----- preview/pages/scroll-spy.astro | 2 +- preview/pages/search-results.astro | 2 +- preview/pages/segmented-control.astro | 13 ++----- preview/pages/signatures.astro | 2 +- preview/pages/social-icons.astro | 13 ++----- preview/pages/stars-rating.astro | 13 ++----- preview/pages/steps.astro | 13 ++----- preview/pages/tables.astro | 2 +- preview/pages/tabs.astro | 13 ++----- preview/pages/tags.astro | 13 ++----- preview/pages/tasks-list.astro | 5 +-- preview/pages/tasks.astro | 4 ++- preview/pages/text-features.astro | 2 +- preview/pages/toasts.astro | 13 ++----- preview/pages/tour.astro | 2 +- preview/pages/tracking.astro | 13 ++----- preview/pages/typography.astro | 2 +- preview/pages/users.astro | 8 +++-- preview/pages/widgets.astro | 2 +- preview/pages/wysiwyg.astro | 2 +- shared/components/cards/AuthLockCard.astro | 2 +- .../cards/AuthenticateAccount.astro | 3 +- shared/components/cards/Card.astro | 9 +++-- shared/components/cards/CardImage.astro | 9 ++++- shared/components/cards/CardTabs.astro | 2 +- shared/components/cards/ChurnRisk.astro | 3 +- .../cards/DevelopmentActivity.astro | 3 +- .../components/cards/ForgotPasswordCard.astro | 3 +- shared/components/cards/Icons.astro | 3 +- shared/components/cards/MapVectorCard.astro | 3 +- shared/components/cards/ProjectProgress.astro | 5 +-- shared/components/cards/SignUpCard.astro | 3 +- shared/components/cards/Subscribe.astro | 5 +-- shared/components/cards/TasksDue.astro | 3 +- shared/components/cards/TeamLeaderboard.astro | 3 +- shared/components/cards/UserCardBg.astro | 3 +- shared/components/cards/UserCardBig.astro | 3 +- shared/components/cards/UserInfo.astro | 3 +- shared/components/cards/Weather.astro | 3 +- .../cards/charts/PipelineFunnel.astro | 5 +-- shared/components/layout/PageHeader.astro | 23 +++--------- shared/components/navbar/NavbarSideApps.astro | 3 +- shared/layouts/BaseLayout.astro | 5 ++- shared/layouts/DefaultLayout.astro | 19 +++++----- shared/ui/AdvancedTable.astro | 3 +- shared/ui/CardHeader.astro | 5 +-- shared/ui/CardTitle.astro | 4 ++- shared/ui/DocsLink.astro | 21 +++++++++++ 126 files changed, 331 insertions(+), 436 deletions(-) create mode 100644 .changeset/card-title-heading-level.md create mode 100644 .changeset/demo-page-titles-in-header.md create mode 100644 .changeset/page-header-actions-slot.md create mode 100644 .changeset/preview-meta-description.md create mode 100644 shared/ui/DocsLink.astro 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} + +