Docs/example and templates v2 (#1100)

7 files changed, 581 insertions, 0 deletions

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