Docs/example and templates v2 (#1100)

19 files changed, 748 insertions, 17 deletions

diff --git a/docs/src/components/ContainerQuery.astro b/docs/src/components/ContainerQuery.astro
new file mode 100644
index 000000000..253cf43ec
--- /dev/null
+++ b/docs/src/components/ContainerQuery.astro
@@ -0,0 +1,5 @@
+	<script type="module">
+	import { cqfill } from 'https://unpkg.com/cqfill@0.6.0/export/cqfill.mjs'
+
+	cqfill()
+	</script>
\ No newline at end of file
diff --git a/docs/src/components/Examples/Card.astro b/docs/src/components/Examples/Card.astro
new file mode 100644
index 000000000..81d3b97f4
--- /dev/null
+++ b/docs/src/components/Examples/Card.astro
@@ -0,0 +1,64 @@
+---
+import CodeBar from './Codebar.tsx'
+import CardButtons from './CardButtons.astro'
+
+const {data, index} = Astro.props;
+
+// 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 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))`
+---
+<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/CardButtons.astro b/docs/src/components/Examples/CardButtons.astro
new file mode 100644
index 000000000..f7393df42
--- /dev/null
+++ b/docs/src/components/Examples/CardButtons.astro
@@ -0,0 +1,37 @@
+---
+    export interface Props{
+        dir:string
+    }
+const {dir} = Astro.props
+const icons = [
+    <svg  id="terminal" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+    </svg>,
+    <svg id="codeBrowser"xmlns="http://www.w3.org/2000/svg" viewBox="0 -25 424 424">
+    <defs/>
+    <path fill="currentColor" d="M167.3 272.1a7 7 0 01-4.5-1.6l-45.3-38.6a7 7 0 010-10.7l45.3-38.5a7 7 0 119 10.6l-39 33.3 39 33.2a7 7 0 01-4.5 12.3zm0 0"/>
+    <path  fill="currentColor" d="M256.7 272.1c-2 0-4-.8-5.3-2.4a7 7 0 01.8-9.9l39-33.2-39-33.3a7 7 0 019-10.6l45.3 38.5a7 7 0 010 10.7l-45.3 38.6a7 7 0 01-4.5 1.6zm0 0M196 301h-1.5a7 7 0 01-5.4-8.4l28.2-134a7 7 0 0113.7 2.9l-28.2 134a7 7 0 01-6.8 5.6zm0 0"/>
+    <path fill="currentColor" d="M377 374H47c-26 0-47-21-47-47V47C0 21 21 0 47 0h330c26 0 47 21 47 47v280c0 26-21 47-47 47zM47 14a33 33 0 00-33 33v280a33 33 0 0033 33h330a33 33 0 0033-33V47a33 33 0 00-33-33zm0 0"/>
+    <path  fill="currentColor" d="M417 112H7a7 7 0 110-14h410a7 7 0 010 14zm0 0M119.6 78.6a22.2 22.2 0 110-44.4 22.2 22.2 0 010 44.4zm0-30.3a8.2 8.2 0 100 16.3 8.2 8.2 0 000-16.3zm0 0M51.5 78.4a22.2 22.2 0 110-44.4 22.2 22.2 0 010 44.4zm0-30.3a8.2 8.2 0 100 16.3 8.2 8.2 0 000-16.3zm0 0M187.7 78.8a22.2 22.2 0 110-44.3 22.2 22.2 0 010 44.3zm0-30.3a8.2 8.2 0 100 16.3 8.2 8.2 0 000-16.3zm0 0"/>
+    </svg>,
+    <svg id="github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <defs/>
+    <path fill="currentColor" d="M12 .5C5.4.5 0 5.8 0 12.3c0 5.2 3.4 9.6 8.2 11.2.6 0 .8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.3-1.4-1.7-1.4-1.7-1-.7.1-.7.1-.7C5 16.9 5.6 18 5.6 18c1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-5.8 0-1.3.5-2.4 1.3-3.2-.2-.3-.6-1.5 0-3.1 0 0 1-.3 3.4 1.2a11.7 11.7 0 016 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8 0 3.1.9.8 1.3 1.9 1.3 3.2 0 4.5-2.8 5.5-5.5 5.8.5.3.9 1 .9 2.2v3.2c0 .3.1.7.8.6 4.8-1.6 8.2-6 8.2-11.2C24 5.8 18.6.5 12 .5z"/>
+    </svg>
+    ]
+---
+
+<div class="hotlinks">
+    <button class="hot-btn">
+        <a class="hot-link" href={`https://githubbox.com/snowpackjs/astro/tree/main${dir}`} title="Explore the Code" target="_blank" rel="noopener noreferrer"><i class="hot-icon">{icons[0]}</i></a>
+    </button>
+    <button class="hot-btn">
+        <a class="hot-link" href={`https://github.dev/snowpackjs/astro/tree/main${dir}`} title="View Online Demo" target="_blank" rel="noopener noreferrer"><i class="hot-icon">{icons[1]}</i></a>
+    </button>
+    <button class="hot-btn">
+        <a class="hot-link" href={`https://github.com/snowpackjs/astro/tree/main${dir}`} title={`Visit the Repo`} target="_blank" rel="noopener noreferrer"><i class="hot-icon">{icons[2]}</i></a>
+    </button>
+</div>
+<style lang="scss">
+    @import './card.scss';
+</style>
\ No newline at end of file
diff --git a/docs/src/components/Examples/CardLink.tsx b/docs/src/components/Examples/CardLink.tsx
new file mode 100644
index 000000000..f17ee724f
--- /dev/null
+++ b/docs/src/components/Examples/CardLink.tsx
@@ -0,0 +1,51 @@
+import { JSX } from '@babel/types';
+import type { Component } from 'preact';
+import { h, Fragment } from 'preact';
+import { useRef } from 'preact/hooks';
+
+export type CardLinkProps ={
+    href:string
+    name:string
+    children:JSX | JSX[]
+}
+
+const CardLink:Component<CardLinkProps>=({href,name,children}:CardLinkProps):JSX.Element=>{
+    const Card = useRef(null)
+    /**
+     * Set Title Attribute when Hovering over Card
+     * @param e - Mouse Enter Event
+     */
+    function handleOnMouseEnter(e){
+        const cardBody = Card.current.querySelector('.card-body')
+        const cardThumb = Card.current.querySelector('.icon-image')
+        const cardImg = Card.current.querySelector('.heroImg')
+
+        if(e.target === cardBody || e.target === cardThumb || e.target === cardImg ) {
+            e.target.setAttribute('title',`Click to find out more about our ${name} template`)
+        }
+    
+        
+    }
+    /**
+     * Click Link Card to Page
+     * @param e - Click Event
+     * @returns new window location
+     */
+    function handleOnClick(e){
+        const card = e.target
+        const mainLink = card.querySelector('.main-link')
+        const clickableArea = ['.card-body','.icon-image','.heroImg']
+        for(let area of clickableArea){
+            if(e.currentTarget.classList.contains(area)) {
+                return mainLink.click()
+            }
+        }
+    }
+    return(
+        <div  ref={Card} onClick={handleOnClick} onMouseOver={handleOnMouseEnter} aria-label={`Clickable Card taking you directly to the ${name} template`} tabIndex="0">
+            {children}
+        </div>
+    )
+}
+
+export default CardLink
\ No newline at end of file
diff --git a/docs/src/components/Examples/Codebar.tsx b/docs/src/components/Examples/Codebar.tsx
new file mode 100644
index 000000000..f2bca6b8d
--- /dev/null
+++ b/docs/src/components/Examples/Codebar.tsx
@@ -0,0 +1,43 @@
+import type { FunctionalComponent } from 'preact';
+import { h, Fragment } from 'preact';
+import{useState,useRef,useEffect} from 'preact/hooks'
+
+export type CodeBar ={
+    content:string
+    command:string
+}
+
+const CodeBar:FunctionalComponent=({content,command})=>{
+    const [clicked,setClicked]=useState(false)
+    const [titleTxt,setTitleTxt] = useState("Copy Command to Clipboard")
+    useEffect(()=>{
+        const timeout = setTimeout(()=>{
+            setClicked(false)
+            setTitleTxt("Copy Command to Clipboard")
+        },1500)
+        return ()=> clearTimeout(timeout)
+    },[clicked])
+    /**
+     * 
+     */
+    function onClick(e){
+        setClicked(true)
+        setTitleTxt("Copied to Clipboard!")
+        const titleAttr= e.target
+        const clipboard = navigator.clipboard
+        return clipboard.writeText(`${command}`)
+    }
+
+    return(
+        <div style="cursor:pointer;" onClick={onClick} title={titleTxt} > 
+            <code >
+                {content}
+            </code>
+        </div>
+    )
+}
+
+export default CodeBar
+
+
+
diff --git a/docs/src/components/Examples/CollapsibleReadme.astro b/docs/src/components/Examples/CollapsibleReadme.astro
new file mode 100644
index 000000000..679b467d3
--- /dev/null
+++ b/docs/src/components/Examples/CollapsibleReadme.astro
@@ -0,0 +1,95 @@
+---
+import {Markdown} from 'astro/components'
+export interface Props{
+    label:string;
+    readme:string;
+}
+const {label,readme} = Astro.props
+---
+    <div class="wrap-collapsible">
+        <input type="checkbox" id="collapsible" class="toggle">
+        <label for="collapsible" class="lbl-toggle">{label}</label>
+        <div class="collapsible-content">
+            <div class="content-inner">
+                <Markdown content = {readme} />
+            </div>
+        </div>
+    </div>
+
+
+
+<style lang="css">
+.wrap-collabsible {
+  margin-bottom: 1.2rem 0;
+  will-change: auto;
+  scroll-behavior: smooth;
+}
+
+input[type='checkbox'] {
+  display: none;
+}
+
+.lbl-toggle {
+  display: block;
+
+  font-weight: bold;
+  font-family: monospace;
+  font-size: xx-large;
+  text-transform: uppercase;
+  text-align: left;
+
+  padding: 1rem;
+
+  color: var(--theme-color);
+  background: var(--theme-background);
+
+  cursor: pointer;
+
+  border-radius: 7px;
+  transition: all 0.25s ease-out;
+}
+
+.lbl-toggle:hover {
+  color: #7C5A0B;
+}
+
+.lbl-toggle::before {
+  content: ' ';
+  display: inline-block;
+
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 5px solid currentColor;
+  vertical-align: middle;
+  margin-right: .7rem;
+  transform: translateY(-2px);
+
+  transition: transform .2s ease-out;
+}
+
+.toggle:checked + .lbl-toggle::before {
+  transform: rotate(90deg) translateX(-3px);
+}
+
+.collapsible-content {
+  max-height: 0px;
+  overflow: hidden;
+  transition: max-height 1.5s ease-in;
+  will-change: transform;
+}
+
+.toggle:checked + .lbl-toggle + .collapsible-content {
+  max-height: 100%;
+
+}
+
+.toggle:checked + .lbl-toggle {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.collapsible-content .content-inner {
+  padding: .5rem 1rem;
+}
+
+</style>
\ No newline at end of file
diff --git a/docs/src/components/Examples/Thumbnail.astro b/docs/src/components/Examples/Thumbnail.astro
new file mode 100644
index 000000000..c4364396d
--- /dev/null
+++ b/docs/src/components/Examples/Thumbnail.astro
@@ -0,0 +1,124 @@
+---
+import {Markdown} from 'astro/components'
+import formatName from './function/format-name.js'
+const {data:{name,pkgJSON:{description}}} = Astro.props
+---
+   <!-- Example 1  -->
+<!-- <div class="thumbnail">
+        
+        <a href={`/example/${name}`}>
+            <h3>{formatName(name)}
+            </h3>
+            <img src="/default-og-image.png" alt="">
+        </a>
+
+        <pre data-lang='bash'>--template {name}</pre>
+</div> -->
+
+<!-- Example 2 -->
+<!-- <div class="thumbnail">
+        
+        <a href={`/example/${name}`}>
+            <img src="/default-og-image.png" alt="">
+            <h3>{formatName(name)}
+            </h3>
+        </a>
+        <pre data-lang='bash'>--template {name}</pre>
+</div> -->
+
+<!-- Example 3 -->
+<div class="wrapper">
+    <div class="thumbnail">
+            <div class="title">
+                <a href={`/example/${name}`}>
+                    <h3 >{formatName(name)}
+                    </h3>
+                </a>
+                <code class="code-inline">{name}</code>
+            </div>
+            <p class="description">{description}</p>
+            <pre data-lang='bash' class="code-block">--template {name}</pre>
+    </div>
+</div>
+
+<style lang="scss">
+    .wrapper{
+        box-sizing: border-box;
+        width: 45%;
+        display:flex;
+        flex-direction:column;
+
+        border-radius: 5rem;
+        box-shadow:  2px 2px 2px #cacaca;
+    }
+    .thumbnail{
+        flex-basis:1;
+        flex-grow: 1;
+        transition: all 0.25s ease-out ;
+        transform: perspective(1000rem); //hack but needed,
+        &:hover{
+            transform: scale(1.015);
+        }
+        > a h3{
+            margin:0.5rem;
+        }
+        > a img{
+            margin-top:0.5rem;
+            border-radius: 1rem;
+        }
+        > a{
+            color:var(--theme-accent)
+        }
+        >p{
+            word-break: keep-all;
+            white-space: wrap;
+            overflow: hidden;
+            text-overflow: ellipsis
+        }
+        > pre{
+            width:99%;
+            margin-top: 0.85rem;
+            margin-left:0;
+            overflow: auto;
+
+            &::-webkit-scrollbar{
+                height:10px;
+                background-color: #383740;
+                color:white;
+                
+            }
+            &::-webkit-scrollbar-track{
+                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);   
+            }
+            &::-webkit-scrollbar-thumb {
+                width: 25%;
+                background-color: darkgrey;
+                outline: 1px solid slategrey;
+                border-radius: 5rem;
+            }
+        }
+    
+        .title{
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: row;
+            align-items: baseline;
+            > * + * {
+                margin-inline-start: 0.5rem;
+            }
+
+        }
+    }
+    @media(max-width:603px){
+        .thumbnail{
+            width: 100%;
+            height: fit-content;
+            >pre{
+                border-radius:0.5rem;
+                overflow: auto;
+            }
+        }
+    }
+         
+
+</style>
diff --git a/docs/src/components/Examples/card.scss b/docs/src/components/Examples/card.scss
new file mode 100644
index 000000000..8debf2dd5
--- /dev/null
+++ b/docs/src/components/Examples/card.scss
@@ -0,0 +1,167 @@
+.card-wrapper {
+  width: clamp(215px, 48%, 45%);
+  border-radius: 60px 60px 100px 100px/60px 60px 20px 20px;
+  flex-grow: 1;
+  padding-bottom: 0.5rem;
+  background: var(--theme-card-bg);
+  box-shadow: var(--theme-card-box-shadow);
+  transition: all 0.25s cubic-bezier(0, 0, 0.75, 0.24);
+  &:hover{
+    transform: translateY(-0.25rem);
+  }
+}
+.card {
+  position: relative;
+  width: 100%;
+  flex-basis: 1;
+}
+.card-body {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  min-width: fit-content;
+  padding: 1rem;
+}
+.hotlinks {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  align-content: center;
+  align-items: normal;
+  justify-content: space-between;
+  transform: translateY(-1rem);
+
+  & .hot-btn {
+    border-left: 1px solid var(--theme-card-divider);
+    border-right: 1px solid var(--theme-card-divider);
+    border-radius: 0;
+    flex-basis: 1;
+    transition: all 0.25s ease-in-out;
+    cursor: pointer;
+    background-color: transparent;
+    & :active {
+      transform: scale(0.9);
+    }
+    & .hot-link {
+    }
+    & .hot-icon {
+      display: block;
+      color: var(--theme-accent);
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+}
+
+// .frosted-glass {
+//   display: block;
+//   height: 13rem;
+//   border-bottom: 5px solid linear-gradient(var(--theme-divider));
+//   background: linear-gradient(
+//       133deg,
+//       rgb(59 56 73 / 78%),
+//       transparent 70%,
+//     #000000d4 100%
+//     );
+//     box-shadow: inset 5px -2px 7px 0px rgb(185 188 231 / 37%),
+//     0px 8px 0px 0px var(--theme-divider);
+//     border-radius: 60px 60px 100px 100px / 60px 60px 20px 20px;
+//     width: 100%;
+    
+// }
+//     .space-image {
+//     width: 100%;
+//     height: 13rem;
+//     filter: blur( 10px );
+//     //width:100%;
+//     border-radius: 60px 60px 100px 100px / 60px 60px 20px 20px;
+//     //margin-bottom:1rem;
+//     position: relative;
+//     -webkit-filter: blur( 10px );
+// }
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  flex-wrap: nowrap;
+  align-content: space-around;
+  align-items: center;
+  transform: translateY(-3rem);
+  line-height: 1.5rem;
+  > * {
+    margin: 0.5rem;
+    border-radius: 60px 60px 20px 20px, 60px 60px 20px 20px;
+  }
+  .title {
+    display: block;
+    margin: 0;
+    width: fit-content;
+    margin: auto;
+    font-size: xx-large;
+    text-decoration: none;
+  }
+  .main-link {
+    text-decoration: none;
+  }
+}
+.card-avatar {
+  position: relative;
+  transform: translateY(-4rem);
+  left: 0;
+  border: 0.25rem solid var(--theme-divider);
+  display: block;
+  width: clamp(5rem, 8rem, 7rem);
+  height: clamp(5rem, 8rem, 7rem);
+  margin: 0;
+  border-radius: 50%;
+}
+.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;
+}
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+
+.tooltip .tooltip-text {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 150%;
+  left: 50%;
+  margin-left: -60px;
+}
+
+.tooltip .tooltip-text::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: black transparent transparent transparent;
+}
+
+.tooltip:hover .tooltip-text {
+  visibility: visible;
+}
\ 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/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/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.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/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/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