[ci] yarn format

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 ={
+export type CardLinkProps = {
-    href:string
+  href: string;
-    name:string
+  name: string;
-    children:JSX | JSX[]
+  children: JSX | JSX[];
-}
+};
 
-const CardLink:Component<CardLinkProps>=({href,name,children}:CardLinkProps):JSX.Element=>{
+const CardLink: Component<CardLinkProps> = ({
-    const Card = useRef(null)
+  href,
-    /**
+  name,
-     * Set Title Attribute when Hovering over Card
+  children,
-     * @param e - Mouse Enter Event
+}: CardLinkProps): JSX.Element => {
-     */
+  const Card = useRef(null);
-    function handleOnMouseEnter(e){
+  /**
-        const cardBody = Card.current.querySelector('.card-body')
+   * Set Title Attribute when Hovering over Card
-        const cardThumb = Card.current.querySelector('.icon-image')
+   * @param e - Mouse Enter Event
-        const cardImg = Card.current.querySelector('.heroImg')
+   */
+  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 ) {
+    if (
-            e.target.setAttribute('title',`Click to find out more about our ${name} template`)
+      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
+   * Click Link Card to Page
-     * @returns new window location
+   * @param e - Click Event
-     */
+   * @returns new window location
-    function handleOnClick(e){
+   */
-        const card = e.target
+  function handleOnClick(e) {
-        const mainLink = card.querySelector('.main-link')
+    const card = e.target;
-        const clickableArea = ['.card-body','.icon-image','.heroImg']
+    const mainLink = card.querySelector('.main-link');
-        for(let area of clickableArea){
+    const clickableArea = ['.card-body', '.icon-image', '.heroImg'];
-            if(e.currentTarget.classList.contains(area)) {
+    for (let area of clickableArea) {
-                return mainLink.click()
+      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">
+  return (
-            {children}
+    <div
-        </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
+export default CardLink;

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 ={
+export type CodeBar = {
-    content:string
+  content: string;
-    command: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
 
+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;

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;
-}
+}

docs/src/data/components.json

@@ -20,4 +20,4 @@
       "demo": null
     }
   ]
-}
+}

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:

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",

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": "../.."
   }
-
 }

examples/blog/sandbox.config.json

@@ -1,11 +1,11 @@
 {
-    "infiniteLoopProtection": true,
+  "infiniteLoopProtection": true,
-    "hardReloadOnChange": false,
+  "hardReloadOnChange": false,
-    "view": "browser",
+  "view": "browser",
-    "template": "node",
+  "template": "node",
-    "container": {
+  "container": {
-      "port": 3000,
+    "port": 3000,
-      "startScript": "start",
+    "startScript": "start",
-      "node": "14"
+    "node": "14"
-    }
+  }
-}
+}

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",

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",

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",

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",

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",

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",

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",

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": {

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",

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",

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",

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"

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",

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"],
+  "keywords": [
-    "repository": {
+    "kitchen-sink",
-      "directory": "/examples/with-markdown",
+    "template",
-      "type": "github",
+    "astro"
-      "url": "https://github.com/snowpackjs/astro/tree/main"
+  ],
-    },
+  "repository": {
+    "directory": "/examples/with-markdown",
+    "type": "github",
+    "url": "https://github.com/snowpackjs/astro/tree/main"
+  },
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

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",

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",

packages/create-astro/create-astro.mjs

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