Updated showcase

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,7 +1,7 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: Issue
+title: 'Issue: '
 labels: ''
 assignees: ''
 

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,7 +1,7 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: Enhancement
+title: 'Enhancement: '
 labels: ''
 assignees: ''
 

.github/ISSUE_TEMPLATE/showcase.md

@@ -0,0 +1,20 @@
+---
+name: Showcase
+about: Let us know that you are using Front Matter and we'll add you on our showcase page
+title: 'Showcase: '
+labels: 'showcase'
+assignees: ''
+---
+
+**Title you want to give your site**
+
+Define a clear title that will be used on the showcase page. Example: `Front Matter`.
+
+**Link to the site**
+
+A URL to the site to add.
+
+**A nice and clean description**
+
+Keep it simple. Just let us know which static-site generator you used, and other frameworks.
+

docs/constants/extension.ts

@@ -9,5 +9,6 @@ export const Extension = {
   sponsorLink: "https://github.com/sponsors/estruyf",
   extensionLink: "https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter",
   reviewLink: "https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter&ssr=false#review-details",
-  installLink: "vscode:extension/eliostruyf.vscode-front-matter"
+  installLink: "vscode:extension/eliostruyf.vscode-front-matter",
+  showcaseLink: "https://github.com/estruyf/vscode-front-matter/issues/new?assignees=&labels=&template=showcase.md&title=Showcase: "
 }

docs/locale/en.ts

@@ -40,7 +40,7 @@ export const strings = {
 
   // Showcase
   showcase_title: "Showcase",
-  showcase_description: "Check out our showcase of static-sites using Front Matter.",
+  showcase_description: "Check out our showcase of sites using Front Matter.",
 
   // Changelog
   changelog_title: "Changelog",

docs/pages/showcase/index.tsx

@@ -2,7 +2,28 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Description, OtherMeta, Title } from '../../components/Meta';
 import { Layout } from '../../components/Page/Layout';
+import { Extension } from '../../constants/extension';
 import showcases from '../../showcases.json';
+import Image from 'next/image';
+
+const shimmer = (w: number, h: number) => `
+<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="g">
+      <stop stop-color="#0e131f" offset="20%" />
+      <stop stop-color="#222733" offset="50%" />
+      <stop stop-color="#0e131f" offset="70%" />
+    </linearGradient>
+  </defs>
+  <rect width="${w}" height="${h}" fill="#333" />
+  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+</svg>`;
+
+const toBase64 = (str: string) =>
+  typeof window === 'undefined'
+    ? Buffer.from(str).toString('base64')
+    : window.btoa(str);
 
 export default function Home({ showcases }: any) {
   const { t: strings } = useTranslation();
@@ -25,7 +46,16 @@ export default function Home({ showcases }: any) {
             {showcases.filter((showcase: any) => showcase.image).map((showcase: any) => (
               <a key={showcase.title} className="group space-y-2 md:space-y-5 relative" href={showcase.link} title={showcase.title} rel={`noopener noreferrer`}>
                 <figure className={`relative h-64 lg:h-[25rem] overflow-hidden grayscale group-hover:grayscale-0`}>
-                  <img className={`w-full object-cover`} src={`/showcases/${showcase.image}`} alt={showcase.title} loading={`lazy`} />
+                  <Image 
+                    className={`w-full object-cover object-left-top`} 
+                    src={`/showcases/${showcase.image}`}
+                    alt={showcase.title} 
+                    loading={`lazy`}
+                    placeholder="blur"
+                    blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(592, 400))}`}
+                    width={592}
+                    height={400}
+                     />
                 </figure>
 
                 <h2 className="text-3xl tracking-tight font-extrabold sm:leading-none lg:text-3xl xl:text-4xl">{showcase.title}</h2>
@@ -34,6 +64,12 @@ export default function Home({ showcases }: any) {
               </a>
             ))}
           </div>
+
+          <div className="">
+            <div className="mt-8 text-sm">
+              <p>Want to add your site to our showcase? Great, open a showcase on <a className="text-teal-500 hover:text-teal-900" href={Extension.showcaseLink} target="_blank" rel="noopener noreferrer">Github</a>!</p>
+            </div>
+          </div>
         </div>
       </Layout>
     </>