Docs/example and templates v2 (#1100)
This commit is contained in:
Fred K. Schott
commit
6185f9f7b1
41 changed files with 982 additions and 54 deletions
5
docs/src/components/ContainerQuery.astro
Normal file
5
docs/src/components/ContainerQuery.astro
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script type="module">
|
||||
import { cqfill } from 'https://unpkg.com/cqfill@0.6.0/export/cqfill.mjs'
|
||||
|
||||
cqfill()
|
||||
</script>
|
||||
64
docs/src/components/Examples/Card.astro
Normal file
64
docs/src/components/Examples/Card.astro
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
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>
|
||||
37
docs/src/components/Examples/CardButtons.astro
Normal file
37
docs/src/components/Examples/CardButtons.astro
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
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>
|
||||
51
docs/src/components/Examples/CardLink.tsx
Normal file
51
docs/src/components/Examples/CardLink.tsx
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
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
|
||||
43
docs/src/components/Examples/Codebar.tsx
Normal file
43
docs/src/components/Examples/Codebar.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
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
|
||||
|
||||
|
||||
|
||||
95
docs/src/components/Examples/CollapsibleReadme.astro
Normal file
95
docs/src/components/Examples/CollapsibleReadme.astro
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
---
|
||||
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>
|
||||
124
docs/src/components/Examples/Thumbnail.astro
Normal file
124
docs/src/components/Examples/Thumbnail.astro
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
---
|
||||
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>
|
||||
167
docs/src/components/Examples/card.scss
Normal file
167
docs/src/components/Examples/card.scss
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
.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;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
const {content, githubEditUrl, currentPage} = Astro.props;
|
||||
const title = content.title;
|
||||
const headers = content.astro.headers;
|
||||
const headers = content.astro?.headers;
|
||||
import MoreMenu from '../RightSidebar/MoreMenu.astro';
|
||||
import TableOfContents from '../RightSidebar/TableOfContents.tsx';
|
||||
import {getLanguageFromURL} from '../../util.ts';
|
||||
|
|
@ -38,9 +38,9 @@ const previous = index !== -1 ? (index === 0 ? null : links[index - 1]) : null;
|
|||
<article id="article" class="content">
|
||||
<section class="main-section">
|
||||
<h1 class="content-title" id="overview">{title}</h1>
|
||||
<nav class="block sm:hidden">
|
||||
{headers && <nav class="block sm:hidden">
|
||||
<TableOfContents client:media="(max-width: 50em)" headers={headers}/>
|
||||
</nav>
|
||||
</nav>}
|
||||
<slot />
|
||||
</section>
|
||||
<nav class="block sm:hidden">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import TableOfContents from './TableOfContents.jsx';
|
||||
import MoreMenu from './MoreMenu.astro';
|
||||
const {content, githubEditUrl} = Astro.props;
|
||||
const headers = content.astro.headers;
|
||||
const headers = content.astro?.headers;
|
||||
---
|
||||
<style>
|
||||
.sidebar-nav {
|
||||
|
|
@ -19,7 +19,7 @@ const headers = content.astro.headers;
|
|||
</style>
|
||||
<nav class="sidebar-nav" aria-labelledby="grid-right">
|
||||
<div class="sidebar-nav-inner">
|
||||
<TableOfContents client:media="(min-width: 50em)" headers={headers} />
|
||||
{headers && <TableOfContents client:media="(min-width: 50em)" headers={headers} />}
|
||||
<MoreMenu editHref={githubEditUrl} />
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -4,7 +4,7 @@ export const SIDEBAR = {
|
|||
{ text: 'Getting Started', link: 'getting-started' },
|
||||
{ text: 'Quickstart', link: 'quick-start' },
|
||||
{ text: 'Installation', link: 'installation' },
|
||||
{ text: 'Examples', link: 'examples' },
|
||||
{ text: 'Themes', link: 'themes' },
|
||||
{ text: 'Astro vs. X', link: 'comparing-astro-vs-other-tools' },
|
||||
|
||||
{ text: 'Basics', header: true },
|
||||
|
|
|
|||
23
docs/src/data/components.json
Normal file
23
docs/src/data/components.json
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"official": [],
|
||||
"community": [
|
||||
{
|
||||
"name": "accessible-astro-components",
|
||||
"description": "A set of accessible modals, buttons, toggles and more.",
|
||||
"github": "https://www.npmjs.com/package/accessible-astro-components",
|
||||
"demo": null
|
||||
},
|
||||
{
|
||||
"name": "astro-static-tweet",
|
||||
"description": "A lightweight static-HTML tweet embed.",
|
||||
"github": "https://www.npmjs.com/package/@rebelchris/astro-static-tweet",
|
||||
"demo": null
|
||||
},
|
||||
{
|
||||
"name": "Astro SEO",
|
||||
"description": "SEO tags for your website.",
|
||||
"github": "https://github.com/jonasmerlin/astro-seo",
|
||||
"demo": null
|
||||
}
|
||||
]
|
||||
}
|
||||
54
docs/src/data/themes.json
Normal file
54
docs/src/data/themes.json
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
{
|
||||
"official": [
|
||||
{
|
||||
"name": "Starter Kit",
|
||||
"description": "A default starter project for Astro. Flexible enough to handle anything that you might want to build.",
|
||||
"github": "https://github.com/snowpackjs/astro/tree/main/examples/starter",
|
||||
"demo": null,
|
||||
"sandbox": "https://github.dev/snowpackjs/astro/tree/main/examples/starter",
|
||||
"command": "npm init astro"
|
||||
},
|
||||
{
|
||||
"name": "docs",
|
||||
"description": "A documentation website theme, complete with i18n, search, dark mode and more.",
|
||||
"github": "https://github.com/snowpackjs/astro/tree/main/examples/docs",
|
||||
"demo": null,
|
||||
"sandbox": "https://github.dev/snowpackjs/astro/tree/main/examples/docs",
|
||||
"command": "npm init astro -- --template docs"
|
||||
},
|
||||
{
|
||||
"name": "blog",
|
||||
"description": "A blog theme, perfect for personal and company blogs.",
|
||||
"github": "https://github.com/snowpackjs/astro/tree/main/examples/blog",
|
||||
"demo": null,
|
||||
"sandbox": "https://github.dev/snowpackjs/astro/tree/main/examples/blog",
|
||||
"command": "npm init astro -- --template blog"
|
||||
},
|
||||
{
|
||||
"name": "portfolio",
|
||||
"description": "A portfolio theme, perfect for your personal or professional online portfolio.",
|
||||
"github": "https://github.com/snowpackjs/astro/tree/main/examples/portfolio",
|
||||
"demo": null,
|
||||
"sandbox": "https://github.dev/snowpackjs/astro/tree/main/examples/portfolio",
|
||||
"command": "npm init astro -- --template portfolio"
|
||||
},
|
||||
{
|
||||
"name": "minimal",
|
||||
"description": "A minimal theme, with just the bare minimum needed to get started.",
|
||||
"github": "https://github.com/snowpackjs/astro/tree/main/examples/minimum",
|
||||
"demo": null,
|
||||
"sandbox": "https://github.dev/snowpackjs/astro/tree/main/examples/minimum",
|
||||
"command": "npm init astro -- --template minimum"
|
||||
}
|
||||
],
|
||||
"community": [
|
||||
{
|
||||
"name": "Ink",
|
||||
"description": "Crisp, minimal, personal blog theme for Astro",
|
||||
"github": "https://github.com/one-aalam/astro-ink",
|
||||
"demo": "https://astro-ink.vercel.app/",
|
||||
"sandbox": "https://github.dev/one-aalam/astro-ink",
|
||||
"command": "npm init astro -- --template one-aalam/astro-ink"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
|
|||
import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
|
||||
import { SITE } from "../config.ts";
|
||||
|
||||
const { content = {} } = Astro.props;
|
||||
const { content = {}, hideRightSidebar = false} = Astro.props;
|
||||
const currentPage = Astro.request.url.pathname;
|
||||
const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`;
|
||||
const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${currentFile}`;
|
||||
|
|
@ -116,7 +116,7 @@ const formatTitle = (content, SITE) => content.title ? `${content.title} 🚀 ${
|
|||
</PageContent>
|
||||
</div>
|
||||
<aside id="grid-right" class="grid-sidebar" title="Table of Contents">
|
||||
<RightSidebar content={content} githubEditUrl={githubEditUrl} />
|
||||
{!hideRightSidebar && <RightSidebar content={content} githubEditUrl={githubEditUrl} />}
|
||||
</aside>
|
||||
</main>
|
||||
</body>
|
||||
|
|
|
|||
14
docs/src/pages/demo.astro
Normal file
14
docs/src/pages/demo.astro
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
import Layout from '../layouts/ExamplesLayout.astro'
|
||||
import templateData from '../components/Examples/function-generate-examples-data.js'
|
||||
import Card from '../components/Examples/Card.astro'
|
||||
|
||||
let data = await templateData()
|
||||
|
||||
---
|
||||
|
||||
<Layout content={data}>
|
||||
{data.filter(item=> (item.pkgJSON?.keywords?.includes('create-astro')))
|
||||
.sort((a,b)=> ((a.name === 'starter')? -1 : 1))
|
||||
.map((item)=>(<Card data={item}/>))}
|
||||
</Layout>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
---
|
||||
layout: ~/layouts/MainLayout.astro
|
||||
title: Examples
|
||||
---
|
||||
|
||||
If you prefer to learn by example, check out our [Examples Library](https://github.com/snowpackjs/astro/tree/main/examples) on GitHub.
|
||||
|
||||
<!-- Once we merge astro-docs back into the main repo, we can actually fetch the list of examples at build-time by scanning the examples/ directory! -->
|
||||
|
|
@ -15,6 +15,20 @@ To get started with Astro in 5 quick and easy steps, visit our [Quick-Start guid
|
|||
|
||||
Alternatively, read our [Installation Guide](/installation) for a full walk-through on getting set up with Astro.
|
||||
|
||||
### Example Projects
|
||||
|
||||
If you prefer to learn Astro 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 on your local machine by running `npm init astro` with the `--template` CLI flag. The `--template` flag also supports third-party, community templates.
|
||||
|
||||
```bash
|
||||
# Run the init wizard and use this official template
|
||||
npm init astro -- --template [OFFICIAL_EXAMPLE_NAME]
|
||||
# Run the init wizard and use this community template
|
||||
npm init astro -- --template [GITHUB_USER]/[REPO_NAME]
|
||||
npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example
|
||||
```
|
||||
|
||||
### Online Playgrounds
|
||||
|
||||
If you're interested in playing around with Astro in the browser, you can use an online code playground. Try our "Hello World!" template on [CodeSandbox](https://codesandbox.io/s/astro-template-hugb3).
|
||||
|
|
|
|||
|
|
@ -23,7 +23,10 @@ npm run dev
|
|||
npm run build
|
||||
```
|
||||
|
||||
If you wish to learn more about the range of methods to install and setup Astro for your project's, please [read our installation guide.](installation)
|
||||
To learn more about installing and using Astro for the first time, please [read our installation guide.](installation)
|
||||
|
||||
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
|
||||
|
||||
|
|
|
|||
45
docs/src/pages/themes.astro
Normal file
45
docs/src/pages/themes.astro
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
---
|
||||
import Layout from '../layouts/MainLayout.astro';
|
||||
import Card from '../components/Examples/Card.astro';
|
||||
import {Markdown} from 'astro/components';
|
||||
import themes from '../data/themes.json';
|
||||
import components from '../data/components.json';
|
||||
---
|
||||
<style>
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
grid-auto-flow: dense;
|
||||
grid-template-columns: repeat(auto-fit,minmax(300px,1fr))
|
||||
}
|
||||
</style>
|
||||
<Layout content={{title: 'Themes'}} hideRightSidebar>
|
||||
<Markdown>
|
||||
## Featured Themes
|
||||
|
||||
Astro is supported by a growing ecosystem of third-pary themes and components.
|
||||
</Markdown>
|
||||
<div class="card-grid">
|
||||
|
||||
{themes.community.map((item)=>(<Card data={item} />))}
|
||||
</div>
|
||||
<Markdown>
|
||||
## Official Themes
|
||||
|
||||
Astro maintains several official themes for common use-cases like documentation, portfolios, and more.
|
||||
</Markdown>
|
||||
<div class="card-grid">
|
||||
|
||||
{themes.official.map((item)=>(<Card data={item} />))}
|
||||
</div>
|
||||
<Markdown>
|
||||
## Featured Packages
|
||||
|
||||
Our package ecosystem is growing! Check out these featured community packages.
|
||||
</Markdown>
|
||||
<div class="card-grid">
|
||||
|
||||
{components.community.map((item)=>(<Card data={item} />))}
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
# Astro Starter Kit: Blog with Multiple Authors
|
||||
|
||||
```
|
||||
npm init astro -- --template blog-multiple-authors
|
||||
```
|
||||
Our Blog with Multiple Authors Template, is a working example of our Blog template being adapted to narrate the story of "Sancho Panza" and "Don Quixote".
|
||||
|
||||
Here we display how you can use Astro to provide individual content for both Sancho Panza and Don Quixote. This is a great working example of our Collections API in action.
|
||||
|
||||
We hope you enjoy this with a small Santeria, remember to build responsibly...
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
|
|
@ -18,23 +20,48 @@ Features:
|
|||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```
|
||||
/
|
||||
├── public/
|
||||
│ ├── robots.txt
|
||||
│ ├── assets/
|
||||
│ ├── blog.scss
|
||||
│ ├── global.scss
|
||||
│ ├── social.png
|
||||
│ ├── social.jpg
|
||||
│ └── favicon.ico
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ └── Tour.astro
|
||||
│ │ └── MainHead.astro
|
||||
│ │ └── Nav.astro
|
||||
│ │ └── Pagination.astro
|
||||
│ │ └── PostPreview.astro
|
||||
│ └── layouts/
|
||||
│ │ └── post.astro
|
||||
│ └── pages/
|
||||
│ ├── posts/
|
||||
│ │ └── Series of Markdown files
|
||||
│ └── $author.astro
|
||||
│ └── $posts.astro
|
||||
│ └── about.astro
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
Files located within the public directory are static assets such as; stylesheets, images, fonts files etc.
|
||||
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
Located within the `src/` directory is the `components/` `layout/` and `pages/` directories.
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
The `src/components/` directory is where all you UI components are stored, this includes components from your framework of choice, whether they be:
|
||||
|
||||
- Astro Components
|
||||
- React
|
||||
- Preact
|
||||
- Solid
|
||||
- Svelte Or Vue.
|
||||
|
||||
You can visit our [Astro Components](https://docs.astro.build/core-concepts/astro-components) page for more information on creating your own components.
|
||||
|
||||
Astro used [file-based routing](https://docs.astro.build/core-concepts/routing), this is done by having Astro look for `.astro` or `.md` files in the `src/pages/` directory. Each page is then exposed as a route based on its file name.
|
||||
|
||||
To find out more about using [Pages with Astro](https://docs.astro.build/core-concepts/astro-pages) and how our file-based routing works.
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
|
|
@ -48,4 +75,8 @@ All commands are run from the root of the project, from a terminal:
|
|||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://github.com/snowpackjs/astro) or jump into our [Discord server](https://astro.build/chat).
|
||||
This Template can be used as a solid platform to get your own Blog site up and running with little effort as possible. Or as a educational demonstration.
|
||||
|
||||
Regardless of your intentions, we simply wish for you to truly explore and learn how to get the most from Astro and this template has been created in such a way to allow you to do so.
|
||||
|
||||
Feel free to check [our documentation](https://github.com/snowpackjs/astro) if you get stuck or jump into our [Discord server](https://astro.build/chat) to speak with other Astronauts.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,14 @@
|
|||
"name": "@example/blog-multiple-authors",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"description": "Use Case: Multiple Authors Blogging Site built using 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",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
# Astro Starter Kit: Blog
|
||||
# Astro's Starter Kit: Blog
|
||||
|
||||
```
|
||||
npm init astro -- --template blog
|
||||
```
|
||||
Welcome to Astro's Blog's Readme. This template is a straight forward way to launch your own Blogging site using Astro. We highly encourage you to explore the contents of this template and play about with it to make it your own.
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
> 🧑🚀 **Seasoned Astronaut?** Delete this file. Have fun!
|
||||
|
||||
Features:
|
||||
|
||||
|
|
@ -17,24 +15,47 @@ Features:
|
|||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```
|
||||
```bash
|
||||
/
|
||||
├── public/
|
||||
│ ├── robots.txt
|
||||
│ ├── assets/
|
||||
│ ├── blog.scss
|
||||
│ ├── global.scss
|
||||
│ ├── social.png
|
||||
│ ├── social.jpg
|
||||
│ └── favicon.ico
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ └── Tour.astro
|
||||
│ │ └── Author.astro
|
||||
│ │ └── BaseHead.astro
|
||||
│ │ └── BlogHeader.astro
|
||||
│ │ └── BlogPost.astro
|
||||
│ │ └── BlogPostPreview.astro
|
||||
│ │ └── Logo.astro
|
||||
│ └── layouts/
|
||||
│ │ └── BlogPost.astro
|
||||
│ └── pages/
|
||||
│ ├── posts/
|
||||
│ │ └── introducing-astro.astro
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
Files located within the public directory are static assets such as; stylesheets, images, fonts files etc.
|
||||
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
Located within the `src/` directory is the `components/` `layout/` and `pages/` directories.
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
The `src/components/` directory is where all you UI components are stored, this includes components from your framework of choice, whether they be:
|
||||
|
||||
- Astro Components
|
||||
- React
|
||||
- Preact
|
||||
- Solid
|
||||
- Svelte Or Vue.
|
||||
|
||||
You can visit our [Astro Components](https://docs.astro.build/core-concepts/astro-components) page for more information on creating your own components.
|
||||
|
||||
Astro used file-based routing, this is done by having Astro look for `.astro` or `.md` files in the `src/pages/` directory. Each page is then exposed as a route based on its file name. To find out more about using [Pages with Astro](https://docs.astro.build/core-concepts/astro-pages) and how our file-based routing works.
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
|
|
@ -48,4 +69,8 @@ All commands are run from the root of the project, from a terminal:
|
|||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://github.com/snowpackjs/astro) or jump into our [Discord server](https://astro.build/chat).
|
||||
This Template can be used as a primary launch pad to get your own Blog site up and running with little effort as possible. Or as a educational demonstration.
|
||||
|
||||
Regardless of your intentions, we simply wish for you to truly explore and learn how to get the most from Astro and this template has been created in such a way to allow you to do so.
|
||||
|
||||
Feel free to check [our documentation](https://github.com/snowpackjs/astro) if you get stuck or jump into our [Discord server](https://astro.build/chat) to speak with other Astronauts.
|
||||
|
|
|
|||
|
|
@ -2,6 +2,13 @@
|
|||
"name": "@example/blog",
|
||||
"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"],
|
||||
"repository": {
|
||||
"directory": "/examples/blog",
|
||||
"type": "github",
|
||||
"url": "https://github.com/snowpackjs/astro/tree/main"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
@ -14,4 +21,5 @@
|
|||
"snowpack": {
|
||||
"workspaceRoot": "../.."
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
11
examples/blog/sandbox.config.json
Normal file
11
examples/blog/sandbox.config.json
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"infiniteLoopProtection": true,
|
||||
"hardReloadOnChange": false,
|
||||
"view": "browser",
|
||||
"template": "node",
|
||||
"container": {
|
||||
"port": 3000,
|
||||
"startScript": "start",
|
||||
"node": "14"
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,14 @@
|
|||
"name": "@example/docs",
|
||||
"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"],
|
||||
"repository": {
|
||||
"directory": "/examples/docs",
|
||||
"type": "github",
|
||||
"url": "https://github.com/snowpackjs/astro/tree/main"
|
||||
},
|
||||
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,13 @@
|
|||
"name": "@example/framework-lit",
|
||||
"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"],
|
||||
"repository": {
|
||||
"directory": "/examples/framework-lit",
|
||||
"type": "github",
|
||||
"url": "https://github.com/snowpackjs/astro/tree/main"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,14 @@
|
|||
"name": "@example/framework-multiple",
|
||||
"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"],
|
||||
"repository": {
|
||||
"directory": "/examples/framework-multiple",
|
||||
"type": "github",
|
||||
"url": "https://github.com/snowpackjs/astro/tree/main"
|
||||
},
|
||||
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,13 @@
|
|||
"name": "@example/framework-preact",
|
||||
"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"],
|
||||
"repository": {
|
||||
"directory": "/examples/framework-preact",
|
||||
"type": "github",
|
||||
"url": "https://github.com/snowpackjs/astro/tree/main"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,14 @@
|
|||
"name": "@example/framework-react",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"description": "Explore how to using the powerful React Library to develop components within 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",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,14 @@
|
|||
{
|
||||
"name": "@example/framework-solid",
|
||||
"version": "0.0.1",
|
||||
"keywords": ["framework","template","astro"],
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"description": "See how to seamlessly use Solid UI to develop Web Components within Astro",
|
||||
"repository": {
|
||||
"directory": "/examples/framework-solid",
|
||||
"type": "github",
|
||||
"url": "https://github.com/snowpackjs/astro/tree/main"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,13 @@
|
|||
"name": "@example/framework-svelte",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"description": "See how we combined the power of Svelte alongside Astro ",
|
||||
"keywords": ["framework","template","astro"],
|
||||
"repository": {
|
||||
"directory": "/examples/framework-svelte",
|
||||
"type": "github",
|
||||
"url": "https://github.com/snowpackjs/astro/tree/main"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,14 @@
|
|||
{
|
||||
"name": "@example/framework-vue",
|
||||
"version": "0.0.1",
|
||||
"keywords": ["framework","template","astro"],
|
||||
"private": true,
|
||||
"description": "View our demonstration where we use Vue to create UI components for Astro",
|
||||
"repository": {
|
||||
"directory": "/examples/framework-vue",
|
||||
"type": "github",
|
||||
"url": "https://github.com/snowpackjs/astro/tree/main"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,13 @@
|
|||
"name": "@example/minimal",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"description": "Minimalistic Astro Starter kit",
|
||||
"keywords": ["create-astro","template","astro"],
|
||||
"repository": {
|
||||
"directory": "/examples/minimal",
|
||||
"type": "github",
|
||||
"url": "https://github.com/snowpackjs/astro/tree/main"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,13 @@
|
|||
"name": "@example/portfolio",
|
||||
"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"],
|
||||
"repository": {
|
||||
"directory": "/examples/portfolio",
|
||||
"type": "github",
|
||||
"url": "https://github.com/snowpackjs/astro/tree/main"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,13 @@
|
|||
"name": "@example/snowpack",
|
||||
"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"],
|
||||
"repository": {
|
||||
"directory": "/examples/snowpack",
|
||||
"type": "github",
|
||||
"url": "https://github.com/snowpackjs/astro/tree/main"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
"name": "@example/starter",
|
||||
"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"],
|
||||
"repository": {
|
||||
"directory": "/examples/starter",
|
||||
"type": "github"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,13 @@
|
|||
"name": "@example/with-markdown-plugins",
|
||||
"version": "0.0.2",
|
||||
"private": true,
|
||||
"description": "Using Markdown along with Rehype and Remark Plugins with Astro",
|
||||
"keywords": ["kitchen-sink","template","astro"],
|
||||
"repository": {
|
||||
"directory": "/examples/with-markdown-plugins",
|
||||
"type": "github",
|
||||
"url": "https://github.com/snowpackjs/astro/tree/main"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,14 @@
|
|||
{
|
||||
"name": "@example/with-markdown",
|
||||
"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"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,13 @@
|
|||
"name": "@example/with-nanostores",
|
||||
"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"],
|
||||
"repository": {
|
||||
"directory": "/examples/with-nanostores",
|
||||
"type": "github",
|
||||
"url": "https://github.com/snowpackjs/astro/tree/main"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,13 @@
|
|||
"name": "@example/with-tailwindcss",
|
||||
"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"],
|
||||
"repository": {
|
||||
"directory": "/examples/with-tailwindcss",
|
||||
"type": "github",
|
||||
"url": "https://github.com/snowpackjs/astro/tree/main"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
|
|||
|
|
@ -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());
|
||||
|
|
|
|||
Loading…
Reference in a new issue