blob: 6128b2e203f82d6b03bcf2a695c81877ddd2091d (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
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>
|
