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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
export const templatesList=[
{
category:"Templates",
title:"create-astro Templates",
children:[
{
text: "Starter Template",
github: "https://github.com/snowpackjs/astro/tree/main/examples/starter",
demo:"https://youtu.be/dQw4w9WgXcQ?t=42",
blurb:"Astro's Default Starter Project, an open-air sandbox. Letting you build your Astro Project as you see fit.",
command:"npm init astro my-astro-project -- --template starter"
},
{
text: "Doc\'s",
github: "https://github.com/snowpackjs/astro/tree/main/examples/docs",
demo:"",
blurb:"Astro's Documentation Template, is an example of a Documentation site built using Astro.",
command:"npm init astro my-astro-project -- --template docs"
},
{
text: "Blog",
github: "https://github.com/snowpackjs/astro/tree/main/examples/blog",
demo:"",
blurb:"Astro's Blog Template, is an example of a Blogging site built using Astro.",
command:"npm init astro my-astro-project -- --template blog"
},
{
text: "Blog with Multiple Authors",
github: "https://github.com/snowpackjs/astro/tree/main/examples/blog-multiple-authors",
demo:"",
blurb:"Astro's Multiple Authors Blogging Template, is an example of a Blogging site for Multiple Authors built using Astro.",
command:"npm init astro my-astro-project -- --template blog"
},
{
text: "Portfolio",
github: "https://github.com/snowpackjs/astro/tree/main/examples/portfolio",
demo:"",
blurb:"Astro's Portfolio Template, an example of a Portfolio site built using Astro.",
command:"npm init astro my-astro-project -- --template portfolio"
},
]
},
{
category:"Framework's",
title:"UI Frameworks",
children:[
{
text: "React + Astro",
github: "https://github.com/snowpackjs/astro/tree/main/examples/framework-react",
demo:"",
blurb:"An example on how to use React alongside Astro.",
command:"npm init astro my-astro-project -- --template framework-react"
},
{
text: "Vue + Astro",
github: "https://github.com/snowpackjs/astro/tree/main/examples/framework-vue",
demo:"",
blurb:"An example on how to use Vue with Astro.",
command:"npm init astro my-astro-project -- --template framework-vue"
},
{
text: "Svelte + Astro",
github: "https://github.com/snowpackjs/astro/tree/main/examples/framework-svelte",
demo:"",
blurb:"An example on how to use Svelte and Astro together.",
command:"npm init astro my-astro-project -- --template framework-svelte"
},
{
text: "Preact + Astro",
github: "https://github.com/snowpackjs/astro/tree/main/examples/framework-preact",
demo:"",
blurb:"An example on how to use Preact along with Astro.",
command:"npm init astro my-astro-project -- --template framework-preact"
},
{
text: "Solid + Astro",
github: "https://github.com/snowpackjs/astro/tree/main/examples/framework-solid",
demo:"",
blurb:"An example on how to use Solid together with Astro.",
command:"npm init astro my-astro-project -- --template framework-solid"
},
{
text: "Lit + Astro",
github: "https://github.com/snowpackjs/astro/tree/main/examples/framework-lit",
demo:"",
blurb:"An example on how to use Lit together with Astro.",
command:"npm init astro my-astro-project -- --template framework-lit"
},
{
text: "Multiple UI Frameworks Together As One, only with Astro",
github: "https://github.com/snowpackjs/astro/tree/main/examples/framework-multiple",
demo:"",
blurb:"Showcasing Astro's ability to utilise more than one framework at a time. \nHere we are demonstrating applying a combination of: React, Preact, Svelte & Vue Components all into one Astro project",
command:"npm init astro my-astro-project -- --template framework-multiple"
},
]
},
{
category:"Further Examples",
title:"Examples",
children:[
{
text: "Astro with Markdown",
github: "https://github.com/snowpackjs/astro/tree/main/examples/with-markdown",
demo:"",
blurb:"An example on how to use Markdown inside an Astro project.",
command:"npm init astro my-astro-project -- --template with-markdown"
},
{
text: "Astro with Markdown Plugins",
github: "https://github.com/snowpackjs/astro/tree/main/examples/with-markdown-plugins",
demo:"",
blurb:"An example on how to use the Markdown plugin: Rehype with Astro.",
command:"npm init astro my-astro-project -- --template with-markdown-plugins"
},
{
text: "Astro with NanoStores",
github: "https://github.com/snowpackjs/astro/tree/main/examples/with-nanostores",
demo:"",
blurb:"An example on how share state between components from different frameworks inside Astro, using the excellent 'NanoStores' state utility package.",
command:"npm init astro my-astro-project -- --template with-nanostores"
},
{
text: "Astro & TailwindCSS",
github: "https://github.com/snowpackjs/astro/tree/main/examples/with-tailwindcss",
demo:"",
blurb:"Astro comes with Tailwind support out of the box, this is an example of how TailwindCSS is used inside an Astro project.",
command:"npm init astro my-astro-project -- --template with-tailwindcss"
},
]
},
// {
// text:"Community Built Examples",
// children:[
// // {
// // text: '',
// // github: '',
// // demo:"",
// // blurb:"",
// // command:"npm init astro my-astro-project -- --template"
// // },
// ]
// },
]
|
