{"_id":"@dagilleland/layout-dashboard","_rev":"2-ca4927748e2608f44d6aed04b0e22bf8","name":"@dagilleland/layout-dashboard","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@dagilleland/layout-dashboard","version":"0.1.0","keywords":["astro","astro-component","starlight","starlight-layouts","layout","dashboard","widgets"],"author":{"name":"Dan Gilleland"},"license":"MIT","_id":"@dagilleland/layout-dashboard@0.1.0","maintainers":[{"name":"dagilleland","email":"dagilleland@shaw.ca"}],"homepage":"https://gilleland.ca/starlight-layouts/tutorial/dashboard-layout/","bugs":{"url":"https://github.com/dagilleland/starlight-layouts/issues"},"dist":{"shasum":"f1b5bc9715873e4fdb663317eb4cae7e3898f030","tarball":"https://registry.npmjs.org/@dagilleland/layout-dashboard/-/layout-dashboard-0.1.0.tgz","fileCount":8,"integrity":"sha512-KNJePP2IJhise+sH/1C2syKOWysDduvea3GUlSdLua5DhK3u5B6oF6StCAp1N2dWyvTNwzhTRKH4lhJcwNLY1Q==","signatures":[{"sig":"MEUCIEHJkLV9DaTaJIpZgwd/fxFqt+fu4ZVfKltNdUmRUYg3AiEA1c6v0KMS1XzIZfl8a/Wz3qTHxeBsVWzLYrk22uWO2yw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9865},"type":"module","exports":{".":"./index.ts","./*":"./*","./meta":"./layout.meta.ts"},"gitHead":"a44500c1ed7df886c888cfc0ca50878f53aeed71","_npmUser":{"name":"dagilleland","email":"dagilleland@shaw.ca"},"repository":{"url":"git+https://github.com/dagilleland/starlight-layouts.git","type":"git","directory":"packages/layout-dashboard"},"_npmVersion":"11.18.0","description":"Full-width Starlight layout for a widget grid, plus reusable DashboardGrid/Widget stat-tile components usable in any Starlight page. One of four layout packages from Starlight Layouts.","directories":{},"_nodeVersion":"24.13.1","_hasShrinkwrap":false,"peerDependencies":{"astro":"^7.0.2"},"_npmOperationalInternal":{"tmp":"tmp/layout-dashboard_0.1.0_1784178830520_0.48951762185914993","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@dagilleland/layout-dashboard","version":"0.1.1","description":"Full-width Starlight layout for a widget grid, plus reusable DashboardGrid/Widget stat-tile components usable in any Starlight page. One of four layout packages from Starlight Layouts.","type":"module","license":"MIT","author":{"name":"Dan Gilleland"},"homepage":"https://gilleland.ca/starlight-layouts/tutorial/dashboard-layout/","repository":{"type":"git","url":"git+https://github.com/dagilleland/starlight-layouts.git","directory":"packages/layout-dashboard"},"bugs":{"url":"https://github.com/dagilleland/starlight-layouts/issues"},"keywords":["astro","astro-component","starlight","starlight-layouts","layout","dashboard","widgets"],"exports":{".":"./index.ts","./meta":"./layout.meta.ts","./*":"./*"},"peerDependencies":{"astro":"^6.4.5 || ^7.0.2","@astrojs/starlight":">=0.40.0 <0.42.0"},"gitHead":"8fcdb26b5e2357a72b030f031104f0341fe8de66","_id":"@dagilleland/layout-dashboard@0.1.1","_nodeVersion":"24.13.1","_npmVersion":"11.18.0","dist":{"integrity":"sha512-OPnijuSA54ST796mj7tOhz5y1vqmIKDV+WLnwREtXNd0dptVuAryZWI/FkAW7kKplQEDxVlZpOvLKZbTEvreXQ==","shasum":"07c0aa5daa09cd119fe55b308a1561c8de623815","tarball":"https://registry.npmjs.org/@dagilleland/layout-dashboard/-/layout-dashboard-0.1.1.tgz","fileCount":8,"unpackedSize":10273,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHczpE1wl48t0UDEUk4xvNKv8ySaLU8IZ0xoxgqcuz8NAiEA6a77dk06iS818C3aiXVKEiHYKRv9KMu2++hmwT1fgGk="}]},"_npmUser":{"name":"dagilleland","email":"dagilleland@shaw.ca"},"directories":{},"maintainers":[{"name":"dagilleland","email":"dagilleland@shaw.ca"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/layout-dashboard_0.1.1_1784203148055_0.035073642485062395"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-16T05:13:50.420Z","modified":"2026-07-16T11:59:08.349Z","0.1.0":"2026-07-16T05:13:50.650Z","0.1.1":"2026-07-16T11:59:08.203Z"},"bugs":{"url":"https://github.com/dagilleland/starlight-layouts/issues"},"author":{"name":"Dan Gilleland"},"license":"MIT","homepage":"https://gilleland.ca/starlight-layouts/tutorial/dashboard-layout/","keywords":["astro","astro-component","starlight","starlight-layouts","layout","dashboard","widgets"],"repository":{"type":"git","url":"git+https://github.com/dagilleland/starlight-layouts.git","directory":"packages/layout-dashboard"},"description":"Full-width Starlight layout for a widget grid, plus reusable DashboardGrid/Widget stat-tile components usable in any Starlight page. One of four layout packages from Starlight Layouts.","maintainers":[{"name":"dagilleland","email":"dagilleland@shaw.ca"}],"readme":"# `@dagilleland/layout-dashboard`\n\nPart of [Starlight Layouts](https://gilleland.ca/starlight-layouts/) — a tutorial site for overriding Starlight components to build custom page layouts. This one fills a full-width page with a grid of stat widgets, the closest thing in this family to a traditional dashboard.\n\n## Compatibility\n\nWorks with **Astro 6.4.5+ or 7.x**, and **Starlight 0.40.0–0.41.x** — enforced by this package's own `peerDependencies`, and confirmed by actually building and rendering a test project against both ends of that range (Astro 6.4.8/Starlight 0.40.0, and Astro 7.0.9/Starlight 0.41.3), not just inferred from the declared versions.\n\n## What's here\n\n- `layout.meta.ts` — `{ id: 'dashboard', wide: true }`.\n- `DashboardGrid.astro` — a responsive CSS grid wrapper. Default slot only; no props. Collapses to a single column at print time (see below).\n- `Widget.astro` — a single stat tile. Props:\n - `title: string` — small caption label.\n - `value: string` — the headline number, rendered large.\n - `trend?: 'up' | 'down' | 'flat'` — pairs a color with a symbol (▲ / ▼ / •); never color alone, so the trend still reads for anyone scanning a black-and-white printout or with color-vision deficiency.\n - `delta?: string` — the comparison text shown next to the trend symbol, e.g. `\"4.2% vs last week\"`.\n - `wide?: boolean` — spans 2 grid columns instead of 1, for a page's headline metric. Resets to 1 column at print time regardless (see below).\n - Default slot — one short clarifying sentence, rendered small and muted below the value. Not for paragraphs.\n- `index.ts` — combines `layout.meta.ts` as `dashboardLayout`, and separately re-exports `DashboardGrid`/`Widget` — these two aren't used by any Starlight override at all, they're meant for direct use in your page content.\n\nUnlike the other three packages in this family, **the components here are useful immediately, without building any override at all** — see below.\n\n## Using this in a pnpm workspace monorepo\n\nSee [Building: dashboard layout](https://gilleland.ca/starlight-layouts/tutorial/dashboard-layout/) for the `wide`-layout override mechanism, and [Filling a dashboard](https://gilleland.ca/starlight-layouts/guides/dashboard-widgets/) for content-design tips — one widget per idea, lead with the number, establishing a size hierarchy with `wide`, keeping widget count sane (four to eight is comfortable), and more.\n\n## Using this standalone, in your own project\n\n**Prerequisites:** an Astro project using [Starlight](https://starlight.astro.build), with [Tailwind v4 set up per Starlight's own guide](https://starlight.astro.build/guides/css-and-tailwind/) — both components are styled entirely with Tailwind utility classes, referencing Starlight's own `--sl-color-*` custom properties so they automatically match your site's theme.\n\n### The easy part: use the widgets in any page, today\n\n`DashboardGrid` and `Widget` are just Astro components — install the package and import them, no override, no frontmatter field, no dispatcher:\n\n```sh\nnpm install @dagilleland/layout-dashboard\n```\n\nWorks the same with `pnpm add`, `yarn add`, or `bun add`.\n\n```mdx\nimport { DashboardGrid, Widget } from '@dagilleland/layout-dashboard';\n\n\n \n \n\n```\n\nThis renders inside your page's normal content column — sidebar, table of contents, and content-width cap all unaffected. Good enough if you just want a stat grid somewhere on an otherwise ordinary page.\n\n### The rest: the full-width \"dashboard\" treatment\n\nIf you also want the grid to span the full page width — no right-hand table of contents, no content-width cap — that's the same `wide` mechanism as [`layout-full-width`](../layout-full-width/README.md): a `TwoColumnContent` override and a `ContentPanel` override, both checking a `pageLayout` frontmatter field. See that package's README for the full code; everything there applies here unchanged, just with `'dashboard'` as the matched value instead of `'full-width'`.\n\n### Print handling, already covered\n\nBoth components carry `print:` variants so you don't have to think about this: `DashboardGrid` collapses to a single column at print time (multi-column CSS Grid pagination across physical page breaks is inconsistently supported across print engines; a plain vertical stack fragments predictably everywhere), and `Widget` gets `break-inside: avoid` so a tile never gets sliced across a page boundary. `wide` widgets also reset to a single column at print time, since a 2-column span inside a 1-column grid would otherwise force a malformed extra track. Colors need no special handling either — everything routes through `--sl-color-*`, which Starlight's own `print.css` already remaps to print-safe values.\n","readmeFilename":"README.md"}