Is there a way to add a page in Astro with docs style rendering of content

Question

I am totally new to UI and Astro project. I am using astrowind (astro framework) theme to modify the website.

I am looking to develop a site which will have pages of content about the site/product and also wanted to include a documentation on a single page with contents rendering when the user clicks a sidebar.

I know there is a separate framework for rendering docs only (docs.astro.com). But is there a way to integrate this together and deploy it as a single site ?

Something like below, with clickable links on left side navbar to new display content on right. May be someone has worked on similar component before.

PS: I have no skill to develop a component, but can try if there are any references.

enter image description here

• mb21: Perhaps you're looking for starlight.astro.build ?
• John Williams: Thanks, I thought starlight was a standalone docs page. I went through the documentation and was able to achieve this. Thanks a lot.

Answer 1

So, I was able to integrate starlight with astrowind using the documentation given in the site.

Content from astro.config.ts

integrations: [
tailwind({
 applyBaseStyles: false,
}),
sitemap(),
starlight({
 title: 'Docs',
 tableOfContents: false,
 sidebar: [
 // A single link item labelled "Home".
 { label: 'Home', link: '/guides' },
 { label: 'Home', link: '/guides/about' },
 ],
}),
mdx(),

Added below in config.ts

export const collections = {
 post: postCollection,
 docs: defineCollection({ schema: docsSchema() }),
};

Then the src/content directory structure,

├── content
│ ├── config.ts
│ ├── docs
│ │ └── guides
│ │ ├── about.mdx
│ │ └── index.mdx
│ └── post
│ ├── astrowind-template-in-depth.mdx