324 replace prism js with shiki

.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

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

docs/author/frontmatter.mdx

@@ -9,23 +9,21 @@ 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
 sidebar:
   priority: 4
 ---
 
-// frontmatter is closed and now comes page content
 # Page Title
 
 This is some content.
-
 ```
 
 ## Accessing Frontmatter in content
@@ -34,15 +32,15 @@ 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}
 ```
 
 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<SharedConfigPluginPage, SharedConfigPluginOptions> = {
-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;
-
 ```

docs/author/refs.mdx

@@ -33,21 +33,21 @@ 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
 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.
 
 <Callout>
   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
 <ul>
   {meta.data.modes.map(mode => (
     <li key={mode}>{mode}</li>
@@ -164,7 +164,7 @@ You can use Mosaic components with referenced data as well. Below we are using t
   ))}
 </Tiles>
 
-```
+```jsx
 <Tiles>
   {meta.data.modes.map(mode => (
     <TileContent
@@ -190,7 +190,7 @@ Use the `config.setRef` function from the helpers provided to plugin lifecycle e
 
 For example, the following would add a property to pages named `titles`. The value is the title of all pages in the **same** directory as the current page
 
-```
+```js
   async $afterSource(pages, { config }) {
     for (const page of pages) {
       config.setRef(page.fullPath, ['titles', '$ref'], `**#/title`);
@@ -206,10 +206,10 @@ For example, the following would add a property to pages named `titles`. The val
 
 ### Existing refs
 
-To view refs that already exist you can use `config.data.refs`. For example to see all refs for a page:
+To view refs that already exist you can use `config.data.refs{:json}`. For example to see all refs for a page:
 
-```
- config.data.refs[fullPathToPage]
+```js
+config.data.refs[fullPathToPage];
 ```
 
 ### Create global refs

docs/configure/modes/active.mdx

@@ -6,30 +6,30 @@ layout: DetailTechnical
 
 # {meta.title}
 
-In `active` mode content can be _pulled_ from heterogeneous data sources and normalized via plugins, to the configured components/theme.
+In `active{:bat}` mode content can be _pulled_ from heterogeneous data sources and normalized via plugins, to the configured components/theme.
 As your content changes, the site will _re-pull_ the content and update your site in real-time.
 
 The standard generated site comes with 2 sources to demonstrate, how 'active' mode work.
 
-- a local source, which loads content from `./docs`
+- a local source, which loads content from `./docs{:bat}`
 - a remote source, which loads content from a [sample Github repository](https://github.com/jpmorganchase/mosaic/tree/main/docs)
 
 ## Configuring your content sources
 
 All content is composed together within a _namespace_.
 
 A _namespace_ is the scope for aggregated content, represented by the root path.
-e.g Our sample docs are aggregated into a _namespace_ called `mosaic` and served by the user journey `http://localhost:3000/mosaic`
+e.g Our sample docs are aggregated into a _namespace_ called `mosaic` and served by the user journey `http://localhost:3000/mosaic{:bat}`
 
-Mosaic doc sources are defined by a file called `mosaic.config.js`
+Mosaic doc sources are defined by a file called `mosaic.config.js{:bat}`
 
 Here is how that might look for a standard site.
 
 ## Pull your local content
 
-To tryout local content creation, add a file called`./docs/index.mdx`
+To tryout local content creation, add a file called `./docs/index.mdx{:bat}`
 
-The load `http://localhost:3000/local`
+The load `http://localhost:3000/local{:bat}`
 
 Each directory should contain an `index.mdx` which is the default page, when a page is loaded without a path
 
@@ -39,4 +39,4 @@ Now create other pages and subdirectories and explore how Mosaic, builds your us
 
 To tryout remote content creation, your standard site comes pre-configured to load our Mosaic sample docs.
 
-Edit the `mosaic.config.js` and change your `repoUrl` and `branch` to pull content from other repos.
+Edit the `mosaic.config.js{:bat}` and change your `repoUrl{:bat}` and `branch{:bat}` to pull content from other repos.

docs/configure/modes/index.mdx

@@ -12,15 +12,15 @@ data:
 
 Mosaic can operate in 3 different modes
 
-- `active`
-- `snapshot-file`
-- `snapshot-s3`
+- `active{:bat}`
+- `snapshot-file{:bat}`
+- `snapshot-s3{:bat}`
 
 ## Active updates
 
 In _active_ mode, content updates in real-time.
 
-_active_ mode content is pulled at configured intervals in real-time, as defined by `mosaic.config.js`.
+_active_ mode content is pulled at configured intervals in real-time, as defined by `mosaic.config.js{:bat}`.
 
 Read the [active](./active) configuration docs.
 
@@ -32,12 +32,12 @@ In a snapshot mode, the snapshot does update itself.
 
 ### File based snapshots
 
-In `snapshot-file` mode, immutable snapshots of content are loaded at startup from the local file-system.
+In `snapshot-file{:bat}` mode, immutable snapshots of content are loaded at startup from the local file-system.
 
 Read the [snapshot-file](./snapshot-file) configuration docs.
 
 ### S3 based snapshots
 
-In `snapshot-s3` mode, snapshots of content are loaded at startup from a remote S3 bucket.
+In `snapshot-s3{:bat}` mode, snapshots of content are loaded at startup from a remote S3 bucket.
 
 Read the [snapshot-s3](./snapshot-s3) configuration docs.

docs/configure/modes/snapshot-file.mdx

@@ -6,12 +6,12 @@ layout: DetailTechnical
 
 # {meta.title}
 
-In `snapshot-file` mode a local immutable snapshot can be loaded by the site. Typically, the snapshot and the site are
+In `snapshot-file{:bat}` mode a local immutable snapshot can be loaded by the site. Typically, the snapshot and the site are
 deployed together and upon startup the site can load the snapshot from the local file-system.
 
-To use `snapshot-file` mode
+To use `snapshot-file{:bat}` mode
 
-```
+```bat
 export MOSAIC_MODE="snapshot-file"
 export MOSAIC_SNAPSHOT_DIR="./snapshot/latest"
 ```
@@ -20,7 +20,7 @@ export MOSAIC_SNAPSHOT_DIR="./snapshot/latest"
 
 To generate a snapshot, run
 
-```
+```bat
 yarn gen:snapshot
 ```
 

docs/configure/modes/snapshot-s3.mdx

@@ -6,11 +6,11 @@ layout: DetailTechnical
 
 # {meta.title}
 
-In `snapshot-s3` mode a snapshot can be loaded from a pre-configured AWS S3 bucket.
+In `snapshot-s3{:bat}` mode a snapshot can be loaded from a pre-configured AWS S3 bucket.
 
-To use `snapshot-s3` mode
+To use `snapshot-s3{:bat}` mode
 
-```
+```bat
 > export MOSAIC_MODE="snapshot-s3"
 > MOSAIC_S3_BUCKET="<your S3 bucket id>"
 > MOSAIC_S3_REGION="<your S3 region>"
@@ -22,14 +22,14 @@ To use `snapshot-s3` mode
 
 To generate a snapshot, run
 
-```
+```bat
 yarn gen:snapshot
 ```
 
 ## Uploading a snapshot to S3
 
 To upload a snapshot to S3, define the required environment variables and run
 
-```
+```bat
 yarn mosaic upload -S <path to snapshot file>
 ```