diff options
Diffstat (limited to 'docs/src')
23 files changed, 1257 insertions, 8 deletions
diff --git a/docs/src/components/ContainerQuery.astro b/docs/src/components/ContainerQuery.astro new file mode 100644 index 000000000..253cf43ec --- /dev/null +++ b/docs/src/components/ContainerQuery.astro @@ -0,0 +1,5 @@ + <script type="module"> + import { cqfill } from 'https://unpkg.com/cqfill@0.6.0/export/cqfill.mjs' + + cqfill() + </script>
\ No newline at end of file diff --git a/docs/src/components/Examples/Card.astro b/docs/src/components/Examples/Card.astro new file mode 100644 index 000000000..31b98f4de --- /dev/null +++ b/docs/src/components/Examples/Card.astro @@ -0,0 +1,51 @@ +--- + +import capitalise from './Functions/capitalise.js' +import formatName from './Functions/format-name.js' +import getThumbnailIcon from './Functions/get-thumbnail-icon.js' +import getHeroImg from './Functions/get-hero-img.js' + +import CardLink from './CardLink.tsx' +import CardImage from './CardImage.astro' +import CodeBar from './Codebar.tsx' +import CardButtons from './CardButtons.astro' + +const {data:{name,readme="",pkgJSON:{description,keywords,repository}}} = Astro.props + +const getThumbnail = async() =>{ + if(keywords.includes('framework') && !name.match('framework-multiple') || name.match('with-tailwindcss') || name.match('snowpack') || name.match('with-nanostores')){ + return `/icons/framework-thumbnails/${name}.svg` + } + + let avatarSrc = await getThumbnailIcon() || '/icons/space-icons-rounded-small/048-space.svg' + return avatarSrc +} + +const href = `/templates/${name}` +--- + +<div class="card-wrapper"> + <article class="card"> + <CardLink client:load href={href} name={`${formatName(name)}`} }> + <CardImage client:load /> + <div class="card-body"> + <div class="card-avatar"> + <img src={await getThumbnail()} alt="A Randomised Thumbnail Image" class="icon-image ball" /> + </div> + <div class="card-content"> + <a href={href} class="main-link"> + <h3 class="title"> + {formatName(name)} + </h3> + </a> + <CodeBar client:load content={name} command={`npm init astro my-astro-project -- --template ${name}`}/> + + </div> + <CardButtons dir={repository.directory} /> + </div> + </CardLink> + </article> +</div> +<style lang="scss" > + @import'./card.scss'; +</style>
\ No newline at end of file diff --git a/docs/src/components/Examples/CardButtons.astro b/docs/src/components/Examples/CardButtons.astro new file mode 100644 index 000000000..f7393df42 --- /dev/null +++ b/docs/src/components/Examples/CardButtons.astro @@ -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>
\ No newline at end of file diff --git a/docs/src/components/Examples/CardImage.astro b/docs/src/components/Examples/CardImage.astro new file mode 100644 index 000000000..d785b6ce8 --- /dev/null +++ b/docs/src/components/Examples/CardImage.astro @@ -0,0 +1,20 @@ +--- +import getHeroImg from './Functions/get-hero-img.js' +const getImg = await getHeroImg() || 'https://source.unsplash.com/600x300/?space,cosmos' +--- + + <img src={getImg} class='heroImg' alt="A Image of Space"/> + +<style lang='scss'> +.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; + } +</style>
\ No newline at end of file diff --git a/docs/src/components/Examples/CardLink.tsx b/docs/src/components/Examples/CardLink.tsx new file mode 100644 index 000000000..f17ee724f --- /dev/null +++ b/docs/src/components/Examples/CardLink.tsx @@ -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
\ No newline at end of file diff --git a/docs/src/components/Examples/Codebar.tsx b/docs/src/components/Examples/Codebar.tsx new file mode 100644 index 000000000..f2bca6b8d --- /dev/null +++ b/docs/src/components/Examples/Codebar.tsx @@ -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 + + + diff --git a/docs/src/components/Examples/CollapsibleReadme.astro b/docs/src/components/Examples/CollapsibleReadme.astro new file mode 100644 index 000000000..679b467d3 --- /dev/null +++ b/docs/src/components/Examples/CollapsibleReadme.astro @@ -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>
\ No newline at end of file diff --git a/docs/src/components/Examples/Functions/capitalise.js b/docs/src/components/Examples/Functions/capitalise.js new file mode 100644 index 000000000..39f7497b5 --- /dev/null +++ b/docs/src/components/Examples/Functions/capitalise.js @@ -0,0 +1,8 @@ +/** + * + * @param {String} word + * @returns Capitalised Word + */ +export default function capitalise(word) { + return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); + }
\ No newline at end of file diff --git a/docs/src/components/Examples/Functions/format-name.js b/docs/src/components/Examples/Functions/format-name.js new file mode 100644 index 000000000..890275c9d --- /dev/null +++ b/docs/src/components/Examples/Functions/format-name.js @@ -0,0 +1,24 @@ +import capitalise from './capitalise' + +/** + * + * @param {String} name + * @returns Formats the Template Name + */ +export default function formatName(name){ + return name.includes('multiple') + ? + `${capitalise(name.split('-')[1])} ${capitalise(name.split('-')[0])}'s` + : + name + .split('-') + .map((str)=>( + str.replace('with','') + )) + .map((str)=>( + str.replace('framework','') + )) + .map((str)=>(capitalise(str))) + .join(' ') + .trim() +}
\ No newline at end of file diff --git a/docs/src/components/Examples/Functions/get-examples-data.js b/docs/src/components/Examples/Functions/get-examples-data.js new file mode 100644 index 000000000..e206bab10 --- /dev/null +++ b/docs/src/components/Examples/Functions/get-examples-data.js @@ -0,0 +1,75 @@ +import glob from 'tiny-glob' +import fs from 'fs' + + +/** + * @returns list of templates's package.json from the examples folder + */ +async function getPkgJSON(){ + let data = [] + const paths = await glob('../examples/*/package.json',{filesOnly:true}) + paths.map((files)=>{ + let readFile = fs.readFileSync(files) + let json = JSON.parse(readFile) + return data.push({...json}) + }) + return data +} + +/** + * @returns list of templates readme from the examples folder + */ +async function getExamplesREADME(){ + let data = [] + const paths = await glob('../examples/*/README.md',{filesOnly:true}) + paths.map( (files)=>{ + const buffer = fs.readFileSync(files) + let text = buffer.toString() + let fileName = files.split('/')[2] + data.push({fileName,text}) + }) + return data +} + +/** + * @returns list of template data + */ +async function getTemplateData(){ + let data = [] + const pkgJSONS = await getPkgJSON() + pkgJSONS.map((pkg)=>{ + let {name} = pkg + name = name.replace('@example/','') + let obj = { + name, + pkgJSON: pkg, + readme:undefined, + } + data.push(obj) + }) + return data +} + + +/** + * + * @returns Array of Template objects, + */ +async function templateData() { + let readmeData = await getExamplesREADME() + let templateData = await getTemplateData() + let arr = templateData.map((obj,i)=>{ + let {name} = obj + readmeData.map((file)=>{ + let {fileName,text} = file + if(name === fileName) + obj.readme = text + }) + + return obj + }) + return arr +} + +export default templateData + diff --git a/docs/src/components/Examples/Functions/get-examples-headers.js b/docs/src/components/Examples/Functions/get-examples-headers.js new file mode 100644 index 000000000..9b75d2e5d --- /dev/null +++ b/docs/src/components/Examples/Functions/get-examples-headers.js @@ -0,0 +1,27 @@ +// import {templatesList as data} from './templatesList.ts' +import templateData from './get-examples-data.js' +const data = await templateData() +console.log(data) + +// const examplesHeaders = data.map(section=>{ +// let arr = [] +// let obj = { +// depth:2, +// slug:section.title, +// text:section.title, +// } +// arr.push(obj) + +// section.children.map(example=>{ +// let obj={ +// depth:3, +// slug:example.text, +// text:example.text, +// } +// arr.push(obj) +// }) +// return [...arr] +// }).flat(2) + + +// export default examplesHeaders
\ No newline at end of file diff --git a/docs/src/components/Examples/Functions/get-hero-img.js b/docs/src/components/Examples/Functions/get-hero-img.js new file mode 100644 index 000000000..8ed1ac9b3 --- /dev/null +++ b/docs/src/components/Examples/Functions/get-hero-img.js @@ -0,0 +1,18 @@ +import fs from 'node:fs/promises' +import randomIndex from './random-index' + + +/** + * getHeroImg + * @returns url of random Hero Image from './public/images' + */ +export default async function getHeroImg(){ + try { + const data =[] + const paths =await fs.readdir('./public/images',{filesOnly:true}) + paths.map(path=>data.push(`/images/${path}`)) + return data[randomIndex(paths.length)] + } catch (error) { + console.log(error) + } +} diff --git a/docs/src/components/Examples/Functions/get-thumbnail-icon.js b/docs/src/components/Examples/Functions/get-thumbnail-icon.js new file mode 100644 index 000000000..21ae3b673 --- /dev/null +++ b/docs/src/components/Examples/Functions/get-thumbnail-icon.js @@ -0,0 +1,18 @@ +import fs from 'node:fs/promises' +import randomIndex from './random-index.js' + + +/** + * getThumbnailIcon + * @returns url of random Icon Image from './public/icons' + */ +export default async function getThumbnailIcon(){ + try { + const data =[] + const paths =await fs.readdir('./public/icons/space-icons-rounded-small',{filesOnly:true}) + paths.map(path=>data.push(`/icons/space-icons-rounded-small/${path}`)) + return data[randomIndex(paths.length)] + } catch (error) { + console.log(`Error Generating Thumbnail : ${error}`) + } +} diff --git a/docs/src/components/Examples/Functions/random-index.js b/docs/src/components/Examples/Functions/random-index.js new file mode 100644 index 000000000..a55487da5 --- /dev/null +++ b/docs/src/components/Examples/Functions/random-index.js @@ -0,0 +1,9 @@ +/** + * Random Index from Array + * @param {Number} length - Length of Array + * @returns Random Index from the Array + */ + +const randomIndex = (length) => Math.round(Math.random() * (0-length)) + length - 1 + +export default randomIndex
\ No newline at end of file diff --git a/docs/src/components/Examples/Thumbnail.astro b/docs/src/components/Examples/Thumbnail.astro new file mode 100644 index 000000000..c4364396d --- /dev/null +++ b/docs/src/components/Examples/Thumbnail.astro @@ -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> diff --git a/docs/src/components/Examples/card.scss b/docs/src/components/Examples/card.scss new file mode 100644 index 000000000..8debf2dd5 --- /dev/null +++ b/docs/src/components/Examples/card.scss @@ -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; +}
\ No newline at end of file diff --git a/docs/src/components/Examples/templatesList.ts b/docs/src/components/Examples/templatesList.ts new file mode 100644 index 000000000..91f5083bd --- /dev/null +++ b/docs/src/components/Examples/templatesList.ts @@ -0,0 +1,151 @@ +export const templatesList=[ + { + category:"Templates", + title:"create-astro Templates", + + children:[ + { + text: "Starter Template", + github: "https://github.com/snowpackjs/astro/tree/main/examples/starter", + demo:"https://youtu.be/dQw4w9WgXcQ?t=42", + blurb:"Astro's Default Starter Project, an open-air sandbox. Letting you build your Astro Project as you see fit.", + command:"npm init astro my-astro-project -- --template starter" + }, + { + text: "Doc\'s", + github: "https://github.com/snowpackjs/astro/tree/main/examples/docs", + demo:"", + blurb:"Astro's Documentation Template, is an example of a Documentation site built using Astro.", + command:"npm init astro my-astro-project -- --template docs" + }, + { + text: "Blog", + github: "https://github.com/snowpackjs/astro/tree/main/examples/blog", + demo:"", + blurb:"Astro's Blog Template, is an example of a Blogging site built using Astro.", + command:"npm init astro my-astro-project -- --template blog" + }, + { + text: "Blog with Multiple Authors", + github: "https://github.com/snowpackjs/astro/tree/main/examples/blog-multiple-authors", + demo:"", + blurb:"Astro's Multiple Authors Blogging Template, is an example of a Blogging site for Multiple Authors built using Astro.", + command:"npm init astro my-astro-project -- --template blog" + }, + { + text: "Portfolio", + github: "https://github.com/snowpackjs/astro/tree/main/examples/portfolio", + demo:"", + blurb:"Astro's Portfolio Template, an example of a Portfolio site built using Astro.", + command:"npm init astro my-astro-project -- --template portfolio" + }, + ] + }, + { + category:"Framework's", + title:"UI Frameworks", + children:[ + { + text: "React + Astro", + github: "https://github.com/snowpackjs/astro/tree/main/examples/framework-react", + demo:"", + blurb:"An example on how to use React alongside Astro.", + command:"npm init astro my-astro-project -- --template framework-react" + }, + { + text: "Vue + Astro", + github: "https://github.com/snowpackjs/astro/tree/main/examples/framework-vue", + demo:"", + blurb:"An example on how to use Vue with Astro.", + command:"npm init astro my-astro-project -- --template framework-vue" + }, + { + text: "Svelte + Astro", + github: "https://github.com/snowpackjs/astro/tree/main/examples/framework-svelte", + demo:"", + blurb:"An example on how to use Svelte and Astro together.", + command:"npm init astro my-astro-project -- --template framework-svelte" + }, + { + text: "Preact + Astro", + github: "https://github.com/snowpackjs/astro/tree/main/examples/framework-preact", + demo:"", + blurb:"An example on how to use Preact along with Astro.", + command:"npm init astro my-astro-project -- --template framework-preact" + }, + { + text: "Solid + Astro", + github: "https://github.com/snowpackjs/astro/tree/main/examples/framework-solid", + demo:"", + blurb:"An example on how to use Solid together with Astro.", + command:"npm init astro my-astro-project -- --template framework-solid" + }, + { + text: "Lit + Astro", + github: "https://github.com/snowpackjs/astro/tree/main/examples/framework-lit", + demo:"", + blurb:"An example on how to use Lit together with Astro.", + command:"npm init astro my-astro-project -- --template framework-lit" + }, + { + text: "Multiple UI Frameworks Together As One, only with Astro", + github: "https://github.com/snowpackjs/astro/tree/main/examples/framework-multiple", + demo:"", + blurb:"Showcasing Astro's ability to utilise more than one framework at a time. \nHere we are demonstrating applying a combination of: React, Preact, Svelte & Vue Components all into one Astro project", + command:"npm init astro my-astro-project -- --template framework-multiple" + }, + + ] + }, + { + category:"Further Examples", + title:"Examples", + children:[ + { + text: "Astro with Markdown", + github: "https://github.com/snowpackjs/astro/tree/main/examples/with-markdown", + demo:"", + blurb:"An example on how to use Markdown inside an Astro project.", + command:"npm init astro my-astro-project -- --template with-markdown" + }, + { + text: "Astro with Markdown Plugins", + github: "https://github.com/snowpackjs/astro/tree/main/examples/with-markdown-plugins", + demo:"", + blurb:"An example on how to use the Markdown plugin: Rehype with Astro.", + command:"npm init astro my-astro-project -- --template with-markdown-plugins" + }, + { + text: "Astro with NanoStores", + github: "https://github.com/snowpackjs/astro/tree/main/examples/with-nanostores", + demo:"", + blurb:"An example on how share state between components from different frameworks inside Astro, using the excellent 'NanoStores' state utility package.", + command:"npm init astro my-astro-project -- --template with-nanostores" + }, + { + text: "Astro & TailwindCSS", + github: "https://github.com/snowpackjs/astro/tree/main/examples/with-tailwindcss", + demo:"", + blurb:"Astro comes with Tailwind support out of the box, this is an example of how TailwindCSS is used inside an Astro project.", + command:"npm init astro my-astro-project -- --template with-tailwindcss" + }, + + + ] + + }, + // { + // text:"Community Built Examples", + // children:[ + // // { + // // text: '', + // // github: '', + // // demo:"", + // // blurb:"", + // // command:"npm init astro my-astro-project -- --template" + // // }, + + // ] + + // }, +]
\ No newline at end of file diff --git a/docs/src/layouts/ExamplesLayout.astro b/docs/src/layouts/ExamplesLayout.astro new file mode 100644 index 000000000..e1315b362 --- /dev/null +++ b/docs/src/layouts/ExamplesLayout.astro @@ -0,0 +1,129 @@ +---
+import HeadCommon from "../components/HeadCommon.astro";
+import HeadSEO from "../components/HeadSEO.astro";
+import Header from '../components/Header/Header.astro';
+import Footer from '../components/Footer/Footer.astro';
+import PageContent from '../components/PageContent/PageContent.astro';
+import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
+import MoreMenu from '../components/RightSidebar/MoreMenu.astro'
+import { SITE } from "../config.ts";
+import ContainerQuery from '../components/ContainerQuery.astro'
+const { content = {}, page= Astro.request.url.pathname } = Astro.props;
+const currentPage =page;
+// const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`;
+const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${page}`;
+---
+
+<html dir="{content.dir ?? 'ltr'}" lang="{content.lang ?? 'en-us'}" class="initial">
+ <head>
+ <HeadCommon />
+ <HeadSEO {content} canonicalURL={Astro.request.canonicalURL} />
+ <!--TODO: Insert font-awesome icons -->
+ <title>{content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title}</title>
+ <style>
+ body {
+ width: 100%;
+ display: grid;
+ grid-template-rows: var(--theme-navbar-height) 1fr;
+ --gutter: 0.5rem;
+ --doc-padding: 2rem;
+ }
+ pre{
+ margin-top: 2%;
+ }
+ .layout {
+ display: grid;
+ grid-auto-flow: column;
+ grid-template-columns:
+ minmax(var(--gutter), 1fr)
+ minmax(0, var(--max-width))
+ minmax(var(--gutter), 1fr);
+ overflow-x: hidden;
+ }
+ .layout :global(> *) {
+ width: 100%;
+ height: 100%;
+ }
+ .grid-sidebar {
+ height: 100vh;
+ position: sticky;
+ top: 0;
+ padding: 0;
+ }
+ #grid-left {
+ position: fixed;
+ background-color: var(--theme-bg);
+ z-index: 10;
+ display: none;
+ }
+ #grid-main {
+ padding: var(--doc-padding) var(--gutter);
+ grid-column: 2;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ }
+ #grid-right {
+ display: none;
+ }
+ :global(.mobile-sidebar-toggle) {
+ overflow: hidden;
+ }
+ :global(.mobile-sidebar-toggle) #grid-left {
+ display: block;
+ top: 2rem;
+ }
+ @media (min-width: 50em) {
+ .layout {
+ overflow: initial;
+ grid-template-columns:
+ 20rem
+ minmax(0, var(--max-width));
+ gap: 1em;
+ }
+ #grid-left {
+ display: flex;
+ padding-left: 2rem;
+ position: sticky;
+ grid-column: 1;
+ }
+ }
+
+ @media (min-width: 72em) {
+ .layout {
+ grid-template-columns:
+ 20rem
+ minmax(0, var(--max-width))
+ 18rem;
+ padding-left: 0;
+ padding-right: 0;
+ margin: 0 auto;
+ }
+ #grid-right {
+ grid-column: 3;
+ display: flex;
+ }
+ }
+ </style>
+ <ContainerQuery/>
+ </head>
+
+ <body>
+ <Header currentPage={currentPage} />
+ <main class="layout">
+ <aside id="grid-left" class="grid-sidebar" title="Site Navigation">
+ <LeftSidebar currentPage={currentPage} />
+ </aside>
+ <div id="grid-main">
+ <slot />
+ </div>
+ <aside id="grid-right" class="grid-sidebar" title="Table of Contents">
+ <nav class="sidebar-nav" aria-labelledby="grid-right">
+ <div class="sidebar-nav-inner">
+ <MoreMenu editHref={githubEditUrl} />
+ </div>
+ </nav>
+ </aside>
+ </main>
+ </body>
+</html>
diff --git a/docs/src/pages/demo.astro b/docs/src/pages/demo.astro new file mode 100644 index 000000000..c60a9e05d --- /dev/null +++ b/docs/src/pages/demo.astro @@ -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> diff --git a/docs/src/pages/examples-and-templates.astro b/docs/src/pages/examples-and-templates.astro new file mode 100644 index 000000000..aff58a932 --- /dev/null +++ b/docs/src/pages/examples-and-templates.astro @@ -0,0 +1,33 @@ +--- + +import Layout from '../layouts/MainLayout.astro'; +import {Markdown} from 'astro/components' +import Examples from '../components/Examples/Examples.astro' + +import Thumbnail from '../components/Examples/Thumbnail.astro' +const githubEditUrl = "https://github.com/snowpackjs/astro/tree/main/docs/src/pages/examples-and-templates.astro" +const title = 'Examples & Templates' + + +--- + +<Layout content={{title:title,astro:{headers:examplesHeaders},page:'/examples-and-templates',githubEditUrl:githubEditUrl}}> + <Markdown> + + We encourage you to freely explore our collection of ready-made templates containing a multitude of examples on how to apply Astro to a variety of use-cases. i.e: various UI frameworks, State Management Tools, and of course TailwindCSS + </Markdown> + <!-- <Examples/> --> + <Thumbnail/> + <Markdown> + + ## Community Templates + + Visit [Awesome-Astro](https://github.com/one-aalam/awesome-astro) for a full list of community examples. You can use `npm init astro` to check out any of the community examples + + ```bash + npm init astro -- --template [GITHUB_USER]/[REPO_NAME] + npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example + ``` + </Markdown> + +</Layout> diff --git a/docs/src/pages/examples.astro b/docs/src/pages/examples.astro new file mode 100644 index 000000000..6128b2e20 --- /dev/null +++ b/docs/src/pages/examples.astro @@ -0,0 +1,87 @@ +--- +import Layout from '../layouts/ExamplesLayout.astro' +import Card from '../components/Examples/Card.astro' +import {Markdown} from 'astro/components' +import templateData from '../components/Examples/Functions/get-examples-data.js' +let data = await templateData() +let headers = {} +--- +<Layout content={data}> + <Markdown> + # Examples & Templates + We encourage you to freely explore our collection of ready-made templates containing a multitude of examples on how to apply Astro to a variety of use-cases. i.e: various UI frameworks, State Management Tools, and of course TailwindCSS. + + + To use any one of our templates simply instruct `create-astro`by using: + + ```bash + npm init astro my-astro-project -- -- template [template] + ``` + </Markdown> + <Markdown> + ## `create-astro` Templates + + Below is a list of Astro's templates that are available directly through the [`create-astro`](/installation) install wizard. + </Markdown> + <div class="flexbox"> + {data.filter(item=> (item.pkgJSON?.keywords?.includes('create-astro'))) + .sort((a,b)=> ((a.name === 'starter')? -1 : 1)) + .map((item)=>(<Card data={item}/>))} + </div> + <Markdown> + ## UI Frameworks + + Astro is always growing its support for the vast plethora of UI frameworks that exist within the JavaScript ecosystem. Below are demonstrations on how UI frameworks work inside Astro + </Markdown> + <div class="flexbox"> + {data.filter(item=> (item.pkgJSON?.keywords?.includes('framework'))) + .sort((a,b)=> (b.name > a.name) ? 1 : -1) + .sort((a,b)=> ((a.name === 'framework-multiple') ? 0 : -1)) + .map((item)=>(<Card data={item}/>))} + </div> + <Markdown> + ## Kitchen Sink + + Here is a further set of examples that have been created by our developer team, to help our users with working examples on using Markdown with Astro. Support for plugins such as Nanostores and TailwindCSS + </Markdown> + <div class="flexbox"> + {data.filter(item=> (item.pkgJSON?.keywords?.includes('kitchen-sink'))) + .map((item)=>(<Card data={item}/>))} + </div> + <Markdown> + + ## Community Templates + + Visit [Awesome-Astro](https://github.com/one-aalam/awesome-astro) for a full list of community examples. + + You can use `npm init astro` to pull down and utilise any of the wonderful community examples + </Markdown> + <Markdown > + + ```bash + npm init astro -- --template [GITHUB_USER]/[REPO_NAME] + npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example + ``` + </Markdown> +</Layout> +<style lang="scss"> + .flexbox{ + display: flex; + flex-wrap: wrap; + flex-direction: row; + align-content: center; + justify-content: space-evenly; + align-items: center; + gap: 2rem; + margin-top:1.25rem; + scroll-behavior: smooth; + padding: 2 rem; + + } + .markdown{ + padding:2%; + line-height: 1.25rem; + } + + +</style> diff --git a/docs/src/pages/examples.md b/docs/src/pages/examples.md deleted file mode 100644 index 17af0bb87..000000000 --- a/docs/src/pages/examples.md +++ /dev/null @@ -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! --> diff --git a/docs/src/pages/templates/[name].astro b/docs/src/pages/templates/[name].astro new file mode 100644 index 000000000..7ad18b6c3 --- /dev/null +++ b/docs/src/pages/templates/[name].astro @@ -0,0 +1,71 @@ +--- +import templateData from '../../components/Examples/Functions/get-examples-data.js' +export async function getStaticPaths() { + const data = await templateData() + return data.map((example)=>({ + params:{ + name: example.name + }, + props:{ + example + } + })); +} +const {name} = Astro.request.params +const {example} = Astro.props +let {name:title,pkgJSON,readme=""} = example +const {description, keywords} = pkgJSON + +import Layout from '../../layouts/ExamplesLayout.astro' +import capitalise from '../../components/Examples/Functions/capitalise.js' +import formatName from '../../components/Examples/Functions/format-name.js' +import {Markdown} from 'astro/components' +import CollapsibleReadme from '../../components/Examples/CollapsibleReadme.astro' +import getHeroImg from '../../components/Examples/Functions/get-hero-img.js' +const getImg = await getHeroImg() + +let templateTitle = formatName(title) +--- +<Layout> + <div class="imgWrapper"> + <img class="post-img" src={`${getImg}`} alt="" height="600px" width="100%"> + <h1>{templateTitle} Template</h1> + </div> + <Markdown content = {description}/> + <Markdown> + ## Getting Started + + To start using the {templateTitle} template, enter the following into your terminal + </Markdown> + <pre data-lang="bash" class="lang-bash">npm init astro my-astro-project -- --template {name}</pre> + <div class="external-links"> + <a rel="noopener noreferrer nofollow" target="_blank" href={`https://githubbox.com/snowpackjs/astro/tree/main/examples/${name}`}> + <img src="https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox"/> + </a> + <a rel="noopener noreferrer nofollow" target="_blank" href={`https://app.netlify.com/start/deploy?repository=https://github.com/snowpackjs/astro/tree/main/examples/${name}`}> + <img src="https://www.netlify.com/img/deploy/button.svg"/> + </a> + + </div> + + <div> + <CollapsibleReadme label={`${templateTitle} Readme`} readme={readme}/> + </div> + +</Layout> +<style lang="scss"> + :root{ + scroll-behavior: smooth; + } + .external-links{ + margin-top: 2.5%; + display: flex; + flex-wrap: nowrap; + align-content: flex-start; + justify-content: space-evenly; + align-items: center; + } + .post-img{ + clip-path: inset(0 0 0 0 round 5% 20% 0 10%); + } +</style>
\ No newline at end of file |