diff options
Diffstat (limited to 'docs/src/pages/themes.astro')
| -rw-r--r-- | docs/src/pages/themes.astro | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/docs/src/pages/themes.astro b/docs/src/pages/themes.astro new file mode 100644 index 000000000..c4eea3067 --- /dev/null +++ b/docs/src/pages/themes.astro @@ -0,0 +1,45 @@ +--- +import Layout from '../layouts/MainLayout.astro'; +import Card from '../components/Examples/Card.astro'; +import {Markdown} from 'astro/components'; +import themes from '../data/themes.json'; +import components from '../data/components.json'; +--- +<style> + .card-grid { + display: grid; + grid-column-gap: 15px; + grid-row-gap: 15px; + grid-auto-flow: dense; + grid-template-columns: repeat(auto-fit,minmax(300px,1fr)) + } +</style> +<Layout content={{title: 'Themes'}} hideRightSidebar> + <Markdown> + ## Featured Themes + + Astro is supported by a growing ecosystem of third-pary themes and components. + </Markdown> + <div class="card-grid"> + + {themes.community.map((item)=>(<Card data={item} />))} + </div> + <Markdown> + ## Official Themes + + Astro maintains several official themes for common use-cases like documentation, portfolios, and more. + </Markdown> + <div class="card-grid"> + + {themes.official.map((item)=>(<Card data={item} />))} + </div> + <Markdown> + ## Featured Packages + + Our package ecosystem is growing! Check out these featured community packages. + </Markdown> + <div class="card-grid"> + + {components.community.map((item)=>(<Card data={item} />))} + </div> +</Layout>
\ No newline at end of file |