diff options
-rw-r--r-- | docs/src/config.ts | 1 | ||||
-rw-r--r-- | docs/src/pages/ja/themes.astro | 52 |
2 files changed, 53 insertions, 0 deletions
diff --git a/docs/src/config.ts b/docs/src/config.ts index c3d78dc8d..be31cbf7f 100644 --- a/docs/src/config.ts +++ b/docs/src/config.ts @@ -152,6 +152,7 @@ export const SIDEBAR = { { text: 'はじめに', link: 'ja/getting-started' }, { text: 'クイックスタート', link: 'ja/quick-start' }, { text: 'インストール', link: 'ja/installation' }, + { text: 'テーマ', link: 'ja/themes' }, ], ru: [ { text: 'Введение', header: true }, diff --git a/docs/src/pages/ja/themes.astro b/docs/src/pages/ja/themes.astro new file mode 100644 index 000000000..321b97317 --- /dev/null +++ b/docs/src/pages/ja/themes.astro @@ -0,0 +1,52 @@ +--- +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: 'テーマ'}} hideRightSidebar> + <Markdown> + ## 注目のテーマ + </Markdown> + <div class="card-grid"> + {themes.featured.map((item)=>(<Card data={item} />))} + </div> + <Markdown> + ## 公式テーマ + + Astroでは、ドキュメントサイトやポートフォリオなど、いくつかの公式テーマを用意しています。 + </Markdown> + <div class="card-grid"> + {themes.official.map((item)=>(<Card data={item} />))} + </div> + <Markdown> + ## コミュニティテーマ + + コミュニティが開発したテーマをご覧ください。 + </Markdown> + <div class="card-grid"> + {themes.community.map((item)=>(<Card data={item} />))} + </div> + <Markdown> + ## 注目のパッケージ + + 私たちのパッケージエコシステムは成長し続けています。注目のコミュニティパッケージをご覧ください。コレクション全体は[npm](https://www.npmjs.com/search?q=keywords%3Aastro-component)で検索できます。 + </Markdown> + <div class="card-grid"> + {components.community.map((item)=>(<Card data={item} />))} + </div> + <Markdown> + > 自分のテーマを紹介したい場合は、[Discordでシェアしてください!](https://astro.build/chat) + `#showcase` チャンネルに投稿されたお気に入りの作品をよくピックアップしています。 + </Markdown> +</Layout> |