docs: update templates

packages/docs/content/docs/start-with-a-template.mdx

@@ -6,224 +6,38 @@ weight: 2
 
 You can add Static CMS [to an existing site](/docs/add-to-your-site/), but the quickest way to get started is with a template. Found below, our featured templates deploy a bare-bones site and Static CMS to Netlify, giving you a fully working CMS-enabled site with just a few clicks.
 
-<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: '24px' }}>
+<Templates>
-  <div
+  <Template
-    style={{
+    title="Hugo Site Starter"
-      display: 'flex',
+    image="/img/hugo.svg"
-      flexDirection: 'column',
+    url="https://github.com/StaticJsCMS/static-cms-hugo-netlify-template"
-      justifyContent: 'center',
+  />
-      alignItems: 'center',
+  <Template
-      gap: '8px',
+    title="Gatsby Site Starter"
-    }}
+    image="/img/gatsby.svg"
-  >
+    url="https://github.com/StaticJsCMS/static-cms-gatsby-netlify-template"
-    <div
+  />
-      style={{
+  <Template
-        width: '120px',
+    title="Preact CLI"
-        height: '120px',
+    image="/img/preact.svg"
-        display: 'flex',
+    url="https://github.com/StaticJsCMS/static-cms-preact-netlify-template"
-        justifyContent: 'center',
+  />
-        alignItems: 'center',
+  <Template
-      }}
+    title="Next.js Blog Template"
-    >
+    image="/img/nextjs.svg"
-      <img style={{ display: 'flex', height: '100%' }} src="/img/hugo.svg" />
+    url="https://github.com/StaticJsCMS/static-cms-next-netlify-template"
-    </div>
+  />
-    <h5 style={{ margin: 0 }}>Hugo Site Starter</h5>
+  <Template
-    <p style={{ margin: 0 }}>
+    title="Eleventy Starter"
-      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-hugo-netlify-template&amp;stack=cms">
+    image="/img/11ty-logo.svg"
-        <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
+    url="https://github.com/StaticJsCMS/static-cms-eleventy-netlify-template"
-      </a>
+  />
-    </p>
+  <Template
-  </div>
+    title="Nuxt.js Boilerplate"
-  <div
+    image="/img/nuxt.svg"
-    style={{
+    url="https://github.com/StaticJsCMS/static-cms-nuxt-netlify-template"
-      display: 'flex',
+  />
-      flexDirection: 'column',
+</Templates>
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '8px',
-    }}
-  >
-    <div
-      style={{
-        width: '120px',
-        height: '120px',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <img style={{ display: 'flex', height: '100%' }} src="/img/gatsby.svg" />
-    </div>
-    <h5 style={{ margin: 0 }}>Gatsby Site Starter</h5>
-    <p style={{ margin: 0 }}>
-      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-gatsby-netlify-template&amp;stack=cms">
-        <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
-      </a>
-    </p>
-  </div>
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '8px',
-    }}
-  >
-    <div
-      style={{
-        width: '120px',
-        height: '120px',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <img style={{ display: 'flex', height: '100%' }} src="/img/middleman.svg" />
-    </div>
-    <h5 style={{ margin: 0 }}>Middleman Site Starter</h5>
-    <p style={{ margin: 0 }}>
-      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-middleman-netlify-template&amp;stack=cms">
-        <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
-      </a>
-    </p>
-  </div>
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '8px',
-    }}
-  >
-    <div
-      style={{
-        width: '120px',
-        height: '120px',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <img style={{ display: 'flex', height: '100%' }} src="/img/preact.svg" />
-    </div>
-    <h5 style={{ margin: 0 }}>Preact CLI</h5>
-    <p style={{ margin: 0 }}>
-      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-preact-netlify-template&amp;stack=cms">
-        <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
-      </a>
-    </p>
-  </div>
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '8px',
-    }}
-  >
-    <div
-      style={{
-        width: '120px',
-        height: '120px',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <img style={{ display: 'flex', height: '100%' }} src="/img/nextjs.svg" />
-    </div>
-    <h5 style={{ margin: 0 }}>Next.js Blog Template</h5>
-    <p style={{ margin: 0 }}>
-      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-nextjs-netlify-blog-template&amp;stack=cms">
-        <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
-      </a>
-    </p>
-  </div>
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '8px',
-    }}
-  >
-    <div
-      style={{
-        width: '120px',
-        height: '120px',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <img style={{ display: 'flex', height: '100%' }} src="/img/11ty-logo.svg" />
-    </div>
-    <h5 style={{ margin: 0 }}>Eleventy Starter</h5>
-    <p style={{ margin: 0 }}>
-      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-eleventy-netlify-template&amp;stack=cms">
-        <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
-      </a>
-    </p>
-  </div>
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '8px',
-    }}
-  >
-    <div
-      style={{
-        width: '120px',
-        height: '120px',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <img style={{ display: 'flex', height: '100%' }} src="/img/nuxt.svg" />
-    </div>
-    <h5 style={{ margin: 0 }}>Nuxt.js Boilerplate</h5>
-    <p style={{ margin: 0 }}>
-      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-nuxt-netlify-template&amp;stack=cms">
-        <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
-      </a>
-    </p>
-  </div>
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '8px',
-    }}
-  >
-    <div
-      style={{
-        width: '120px',
-        height: '120px',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <img style={{ display: 'flex', height: '100%' }} src="/img/metalsmith.svg" />
-    </div>
-    <h5 style={{ margin: 0 }}>Metalsmith Starter</h5>
-    <p style={{ margin: 0 }}>
-      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-metalsmith-netlify-template&amp;stack=cms">
-        <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
-      </a>
-    </p>
-  </div>
-</div>
 
 After clicking one of those buttons, authenticate with GitHub and choose a repository name. Netlify then automatically creates a clone of the repository in your GitHub account. Next, it builds and deploys the new site on Netlify, bringing you to the site dashboard after completing the build.
 

packages/docs/src/components/docs/components/Template.tsx

@@ -0,0 +1,66 @@
+import Box from '@mui/material/Box';
+import Image from 'next/image';
+import Link from 'next/link';
+
+interface TemplateProps {
+  image: string;
+  title: string;
+  url: string;
+}
+
+const Template = ({ image, title, url }: TemplateProps) => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: '8px',
+      }}
+    >
+      <Box
+        component={Link}
+        href={url}
+        target="_blank"
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: '8px',
+        }}
+      >
+        <Box
+          sx={{
+            width: '120px',
+            height: '120px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <Image width={120} height={120} src={image} alt={title} />
+        </Box>
+        <Box component="h5" style={{ marginTop: 0, marginBottom: 0 }}>
+          {title}
+        </Box>
+      </Box>
+      <Box>
+        <Link
+          href={`https://app.netlify.com/start/deploy?repository=${url}&amp;stack=cms`}
+          target="_blank"
+        >
+          <Image
+            width={146}
+            height={32}
+            src="https://www.netlify.com/img/deploy/button.svg"
+            alt="Deploy to Netlify"
+          />
+        </Link>
+      </Box>
+    </Box>
+  );
+};
+
+export default Template;

packages/docs/src/components/docs/components/Templates.tsx

@@ -0,0 +1,24 @@
+import Box from '@mui/material/Box';
+
+import type { ReactNode } from 'react';
+
+interface TemplatesProps {
+  children: ReactNode;
+}
+
+const Templates = ({ children }: TemplatesProps) => {
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+        gap: '24px',
+        marginBottom: '16px',
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default Templates;

packages/docs/src/pages/docs/[doc].tsx

@@ -19,6 +19,8 @@ import TableBody from '../../components/docs/components/table/TableBody';
 import TableBodyCell from '../../components/docs/components/table/TableBodyCell';
 import TableHead from '../../components/docs/components/table/TableHead';
 import TableHeaderCell from '../../components/docs/components/table/TableHeaderCell';
+import Template from '../../components/docs/components/Template';
+import Templates from '../../components/docs/components/Templates';
 import DocsContent from '../../components/docs/DocsContent';
 import DocsLeftNav from '../../components/docs/DocsLeftNav';
 import DocsRightNav from '../../components/docs/DocsRightNav';
@@ -128,6 +130,8 @@ const Docs = ({
                 a: Anchor,
                 CodeTabs,
                 Alert,
+                Template,
+                Templates,
               }}
             />
           </DocsContent>