Merge branch 'main' into docs

2026-07-04 08:51:05 +02:00 · 2021-08-30 21:44:39 +02:00
parent 94a8610edf 672abbea2d
commit 733e747f58
32 changed files with 577 additions and 80 deletions
@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: Issue
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.
@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: Enhancement
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
@@ -0,0 +1,8 @@
+---
+title: "{{name}}"
+slug: "/{{kebabCase name}}/"
+description:
+date: 2019-08-22T15:20:28.000Z
+lastmod: 2019-08-22T15:20:28.000Z
+weight: 1
+---
@@ -7,5 +7,17 @@
        "out": true // set this to false to include "out" folder in search results
    },
    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
-    "typescript.tsc.autoDetect": "off"
+    "typescript.tsc.autoDetect": "off",
+    "frontMatter.content.folders": [
+        {
+            "title": "documentation",
+            "fsPath": "/Users/eliostruyf/nodejs/vscode/vscode-front-matter/docs/content/docs",
+            "paths": [
+                "/Users/eliostruyf/nodejs/vscode/vscode-front-matter/docs/content/docs",
+                "\\Users\\eliostruyf\\nodejs\\vscode\\vscode-front-matter\\docs\\content\\docs"
+            ]
+        }
+    ],
+    "eliostruyf.writingstyleguide.terms.isDisabled": true,
+    "eliostruyf.writingstyleguide.biasFree.isDisabled": true
 }
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+export interface IMarkdownProps {
+  content: string | undefined;
+}
+
+export const Markdown: React.FunctionComponent<IMarkdownProps> = ({content}: React.PropsWithChildren<IMarkdownProps>) => {
+  if (!content) {
+    return null;
+  }
+
+  const getTitle = (props: any) => {
+    const title = props?.children.length > 0 ? `${props?.children[0] as string}` : "";
+    return title;
+  };
+
+  const generateId = (props: any) => {
+    const title = getTitle(props);
+    return title.toLowerCase().replace(/\s/g, '-');
+  };
+
+  return (
+    <div className={`markdown`}>
+      {/* eslint-disable react/no-children-prop */}
+      <ReactMarkdown 
+        components={{
+          a: ({node, ...props}) => {
+            const url = props?.href || "";
+            const title = getTitle(props);
+            const elm = <a key={url as string} href={url as string} title={title}>{title}</a>;
+            return elm;
+          },
+          h1: ({node, ...props}) => (<h1 id={generateId(props)}>{getTitle(props)}</h1>),
+          h2: ({node, ...props}) => (<h2 id={generateId(props)}>{getTitle(props)}</h2>),
+          h3: ({node, ...props}) => (<h3 id={generateId(props)}>{getTitle(props)}</h3>),
+        }}
+        rehypePlugins={[rehypeRaw]} 
+        children={content} />
+    </div>
+  );
+};
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { PageFrontMatter } from '../../models/PageFrontMatter';
+import { Sidebar } from './Sidebar';
+
+export interface IPageProps {
+  items: PageFrontMatter[];
+}
+
+export const Page: React.FunctionComponent<IPageProps> = ({items, children}: React.PropsWithChildren<IPageProps>) => {
+  return (
+    <div className={`py-8 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`}>
+      <div className={`lg:flex`}>
+
+        <div className={`h-screen sticky top-16 lg:block hidden lg:w-60 xl:w-72`}>
+          <Sidebar items={items} />
+        </div>
+
+        <div className={`min-w-0 w-full flex-auto lg:static lg:max-h-full lg:overflow-visible`}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { PageFrontMatter } from '../../models/PageFrontMatter';
+import { Link } from '../Link/Link';
+import { Section } from '../Link/Section';
+
+export interface ISidebarProps {
+  items: PageFrontMatter[];
+}
+
+export const Sidebar: React.FunctionComponent<ISidebarProps> = ({ items }: React.PropsWithChildren<ISidebarProps>) => {
+  
+  const sorted = items?.sort((a, b) => { return (a.weight || 99) - (b.weight || 99); }) || [];
+
+  const getLinks = (item: PageFrontMatter) => {
+    const { content } = item;
+    const links = Array.from(content.matchAll(/^## (.*$)/gim));
+
+    if (!links || links.length === 0) {
+      return null;
+    }
+
+    return (
+      <ul className={`mt-2 space-y-2`}>
+        {links.map((link, index) => (
+          <li key={index}>
+            <Link title={link[1]} link={`/docs/${item.slug}#${link[1].toLowerCase().replace(/\s/g, '-')}`} />
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  return (
+    <nav role={`navigation`} className={`space-y-8`}>
+      {sorted.map((item, index) => {
+        return (
+          <div key={index}>
+            <Section title={item.title} link={`/docs/${item.slug !== "index" ? item.slug : ''}`} />
+
+            {getLinks(item)}
+          </div>
+        );
+      })}
+    </nav>
+  );
+};
@@ -1,11 +1,15 @@
 import * as React from 'react';

-export interface ILinkProps {}
+export interface ILinkProps {
+  title: string;
+  link: string;
+}

-export const Link: React.FunctionComponent<ILinkProps> = (props: React.PropsWithChildren<ILinkProps>) => {
+export const Link: React.FunctionComponent<ILinkProps> = ({title, link}: React.PropsWithChildren<ILinkProps>) => {
  return (
-    <>
-
-    </>
+    <a className="transition-colors duration-200 relative block text-whisper-500 hover:text-teal-900" 
+       href={link}>
+      {title}
+    </a>
  );
 };
@@ -0,0 +1,18 @@
+import Link from 'next/link';
+import * as React from 'react';
+
+export interface ISectionProps {
+  title: string;
+  link: string;
+}
+
+export const Section: React.FunctionComponent<ISectionProps> = ({title, link}: React.PropsWithChildren<ISectionProps>) => {
+  
+  return (
+    <Link href={link}>
+      <a className={`mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm text-whisper-900 hover:text-teal-900`} title={title}>
+        {title}
+      </a>
+    </Link>
+  );
+};
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { navigation } from '../../constants/navigation';
 import { Logo } from '../Images';
-import Link from 'next/Link';
+import Link from 'next/link';
 import { Extension } from '../../constants/extension';
 import { useRouter } from 'next/router';

@@ -8,7 +8,7 @@ export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithCh
  const { t: strings } = useTranslation();

  return (
-    <div className="pt-8 overflow-hidden sm:pt-12 lg:relative lg:py-48">
+    <div className="px-4 sm:px-0 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">
@@ -12,6 +12,7 @@ export const Generators: React.FunctionComponent<IGeneratorsProps> = (props: Rea
        <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" />
@@ -32,6 +33,10 @@ export const Generators: React.FunctionComponent<IGeneratorsProps> = (props: Rea
            <img className="h-12" src="/assets/logos/nextjs.svg" alt="Next.js" />
          </div>
        </div>
+
+        <div className="mt-6 flex justify-center">
+          <p className={`text-2xl tracking-tight font-bold sm:leading-none text-vulcan-500`}>and many more...</p>
+        </div>
      </div>
    </div>
  );
@@ -0,0 +1,8 @@
+---
+title: Commands
+slug: commands
+description: 
+date: '2021-08-30T16:13:00.546Z'
+lastmod: '2021-08-30T16:13:01.763Z'
+weight: 6
+---
@@ -0,0 +1,8 @@
+---
+title: Custom actions
+slug: custom-actions
+description: 
+date: '2021-08-30T16:13:00.546Z'
+lastmod: '2021-08-30T16:13:01.763Z'
+weight: 5
+---
@@ -0,0 +1,8 @@
+---
+title: Dashboard
+slug: dashboard
+description: 
+date: '2021-08-30T16:13:00.546Z'
+lastmod: '2021-08-30T16:13:01.763Z'
+weight: 3
+---
@@ -0,0 +1,49 @@
+---
+title: Getting started
+slug: getting-started
+description: 
+date: '2021-08-30T16:13:00.546Z'
+lastmod: '2021-08-30T16:13:01.763Z'
+weight: 2
+---
+
+# Getting started
+
+To get you started, you first need to install the extension in Visual Studio Code. 
+
+You can get the extension via:
+
+- The VS Code marketplace: [VS Code Marketplace - Front Matter](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter).
+- The extension CLI: `ext install eliostruyf.vscode-front-matter`
+
+## Welcome screen
+
+Once installed, Front Matter will open the **welcome screen** the first time Visual Studio Code gets reloaded.
+
+![Welcome screen](/assets/welcome-progress.png)
+
+It also supports light themes:
+
+![Welcome screen](/assets/welcome-light.png)
+
+> **Info**: The welcome screen will also be shown when Front Matter is not yet fully configured.
+
+## Required configuration
+
+On the welcome screen, there are two tasks to complete before you can take full advantage of Front Matter. 
+
+### Step 1: Initialize the project
+
+In this step, a `.templates` folder and `article.md` file template will be created in the current project.
+
+The `.templates` folder, is a folder that can be used to place all sort of Markdown templates. It will be used when you want to let Front Matter generate new pages/articles/...
+
+### Step 2: Register content folder(s)
+
+As Front Matter is **not** created to only support one static site generator, you will be able to specify where your Markdown content lives. From the moment you register a folder, it will be used on the dashboard to show an overview of all files.
+
+You can register a folder by right-clicking on a folder name in the explorer panel from Visual Studio Code and selecting **Front Matter: Register folder**.
+
+![Register a folder](/assets/register-folder.png)
+
+## Enjoy using Front Matter
@@ -0,0 +1,52 @@
+---
+title: Introduction
+slug: ''
+description: Create, edit, and preview your pages within Visual Studio Code. Front Matter allows you to keep control of your static site without any external tools.
+date: '2021-08-30T16:13:00.546Z'
+lastmod: '2021-08-30T16:13:01.763Z'
+weight: 1
+---
+
+# Introduction
+
+Front Matter is an essential Visual Studio Code extension that simplifies working and managing your markdown articles. We created the extension to support many static-site generators like Hugo, Jekyll, Hexo, NextJs, Gatsby, and more.
+
+The extension brings Content Management System (CMS) capabilities straight within Visual Studio Code. For example, you can keep a list of the used tags, categories, create content, and so much more.
+
+![Welcome screen](/assets/welcome-progress.png)
+
+Our main extension features are:
+
+- Page dashboard where you can get an overview of all your markdown pages. You can use it to search, filter, sort your contents.
+- Site preview within Visual Studio Code
+- SEO checks for title, description, and keywords
+- Support for custom actions/scripts
+- and many more
+
+![Site preview](/assets/site-preview.png)
+
+## Why Front Matter?
+
+Initially, the Front Matter extension was created when [Elio Struyf](https://twitter.com/eliostruyf) migrated from WordPress to Hugo (Static Site Generator). To make content management more straightforward, he started to develop the Front Matter extension. He added more features regularly, and eventually, it became a headless CMS that runs within Visual Studio Code.
+
+## Advantages
+
+We believe that Front Matter gives you the following advantages:
+
+### Speed
+
+It just runs on your machine. There are no servers/websites/APIs involved in the process. Nothing can beat this.
+
+### Use it within Visual Studio Code
+
+You do not need to jump from tool to tool. Just use the one that you like the most, which is, of course, Visual Studio Code.
+
+### Customizable
+
+Almost all of the Front Matter features are customizable by the extension of its settings. These settings make sure that you can tweak it to your needs.
+
+### Extensibility
+
+We know that not every site is the same. That is why we allow you to add your custom scripts. These scripts will show up as actions in our panel and could take your content management to the next level. 
+
+> **Example**: [Generate open graph preview image in Code with Front Matter](https://www.eliostruyf.com/generate-open-graph-preview-image-code-front-matter/)
@@ -0,0 +1,8 @@
+---
+title: Panel
+slug: panel
+description: 
+date: '2021-08-30T16:13:00.546Z'
+lastmod: '2021-08-30T16:13:01.763Z'
+weight: 4
+---
@@ -0,0 +1,8 @@
+---
+title: Settings
+slug: settings
+description: 
+date: '2021-08-30T16:13:00.546Z'
+lastmod: '2021-08-30T16:13:01.763Z'
+weight: 7
+---
@@ -11,6 +11,7 @@ export function getPostSlugs(type: ContentType) {
 }

 export function getPostByFilename(type: ContentType, crntFile: string, fields: string[] = []) {
+  
  const realSlug = crntFile.replace(/\.md$/, '');
  const fullPath = join(postsDirectory, type, `${realSlug}.md`)
  const fileContents = fs.readFileSync(fullPath, 'utf8')
@@ -41,10 +42,12 @@ export function getPostByFilename(type: ContentType, crntFile: string, fields: s
 }

 export function getAllPosts(type: ContentType, fields: string[] = []) {
-  const fileNames = getPostSlugs(type)
+  const fileNames = getPostSlugs(type);
+  
  const posts = fileNames
    .map((fileName) => getPostByFilename(type, fileName, fields))
    // sort posts by date in descending order
-    .sort((post1, post2) => ((post1 as any)?.date > (post2 as any)?.date ? -1 : 1))
+    .sort((post1, post2) => ((post1 as any)?.date > (post2 as any)?.date ? -1 : 1));
+
  return posts
 }
@@ -0,0 +1,9 @@
+export interface PageFrontMatter {
+  title: string;
+  slug: string;
+  description: string;
+  date: string;
+  lastmod: string;
+  content: string;
+  weight?: number;
+}
@@ -563,7 +563,6 @@
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
      "requires": {
        "sprintf-js": "~1.0.2"
      }
@@ -1945,8 +1944,7 @@
    "esprima": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
    },
    "esquery": {
      "version": "1.4.0",
@@ -2018,6 +2016,14 @@
      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
    },
+    "extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "requires": {
+        "is-extendable": "^0.1.0"
+      }
+    },
    "fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2244,6 +2250,17 @@
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
      "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg=="
    },
+    "gray-matter": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
+      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
+      "requires": {
+        "js-yaml": "^3.13.1",
+        "kind-of": "^6.0.2",
+        "section-matter": "^1.0.0",
+        "strip-bom-string": "^1.0.0"
+      }
+    },
    "has": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -2685,6 +2702,11 @@
      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.0.tgz",
      "integrity": "sha512-QfrfjQV0LjoWQ1K1XSoEZkTAzSa14RKVMa5zg3SdAfzEmQzRM4+tbSFWb78creCeA9rNBzaZal92opi1TwPWZw=="
    },
+    "is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik="
+    },
    "is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2831,7 +2853,6 @@
      "version": "3.14.1",
      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-      "dev": true,
      "requires": {
        "argparse": "^1.0.7",
        "esprima": "^4.0.0"
@@ -2889,6 +2910,11 @@
        "object.assign": "^4.1.2"
      }
    },
+    "kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
+    },
    "language-subtag-registry": {
      "version": "0.3.21",
      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz",
@@ -4482,6 +4508,49 @@
        "unified": "^10.0.0"
      }
    },
+    "remark-autolink-headings": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/remark-autolink-headings/-/remark-autolink-headings-7.0.1.tgz",
+      "integrity": "sha512-a1BIwoJ0cSnX+sPp5u3AFULBFWHGYBt57Fo4a+7IlGiJOQxs8b7uYAE5Iu26Ocl7Y5cvinZy3FaGVruLCKg6vA==",
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "@types/mdast": "^3.0.0",
+        "extend": "^3.0.0",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^4.0.0"
+      }
+    },
+    "remark-heading-id": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/remark-heading-id/-/remark-heading-id-1.0.0.tgz",
+      "integrity": "sha512-86QaOiL+8jTV9P5Y0S25kSIcykCd/XmnqiFltWZRWKHmsVT4sevN7QJnkpUjkCJUpIeWte/LYH7pVlCTGz89fw==",
+      "requires": {
+        "unist-util-visit": "^1.4.0"
+      },
+      "dependencies": {
+        "unist-util-is": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
+          "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A=="
+        },
+        "unist-util-visit": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
+          "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
+          "requires": {
+            "unist-util-visit-parents": "^2.0.0"
+          }
+        },
+        "unist-util-visit-parents": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
+          "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
+          "requires": {
+            "unist-util-is": "^3.0.0"
+          }
+        }
+      }
+    },
    "remark-html": {
      "version": "14.0.0",
      "resolved": "https://registry.npmjs.org/remark-html/-/remark-html-14.0.0.tgz",
@@ -4601,6 +4670,15 @@
        "object-assign": "^4.1.1"
      }
    },
+    "section-matter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
+      "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
+      "requires": {
+        "extend-shallow": "^2.0.1",
+        "kind-of": "^6.0.0"
+      }
+    },
    "semver": {
      "version": "6.3.0",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -4769,8 +4847,7 @@
    "sprintf-js": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
    },
    "stacktrace-parser": {
      "version": "0.1.10",
@@ -4895,6 +4972,11 @@
      "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
      "dev": true
    },
+    "strip-bom-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
+      "integrity": "sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI="
+    },
    "strip-json-comments": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -12,6 +12,7 @@
  "dependencies": {
    "@headlessui/react": "^1.4.0",
    "@heroicons/react": "^1.0.4",
+    "gray-matter": "^4.0.3",
    "i18next": "^20.4.0",
    "i18next-browser-languagedetector": "^6.1.2",
    "next": "11.1.0",
@@ -19,7 +20,9 @@
    "react-dom": "17.0.2",
    "react-i18next": "^11.11.4",
    "react-markdown": "^7.0.1",
-    "rehype-raw": "^6.1.0"
+    "rehype-raw": "^6.1.0",
+    "remark-autolink-headings": "7.0.1",
+    "remark-heading-id": "1.0.0"
  },
  "devDependencies": {
    "@types/react": "17.0.19",
@@ -16,7 +16,7 @@ export default function Home({ content }: any) {
      <OtherMeta image={`/assets/frontmatter-preview.png`} />

      <Layout>
-        <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8 divide-y-2 divide-vulcan-200">
+        <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:py-24 lg:px-8 divide-y-2 divide-vulcan-200">
          <div className="py-8 space-y-2 md:space-y-5 ">
            <h1 className="text-5xl tracking-tight font-extrabold sm:leading-none lg:text-5xl xl:text-6xl">{strings(`changelog_page_title`)}</h1>
            
@@ -24,6 +24,7 @@ export default function Home({ content }: any) {
          </div>

          <div className={`changelog`}>
+            {/* eslint-disable react/no-children-prop */}
            <ReactMarkdown 
              components={{
                a: ({node, ...props}) => {
@@ -1,85 +1,79 @@
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
 import { getAllPosts, getPostByFilename } from '../../lib/api';
 import { useRouter } from 'next/router';
-import rehypeRaw from 'rehype-raw';
 import { Description, OtherMeta, Title } from '../../components/Meta';
 import { Layout } from '../../components/Page/Layout';
+import { useTranslation } from 'react-i18next';
+import { Page } from '../../components/Docs/Page';
+import { Markdown } from '../../components/Docs/Markdown';

-export default function News({ page }: any) {
+export default function Documentation({ page, pages }: any) {
+  const { t: strings } = useTranslation();
+  const router = useRouter();

-  const router = useRouter()
  if (!router.isFallback && !page?.slug) {
    return <p>Error</p>
  }

  return (
    <>
-      <Title value={page.title} />
-      <Description value={page.description} />
-      <OtherMeta image={page.image} type={`article`} />
+      <Title value={strings(`documentation_title`)} />
+      <Description value={`documentation_description`} />
+      <OtherMeta image={`/assets/frontmatter-preview.png`} />

      <Layout>
-        <ReactMarkdown 
-          components={{
-            a: ({node, ...props}) => {
-              const url = props?.href || "";
-              const title = props?.children.length > 0 ? `${props?.children[0] as string}` : "";
-              const elm = <a key={url as string} href={url as string} title={title}>{title}</a>;
-              return elm;
-            }
-          }}
-          rehypePlugins={[rehypeRaw]} 
-          children={page.content} />
+        <Page items={pages}>
+          <Markdown content={page?.content} />
+        </Page>
      </Layout>
    </>
  )
 }

 export async function getStaticProps({ params }: any) {
-  const blogItems = getAllPosts('docs', ['fileName', 'slug']);
-  const article: any = blogItems.find((b: any) => b.slug === params.slug);
-
-  const blog: any = getPostByFilename('docs', article.fileName, [
+  const pages = getAllPosts('docs', [
    'title',
-    'date',
-    'content',
    'slug',
-    'fileName',
-    'category',
    'description',
-    'image'
+    'date',
+    'lastmod',
+    'weight',
+    'content',
+    'fileName'
+  ]);
+
+  const article: any = pages.find((b: any) => b.slug === params.slug);
+
+  const doc: any = getPostByFilename('docs', article.fileName, [
+    'title',
+    'slug',
+    'description',
+    'date',
+    'lastmod',
+    'weight',
+    'content'
  ])

  return {
    props: {
      page: {
-        ...blog
-      }
+        ...doc
+      },
+      pages
    }
  }
 }

 export async function getStaticPaths() {
-  const blogItems = getAllPosts('docs', [
-    'title',
-    'date',
-    'slug',
-    'fileName',
-    'category',
-    'description',
-    'image'
-  ])
+  const pages = getAllPosts('docs', ['slug', 'fileName']);

  return {
-    paths: blogItems.map((news: any) => {
-      return {
-        params: {
-          slug: news.slug,
-          fileName: news.fileName
-        }
+    paths: pages.map((page: any) => ({
+      params: {
+        slug: page.slug,
+        fileName: page.fileName
      }
-    }),
+    })),
    fallback: false
  }
 }
@@ -1,11 +1,18 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import { Markdown } from '../../components/Docs/Markdown';
+import { Page } from '../../components/Docs/Page';
 import { Description, OtherMeta, Title } from '../../components/Meta';
 import { Layout } from '../../components/Page/Layout';
 import { getAllPosts } from '../../lib/api';
+import { PageFrontMatter } from '../../models/PageFrontMatter';

-export default function Home({ docs }: any) {
+export default function Home({ pages }: { pages: PageFrontMatter[] }) {
  const { t: strings } = useTranslation();
+
+  const welcome = pages?.find(p => p.slug === "index");
  
  return (
    <>
@@ -14,28 +21,26 @@ export default function Home({ docs }: any) {
      <OtherMeta image={`/assets/frontmatter-preview.png`} />

      <Layout>
-        <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
-          <div className="text-6xl text-whisper-500">
-            Coming soon...
-          </div>
-        </div>
+        <Page items={pages}>
+          <Markdown content={welcome?.content} />
+        </Page>
      </Layout>
    </>
  )
 }

 export const getStaticProps = async () => {
-  const blogItems = getAllPosts('docs', [
+  const pages = getAllPosts('docs', [
    'title',
-    'date',
    'slug',
-    'fileName',
-    'category',
    'description',
-    'image'
-  ])
+    'date',
+    'lastmod',
+    'weight',
+    'content'
+  ]);

  return {
-    props: { blogItems: blogItems.map(item => ({...item, type: 'blog'})) },
+    props: { pages },
  }
 }
@@ -14,17 +14,17 @@ export default function Home({ showcases }: any) {
      <OtherMeta image={`/assets/frontmatter-preview.png`} />

      <Layout>
-        <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8 divide-y-2 divide-vulcan-200">
+        <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:py-24 lg:px-8 divide-y-2 divide-vulcan-200">
          <div className="py-8 space-y-2 md:space-y-5 ">
            <h1 className="text-5xl tracking-tight font-extrabold sm:leading-none lg:text-5xl xl:text-6xl">{strings(`showcase_title`)}</h1>
            
            <p className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">{strings(`showcase_description`)}</p>
          </div>

-          <div className={`py-8 grid grid-cols-2 gap-8`}>
+          <div className={`py-8 grid grid-cols-1 lg:grid-cols-2 gap-8`}>
            {showcases.filter((showcase: any) => showcase.image).map((showcase: any) => (
-              <a className="group space-y-2 md:space-y-5 relative" href={showcase.link} title={showcase.title} rel={`noopener noreferrer`}>
-                <figure className={`relative h-[25rem] overflow-hidden grayscale group-hover:grayscale-0`}>
+              <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`} />
                </figure>

@@ -26,4 +26,44 @@ html, body {height: 100%;}
  a:hover {
    @apply text-teal-800;
  }
+}
+
+.markdown {
+  @apply space-y-4;
+
+  h1 {
+    @apply text-5xl tracking-tight font-extrabold sm:leading-none lg:text-5xl xl:text-6xl;
+  }
+
+  h2 {
+    @apply tracking-tight font-extrabold sm:leading-none text-3xl xl:text-4xl;
+  }
+
+  h3 {
+    @apply tracking-tight font-extrabold sm:leading-none text-xl xl:text-2xl;
+  }
+
+  img {
+    @apply mx-auto my-8;
+  }
+
+  p {
+    @apply my-4;
+  }
+
+  ul {
+    @apply list-disc pl-4 my-4;
+  }
+
+  a, a:visited {
+    @apply text-teal-500;
+  }
+
+  a:hover {
+    @apply text-teal-800;
+  }
+
+  blockquote {
+    @apply py-2 px-4 my-4 border-l-4 border-teal-500;
+  }
 }