scale back the examples page

23 files changed, 205 insertions, 723 deletions

diff --git a/docs/src/components/Examples/Card.astro b/docs/src/components/Examples/Card.astro
index 31b98f4de..81d3b97f4 100644
--- a/docs/src/components/Examples/Card.astro
+++ b/docs/src/components/Examples/Card.astro
@@ -1,51 +1,64 @@
 ---
-
-import capitalise from './Functions/capitalise.js'
-import formatName from './Functions/format-name.js'
-import getThumbnailIcon from './Functions/get-thumbnail-icon.js'
-import getHeroImg from './Functions/get-hero-img.js'
-
-import  CardLink from './CardLink.tsx'
-import CardImage from './CardImage.astro'
 import CodeBar from './Codebar.tsx'
 import CardButtons from './CardButtons.astro'
 
-const {data:{name,readme="",pkgJSON:{description,keywords,repository}}} = Astro.props
-
-const getThumbnail = async() =>{
-    if(keywords.includes('framework') && !name.match('framework-multiple') || name.match('with-tailwindcss') || name.match('snowpack') || name.match('with-nanostores')){
-        return `/icons/framework-thumbnails/${name}.svg`
-    }
+const {data, index} = Astro.props;
 
-   let avatarSrc = await getThumbnailIcon() || '/icons/space-icons-rounded-small/048-space.svg' 
-    return avatarSrc
-}
+// NOTE: Needed until we get hosted demos of official templates.
+const PLACEHOLDER_THUMBNAILS = [
+    // `#ba5370, #F4E2D8`,
+    // `#22c1c3, #fdbb2d`,
+    // `#7a5e99, #9f5dcf, #e864ca, #fdeff9`,
+    // `#e1eec3, #f05053`,
+    // `#7f00ff, #e100ff`,
+    `var(--theme-bg-accent), var(--theme-accent)`,
+]
 
-const href = `/templates/${name}`
+const hasScreenshot = !!data.demo;
+const backgroundStyle = hasScreenshot ? `url('https://v1.screenshot.11ty.dev/${encodeURIComponent(data.demo)}/medium/9:16/')` : `linear-gradient(60deg, var(--theme-bg-accent), var(--theme-accent))`
 ---
-
-<div class="card-wrapper">
-    <article class="card">
-        <CardLink client:load href={href} name={`${formatName(name)}`} }>
-        <CardImage client:load  />
-        <div class="card-body">
-            <div class="card-avatar">
-                <img src={await getThumbnail()} alt="A Randomised Thumbnail Image" class="icon-image ball" />
-            </div>
-            <div class="card-content">
-                <a href={href} class="main-link">
-                    <h3 class="title">
-                        {formatName(name)}
-                    </h3>
-                </a>
-                <CodeBar client:load content={name} command={`npm init astro my-astro-project -- --template ${name}`}/>
-                
-            </div>
-            <CardButtons dir={repository.directory} />
-        </div>
-        </CardLink>  
-    </article>
-</div>    
-<style lang="scss" >
-    @import'./card.scss';
-</style>
\ No newline at end of file
+<style>
+    .card {    
+    position: relative;
+        display: flex;
+        flex-direction: column;
+        grid-column: span 1;
+        flex-grow: 1;
+        height: 200px;
+        justify-content: center;
+        align-items: center;
+        padding: 1rem;
+        text-align: center;
+    }
+    .card-header {
+        flex-grow: 1;
+        font-weight: bold;
+        font-size: 1.8rem;
+    }
+    .background-dimmer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: linear-gradient(45deg, #0004, #000B);
+    z-index: 2;
+    }
+    .card-body, .card-header {
+        color: var(--text-color);
+    }
+    .card-body {
+        z-index: 3;
+    }
+    .card.has-screenshot .card-header,
+    .card.has-screenshot .card-body {
+        color: white;
+    }
+</style>
+<article class={`card ${hasScreenshot ? 'has-screenshot' : ''}`} style={`background: ${backgroundStyle}; background-size: cover;`}>
+    {hasScreenshot && <div class="background-dimmer"></div>}
+    <div class="card-body">
+        <a href={data.github} class="card-header" target="_blank">{data.name}
+        <span>{` →`}</span></a>
+    </div>
+</article>
\ No newline at end of file
diff --git a/docs/src/components/Examples/CardImage.astro b/docs/src/components/Examples/CardImage.astro
deleted file mode 100644
index d785b6ce8..000000000
--- a/docs/src/components/Examples/CardImage.astro
+++ /dev/null
@@ -1,20 +0,0 @@
----
-import getHeroImg from './Functions/get-hero-img.js'
-const getImg = await getHeroImg() || 'https://source.unsplash.com/600x300/?space,cosmos'
----
-
-  <img src={getImg} class='heroImg' alt="A Image of Space"/> 
-
-<style lang='scss'>
-.heroImg{
-    display: block;
-    --hero-radius: 50px 50px 100px 100px / 60px 60px 20px 20px;
-    border-radius: var(--hero-radius);
-    width: 100%;
-    height:15rem;
-    box-shadow: inset 5px -2px 7px 0px rgb(185 188 231 / 37%),
-          0px 8px 0px 0px var(--theme-divider);
-    border-radius: var(--hero-radius);
-    object-fit: cover;
-  }
-</style>
\ No newline at end of file
diff --git a/docs/src/components/Examples/Functions/capitalise.js b/docs/src/components/Examples/Functions/capitalise.js
deleted file mode 100644
index 39f7497b5..000000000
--- a/docs/src/components/Examples/Functions/capitalise.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * 
- * @param {String} word  
- * @returns Capitalised Word
- */
-export default function capitalise(word) {
-    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
-  }
\ No newline at end of file
diff --git a/docs/src/components/Examples/Functions/format-name.js b/docs/src/components/Examples/Functions/format-name.js
deleted file mode 100644
index 890275c9d..000000000
--- a/docs/src/components/Examples/Functions/format-name.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import capitalise from './capitalise'
-
-/**
- * 
- * @param {String} name 
- * @returns Formats the Template Name
- */
-export default function formatName(name){
-    return name.includes('multiple')
-    ?
-    `${capitalise(name.split('-')[1])} ${capitalise(name.split('-')[0])}'s`
-    :
-    name
-        .split('-')
-        .map((str)=>(
-            str.replace('with','')
-        ))
-        .map((str)=>(
-            str.replace('framework','')
-        ))
-        .map((str)=>(capitalise(str)))
-        .join(' ')
-        .trim()
-}
\ No newline at end of file
diff --git a/docs/src/components/Examples/Functions/get-examples-data.js b/docs/src/components/Examples/Functions/get-examples-data.js
deleted file mode 100644
index e206bab10..000000000
--- a/docs/src/components/Examples/Functions/get-examples-data.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import glob from 'tiny-glob'
-import fs from 'fs'
-
-
-/**
- * @returns list of templates's package.json from the examples folder
- */
-async function getPkgJSON(){
-    let data = []
-    const paths = await glob('../examples/*/package.json',{filesOnly:true})
-    paths.map((files)=>{
-        let readFile =  fs.readFileSync(files)
-        let json = JSON.parse(readFile)
-        return data.push({...json})
-    })
-    return data
-}
-
-/**
- * @returns list of templates readme from the examples folder
- */
-async function getExamplesREADME(){
-    let data = []
-    const paths = await glob('../examples/*/README.md',{filesOnly:true})
-    paths.map( (files)=>{
-        const buffer = fs.readFileSync(files)
-        let text = buffer.toString()  
-        let fileName = files.split('/')[2]
-        data.push({fileName,text})
-    })
-    return data
-}
-
-/**
- * @returns list of template data
- */
-async function getTemplateData(){ 
-    let data = []
-    const pkgJSONS =  await getPkgJSON()
-    pkgJSONS.map((pkg)=>{
-        let {name} = pkg
-        name = name.replace('@example/','')
-        let obj = {
-            name,
-            pkgJSON: pkg,
-            readme:undefined,
-        }
-        data.push(obj)
-    })
-    return data
-}
-
-
-/**
- * 
- * @returns Array of Template objects, 
- */
-async function templateData() {
-    let readmeData = await getExamplesREADME()
-    let templateData = await getTemplateData()
-    let arr = templateData.map((obj,i)=>{
-        let {name} = obj
-        readmeData.map((file)=>{
-            let {fileName,text} = file
-            if(name === fileName)
-            obj.readme = text
-        })
-
-        return obj
-    })
-    return arr
-}
-
-export default templateData
-
diff --git a/docs/src/components/Examples/Functions/get-examples-headers.js b/docs/src/components/Examples/Functions/get-examples-headers.js
deleted file mode 100644
index 9b75d2e5d..000000000
--- a/docs/src/components/Examples/Functions/get-examples-headers.js
+++ /dev/null
@@ -1,27 +0,0 @@
-// import {templatesList as data} from './templatesList.ts'
-import templateData from './get-examples-data.js'
-const data = await templateData()
-console.log(data)
-
-// const examplesHeaders = data.map(section=>{
-//     let arr = []
-//     let obj = {
-//         depth:2,
-//         slug:section.title,
-//         text:section.title,
-//     }
-//     arr.push(obj)
-    
-//     section.children.map(example=>{
-//         let obj={
-//         depth:3,
-//         slug:example.text,
-//         text:example.text,
-//         }
-//         arr.push(obj)
-//     })
-//     return [...arr]
-// }).flat(2) 
-
-
-// export default examplesHeaders
\ No newline at end of file
diff --git a/docs/src/components/Examples/Functions/get-hero-img.js b/docs/src/components/Examples/Functions/get-hero-img.js
deleted file mode 100644
index 8ed1ac9b3..000000000
--- a/docs/src/components/Examples/Functions/get-hero-img.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import fs from 'node:fs/promises'
-import randomIndex from './random-index'
-
-
-/**
- * getHeroImg
- * @returns url of random Hero Image from './public/images'
- */
-export default async function getHeroImg(){
-    try {
-        const data =[]
-        const paths =await fs.readdir('./public/images',{filesOnly:true})
-        paths.map(path=>data.push(`/images/${path}`))
-        return data[randomIndex(paths.length)]
-    } catch (error) {
-        console.log(error)
-    }
-}
diff --git a/docs/src/components/Examples/Functions/get-thumbnail-icon.js b/docs/src/components/Examples/Functions/get-thumbnail-icon.js
deleted file mode 100644
index 21ae3b673..000000000
--- a/docs/src/components/Examples/Functions/get-thumbnail-icon.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import fs from 'node:fs/promises'
-import randomIndex from './random-index.js'
-
-
-/**
- * getThumbnailIcon
- * @returns url of random Icon Image from './public/icons'
- */
-export default async function getThumbnailIcon(){
-    try {
-        const data =[]
-        const paths =await fs.readdir('./public/icons/space-icons-rounded-small',{filesOnly:true})
-        paths.map(path=>data.push(`/icons/space-icons-rounded-small/${path}`))
-        return data[randomIndex(paths.length)]
-    } catch (error) {
-        console.log(`Error Generating Thumbnail : ${error}`)
-    }
-}
diff --git a/docs/src/components/Examples/Functions/random-index.js b/docs/src/components/Examples/Functions/random-index.js
deleted file mode 100644
index a55487da5..000000000
--- a/docs/src/components/Examples/Functions/random-index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Random Index from Array
- * @param {Number} length - Length of Array
- * @returns Random Index from the Array
- */
-
-const randomIndex = (length) => Math.round(Math.random() * (0-length)) + length - 1
-
-export default randomIndex
\ No newline at end of file
diff --git a/docs/src/components/Examples/templatesList.ts b/docs/src/components/Examples/templatesList.ts
deleted file mode 100644
index 91f5083bd..000000000
--- a/docs/src/components/Examples/templatesList.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-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
diff --git a/docs/src/components/PageContent/PageContent.astro b/docs/src/components/PageContent/PageContent.astro
index 564b8485b..0598d7a2f 100644
--- a/docs/src/components/PageContent/PageContent.astro
+++ b/docs/src/components/PageContent/PageContent.astro
@@ -1,7 +1,7 @@
 ---
 const {content, githubEditUrl, currentPage} = Astro.props;
 const title = content.title;
-const headers = content.astro.headers;
+const headers = content.astro?.headers;
 import MoreMenu from '../RightSidebar/MoreMenu.astro';
 import TableOfContents from '../RightSidebar/TableOfContents.tsx';
 import {getLanguageFromURL} from '../../util.ts';
@@ -38,9 +38,9 @@ const previous = index !== -1 ? (index === 0 ? null : links[index - 1]) : null;
 <article id="article" class="content">
     <section class="main-section">
         <h1 class="content-title" id="overview">{title}</h1>
-        <nav class="block sm:hidden">
+        {headers && <nav class="block sm:hidden">
             <TableOfContents client:media="(max-width: 50em)" headers={headers}/>
-        </nav>
+        </nav>}
         <slot />
     </section>
     <nav class="block sm:hidden">
diff --git a/docs/src/components/RightSidebar/RightSidebar.astro b/docs/src/components/RightSidebar/RightSidebar.astro
index ed1dd37cc..04ce66772 100644
--- a/docs/src/components/RightSidebar/RightSidebar.astro
+++ b/docs/src/components/RightSidebar/RightSidebar.astro
@@ -2,7 +2,7 @@
 import TableOfContents from './TableOfContents.jsx';
 import MoreMenu from './MoreMenu.astro';
 const {content, githubEditUrl} = Astro.props;
-const headers = content.astro.headers;
+const headers = content.astro?.headers;
 ---
 <style>
   .sidebar-nav {
@@ -19,7 +19,7 @@ const headers = content.astro.headers;
 </style>
 <nav class="sidebar-nav" aria-labelledby="grid-right">
   <div class="sidebar-nav-inner">
-    <TableOfContents client:media="(min-width: 50em)" headers={headers} />
+    {headers && <TableOfContents client:media="(min-width: 50em)" headers={headers} />}
     <MoreMenu editHref={githubEditUrl} />
   </div>
 </nav>
\ No newline at end of file
diff --git a/docs/src/config.ts b/docs/src/config.ts
index 59c13b982..e473a3b92 100644
--- a/docs/src/config.ts
+++ b/docs/src/config.ts
@@ -4,7 +4,7 @@ export const SIDEBAR = {
     { text: 'Getting Started', link: 'getting-started' },
     { text: 'Quickstart', link: 'quick-start' },
     { text: 'Installation', link: 'installation' },
-    { text: 'Examples', link: 'examples' },
+    { text: 'Themes', link: 'themes' },
     { text: 'Astro vs. X', link: 'comparing-astro-vs-other-tools' },
 
     { text: 'Basics', header: true },
diff --git a/docs/src/data/components.json b/docs/src/data/components.json
new file mode 100644
index 000000000..50b4ff61b
--- /dev/null
+++ b/docs/src/data/components.json
@@ -0,0 +1,23 @@
+{
+  "official": [],
+  "community": [
+    {
+      "name": "accessible-astro-components",
+      "description": "A set of accessible modals, buttons, toggles and more.",
+      "github": "https://www.npmjs.com/package/accessible-astro-components",
+      "demo": null
+    },
+    {
+      "name": "astro-static-tweet",
+      "description": "A lightweight static-HTML tweet embed.",
+      "github": "https://www.npmjs.com/package/@rebelchris/astro-static-tweet",
+      "demo": null
+    },
+    {
+      "name": "Astro SEO",
+      "description": "SEO tags for your website.",
+      "github": "https://github.com/jonasmerlin/astro-seo",
+      "demo": null
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/src/data/themes.json b/docs/src/data/themes.json
new file mode 100644
index 000000000..6ed1201d0
--- /dev/null
+++ b/docs/src/data/themes.json
@@ -0,0 +1,54 @@
+{
+  "official": [
+    {
+      "name": "Starter Kit",
+      "description": "A default starter project for Astro. Flexible enough to handle anything that you might want to build.",
+      "github": "https://github.com/snowpackjs/astro/tree/main/examples/starter",
+      "demo": null,
+      "sandbox": "https://github.dev/snowpackjs/astro/tree/main/examples/starter",
+      "command": "npm init astro"
+    },
+    {
+      "name": "docs",
+      "description": "A documentation website theme, complete with i18n, search, dark mode and more.",
+      "github": "https://github.com/snowpackjs/astro/tree/main/examples/docs",
+      "demo": null,
+      "sandbox": "https://github.dev/snowpackjs/astro/tree/main/examples/docs",
+      "command": "npm init astro -- --template docs"
+    },
+    {
+      "name": "blog",
+      "description": "A blog theme, perfect for personal and company blogs.",
+      "github": "https://github.com/snowpackjs/astro/tree/main/examples/blog",
+      "demo": null,
+      "sandbox": "https://github.dev/snowpackjs/astro/tree/main/examples/blog",
+      "command": "npm init astro -- --template blog"
+    },
+    {
+      "name": "portfolio",
+      "description": "A portfolio theme, perfect for your personal or professional online portfolio.",
+      "github": "https://github.com/snowpackjs/astro/tree/main/examples/portfolio",
+      "demo": null,
+      "sandbox": "https://github.dev/snowpackjs/astro/tree/main/examples/portfolio",
+      "command": "npm init astro -- --template portfolio"
+    },
+    {
+      "name": "minimal",
+      "description": "A minimal theme, with just the bare minimum needed to get started.",
+      "github": "https://github.com/snowpackjs/astro/tree/main/examples/minimum",
+      "demo": null,
+      "sandbox": "https://github.dev/snowpackjs/astro/tree/main/examples/minimum",
+      "command": "npm init astro -- --template minimum"
+    }
+  ],
+  "community": [
+    {
+      "name": "Ink",
+      "description": "Crisp, minimal, personal blog theme for Astro",
+      "github": "https://github.com/one-aalam/astro-ink",
+      "demo": "https://astro-ink.vercel.app/",
+      "sandbox": "https://github.dev/one-aalam/astro-ink",
+      "command": "npm init astro -- --template one-aalam/astro-ink"
+    }
+  ]
+}
diff --git a/docs/src/layouts/ExamplesLayout.astro b/docs/src/layouts/ExamplesLayout.astro
deleted file mode 100644
index e1315b362..000000000
--- a/docs/src/layouts/ExamplesLayout.astro
+++ /dev/null
@@ -1,129 +0,0 @@
----

-import HeadCommon from "../components/HeadCommon.astro";

-import HeadSEO from "../components/HeadSEO.astro";

-import Header from '../components/Header/Header.astro';

-import Footer from '../components/Footer/Footer.astro';

-import PageContent from '../components/PageContent/PageContent.astro';

-import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';

-import MoreMenu from '../components/RightSidebar/MoreMenu.astro'

-import { SITE } from "../config.ts";

-import ContainerQuery from '../components/ContainerQuery.astro'

-const { content = {}, page= Astro.request.url.pathname } = Astro.props;

-const currentPage =page;

-// const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`;

-const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${page}`;

----

-

-<html dir="{content.dir ?? 'ltr'}" lang="{content.lang ?? 'en-us'}" class="initial">

-  <head>

-    <HeadCommon />

-    <HeadSEO {content} canonicalURL={Astro.request.canonicalURL} />

-    <!--TODO: Insert font-awesome icons  -->

-    <title>{content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title}</title>

-    <style>

-      body {

-        width: 100%;

-        display: grid;

-        grid-template-rows: var(--theme-navbar-height) 1fr;

-        --gutter: 0.5rem;

-        --doc-padding: 2rem;

-      }

-      pre{

-        margin-top: 2%;

-      }

-      .layout {

-        display: grid;

-        grid-auto-flow: column;

-        grid-template-columns: 

-          minmax(var(--gutter), 1fr) 

-          minmax(0, var(--max-width)) 

-          minmax(var(--gutter), 1fr);

-        overflow-x: hidden;

-      }

-      .layout :global(> *) {

-        width: 100%;

-        height: 100%;

-      }

-      .grid-sidebar {

-        height: 100vh;

-        position: sticky;

-        top: 0;

-        padding: 0;

-      }

-      #grid-left {

-        position: fixed;

-        background-color: var(--theme-bg);

-        z-index: 10;

-        display: none;

-      }

-      #grid-main {

-        padding: var(--doc-padding) var(--gutter);

-        grid-column: 2;

-        display: flex;

-        flex-direction: column;

-        height: 100%;

-      }

-      #grid-right {

-        display: none;

-      }   

-      :global(.mobile-sidebar-toggle) {

-        overflow: hidden;

-      }

-      :global(.mobile-sidebar-toggle) #grid-left {

-        display: block;

-        top: 2rem;

-      }

-      @media (min-width: 50em) {

-        .layout {

-          overflow: initial;

-          grid-template-columns: 

-            20rem 

-            minmax(0, var(--max-width));

-          gap: 1em;

-        }

-        #grid-left {

-          display: flex;

-          padding-left: 2rem;

-          position: sticky;

-          grid-column: 1;

-        }

-      }

-

-      @media (min-width: 72em) {

-        .layout {

-          grid-template-columns: 

-            20rem 

-            minmax(0, var(--max-width)) 

-            18rem;

-          padding-left: 0;

-          padding-right: 0;

-          margin: 0 auto;

-        }

-        #grid-right {

-          grid-column: 3;

-          display: flex;

-        }

-      }

-    </style>

-    <ContainerQuery/>

-  </head>

-

-  <body>

-    <Header currentPage={currentPage} />

-    <main class="layout">

-      <aside id="grid-left" class="grid-sidebar" title="Site Navigation">

-        <LeftSidebar currentPage={currentPage} />

-      </aside>

-      <div id="grid-main">

-          <slot />

-      </div>

-      <aside id="grid-right" class="grid-sidebar" title="Table of Contents">

-        <nav class="sidebar-nav" aria-labelledby="grid-right">

-          <div class="sidebar-nav-inner">

-            <MoreMenu editHref={githubEditUrl} />

-          </div>

-        </nav>

-      </aside>

-    </main>

-  </body>

-</html>

diff --git a/docs/src/layouts/MainLayout.astro b/docs/src/layouts/MainLayout.astro
index 234270a77..2a559d57e 100644
--- a/docs/src/layouts/MainLayout.astro
+++ b/docs/src/layouts/MainLayout.astro
@@ -8,7 +8,7 @@ import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
 import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
 import { SITE } from "../config.ts";
 
-const { content = {} } = Astro.props;
+const { content = {}, hideRightSidebar = false} = Astro.props;
 const currentPage = Astro.request.url.pathname;
 const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`;
 const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${currentFile}`;
@@ -116,7 +116,7 @@ const formatTitle = (content, SITE) => content.title ? `${content.title} 🚀 ${
         </PageContent>
       </div>
       <aside id="grid-right" class="grid-sidebar" title="Table of Contents">
-        <RightSidebar content={content} githubEditUrl={githubEditUrl} />
+        {!hideRightSidebar && <RightSidebar content={content} githubEditUrl={githubEditUrl} />}
       </aside>
     </main>
   </body>
diff --git a/docs/src/pages/examples-and-templates.astro b/docs/src/pages/examples-and-templates.astro
deleted file mode 100644
index aff58a932..000000000
--- a/docs/src/pages/examples-and-templates.astro
+++ /dev/null
@@ -1,33 +0,0 @@
----
-
-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
deleted file mode 100644
index 6128b2e20..000000000
--- a/docs/src/pages/examples.astro
+++ /dev/null
@@ -1,87 +0,0 @@
----
-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/getting-started.md b/docs/src/pages/getting-started.md
index 73ac8e0d7..df8d43eef 100644
--- a/docs/src/pages/getting-started.md
+++ b/docs/src/pages/getting-started.md
@@ -15,6 +15,20 @@ To get started with Astro in 5 quick and easy steps, visit our [Quick-Start guid
 
 Alternatively, read our [Installation Guide](/installation) for a full walk-through on getting set up with Astro.
 
+### Example Projects
+
+If you prefer to learn Astro by example, check out our [complete library of examples](https://github.com/snowpackjs/astro/tree/main/examples) on GitHub.
+
+You can check out any of these examples on your local machine by running `npm init astro` with the `--template` CLI flag. The `--template` flag also supports third-party, community templates.
+
+```bash
+# Run the init wizard and use this official template
+npm init astro -- --template [OFFICIAL_EXAMPLE_NAME]
+# Run the init wizard and use this community template
+npm init astro -- --template [GITHUB_USER]/[REPO_NAME]
+npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example
+```
+
 ### Online Playgrounds
 
 If you're interested in playing around with Astro in the browser, you can use an online code playground. Try our "Hello World!" template on [CodeSandbox](https://codesandbox.io/s/astro-template-hugb3).
diff --git a/docs/src/pages/quick-start.md b/docs/src/pages/quick-start.md
index c59a12a49..6998826fe 100644
--- a/docs/src/pages/quick-start.md
+++ b/docs/src/pages/quick-start.md
@@ -23,7 +23,10 @@ npm run dev
 npm run build
 ```
 
-If you wish to learn more about the range of methods to install and setup Astro for your project's, please [read our installation guide.](installation)
+To learn more about installing and using Astro for the first time, please [read our installation guide.](installation)
+
+If you prefer to learn by example, check out our [complete library of examples](https://github.com/snowpackjs/astro/tree/main/examples) on GitHub. You can check out any of these examples locally by running `npm init astro -- --template "EXAMPLE_NAME"`.
+
 
 ## Start your project
 
diff --git a/docs/src/pages/templates/[name].astro b/docs/src/pages/templates/[name].astro
deleted file mode 100644
index 7ad18b6c3..000000000
--- a/docs/src/pages/templates/[name].astro
+++ /dev/null
@@ -1,71 +0,0 @@
----
-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
diff --git a/docs/src/pages/themes.astro b/docs/src/pages/themes.astro
new file mode 100644
index 000000000..c4eea3067
--- /dev/null
+++ b/docs/src/pages/themes.astro
@@ -0,0 +1,45 @@
+---
+import Layout from '../layouts/MainLayout.astro';
+import Card from '../components/Examples/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: 'Themes'}} hideRightSidebar>
+    <Markdown>
+        ## Featured Themes
+
+        Astro is supported by a growing ecosystem of third-pary themes and components.
+    </Markdown>
+    <div class="card-grid">
+    
+        {themes.community.map((item)=>(<Card data={item} />))}
+    </div>
+    <Markdown>
+        ## Official Themes
+
+        Astro maintains several official themes for common use-cases like documentation, portfolios, and more.
+    </Markdown>
+    <div class="card-grid">
+    
+        {themes.official.map((item)=>(<Card data={item} />))}
+    </div>
+    <Markdown>
+        ## Featured Packages
+        
+        Our package ecosystem is growing! Check out these featured community packages.
+    </Markdown>
+    <div class="card-grid">
+    
+        {components.community.map((item)=>(<Card data={item} />))}
+    </div>
+</Layout>
\ No newline at end of file