diff --git a/.changeset/smart-bugs-move.md b/.changeset/smart-bugs-move.md new file mode 100644 index 00000000..4af5328f --- /dev/null +++ b/.changeset/smart-bugs-move.md @@ -0,0 +1,10 @@ +--- +'@jpmorganchase/mosaic-components': patch +'@jpmorganchase/mosaic-site': patch +'@jpmorganchase/mosaic-site-components': patch +'@jpmorganchase/mosaic-site-middleware': patch +'@jpmorganchase/mosaic-site-preset-styles': patch +'@jpmorganchase/mosaic-theme': patch +--- + +Use Shiki for codeblock syntax highlighting diff --git a/docs/author/aliases.mdx b/docs/author/aliases.mdx index a937c594..1addf1ca 100644 --- a/docs/author/aliases.mdx +++ b/docs/author/aliases.mdx @@ -24,7 +24,7 @@ another section of the site where it may be relevant. This is the frontmatter for this page: -``` +```yaml --- title: Aliases layout: DetailTechnical diff --git a/docs/author/frontmatter.mdx b/docs/author/frontmatter.mdx index be8b98b9..656d1315 100644 --- a/docs/author/frontmatter.mdx +++ b/docs/author/frontmatter.mdx @@ -9,11 +9,11 @@ sidebar: [Frontmatter](https://mdxjs.com/guides/frontmatter/), also known as page metadata, is a powerful feature that allows easy configuration of a page and Mosaic site components e.g. the sidebar. -Frontmatter is written in yaml syntax and is found at the top of a page between 2 sets of 3 dashes: `---`. +Frontmatter is written in yaml syntax and is found at the top of a page between 2 sets of 3 dashes: `---{:yaml}`. ## Example page yaml -``` +```mdx --- title: Page Title layout: DetailTechnical @@ -21,11 +21,9 @@ sidebar: priority: 4 --- -// frontmatter is closed and now comes page content # Page Title This is some content. - ``` ## Accessing Frontmatter in content @@ -34,7 +32,7 @@ With the syntax below it is possible to directly reference frontmatter inside co You can think of `meta` as a JSON object that holds all the frontmatter of a page and when the Mosaic `RefPlugin` encounters the curly brackets then the value in the frontmatter will be resolved. -``` +```mdx {meta.title} {meta.description} {meta.someValueYouHaveAddedToTheFrontmatter} @@ -42,7 +40,7 @@ You can think of `meta` as a JSON object that holds all the frontmatter of a pag This is very common to see Mosaic pages that reference the title as shown below: -``` +```mdx /title/ --- title: Title --- @@ -61,10 +59,10 @@ Mosaic plugins can also embed their output into page frontmatter in 2 different A plugin can add a property to a page simply by extending the page object it receives in the `$afterSource` lifecycle event: -``` +```js {3} async function $afterSource(pages) { for (const page of pages) { - page.newProperty = 'Hello' + page.newProperty = 'Hello'; } return pages; } @@ -83,28 +81,28 @@ The purpose of this plugin is to crawl the page hierarchy to find the closest `s - If a property called `sharedConfig` in the page frontmatter is found a new file named shared-config.json is created - Adds a ref named `config` to the shared config file that points to the shared config of the index page -``` +```js import type { Page, Plugin as PluginType } from '@jpmorganchase/mosaic-types'; import { flatten } from 'lodash-es'; import path from 'path'; function createFileGlob(url, pageExtensions) { -if (pageExtensions.length === 1) { -return `${url}${pageExtensions[0]}`; -} -return `${url}{${pageExtensions.join(',')}}`; + if (pageExtensions.length === 1) { + return `${url}${pageExtensions[0]}`; + } + return `${url}{${pageExtensions.join(',')}}`; } interface SharedConfigPluginPage extends Page { -sharedConfig?: string; + sharedConfig?: string; } interface SharedConfigPluginOptions { -filename: string; + filename: string; } const SharedConfigPlugin: PluginType = { -async $beforeSend( + async $beforeSend( mutableFilesystem, { config, serialiser, ignorePages, pageExtensions }, options @@ -113,9 +111,9 @@ async $beforeSend( createFileGlob('**/index', pageExtensions), { ignore: [options.filename, ...flatten(ignorePages.map(ignore => [ignore, `**/${ignore}`]))], -cwd: '/' -} -); + cwd: '/' + } + ); for (const pagePath of pagePaths) { const sharedConfigFile = path.join(path.dirname(String(pagePath)), options.filename); @@ -132,10 +130,8 @@ cwd: '/' config.setAliases(path.join(baseDir, options.filename), [sharedConfigFile]); } } - -} + } }; export default SharedConfigPlugin; - ``` diff --git a/docs/author/refs.mdx b/docs/author/refs.mdx index d8ccbcd2..6d7acafc 100644 --- a/docs/author/refs.mdx +++ b/docs/author/refs.mdx @@ -33,7 +33,7 @@ It's probably better explained with examples... It is possible to reference a page's own frontmatter to avoid duplication: -``` +```yaml --- title: Refs layout: DetailTechnical @@ -41,13 +41,13 @@ sidebar: priority: 3 data: sidebarPriority: - $ref: '#/sidebar/priority' + $ref: '#/sidebar/priority' --- ``` This page you are reading right now has a sidebar priority of **{meta.data.sidebarPriority}**. -The value of `data.sidebarPriority` comes from `sidebar.priority` in the frontmatter. +The value of `data.sidebarPriority{:json}` comes from `sidebar.priority{:json}` in the frontmatter. Notice that because we don't specify a path before the `#` in the ref we need to put the whole @@ -60,7 +60,7 @@ It is possible to reference frontmatter of other pages. Again this helps avoid d The [index](./index) page of the Author section has this frontmatter: -``` +```yaml --- title: Author layout: DetailTechnical @@ -73,7 +73,7 @@ data: This page you are currently looking at is referencing the `data.exampleRefData` in it's frontmatter like this: -``` +```yaml --- title: Refs layout: DetailTechnical @@ -87,7 +87,7 @@ data: I can then use the data and embed it in this page like this: -``` +```mdx {meta.data.authorRef} ``` @@ -110,7 +110,7 @@ You have had a taste of the power and want to know more? OK, lets reference and The Modes [index](../configure/modes/index) page has this frontmatter: -``` +```yaml --- title: Modes of operation layout: DetailTechnical @@ -126,7 +126,7 @@ The ref here is essentially using a wildcard (the \*) to grab the `mode` propert We can reference that data just like before: -``` +```yaml --- title: Refs layout: DetailTechnical @@ -142,7 +142,7 @@ data: With the code below, the referenced data can be embedded in a page. -``` +```jsx