diff --git a/netlify.toml b/netlify.toml
index b880a3e6..fcaaf3eb 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -16,4 +16,9 @@
[[redirects]]
status = 301
from = "/docs/plugins/typescript/"
- to = "/docs/resources/typescript/"
\ No newline at end of file
+ to = "/docs/resources/typescript/"
+
+[[redirects]]
+ status = 301
+ from = "/docs/resources/markdown/"
+ to = "/docs/plugins/markdown/"
\ No newline at end of file
diff --git a/src/pages/docs/content-as-data/active-frontmatter.md b/src/pages/docs/content-as-data/active-frontmatter.md
index 7211323d..73f7da35 100644
--- a/src/pages/docs/content-as-data/active-frontmatter.md
+++ b/src/pages/docs/content-as-data/active-frontmatter.md
@@ -1,12 +1,12 @@
---
layout: docs
-order: 4
+order: 5
tocHeading: 2
---
# Active Frontmatter
-Active Frontmatter enables the ability to apply static substitutions in your pages and layouts based on the frontmatter content of your pages, and inspired by JavaScript [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) syntax.
+Active Frontmatter enables the ability to apply static substitutions in your pages and layouts based on the [frontmatter](/docs/content-as-data/frontmatter/) content of your pages, and inspired by JavaScript [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) syntax.
Really useful for passing page content or collections as attributes to a custom element.
diff --git a/src/pages/docs/content-as-data/collections.md b/src/pages/docs/content-as-data/collections.md
index cfecbc87..832f9607 100644
--- a/src/pages/docs/content-as-data/collections.md
+++ b/src/pages/docs/content-as-data/collections.md
@@ -6,7 +6,7 @@ tocHeading: 2
# Collections
-Collections are a feature in Greenwood by which you can use [frontmatter](/docs/resources/markdown/#frontmatter) to group pages that can then be referenced through [JavaScript](/docs/content-as-data/data-client/) or [active frontmatter](/docs/content-as-data/active-frontmatter/). This can be a useful way to group pages for things like navigation menus based on the content in your pages directory.
+Collections are a feature in Greenwood by which you can use [frontmatter](/docs/content-as-data/frontmatter/) to group pages that can then be referenced through [JavaScript](/docs/content-as-data/data-client/) or [active frontmatter](/docs/content-as-data/active-frontmatter/). This can be a useful way to group pages for things like navigation menus based on the content in your pages directory.
See our [reference docs on Greenwood's available types](/docs/reference/appendix/#types) for more information on authoring with TypeScript.
diff --git a/src/pages/docs/content-as-data/frontmatter.md b/src/pages/docs/content-as-data/frontmatter.md
new file mode 100644
index 00000000..98bca687
--- /dev/null
+++ b/src/pages/docs/content-as-data/frontmatter.md
@@ -0,0 +1,143 @@
+---
+layout: docs
+order: 4
+tocHeading: 2
+---
+
+# Frontmatter
+
+[Frontmatter](https://www.npmjs.com/package/front-matter) is a [YAML](https://yaml.org/) block at the top of a file that gives you the ability to define variables that are made available to Greenwood's [build process and then your HTML](/docs/content-as-data/). You can also use it to import additional static assets like JS and CSS files.
+
+Greenwood defines the following properties that you can use in HTML or [markdown](/docs/plugins/markdown/) out of the box:
+
+- Label
+- Title
+- Layout
+- Imports
+- Custom Data
+
+## Label
+
+By default Greenwood will aim to create a label for your page based on filename path, but you can override it if desired. This can be useful if you want to create a custom value to display for a link with custom formatting or text.
+
+
+
+
+
+ ```md
+ ---
+ label: "My Blog Post from 3/5/2020"
+ ---
+
+ # My Blog Post
+ ```
+
+
+
+
+
+## Title
+
+To set the `` for a given page, you can customize the **title** variable. Otherwise, the `<title>` will be inferred from the file name.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+ ```md
+ ---
+ title: My Blog Post
+ ---
+
+ # This is a post
+
+ The is a markdown file with the title defined in frontmatter.
+ ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+In this example, the `<title>` tag will be the value of **title**.
+
+```html
+<title>My Blog Post
+```
+
+## Layouts
+
+When creating multiple [page layouts](/docs/pages/layouts/), you can use the **layout** frontmatter key to configure Greenwood to use that layout to wrap a given page.
+
+
+
+
+
+ ```md
+ ---
+ layout: blog
+ ---
+
+ # My First Blog Post
+
+ This is my first blog post, I hope you like it!
+ ```
+
+
+
+
+
+In this example, _src/layouts/blog.html_ will be used to wrap the content of this markdown page.
+
+> **Note:** By default, Greenwood will look for and use _src/layouts/page.html_ for all pages by default.
+
+## Imports
+
+If you want to include scripts or styles on a _per **page** basis_ (typically when using markdown), you can provide filepaths and attributes using the `imports` key. This is great for one off use cases where you don't want to ship a third party lib in all your layouts, or as a demo for a particular blog post. You can also add attributes by space delimiting them after the path.
+
+
+
+
+
+ ```md
+ ---
+ imports:
+ - /components/my-component/component.js type="module" foo="bar"
+ - /components/my-component/component.css
+ ---
+
+ # My Demo Page
+ ```
+
+
+
+
+
+You will then see the following emitted for file
+
+```html
+
+
+```
+
+## Custom Data
+
+You can also define any custom frontmatter property you want and that will be made available on the `data` property of [the page object](/docs/content-as-data/pages-data/).
+
+
+
+
+
+ ```md
+ ---
+ author: Jon Doe
+ date: 04/07/2020
+ ---
+
+ # First Post
+
+ My first post
+ ```
+
+
+
+
diff --git a/src/pages/docs/content-as-data/graph-ql.md b/src/pages/docs/content-as-data/graph-ql.md
index 80d80a81..a0c7a22d 100644
--- a/src/pages/docs/content-as-data/graph-ql.md
+++ b/src/pages/docs/content-as-data/graph-ql.md
@@ -2,7 +2,7 @@
title: GraphQL
label: GraphQL
layout: docs
-order: 5
+order: 6
tocHeading: 2
---
diff --git a/src/pages/docs/content-as-data/pages-data.md b/src/pages/docs/content-as-data/pages-data.md
index 89a7aea9..61ffeada 100644
--- a/src/pages/docs/content-as-data/pages-data.md
+++ b/src/pages/docs/content-as-data/pages-data.md
@@ -54,66 +54,6 @@ This is the data you would get back:
}
```
-## Table of Contents
-
-Additionally for markdown pages, you can add a frontmatter property called `tocHeading` that will read all the HTML heading tags that match that number, and provide that as a subset of the data object. This is most useful for generating the table of contents for a page.
-
-Taking our previous example, if we were to configure this for `
` tags:
-
-
-
-
-
- ```md
- ---
- author: Project Evergreen
- published: 2024-01-01
- tocHeading: 2
- ---
-
- # First Post
-
- This is my first post.
-
- ## Overview
-
- Lorum Ipsum
-
- ## First Point
-
- Something something...
- ```
-
-
-
-
-
-We would get this additional content as data out:
-
-```json
-{
- "id": "blog-first-post",
- "title": "First Post",
- "label": "First Post",
- "route": "/blog/first-post/",
- "data": {
- "author": "Project Evergreen",
- "published": "2024-01-01",
- "tocHeading": 2,
- "tableOfContents": [
- {
- "content": "Overview",
- "slug": "overview"
- },
- {
- "content": "First Point",
- "slug": "first-point"
- }
- ]
- }
-}
-```
-
## External Content
Using our [Source plugin](/docs/reference/plugins-api/#source), just as you can get your content as data _out_ of Greenwood, so can you provide your own sources of content (as data) _to_ Greenwood. This is great for pulling content from a headless CMS, database, or anything else you can imagine!
diff --git a/src/pages/docs/pages/layouts.md b/src/pages/docs/pages/layouts.md
index acb54c80..1919f689 100644
--- a/src/pages/docs/pages/layouts.md
+++ b/src/pages/docs/pages/layouts.md
@@ -9,7 +9,7 @@ tocHeading: 2
Greenwood defines two types of layouts that can be used to wrap your pages with common HTML
- _App Layout_: The ["app shell"](https://developers.google.com/web/fundamentals/architecture/app-shell) that will wrap all pages.
-- _Page Layouts_: Layouts that can be re-used across multiple pages and defined using [frontmatter](/docs/resources/markdown/#frontmatter).
+- _Page Layouts_: Layouts that can be re-used across multiple pages and defined using [**frontmatter**](/docs/content-as-data/frontmatter/)
Greenwood will handle merging the `` and `` tag contents when building up your pages and layouts.
@@ -74,7 +74,7 @@ You can create more layouts and use them for pages with the following steps:
layout: blog
---
- ## My First Post
+ # My First Post
Lorum Ipsum
```
@@ -83,6 +83,29 @@ You can create more layouts and use them for pages with the following steps:
+Frontmatter is also supported for HTML files:
+
+
+
+
+
+ ```html
+ ---
+ layout: blog
+ ---
+
+
+
+
My First Post
+
Lorum Ipsum
+
+
+ ```
+
+
+
+
+
## App Layout
To customize the outer most wrapping HTML of _all_ your pages, create an _app.html_ file. This is most useful for global page elements like headers, navigation, and footers. Like a page layout, this will just be another HTML document (or JS / TS file) with a `` placeholder that can be used to position where the content from the processed page layout will appear.
diff --git a/src/pages/docs/pages/routing.md b/src/pages/docs/pages/routing.md
index a0fd461f..a389c812 100644
--- a/src/pages/docs/pages/routing.md
+++ b/src/pages/docs/pages/routing.md
@@ -10,7 +10,7 @@ Greenwood supports file-based routing, which means that filenames in the _pages/
## Static Pages
-For static content, Greenwood support HTML and [markdown](/docs/resources/markdown/) as page formats.
+For static content, Greenwood supports HTML and markdown [(with a plugin)](/docs/plugins/markdown/) as page formats.
For example, given the following folder structure:
diff --git a/src/pages/docs/pages/server-rendering.md b/src/pages/docs/pages/server-rendering.md
index 8eab6e6c..c4b290e8 100644
--- a/src/pages/docs/pages/server-rendering.md
+++ b/src/pages/docs/pages/server-rendering.md
@@ -22,12 +22,12 @@ The above would serve content in a browser at the path _/users/_.
## Usage
-In your page file, Greenwood supports the following functions that you can `export` for providing server rendered content and [frontmatter](/docs/resources/markdown/) to produce the `` content for your page.
+In your page file, Greenwood supports the following functions that you can `export` for providing server rendered content and frontmatter assist in producing the content for your pages.
- **default** (recommended): Use the custom elements API to render out your page content, aka **Web (Server) Components**. This rendering is only done server-side (and thus needs to be SSR compatible). To have client side imports, use the imports field in `getFrontmatter` or add them as `
-
-```
-
-### Layouts
+Then if you add [one of the supported language](https://lucidar.me/en/web-dev/list-of-supported-languages-by-prism/) after the fencing **prismjs** will add syntax highlighting to your code fences.
-When creating multiple [page layouts](/docs/pages/layouts/), you can use the **layout** frontmatter key to configure Greenwood to use that layout to wrap a given page.
+Write the following in your markdown
- ```md
- ---
- layout: blog
- ---
-
- # My First Blog Post
+ ````md
+ ```js
+ const hello = "world";
- This is my first blog post, I hope you like it!
+ console.log(hello);
```
+ ````
-In this example, _src/layouts/blog.html_ will be used to wrap the content of this markdown page.
+To get this result:
-> **Note:** By default, Greenwood will look for and use _src/layouts/page.html_ for all pages by default.
+```js
+const hello = "world";
+
+console.log(hello);
+```
-### Custom Data
+## Table of Contents
-You can also define any custom frontmatter property you want and that will be made available on the `data` property of [the page object](/docs/content-as-data/pages-data/).
+This plugin supports the addition of a [frontmatter](/docs/content-as-data/frontmatter/) property called `tocHeading` that will read all the HTML heading tags that match that number in your markdown, and provide that as a subset of the data object in your [pages data schema](/docs/content-as-data/pages-data/#schema). This is most useful for generating the table of contents for a page.
+
+For example:
-
+
```md
---
- author: Jon Doe
- date: 04/07/2020'
+ author: Project Evergreen
+ published: 2024-01-01
+ tocHeading: 2
---
# First Post
- My first post
+ This is my first post.
+
+ ## Overview
+
+ Lorum Ipsum
+
+ ## First Point
+
+ Something something...
```
+We would get this additional content as data:
+
+```json
+{
+ "id": "blog-first-post",
+ "title": "First Post",
+ "label": "First Post",
+ "route": "/blog/first-post/",
+ "data": {
+ "author": "Project Evergreen",
+ "published": "2024-01-01",
+ "tocHeading": 2,
+ "tableOfContents": [
+ {
+ "content": "Overview",
+ "slug": "overview"
+ },
+ {
+ "content": "First Point",
+ "slug": "first-point"
+ }
+ ]
+ }
+}
+```
+
## Active Frontmatter
With [`activeContent`](/docs/reference/configuration/#active-content) enabled, any of these properties would be available in your HTML or markdown through Greenwood's [content as data features](/docs/content-as-data/).
@@ -246,7 +286,7 @@ With [`activeContent`](/docs/reference/configuration/#active-content) enabled, a
author: Project Evergreen
---
- ## My Post
+ # My Post
Authored By: ${globalThis.page.data.author}
```
diff --git a/src/pages/docs/plugins/postcss.md b/src/pages/docs/plugins/postcss.md
index 8bce1d35..f87c257f 100644
--- a/src/pages/docs/plugins/postcss.md
+++ b/src/pages/docs/plugins/postcss.md
@@ -2,7 +2,7 @@
title: PostCSS
label: PostCSS
layout: docs
-order: 4
+order: 5
tocHeading: 2
---
diff --git a/src/pages/docs/plugins/raw.md b/src/pages/docs/plugins/raw.md
index 007b35a9..dcfa2659 100644
--- a/src/pages/docs/plugins/raw.md
+++ b/src/pages/docs/plugins/raw.md
@@ -1,6 +1,6 @@
---
layout: docs
-order: 3
+order: 4
tocHeading: 2
---
diff --git a/src/pages/docs/reference/configuration.md b/src/pages/docs/reference/configuration.md
index 7fefb4ca..8761707e 100644
--- a/src/pages/docs/reference/configuration.md
+++ b/src/pages/docs/reference/configuration.md
@@ -23,9 +23,6 @@ export default {
},
isolation: false,
layoutsDirectory: "layouts", // e.g. ./src/layouts
- markdown: {
- plugins: [],
- },
optimization: "default",
pagesDirectory: "pages", // e.g. ./src/pages
plugins: [],
@@ -207,55 +204,6 @@ By default the directory Greenwood will use to look for your layouts is in _layo
-## Markdown
-
-You can install [**remark**](https://remark.js.org/) or [**rehype**](https://github.com/rehypejs/rehype) compatible plugins to extend Greenwood's markdown rendering and transformation capabilities by passing them as an array to the `markdown` setting.
-
-After installing the package, pass the plugin name as a string:
-
-
-
-
-
- ```js
- export default {
- markdown: {
- plugins: ["rehype-slug", "remark-gfm"],
- },
- };
- ```
-
-
-
-
-
-If you need to pass options to a markdown plugin, you can use object syntax with the plugin name and the options it takes.
-
-
-
-
-
- ```js
- export default {
- markdown: {
- plugins: [
- "rehype-slug",
- "remark-gfm",
- {
- name: "rehype-autolink-headings",
- options: {
- behavior: "append"
- },
- },
- ],
- },
- };
- ```
-
-
-
-
-
## Optimization
Greenwood provides a number of different ways to send hints to Greenwood as to how JavaScript and CSS tags in your HTML should get loaded by the browser. Greenwood supplements, and builds up on top of existing [resource "hints" like `preload` and `prefetch`](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content).
diff --git a/src/pages/docs/resources/index.md b/src/pages/docs/resources/index.md
index 4697e0b5..b49aff11 100644
--- a/src/pages/docs/resources/index.md
+++ b/src/pages/docs/resources/index.md
@@ -12,4 +12,4 @@ In this section we'll cover common web formats and languages supported by Greenw
- [JavaScript](/docs/resources/scripts/)
- [CSS](/docs/resources/styles/)
- [Assets](/docs/resources/assets/)
-- [Markdown](/docs/resources/markdown/)
+- [TypeScript](/docs/resources/typescript/)
diff --git a/src/pages/guides/getting-started/walkthrough.md b/src/pages/guides/getting-started/walkthrough.md
index 050715df..d87d83f2 100644
--- a/src/pages/guides/getting-started/walkthrough.md
+++ b/src/pages/guides/getting-started/walkthrough.md
@@ -78,7 +78,48 @@ Our home page will be simple landing page with links to our blog post pages:
-For the blog post pages, let's create a folder called _blog/_ in our pages directory and then create two markdown files called _first-post.md_ and _second-post.md_:
+For the blog post pages, we're going to use Greenwood's [markdown plugin](/docs/plugins/markdown/) for authoring these pages.
+
+First, let's install the plugin:
+
+
+
+
+ ```shell
+ npm i -D @greenwood/plugin-markdown
+ ```
+
+ ```shell
+ yarn add @greenwood/plugin-markdown --dev
+ ```
+
+ ```shell
+ pnpm add -D @greenwood/plugin-markdown
+ ```
+
+
+
+
+
+Then create a _greenwood.config.js_ file and import the plugin:
+
+
+
+
+
+ ```js
+ import { greenwoodPluginMarkdown } from "@greenwood/plugin-markdown";
+
+ export default {
+ plugins: [greenwoodPluginMarkdown()],
+ };
+ ```
+
+
+
+
+
+Now we can create a folder called _blog/_ in our pages directory and then create two markdown files called _first-post.md_ and _second-post.md_:
diff --git a/src/pages/guides/tutorials/theme-packs.md b/src/pages/guides/tutorials/theme-packs.md
index 361b4f93..09244e9e 100644
--- a/src/pages/guides/tutorials/theme-packs.md
+++ b/src/pages/guides/tutorials/theme-packs.md
@@ -332,7 +332,7 @@ For users, they would just need to do the following:
Success! 🥳
-> Don't forget, user's can also [include additional CSS / JS files in their frontmatter](/docs/resources/markdown/#frontmatter), to further extend, customize, and override your layouts!
+> Don't forget, user's can also [include additional CSS / JS files in their frontmatter](/docs/content-as-data/frontmatter/#imports), to further extend, customize, and override your layouts!
## FAQ