Docs site added

2026-07-06 09:51:29 +02:00 · 2021-08-30 15:13:06 +02:00
parent 39d3cf46f3
commit 94a8610edf
62 changed files with 2086 additions and 25 deletions
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Extension } from '../../constants/extension';
+
+export interface ICTAProps {}
+
+export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithChildren<ICTAProps>) => {
+  const { t: strings } = useTranslation();
+
+  return (
+    <div className="pt-8 overflow-hidden sm:pt-12 lg:relative lg:py-48">
+      <div className="mx-auto sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl lg:grid lg:grid-cols-2 lg:gap-24">
+        <div className={`my-4 sm:my-5 lg:my-6`}>
+          <h1 className="text-5xl tracking-tight font-extrabold sm:leading-none lg:text-5xl xl:text-6xl">
+            <span className="md:block">{strings(`cta_title`)}</span>{' '}
+            <span className="text-teal-500 md:block">{Extension.name}</span>
+          </h1>
+
+          <p className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+            {strings(`cta_description`)}
+          </p>
+
+          <div className="mt-10 max-w-sm mx-auto sm:max-w-none">
+            <div className="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
+              <a href={Extension.extensionLink} className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8" rel={`noopener noreferrer`}>
+                {strings(`cta_button_primary`)}
+              </a>
+              <a href={`/docs`} title={`Read our documentation`} className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-vulcan-500 bg-whisper-500 hover:bg-opacity-70 sm:px-8">
+                {strings(`cta_button_secondary`)}
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="sm:mx-auto sm:max-w-3xl sm:px-6">
+        <div className={`py-12 sm:relative sm:py-16 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2`}>
+          <div className={`relative sm:mx-auto sm:max-w-3xl sm:px-0 lg:-mr-40 lg:max-w-none lg:h-full lg:pl-12`}>
+            <img className={`w-full lg:h-full lg:w-auto lg:max-w-none`} src={`/assets/site-preview.png`} alt={`Site preview`} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { features } from '../../constants/features';
+import { CheckIcon } from '@heroicons/react/outline';
+
+export interface IFeaturesProps {}
+
+export const Features: React.FunctionComponent<IFeaturesProps> = (props: React.PropsWithChildren<IFeaturesProps>) => {
+  const { t: strings } = useTranslation();
+
+  return (
+    <div className={``}>
+      <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
+        <div className="max-w-3xl mx-auto text-center">
+          <h2 className="text-3xl font-extrabold">{strings(`features_title`)}</h2>
+          <p className="mt-4 text-lg text-whisper-700">
+            {strings(`features_description`)}
+          </p>
+        </div>
+        <dl className="mt-12 space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 lg:grid-cols-3 lg:gap-x-8">
+          {features.map((feature) => (
+            <div key={feature.name} className="relative">
+              <dt>
+                <CheckIcon className="absolute h-6 w-6 text-teal-500" aria-hidden="true" />
+                <p className="ml-9 text-lg leading-6 font-medium text-whisper-500">{strings(feature.name)}</p>
+              </dt>
+              <dd className="mt-2 ml-9 text-base text-whisper-800">{strings(feature.description)}</dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Extension } from '../../constants/extension';
+import { navigation } from '../../constants/navigation';
+
+export interface IFooterProps {}
+
+export const Footer: React.FunctionComponent<IFooterProps> = (props: React.PropsWithChildren<IFooterProps>) => {
+  return (
+    <footer className="bg-vulcan-600">
+      <div className="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
+        <nav className="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
+          {navigation.main.map((item) => (
+            <div key={item.name} className="px-5 py-2">
+              <a href={item.href} title={item.title} className="text-base text-gray-400 hover:text-gray-500">
+                {item.name}
+              </a>
+            </div>
+          ))}
+        </nav>
+        <div className="mt-8 flex justify-center space-x-6">
+          <a href="https://visitorbadge.io/status?path=https%3A%2F%2Ffrontmatter.codes" title={`Daily Front Matter visitors`}>
+            <img src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Ffrontmatter.codes&countColor=%23060A15&labelColor=%23060A15" />
+          </a>
+
+          {navigation.social.map((item) => (
+            <a key={item.name} title={item.title} href={item.href} className="text-gray-400 hover:text-gray-500" rel={`noopener noreferrer`}>
+              <span className="sr-only">{item.name}</span>
+              <item.icon className="h-6 w-6" aria-hidden="true" />
+            </a>
+          ))}
+        </div>
+        <p className="mt-8 text-center text-base text-whisper-900">&copy; 2021 {Extension.name}. All rights reserved.</p>
+      </div>
+    </footer>
+  );
+};
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export interface IGeneratorsProps {}
+
+export const Generators: React.FunctionComponent<IGeneratorsProps> = (props: React.PropsWithChildren<IGeneratorsProps>) => {
+  const { t: strings } = useTranslation();
+
+  return (
+    <div className="bg-whisper-100">
+      <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
+        <p className="text-center text-sm font-semibold uppercase text-vulcan-500 tracking-wide">
+          {strings(`generators_title`)}
+        </p>
+        <div className="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6">
+          <div className="col-span-1 flex justify-center">
+            <img className="h-12" src="/assets/logos/11ty.svg" alt="11ty" />
+          </div>
+          <div className="col-span-1 flex justify-center">
+            <img className="h-12" src="/assets/logos/docusaurus.svg" alt="Docusaurus" />
+          </div>
+          <div className="col-span-1 flex justify-center">
+            <img className="h-12" src="/assets/logos/gatsby.svg" alt="Gatsby" />
+          </div>
+          <div className="col-span-1 flex justify-center">
+            <img className="h-12" src="/assets/logos/hugo.svg" alt="Hugo" />
+          </div>
+          <div className="col-span-1 flex justify-center">
+            <img className="h-12" src="/assets/logos/jekyll.svg" alt="Jekyll" />
+          </div>
+          <div className="col-span-1 flex justify-center">
+            <img className="h-12" src="/assets/logos/nextjs.svg" alt="Next.js" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Navigation } from '../Navigation';
+import { Footer } from './Footer';
+
+export interface ILayoutProps {}
+
+export const Layout: React.FunctionComponent<ILayoutProps> = (props: React.PropsWithChildren<ILayoutProps>) => {
+  return (
+    <div className={`flex flex-col h-screen`}>
+      <header>
+        <Navigation />
+      </header>
+
+      <main className={`flex-grow`}>
+        {props.children}
+      </main>
+
+      <Footer />
+    </div>
+  );
+};
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-export interface IPageProps {}
-
-export const Page: React.FunctionComponent<IPageProps> = (props: React.PropsWithChildren<IPageProps>) => {
-  return (
-    <>
-      
-    </>
-  );
-};