astro/docs/src/pages/themes.astro
Fred K. Schott bf4ba7c3ee
📘 DOC: New "Publish to npm" documentation (#1323)
* new publish docs

* Minor cleanup

- Removed trailing whitespaces.
- Fixed a typo where `components` was misspelled.
- Moved all links to references at the bottom of the file.
- On line 162, I added bash for the file tree example as it was used for the previous example on line 29.
- Added a new line between examples that had a DO and DO NOT.
  - The code snippet from line 85 is a good example. Having that li'l space made it much nicer to read.

* cleanup publish docs

* add note on experimental nature of npm package support

Co-authored-by: Devin W. Leaman <git@4lch4.email>
2021-09-07 11:39:36 -07:00

44 lines
No EOL
1.5 KiB
Text

---
import Layout from '../layouts/MainLayout.astro';
import Card from '../components/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 Theme
</Markdown>
<div class="card-grid">
{themes.community.map((item)=>(<Card data={item} />))}
</div>
<Markdown>
## Official Themes
Astro maintains several official themes for documentation sites, 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. Search the entire collection [on npm.](https://www.npmjs.com/search?q=keywords%3Aastro-component)
</Markdown>
<div class="card-grid">
{components.community.map((item)=>(<Card data={item} />))}
</div>
<Markdown>
> Want to see your own work featured? [Share it to Discord!](https://astro.build/chat)
We'll often take our favorites from the `#showcase` channel and post them here.
</Markdown>
</Layout>