diff options
Diffstat (limited to 'docs/src/components/Examples')
| -rw-r--r-- | docs/src/components/Examples/Card.astro | 51 | ||||
| -rw-r--r-- | docs/src/components/Examples/CardButtons.astro | 37 | ||||
| -rw-r--r-- | docs/src/components/Examples/CardImage.astro | 20 | ||||
| -rw-r--r-- | docs/src/components/Examples/CardLink.tsx | 51 | ||||
| -rw-r--r-- | docs/src/components/Examples/Codebar.tsx | 43 | ||||
| -rw-r--r-- | docs/src/components/Examples/CollapsibleReadme.astro | 95 | ||||
| -rw-r--r-- | docs/src/components/Examples/Functions/capitalise.js | 8 | ||||
| -rw-r--r-- | docs/src/components/Examples/Functions/format-name.js | 24 | ||||
| -rw-r--r-- | docs/src/components/Examples/Functions/get-examples-data.js | 75 | ||||
| -rw-r--r-- | docs/src/components/Examples/Functions/get-examples-headers.js | 27 | ||||
| -rw-r--r-- | docs/src/components/Examples/Functions/get-hero-img.js | 18 | ||||
| -rw-r--r-- | docs/src/components/Examples/Functions/get-thumbnail-icon.js | 18 | ||||
| -rw-r--r-- | docs/src/components/Examples/Functions/random-index.js | 9 | ||||
| -rw-r--r-- | docs/src/components/Examples/Thumbnail.astro | 124 | ||||
| -rw-r--r-- | docs/src/components/Examples/card.scss | 167 | ||||
| -rw-r--r-- | docs/src/components/Examples/templatesList.ts | 151 |
16 files changed, 918 insertions, 0 deletions
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 |