diff options
Diffstat (limited to 'docs/src/components')
12 files changed, 62 insertions, 399 deletions
diff --git a/docs/src/components/Examples/Card.astro b/docs/src/components/Examples/Card.astro index 31b98f4de..81d3b97f4 100644 --- a/docs/src/components/Examples/Card.astro +++ b/docs/src/components/Examples/Card.astro @@ -1,51 +1,64 @@ --- - -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` - } +const {data, index} = Astro.props; - let avatarSrc = await getThumbnailIcon() || '/icons/space-icons-rounded-small/048-space.svg' - return avatarSrc -} +// 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 href = `/templates/${name}` +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))` --- - -<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 +<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>
\ No newline at end of file diff --git a/docs/src/components/Examples/CardImage.astro b/docs/src/components/Examples/CardImage.astro deleted file mode 100644 index d785b6ce8..000000000 --- a/docs/src/components/Examples/CardImage.astro +++ /dev/null @@ -1,20 +0,0 @@ ---- -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/Functions/capitalise.js b/docs/src/components/Examples/Functions/capitalise.js deleted file mode 100644 index 39f7497b5..000000000 --- a/docs/src/components/Examples/Functions/capitalise.js +++ /dev/null @@ -1,8 +0,0 @@ -/** - * - * @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 deleted file mode 100644 index 890275c9d..000000000 --- a/docs/src/components/Examples/Functions/format-name.js +++ /dev/null @@ -1,24 +0,0 @@ -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 deleted file mode 100644 index e206bab10..000000000 --- a/docs/src/components/Examples/Functions/get-examples-data.js +++ /dev/null @@ -1,75 +0,0 @@ -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 deleted file mode 100644 index 9b75d2e5d..000000000 --- a/docs/src/components/Examples/Functions/get-examples-headers.js +++ /dev/null @@ -1,27 +0,0 @@ -// 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 deleted file mode 100644 index 8ed1ac9b3..000000000 --- a/docs/src/components/Examples/Functions/get-hero-img.js +++ /dev/null @@ -1,18 +0,0 @@ -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 deleted file mode 100644 index 21ae3b673..000000000 --- a/docs/src/components/Examples/Functions/get-thumbnail-icon.js +++ /dev/null @@ -1,18 +0,0 @@ -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 deleted file mode 100644 index a55487da5..000000000 --- a/docs/src/components/Examples/Functions/random-index.js +++ /dev/null @@ -1,9 +0,0 @@ -/** - * 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/templatesList.ts b/docs/src/components/Examples/templatesList.ts deleted file mode 100644 index 91f5083bd..000000000 --- a/docs/src/components/Examples/templatesList.ts +++ /dev/null @@ -1,151 +0,0 @@ -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/components/PageContent/PageContent.astro b/docs/src/components/PageContent/PageContent.astro index 564b8485b..0598d7a2f 100644 --- a/docs/src/components/PageContent/PageContent.astro +++ b/docs/src/components/PageContent/PageContent.astro @@ -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"> diff --git a/docs/src/components/RightSidebar/RightSidebar.astro b/docs/src/components/RightSidebar/RightSidebar.astro index ed1dd37cc..04ce66772 100644 --- a/docs/src/components/RightSidebar/RightSidebar.astro +++ b/docs/src/components/RightSidebar/RightSidebar.astro @@ -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>
\ No newline at end of file |