Merge pull request #2069 from OctopusDeploy/sf/front-matter-additions

Front Matter Config
OctopusDeploy · Nov 3, 2023 · decf31d · decf31d
2 parents f2ffc0a + bd49a8b
commit decf31d
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -73,6 +73,19 @@ You can generate a static copy of the site using `pnpm build` and run it in a br
 
 ## Astro hints and tips
 
+### Editor setup
+
+We have configured [Front Matter CMS](https://frontmatter.codes/), which works through a VS Code extension. This can help guide you during the editing process as there are snippets to help with images and other common components. Front Matter also helps you with the markdown YAML front matter.
+
+Here's the recommended setup for VS Code:
+
+- [Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)
+- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+- [Front Matter CMS](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter)
+- [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
+
+You can use the Front Matter dashboard to find content, media, and snippets - or the Front Matter toolbar to interact in markdown files (`.md` or `.mdx`).
+
 ### Finding pages to edit
 
 The pages are in the exact page shown on the website, so you can easily translate them. For example:

diff --git a/dictionary-octopus.txt b/dictionary-octopus.txt
@@ -18,6 +18,7 @@ hotfix
 hotfixes
 HSTS
 ITSM
+jwks
 kustomization
 kustomize
 lifecycles
@@ -45,6 +46,7 @@ PROGRAMFILES
 reprioritize
 reprovisioned
 reprovisioning
+RSASSA
 Runbook
 runbook
 runbooks
@@ -64,5 +66,3 @@ WIXUI
 workertools
 xlarge
 xmark
-RSASSA
-jwks
diff --git a/frontmatter.json b/frontmatter.json
@@ -2,15 +2,16 @@
   "$schema": "https://frontmatter.codes/frontmatter.schema.json",
   "frontMatter.framework.id": "astro",
   "frontMatter.preview.host": "http://localhost:3000",
-  "frontMatter.content.publicFolder": "public/docs",
+  "frontMatter.content.publicFolder": "public",
   "frontMatter.content.supportedFileTypes": [
     "md",
     "mdx"
   ],
   "frontMatter.content.pageFolders": [
     {
-      "title": "docs",
-      "path": "[[workspace]]"
+      "title": "pages",
+      "path": "[[workspace]]/src/pages",
+      "previewPath": "{{pathToken.3}}"
     }
   ],
   "frontMatter.taxonomy.contentTypes": [
@@ -34,7 +35,8 @@
         {
           "title": "subtitle",
           "name": "subtitle",
-          "type": "string"
+          "type": "string",
+          "required": false
         },
         {
           "title": "description",
@@ -44,22 +46,26 @@
         {
           "title": "pubDate",
           "name": "pubDate",
-          "type": "datetime"
+          "type": "datetime",
+          "isPublishDate": true
         },
         {
           "title": "modDate",
           "name": "modDate",
-          "type": "datetime"
+          "type": "datetime",
+          "isModifiedDate": true
         },
         {
           "title": "navTitle",
           "name": "navTitle",
-          "type": "string"
+          "type": "string",
+          "required": false
         },
         {
           "title": "navSection",
           "name": "navSection",
-          "type": "string"
+          "type": "string",
+          "required": false
         },
         {
           "title": "navOrder",
@@ -73,21 +79,25 @@
   "frontMatter.snippets.wrapper.enabled": false,
   "frontMatter.content.snippets": {
     "Image figure (above the fold)": {
-      "description": "Creates an image within a figure",
+      "description": "Standard image (above the fold)",
       "body": [
         ":::figure",
-        "<img src=\"&mediaUrl\" alt=\"[[alt]]\" height=\"[[mediaHeight]]\" width=\"[[mediaWidth]]\" />",
+        "![{{alt}}]({{&mediaUrl}}){ height=\"{{mediaHeight}}\" width=\"{{mediaWidth}}\" }",
         ":::"
       ],
+      "openingTags": "{{",
+      "closingTags": "}}",
       "isMediaSnippet": true
     },
     "Image figure (below the fold)": {
-      "description": "Creates an image within a figure",
+      "description": "Standard image (below the fold)",
       "body": [
         ":::figure",
-        "<img src=\"&mediaUrl\" alt=\"[[alt]]\" height=\"[[mediaHeight]]\" width=\"[[mediaWidth]]\" loading=\"lazy\" />",
+        "![{{alt}}]({{&mediaUrl}}){ height=\"{{mediaHeight}}\" width=\"{{mediaWidth}}\" loading=\"lazy\" }",
         ":::"
       ],
+      "openingTags": "{{",
+      "closingTags": "}}",
       "isMediaSnippet": true
     },
     "Information box": {

diff --git a/src/pages/index.md b/src/pages/index.md
@@ -6,6 +6,7 @@ navSearch: false
 navSitemap: false
 navMenu: false
 pubDate: 2022-10-02
+modDate: 2023-11-02
 keywords: index
 description: This index page is not part of the production site.
 bannerImage:
@@ -29,6 +30,8 @@ This page is not shown on the production site.
 
 ### Boxes
 
+Front Matter snippet: "Information box".
+
 :::div{.hint}
 This is a hint box
 :::
@@ -49,7 +52,13 @@ This is a warning box
 This is a problem box
 :::
 
-:::div{.info}
-This is an info box
-:::
+### Images
+
+Use the toolbar to "Add Media", which will automatically offer these snippets:
+
+Front Matter snippet:
 
+- Standard image (above the fold)
+  Adds an image based on metadata stored
+- Standard image (below the fold)
+  As above, but additionally lazy loads the image