{"_id":"@dagilleland/layout-with-aside","_rev":"2-494adf9a2b8ecd4f2090bf8df5611ba0","name":"@dagilleland/layout-with-aside","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@dagilleland/layout-with-aside","version":"0.1.0","keywords":["astro","astro-component","starlight","starlight-layouts","layout"],"author":{"name":"Dan Gilleland"},"license":"MIT","_id":"@dagilleland/layout-with-aside@0.1.0","maintainers":[{"name":"dagilleland","email":"dagilleland@shaw.ca"}],"homepage":"https://gilleland.ca/starlight-layouts/tutorial/aside-layout/","bugs":{"url":"https://github.com/dagilleland/starlight-layouts/issues"},"dist":{"shasum":"c2105cae618297b4fe62464cf79cde5a64499bbd","tarball":"https://registry.npmjs.org/@dagilleland/layout-with-aside/-/layout-with-aside-0.1.0.tgz","fileCount":8,"integrity":"sha512-AvEt02GWK00G/xRbt4nLRtlpOvTdFEQHGRApmqgZeg3E90SQLd6JnBQpoOWvQTQeDxvz8xcAXrJmISRhi069vg==","signatures":[{"sig":"MEYCIQDl04rYE4RYbrSDRryTkuGX/pKYzKuce4Bt6bjj2bvFqQIhAI07MY7zmKi4Ee98+VLs6E6kUDVxP62/9BK3xWqJchGZ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9474},"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-with-aside"},"_npmVersion":"11.18.0","description":"Starlight layout that adds a callout panel alongside the default table of contents, without replacing it. One of four layout packages from Starlight Layouts.","directories":{},"_nodeVersion":"24.13.1","_hasShrinkwrap":false,"peerDependencies":{"astro":"^7.0.2"},"_npmOperationalInternal":{"tmp":"tmp/layout-with-aside_0.1.0_1784178806962_0.41536335633039","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@dagilleland/layout-with-aside","version":"0.1.1","description":"Starlight layout that adds a callout panel alongside the default table of contents, without replacing it. One of four layout packages from Starlight Layouts.","type":"module","license":"MIT","author":{"name":"Dan Gilleland"},"homepage":"https://gilleland.ca/starlight-layouts/tutorial/aside-layout/","repository":{"type":"git","url":"git+https://github.com/dagilleland/starlight-layouts.git","directory":"packages/layout-with-aside"},"bugs":{"url":"https://github.com/dagilleland/starlight-layouts/issues"},"keywords":["astro","astro-component","starlight","starlight-layouts","layout"],"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-with-aside@0.1.1","_nodeVersion":"24.13.1","_npmVersion":"11.18.0","dist":{"integrity":"sha512-DDJIB49fbGHxYPmVxNAhvGcG5IzZgcFcJUqhBczZS6lisCLB7+/akmsCDTzWfvW7fZ20qNwetHJpSFyvPB+0vw==","shasum":"13b9016cc4cd7243f9d876ea679a244d87e3cfcc","tarball":"https://registry.npmjs.org/@dagilleland/layout-with-aside/-/layout-with-aside-0.1.1.tgz","fileCount":8,"unpackedSize":9882,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDsAI6QkcXv4UQf3NKPw1D9bLUiFHfZ/BTHa5MU9CL9zAiEAi/oH19tqAOHy10+csdfmnM7lIZgkHU7CJoiPuo9mASQ="}]},"_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-with-aside_0.1.1_1784203125194_0.7311817031315337"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-16T05:13:26.847Z","modified":"2026-07-16T11:58:45.445Z","0.1.0":"2026-07-16T05:13:27.116Z","0.1.1":"2026-07-16T11:58:45.327Z"},"bugs":{"url":"https://github.com/dagilleland/starlight-layouts/issues"},"author":{"name":"Dan Gilleland"},"license":"MIT","homepage":"https://gilleland.ca/starlight-layouts/tutorial/aside-layout/","keywords":["astro","astro-component","starlight","starlight-layouts","layout"],"repository":{"type":"git","url":"git+https://github.com/dagilleland/starlight-layouts.git","directory":"packages/layout-with-aside"},"description":"Starlight layout that adds a callout panel alongside the default table of contents, without replacing it. One of four layout packages from Starlight Layouts.","maintainers":[{"name":"dagilleland","email":"dagilleland@shaw.ca"}],"readme":"# `@dagilleland/layout-with-aside`\n\nPart of [Starlight Layouts](https://gilleland.ca/starlight-layouts/) — a tutorial site for overriding Starlight components to build custom page layouts. Unlike the other three layouts in this family, this one doesn't remove anything from Starlight's default page — it *adds* a callout panel to the right-hand column, alongside the normal table of contents rather than in place of it.\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: 'with-aside' }`. No `wide` flag: this layout keeps Starlight's default two-column width, it only adds a panel to the existing right column.\n- `AsideCallout.astro` — a plain, Tailwind-styled callout box. Not a Starlight override itself — just an ordinary component. Props: `title: string` (heading text), default slot (body content).\n- `PageSidebarExtra.astro` — wraps `AsideCallout` with the specific markup and sizing this layout needs (see \"The width fix\" below), imports nothing beyond `AsideCallout`.\n- `index.ts` — combines `layout.meta.ts` and `PageSidebarExtra.astro` as `withAsideLayout`, and separately re-exports `AsideCallout` in case you want to reuse the callout style elsewhere (in page content, for instance).\n\nNeither `.astro` file renders anything by itself — they need a `PageSidebar` override that decides *whether* to render `PageSidebarExtra`, on top of Starlight's own default output. See \"Using this standalone\" below.\n\n### The width fix\n\n`PageSidebarExtra`'s `<style>` block sets an explicit `width` rather than relying on `width: 100%`. That's not a stylistic choice — it works around a real bug: the ancestor Starlight renders sidebar content into (`.right-sidebar`) is `position: fixed; width: 100%` with no ancestor establishing a containing block for fixed-position elements, so that `100%` resolves against the *viewport*, not the visible sidebar column. Starlight's own table-of-contents content is immune because it sets an explicit calculated width instead of a percentage; this component does the same, or its text runs on for a very long line before wrapping — invisible until it scrolls off past the edge of the page.\n\n## Using this in a pnpm workspace monorepo\n\nSee [Building: layout with aside](https://gilleland.ca/starlight-layouts/tutorial/aside-layout/) for the full walkthrough, including why this is a good example of an *additive* override (always renders Starlight's default, then layers on top) as opposed to the *replacing* overrides the other three layouts in this family use.\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/) — `AsideCallout` is styled entirely with Tailwind utility classes, referencing Starlight's own `--sl-color-*` custom properties so it automatically matches your site's theme.\n\n### 1. Install the package\n\n```sh\nnpm install @dagilleland/layout-with-aside\n```\n\nWorks the same with `pnpm add`, `yarn add`, or `bun add`.\n\n### 2. Add a frontmatter field\n\n```ts title=\"src/content.config.ts\"\nimport { defineCollection, z } from 'astro:content';\nimport { docsLoader } from '@astrojs/starlight/loaders';\nimport { docsSchema } from '@astrojs/starlight/schema';\n\nexport const collections = {\n  docs: defineCollection({\n    loader: docsLoader(),\n    schema: docsSchema({\n      extend: () =>\n        z.object({\n          // Not `layout` — see the note in layout-full-width's README.\n          pageLayout: z.enum(['with-aside']).optional(),\n        }),\n    }),\n  }),\n};\n```\n\n### 3. Override `PageSidebar`\n\nImport `PageSidebarExtra` straight from the installed package and dispatch to it:\n\n```astro title=\"src/components/overrides/PageSidebar.astro\"\n---\nimport Default from '@astrojs/starlight/components/PageSidebar.astro';\nimport PageSidebarExtra from '@dagilleland/layout-with-aside/PageSidebarExtra.astro';\n\nconst { entry } = Astro.locals.starlightRoute;\nconst withAside = entry.data.pageLayout === 'with-aside';\n---\n\n<Default />\n{withAside && <PageSidebarExtra />}\n```\n\n### 4. Register the override\n\n```js title=\"astro.config.mjs\"\nstarlight({\n  components: {\n    PageSidebar: './src/components/overrides/PageSidebar.astro',\n  },\n});\n```\n\n### 5. Use it on a page\n\n```md\n---\ntitle: A page with an aside\npageLayout: with-aside\n---\n```\n\nPages without `pageLayout: with-aside` render byte-for-byte the same right column Starlight would have produced on its own — this override never branches away from `<Default />`, only adds to it.\n","readmeFilename":"README.md"}