1 files changed, 57 insertions, 44 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