Create alternative syntax for frontmatter

.eslintignore

@@ -35,6 +35,7 @@ packages/core/test/unit/**/*.js
 packages/core/src/lib/markdown-it/patches/*
 packages/core/src/lib/markdown-it/plugins/*
 !packages/core/src/lib/markdown-it/plugins/markdown-it-icons.ts
+!packages/core/src/lib/markdown-it/plugins/markdown-it-alt-frontmatter.ts
 
 # --- packages/core end ---
 

.gitignore

@@ -81,6 +81,7 @@ packages/core/src/lib/nunjucks-extensions/*.js
 packages/core/src/lib/markdown-it/index.js
 packages/core/src/lib/markdown-it/highlight/*.js
 packages/core/src/lib/markdown-it/plugins/markdown-it-icons.js
+packages/core/src/lib/markdown-it/plugins/markdown-it-alt-frontmatter.js
 packages/core/src/lib/markdown-it/utils/*.js
 packages/core/src/Page/*.js
 packages/core/src/plugins/**/*.js

docs/_markbind/boilerplates/codeHorizontal.md

@@ -0,0 +1,28 @@
+<!-- This boilerplate shows MarkBind code block side by side -->
+<!-- Supports 5 variables. -->
+<!-- `highlightStyle` (optional) - Defines the syntax coloring for the code block-->
+<!-- `headingLeft` - Heading of the left code block -->
+<!-- `headingRight` - Heading of the right code block -->
+<!-- `codeLeft` - The MarkBind code content in this variable will appear in a code block on LHS -->
+<!-- `codeRight` - The MarkBind code content in this variable will appear in a code block on RHS -->
+
+<table style="width: 100%;">
+<tr>
+<th style="width: 45%; padding-right: 5%">{{ headingLeft }}</th>
+<th style="width: 45%; padding-left: 5%;">{{ headingRight }}</th>
+</tr>
+<tr>
+<td style="padding-right: 5%">
+
+```{{ highlightStyle | safe }}
+{{ codeLeft | safe | trim }}
+```
+</td>
+<td style="padding-left: 5%;">
+
+```{{ highlightStyle | safe }}
+{{ codeRight | safe | trim }}
+```
+</td>
+</tr>
+</table>

docs/userGuide/syntax/frontmatter.md

@@ -1,21 +1,49 @@
 ## Frontmatter
 
-**You can use a _frontmatter_ section to specify page properties such as the title and keywords of the page.** To specify frontmatter for a page, insert a `<frontmatter>` tag in the following format at the beginning of the page.
-
-```html
+**You can use a _frontmatter_ section to specify page properties such as the title and keywords of the page.** 
+To specify frontmatter for a page, insert a `<frontmatter>` tag in the following format at the beginning of the page.<br>
+You can use YAML-style frontmatter syntax `---` as well.
+<div class="indented">
+<include src="codeHorizontal.md" boilerplate >
+<variable name="highlightStyle">html</variable>
+<variable name="headingLeft">Frontmatter</variable>
+<variable name="headingRight">YAML-style Frontmatter Syntax</variable>
+<variable name="codeLeft">
 <frontmatter>
   property1: value1
   property2: value2
 </frontmatter>
-```
+</variable>
+<variable name="codeRight">
+---
+  property1: value1
+  property2: value2
+---
+</variable>
+</include>
+</div>
+
+
+
 <div class="indented">
 
 {{ icon_example }} Here, we set the page `title` attribute as `Binary Search Tree`.
-```html
+
+<include src="codeHorizontal.md" boilerplate >
+<variable name="highlightStyle">html</variable>
+<variable name="headingLeft">Frontmatter</variable>
+<variable name="headingRight">YAML-style Frontmatter Syntax</variable>
+<variable name="codeLeft">
 <frontmatter>
   title: Binary Search Tree
 </frontmatter>
-```
+</variable>
+<variable name="codeRight">
+---
+  title: Binary Search Tree
+---
+</variable>
+</include>
 </div>
 
 <box type="warning" seamless>

packages/cli/test/functional/test_site/expected/siteData.json

@@ -110,6 +110,36 @@
       "headings": {},
       "headingKeywords": {}
     },
+    {
+      "src": "testEmptyAltFrontMatter.md",
+      "title": "Hello World",
+      "headings": {},
+      "headingKeywords": {}
+    },
+    {
+      "src": "testLayoutsOverrideWithAltFrontmatter.md",
+      "title": "Hello World",
+      "headings": {},
+      "headingKeywords": {}
+    },
+    {
+      "src": "testAltFrontMatterInvalidKeyValue.md",
+      "title": "Hello World",
+      "headings": {},
+      "headingKeywords": {}
+    },
+    {
+      "src": "testSingleAltFrontMatter.md",
+      "title": "Hello World",
+      "headings": {},
+      "headingKeywords": {}
+    },
+    {
+      "src": "testAltFrontMatterParsing.md",
+      "title": "new title",
+      "headings": {},
+      "headingKeywords": {}
+    },
     {
       "src": "testExternalScripts.md",
       "title": "Hello World",
@@ -122,6 +152,12 @@
       "headings": {},
       "headingKeywords": {}
     },
+    {
+      "src": "testLayoutsWithAltFrontMatter.md",
+      "title": "Test nunjucks path resolving",
+      "headings": {},
+      "headingKeywords": {}
+    },
     {
       "src": "testNunjucksPathResolving.md",
       "title": "Hello World",