Doc updates

Author: estruyf

components/Docs/Markdown.tsx

@@ -10,9 +10,10 @@ import { mdxAnnotations } from 'mdx-annotations';
 
 export interface IMarkdownProps {
   content: string | undefined;
+  slug: string | undefined;
 }
 
-export const Markdown: React.FunctionComponent<IMarkdownProps> = ({content}: React.PropsWithChildren<IMarkdownProps>) => {
+export const Markdown: React.FunctionComponent<IMarkdownProps> = ({content, slug}: React.PropsWithChildren<IMarkdownProps>) => {
 
   const getTitle = (props: any) => {
     const title = props?.children.length > 0 ? `${props?.children[0] as string}` : "";
@@ -47,7 +48,7 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({content}: Rea
   }
 
   return (
-    <div className={`markdown`}>
+    <div className={`markdown ${slug}`}>
       {/* eslint-disable react/no-children-prop */}
       <ReactMarkdown
         components={{

components/Navigation/MobileNavigation.tsx

@@ -3,7 +3,7 @@ import { MenuIcon, XIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { createContext, Fragment, useContext, useState } from 'react';
 import { Header } from '../Page/Header';
-import create from 'zustand';
+import { create } from 'zustand';
 import { GlobalNavigation } from './GlobalNavigation';
 import { SocialNavigation } from './SocialNavigation';
 import { DocsNavigation } from './DocsNavigation';

components/Page/CTA.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import { Extension } from '../../constants/extension';
 import { isProduction } from '../../helpers/isProduction';
 import { FrontMatterLines } from './FrontMatterLines';
-const Slide = require('react-reveal/Slide');
 
 export interface ICTAProps {}
 
@@ -48,15 +47,13 @@ export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithCh
       <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`}>
-            <Slide right>
-              <img 
-                className={`w-full lg:h-full lg:w-auto lg:max-w-none`} 
-                // src={`https://res.cloudinary.com/estruyf/image/upload/w_1256/v1631871148/frontmatter/preview-3.2.0.png`}
-                // src={"https://res.cloudinary.com/estruyf/image/upload/w_1256/v1649328023/frontmatter/7.1.0/panel-preview-light.png"}
-                src={"https://res.cloudinary.com/estruyf/image/upload/w_1256/v1649335002/frontmatter/7.1.0/fm-doc-screenshot.png"}
-                alt={`Front Matter - Headless CMS - Live page preview`}
-                loading={`lazy`} />
-            </Slide>
+            <img 
+              className={`w-full lg:h-full lg:w-auto lg:max-w-none`} 
+              // src={`https://res.cloudinary.com/estruyf/image/upload/w_1256/v1631871148/frontmatter/preview-3.2.0.png`}
+              // src={"https://res.cloudinary.com/estruyf/image/upload/w_1256/v1649328023/frontmatter/7.1.0/panel-preview-light.png"}
+              src={"https://res.cloudinary.com/estruyf/image/upload/w_1256/v1649335002/frontmatter/7.1.0/fm-doc-screenshot.png"}
+              alt={`Front Matter - Headless CMS - Live page preview`}
+              loading={`lazy`} />
           </div>
         </div>
       </div>

components/Page/Features.tsx

@@ -4,7 +4,6 @@ import { features } from '../../constants/features';
 import { CheckIcon } from '@heroicons/react/outline';
 import Link from 'next/link';
 import { Extension } from '../../constants/extension';
-const HeadShake = require('react-reveal/HeadShake');
 
 export interface IFeaturesProps {}
 
@@ -43,15 +42,13 @@ export const Features: React.FunctionComponent<IFeaturesProps> = (props: React.P
             {strings(`features_cta_title`) as string}
           </p>
           <div className="mt-4">
-            <HeadShake>
-              <Link 
-                href={Extension.featureLink}
-                className={`inline-block px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-vulcan-50 hover:bg-opacity-70 sm:px-8`}
-                target={`_blank`}
-                rel={`noopener noreferrer`}>                  
-                {strings(`features_cta_button`) as string}
-              </Link>
-            </HeadShake>
+            <Link 
+              href={Extension.featureLink}
+              className={`inline-block px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-vulcan-50 hover:bg-opacity-70 sm:px-8`}
+              target={`_blank`}
+              rel={`noopener noreferrer`}>                  
+              {strings(`features_cta_button`) as string}
+            </Link>
           </div>
         </div>
       </div>

components/Page/Hero.tsx

@@ -1,6 +1,5 @@
 import Link from 'next/link';
 import * as React from 'react';
-const Slide = require('react-reveal/Slide');
 
 export interface IHeroProps {
   view: "left" | "right";
@@ -49,11 +48,10 @@ export const Hero: React.FunctionComponent<IHeroProps> = ({view, title, descript
       <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:w-1/2 ${view === "left" ? `lg:left-0` : `lg:right-0`}`}>
           <div className={`relative sm:mx-auto sm:max-w-3xl sm:px-0 lg:max-w-none lg:h-full ${view === "left" ? `` : `lg:-mr-40 lg:pl-12`}`}>
-            <Slide left={view === "left"} right={view !== "left"}>
-              <img className={`w-full lg:h-full lg:w-auto lg:max-w-none ${view === "left" ? `lg:absolute lg:right-0` : ''}`} 
-                  src={imgSrc}
-                  alt={imgAlt} />
-            </Slide>
+              <img 
+                className={`w-full lg:h-full lg:w-auto lg:max-w-none ${view === "left" ? `lg:absolute lg:right-0` : ''}`} 
+                src={imgSrc}
+                alt={imgAlt} />
           </div>
         </div>
       </div>

content/changelog/v8.3.0.md

@@ -13,6 +13,24 @@ slug: v8.3.0
 
 In this version of VSCode Front Matter now supports external config files, meaning you can store your configurations outside of the extension in a separate file. This allows for better organization and easier management of your configurations, as well as better collaboration with others.
 
+
+Front Matter has got a fresh new feature that allows you to store your configurations outside of the extension in a separate file. The file can be provided from a local or remote endpoint. Yes, you heard that right! You can now organize and manage your configurations with greater ease and collaborate more seamlessly with others. If you have configurations you want to share with others, you can now do so by simply sharing the URL of the file.
+
+Here you can find an example of a remote config file:
+
+```json
+{
+  "$schema": "https://frontmatter.codes/frontmatter.schema.json",
+  "frontMatter.extends": [
+    "https://platen.io/frontmatter/platen.json",
+     "./config/frontmatter.config.json"
+  ],
+  ...
+}
+```
+
+> **Info**: Find out more about this feature in the [extending settings](/docs/settings#extending-settings) section.
+
 ## Experimental Visual Studio Code theme support
 
 Finally we are introducing "experimental" support for Visual Studio Code themes. The dashboards will now adapt to the colors of your current theme.

content/docs/custom-actions.md

@@ -18,34 +18,30 @@ nothing more than a Node.js script which is referenced from within your project.
 ![Custom action][01]
 
 <!-- markdownlint-disable MD028 -->
+
 > **Sample**: [Generate open graph preview image in Code with Front Matter][02]
 
 > **Important**: You can add custom actions for your content and media files.
+
 <!-- markdownlint-enable MD028 -->
+
 ## The custom action setting
 
 The content and media custom actions can be defined by using the `frontMatter.custom.scripts` setting.
 
 Custom actions can be configured with the following properties:
 
-- `id`: The id of the custom action/script
-- `title`: The title of the custom action
-- `script`: The path to the script to execute
-- `command`: The command to execute. Example: `node`, `path to your node executable`, `bash`,
-  `python`, ... (default: `node` - optional).
-- `type`: The type for which the script will be used. Can be `content`, `mediaFile`, or
-  `mediaFolder`. (default: `content` - optional).
-- `bulk`: Run the script for one file or multiple files. .
-- `output`: Specifies the output type (default: `notification` - optional). Available values are:
-  - `notification`: The output will be passed as a notification.
-  - `editor`: The output will be passed to the editor.
-- `outputType`: Specifies the output type (default: `text` - optional). Available values the editor
-  values from VS Code like:
-  - `text`: The output will be passed as a text file.
-  - `html`: The output will be passed as an HTML file.
-  - `markdown`: The output will be passed as an Markdown file.
-- `hidden`: Hide the action from the UI. This is mostly used when creating a content script that
-  will be used to post process new content (default: `false` - optional).
+| Title        | Description                                                                                                                                                                                                                                                                                        | Default        |
+| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `id`         | The id of the custom action/script                                                                                                                                                                                                                                                                 | `""`             |
+| `title`      | The title of the custom action                                                                                                                                                                                                                                                                     | `""`             |
+| `script`     | The path to the script to execute                                                                                                                                                                                                                                                                  | `""`             |
+| `command`    | The command to execute (optional). Example: `node`, `path to your node executable`, `bash`, `python`, ...                                                                                                                                                                                          | `node`         |
+| `type`       | The type for which the script will be used (optional). <br /><br /> Use one of the following types: `content`, `mediaFile`, or `mediaFolder`.                                                                                                                                                      | `content`      |
+| `bulk`       | Run the script for one file or multiple files.                                                                                                                                                                                                                                                     | `false`        |
+| `output`     | Specifies the output type (optional). <br /><br /> Available values are: `notification` and `editor`. <br /><br /> `notification`: The output will be passed as a notification. <br /> `editor`: The output will be passed to the editor.                                                          | `notification` |
+| `outputType` | Specifies the output type (optional). <br /><br /> Available values the editor values from VS Code like: <br /><br /> `text`: The output will be passed as a text file. <br /> `html`: The output will be passed as an HTML file. <br /> `markdown`: The output will be passed as a Markdown file. | `text`         |
+| `hidden`     | Hide the action from the UI. This is mostly used when creating a content script that will be used to post process new content (optional).                                                                                                                                                          | `false`        |
 
 > **Important**: Previously, you could define the `nodeBin` property to define the path to your node
 > executable. This path was needed when you are working with for instance `nvm` and have multiple
@@ -82,11 +78,13 @@ setting for your project as follows:
 
 ```json
 {
-  "frontMatter.custom.scripts": [{
-    "title": "Generate social image",
-    "script": "./scripts/social-img.js",
-    "command": "~/.nvm/versions/node/v14.15.5/bin/node"
-  }]
+  "frontMatter.custom.scripts": [
+    {
+      "title": "Generate social image",
+      "script": "./scripts/social-img.js",
+      "command": "~/.nvm/versions/node/v14.15.5/bin/node"
+    }
+  ]
 }
 ```
 
@@ -108,7 +106,7 @@ want to update the front matter of your content, you need to provide the data in
 format.
 
 ```json
-{ "frontmatter": { "<field name>": "field value" }}
+{ "frontmatter": { "<field name>": "field value" } }
 ```
 
 Example:
@@ -143,13 +141,15 @@ your project as follows:
 
 ```json
 {
-  "frontMatter.custom.scripts": [{
-    "title": "Generate social image",
-    "script": "./scripts/social-img.js",
-    "command": "~/.nvm/versions/node/v16.13.0/bin/node",
-    "bulk": true,
-    "output": "editor"
-  }]
+  "frontMatter.custom.scripts": [
+    {
+      "title": "Generate social image",
+      "script": "./scripts/social-img.js",
+      "command": "~/.nvm/versions/node/v16.13.0/bin/node",
+      "bulk": true,
+      "output": "editor"
+    }
+  ]
 }
 ```
 
@@ -231,28 +231,25 @@ print(f'frontMatterArg: {sys.argv[3]}')
 ### Optimize image (media file script)
 
 ```javascript
-const path = require('path');
+const path = require("path");
 
 const arguments = process.argv;
 
 (async () => {
   if (arguments && arguments.length > 0) {
-    const imagemin = (await import('imagemin')).default;
-    const imageminJpegtran = (await import('imagemin-jpegtran')).default;
-    const imageminPngquant = (await import('imagemin-pngquant')).default;
+    const imagemin = (await import("imagemin")).default;
+    const imageminJpegtran = (await import("imagemin-jpegtran")).default;
+    const imageminPngquant = (await import("imagemin-pngquant")).default;
 
     const fileArg = arguments[3]; // The file path
 
     await imagemin([fileArg], {
       destination: path.dirname(fileArg),
       glob: false,
-      plugins: [
-        imageminJpegtran(),
-        imageminPngquant()
-      ]
+      plugins: [imageminJpegtran(), imageminPngquant()],
     });
 
-    console.log(`Optimized image ${path.basename(fileArg)}`)
+    console.log(`Optimized image ${path.basename(fileArg)}`);
   }
 })();
 ```
@@ -264,29 +261,26 @@ const arguments = process.argv;
 ### Optimize images in the current folder (media folder script)
 
 ```javascript
-const path = require('path');
+const path = require("path");
 
 const arguments = process.argv;
 
 (async () => {
   if (arguments && arguments.length > 0) {
-    const imagemin = (await import('imagemin')).default;
-    const imageminJpegtran = (await import('imagemin-jpegtran')).default;
-    const imageminPngquant = (await import('imagemin-pngquant')).default;
+    const imagemin = (await import("imagemin")).default;
+    const imageminJpegtran = (await import("imagemin-jpegtran")).default;
+    const imageminPngquant = (await import("imagemin-pngquant")).default;
 
     const workspaceArg = arguments[2]; // The workspace path
     const folderArg = arguments[3]; // The folder path
 
-    const files = await imagemin([path.join(folderArg, '*.{jpg,png}')], {
+    const files = await imagemin([path.join(folderArg, "*.{jpg,png}")], {
       destination: folderArg,
       glob: true,
-      plugins: [
-        imageminJpegtran(),
-        imageminPngquant()
-      ]
+      plugins: [imageminJpegtran(), imageminPngquant()],
     });
 
-    console.log(`Optimized images: ${files.length}`)
+    console.log(`Optimized images: ${files.length}`);
   }
 })();
 ```
@@ -296,6 +290,7 @@ const arguments = process.argv;
 - `npm i imagemin imagemin-jpegtran imagemin-pngquant`
 
 <!-- Link References -->
+
 [01]: /assets/custom-action.png
 [02]: https://www.eliostruyf.com/generate-open-graph-preview-image-code-front-matter/
 [03]: https://github.com/estruyf/vscode-front-matter/blob/HEAD/sample/script-sample.js