cleanup docs changes

7 files changed, 0 insertions, 591 deletions

diff --git a/docs/src/components/Examples/Card.astro b/docs/src/components/Examples/Card.astro
deleted file mode 100644
index 81d3b97f4..000000000
--- a/docs/src/components/Examples/Card.astro
+++ /dev/null
@@ -1,64 +0,0 @@
----
-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
deleted file mode 100644
index f7393df42..000000000
--- a/docs/src/components/Examples/CardButtons.astro
+++ /dev/null
@@ -1,37 +0,0 @@
----
-    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
deleted file mode 100644
index 4c04be8a6..000000000
--- a/docs/src/components/Examples/CardLink.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-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;
diff --git a/docs/src/components/Examples/Codebar.tsx b/docs/src/components/Examples/Codebar.tsx
deleted file mode 100644
index a1f1117b0..000000000
--- a/docs/src/components/Examples/Codebar.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-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
deleted file mode 100644
index 679b467d3..000000000
--- a/docs/src/components/Examples/CollapsibleReadme.astro
+++ /dev/null
@@ -1,95 +0,0 @@
----
-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
deleted file mode 100644
index c4364396d..000000000
--- a/docs/src/components/Examples/Thumbnail.astro
+++ /dev/null
@@ -1,124 +0,0 @@
----
-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
deleted file mode 100644
index 0211ea099..000000000
--- a/docs/src/components/Examples/card.scss
+++ /dev/null
@@ -1,167 +0,0 @@
-.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;
-}