Adds examples page

1 files changed, 71 insertions, 0 deletions

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