diff options
Diffstat (limited to 'docs/src/pages')
| -rw-r--r-- | docs/src/pages/demo.astro | 14 | ||||
| -rw-r--r-- | docs/src/pages/examples-and-templates.astro | 33 | ||||
| -rw-r--r-- | docs/src/pages/examples.astro | 87 | ||||
| -rw-r--r-- | docs/src/pages/examples.md | 8 | ||||
| -rw-r--r-- | docs/src/pages/templates/[name].astro | 71 |
5 files changed, 205 insertions, 8 deletions
diff --git a/docs/src/pages/demo.astro b/docs/src/pages/demo.astro new file mode 100644 index 000000000..c60a9e05d --- /dev/null +++ b/docs/src/pages/demo.astro @@ -0,0 +1,14 @@ +--- +import Layout from '../layouts/ExamplesLayout.astro' +import templateData from '../components/Examples/function-generate-examples-data.js' +import Card from '../components/Examples/Card.astro' + +let data = await templateData() + +--- + + <Layout content={data}> + {data.filter(item=> (item.pkgJSON?.keywords?.includes('create-astro'))) + .sort((a,b)=> ((a.name === 'starter')? -1 : 1)) + .map((item)=>(<Card data={item}/>))} + </Layout> diff --git a/docs/src/pages/examples-and-templates.astro b/docs/src/pages/examples-and-templates.astro new file mode 100644 index 000000000..aff58a932 --- /dev/null +++ b/docs/src/pages/examples-and-templates.astro @@ -0,0 +1,33 @@ +--- + +import Layout from '../layouts/MainLayout.astro'; +import {Markdown} from 'astro/components' +import Examples from '../components/Examples/Examples.astro' + +import Thumbnail from '../components/Examples/Thumbnail.astro' +const githubEditUrl = "https://github.com/snowpackjs/astro/tree/main/docs/src/pages/examples-and-templates.astro" +const title = 'Examples & Templates' + + +--- + +<Layout content={{title:title,astro:{headers:examplesHeaders},page:'/examples-and-templates',githubEditUrl:githubEditUrl}}> + <Markdown> + + We encourage you to freely explore our collection of ready-made templates containing a multitude of examples on how to apply Astro to a variety of use-cases. i.e: various UI frameworks, State Management Tools, and of course TailwindCSS + </Markdown> + <!-- <Examples/> --> + <Thumbnail/> + <Markdown> + + ## Community Templates + + Visit [Awesome-Astro](https://github.com/one-aalam/awesome-astro) for a full list of community examples. You can use `npm init astro` to check out any of the community examples + + ```bash + npm init astro -- --template [GITHUB_USER]/[REPO_NAME] + npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example + ``` + </Markdown> + +</Layout> diff --git a/docs/src/pages/examples.astro b/docs/src/pages/examples.astro new file mode 100644 index 000000000..6128b2e20 --- /dev/null +++ b/docs/src/pages/examples.astro @@ -0,0 +1,87 @@ +--- +import Layout from '../layouts/ExamplesLayout.astro' +import Card from '../components/Examples/Card.astro' +import {Markdown} from 'astro/components' +import templateData from '../components/Examples/Functions/get-examples-data.js' +let data = await templateData() +let headers = {} +--- +<Layout content={data}> + <Markdown> + # Examples & Templates + We encourage you to freely explore our collection of ready-made templates containing a multitude of examples on how to apply Astro to a variety of use-cases. i.e: various UI frameworks, State Management Tools, and of course TailwindCSS. + + + To use any one of our templates simply instruct `create-astro`by using: + + ```bash + npm init astro my-astro-project -- -- template [template] + ``` + </Markdown> + <Markdown> + ## `create-astro` Templates + + Below is a list of Astro's templates that are available directly through the [`create-astro`](/installation) install wizard. + </Markdown> + <div class="flexbox"> + {data.filter(item=> (item.pkgJSON?.keywords?.includes('create-astro'))) + .sort((a,b)=> ((a.name === 'starter')? -1 : 1)) + .map((item)=>(<Card data={item}/>))} + </div> + <Markdown> + ## UI Frameworks + + Astro is always growing its support for the vast plethora of UI frameworks that exist within the JavaScript ecosystem. Below are demonstrations on how UI frameworks work inside Astro + </Markdown> + <div class="flexbox"> + {data.filter(item=> (item.pkgJSON?.keywords?.includes('framework'))) + .sort((a,b)=> (b.name > a.name) ? 1 : -1) + .sort((a,b)=> ((a.name === 'framework-multiple') ? 0 : -1)) + .map((item)=>(<Card data={item}/>))} + </div> + <Markdown> + ## Kitchen Sink + + Here is a further set of examples that have been created by our developer team, to help our users with working examples on using Markdown with Astro. Support for plugins such as Nanostores and TailwindCSS + </Markdown> + <div class="flexbox"> + {data.filter(item=> (item.pkgJSON?.keywords?.includes('kitchen-sink'))) + .map((item)=>(<Card data={item}/>))} + </div> + <Markdown> + + ## Community Templates + + Visit [Awesome-Astro](https://github.com/one-aalam/awesome-astro) for a full list of community examples. + + You can use `npm init astro` to pull down and utilise any of the wonderful community examples + </Markdown> + <Markdown > + + ```bash + npm init astro -- --template [GITHUB_USER]/[REPO_NAME] + npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example + ``` + </Markdown> +</Layout> +<style lang="scss"> + .flexbox{ + display: flex; + flex-wrap: wrap; + flex-direction: row; + align-content: center; + justify-content: space-evenly; + align-items: center; + gap: 2rem; + margin-top:1.25rem; + scroll-behavior: smooth; + padding: 2 rem; + + } + .markdown{ + padding:2%; + line-height: 1.25rem; + } + + +</style> diff --git a/docs/src/pages/examples.md b/docs/src/pages/examples.md deleted file mode 100644 index 17af0bb87..000000000 --- a/docs/src/pages/examples.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -layout: ~/layouts/MainLayout.astro -title: Examples ---- - -If you prefer to learn by example, check out our [Examples Library](https://github.com/snowpackjs/astro/tree/main/examples) on GitHub. - -<!-- Once we merge astro-docs back into the main repo, we can actually fetch the list of examples at build-time by scanning the examples/ directory! --> diff --git a/docs/src/pages/templates/[name].astro b/docs/src/pages/templates/[name].astro new file mode 100644 index 000000000..7ad18b6c3 --- /dev/null +++ b/docs/src/pages/templates/[name].astro @@ -0,0 +1,71 @@ +--- +import templateData from '../../components/Examples/Functions/get-examples-data.js' +export async function getStaticPaths() { + const data = await templateData() + return data.map((example)=>({ + params:{ + name: example.name + }, + props:{ + example + } + })); +} +const {name} = Astro.request.params +const {example} = Astro.props +let {name:title,pkgJSON,readme=""} = example +const {description, keywords} = pkgJSON + +import Layout from '../../layouts/ExamplesLayout.astro' +import capitalise from '../../components/Examples/Functions/capitalise.js' +import formatName from '../../components/Examples/Functions/format-name.js' +import {Markdown} from 'astro/components' +import CollapsibleReadme from '../../components/Examples/CollapsibleReadme.astro' +import getHeroImg from '../../components/Examples/Functions/get-hero-img.js' +const getImg = await getHeroImg() + +let templateTitle = formatName(title) +--- +<Layout> + <div class="imgWrapper"> + <img class="post-img" src={`${getImg}`} alt="" height="600px" width="100%"> + <h1>{templateTitle} Template</h1> + </div> + <Markdown content = {description}/> + <Markdown> + ## Getting Started + + To start using the {templateTitle} template, enter the following into your terminal + </Markdown> + <pre data-lang="bash" class="lang-bash">npm init astro my-astro-project -- --template {name}</pre> + <div class="external-links"> + <a rel="noopener noreferrer nofollow" target="_blank" href={`https://githubbox.com/snowpackjs/astro/tree/main/examples/${name}`}> + <img src="https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox"/> + </a> + <a rel="noopener noreferrer nofollow" target="_blank" href={`https://app.netlify.com/start/deploy?repository=https://github.com/snowpackjs/astro/tree/main/examples/${name}`}> + <img src="https://www.netlify.com/img/deploy/button.svg"/> + </a> + + </div> + + <div> + <CollapsibleReadme label={`${templateTitle} Readme`} readme={readme}/> + </div> + +</Layout> +<style lang="scss"> + :root{ + scroll-behavior: smooth; + } + .external-links{ + margin-top: 2.5%; + display: flex; + flex-wrap: nowrap; + align-content: flex-start; + justify-content: space-evenly; + align-items: center; + } + .post-img{ + clip-path: inset(0 0 0 0 round 5% 20% 0 10%); + } +</style>
\ No newline at end of file |