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=({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 = ({ + 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( -
- {children} -
- ) -} + } + return ( +
+ {children} +
+ ); +}; -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( -
- - {content} - -
- ) -} - -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 ( +
+ {content} +
+ ); +}; +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());