[ci] yarn format

25 files changed, 215 insertions, 139 deletions

diff --git a/docs/src/components/Examples/CardLink.tsx b/docs/src/components/Examples/CardLink.tsx
index f17ee724f..4c04be8a6 100644
--- a/docs/src/components/Examples/CardLink.tsx
+++ b/docs/src/components/Examples/CardLink.tsx
@@ -3,49 +3,64 @@ 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[]
-}
+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')
+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`)
-        }
-    
-        
+    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()
-            }
-        }
+  }
+  /**
+   * 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>
-    )
-}
+  }
+  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
+export default CardLink;
diff --git a/docs/src/components/Examples/Codebar.tsx b/docs/src/components/Examples/Codebar.tsx
index f2bca6b8d..a1f1117b0 100644
--- a/docs/src/components/Examples/Codebar.tsx
+++ b/docs/src/components/Examples/Codebar.tsx
@@ -1,43 +1,38 @@
 import type { FunctionalComponent } from 'preact';
 import { h, Fragment } from 'preact';
-import{useState,useRef,useEffect} from 'preact/hooks'
+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
+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/card.scss b/docs/src/components/Examples/card.scss
index 8debf2dd5..0211ea099 100644
--- a/docs/src/components/Examples/card.scss
+++ b/docs/src/components/Examples/card.scss
@@ -6,7 +6,7 @@
   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{
+  &:hover {
     transform: translateY(-0.25rem);
   }
 }
@@ -70,7 +70,7 @@
 //     0px 8px 0px 0px var(--theme-divider);
 //     border-radius: 60px 60px 100px 100px / 60px 60px 20px 20px;
 //     width: 100%;
-    
+
 // }
 //     .space-image {
 //     width: 100%;
@@ -119,14 +119,14 @@
   margin: 0;
   border-radius: 50%;
 }
-.heroImg{
+.heroImg {
   display: block;
   --hero-radius: 50px 50px 100px 100px / 60px 60px 20px 20px;
   border-radius: var(--hero-radius);
   width: 100%;
-  height:15rem;
+  height: 15rem;
   box-shadow: inset 5px -2px 7px 0px rgb(185 188 231 / 37%),
-        0px 8px 0px 0px var(--theme-divider);
+    0px 8px 0px 0px var(--theme-divider);
   border-radius: var(--hero-radius);
   object-fit: cover;
 }
@@ -152,7 +152,7 @@
 }
 
 .tooltip .tooltip-text::after {
-  content: "";
+  content: '';
   position: absolute;
   top: 100%;
   left: 50%;
@@ -164,4 +164,4 @@
 
 .tooltip:hover .tooltip-text {
   visibility: visible;
-}
\ No newline at end of file
+}
diff --git a/docs/src/data/components.json b/docs/src/data/components.json
index 50b4ff61b..b5fde67a5 100644
--- a/docs/src/data/components.json
+++ b/docs/src/data/components.json
@@ -20,4 +20,4 @@
       "demo": null
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/docs/src/pages/quick-start.md b/docs/src/pages/quick-start.md
index 6998826fe..71b0625ad 100644
--- a/docs/src/pages/quick-start.md
+++ b/docs/src/pages/quick-start.md
@@ -27,7 +27,6 @@ To learn more about installing and using Astro for the first time, please [read
 
 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
 
 From inside your project directory, enter the following command into your terminal:
diff --git a/examples/blog-multiple-authors/package.json b/examples/blog-multiple-authors/package.json
index f52dca4af..e0284aec2 100644
--- a/examples/blog-multiple-authors/package.json
+++ b/examples/blog-multiple-authors/package.json
@@ -3,13 +3,16 @@
   "version": "0.0.1",
   "private": true,
   "description": "Use Case: Multiple Authors Blogging Site built using Astro",
-  "keywords": ["kitchen-sink","template","astro"],
+  "keywords": [
+    "kitchen-sink",
+    "template",
+    "astro"
+  ],
   "repository": {
     "directory": "/examples/blog-multiple-authors",
     "type": "github",
     "url": "https://github.com/snowpackjs/astro/tree/main"
   },
-
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
diff --git a/examples/blog/package.json b/examples/blog/package.json
index d6adae7a3..ad109e30b 100644
--- a/examples/blog/package.json
+++ b/examples/blog/package.json
@@ -3,7 +3,11 @@
   "version": "0.0.1",
   "private": true,
   "description": "Blog Site built using Astro. Use this Template to setup your own Blog",
-  "keywords": ["create-astro","template","astro"],
+  "keywords": [
+    "create-astro",
+    "template",
+    "astro"
+  ],
   "repository": {
     "directory": "/examples/blog",
     "type": "github",
@@ -21,5 +25,4 @@
   "snowpack": {
     "workspaceRoot": "../.."
   }
-
 }
diff --git a/examples/blog/sandbox.config.json b/examples/blog/sandbox.config.json
index 1027d5e6c..9178af77d 100644
--- a/examples/blog/sandbox.config.json
+++ b/examples/blog/sandbox.config.json
@@ -1,11 +1,11 @@
 {
-    "infiniteLoopProtection": true,
-    "hardReloadOnChange": false,
-    "view": "browser",
-    "template": "node",
-    "container": {
-      "port": 3000,
-      "startScript": "start",
-      "node": "14"
-    }
-}
\ No newline at end of file
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "template": "node",
+  "container": {
+    "port": 3000,
+    "startScript": "start",
+    "node": "14"
+  }
+}
diff --git a/examples/docs/package.json b/examples/docs/package.json
index e27eb942f..2760bf7e0 100644
--- a/examples/docs/package.json
+++ b/examples/docs/package.json
@@ -3,13 +3,16 @@
   "version": "0.0.1",
   "private": true,
   "description": "Documentation Site built using Astro. Our own Doc's site is based of this template!",
-  "keywords": ["create-astro","template","astro"],
+  "keywords": [
+    "create-astro",
+    "template",
+    "astro"
+  ],
   "repository": {
     "directory": "/examples/docs",
     "type": "github",
     "url": "https://github.com/snowpackjs/astro/tree/main"
   },
-
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
diff --git a/examples/framework-lit/package.json b/examples/framework-lit/package.json
index e7c74b07d..4b7d1a43d 100644
--- a/examples/framework-lit/package.json
+++ b/examples/framework-lit/package.json
@@ -3,7 +3,11 @@
   "version": "0.0.1",
   "private": true,
   "description": "An example on how to use Lit's Web Components within Astro to build your site",
-  "keywords": ["framework","template","astro"],
+  "keywords": [
+    "framework",
+    "template",
+    "astro"
+  ],
   "repository": {
     "directory": "/examples/framework-lit",
     "type": "github",
diff --git a/examples/framework-multiple/package.json b/examples/framework-multiple/package.json
index c1876bf3f..4217f9f15 100644
--- a/examples/framework-multiple/package.json
+++ b/examples/framework-multiple/package.json
@@ -3,13 +3,16 @@
   "version": "0.0.1",
   "private": true,
   "description": "A Demonstration of using Multiple UI Frameworks such as React, Svelte, Preact and Vue altogether with Astro",
-  "keywords": ["framework","astro","template"],
+  "keywords": [
+    "framework",
+    "astro",
+    "template"
+  ],
   "repository": {
     "directory": "/examples/framework-multiple",
     "type": "github",
     "url": "https://github.com/snowpackjs/astro/tree/main"
   },
-
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
diff --git a/examples/framework-preact/package.json b/examples/framework-preact/package.json
index 3bcbe6333..7e21b6952 100644
--- a/examples/framework-preact/package.json
+++ b/examples/framework-preact/package.json
@@ -3,7 +3,11 @@
   "version": "0.0.1",
   "private": true,
   "description": "A Demonstration on using Preact's ulta lightweight UI library to build your site with Astro",
-  "keywords": ["framework","template","astro"],
+  "keywords": [
+    "framework",
+    "template",
+    "astro"
+  ],
   "repository": {
     "directory": "/examples/framework-preact",
     "type": "github",
diff --git a/examples/framework-react/package.json b/examples/framework-react/package.json
index 7efc36238..4c26c2458 100644
--- a/examples/framework-react/package.json
+++ b/examples/framework-react/package.json
@@ -3,13 +3,16 @@
   "version": "0.0.1",
   "private": true,
   "description": "Explore how to using the powerful React Library to develop components within Astro",
-  "keywords": ["framework","template","astro"],
+  "keywords": [
+    "framework",
+    "template",
+    "astro"
+  ],
   "repository": {
     "directory": "/examples/framework-react",
     "type": "github",
     "url": "https://github.com/snowpackjs/astro/tree/main"
   },
-
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
diff --git a/examples/framework-solid/package.json b/examples/framework-solid/package.json
index ade13dcf7..68d427054 100644
--- a/examples/framework-solid/package.json
+++ b/examples/framework-solid/package.json
@@ -1,6 +1,10 @@
 {
   "name": "@example/framework-solid",
-  "keywords": ["framework","template","astro"],
+  "keywords": [
+    "framework",
+    "template",
+    "astro"
+  ],
   "private": true,
   "version": "0.0.1",
   "description": "See how to seamlessly use Solid UI to develop Web Components within Astro",
diff --git a/examples/framework-svelte/package.json b/examples/framework-svelte/package.json
index 0c8ee1c8b..2e6d02beb 100644
--- a/examples/framework-svelte/package.json
+++ b/examples/framework-svelte/package.json
@@ -3,7 +3,11 @@
   "version": "0.0.1",
   "private": true,
   "description": "See how we combined the power of Svelte alongside Astro ",
-  "keywords": ["framework","template","astro"],
+  "keywords": [
+    "framework",
+    "template",
+    "astro"
+  ],
   "repository": {
     "directory": "/examples/framework-svelte",
     "type": "github",
diff --git a/examples/framework-vue/package.json b/examples/framework-vue/package.json
index a444531c0..8a16f7051 100644
--- a/examples/framework-vue/package.json
+++ b/examples/framework-vue/package.json
@@ -1,7 +1,11 @@
 {
   "name": "@example/framework-vue",
   "version": "0.0.1",
-  "keywords": ["framework","template","astro"],
+  "keywords": [
+    "framework",
+    "template",
+    "astro"
+  ],
   "private": true,
   "description": "View our demonstration where we use Vue to create UI components for Astro",
   "repository": {
diff --git a/examples/minimal/package.json b/examples/minimal/package.json
index 3b7d2f0ab..56af23bde 100644
--- a/examples/minimal/package.json
+++ b/examples/minimal/package.json
@@ -3,7 +3,11 @@
   "version": "0.0.1",
   "private": true,
   "description": "Minimalistic Astro Starter kit",
-  "keywords": ["create-astro","template","astro"],
+  "keywords": [
+    "create-astro",
+    "template",
+    "astro"
+  ],
   "repository": {
     "directory": "/examples/minimal",
     "type": "github",
diff --git a/examples/portfolio/package.json b/examples/portfolio/package.json
index 6e2f03b78..1e4362387 100644
--- a/examples/portfolio/package.json
+++ b/examples/portfolio/package.json
@@ -3,7 +3,11 @@
   "version": "0.0.1",
   "private": true,
   "description": "Astro's official Portfolio Template. For truly impressive portfolios its best built with Astro",
-  "keywords": ["create-astro","template","astro"],
+  "keywords": [
+    "create-astro",
+    "template",
+    "astro"
+  ],
   "repository": {
     "directory": "/examples/portfolio",
     "type": "github",
diff --git a/examples/snowpack/package.json b/examples/snowpack/package.json
index 817eeda56..52c28d2f4 100644
--- a/examples/snowpack/package.json
+++ b/examples/snowpack/package.json
@@ -3,7 +3,11 @@
   "version": "0.0.1",
   "private": true,
   "description": "Astro's First Template, everything has a beginning, and this for Astro's templates, was our 'Hello World'",
-  "keywords": ["kitchen-sink","template","astro"],
+  "keywords": [
+    "kitchen-sink",
+    "template",
+    "astro"
+  ],
   "repository": {
     "directory": "/examples/snowpack",
     "type": "github",
diff --git a/examples/starter/package.json b/examples/starter/package.json
index b6b133185..68674a3cc 100644
--- a/examples/starter/package.json
+++ b/examples/starter/package.json
@@ -3,7 +3,11 @@
   "version": "0.0.1",
   "private": true,
   "description": "Astro's default template. This starter template is a perfect launchpad for your Astro project",
-  "keywords": ["create-astro","template","astro"],
+  "keywords": [
+    "create-astro",
+    "template",
+    "astro"
+  ],
   "repository": {
     "directory": "/examples/starter",
     "type": "github"
diff --git a/examples/with-markdown-plugins/package.json b/examples/with-markdown-plugins/package.json
index 67e65e85b..158044d2f 100644
--- a/examples/with-markdown-plugins/package.json
+++ b/examples/with-markdown-plugins/package.json
@@ -3,7 +3,11 @@
   "version": "0.0.2",
   "private": true,
   "description": "Using Markdown along with Rehype and Remark Plugins with Astro",
-  "keywords": ["kitchen-sink","template","astro"],
+  "keywords": [
+    "kitchen-sink",
+    "template",
+    "astro"
+  ],
   "repository": {
     "directory": "/examples/with-markdown-plugins",
     "type": "github",
diff --git a/examples/with-markdown/package.json b/examples/with-markdown/package.json
index a47797574..26c359890 100644
--- a/examples/with-markdown/package.json
+++ b/examples/with-markdown/package.json
@@ -3,12 +3,16 @@
   "description": "A demonstration on using Markdown with Astro",
   "version": "0.0.1",
   "private": true,
-    "keywords": ["kitchen-sink","template","astro"],
-    "repository": {
-      "directory": "/examples/with-markdown",
-      "type": "github",
-      "url": "https://github.com/snowpackjs/astro/tree/main"
-    },
+  "keywords": [
+    "kitchen-sink",
+    "template",
+    "astro"
+  ],
+  "repository": {
+    "directory": "/examples/with-markdown",
+    "type": "github",
+    "url": "https://github.com/snowpackjs/astro/tree/main"
+  },
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
diff --git a/examples/with-nanostores/package.json b/examples/with-nanostores/package.json
index 8e4f2d488..0de6418d7 100644
--- a/examples/with-nanostores/package.json
+++ b/examples/with-nanostores/package.json
@@ -3,7 +3,11 @@
   "version": "0.0.1",
   "private": true,
   "description": "A working example on using the aptly named Nanostores State Management plugin with Astro",
-  "keywords": ["kitchen-sink","template","astro"],
+  "keywords": [
+    "kitchen-sink",
+    "template",
+    "astro"
+  ],
   "repository": {
     "directory": "/examples/with-nanostores",
     "type": "github",
diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json
index 1882c5651..b03070f23 100644
--- a/examples/with-tailwindcss/package.json
+++ b/examples/with-tailwindcss/package.json
@@ -3,7 +3,11 @@
   "version": "0.0.1",
   "private": true,
   "description": "Astro has native TailwindCSS support out-of-the-box. This template demonstrates how to use Tailwind to style your Astro project",
-  "keywords": ["kitchen-sink","template","astro"],
+  "keywords": [
+    "kitchen-sink",
+    "template",
+    "astro"
+  ],
   "repository": {
     "directory": "/examples/with-tailwindcss",
     "type": "github",
diff --git a/packages/create-astro/create-astro.mjs b/packages/create-astro/create-astro.mjs
index 56919b42e..975b921dc 100755
--- a/packages/create-astro/create-astro.mjs
+++ b/packages/create-astro/create-astro.mjs
@@ -1,14 +1,14 @@
-#!/usr/bin/env node

-'use strict';

-

-const currentVersion = process.versions.node;

-const requiredMajorVersion = parseInt(currentVersion.split('.')[0], 10);

-const minimumMajorVersion = 12;

-

-if (requiredMajorVersion < minimumMajorVersion) {

-  console.error(`Node.js v${currentVersion} is out of date and unsupported!`);

-  console.error(`Please use Node.js v${minimumMajorVersion} or higher.`);

-  process.exit(1);

-}

-

-import('./dist/index.js').then(({ main }) => main());

+#!/usr/bin/env node
+'use strict';
+
+const currentVersion = process.versions.node;
+const requiredMajorVersion = parseInt(currentVersion.split('.')[0], 10);
+const minimumMajorVersion = 12;
+
+if (requiredMajorVersion < minimumMajorVersion) {
+  console.error(`Node.js v${currentVersion} is out of date and unsupported!`);
+  console.error(`Please use Node.js v${minimumMajorVersion} or higher.`);
+  process.exit(1);
+}
+
+import('./dist/index.js').then(({ main }) => main());