From d321d8366b597e46ff8e3fc63d17622a9297505c Mon Sep 17 00:00:00 2001
From: aFuzzyBear <drgaud@hotmail.com>
Date: Tue, 10 Aug 2021 01:24:25 +0100
Subject: Adds examples page

---
 docs/src/components/Examples/Card.astro | 51 +++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 docs/src/components/Examples/Card.astro

(limited to 'docs/src/components/Examples/Card.astro')

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
-- 
cgit v1.2.3