michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[ci] yarn format

Browse source
This commit is contained in:
FredKSchott 2021-09-06 08:25:23 +00:00 committed by GitHub Actions
parent 6185f9f7b1
commit b4d1c9bc64
25 changed files with 215 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
docs/src/components/Examples/CardLink.tsx
View file

@ -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
export default CardLink;

69
docs/src/components/Examples/Codebar.tsx
View file

@ -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;

14
docs/src/components/Examples/card.scss
View file

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

2
docs/src/data/components.json
View file

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

1
docs/src/pages/quick-start.md
View file

@ -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:

7
examples/blog-multiple-authors/package.json
View file

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

7
examples/blog/package.json
View file

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

20
examples/blog/sandbox.config.json
View file

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

7
examples/docs/package.json
View file

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

6
examples/framework-lit/package.json
View file

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

7
examples/framework-multiple/package.json
View file

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

6
examples/framework-preact/package.json
View file

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

7
examples/framework-react/package.json
View file

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

6
examples/framework-solid/package.json
View file

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

6
examples/framework-svelte/package.json
View file

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

6
examples/framework-vue/package.json
View file

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

6
examples/minimal/package.json
View file

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

6
examples/portfolio/package.json
View file

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

6
examples/snowpack/package.json
View file

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

6
examples/starter/package.json
View file

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

6
examples/with-markdown-plugins/package.json
View file

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

16
examples/with-markdown/package.json
View file

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

6
examples/with-nanostores/package.json
View file

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

6
examples/with-tailwindcss/package.json
View file

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

28
packages/create-astro/create-astro.mjs
View file

@ -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());