+
+
+
+ {children}
+
+ )
+}
+
+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(
+
+
+ )
+}
+
+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
+---
+
+ {content}
+
+
+
+
+
+
+
+
+
\ 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
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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}`;
+---
+
+
+
+
+ {data.filter(item=> (item.pkgJSON?.keywords?.includes('create-astro')))
+ .sort((a,b)=> ((a.name === 'starter')? -1 : 1))
+ .map((item)=>())}
+
+
+ {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)=>())}
+
+
+ {data.filter(item=> (item.pkgJSON?.keywords?.includes('kitchen-sink')))
+ .map((item)=>())}
+
+
+ 
+
+ {templateTitle} Template
+npm init astro my-astro-project -- --template {name}
+
+
+ 
+ 
+
+
+
+
+