Adds examples page

1 files changed, 151 insertions, 0 deletions

diff --git a/docs/src/components/Examples/templatesList.ts b/docs/src/components/Examples/templatesList.ts
new file mode 100644
index 000000000..91f5083bd
--- /dev/null
+++ b/docs/src/components/Examples/templatesList.ts
@@ -0,0 +1,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"
+    //             // },
+   
+    //     ]
+
+    // },
+]
\ No newline at end of file