From 79ad902a2f7122bda9d575c9f961771ae9ca78b9 Mon Sep 17 00:00:00 2001 From: Davie Date: Mon, 14 Aug 2023 14:00:30 +0100 Subject: [PATCH] docs: update snapshot --- packages/site/public/search-data.json | 2 +- packages/site/public/sitemap.xml | 5 + .../latest/mosaic/author/fragments.mdx | 2 +- .../latest/mosaic/configure/admin/index | 1 + .../latest/mosaic/configure/admin/index.mdx | 202 ++++++++++++++++++ .../mosaic/configure/admin/shared-config.json | 1 + .../latest/mosaic/configure/index.mdx | 8 + .../latest/mosaic/configure/layouts/index.mdx | 8 + .../configure/layouts/shared-config.json | 2 +- .../latest/mosaic/configure/modes/active.mdx | 8 + .../latest/mosaic/configure/modes/index.mdx | 8 + .../mosaic/configure/modes/shared-config.json | 2 +- .../mosaic/configure/modes/snapshot-file.mdx | 8 + .../mosaic/configure/modes/snapshot-s3.mdx | 8 + .../mosaic/configure/plugins/after-source.mdx | 8 + .../mosaic/configure/plugins/after-update.mdx | 8 + .../mosaic/configure/plugins/before-send.mdx | 8 + .../latest/mosaic/configure/plugins/index.mdx | 8 + .../configure/plugins/shared-config.json | 2 +- .../configure/plugins/should-clear-cache.mdx | 8 + .../latest/mosaic/configure/sidebar.json | 2 +- .../configure/sources/git-repo-source.mdx | 10 +- .../mosaic/configure/sources/http-source.mdx | 10 +- .../latest/mosaic/configure/sources/index.mdx | 14 +- .../configure/sources/local-folder-source.mdx | 10 +- .../mosaic/configure/sources/schedules.mdx | 10 +- .../configure/sources/shared-config.json | 2 +- .../configure/theme/custom-components.mdx | 12 +- .../mosaic/configure/theme/custom-css.mdx | 8 + .../latest/mosaic/configure/theme/index.mdx | 8 + .../mosaic/configure/theme/shared-config.json | 2 +- .../mosaic/test/aliases/shared-config.json | 2 +- .../mosaic/test/layouts/shared-config.json | 2 +- .../mosaic/test/refs/shared-config.json | 2 +- .../latest/search-data-condensed.json | 2 +- .../site/snapshots/latest/search-data.json | 2 +- packages/site/snapshots/latest/sitemap.xml | 5 + 37 files changed, 388 insertions(+), 22 deletions(-) create mode 120000 packages/site/snapshots/latest/mosaic/configure/admin/index create mode 100644 packages/site/snapshots/latest/mosaic/configure/admin/index.mdx create mode 120000 packages/site/snapshots/latest/mosaic/configure/admin/shared-config.json diff --git a/packages/site/public/search-data.json b/packages/site/public/search-data.json index 26a3b15c..2e4baf8b 100644 --- a/packages/site/public/search-data.json +++ b/packages/site/public/search-data.json @@ -1 +1 @@ -[{"title":"Mosaic","route":"/mosaic/index","content":["True to its name, Mosaic brings together several concepts—including content, design and technical infrastructure—to deliver a unified website experience that is truly greater than the sum of its individual parts.","With Mosaic, you can:","Don't move your content where it does not belong. ","Compose content from remote data sources which\n","are pulled at runtime by our content aggregator.","Visualize your content with your own theme, layouts and components or use the Mosaic Design\n","language.","Extend the existing code and add your own content source types through our simple plugin\n","architecture.","Publish your content through Server Side Rendering (SSR) or generate a snapshot of your content\n","and serve it as a Statically Generated Site (SGS).","Creating a website has never been so easy!"]},{"title":"Aliases","route":"/mosaic/author/aliases","content":["Aliases are virtual 'symlinks' of pages, allowing one page to take on one or more other routes.\n","This is not the same as copying the page, it is a primitive filesystem link which is resolved by Mosaic.","Use Cases","Aliases are great for linking to an old route if you've moved a page to a new place.\n","They can also be used to create short hand links to pages or to 'clone' a copy of a page into\n","another section of the site where it may be relevant.","Example","This is the frontmatter for this page:","---\n","title: Aliases\n","layout: DetailTechnical\n","aliases:\n"," - /mosaic/example/aliases\n","---","Try accessing this page from ","/mosaic/example/aliases"]},{"title":"Fragments","route":"/mosaic/author/fragments","content":["Fragments, also known as content fragments, are powerful tools that allow you to incorporate content from other pages into your documentation. ","By creating an MDX file and using the ","generic directives"," syntax ",", you can easily render the fragment in another file, providing modularity and reusability to your content.","Use Cases","Fragments offer various use cases, such as:","Consistent Content",": Use fragments to maintain consistent content across multiple pages. ","For instance, if you have a table or a tile that appears on multiple pages, you can create a fragment for it and include it in all relevant files. ","This ensures that any updates made to the fragment automatically reflect across the entire documentation.","Reusable Components",": Fragments enable the creation of reusable components or sections. ","You can define a complex or commonly used section once and then include it in multiple pages as needed. ","This approach saves time and effort, as you only need to update the fragment file to propagate changes throughout your documentation.","Modular Documentation",": With fragments, you can break down your documentation into smaller, manageable pieces. ","Each fragment represents a specific topic or section, allowing you to organize and structure your content more efficiently. ","This modular approach simplifies maintenance and makes it easier to navigate and update your documentation.","Usage","Firstly, enable the Fragment Plugin by adding the following to your plugins in ",".","{\n"," modulePath: '@jpmorganchase/mosaic-plugins/FragmentPlugin',\n"," options: {}\n","}","To include a fragment in your content, follow these steps:","Create an MDX file for the fragment you want to reuse. ","Remember to set the sidebar property of your fragment's frontmatter to exclude: true if you don't want the fragment to appear in the vertical navigation menu.","---\n","title: Fragment Title\n","sidebar:\n"," exclude: true\n","---","In the target file where you want to include the fragment, use the remark directive syntax ",".","Markdown Content Example","This is the contents of a fragment located at ",":","---\n","title: Content Fragment\n","sidebar:\n"," exclude: true\n","---\n","\n","#### Fragment Title\n","\n","This is an example fragment of markdown content, being pulled from `../fragments/content-fragment.mdx`.\n","The below code snippet will render the content from the content-fragment.mdx file in your target file:",":fragment{src=\"../fragments/content-fragment.mdx\"}","Example output:",":fragment","Component Example","Here is another example, where the fragment files each contain a "," component.",":fragment{src=\"../fragments/tile-a.mdx\"} :fragment{src=\"../fragments/tile-b.mdx\"}","The above code will render the content from tile-a.mdx and tile-b.mdx files, demonstrated below:",":fragment"," :fragment"]},{"title":"Frontmatter","route":"/mosaic/author/frontmatter","content":["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: ",".","Example page yaml","---\n","title: Page Title\n","layout: DetailTechnical\n","sidebar:\n"," priority: 4\n","---\n","\n","// frontmatter is closed and now comes page content\n","# Page Title\n","\n","This is some content.\n","Accessing Frontmatter in content","With the syntax below it is possible to directly reference frontmatter inside content using curly brackets and the "," object.","You can think of "," as a JSON object that holds all the frontmatter of a page and when the Mosaic "," encounters the curly brackets then the value in the frontmatter will be resolved.","{meta.title}\n","{meta.description}\n","{meta.someValueYouHaveAddedToTheFrontmatter}","This is very common to see Mosaic pages that reference the title as shown below:","---\n","title: Title\n","---\n","\n","# {meta.title}","Plugins & Frontmatter","Mosaic plugins can also embed their output into page frontmatter in 2 different ways:","a property is directly added to the page object","a JSON file is generated and referenced using a ","ref","Adding a property to the page","A plugin can add a property to a page simply by extending the page object it receives in the "," lifecycle event:","async function $afterSource(pages) {\n"," for (const page of pages) {\n"," page.newProperty = 'Hello'\n"," }\n"," return pages;\n","}","You could use this property in the page content using ","JSON File","Let's take a look at the ",".","The purpose of this plugin is to crawl the page hierarchy to find the closest "," found in any parent page's frontmatter.","Finds all index pages among the source docs","Deserialises those pages so it can read the frontmatter and content of the page","If a property called "," in the page frontmatter is found a new file named shared-config.json is created","Adds a ref named "," to the shared config file that points to the shared config of the index page","import type { Page, Plugin as PluginType } from '@jpmorganchase/mosaic-types';\n","import { flatten } from 'lodash-es';\n","import path from 'path';\n","\n","function createFileGlob(url, pageExtensions) {\n","if (pageExtensions.length === 1) {\n","return `${url}${pageExtensions[0]}`;\n","}\n","return `${url}{${pageExtensions.join(',')}}`;\n","}\n","\n","interface SharedConfigPluginPage extends Page {\n","sharedConfig?: string;\n","}\n","\n","interface SharedConfigPluginOptions {\n","filename: string;\n","}\n","\n","const SharedConfigPlugin: PluginType = {\n","async $beforeSend(\n"," mutableFilesystem,\n"," { config, serialiser, ignorePages, pageExtensions },\n"," options\n"," ) {\n"," const pagePaths = await mutableFilesystem.promises.glob(\n"," createFileGlob('**/index', pageExtensions),\n"," {\n"," ignore: [options.filename, ...flatten(ignorePages.map(ignore => [ignore, `**/${ignore}`]))],\n","cwd: '/'\n","}\n",");\n","\n"," for (const pagePath of pagePaths) {\n"," const sharedConfigFile = path.join(path.dirname(String(pagePath)), options.filename);\n","\n"," const page = await serialiser.deserialise(\n"," String(pagePath),\n"," await mutableFilesystem.promises.readFile(String(pagePath))\n"," );\n"," if (page.sharedConfig) {\n"," config.setRef(sharedConfigFile, ['config', '$ref'], `${String(pagePath)}#/sharedConfig`);\n"," await mutableFilesystem.promises.writeFile(sharedConfigFile, '{}');\n"," } else {\n"," const baseDir = path.posix.resolve(path.dirname(String(pagePath)), '..","/');\n"," config.setAliases(path.join(baseDir, options.filename), [sharedConfigFile]);\n"," }\n"," }\n","\n","}\n","};\n","\n","export default SharedConfigPlugin;\n"]},{"title":"Author","route":"/mosaic/author/index","content":["Here you will learn how to author documentation using markdown, Mosaic components and page templates"]},{"title":"Markdown Syntax","route":"/mosaic/author/markdown-syntax","content":["Out of the box, Mosaic supports documents written in ","MDX"," which allows React components to be embedded within the ","basic syntax"," outlined in the original Markdown design document.","In addition to the basic markdown syntax, the MDX processor used by Mosaic has been configured to support additional markdown syntax and features:","GitHub flavored markdown (gfm)","Frontmatter","Mosaic Standard Components","All components that comprise the "," export from "," package are available to use out of the box in your documents.","This includes components for all standard markdown syntax and additional components like "," and ",".","Referencing Frontmatter","Frontmatter values into the page using the "," object. ","See ","frontmatter"," for more information.","Configuring Supported components","TODO"]},{"title":"Page Templates","route":"/mosaic/author/page-templates","content":["Todo..."]},{"title":"Refs","route":"/mosaic/author/refs","content":["Refs are a very powerful feature of Mosaic documents that use ","JSON References"," to reference\n","a property from the page frontmatter or frontmatter of other pages.","The key concept is that of a JSON pointer which takes the form ","A","#","B"," where:","A"," is the relative path from the current schema to a target schema. ","If A is empty, the reference is to a type or property in the same schema, an in-schema reference. ","Otherwise, the reference is to a different schema, a cross-schema reference.","B"," is the complete path from the root of the schema to a type or property in the schema. ","If # in not included or B is empty, the reference is to an entire schema.","To translate this for our purposes:","A"," is the relative path to a file in the filesystem.","B"," is the path to a property in the frontmatter of the file.","It's probably better explained with examples...","Local refs (In-schema reference)","It is possible to reference a page's own frontmatter to avoid duplication:","---\n","title: Refs\n","layout: DetailTechnical\n","sidebar:\n"," priority: 3\n","data:\n"," sidebarPriority:\n"," $ref: '#/sidebar/priority'\n","---","This page you are reading right now has a sidebar priority of ",".","The value of "," comes from "," in the frontmatter.","Notice that because we don't specify a path before the "," in the ref we need to put the whole\n","value inside quotes.","Remote Refs (Cross-schema reference)","It is possible to reference frontmatter of other pages. ","Again this helps avoid duplication but the real power is using refs to build the data model. ","See ","advanced"," for more information.","The ","index"," page of the Author section has this frontmatter:","---\n","title: Author\n","layout: DetailTechnical\n","sidebar:\n"," priority: 3\n","data:\n"," exampleRefData: Hello from Author page\n","---","This page you are currently looking at is referencing the "," in it's frontmatter like this:","---\n","title: Refs\n","layout: DetailTechnical\n","sidebar:\n"," priority: 3\n","data:\n"," authorRef:\n"," $ref: ./#/data/exampleRefData\n","---","I can then use the data and embed it in this page like this:","{meta.data.authorRef}","And here it is: ","Notice that we did not need to put "," in the ref since index pages are resolved\n","automatically.","Advanced","You have had a taste of the power and want to know more? ","OK, lets reference and then list out all the mosaic modes:","The Modes ","index"," page has this frontmatter:","---\n","title: Modes of operation\n","layout: DetailTechnical\n","sidebar:\n"," priority: 4\n","data:\n"," modes:\n"," $ref: ./*#/title\n","---","The ref here is essentially using a wildcard (the *) to grab the "," property from the frontmatter of every page in the modes folder.","We can reference that data just like before:","---\n","title: Refs\n","layout: DetailTechnical\n","sidebar:\n"," priority: 3\n","data:\n"," modes:\n"," $ref: ../configure/modes#/data/modes\n","---","Output","With the code below, the referenced data can be embedded in a page.","","Output with Mosaic Components","You can use Mosaic components with referenced data as well. ","Below we are using the "," and "," components.","\n"," {meta.data.modes.map(mode => (\n"," \n"," ))}\n","","Setting Refs using Plugins","Mosaic plugins can create new refs, create new ","global"," refs and see existing refs created by the page or other plugins. ","This is achieved using a special "," property available in the plugin helpers.","Create new refs","Use the "," function from the helpers provided to plugin lifecycle events. ","You need to provide","The file/fullpath to write the ref to","The path to the ptoperty where the ref will be applied","The value of the ref, which can use wildcards","For example, the following would add a property to pages named ",". ","The value is the title of all pages in the ","same"," directory as the current page"," async $afterSource(pages, { config }) {\n"," for (const page of pages) {\n"," config.setRef(page.fullPath, ['titles', '$ref'], `**#/title`);\n"," }\n"," return pages;\n"," }","When setting the property path the last string must be "," otherwise you're not creating a ref\n","that will be resolved by the RefPlugin.","Existing refs","To view refs that already exist you can use ",". ","For example to see all refs for a page:"," config.data.refs[fullPathToPage]","Create global refs","Global refs are similar to regular refs except they do not pre-resolve. ","This means they are resolved when the referenced file is read and the global mosaic filesystem, made up of multiple sources, is used rather than the filesystem of a single source."]},{"title":"UI Components","route":"/mosaic/author/ui-components","content":["Todo..."]},{"title":"Configure","route":"/mosaic/configure/index","content":["Mosaic is a tool which retrieves, formats and combines documentation pages from any number of different external sources (such as GitHub repositories, local disks or REST endpoints), into a single filesystem for you to use in your websites."]},{"title":"Content Fragment","route":"/mosaic/fragments/content-fragment","content":["Fragment Title","This is an example fragment of markdown content, being pulled from ","."]},{"title":"Fragments","route":"/mosaic/fragments/index","content":["This folder contains example fragments that are referenced and rendered in the Fragments docs page."]},{"title":"Tile A","route":"/mosaic/fragments/tile-a","content":[]},{"title":"Tile B","route":"/mosaic/fragments/tile-b","content":[]},{"title":"Create a Site","route":"/mosaic/getting-started/create-a-site","content":["In this guide you will learn how to generate and serve a Mosaic site.","Prerequisites","To begin setting up a Mosaic site, you need to have the following software installed:","Yarn v1","Node.js v18 or higher","Step 1: Generate a Mosaic site","Run the following command in your project directory to generate a new Mosaic site:","npx @jpmorganchase/mosaic-create-site create -o my-sample-site","This command creates a new Mosaic site in the my-sample-site directory.","Next, navigate to the site directory:","cd my-sample-site","Step 2: Serve the site","The example site you have generated comes preconfigured with two ","sources",": a remote repository and a local docs folder. ","Sources are used by Mosaic to pull content from disparate locations and merge them into a single virtual filesystem that can be used by a Mosaic site.","Set up Git credentials","If you want the site to read from remote repositories, you need to set up an environment variable to store your Git credentials. ","Follow these steps:","Open a terminal or command prompt.","Replace "," and "," in the following commands with your actual Git username and personal access token.","On Unix:","export MOSAIC_DOCS_CLONE_CREDENTIALS=\":\"","On Windows:","set MOSAIC_DOCS_CLONE_CREDENTIALS=\":\"","This sets the MOSAIC_DOCS_CLONE_CREDENTIALS environment variable with your Git credentials.","Serve command","Now you can serve your Mosaic site by running the following command:","yarn serve","Access your Mosaic site from a browser using the following URLs:","To browse the content from your local source: http://localhost:3000/local","To browse the content from the Mosaic Git repo source: http://localhost:3000/mosaic","That's it! ","Your Mosaic site is now up and running.","Next Steps:","Deploy your Mosaic site to AWS or Vercel for production use.","Create more pages to expand your site's content.","Configure your own sources in the mosaic.config.mjs file to pull content from different locations.","Theme your site"]},{"title":"Getting Started","route":"/mosaic/getting-started/index","content":["Getting Started with Mosaic","Follow our step-by-step guides to quickly create and deploy your first Mosaic site."]},{"title":"Publish a site to AWS","route":"/mosaic/getting-started/publish-site-to-aws","content":["Publish a site to AWS using S3 snapshots.","Step 1: Generate a Mosaic site","If you have already created your Mosaic site, skip ahead to step 2.","> npx @jpmorganchase/mosaic-create-site -o my-sample-site\n","> cd my-sample-site","Step 2: Create a Github repository","> git init\n","> git remote add origin git@github.com:username/my-sample-site.git\n","> git add .\n","> git commit -m \"initial commit\"\n","> git push origin main","Step 3: Generate a snapshot of content","Consider a snapshot as a directory of static content previously pulled from your content sources, which does not update itself.","> yarn gen:snapshot","Step 4: Configure environment for S3","> export MOSAIC_MODE=\"snapshot-s3\"\n","> export MOSAIC_S3_BUCKET=\"\"\n","> export MOSAIC_S3_REGION=\"\"\n","> export MOSAIC_S3_ACCESS_KEY_ID=\"\"\"\n","> export MOSAIC_S3_SECRET_ACCESS_KEY=\"\"\n","> yarn mosaic upload -S ./snapshots/latest","Step 5: Setup AWS","Switch to the ","AWS Amplify"," console and deploy your app as a SSR application by following the ","AWS docs",".","Setup an S3 bucket as per the ","AWS S3 docs",".","Step 7: Configure your AWS app","Add the environment vars to the hosted app via your console","MOSAIC_MODE=\"snapshot-s3\"\n","MOSAIC_S3_BUCKET=\"\"\n","MOSAIC_S3_REGION=\"\"\n","MOSAIC_S3_ACCESS_KEY_ID=\"\"\"\n","MOSAIC_S3_SECRET_ACCESS_KEY=\"\"","Add the following build settings","version: 1\n","frontend:\n"," phases:\n"," preBuild:\n"," commands:\n"," - yarn install\n"," - env | grep -e MOSAIC >> .env.production\n"," build:\n"," commands:\n"," - yarn run build\n"," artifacts:\n"," baseDirectory: .next\n"," files:\n"," - '**/*'\n"," cache:\n"," paths:\n"," - node_modules/**/*","Ensure the Node is set to 16","Step 8: Upload your snapshot","Upload your snapshot to S3 storage.","> yarn mosaic upload -S ./snapshots/latest"]},{"title":"Publish","route":"/mosaic/publish/index","content":["To create your first Mosaic site, we have created a command line generator that scaffolds a ","standard"," site.","A ","standard"," site offers","an out the box, working site, which showcases local and remote content sources","a minimal set of files that can be configured with your own components, themes, layouts, sources and plugins","an update path that enables you to update Mosaic, independently of your own configuration","Create your first site","Install the Mosaic create site script.","> yarn global add @jpmorganchase/mosaic-create-site","Create a directory for your site and run the "," script.","> mkdir mosaic-sample-site\n","> cd mosaic-sample-site\n","> mosaic-create-site -f .","Define the environment variable, which enables us to access your remote repo.","> export MOSAIC_DOCS_CLONE_CREDENTIALS=\"\"","The "," environment variable is composed of your git username and your PAT token.\n","Follow these ","docs"," to see how to create your own PAT token.","Your site is ready to run.","> yarn serve","In your browser load ","Congratulations, you have created your first Mosaic site."]},{"title":"Publish a site to AWS","route":"/mosaic/publish/publish-site-to-aws","content":["A Mosaic site is a ","Next.Js"," app.","To publish a Next.Js App to AWS, deploy your app as a SSR application by following the ","AWS docs",".","Once the basic app has been configured, add the Mosaic specifics.","Add the environment vars to the hosted app via the Amplify console","MOSAIC_MODE=\"snapshot-s3\"\n","MOSAIC_S3_BUCKET=\"\"\n","MOSAIC_S3_REGION=\"\"\n","MOSAIC_S3_ACCESS_KEY_ID=\"\"\"\n","MOSAIC_S3_SECRET_ACCESS_KEY=\"\"","Add the following build settings","version: 1\n","frontend:\n"," phases:\n"," preBuild:\n"," commands:\n"," - yarn install\n"," - env | grep -e MOSAIC >> .env.production\n"," build:\n"," commands:\n"," - yarn run build\n"," artifacts:\n"," baseDirectory: .next\n"," files:\n"," - '**/*'\n"," cache:\n"," paths:\n"," - node_modules/**/*","Ensure the Node is set to 16"]},{"title":"Publish a site to Vercel","route":"/mosaic/publish/publish-site-to-vercel","content":["A Mosaic site is a ","Next.Js"," app.","To publish a Next.Js App to Vercel, refer to the ","Vercel docs",".","Deployment","As the ","vercel platform"," hosts static content you will need to deploy a mosaic snapshot. ","There is no option to run mosaic in ","active mode",".","1. ","Update Config File","Add the following to the mosaic config file used by your site:"," deployment: { mode: 'snapshot-file', platform: 'vercel' }","2. ","Set Environment Variables","Set 2 ","environment variables"," in the vercel dashboard.","| Variable Name | Value |\n","| ------------------- | ----------------- |\n","| MOSAIC_MODE | snapshot-file |\n","| MOSAIC_SNAPSHOT_DIR | snapshots/latest. ","|","3. ","Run Build and Deploy","The "," command used by vercel must run "," followed by ","The "," command is needed to workaround an ","output file tracing"," problem.","Example:","yarn build && yarn deploy","Output File Tracing","Output File Tracing"," is a feature of Next.js that uses static analysis\n","to determine what files are needed to deploy a production version of an application.","Due to the architecture of mosaic, snapshot files can be ignored by this process and therefore excluded from the build artifacts deployed by vercel.","If you are deploying your site to the ","vercel platform"," then the mosaic site has a "," command that will update the nextjs output trace to include the snapshot files."]},{"title":"Test","route":"/mosaic/test/index","content":["Pages for e2e testing."]},{"title":"Layouts","route":"/mosaic/configure/layouts/index","content":["Todo..."]},{"title":"Active mode","route":"/mosaic/configure/modes/active","content":["In "," mode content can be ","pulled"," from heterogeneous data sources and normalized via plugins, to the configured components/theme.\n","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 ","a remote source, which loads content from a ","sample Github repository","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.\n","e.g Our sample docs are aggregated into a ","namespace"," called "," and served by the user journey ","Mosaic doc sources are defined by a file called ","Here is how that might look for a standard site.","Pull your local content","To tryout local content creation, add a file called","The load ","Each directory should contain an "," which is the default page, when a page is loaded without a path","Now create other pages and subdirectories and explore how Mosaic, builds your user-journeys from your fileset.","Pull your remote content","To tryout remote content creation, your standard site comes pre-configured to load our Mosaic sample docs.","Edit the "," and change your "," and "," to pull content from other repos."]},{"title":"Modes of operation","route":"/mosaic/configure/modes/index","content":["Mosaic can operate in 3 different modes","Active updates","In ","active"," mode, content updates in real-time.","active"," mode content is pulled at configured intervals in real-time, as defined by ",".","Read the ","active"," configuration docs.","Static content","Consider a snapshot as a directory of static content previously pulled from your content sources, which does not update itself.","In a snapshot mode, the snapshot does update itself.","File based snapshots","In "," mode, immutable snapshots of content are loaded at startup from the local file-system.","Read the ","snapshot-file"," configuration docs.","S3 based snapshots","In "," mode, snapshots of content are loaded at startup from a remote S3 bucket.","Read the ","snapshot-s3"," configuration docs."]},{"title":"Snapshot file mode","route":"/mosaic/configure/modes/snapshot-file","content":["In "," mode a local immutable snapshot can be loaded by the site. ","Typically, the snapshot and the site are\n","deployed together and upon startup the site can load the snapshot from the local file-system.","To use "," mode","export MOSAIC_MODE=\"snapshot-file\"\n","export MOSAIC_SNAPSHOT_DIR=\"./snapshot/latest\"","Generating a snapshot","To generate a snapshot, run","yarn gen:snapshot","Commit the snapshot to your Git repo and push the site+snapshot to your Git repo, within the same branch."]},{"title":"Snapshot AWS/S3 mode","route":"/mosaic/configure/modes/snapshot-s3","content":["In "," mode a snapshot can be loaded from a pre-configured AWS S3 bucket.","To use "," mode","> export MOSAIC_MODE=\"snapshot-s3\"\n","> MOSAIC_S3_BUCKET=\"\"\n","> MOSAIC_S3_REGION=\"\"\n","> MOSAIC_S3_ACCESS_KEY_ID=\"\"\n","> MOSAIC_S3_SECRET_ACCESS_KEY=\"\"","Generating a snapshot","To generate a snapshot, run","yarn gen:snapshot","Uploading a snapshot to S3","To upload a snapshot to S3, define the required environment variables and run","yarn mosaic upload -S "]},{"title":"$afterSource","route":"/mosaic/configure/plugins/after-source","content":["The first lifecycle hook to trigger after receiving pages from a source.\n","The pages can safely be mutated and will be reflected in the final filesystem that gets generated.\n","It ","must"," return a collection of pages.","The "," lifecycle event is called with:","pages - the collection of pages emitted by the source","helpers - an object with useful methods","options - the options specified for the plugin in the mosaic config file","Helpers","The helpers provided with this lifecycle event are listed in the table below","| Property | Description |\n","| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n","| serialiser | A matching "," for serialising/deserialising pages when reading/writing to the filesystem |\n","| config | A mutable object for sharing data with other lifecycle phases of all plugins for this source (including in the main thread) in this plugin |\n","| pageExtensions | A collection of pageExtensions the source is using |\n","| ignorePages | A collection of page globs that are to be ignored |","Example - Log out all page routes","async function $afterSource(pages, { config, ignorePages, pageExtensions }) {\n"," for (const page of pages) {\n"," console.log(page.route);\n"," }\n"," return pages;\n","}"]},{"title":"afterUpdate","route":"/mosaic/configure/plugins/after-update","content":["Calls after the filesystem and symlinks have been reconstructed due to a change to the current source. ","This happens in the main thread.","Pages will ","not"," be cached when read at this stage, to allow for reading content and writing a new copy of it without the cached version taking effect. ","This method is safe to use with lazy loading, as the filesystem should return the full page when read.","Todo"]},{"title":"$beforeSend","route":"/mosaic/configure/plugins/before-send","content":["Calls after a filesystem has been built up from the source pages.\n","Plugin lifecycle method that triggers inside child processes.\n","It ","must"," return a collection of pages.","Todo"]},{"title":"Plugins","route":"/mosaic/configure/plugins/index","content":["Mosaic Plugins are lifecycle-based hooks that are called on ","every"," source at different stages. ","You will never need to invoke a lifecycle method directly as their execution is managed by a plugin runner.","Plugins enable Mosaic to have a lightweight and flexible, modular architecture by encapsulating features in a plugin","Installation","Configuration","Plugins are added to the "," collection of the mosaic config file. ","Like ","sources",", plugins have an options property that can be used to provide plugin specific configuration.","| Property | Description | Required |\n","| ----------- | --------------------------------------------------------------------------- | -------- |\n","| modulePath | The path to the installed plugin module | Yes |\n","| disabled | Exclude this plugin completely. ","Defaults to false | No |\n","| runtimeOnly | Exclude this plugin when generating a snapshot. ","Defaults to false | No |\n","| priority | The importance of this plugin. ","This highest number plugin will be run first | No |\n","| options | Collection of other configuration values | No |","Plugin lifecycle","The plugin lifecycle is triggered when a source emits content.\n","Whether the execution happens on the main thread or the source worker thread depends on which lifecycle event is called. ","There are 4 lifecycle events:","$afterSource","$beforeSend","afterUpdate","shouldClearCache","Plugin methods that trigger inside the main thread should be async and highly optimised to avoid\n","holding up the main thread.","Mosaic Plugins","Mosaic ships with many plugins, most of which are enabled when using the standard generator.","plugins: [\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/SiteMapPlugin',\n"," options: {}\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/SearchIndexPlugin',\n"," options: { maxLineLength: 240, maxLineCount: 240 }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/BreadcrumbsPlugin',\n"," options: {\n"," indexPageName: 'index.mdx'\n"," }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/LazyPagePlugin',\n"," // This plugin must be the very last to run, so it can strip off metadata and content after the other\n"," // plugins are done with them\n"," priority: -2,\n"," // Exclude this plugin in builds\n"," runTimeOnly: true,\n"," options: {\n"," cacheDir: '.tmp/.pull-docs-last-page-plugin-cache'\n"," }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/PagesWithoutFileExtPlugin',\n"," options: {}\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/SidebarPlugin',\n"," options: {\n"," filename: 'sidebar.json'\n"," }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/ReadingTimePlugin',\n"," options: {}\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/SharedConfigPlugin',\n"," options: {\n"," filename: 'shared-config.json'\n"," },\n"," priority: 3\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/TableOfContentsPlugin',\n"," options: {\n"," minRank: 1,\n"," maxRank: 3\n"," }\n"," }\n"," ]"]},{"title":"shouldClearCache","route":"/mosaic/configure/plugins/should-clear-cache","content":["This method should return a boolean that will indicate if this source should clear page caches.\n","This method calls whenever another source (not this one) has changed. ","Returning undefined, false or no value, will result in the cache to be retained","Todo"]},{"title":"Git Repo Source","route":"/mosaic/configure/sources/git-repo-source","content":["The Git Repo Source is used to pull content from a remote git repository e.g. github.","Installation","Credentials and Access tokens","To successfully clone the git repo, the source definition must include credentials that have sufficient permissions to clone the repository.","We recommend storing a ","personal access token"," in an environment variable and using the environment variable in the source definition.","This keeps credentials out of code where they may be accidentally exposed to third parties.","Example","export MOSAIC_DOCS_CLONE_CREDENTIALS=\":\",","Configuration","| Property | Description | Required |\n","| ------------------- | -------------------------------------------------------------------------------- | -------- |\n","| modulePath | The path to the installed module (@jpmorganchase/mosaic-source-git-repo) | Yes |\n","| namespace | The scope for this source. ","| Yes |\n","| disabled | When true, content from this source is not used | No |\n","| options.credentials | Collection of URLS to make requests | Yes |\n","| options.prefixDir | The root path used in the content URL | Yes |\n","| options.subfolder | The name of the folder within the cloned repo containing the docs | Yes |\n","| options.repo | The repo URL | Yes |\n","| options.branch | The branch or tag to clone | Yes |\n","| options.extensions | Collection of file extensions that the source will look for inside the subfolder | Yes |\n","| options.remote | The name of the git remote to use. ","Defaults to origin. ","| Yes |","Example Git Repo Source Definition","\n"," {\n"," modulePath: '@jpmorganchase/mosaic-source-git-repo',\n"," namespace: 'mosaic',\n"," options: {\n"," credentials: process.env.MOSAIC_DOCS_CLONE_CREDENTIALS,\n"," prefixDir: 'mosaic',\n"," subfolder: 'docs',\n"," repo: 'https://github.com/jpmorganchase/mosaic.git',\n"," branch: 'main',\n"," extensions: ['.mdx'],\n"," remote: 'origin'\n"," }\n"," }\n"]},{"title":"HTTP Source","route":"/mosaic/configure/sources/http-source","content":["The HTTP Source is used to pull content over HTTP.","Multiple endpoints can be specified and the source will combine and transform the response from each into a single collection of pages.","Installation","Configuration","| Property | Description | Required |\n","| ------------------------------------------ | ----------------------------------------------------------------------------- | -------- |\n","| modulePath | The path to the installed module (@jpmorganchase/mosaic-source-http) | Yes |\n","| namespace | The scope for this source | Yes |\n","| disabled | When true, content from this source is not used | No |\n","| options.endpoints | Collection of URLS to make requests | Yes |\n","| options.prefixDir | The root path used in the content URL | Yes |\n","| options.transformResponseToPagesModulePath | The path of the module used to transform endpoint responses into Mosaic pages | Yes |\n","| options.checkIntervalMins | Number of minutes to wait between requests. ","Defaults to 5 minutes | No |\n","| options.initialDelayMs | Number of milliseconds to wait for making initial request. ","Defaults to 1000 | No |","Example HTTP Source Definition"," {\n"," modulePath: '@jpmorganchase/mosaic-source-http',\n"," namespace: 'my-namespace',\n"," options: {\n"," prefixDir: 'docs',\n"," endpoints: [\n"," 'https://api.data.com/blah',\n"," 'https://api.data.com/hello'\n"," ],\n"," transformResponseToPagesModulePath: '@scope/transformer-package'\n"," }\n"," }"]},{"title":"Sources","route":"/mosaic/configure/sources/index","content":["Sources are what Mosaic uses to pull content from disparte locations and merge into a single virtual filesystem that can be used by a Mosaic Site.","Depending on the ","mode"," used, sources can update periodically ensuring that new content is made available automatically.","Source Definitions","Source Definitions are specified in the "," collection of a mosaic config file.","Each source uses a ","zod schema"," to validate the provided JSON to ensure that all required information for the source to pull content has been provided.","A source definition at a minimum needs to provide the module path of the source and the ","namespace"," that it will use. ","A namespace is not unique across sources though it is common that each source has a different namespace.","Lastly, the options field can be used as a bucket for configuration values needed to configure the source e.g. credentials.","Users are free to add any property as a source option but please read the ","gotchas","\n","first regarding the allowed ","values",".","Example Local Folder Source Definition"," /**\n"," * Demonstrates a local file-system source, in this case a relative path to where the\n"," * site was generated.\n"," * Access from your browser as http://localhost:3000/local\n"," */\n"," {\n"," modulePath: '@jpmorganchase/mosaic-source-local-folder',\n"," namespace: 'local', // each site has it's own namespace, think of this as your content's uid\n"," options: {\n"," rootDir: '..","/../docs', // relative path to content\n"," prefixDir: 'local', // root path used for namespace\n"," extensions: ['.mdx'] // extensions of content which should be pulled\n"," }\n"," }","Source Namespace","A Source Namespace is a scoping mechanism for Mosaic sources used to filter the content loaded by Mosaic. ","By default all sources specified in the mosaic config file are loaded.","sources: [\n"," {\n"," namespace: 'my-namespace',\n"," modulePath: '@jpmorganchase/mosaic-source-local-folder'\n"," }\n","];","The following command will ensure mosaic only loads sources with the "," scope.","yarn mosaic serve -c ''./mosaic.config.mjs' -p 8080 --scope \"local\"","Source Schedules","Source schedules define how often sources pull in content that exists remotely and if a failed source is retried. ","More information can be found ","here","Source Types","Out of the box, Mosaic provides 3 source \"types\":","Local Folder","Git Repo Source","HTTP Source","Sources must expose an observable interface so it is possible to compose sources together e.g. the Git Repo source uses the Local Folder source internally to watch the cloned folder for changes.","Watching for Updates","When running in ","active mode",", Mosaic will watch for any changes to the source content and if a change is detected, will initiate a pull of that new content.","How often to check for updates and how updates are triggered are a matter for the source to handle. ","Mosaic simply responds when a source emits new content.","Source Worker Thread","Sources are executed inside their own worker thread to ensure that the main thread is not overloaded. ","It is here that a local virtual filesystem for the source is created and where several of the ","Plugin Lifecycle"," events are triggered.","Gotchas","A service worker thread uses ","postMessage"," to communicate with the main thread and vice-versa.","This is important because it limits what values can be provided in the source definition to those that can be processed by the ","Structured Clone Algorithm","."]},{"title":"Local Folder Source","route":"/mosaic/configure/sources/local-folder-source","content":["The Local Folder Source is used to pull content from a folder located on the same machine as Mosaic is running.","It is common to use this source when running mosaic locally.","Installation","Configuration","| Property | Description | Required |\n","| ------------------ | ------------------------------------------------------------------------------ | -------- |\n","| modulePath | The path to the installed module (@jpmorganchase/mosaic-source-local-folder) | Yes |\n","| namespace | The scope for this source | Yes |\n","| disabled | When true, content from this source is not used | No |\n","| options.rootDir | The top level directory content will be pulled from | Yes |\n","| options.prefixDir | The root path used in the content URL | Yes |\n","| options.extensions | Collection of file extensions that the source will look for inside the rootDir | Yes |","Example Local Folder Source Definition","{\n"," modulePath: '@jpmorganchase/mosaic-source-local-folder',\n"," namespace: 'local', // each site has it's own namespace, think of this as your content's uid\n"," options: {\n"," rootDir: '..","/../docs', // relative path to content\n"," prefixDir: 'local', // root path used for namespace\n"," extensions: ['.mdx'] // extensions of content which should be pulled\n"," }\n","}","This source will look for content with the \".mdx\" extension in a \"docs\" directory 2 levels up from the Mosaic working directory. ","That content is included in the \"local\" namespace and available from a route that is prefixed with \"local\".","So if you had a file, "," then you would be able to view it at ","."]},{"title":"Source Schedules","route":"/mosaic/configure/sources/schedules","content":["A source schedule defines how often a source initiates a content pull and what to do when their is a failure.","A schedule can be specified for each source in the source definition, but should a source not provide a schedule it will inherit the \"global\" schedule.","Configuration","| Property | Description | Required | Default |\n","| ----------------- | -------------------------------------------------------------------------------------- | -------- | ------- |\n","| checkIntervalMins | The length of time in minutes before triggering a content refresh | Yes | 30 mins |\n","| initialDelayMs | Startup delay for the source. ","| Yes | 1000 ms |\n","| retryEnabled | When true, failures will trigger another content pull | No | true |\n","| retryDelayMins | The interval between retries. ","This will rise exponentially on every failure. ","| No | 5 |\n","| maxRetries | Maximum number of retry attempts | No | 100 |\n","| resetOnSuccess | If true, when a source recovers and emits pages it's retry counter is returned to zero | No | true |","Global Schedule","The global schedule applies to all sources that do ","not"," provide their own schedule. ","It can be configured as a top-level property of the Mosaic config file."," schedule: {\n"," checkIntervalMins: 60,\n"," initialDelayMs: 1000,\n"," retryDelayMins: 15,\n"," maxRetries: 20\n"," }","Example","Given the config file below:"," schedule: {\n"," checkIntervalMins: 30,\n"," initialDelayMs: 1000,\n"," retryDelayMins: 5,\n"," maxRetries: 10\n"," },\n"," sources: [\n"," {\n"," modulePath: '@jpmorganchase/mosaic-source-git-repo',\n"," namespace: 'sourceA',\n"," options: {\n"," credentials: 'credentials',\n"," prefixDir: 'sourceA',\n"," subfolder: 'docs',\n"," repo: 'source-a-repo-url',\n"," branch: 'develop',\n"," extensions: ['.mdx'],\n"," remote: 'origin'\n"," }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-source-git-repo',\n"," namespace: 'sourceB',\n"," schedule:{\n"," checkIntervalMins: 60,\n"," initialDelayMs: 5000,\n"," retryDelayMins: 30,\n"," maxRetries: 50\n"," }\n"," options: {\n"," credentials: 'credentials',\n"," prefixDir: 'sourceB',\n"," subfolder: 'docs',\n"," repo: 'source-b-repo-url',\n"," branch: 'develop',\n"," extensions: ['.mdx'],\n"," remote: 'origin'\n"," }\n"," }\n"," ]","Source A will inherit the global schedule so it will:","Start after a 1 second delay","Pull content every 30 minutes","Retry a failed content pull after an initial 5 minute delay","Retry 10 times and if still unsuccessful, closing","Source B has its own schedule so it will:","Start after a 5 second delay","Pull content every 60 minutes","Retry a failed content pull after an initial 30 minute delay","Retry 50 times and if still unsuccessful, closing","Retry Strategy","The retry strategy that Mosaic employs is ","Exponential Backoff",". ","This is a common strategy for networking applications that aims to prevent retries from causing more harm than good.","For example, given a source schedule that has a 1 minute retry delay and will retry a maximum of 3 times then the total time spent retrying is 7 minutes:","1 minute delay then 1st retry","2 minute delay then 2nd retry","4 minute delay then 3rd (and final) retry","Total delay: 1 + 2 + 4 = 7 minutes","As you can see, the delay between retries is growing exponentially giving the content source more time to recover after each retry."]},{"title":"Custom Components","route":"/mosaic/configure/theme/custom-components","content":["Learn how to add your own custom components to your Mosaic site.","Create Components Folder","To start, create a "," folder under "," where you'll store your custom components.","src/\n","└── components/","In this tutorial, we will create a custom "," component.","Create Card Component","Inside the "," folder, create a "," folder, which will contain your React "," component. ","The "," folder should include "," and "," files as shown in the structure below:","├── src/\n","│ ├── components/\n","│ │ └── card/\n","│ │ ├── index.tsx\n","│ │ └── card.module.css","Card Component: index.tsx","Create your "," component within the "," file:","import React from 'react';\n","import styles from './card.module.css';\n","\n","type CardProps = {\n"," title: string;\n"," content: string;\n","};\n","\n","export const Card: React.FC = ({ title, content }) => {\n"," return (\n","
\n","

{title}

\n","

{content}

\n","
\n"," );\n","};","Card Component: card.module.css","Define your component styles in the "," file:",".card {\n"," background-color: #f5f5f5;\n"," border: 1px solid #ccc;\n"," border-radius: 4px;\n"," box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n"," padding: 16px;\n"," transition: box-shadow 0.2s ease-in-out;\n","}\n","\n",".card:hover {\n"," box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n","}\n","\n",".card h2 {\n"," color: #333;\n"," font-size: 24px;\n"," margin-bottom: 8px;\n","}\n","\n",".card p {\n"," color: #666;\n"," font-size: 16px;\n"," line-height: 1.5;\n","}","In this example, we use a CSS file, but you can use whichever styling approach you prefer, such as ","vanilla extract",".","To export your "," component, create an "," file in the "," folder:","export * from './card';","Your final folder structure should look like this:","├── src/\n","│ ├── components/\n","│ │ ├── card/\n","│ │ │ ├── index.tsx\n","│ │ │ └── card.module.css\n","│ │ ├── index.ts","Import Custom Card Component","To use your custom "," component, import it into your site's "," file. ","Add the following line to your imports:","import * as myComponents from '../components';","Replace this line:","const components = mosaicComponents;","with:","const components = {\n"," ...mosaicComponents,\n"," ...myComponents\n","};","This will add your custom components to the site, and any custom components in "," will override the corresponding ones in ",". ","The spread operator (",") merges both "," and "," objects, giving priority to "," when there is a naming conflict.","Use Your Custom Card Component","Now you're ready to use your custom "," component. ","Build and run your site, and add the "," component to an MDX file in your "," folder or another source:","","You can create and add more custom components to your Mosaic site by following the same process."]},{"title":"Custom CSS","route":"/mosaic/configure/theme/custom-css","content":["You can customize the look and feel of your Mosaic site by creating cusotm CSS files. ","Here is a step-by-step guide to help you create your own CSS theme.","Create a CSS folder","To get started, create a folder named \"css\" in the \"src\" folder of your Mosaic project.","src/\n","└── css/","Create your theme","Inside the \"css\" folder, create a folder named \"global\". ","This is where you will add your custom styles.","src/\n","└── css/\n"," ├── global/\n"," ├── index.css","Create an \"index.css\" file inside the \"css\" folder. ","This file will import your custom styles.","@import './global/';","Inside your global folder, create a separate CSS file for each part of your site that you want to customize. ","For instance, if you want to change the text styling, create a \"text.css\" file inside the \"global\" folder. ","Here is an example of how your \"text.css\" file could look like:","h1 {\n"," /* Set custom font size and weight */\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h2 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h3 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h4 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h5 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h6 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","p {\n"," font-size: /* insert value */ ;\n"," line-height: /* insert value */ ;\n","}","You can add as many CSS files as you need, depending on how much you want to customize your site.","Create an \"index.css\" file inside the \"global\" folder. ","This file will import your custom styles, in this example we are importing our \"text.css\" file.","@import './text.css';","Your \"css\" folder should now look like this:","src/\n","└── css/\n"," ├── global/\n"," │ ├── text.css\n"," │ ├── index.css\n"," ├── index.css","Import your custom CSS into your site","To apply your custom styles to your Mosaic site, open your \"_app.tsx\" file and add the following line to the bottom of your imports:","import '../css/index.css';","Congratulations! ","You have successfully applied your custom CSS styles to your site. ","This example demonstrated how to create text styles, but you can use the same approach to customize other aspects of your site as well."]},{"title":"Theming Your Site","route":"/mosaic/configure/theme/index","content":["Create a unique look and feel for your Mosaic site by customizing the CSS theme and integrating your own UI components.","Customize the CSS","Adapt various design elements of your Mosaic site to create a cohesive visual theme. ","Refer to our guide to learn more about crafting a custom CSS theme:","CSS Theme Guide","Import Custom Components","Incorporate your own UI components, to tailor the look and functionality of your content. ","This tutorial will walk you through the process of adding custom components to your site:","Adding Custom Components Tutorial"]},{"title":"Aliases Test","route":"/mosaic/test/aliases/index","content":["This page is the alias test page."]},{"title":"Detail Highlight Test Page","route":"/mosaic/test/layouts/detail-highlight","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Detail Overview Test Page","route":"/mosaic/test/layouts/detail-overview","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Detail Technical Test Page","route":"/mosaic/test/layouts/detail-technical","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Edit Layout","route":"/mosaic/test/layouts/edit","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Full Width Layout","route":"/mosaic/test/layouts/full-width","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Layouts","route":"/mosaic/test/layouts/index","content":["Pages for e2e testing of layouts."]},{"title":"Landing Layout Test Page","route":"/mosaic/test/layouts/landing","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Newsletter Test Page","route":"/mosaic/test/layouts/newsletter","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Product Discover Test Page","route":"/mosaic/test/layouts/product-discover","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Product Preview Test Page","route":"/mosaic/test/layouts/product-preview","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Refs Data","route":"/mosaic/test/refs/data","content":[]},{"title":"Refs Test","route":"/mosaic/test/refs/index","content":["The sidebar priority is ",".","The other page data is ","."]}] \ No newline at end of file +[{"title":"Mosaic","route":"/mosaic/index","content":["True to its name, Mosaic brings together several concepts—including content, design and technical infrastructure—to deliver a unified website experience that is truly greater than the sum of its individual parts.","With Mosaic, you can:","Don't move your content where it does not belong. ","Compose content from remote data sources which\n","are pulled at runtime by our content aggregator.","Visualize your content with your own theme, layouts and components or use the Mosaic Design\n","language.","Extend the existing code and add your own content source types through our simple plugin\n","architecture.","Publish your content through Server Side Rendering (SSR) or generate a snapshot of your content\n","and serve it as a Statically Generated Site (SGS).","Creating a website has never been so easy!"]},{"title":"Aliases","route":"/mosaic/author/aliases","content":["Aliases are virtual 'symlinks' of pages, allowing one page to take on one or more other routes.\n","This is not the same as copying the page, it is a primitive filesystem link which is resolved by Mosaic.","Use Cases","Aliases are great for linking to an old route if you've moved a page to a new place.\n","They can also be used to create short hand links to pages or to 'clone' a copy of a page into\n","another section of the site where it may be relevant.","Example","This is the frontmatter for this page:","---\n","title: Aliases\n","layout: DetailTechnical\n","aliases:\n"," - /mosaic/example/aliases\n","---","Try accessing this page from ","/mosaic/example/aliases"]},{"title":"Fragments","route":"/mosaic/author/fragments","content":["Fragments, also known as content fragments, are powerful tools that allow you to incorporate content from other pages into your documentation. ","By creating an MDX file and using the ","generic directives"," syntax ",", you can easily render the fragment in another file, providing modularity and reusability to your content.","Use Cases","Fragments offer various use cases, such as:","Consistent Content",": Use fragments to maintain consistent content across multiple pages. ","For instance, if you have a table or a tile that appears on multiple pages, you can create a fragment for it and include it in all relevant files. ","This ensures that any updates made to the fragment automatically reflect across the entire documentation.","Reusable Components",": Fragments enable the creation of reusable components or sections. ","You can define a complex or commonly used section once and then include it in multiple pages as needed. ","This approach saves time and effort, as you only need to update the fragment file to propagate changes throughout your documentation.","Modular Documentation",": With fragments, you can break down your documentation into smaller, manageable pieces. ","Each fragment represents a specific topic or section, allowing you to organize and structure your content more efficiently. ","This modular approach simplifies maintenance and makes it easier to navigate and update your documentation.","Usage","Firstly, enable the Fragment Plugin by adding the following to your plugins in ",".","{\n"," modulePath: '@jpmorganchase/mosaic-plugins/FragmentPlugin',\n"," options: {}\n","}","To include a fragment in your content, follow these steps:","Create an MDX file for the fragment you want to reuse. ","Remember to set the sidebar property of your fragment's frontmatter to exclude: true if you don't want the fragment to appear in the vertical navigation menu.","---\n","title: Fragment Title\n","sidebar:\n"," exclude: true\n","---","In the target file where you want to include the fragment, use the remark directive syntax ",".","Markdown Content Example","This is the contents of a fragment located at ",":","---\n","title: Content Fragment\n","sidebar:\n"," exclude: true\n","---\n","\n","#### Fragment Title\n","\n","This is an example fragment of markdown content, being pulled from `../fragments/content-fragment.mdx`.\n","The below code snippet will render the content from the content-fragment.mdx file in your target file:",":fragment{src=\"../fragments/content-fragment.mdx\"}","Example output:",":fragment","Component Example","Here is another example, where the fragment files each contain a "," component.",":fragment{src=\"../fragments/tile-a.mdx\"} :fragment{src=\"../fragments/tile-b.mdx\"}","The above code will render the content from tile-a.mdx and tile-b.mdx files, demonstrated below:",":fragment"," :fragment"]},{"title":"Frontmatter","route":"/mosaic/author/frontmatter","content":["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: ",".","Example page yaml","---\n","title: Page Title\n","layout: DetailTechnical\n","sidebar:\n"," priority: 4\n","---\n","\n","// frontmatter is closed and now comes page content\n","# Page Title\n","\n","This is some content.\n","Accessing Frontmatter in content","With the syntax below it is possible to directly reference frontmatter inside content using curly brackets and the "," object.","You can think of "," as a JSON object that holds all the frontmatter of a page and when the Mosaic "," encounters the curly brackets then the value in the frontmatter will be resolved.","{meta.title}\n","{meta.description}\n","{meta.someValueYouHaveAddedToTheFrontmatter}","This is very common to see Mosaic pages that reference the title as shown below:","---\n","title: Title\n","---\n","\n","# {meta.title}","Plugins & Frontmatter","Mosaic plugins can also embed their output into page frontmatter in 2 different ways:","a property is directly added to the page object","a JSON file is generated and referenced using a ","ref","Adding a property to the page","A plugin can add a property to a page simply by extending the page object it receives in the "," lifecycle event:","async function $afterSource(pages) {\n"," for (const page of pages) {\n"," page.newProperty = 'Hello'\n"," }\n"," return pages;\n","}","You could use this property in the page content using ","JSON File","Let's take a look at the ",".","The purpose of this plugin is to crawl the page hierarchy to find the closest "," found in any parent page's frontmatter.","Finds all index pages among the source docs","Deserialises those pages so it can read the frontmatter and content of the page","If a property called "," in the page frontmatter is found a new file named shared-config.json is created","Adds a ref named "," to the shared config file that points to the shared config of the index page","import type { Page, Plugin as PluginType } from '@jpmorganchase/mosaic-types';\n","import { flatten } from 'lodash-es';\n","import path from 'path';\n","\n","function createFileGlob(url, pageExtensions) {\n","if (pageExtensions.length === 1) {\n","return `${url}${pageExtensions[0]}`;\n","}\n","return `${url}{${pageExtensions.join(',')}}`;\n","}\n","\n","interface SharedConfigPluginPage extends Page {\n","sharedConfig?: string;\n","}\n","\n","interface SharedConfigPluginOptions {\n","filename: string;\n","}\n","\n","const SharedConfigPlugin: PluginType = {\n","async $beforeSend(\n"," mutableFilesystem,\n"," { config, serialiser, ignorePages, pageExtensions },\n"," options\n"," ) {\n"," const pagePaths = await mutableFilesystem.promises.glob(\n"," createFileGlob('**/index', pageExtensions),\n"," {\n"," ignore: [options.filename, ...flatten(ignorePages.map(ignore => [ignore, `**/${ignore}`]))],\n","cwd: '/'\n","}\n",");\n","\n"," for (const pagePath of pagePaths) {\n"," const sharedConfigFile = path.join(path.dirname(String(pagePath)), options.filename);\n","\n"," const page = await serialiser.deserialise(\n"," String(pagePath),\n"," await mutableFilesystem.promises.readFile(String(pagePath))\n"," );\n"," if (page.sharedConfig) {\n"," config.setRef(sharedConfigFile, ['config', '$ref'], `${String(pagePath)}#/sharedConfig`);\n"," await mutableFilesystem.promises.writeFile(sharedConfigFile, '{}');\n"," } else {\n"," const baseDir = path.posix.resolve(path.dirname(String(pagePath)), '..","/');\n"," config.setAliases(path.join(baseDir, options.filename), [sharedConfigFile]);\n"," }\n"," }\n","\n","}\n","};\n","\n","export default SharedConfigPlugin;\n"]},{"title":"Author","route":"/mosaic/author/index","content":["Here you will learn how to author documentation using markdown, Mosaic components and page templates"]},{"title":"Markdown Syntax","route":"/mosaic/author/markdown-syntax","content":["Out of the box, Mosaic supports documents written in ","MDX"," which allows React components to be embedded within the ","basic syntax"," outlined in the original Markdown design document.","In addition to the basic markdown syntax, the MDX processor used by Mosaic has been configured to support additional markdown syntax and features:","GitHub flavored markdown (gfm)","Frontmatter","Mosaic Standard Components","All components that comprise the "," export from "," package are available to use out of the box in your documents.","This includes components for all standard markdown syntax and additional components like "," and ",".","Referencing Frontmatter","Frontmatter values into the page using the "," object. ","See ","frontmatter"," for more information.","Configuring Supported components","TODO"]},{"title":"Page Templates","route":"/mosaic/author/page-templates","content":["Todo..."]},{"title":"Refs","route":"/mosaic/author/refs","content":["Refs are a very powerful feature of Mosaic documents that use ","JSON References"," to reference\n","a property from the page frontmatter or frontmatter of other pages.","The key concept is that of a JSON pointer which takes the form ","A","#","B"," where:","A"," is the relative path from the current schema to a target schema. ","If A is empty, the reference is to a type or property in the same schema, an in-schema reference. ","Otherwise, the reference is to a different schema, a cross-schema reference.","B"," is the complete path from the root of the schema to a type or property in the schema. ","If # in not included or B is empty, the reference is to an entire schema.","To translate this for our purposes:","A"," is the relative path to a file in the filesystem.","B"," is the path to a property in the frontmatter of the file.","It's probably better explained with examples...","Local refs (In-schema reference)","It is possible to reference a page's own frontmatter to avoid duplication:","---\n","title: Refs\n","layout: DetailTechnical\n","sidebar:\n"," priority: 3\n","data:\n"," sidebarPriority:\n"," $ref: '#/sidebar/priority'\n","---","This page you are reading right now has a sidebar priority of ",".","The value of "," comes from "," in the frontmatter.","Notice that because we don't specify a path before the "," in the ref we need to put the whole\n","value inside quotes.","Remote Refs (Cross-schema reference)","It is possible to reference frontmatter of other pages. ","Again this helps avoid duplication but the real power is using refs to build the data model. ","See ","advanced"," for more information.","The ","index"," page of the Author section has this frontmatter:","---\n","title: Author\n","layout: DetailTechnical\n","sidebar:\n"," priority: 3\n","data:\n"," exampleRefData: Hello from Author page\n","---","This page you are currently looking at is referencing the "," in it's frontmatter like this:","---\n","title: Refs\n","layout: DetailTechnical\n","sidebar:\n"," priority: 3\n","data:\n"," authorRef:\n"," $ref: ./#/data/exampleRefData\n","---","I can then use the data and embed it in this page like this:","{meta.data.authorRef}","And here it is: ","Notice that we did not need to put "," in the ref since index pages are resolved\n","automatically.","Advanced","You have had a taste of the power and want to know more? ","OK, lets reference and then list out all the mosaic modes:","The Modes ","index"," page has this frontmatter:","---\n","title: Modes of operation\n","layout: DetailTechnical\n","sidebar:\n"," priority: 4\n","data:\n"," modes:\n"," $ref: ./*#/title\n","---","The ref here is essentially using a wildcard (the *) to grab the "," property from the frontmatter of every page in the modes folder.","We can reference that data just like before:","---\n","title: Refs\n","layout: DetailTechnical\n","sidebar:\n"," priority: 3\n","data:\n"," modes:\n"," $ref: ../configure/modes#/data/modes\n","---","Output","With the code below, the referenced data can be embedded in a page.","
    \n"," {meta.data.modes.map(mode => (\n","
  • {mode}
    • \n"," ))}\n","
","Output with Mosaic Components","You can use Mosaic components with referenced data as well. ","Below we are using the "," and "," components.","\n"," {meta.data.modes.map(mode => (\n"," \n"," ))}\n","","Setting Refs using Plugins","Mosaic plugins can create new refs, create new ","global"," refs and see existing refs created by the page or other plugins. ","This is achieved using a special "," property available in the plugin helpers.","Create new refs","Use the "," function from the helpers provided to plugin lifecycle events. ","You need to provide","The file/fullpath to write the ref to","The path to the ptoperty where the ref will be applied","The value of the ref, which can use wildcards","For example, the following would add a property to pages named ",". ","The value is the title of all pages in the ","same"," directory as the current page"," async $afterSource(pages, { config }) {\n"," for (const page of pages) {\n"," config.setRef(page.fullPath, ['titles', '$ref'], `**#/title`);\n"," }\n"," return pages;\n"," }","When setting the property path the last string must be "," otherwise you're not creating a ref\n","that will be resolved by the RefPlugin.","Existing refs","To view refs that already exist you can use ",". ","For example to see all refs for a page:"," config.data.refs[fullPathToPage]","Create global refs","Global refs are similar to regular refs except they do not pre-resolve. ","This means they are resolved when the referenced file is read and the global mosaic filesystem, made up of multiple sources, is used rather than the filesystem of a single source."]},{"title":"UI Components","route":"/mosaic/author/ui-components","content":["Todo..."]},{"title":"Configure","route":"/mosaic/configure/index","content":["Mosaic is a tool which retrieves, formats and combines documentation pages from any number of different external sources (such as GitHub repositories, local disks or REST endpoints), into a single filesystem for you to use in your websites."]},{"title":"Content Fragment","route":"/mosaic/fragments/content-fragment","content":["Fragment Title","This is an example fragment of markdown content, being pulled from ","."]},{"title":"Fragments","route":"/mosaic/fragments/index","content":["This folder contains example fragments that are referenced and rendered in the Fragments docs page."]},{"title":"Tile A","route":"/mosaic/fragments/tile-a","content":[]},{"title":"Tile B","route":"/mosaic/fragments/tile-b","content":[]},{"title":"Create a Site","route":"/mosaic/getting-started/create-a-site","content":["In this guide you will learn how to generate and serve a Mosaic site.","Prerequisites","To begin setting up a Mosaic site, you need to have the following software installed:","Yarn v1","Node.js v18 or higher","Step 1: Generate a Mosaic site","Run the following command in your project directory to generate a new Mosaic site:","npx @jpmorganchase/mosaic-create-site create -o my-sample-site","This command creates a new Mosaic site in the my-sample-site directory.","Next, navigate to the site directory:","cd my-sample-site","Step 2: Serve the site","The example site you have generated comes preconfigured with two ","sources",": a remote repository and a local docs folder. ","Sources are used by Mosaic to pull content from disparate locations and merge them into a single virtual filesystem that can be used by a Mosaic site.","Set up Git credentials","If you want the site to read from remote repositories, you need to set up an environment variable to store your Git credentials. ","Follow these steps:","Open a terminal or command prompt.","Replace "," and "," in the following commands with your actual Git username and personal access token.","On Unix:","export MOSAIC_DOCS_CLONE_CREDENTIALS=\":\"","On Windows:","set MOSAIC_DOCS_CLONE_CREDENTIALS=\":\"","This sets the MOSAIC_DOCS_CLONE_CREDENTIALS environment variable with your Git credentials.","Serve command","Now you can serve your Mosaic site by running the following command:","yarn serve","Access your Mosaic site from a browser using the following URLs:","To browse the content from your local source: http://localhost:3000/local","To browse the content from the Mosaic Git repo source: http://localhost:3000/mosaic","That's it! ","Your Mosaic site is now up and running.","Next Steps:","Deploy your Mosaic site to AWS or Vercel for production use.","Create more pages to expand your site's content.","Configure your own sources in the mosaic.config.mjs file to pull content from different locations.","Theme your site"]},{"title":"Getting Started","route":"/mosaic/getting-started/index","content":["Getting Started with Mosaic","Follow our step-by-step guides to quickly create and deploy your first Mosaic site."]},{"title":"Publish a site to AWS","route":"/mosaic/getting-started/publish-site-to-aws","content":["Publish a site to AWS using S3 snapshots.","Step 1: Generate a Mosaic site","If you have already created your Mosaic site, skip ahead to step 2.","> npx @jpmorganchase/mosaic-create-site -o my-sample-site\n","> cd my-sample-site","Step 2: Create a Github repository","> git init\n","> git remote add origin git@github.com:username/my-sample-site.git\n","> git add .\n","> git commit -m \"initial commit\"\n","> git push origin main","Step 3: Generate a snapshot of content","Consider a snapshot as a directory of static content previously pulled from your content sources, which does not update itself.","> yarn gen:snapshot","Step 4: Configure environment for S3","> export MOSAIC_MODE=\"snapshot-s3\"\n","> export MOSAIC_S3_BUCKET=\"\"\n","> export MOSAIC_S3_REGION=\"\"\n","> export MOSAIC_S3_ACCESS_KEY_ID=\"\"\"\n","> export MOSAIC_S3_SECRET_ACCESS_KEY=\"\"\n","> yarn mosaic upload -S ./snapshots/latest","Step 5: Setup AWS","Switch to the ","AWS Amplify"," console and deploy your app as a SSR application by following the ","AWS docs",".","Setup an S3 bucket as per the ","AWS S3 docs",".","Step 7: Configure your AWS app","Add the environment vars to the hosted app via your console","MOSAIC_MODE=\"snapshot-s3\"\n","MOSAIC_S3_BUCKET=\"\"\n","MOSAIC_S3_REGION=\"\"\n","MOSAIC_S3_ACCESS_KEY_ID=\"\"\"\n","MOSAIC_S3_SECRET_ACCESS_KEY=\"\"","Add the following build settings","version: 1\n","frontend:\n"," phases:\n"," preBuild:\n"," commands:\n"," - yarn install\n"," - env | grep -e MOSAIC >> .env.production\n"," build:\n"," commands:\n"," - yarn run build\n"," artifacts:\n"," baseDirectory: .next\n"," files:\n"," - '**/*'\n"," cache:\n"," paths:\n"," - node_modules/**/*","Ensure the Node is set to 16","Step 8: Upload your snapshot","Upload your snapshot to S3 storage.","> yarn mosaic upload -S ./snapshots/latest"]},{"title":"Publish","route":"/mosaic/publish/index","content":["To create your first Mosaic site, we have created a command line generator that scaffolds a ","standard"," site.","A ","standard"," site offers","an out the box, working site, which showcases local and remote content sources","a minimal set of files that can be configured with your own components, themes, layouts, sources and plugins","an update path that enables you to update Mosaic, independently of your own configuration","Create your first site","Install the Mosaic create site script.","> yarn global add @jpmorganchase/mosaic-create-site","Create a directory for your site and run the "," script.","> mkdir mosaic-sample-site\n","> cd mosaic-sample-site\n","> mosaic-create-site -f .","Define the environment variable, which enables us to access your remote repo.","> export MOSAIC_DOCS_CLONE_CREDENTIALS=\"\"","The "," environment variable is composed of your git username and your PAT token.\n","Follow these ","docs"," to see how to create your own PAT token.","Your site is ready to run.","> yarn serve","In your browser load ","Congratulations, you have created your first Mosaic site."]},{"title":"Publish a site to AWS","route":"/mosaic/publish/publish-site-to-aws","content":["A Mosaic site is a ","Next.Js"," app.","To publish a Next.Js App to AWS, deploy your app as a SSR application by following the ","AWS docs",".","Once the basic app has been configured, add the Mosaic specifics.","Add the environment vars to the hosted app via the Amplify console","MOSAIC_MODE=\"snapshot-s3\"\n","MOSAIC_S3_BUCKET=\"\"\n","MOSAIC_S3_REGION=\"\"\n","MOSAIC_S3_ACCESS_KEY_ID=\"\"\"\n","MOSAIC_S3_SECRET_ACCESS_KEY=\"\"","Add the following build settings","version: 1\n","frontend:\n"," phases:\n"," preBuild:\n"," commands:\n"," - yarn install\n"," - env | grep -e MOSAIC >> .env.production\n"," build:\n"," commands:\n"," - yarn run build\n"," artifacts:\n"," baseDirectory: .next\n"," files:\n"," - '**/*'\n"," cache:\n"," paths:\n"," - node_modules/**/*","Ensure the Node is set to 16"]},{"title":"Publish a site to Vercel","route":"/mosaic/publish/publish-site-to-vercel","content":["A Mosaic site is a ","Next.Js"," app.","To publish a Next.Js App to Vercel, refer to the ","Vercel docs",".","Deployment","As the ","vercel platform"," hosts static content you will need to deploy a mosaic snapshot. ","There is no option to run mosaic in ","active mode",".","1. ","Update Config File","Add the following to the mosaic config file used by your site:"," deployment: { mode: 'snapshot-file', platform: 'vercel' }","2. ","Set Environment Variables","Set 2 ","environment variables"," in the vercel dashboard.","| Variable Name | Value |\n","| ------------------- | ----------------- |\n","| MOSAIC_MODE | snapshot-file |\n","| MOSAIC_SNAPSHOT_DIR | snapshots/latest. ","|","3. ","Run Build and Deploy","The "," command used by vercel must run "," followed by ","The "," command is needed to workaround an ","output file tracing"," problem.","Example:","yarn build && yarn deploy","Output File Tracing","Output File Tracing"," is a feature of Next.js that uses static analysis\n","to determine what files are needed to deploy a production version of an application.","Due to the architecture of mosaic, snapshot files can be ignored by this process and therefore excluded from the build artifacts deployed by vercel.","If you are deploying your site to the ","vercel platform"," then the mosaic site has a "," command that will update the nextjs output trace to include the snapshot files."]},{"title":"Test","route":"/mosaic/test/index","content":["Pages for e2e testing."]},{"title":"Admin","route":"/mosaic/configure/admin/index","content":["There are several admin urls exposed by Mosaic that provide an insight into how the filesystem has been configured and a way to remotely manage sources.","Endpoints","| Endpoint | Method | Description | Params |\n","| -------------------------- | ------ | -------------------------------------------- | ---------------------- |\n","| "," | GET | Returns the JSON from the Mosaic config file | n/a |\n","| "," | GET | Returns a collection of active sources | n/a |\n","| "," | POST | Adds the source | definition & isPreview |\n","| "," | PUT | Stops the source with the provided name | name |\n","| "," | PUT | Stops the source with the provided name | name |"]},{"title":"Layouts","route":"/mosaic/configure/layouts/index","content":["Todo..."]},{"title":"Active mode","route":"/mosaic/configure/modes/active","content":["In "," mode content can be ","pulled"," from heterogeneous data sources and normalized via plugins, to the configured components/theme.\n","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 ","a remote source, which loads content from a ","sample Github repository","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.\n","e.g Our sample docs are aggregated into a ","namespace"," called "," and served by the user journey ","Mosaic doc sources are defined by a file called ","Here is how that might look for a standard site.","Pull your local content","To tryout local content creation, add a file called","The load ","Each directory should contain an "," which is the default page, when a page is loaded without a path","Now create other pages and subdirectories and explore how Mosaic, builds your user-journeys from your fileset.","Pull your remote content","To tryout remote content creation, your standard site comes pre-configured to load our Mosaic sample docs.","Edit the "," and change your "," and "," to pull content from other repos."]},{"title":"Modes of operation","route":"/mosaic/configure/modes/index","content":["Mosaic can operate in 3 different modes","Active updates","In ","active"," mode, content updates in real-time.","active"," mode content is pulled at configured intervals in real-time, as defined by ",".","Read the ","active"," configuration docs.","Static content","Consider a snapshot as a directory of static content previously pulled from your content sources, which does not update itself.","In a snapshot mode, the snapshot does update itself.","File based snapshots","In "," mode, immutable snapshots of content are loaded at startup from the local file-system.","Read the ","snapshot-file"," configuration docs.","S3 based snapshots","In "," mode, snapshots of content are loaded at startup from a remote S3 bucket.","Read the ","snapshot-s3"," configuration docs."]},{"title":"Snapshot file mode","route":"/mosaic/configure/modes/snapshot-file","content":["In "," mode a local immutable snapshot can be loaded by the site. ","Typically, the snapshot and the site are\n","deployed together and upon startup the site can load the snapshot from the local file-system.","To use "," mode","export MOSAIC_MODE=\"snapshot-file\"\n","export MOSAIC_SNAPSHOT_DIR=\"./snapshot/latest\"","Generating a snapshot","To generate a snapshot, run","yarn gen:snapshot","Commit the snapshot to your Git repo and push the site+snapshot to your Git repo, within the same branch."]},{"title":"Snapshot AWS/S3 mode","route":"/mosaic/configure/modes/snapshot-s3","content":["In "," mode a snapshot can be loaded from a pre-configured AWS S3 bucket.","To use "," mode","> export MOSAIC_MODE=\"snapshot-s3\"\n","> MOSAIC_S3_BUCKET=\"\"\n","> MOSAIC_S3_REGION=\"\"\n","> MOSAIC_S3_ACCESS_KEY_ID=\"\"\n","> MOSAIC_S3_SECRET_ACCESS_KEY=\"\"","Generating a snapshot","To generate a snapshot, run","yarn gen:snapshot","Uploading a snapshot to S3","To upload a snapshot to S3, define the required environment variables and run","yarn mosaic upload -S "]},{"title":"$afterSource","route":"/mosaic/configure/plugins/after-source","content":["The first lifecycle hook to trigger after receiving pages from a source.\n","The pages can safely be mutated and will be reflected in the final filesystem that gets generated.\n","It ","must"," return a collection of pages.","The "," lifecycle event is called with:","pages - the collection of pages emitted by the source","helpers - an object with useful methods","options - the options specified for the plugin in the mosaic config file","Helpers","The helpers provided with this lifecycle event are listed in the table below","| Property | Description |\n","| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n","| serialiser | A matching "," for serialising/deserialising pages when reading/writing to the filesystem |\n","| config | A mutable object for sharing data with other lifecycle phases of all plugins for this source (including in the main thread) in this plugin |\n","| pageExtensions | A collection of pageExtensions the source is using |\n","| ignorePages | A collection of page globs that are to be ignored |","Example - Log out all page routes","async function $afterSource(pages, { config, ignorePages, pageExtensions }) {\n"," for (const page of pages) {\n"," console.log(page.route);\n"," }\n"," return pages;\n","}"]},{"title":"afterUpdate","route":"/mosaic/configure/plugins/after-update","content":["Calls after the filesystem and symlinks have been reconstructed due to a change to the current source. ","This happens in the main thread.","Pages will ","not"," be cached when read at this stage, to allow for reading content and writing a new copy of it without the cached version taking effect. ","This method is safe to use with lazy loading, as the filesystem should return the full page when read.","Todo"]},{"title":"$beforeSend","route":"/mosaic/configure/plugins/before-send","content":["Calls after a filesystem has been built up from the source pages.\n","Plugin lifecycle method that triggers inside child processes.\n","It ","must"," return a collection of pages.","Todo"]},{"title":"Plugins","route":"/mosaic/configure/plugins/index","content":["Mosaic Plugins are lifecycle-based hooks that are called on ","every"," source at different stages. ","You will never need to invoke a lifecycle method directly as their execution is managed by a plugin runner.","Plugins enable Mosaic to have a lightweight and flexible, modular architecture by encapsulating features in a plugin","Installation","Configuration","Plugins are added to the "," collection of the mosaic config file. ","Like ","sources",", plugins have an options property that can be used to provide plugin specific configuration.","| Property | Description | Required |\n","| ----------- | --------------------------------------------------------------------------- | -------- |\n","| modulePath | The path to the installed plugin module | Yes |\n","| disabled | Exclude this plugin completely. ","Defaults to false | No |\n","| runtimeOnly | Exclude this plugin when generating a snapshot. ","Defaults to false | No |\n","| priority | The importance of this plugin. ","This highest number plugin will be run first | No |\n","| options | Collection of other configuration values | No |","Plugin lifecycle","The plugin lifecycle is triggered when a source emits content.\n","Whether the execution happens on the main thread or the source worker thread depends on which lifecycle event is called. ","There are 4 lifecycle events:","$afterSource","$beforeSend","afterUpdate","shouldClearCache","Plugin methods that trigger inside the main thread should be async and highly optimised to avoid\n","holding up the main thread.","Mosaic Plugins","Mosaic ships with many plugins, most of which are enabled when using the standard generator.","plugins: [\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/SiteMapPlugin',\n"," options: {}\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/SearchIndexPlugin',\n"," options: { maxLineLength: 240, maxLineCount: 240 }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/BreadcrumbsPlugin',\n"," options: {\n"," indexPageName: 'index.mdx'\n"," }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/LazyPagePlugin',\n"," // This plugin must be the very last to run, so it can strip off metadata and content after the other\n"," // plugins are done with them\n"," priority: -2,\n"," // Exclude this plugin in builds\n"," runTimeOnly: true,\n"," options: {\n"," cacheDir: '.tmp/.pull-docs-last-page-plugin-cache'\n"," }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/PagesWithoutFileExtPlugin',\n"," options: {}\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/SidebarPlugin',\n"," options: {\n"," filename: 'sidebar.json'\n"," }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/ReadingTimePlugin',\n"," options: {}\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/SharedConfigPlugin',\n"," options: {\n"," filename: 'shared-config.json'\n"," },\n"," priority: 3\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/TableOfContentsPlugin',\n"," options: {\n"," minRank: 1,\n"," maxRank: 3\n"," }\n"," }\n"," ]"]},{"title":"shouldClearCache","route":"/mosaic/configure/plugins/should-clear-cache","content":["This method should return a boolean that will indicate if this source should clear page caches.\n","This method calls whenever another source (not this one) has changed. ","Returning undefined, false or no value, will result in the cache to be retained","Todo"]},{"title":"Git Repo Source","route":"/mosaic/configure/sources/git-repo-source","content":["The Git Repo Source is used to pull content from a remote git repository e.g. github.","Installation","Credentials and Access tokens","To successfully clone the git repo, the source definition must include credentials that have sufficient permissions to clone the repository.","We recommend storing a ","personal access token"," in an environment variable and using the environment variable in the source definition.","This keeps credentials out of code where they may be accidentally exposed to third parties.","Example","export MOSAIC_DOCS_CLONE_CREDENTIALS=\":\",","Configuration","| Property | Description | Required |\n","| ------------------- | -------------------------------------------------------------------------------- | -------- |\n","| modulePath | The path to the installed module (@jpmorganchase/mosaic-source-git-repo) | Yes |\n","| namespace | The scope for this source. ","| Yes |\n","| disabled | When true, content from this source is not used | No |\n","| options.credentials | Collection of URLS to make requests | Yes |\n","| options.prefixDir | The root path used in the content URL | Yes |\n","| options.subfolder | The name of the folder within the cloned repo containing the docs | Yes |\n","| options.repo | The repo URL | Yes |\n","| options.branch | The branch or tag to clone | Yes |\n","| options.extensions | Collection of file extensions that the source will look for inside the subfolder | Yes |\n","| options.remote | The name of the git remote to use. ","Defaults to origin. ","| Yes |","Example Git Repo Source Definition","\n"," {\n"," modulePath: '@jpmorganchase/mosaic-source-git-repo',\n"," namespace: 'mosaic',\n"," options: {\n"," credentials: process.env.MOSAIC_DOCS_CLONE_CREDENTIALS,\n"," prefixDir: 'mosaic',\n"," subfolder: 'docs',\n"," repo: 'https://github.com/jpmorganchase/mosaic.git',\n"," branch: 'main',\n"," extensions: ['.mdx'],\n"," remote: 'origin'\n"," }\n"," }\n"]},{"title":"HTTP Source","route":"/mosaic/configure/sources/http-source","content":["The HTTP Source is used to pull content over HTTP.","Multiple endpoints can be specified and the source will combine and transform the response from each into a single collection of pages.","Installation","Configuration","| Property | Description | Required |\n","| ------------------------------------------ | ----------------------------------------------------------------------------- | -------- |\n","| modulePath | The path to the installed module (@jpmorganchase/mosaic-source-http) | Yes |\n","| namespace | The scope for this source | Yes |\n","| disabled | When true, content from this source is not used | No |\n","| options.endpoints | Collection of URLS to make requests | Yes |\n","| options.prefixDir | The root path used in the content URL | Yes |\n","| options.transformResponseToPagesModulePath | The path of the module used to transform endpoint responses into Mosaic pages | Yes |\n","| options.checkIntervalMins | Number of minutes to wait between requests. ","Defaults to 5 minutes | No |\n","| options.initialDelayMs | Number of milliseconds to wait for making initial request. ","Defaults to 1000 | No |","Example HTTP Source Definition"," {\n"," modulePath: '@jpmorganchase/mosaic-source-http',\n"," namespace: 'my-namespace',\n"," options: {\n"," prefixDir: 'docs',\n"," endpoints: [\n"," 'https://api.data.com/blah',\n"," 'https://api.data.com/hello'\n"," ],\n"," transformResponseToPagesModulePath: '@scope/transformer-package'\n"," }\n"," }"]},{"title":"Sources","route":"/mosaic/configure/sources/index","content":["Sources are what Mosaic uses to pull content from disparte locations and merge into a single virtual filesystem that can be used by a Mosaic Site.","Depending on the ","mode"," used, sources can update periodically ensuring that new content is made available automatically.","Source Definitions","Source Definitions are specified in the "," collection of a mosaic config file.","Each source uses a ","zod schema"," to validate the provided JSON to ensure that all required information for the source to pull content has been provided.","A source definition at a minimum needs to provide the module path of the source and the ","namespace"," that it will use. ","A namespace is not unique across sources though it is common that each source has a different namespace.","Lastly, the options field can be used as a bucket for configuration values needed to configure the source e.g. credentials.","Users are free to add any property as a source option but please read the ","gotchas","\n","first regarding the allowed ","values",".","Example Local Folder Source Definition"," /**\n"," * Demonstrates a local file-system source, in this case a relative path to where the\n"," * site was generated.\n"," * Access from your browser as http://localhost:3000/local\n"," */\n"," {\n"," modulePath: '@jpmorganchase/mosaic-source-local-folder',\n"," namespace: 'local', // each site has it's own namespace, think of this as your content's uid\n"," options: {\n"," rootDir: '..","/../docs', // relative path to content\n"," prefixDir: 'local', // root path used for namespace\n"," extensions: ['.mdx'] // extensions of content which should be pulled\n"," }\n"," }","Source Namespace","A Source Namespace is a scoping mechanism for Mosaic sources used to filter the content loaded by Mosaic. ","By default all sources specified in the mosaic config file are loaded.","sources: [\n"," {\n"," namespace: 'my-namespace',\n"," modulePath: '@jpmorganchase/mosaic-source-local-folder'\n"," }\n","];","The following command will ensure mosaic only loads sources with the "," scope.","yarn mosaic serve -c ''./mosaic.config.mjs' -p 8080 --scope \"local\"","Source Schedules","Source schedules define how often sources pull in content that exists remotely and if a failed source is retried. ","More information can be found ","here","Source Types","Out of the box, Mosaic provides 3 source \"types\":","Local Folder","Git Repo Source","HTTP Source","Sources must expose an observable interface so it is possible to compose sources together e.g. the Git Repo source uses the Local Folder source internally to watch the cloned folder for changes.","Watching for Updates","When running in ","active mode",", Mosaic will watch for any changes to the source content and if a change is detected, will initiate a pull of that new content.","How often to check for updates and how updates are triggered are a matter for the source to handle. ","Mosaic simply responds when a source emits new content.","Source Worker Thread","Sources are executed inside their own worker thread to ensure that the main thread is not overloaded. ","It is here that a local virtual filesystem for the source is created and where several of the ","Plugin Lifecycle"," events are triggered.","Gotchas","A service worker thread uses ","postMessage"," to communicate with the main thread and vice-versa.","This is important because it limits what values can be provided in the source definition to those that can be processed by the ","Structured Clone Algorithm","."]},{"title":"Local Folder Source","route":"/mosaic/configure/sources/local-folder-source","content":["The Local Folder Source is used to pull content from a folder located on the same machine as Mosaic is running.","It is common to use this source when running mosaic locally.","Installation","Configuration","| Property | Description | Required |\n","| ------------------ | ------------------------------------------------------------------------------ | -------- |\n","| modulePath | The path to the installed module (@jpmorganchase/mosaic-source-local-folder) | Yes |\n","| namespace | The scope for this source | Yes |\n","| disabled | When true, content from this source is not used | No |\n","| options.rootDir | The top level directory content will be pulled from | Yes |\n","| options.prefixDir | The root path used in the content URL | Yes |\n","| options.extensions | Collection of file extensions that the source will look for inside the rootDir | Yes |","Example Local Folder Source Definition","{\n"," modulePath: '@jpmorganchase/mosaic-source-local-folder',\n"," namespace: 'local', // each site has it's own namespace, think of this as your content's uid\n"," options: {\n"," rootDir: '..","/../docs', // relative path to content\n"," prefixDir: 'local', // root path used for namespace\n"," extensions: ['.mdx'] // extensions of content which should be pulled\n"," }\n","}","This source will look for content with the \".mdx\" extension in a \"docs\" directory 2 levels up from the Mosaic working directory. ","That content is included in the \"local\" namespace and available from a route that is prefixed with \"local\".","So if you had a file, "," then you would be able to view it at ","."]},{"title":"Source Schedules","route":"/mosaic/configure/sources/schedules","content":["A source schedule defines how often a source initiates a content pull and what to do when their is a failure.","A schedule can be specified for each source in the source definition, but should a source not provide a schedule it will inherit the \"global\" schedule.","Configuration","| Property | Description | Required | Default |\n","| ----------------- | -------------------------------------------------------------------------------------- | -------- | ------- |\n","| checkIntervalMins | The length of time in minutes before triggering a content refresh | Yes | 30 mins |\n","| initialDelayMs | Startup delay for the source. ","| Yes | 1000 ms |\n","| retryEnabled | When true, failures will trigger another content pull | No | true |\n","| retryDelayMins | The interval between retries. ","This will rise exponentially on every failure. ","| No | 5 |\n","| maxRetries | Maximum number of retry attempts | No | 100 |\n","| resetOnSuccess | If true, when a source recovers and emits pages it's retry counter is returned to zero | No | true |","Global Schedule","The global schedule applies to all sources that do ","not"," provide their own schedule. ","It can be configured as a top-level property of the Mosaic config file."," schedule: {\n"," checkIntervalMins: 60,\n"," initialDelayMs: 1000,\n"," retryDelayMins: 15,\n"," maxRetries: 20\n"," }","Example","Given the config file below:"," schedule: {\n"," checkIntervalMins: 30,\n"," initialDelayMs: 1000,\n"," retryDelayMins: 5,\n"," maxRetries: 10\n"," },\n"," sources: [\n"," {\n"," modulePath: '@jpmorganchase/mosaic-source-git-repo',\n"," namespace: 'sourceA',\n"," options: {\n"," credentials: 'credentials',\n"," prefixDir: 'sourceA',\n"," subfolder: 'docs',\n"," repo: 'source-a-repo-url',\n"," branch: 'develop',\n"," extensions: ['.mdx'],\n"," remote: 'origin'\n"," }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-source-git-repo',\n"," namespace: 'sourceB',\n"," schedule:{\n"," checkIntervalMins: 60,\n"," initialDelayMs: 5000,\n"," retryDelayMins: 30,\n"," maxRetries: 50\n"," }\n"," options: {\n"," credentials: 'credentials',\n"," prefixDir: 'sourceB',\n"," subfolder: 'docs',\n"," repo: 'source-b-repo-url',\n"," branch: 'develop',\n"," extensions: ['.mdx'],\n"," remote: 'origin'\n"," }\n"," }\n"," ]","Source A will inherit the global schedule so it will:","Start after a 1 second delay","Pull content every 30 minutes","Retry a failed content pull after an initial 5 minute delay","Retry 10 times and if still unsuccessful, closing","Source B has its own schedule so it will:","Start after a 5 second delay","Pull content every 60 minutes","Retry a failed content pull after an initial 30 minute delay","Retry 50 times and if still unsuccessful, closing","Retry Strategy","The retry strategy that Mosaic employs is ","Exponential Backoff",". ","This is a common strategy for networking applications that aims to prevent retries from causing more harm than good.","For example, given a source schedule that has a 1 minute retry delay and will retry a maximum of 3 times then the total time spent retrying is 7 minutes:","1 minute delay then 1st retry","2 minute delay then 2nd retry","4 minute delay then 3rd (and final) retry","Total delay: 1 + 2 + 4 = 7 minutes","As you can see, the delay between retries is growing exponentially giving the content source more time to recover after each retry."]},{"title":"Custom Components","route":"/mosaic/configure/theme/custom-components","content":["Learn how to add your own custom components to your Mosaic site.","Create Components Folder","To start, create a "," folder under "," where you'll store your custom components.","src/\n","└── components/","In this tutorial, we will create a custom "," component.","Create Card Component","Inside the "," folder, create a "," folder, which will contain your React "," component. ","The "," folder should include "," and "," files as shown in the structure below:","├── src/\n","│ ├── components/\n","│ │ └── card/\n","│ │ ├── index.tsx\n","│ │ └── card.module.css","Card Component: index.tsx","Create your "," component within the "," file:","import React from 'react';\n","import styles from './card.module.css';\n","\n","type CardProps = {\n"," title: string;\n"," content: string;\n","};\n","\n","export const Card: React.FC = ({ title, content }) => {\n"," return (\n","
\n","

{title}

\n","

{content}

\n","
\n"," );\n","};","Card Component: card.module.css","Define your component styles in the "," file:",".card {\n"," background-color: #f5f5f5;\n"," border: 1px solid #ccc;\n"," border-radius: 4px;\n"," box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n"," padding: 16px;\n"," transition: box-shadow 0.2s ease-in-out;\n","}\n","\n",".card:hover {\n"," box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n","}\n","\n",".card h2 {\n"," color: #333;\n"," font-size: 24px;\n"," margin-bottom: 8px;\n","}\n","\n",".card p {\n"," color: #666;\n"," font-size: 16px;\n"," line-height: 1.5;\n","}","In this example, we use a CSS file, but you can use whichever styling approach you prefer, such as ","vanilla extract",".","To export your "," component, create an "," file in the "," folder:","export * from './card';","Your final folder structure should look like this:","├── src/\n","│ ├── components/\n","│ │ ├── card/\n","│ │ │ ├── index.tsx\n","│ │ │ └── card.module.css\n","│ │ ├── index.ts","Import Custom Card Component","To use your custom "," component, import it into your site's "," file. ","Add the following line to your imports:","import * as myComponents from '../components';","Replace this line:","const components = mosaicComponents;","with:","const components = {\n"," ...mosaicComponents,\n"," ...myComponents\n","};","This will add your custom components to the site, and any custom components in "," will override the corresponding ones in ",". ","The spread operator (",") merges both "," and "," objects, giving priority to "," when there is a naming conflict.","Use Your Custom Card Component","Now you're ready to use your custom "," component. ","Build and run your site, and add the "," component to an MDX file in your "," folder or another source:","","You can create and add more custom components to your Mosaic site by following the same process."]},{"title":"Custom CSS","route":"/mosaic/configure/theme/custom-css","content":["You can customize the look and feel of your Mosaic site by creating cusotm CSS files. ","Here is a step-by-step guide to help you create your own CSS theme.","Create a CSS folder","To get started, create a folder named \"css\" in the \"src\" folder of your Mosaic project.","src/\n","└── css/","Create your theme","Inside the \"css\" folder, create a folder named \"global\". ","This is where you will add your custom styles.","src/\n","└── css/\n"," ├── global/\n"," ├── index.css","Create an \"index.css\" file inside the \"css\" folder. ","This file will import your custom styles.","@import './global/';","Inside your global folder, create a separate CSS file for each part of your site that you want to customize. ","For instance, if you want to change the text styling, create a \"text.css\" file inside the \"global\" folder. ","Here is an example of how your \"text.css\" file could look like:","h1 {\n"," /* Set custom font size and weight */\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h2 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h3 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h4 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h5 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h6 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","p {\n"," font-size: /* insert value */ ;\n"," line-height: /* insert value */ ;\n","}","You can add as many CSS files as you need, depending on how much you want to customize your site.","Create an \"index.css\" file inside the \"global\" folder. ","This file will import your custom styles, in this example we are importing our \"text.css\" file.","@import './text.css';","Your \"css\" folder should now look like this:","src/\n","└── css/\n"," ├── global/\n"," │ ├── text.css\n"," │ ├── index.css\n"," ├── index.css","Import your custom CSS into your site","To apply your custom styles to your Mosaic site, open your \"_app.tsx\" file and add the following line to the bottom of your imports:","import '../css/index.css';","Congratulations! ","You have successfully applied your custom CSS styles to your site. ","This example demonstrated how to create text styles, but you can use the same approach to customize other aspects of your site as well."]},{"title":"Theming Your Site","route":"/mosaic/configure/theme/index","content":["Create a unique look and feel for your Mosaic site by customizing the CSS theme and integrating your own UI components.","Customize the CSS","Adapt various design elements of your Mosaic site to create a cohesive visual theme. ","Refer to our guide to learn more about crafting a custom CSS theme:","CSS Theme Guide","Import Custom Components","Incorporate your own UI components, to tailor the look and functionality of your content. ","This tutorial will walk you through the process of adding custom components to your site:","Adding Custom Components Tutorial"]},{"title":"Aliases Test","route":"/mosaic/test/aliases/index","content":["This page is the alias test page."]},{"title":"Detail Highlight Test Page","route":"/mosaic/test/layouts/detail-highlight","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Detail Overview Test Page","route":"/mosaic/test/layouts/detail-overview","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Detail Technical Test Page","route":"/mosaic/test/layouts/detail-technical","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Edit Layout","route":"/mosaic/test/layouts/edit","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Full Width Layout","route":"/mosaic/test/layouts/full-width","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Layouts","route":"/mosaic/test/layouts/index","content":["Pages for e2e testing of layouts."]},{"title":"Landing Layout Test Page","route":"/mosaic/test/layouts/landing","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Newsletter Test Page","route":"/mosaic/test/layouts/newsletter","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Product Discover Test Page","route":"/mosaic/test/layouts/product-discover","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Product Preview Test Page","route":"/mosaic/test/layouts/product-preview","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Refs Data","route":"/mosaic/test/refs/data","content":[]},{"title":"Refs Test","route":"/mosaic/test/refs/index","content":["The sidebar priority is ",".","The other page data is ","."]}] \ No newline at end of file diff --git a/packages/site/public/sitemap.xml b/packages/site/public/sitemap.xml index 4f9c0ebd..c289a3c5 100644 --- a/packages/site/public/sitemap.xml +++ b/packages/site/public/sitemap.xml @@ -104,6 +104,11 @@ weekly 0.5 + + https://mosaic-mosaic-dev-team.vercel.app/mosaic/configure/admin/index + weekly + 0.5 + https://mosaic-mosaic-dev-team.vercel.app/mosaic/configure/layouts/index weekly diff --git a/packages/site/snapshots/latest/mosaic/author/fragments.mdx b/packages/site/snapshots/latest/mosaic/author/fragments.mdx index 048e38ac..bd8b000e 100644 --- a/packages/site/snapshots/latest/mosaic/author/fragments.mdx +++ b/packages/site/snapshots/latest/mosaic/author/fragments.mdx @@ -3,7 +3,7 @@ title: Fragments layout: DetailTechnical sidebar: priority: 2 -lastModified: 1690208528038 +lastModified: 1691594923209 fullPath: /mosaic/author/fragments.mdx route: /mosaic/author/fragments breadcrumbs: diff --git a/packages/site/snapshots/latest/mosaic/configure/admin/index b/packages/site/snapshots/latest/mosaic/configure/admin/index new file mode 120000 index 00000000..34f13104 --- /dev/null +++ b/packages/site/snapshots/latest/mosaic/configure/admin/index @@ -0,0 +1 @@ +index.mdx \ No newline at end of file diff --git a/packages/site/snapshots/latest/mosaic/configure/admin/index.mdx b/packages/site/snapshots/latest/mosaic/configure/admin/index.mdx new file mode 100644 index 00000000..f1451d8f --- /dev/null +++ b/packages/site/snapshots/latest/mosaic/configure/admin/index.mdx @@ -0,0 +1,202 @@ +--- +title: Admin +layout: DetailTechnical +sidebar: + priority: 3 +lastModified: 1692017980531 +fullPath: /mosaic/configure/admin/index.mdx +route: /mosaic/configure/admin/index +breadcrumbs: + - label: Mosaic + path: /mosaic/index.mdx + id: /mosaic/index.mdx + - label: Configure + path: /mosaic/configure/index.mdx + id: /mosaic/configure/index.mdx + - label: Admin + path: /mosaic/configure/admin/index.mdx + id: /mosaic/configure/admin/index.mdx +readingTime: + text: 1 min read + minutes: 0.555 + time: 33300 + words: 111 +tableOfContents: + - level: 2 + id: endpoints + text: Endpoints +navigation: + prev: + title: Custom Components + route: /mosaic/configure/theme/custom-components + next: + title: Sources + route: /mosaic/configure/sources/index +sidebarData: + - id: /mosaic/configure/index + fullPath: /mosaic/configure/index.mdx + name: Configure + priority: 4 + data: + level: 2 + link: /mosaic/configure/index + childNodes: [] + - id: /mosaic/configure/modes/index + fullPath: /mosaic/configure/modes/index.mdx + name: Modes of operation + priority: 4 + data: + level: 3 + link: /mosaic/configure/modes/index + childNodes: + - id: /mosaic/configure/modes/active + fullPath: /mosaic/configure/modes/active.mdx + name: Active mode + data: + level: 3 + link: /mosaic/configure/modes/active + childNodes: [] + - id: /mosaic/configure/modes/snapshot-file + fullPath: /mosaic/configure/modes/snapshot-file.mdx + name: Snapshot file mode + data: + level: 3 + link: /mosaic/configure/modes/snapshot-file + childNodes: [] + - id: /mosaic/configure/modes/snapshot-s3 + fullPath: /mosaic/configure/modes/snapshot-s3.mdx + name: Snapshot AWS/S3 mode + data: + level: 3 + link: /mosaic/configure/modes/snapshot-s3 + childNodes: [] + - id: /mosaic/configure/theme/index + fullPath: /mosaic/configure/theme/index.mdx + name: Theming Your Site + priority: 4 + data: + level: 3 + link: /mosaic/configure/theme/index + childNodes: + - id: /mosaic/configure/theme/custom-css + fullPath: /mosaic/configure/theme/custom-css.mdx + name: Custom CSS + priority: 3 + data: + level: 3 + link: /mosaic/configure/theme/custom-css + childNodes: [] + - id: /mosaic/configure/theme/custom-components + fullPath: /mosaic/configure/theme/custom-components.mdx + name: Custom Components + priority: 2 + data: + level: 3 + link: /mosaic/configure/theme/custom-components + childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] + - id: /mosaic/configure/sources/index + fullPath: /mosaic/configure/sources/index.mdx + name: Sources + priority: 3 + data: + level: 3 + link: /mosaic/configure/sources/index + childNodes: + - id: /mosaic/configure/sources/schedules + fullPath: /mosaic/configure/sources/schedules.mdx + name: Schedules + priority: 4 + data: + level: 3 + link: /mosaic/configure/sources/schedules + childNodes: [] + - id: /mosaic/configure/sources/local-folder-source + fullPath: /mosaic/configure/sources/local-folder-source.mdx + name: Local Folder Source + priority: 3 + data: + level: 3 + link: /mosaic/configure/sources/local-folder-source + childNodes: [] + - id: /mosaic/configure/sources/git-repo-source + fullPath: /mosaic/configure/sources/git-repo-source.mdx + name: Git Repo Source + priority: 2 + data: + level: 3 + link: /mosaic/configure/sources/git-repo-source + childNodes: [] + - id: /mosaic/configure/sources/http-source + fullPath: /mosaic/configure/sources/http-source.mdx + name: HTTP Source + priority: 1 + data: + level: 3 + link: /mosaic/configure/sources/http-source + childNodes: [] + - id: /mosaic/configure/layouts/index + fullPath: /mosaic/configure/layouts/index.mdx + name: Layouts + priority: 2 + data: + level: 3 + link: /mosaic/configure/layouts/index + childNodes: [] + - id: /mosaic/configure/plugins/index + fullPath: /mosaic/configure/plugins/index.mdx + name: Plugins + priority: 1 + data: + level: 3 + link: /mosaic/configure/plugins/index + childNodes: + - id: /mosaic/configure/plugins/after-source + fullPath: /mosaic/configure/plugins/after-source.mdx + name: Lifecycle - $afterSource + data: + level: 3 + link: /mosaic/configure/plugins/after-source + childNodes: [] + - id: /mosaic/configure/plugins/after-update + fullPath: /mosaic/configure/plugins/after-update.mdx + name: Lifecycle - afterUpdate + data: + level: 3 + link: /mosaic/configure/plugins/after-update + childNodes: [] + - id: /mosaic/configure/plugins/before-send + fullPath: /mosaic/configure/plugins/before-send.mdx + name: Lifecycle - $beforeSend + data: + level: 3 + link: /mosaic/configure/plugins/before-send + childNodes: [] + - id: /mosaic/configure/plugins/should-clear-cache + fullPath: /mosaic/configure/plugins/should-clear-cache.mdx + name: Lifecycle - shouldClearCache + data: + level: 3 + link: /mosaic/configure/plugins/should-clear-cache + childNodes: [] +--- +# {meta.title} + +There are several admin urls exposed by Mosaic that provide an insight into how the filesystem has been configured and a way to remotely manage sources. + +## Endpoints + +| Endpoint | Method | Description | Params | +| -------------------------- | ------ | -------------------------------------------- | ---------------------- | +| `/_mosaic_/config` | GET | Returns the JSON from the Mosaic config file | n/a | +| `/_mosaic_/sources/list` | GET | Returns a collection of active sources | n/a | +| `/_mosaic_/sources/add` | POST | Adds the source | definition & isPreview | +| `/_mosaic_/source/stop` | PUT | Stops the source with the provided name | name | +| `/_mosaic_/source/restart` | PUT | Stops the source with the provided name | name | diff --git a/packages/site/snapshots/latest/mosaic/configure/admin/shared-config.json b/packages/site/snapshots/latest/mosaic/configure/admin/shared-config.json new file mode 120000 index 00000000..da3ba444 --- /dev/null +++ b/packages/site/snapshots/latest/mosaic/configure/admin/shared-config.json @@ -0,0 +1 @@ +../../shared-config.json \ No newline at end of file diff --git a/packages/site/snapshots/latest/mosaic/configure/index.mdx b/packages/site/snapshots/latest/mosaic/configure/index.mdx index 39a08983..f061bfb5 100644 --- a/packages/site/snapshots/latest/mosaic/configure/index.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/index.mdx @@ -85,6 +85,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/layouts/index.mdx b/packages/site/snapshots/latest/mosaic/configure/layouts/index.mdx index 1cb31fee..e4d28a14 100644 --- a/packages/site/snapshots/latest/mosaic/configure/layouts/index.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/layouts/index.mdx @@ -91,6 +91,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/layouts/shared-config.json b/packages/site/snapshots/latest/mosaic/configure/layouts/shared-config.json index 11f2745e..da3ba444 120000 --- a/packages/site/snapshots/latest/mosaic/configure/layouts/shared-config.json +++ b/packages/site/snapshots/latest/mosaic/configure/layouts/shared-config.json @@ -1 +1 @@ -../shared-config.json \ No newline at end of file +../../shared-config.json \ No newline at end of file diff --git a/packages/site/snapshots/latest/mosaic/configure/modes/active.mdx b/packages/site/snapshots/latest/mosaic/configure/modes/active.mdx index 3aab64db..38d0b565 100644 --- a/packages/site/snapshots/latest/mosaic/configure/modes/active.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/modes/active.mdx @@ -102,6 +102,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/modes/index.mdx b/packages/site/snapshots/latest/mosaic/configure/modes/index.mdx index d60b3b58..3950184e 100644 --- a/packages/site/snapshots/latest/mosaic/configure/modes/index.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/modes/index.mdx @@ -105,6 +105,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/modes/shared-config.json b/packages/site/snapshots/latest/mosaic/configure/modes/shared-config.json index 11f2745e..da3ba444 120000 --- a/packages/site/snapshots/latest/mosaic/configure/modes/shared-config.json +++ b/packages/site/snapshots/latest/mosaic/configure/modes/shared-config.json @@ -1 +1 @@ -../shared-config.json \ No newline at end of file +../../shared-config.json \ No newline at end of file diff --git a/packages/site/snapshots/latest/mosaic/configure/modes/snapshot-file.mdx b/packages/site/snapshots/latest/mosaic/configure/modes/snapshot-file.mdx index 19982cab..03789dfc 100644 --- a/packages/site/snapshots/latest/mosaic/configure/modes/snapshot-file.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/modes/snapshot-file.mdx @@ -96,6 +96,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/modes/snapshot-s3.mdx b/packages/site/snapshots/latest/mosaic/configure/modes/snapshot-s3.mdx index c8396427..48d566b4 100644 --- a/packages/site/snapshots/latest/mosaic/configure/modes/snapshot-s3.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/modes/snapshot-s3.mdx @@ -99,6 +99,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/plugins/after-source.mdx b/packages/site/snapshots/latest/mosaic/configure/plugins/after-source.mdx index 8e00e452..e7fc2a09 100644 --- a/packages/site/snapshots/latest/mosaic/configure/plugins/after-source.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/plugins/after-source.mdx @@ -100,6 +100,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/plugins/after-update.mdx b/packages/site/snapshots/latest/mosaic/configure/plugins/after-update.mdx index cfbd6bc0..2f1243dd 100644 --- a/packages/site/snapshots/latest/mosaic/configure/plugins/after-update.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/plugins/after-update.mdx @@ -97,6 +97,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/plugins/before-send.mdx b/packages/site/snapshots/latest/mosaic/configure/plugins/before-send.mdx index 3ec0799c..5942be05 100644 --- a/packages/site/snapshots/latest/mosaic/configure/plugins/before-send.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/plugins/before-send.mdx @@ -97,6 +97,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/plugins/index.mdx b/packages/site/snapshots/latest/mosaic/configure/plugins/index.mdx index 214223df..2d0bcb8a 100644 --- a/packages/site/snapshots/latest/mosaic/configure/plugins/index.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/plugins/index.mdx @@ -103,6 +103,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/plugins/shared-config.json b/packages/site/snapshots/latest/mosaic/configure/plugins/shared-config.json index 11f2745e..da3ba444 120000 --- a/packages/site/snapshots/latest/mosaic/configure/plugins/shared-config.json +++ b/packages/site/snapshots/latest/mosaic/configure/plugins/shared-config.json @@ -1 +1 @@ -../shared-config.json \ No newline at end of file +../../shared-config.json \ No newline at end of file diff --git a/packages/site/snapshots/latest/mosaic/configure/plugins/should-clear-cache.mdx b/packages/site/snapshots/latest/mosaic/configure/plugins/should-clear-cache.mdx index a5d27491..1166c953 100644 --- a/packages/site/snapshots/latest/mosaic/configure/plugins/should-clear-cache.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/plugins/should-clear-cache.mdx @@ -94,6 +94,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/sidebar.json b/packages/site/snapshots/latest/mosaic/configure/sidebar.json index f0f29d80..6f71fb59 100644 --- a/packages/site/snapshots/latest/mosaic/configure/sidebar.json +++ b/packages/site/snapshots/latest/mosaic/configure/sidebar.json @@ -1 +1 @@ -{"pages":[{"id":"/mosaic/configure/index","fullPath":"/mosaic/configure/index.mdx","name":"Configure","priority":4,"data":{"level":2,"link":"/mosaic/configure/index"},"childNodes":[]},{"id":"/mosaic/configure/modes/index","fullPath":"/mosaic/configure/modes/index.mdx","name":"Modes of operation","priority":4,"data":{"level":3,"link":"/mosaic/configure/modes/index"},"childNodes":[{"id":"/mosaic/configure/modes/active","fullPath":"/mosaic/configure/modes/active.mdx","name":"Active mode","data":{"level":3,"link":"/mosaic/configure/modes/active"},"childNodes":[]},{"id":"/mosaic/configure/modes/snapshot-file","fullPath":"/mosaic/configure/modes/snapshot-file.mdx","name":"Snapshot file mode","data":{"level":3,"link":"/mosaic/configure/modes/snapshot-file"},"childNodes":[]},{"id":"/mosaic/configure/modes/snapshot-s3","fullPath":"/mosaic/configure/modes/snapshot-s3.mdx","name":"Snapshot AWS/S3 mode","data":{"level":3,"link":"/mosaic/configure/modes/snapshot-s3"},"childNodes":[]}]},{"id":"/mosaic/configure/theme/index","fullPath":"/mosaic/configure/theme/index.mdx","name":"Theming Your Site","priority":4,"data":{"level":3,"link":"/mosaic/configure/theme/index"},"childNodes":[{"id":"/mosaic/configure/theme/custom-css","fullPath":"/mosaic/configure/theme/custom-css.mdx","name":"Custom CSS","priority":3,"data":{"level":3,"link":"/mosaic/configure/theme/custom-css"},"childNodes":[]},{"id":"/mosaic/configure/theme/custom-components","fullPath":"/mosaic/configure/theme/custom-components.mdx","name":"Custom Components","priority":2,"data":{"level":3,"link":"/mosaic/configure/theme/custom-components"},"childNodes":[]}]},{"id":"/mosaic/configure/sources/index","fullPath":"/mosaic/configure/sources/index.mdx","name":"Sources","priority":3,"data":{"level":3,"link":"/mosaic/configure/sources/index"},"childNodes":[{"id":"/mosaic/configure/sources/schedules","fullPath":"/mosaic/configure/sources/schedules.mdx","name":"Schedules","priority":4,"data":{"level":3,"link":"/mosaic/configure/sources/schedules"},"childNodes":[]},{"id":"/mosaic/configure/sources/local-folder-source","fullPath":"/mosaic/configure/sources/local-folder-source.mdx","name":"Local Folder Source","priority":3,"data":{"level":3,"link":"/mosaic/configure/sources/local-folder-source"},"childNodes":[]},{"id":"/mosaic/configure/sources/git-repo-source","fullPath":"/mosaic/configure/sources/git-repo-source.mdx","name":"Git Repo Source","priority":2,"data":{"level":3,"link":"/mosaic/configure/sources/git-repo-source"},"childNodes":[]},{"id":"/mosaic/configure/sources/http-source","fullPath":"/mosaic/configure/sources/http-source.mdx","name":"HTTP Source","priority":1,"data":{"level":3,"link":"/mosaic/configure/sources/http-source"},"childNodes":[]}]},{"id":"/mosaic/configure/layouts/index","fullPath":"/mosaic/configure/layouts/index.mdx","name":"Layouts","priority":2,"data":{"level":3,"link":"/mosaic/configure/layouts/index"},"childNodes":[]},{"id":"/mosaic/configure/plugins/index","fullPath":"/mosaic/configure/plugins/index.mdx","name":"Plugins","priority":1,"data":{"level":3,"link":"/mosaic/configure/plugins/index"},"childNodes":[{"id":"/mosaic/configure/plugins/after-source","fullPath":"/mosaic/configure/plugins/after-source.mdx","name":"Lifecycle - $afterSource","data":{"level":3,"link":"/mosaic/configure/plugins/after-source"},"childNodes":[]},{"id":"/mosaic/configure/plugins/after-update","fullPath":"/mosaic/configure/plugins/after-update.mdx","name":"Lifecycle - afterUpdate","data":{"level":3,"link":"/mosaic/configure/plugins/after-update"},"childNodes":[]},{"id":"/mosaic/configure/plugins/before-send","fullPath":"/mosaic/configure/plugins/before-send.mdx","name":"Lifecycle - $beforeSend","data":{"level":3,"link":"/mosaic/configure/plugins/before-send"},"childNodes":[]},{"id":"/mosaic/configure/plugins/should-clear-cache","fullPath":"/mosaic/configure/plugins/should-clear-cache.mdx","name":"Lifecycle - shouldClearCache","data":{"level":3,"link":"/mosaic/configure/plugins/should-clear-cache"},"childNodes":[]}]}]} \ No newline at end of file +{"pages":[{"id":"/mosaic/configure/index","fullPath":"/mosaic/configure/index.mdx","name":"Configure","priority":4,"data":{"level":2,"link":"/mosaic/configure/index"},"childNodes":[]},{"id":"/mosaic/configure/modes/index","fullPath":"/mosaic/configure/modes/index.mdx","name":"Modes of operation","priority":4,"data":{"level":3,"link":"/mosaic/configure/modes/index"},"childNodes":[{"id":"/mosaic/configure/modes/active","fullPath":"/mosaic/configure/modes/active.mdx","name":"Active mode","data":{"level":3,"link":"/mosaic/configure/modes/active"},"childNodes":[]},{"id":"/mosaic/configure/modes/snapshot-file","fullPath":"/mosaic/configure/modes/snapshot-file.mdx","name":"Snapshot file mode","data":{"level":3,"link":"/mosaic/configure/modes/snapshot-file"},"childNodes":[]},{"id":"/mosaic/configure/modes/snapshot-s3","fullPath":"/mosaic/configure/modes/snapshot-s3.mdx","name":"Snapshot AWS/S3 mode","data":{"level":3,"link":"/mosaic/configure/modes/snapshot-s3"},"childNodes":[]}]},{"id":"/mosaic/configure/theme/index","fullPath":"/mosaic/configure/theme/index.mdx","name":"Theming Your Site","priority":4,"data":{"level":3,"link":"/mosaic/configure/theme/index"},"childNodes":[{"id":"/mosaic/configure/theme/custom-css","fullPath":"/mosaic/configure/theme/custom-css.mdx","name":"Custom CSS","priority":3,"data":{"level":3,"link":"/mosaic/configure/theme/custom-css"},"childNodes":[]},{"id":"/mosaic/configure/theme/custom-components","fullPath":"/mosaic/configure/theme/custom-components.mdx","name":"Custom Components","priority":2,"data":{"level":3,"link":"/mosaic/configure/theme/custom-components"},"childNodes":[]}]},{"id":"/mosaic/configure/admin/index","fullPath":"/mosaic/configure/admin/index.mdx","name":"Admin","priority":3,"data":{"level":3,"link":"/mosaic/configure/admin/index"},"childNodes":[]},{"id":"/mosaic/configure/sources/index","fullPath":"/mosaic/configure/sources/index.mdx","name":"Sources","priority":3,"data":{"level":3,"link":"/mosaic/configure/sources/index"},"childNodes":[{"id":"/mosaic/configure/sources/schedules","fullPath":"/mosaic/configure/sources/schedules.mdx","name":"Schedules","priority":4,"data":{"level":3,"link":"/mosaic/configure/sources/schedules"},"childNodes":[]},{"id":"/mosaic/configure/sources/local-folder-source","fullPath":"/mosaic/configure/sources/local-folder-source.mdx","name":"Local Folder Source","priority":3,"data":{"level":3,"link":"/mosaic/configure/sources/local-folder-source"},"childNodes":[]},{"id":"/mosaic/configure/sources/git-repo-source","fullPath":"/mosaic/configure/sources/git-repo-source.mdx","name":"Git Repo Source","priority":2,"data":{"level":3,"link":"/mosaic/configure/sources/git-repo-source"},"childNodes":[]},{"id":"/mosaic/configure/sources/http-source","fullPath":"/mosaic/configure/sources/http-source.mdx","name":"HTTP Source","priority":1,"data":{"level":3,"link":"/mosaic/configure/sources/http-source"},"childNodes":[]}]},{"id":"/mosaic/configure/layouts/index","fullPath":"/mosaic/configure/layouts/index.mdx","name":"Layouts","priority":2,"data":{"level":3,"link":"/mosaic/configure/layouts/index"},"childNodes":[]},{"id":"/mosaic/configure/plugins/index","fullPath":"/mosaic/configure/plugins/index.mdx","name":"Plugins","priority":1,"data":{"level":3,"link":"/mosaic/configure/plugins/index"},"childNodes":[{"id":"/mosaic/configure/plugins/after-source","fullPath":"/mosaic/configure/plugins/after-source.mdx","name":"Lifecycle - $afterSource","data":{"level":3,"link":"/mosaic/configure/plugins/after-source"},"childNodes":[]},{"id":"/mosaic/configure/plugins/after-update","fullPath":"/mosaic/configure/plugins/after-update.mdx","name":"Lifecycle - afterUpdate","data":{"level":3,"link":"/mosaic/configure/plugins/after-update"},"childNodes":[]},{"id":"/mosaic/configure/plugins/before-send","fullPath":"/mosaic/configure/plugins/before-send.mdx","name":"Lifecycle - $beforeSend","data":{"level":3,"link":"/mosaic/configure/plugins/before-send"},"childNodes":[]},{"id":"/mosaic/configure/plugins/should-clear-cache","fullPath":"/mosaic/configure/plugins/should-clear-cache.mdx","name":"Lifecycle - shouldClearCache","data":{"level":3,"link":"/mosaic/configure/plugins/should-clear-cache"},"childNodes":[]}]}]} \ No newline at end of file diff --git a/packages/site/snapshots/latest/mosaic/configure/sources/git-repo-source.mdx b/packages/site/snapshots/latest/mosaic/configure/sources/git-repo-source.mdx index 1e295f19..7b94a1a4 100644 --- a/packages/site/snapshots/latest/mosaic/configure/sources/git-repo-source.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/sources/git-repo-source.mdx @@ -3,7 +3,7 @@ title: Git Repo Source layout: DetailTechnical sidebar: priority: 2 -lastModified: 1690880756428 +lastModified: 1690883719780 fullPath: /mosaic/configure/sources/git-repo-source.mdx route: /mosaic/configure/sources/git-repo-source breadcrumbs: @@ -109,6 +109,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/sources/http-source.mdx b/packages/site/snapshots/latest/mosaic/configure/sources/http-source.mdx index d6f5da05..6b407689 100644 --- a/packages/site/snapshots/latest/mosaic/configure/sources/http-source.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/sources/http-source.mdx @@ -3,7 +3,7 @@ title: HTTP Source layout: DetailTechnical sidebar: priority: 1 -lastModified: 1690880756466 +lastModified: 1690883719781 fullPath: /mosaic/configure/sources/http-source.mdx route: /mosaic/configure/sources/http-source breadcrumbs: @@ -103,6 +103,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/sources/index.mdx b/packages/site/snapshots/latest/mosaic/configure/sources/index.mdx index c3f5f3fc..92b7c1ab 100644 --- a/packages/site/snapshots/latest/mosaic/configure/sources/index.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/sources/index.mdx @@ -3,7 +3,7 @@ title: Sources layout: DetailTechnical sidebar: priority: 3 -lastModified: 1690880695552 +lastModified: 1690883719781 fullPath: /mosaic/configure/sources/index.mdx route: /mosaic/configure/sources/index breadcrumbs: @@ -48,8 +48,8 @@ tableOfContents: text: Gotchas navigation: prev: - title: Custom Components - route: /mosaic/configure/theme/custom-components + title: Admin + route: /mosaic/configure/admin/index next: title: Source Schedules route: /mosaic/configure/sources/schedules @@ -115,6 +115,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/sources/local-folder-source.mdx b/packages/site/snapshots/latest/mosaic/configure/sources/local-folder-source.mdx index 6abfee8f..2ab0d5ac 100644 --- a/packages/site/snapshots/latest/mosaic/configure/sources/local-folder-source.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/sources/local-folder-source.mdx @@ -3,7 +3,7 @@ title: Local Folder Source layout: DetailTechnical sidebar: priority: 3 -lastModified: 1690880756594 +lastModified: 1690883719782 fullPath: /mosaic/configure/sources/local-folder-source.mdx route: /mosaic/configure/sources/local-folder-source breadcrumbs: @@ -103,6 +103,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/sources/schedules.mdx b/packages/site/snapshots/latest/mosaic/configure/sources/schedules.mdx index b0f3ce0a..2fcee9fd 100644 --- a/packages/site/snapshots/latest/mosaic/configure/sources/schedules.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/sources/schedules.mdx @@ -4,7 +4,7 @@ layout: DetailTechnical sidebar: priority: 4 label: Schedules -lastModified: 1690881436519 +lastModified: 1690883719782 fullPath: /mosaic/configure/sources/schedules.mdx route: /mosaic/configure/sources/schedules breadcrumbs: @@ -107,6 +107,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/sources/shared-config.json b/packages/site/snapshots/latest/mosaic/configure/sources/shared-config.json index 11f2745e..da3ba444 120000 --- a/packages/site/snapshots/latest/mosaic/configure/sources/shared-config.json +++ b/packages/site/snapshots/latest/mosaic/configure/sources/shared-config.json @@ -1 +1 @@ -../shared-config.json \ No newline at end of file +../../shared-config.json \ No newline at end of file diff --git a/packages/site/snapshots/latest/mosaic/configure/theme/custom-components.mdx b/packages/site/snapshots/latest/mosaic/configure/theme/custom-components.mdx index 4e69ad3a..f9dde72b 100644 --- a/packages/site/snapshots/latest/mosaic/configure/theme/custom-components.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/theme/custom-components.mdx @@ -48,8 +48,8 @@ navigation: title: Custom CSS route: /mosaic/configure/theme/custom-css next: - title: Sources - route: /mosaic/configure/sources/index + title: Admin + route: /mosaic/configure/admin/index sidebarData: - id: /mosaic/configure/index fullPath: /mosaic/configure/index.mdx @@ -112,6 +112,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/theme/custom-css.mdx b/packages/site/snapshots/latest/mosaic/configure/theme/custom-css.mdx index 7515c05d..a0238cda 100644 --- a/packages/site/snapshots/latest/mosaic/configure/theme/custom-css.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/theme/custom-css.mdx @@ -103,6 +103,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/theme/index.mdx b/packages/site/snapshots/latest/mosaic/configure/theme/index.mdx index 6b92fa6c..3f6ac584 100644 --- a/packages/site/snapshots/latest/mosaic/configure/theme/index.mdx +++ b/packages/site/snapshots/latest/mosaic/configure/theme/index.mdx @@ -97,6 +97,14 @@ sidebarData: level: 3 link: /mosaic/configure/theme/custom-components childNodes: [] + - id: /mosaic/configure/admin/index + fullPath: /mosaic/configure/admin/index.mdx + name: Admin + priority: 3 + data: + level: 3 + link: /mosaic/configure/admin/index + childNodes: [] - id: /mosaic/configure/sources/index fullPath: /mosaic/configure/sources/index.mdx name: Sources diff --git a/packages/site/snapshots/latest/mosaic/configure/theme/shared-config.json b/packages/site/snapshots/latest/mosaic/configure/theme/shared-config.json index 11f2745e..da3ba444 120000 --- a/packages/site/snapshots/latest/mosaic/configure/theme/shared-config.json +++ b/packages/site/snapshots/latest/mosaic/configure/theme/shared-config.json @@ -1 +1 @@ -../shared-config.json \ No newline at end of file +../../shared-config.json \ No newline at end of file diff --git a/packages/site/snapshots/latest/mosaic/test/aliases/shared-config.json b/packages/site/snapshots/latest/mosaic/test/aliases/shared-config.json index 11f2745e..da3ba444 120000 --- a/packages/site/snapshots/latest/mosaic/test/aliases/shared-config.json +++ b/packages/site/snapshots/latest/mosaic/test/aliases/shared-config.json @@ -1 +1 @@ -../shared-config.json \ No newline at end of file +../../shared-config.json \ No newline at end of file diff --git a/packages/site/snapshots/latest/mosaic/test/layouts/shared-config.json b/packages/site/snapshots/latest/mosaic/test/layouts/shared-config.json index 11f2745e..da3ba444 120000 --- a/packages/site/snapshots/latest/mosaic/test/layouts/shared-config.json +++ b/packages/site/snapshots/latest/mosaic/test/layouts/shared-config.json @@ -1 +1 @@ -../shared-config.json \ No newline at end of file +../../shared-config.json \ No newline at end of file diff --git a/packages/site/snapshots/latest/mosaic/test/refs/shared-config.json b/packages/site/snapshots/latest/mosaic/test/refs/shared-config.json index 11f2745e..da3ba444 120000 --- a/packages/site/snapshots/latest/mosaic/test/refs/shared-config.json +++ b/packages/site/snapshots/latest/mosaic/test/refs/shared-config.json @@ -1 +1 @@ -../shared-config.json \ No newline at end of file +../../shared-config.json \ No newline at end of file diff --git a/packages/site/snapshots/latest/search-data-condensed.json b/packages/site/snapshots/latest/search-data-condensed.json index 97e10260..73f43470 100644 --- a/packages/site/snapshots/latest/search-data-condensed.json +++ b/packages/site/snapshots/latest/search-data-condensed.json @@ -1 +1 @@ -[{"title":"Mosaic","route":"/mosaic/index"},{"title":"Aliases","route":"/mosaic/author/aliases"},{"title":"Fragments","route":"/mosaic/author/fragments"},{"title":"Frontmatter","route":"/mosaic/author/frontmatter"},{"title":"Author","route":"/mosaic/author/index"},{"title":"Markdown Syntax","route":"/mosaic/author/markdown-syntax"},{"title":"Page Templates","route":"/mosaic/author/page-templates"},{"title":"Refs","route":"/mosaic/author/refs"},{"title":"UI Components","route":"/mosaic/author/ui-components"},{"title":"Configure","route":"/mosaic/configure/index"},{"title":"Content Fragment","route":"/mosaic/fragments/content-fragment"},{"title":"Fragments","route":"/mosaic/fragments/index"},{"title":"Tile A","route":"/mosaic/fragments/tile-a"},{"title":"Tile B","route":"/mosaic/fragments/tile-b"},{"title":"Create a Site","route":"/mosaic/getting-started/create-a-site"},{"title":"Getting Started","route":"/mosaic/getting-started/index"},{"title":"Publish a site to AWS","route":"/mosaic/getting-started/publish-site-to-aws"},{"title":"Publish","route":"/mosaic/publish/index"},{"title":"Publish a site to AWS","route":"/mosaic/publish/publish-site-to-aws"},{"title":"Publish a site to Vercel","route":"/mosaic/publish/publish-site-to-vercel"},{"title":"Test","route":"/mosaic/test/index"},{"title":"Layouts","route":"/mosaic/configure/layouts/index"},{"title":"Active mode","route":"/mosaic/configure/modes/active"},{"title":"Modes of operation","route":"/mosaic/configure/modes/index"},{"title":"Snapshot file mode","route":"/mosaic/configure/modes/snapshot-file"},{"title":"Snapshot AWS/S3 mode","route":"/mosaic/configure/modes/snapshot-s3"},{"title":"$afterSource","route":"/mosaic/configure/plugins/after-source"},{"title":"afterUpdate","route":"/mosaic/configure/plugins/after-update"},{"title":"$beforeSend","route":"/mosaic/configure/plugins/before-send"},{"title":"Plugins","route":"/mosaic/configure/plugins/index"},{"title":"shouldClearCache","route":"/mosaic/configure/plugins/should-clear-cache"},{"title":"Git Repo Source","route":"/mosaic/configure/sources/git-repo-source"},{"title":"HTTP Source","route":"/mosaic/configure/sources/http-source"},{"title":"Sources","route":"/mosaic/configure/sources/index"},{"title":"Local Folder Source","route":"/mosaic/configure/sources/local-folder-source"},{"title":"Source Schedules","route":"/mosaic/configure/sources/schedules"},{"title":"Custom Components","route":"/mosaic/configure/theme/custom-components"},{"title":"Custom CSS","route":"/mosaic/configure/theme/custom-css"},{"title":"Theming Your Site","route":"/mosaic/configure/theme/index"},{"title":"Aliases Test","route":"/mosaic/test/aliases/index"},{"title":"Detail Highlight Test Page","route":"/mosaic/test/layouts/detail-highlight"},{"title":"Detail Overview Test Page","route":"/mosaic/test/layouts/detail-overview"},{"title":"Detail Technical Test Page","route":"/mosaic/test/layouts/detail-technical"},{"title":"Edit Layout","route":"/mosaic/test/layouts/edit"},{"title":"Full Width Layout","route":"/mosaic/test/layouts/full-width"},{"title":"Layouts","route":"/mosaic/test/layouts/index"},{"title":"Landing Layout Test Page","route":"/mosaic/test/layouts/landing"},{"title":"Newsletter Test Page","route":"/mosaic/test/layouts/newsletter"},{"title":"Product Discover Test Page","route":"/mosaic/test/layouts/product-discover"},{"title":"Product Preview Test Page","route":"/mosaic/test/layouts/product-preview"},{"title":"Refs Data","route":"/mosaic/test/refs/data"},{"title":"Refs Test","route":"/mosaic/test/refs/index"}] \ No newline at end of file +[{"title":"Mosaic","route":"/mosaic/index"},{"title":"Aliases","route":"/mosaic/author/aliases"},{"title":"Fragments","route":"/mosaic/author/fragments"},{"title":"Frontmatter","route":"/mosaic/author/frontmatter"},{"title":"Author","route":"/mosaic/author/index"},{"title":"Markdown Syntax","route":"/mosaic/author/markdown-syntax"},{"title":"Page Templates","route":"/mosaic/author/page-templates"},{"title":"Refs","route":"/mosaic/author/refs"},{"title":"UI Components","route":"/mosaic/author/ui-components"},{"title":"Configure","route":"/mosaic/configure/index"},{"title":"Content Fragment","route":"/mosaic/fragments/content-fragment"},{"title":"Fragments","route":"/mosaic/fragments/index"},{"title":"Tile A","route":"/mosaic/fragments/tile-a"},{"title":"Tile B","route":"/mosaic/fragments/tile-b"},{"title":"Create a Site","route":"/mosaic/getting-started/create-a-site"},{"title":"Getting Started","route":"/mosaic/getting-started/index"},{"title":"Publish a site to AWS","route":"/mosaic/getting-started/publish-site-to-aws"},{"title":"Publish","route":"/mosaic/publish/index"},{"title":"Publish a site to AWS","route":"/mosaic/publish/publish-site-to-aws"},{"title":"Publish a site to Vercel","route":"/mosaic/publish/publish-site-to-vercel"},{"title":"Test","route":"/mosaic/test/index"},{"title":"Admin","route":"/mosaic/configure/admin/index"},{"title":"Layouts","route":"/mosaic/configure/layouts/index"},{"title":"Active mode","route":"/mosaic/configure/modes/active"},{"title":"Modes of operation","route":"/mosaic/configure/modes/index"},{"title":"Snapshot file mode","route":"/mosaic/configure/modes/snapshot-file"},{"title":"Snapshot AWS/S3 mode","route":"/mosaic/configure/modes/snapshot-s3"},{"title":"$afterSource","route":"/mosaic/configure/plugins/after-source"},{"title":"afterUpdate","route":"/mosaic/configure/plugins/after-update"},{"title":"$beforeSend","route":"/mosaic/configure/plugins/before-send"},{"title":"Plugins","route":"/mosaic/configure/plugins/index"},{"title":"shouldClearCache","route":"/mosaic/configure/plugins/should-clear-cache"},{"title":"Git Repo Source","route":"/mosaic/configure/sources/git-repo-source"},{"title":"HTTP Source","route":"/mosaic/configure/sources/http-source"},{"title":"Sources","route":"/mosaic/configure/sources/index"},{"title":"Local Folder Source","route":"/mosaic/configure/sources/local-folder-source"},{"title":"Source Schedules","route":"/mosaic/configure/sources/schedules"},{"title":"Custom Components","route":"/mosaic/configure/theme/custom-components"},{"title":"Custom CSS","route":"/mosaic/configure/theme/custom-css"},{"title":"Theming Your Site","route":"/mosaic/configure/theme/index"},{"title":"Aliases Test","route":"/mosaic/test/aliases/index"},{"title":"Detail Highlight Test Page","route":"/mosaic/test/layouts/detail-highlight"},{"title":"Detail Overview Test Page","route":"/mosaic/test/layouts/detail-overview"},{"title":"Detail Technical Test Page","route":"/mosaic/test/layouts/detail-technical"},{"title":"Edit Layout","route":"/mosaic/test/layouts/edit"},{"title":"Full Width Layout","route":"/mosaic/test/layouts/full-width"},{"title":"Layouts","route":"/mosaic/test/layouts/index"},{"title":"Landing Layout Test Page","route":"/mosaic/test/layouts/landing"},{"title":"Newsletter Test Page","route":"/mosaic/test/layouts/newsletter"},{"title":"Product Discover Test Page","route":"/mosaic/test/layouts/product-discover"},{"title":"Product Preview Test Page","route":"/mosaic/test/layouts/product-preview"},{"title":"Refs Data","route":"/mosaic/test/refs/data"},{"title":"Refs Test","route":"/mosaic/test/refs/index"}] \ No newline at end of file diff --git a/packages/site/snapshots/latest/search-data.json b/packages/site/snapshots/latest/search-data.json index 26a3b15c..2e4baf8b 100644 --- a/packages/site/snapshots/latest/search-data.json +++ b/packages/site/snapshots/latest/search-data.json @@ -1 +1 @@ -[{"title":"Mosaic","route":"/mosaic/index","content":["True to its name, Mosaic brings together several concepts—including content, design and technical infrastructure—to deliver a unified website experience that is truly greater than the sum of its individual parts.","With Mosaic, you can:","Don't move your content where it does not belong. ","Compose content from remote data sources which\n","are pulled at runtime by our content aggregator.","Visualize your content with your own theme, layouts and components or use the Mosaic Design\n","language.","Extend the existing code and add your own content source types through our simple plugin\n","architecture.","Publish your content through Server Side Rendering (SSR) or generate a snapshot of your content\n","and serve it as a Statically Generated Site (SGS).","Creating a website has never been so easy!"]},{"title":"Aliases","route":"/mosaic/author/aliases","content":["Aliases are virtual 'symlinks' of pages, allowing one page to take on one or more other routes.\n","This is not the same as copying the page, it is a primitive filesystem link which is resolved by Mosaic.","Use Cases","Aliases are great for linking to an old route if you've moved a page to a new place.\n","They can also be used to create short hand links to pages or to 'clone' a copy of a page into\n","another section of the site where it may be relevant.","Example","This is the frontmatter for this page:","---\n","title: Aliases\n","layout: DetailTechnical\n","aliases:\n"," - /mosaic/example/aliases\n","---","Try accessing this page from ","/mosaic/example/aliases"]},{"title":"Fragments","route":"/mosaic/author/fragments","content":["Fragments, also known as content fragments, are powerful tools that allow you to incorporate content from other pages into your documentation. ","By creating an MDX file and using the ","generic directives"," syntax ",", you can easily render the fragment in another file, providing modularity and reusability to your content.","Use Cases","Fragments offer various use cases, such as:","Consistent Content",": Use fragments to maintain consistent content across multiple pages. ","For instance, if you have a table or a tile that appears on multiple pages, you can create a fragment for it and include it in all relevant files. ","This ensures that any updates made to the fragment automatically reflect across the entire documentation.","Reusable Components",": Fragments enable the creation of reusable components or sections. ","You can define a complex or commonly used section once and then include it in multiple pages as needed. ","This approach saves time and effort, as you only need to update the fragment file to propagate changes throughout your documentation.","Modular Documentation",": With fragments, you can break down your documentation into smaller, manageable pieces. ","Each fragment represents a specific topic or section, allowing you to organize and structure your content more efficiently. ","This modular approach simplifies maintenance and makes it easier to navigate and update your documentation.","Usage","Firstly, enable the Fragment Plugin by adding the following to your plugins in ",".","{\n"," modulePath: '@jpmorganchase/mosaic-plugins/FragmentPlugin',\n"," options: {}\n","}","To include a fragment in your content, follow these steps:","Create an MDX file for the fragment you want to reuse. ","Remember to set the sidebar property of your fragment's frontmatter to exclude: true if you don't want the fragment to appear in the vertical navigation menu.","---\n","title: Fragment Title\n","sidebar:\n"," exclude: true\n","---","In the target file where you want to include the fragment, use the remark directive syntax ",".","Markdown Content Example","This is the contents of a fragment located at ",":","---\n","title: Content Fragment\n","sidebar:\n"," exclude: true\n","---\n","\n","#### Fragment Title\n","\n","This is an example fragment of markdown content, being pulled from `../fragments/content-fragment.mdx`.\n","The below code snippet will render the content from the content-fragment.mdx file in your target file:",":fragment{src=\"../fragments/content-fragment.mdx\"}","Example output:",":fragment","Component Example","Here is another example, where the fragment files each contain a "," component.",":fragment{src=\"../fragments/tile-a.mdx\"} :fragment{src=\"../fragments/tile-b.mdx\"}","The above code will render the content from tile-a.mdx and tile-b.mdx files, demonstrated below:",":fragment"," :fragment"]},{"title":"Frontmatter","route":"/mosaic/author/frontmatter","content":["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: ",".","Example page yaml","---\n","title: Page Title\n","layout: DetailTechnical\n","sidebar:\n"," priority: 4\n","---\n","\n","// frontmatter is closed and now comes page content\n","# Page Title\n","\n","This is some content.\n","Accessing Frontmatter in content","With the syntax below it is possible to directly reference frontmatter inside content using curly brackets and the "," object.","You can think of "," as a JSON object that holds all the frontmatter of a page and when the Mosaic "," encounters the curly brackets then the value in the frontmatter will be resolved.","{meta.title}\n","{meta.description}\n","{meta.someValueYouHaveAddedToTheFrontmatter}","This is very common to see Mosaic pages that reference the title as shown below:","---\n","title: Title\n","---\n","\n","# {meta.title}","Plugins & Frontmatter","Mosaic plugins can also embed their output into page frontmatter in 2 different ways:","a property is directly added to the page object","a JSON file is generated and referenced using a ","ref","Adding a property to the page","A plugin can add a property to a page simply by extending the page object it receives in the "," lifecycle event:","async function $afterSource(pages) {\n"," for (const page of pages) {\n"," page.newProperty = 'Hello'\n"," }\n"," return pages;\n","}","You could use this property in the page content using ","JSON File","Let's take a look at the ",".","The purpose of this plugin is to crawl the page hierarchy to find the closest "," found in any parent page's frontmatter.","Finds all index pages among the source docs","Deserialises those pages so it can read the frontmatter and content of the page","If a property called "," in the page frontmatter is found a new file named shared-config.json is created","Adds a ref named "," to the shared config file that points to the shared config of the index page","import type { Page, Plugin as PluginType } from '@jpmorganchase/mosaic-types';\n","import { flatten } from 'lodash-es';\n","import path from 'path';\n","\n","function createFileGlob(url, pageExtensions) {\n","if (pageExtensions.length === 1) {\n","return `${url}${pageExtensions[0]}`;\n","}\n","return `${url}{${pageExtensions.join(',')}}`;\n","}\n","\n","interface SharedConfigPluginPage extends Page {\n","sharedConfig?: string;\n","}\n","\n","interface SharedConfigPluginOptions {\n","filename: string;\n","}\n","\n","const SharedConfigPlugin: PluginType = {\n","async $beforeSend(\n"," mutableFilesystem,\n"," { config, serialiser, ignorePages, pageExtensions },\n"," options\n"," ) {\n"," const pagePaths = await mutableFilesystem.promises.glob(\n"," createFileGlob('**/index', pageExtensions),\n"," {\n"," ignore: [options.filename, ...flatten(ignorePages.map(ignore => [ignore, `**/${ignore}`]))],\n","cwd: '/'\n","}\n",");\n","\n"," for (const pagePath of pagePaths) {\n"," const sharedConfigFile = path.join(path.dirname(String(pagePath)), options.filename);\n","\n"," const page = await serialiser.deserialise(\n"," String(pagePath),\n"," await mutableFilesystem.promises.readFile(String(pagePath))\n"," );\n"," if (page.sharedConfig) {\n"," config.setRef(sharedConfigFile, ['config', '$ref'], `${String(pagePath)}#/sharedConfig`);\n"," await mutableFilesystem.promises.writeFile(sharedConfigFile, '{}');\n"," } else {\n"," const baseDir = path.posix.resolve(path.dirname(String(pagePath)), '..","/');\n"," config.setAliases(path.join(baseDir, options.filename), [sharedConfigFile]);\n"," }\n"," }\n","\n","}\n","};\n","\n","export default SharedConfigPlugin;\n"]},{"title":"Author","route":"/mosaic/author/index","content":["Here you will learn how to author documentation using markdown, Mosaic components and page templates"]},{"title":"Markdown Syntax","route":"/mosaic/author/markdown-syntax","content":["Out of the box, Mosaic supports documents written in ","MDX"," which allows React components to be embedded within the ","basic syntax"," outlined in the original Markdown design document.","In addition to the basic markdown syntax, the MDX processor used by Mosaic has been configured to support additional markdown syntax and features:","GitHub flavored markdown (gfm)","Frontmatter","Mosaic Standard Components","All components that comprise the "," export from "," package are available to use out of the box in your documents.","This includes components for all standard markdown syntax and additional components like "," and ",".","Referencing Frontmatter","Frontmatter values into the page using the "," object. ","See ","frontmatter"," for more information.","Configuring Supported components","TODO"]},{"title":"Page Templates","route":"/mosaic/author/page-templates","content":["Todo..."]},{"title":"Refs","route":"/mosaic/author/refs","content":["Refs are a very powerful feature of Mosaic documents that use ","JSON References"," to reference\n","a property from the page frontmatter or frontmatter of other pages.","The key concept is that of a JSON pointer which takes the form ","A","#","B"," where:","A"," is the relative path from the current schema to a target schema. ","If A is empty, the reference is to a type or property in the same schema, an in-schema reference. ","Otherwise, the reference is to a different schema, a cross-schema reference.","B"," is the complete path from the root of the schema to a type or property in the schema. ","If # in not included or B is empty, the reference is to an entire schema.","To translate this for our purposes:","A"," is the relative path to a file in the filesystem.","B"," is the path to a property in the frontmatter of the file.","It's probably better explained with examples...","Local refs (In-schema reference)","It is possible to reference a page's own frontmatter to avoid duplication:","---\n","title: Refs\n","layout: DetailTechnical\n","sidebar:\n"," priority: 3\n","data:\n"," sidebarPriority:\n"," $ref: '#/sidebar/priority'\n","---","This page you are reading right now has a sidebar priority of ",".","The value of "," comes from "," in the frontmatter.","Notice that because we don't specify a path before the "," in the ref we need to put the whole\n","value inside quotes.","Remote Refs (Cross-schema reference)","It is possible to reference frontmatter of other pages. ","Again this helps avoid duplication but the real power is using refs to build the data model. ","See ","advanced"," for more information.","The ","index"," page of the Author section has this frontmatter:","---\n","title: Author\n","layout: DetailTechnical\n","sidebar:\n"," priority: 3\n","data:\n"," exampleRefData: Hello from Author page\n","---","This page you are currently looking at is referencing the "," in it's frontmatter like this:","---\n","title: Refs\n","layout: DetailTechnical\n","sidebar:\n"," priority: 3\n","data:\n"," authorRef:\n"," $ref: ./#/data/exampleRefData\n","---","I can then use the data and embed it in this page like this:","{meta.data.authorRef}","And here it is: ","Notice that we did not need to put "," in the ref since index pages are resolved\n","automatically.","Advanced","You have had a taste of the power and want to know more? ","OK, lets reference and then list out all the mosaic modes:","The Modes ","index"," page has this frontmatter:","---\n","title: Modes of operation\n","layout: DetailTechnical\n","sidebar:\n"," priority: 4\n","data:\n"," modes:\n"," $ref: ./*#/title\n","---","The ref here is essentially using a wildcard (the *) to grab the "," property from the frontmatter of every page in the modes folder.","We can reference that data just like before:","---\n","title: Refs\n","layout: DetailTechnical\n","sidebar:\n"," priority: 3\n","data:\n"," modes:\n"," $ref: ../configure/modes#/data/modes\n","---","Output","With the code below, the referenced data can be embedded in a page.","
    \n"," {meta.data.modes.map(mode => (\n","
  • {mode}
    • \n"," ))}\n","
","Output with Mosaic Components","You can use Mosaic components with referenced data as well. ","Below we are using the "," and "," components.","\n"," {meta.data.modes.map(mode => (\n"," \n"," ))}\n","","Setting Refs using Plugins","Mosaic plugins can create new refs, create new ","global"," refs and see existing refs created by the page or other plugins. ","This is achieved using a special "," property available in the plugin helpers.","Create new refs","Use the "," function from the helpers provided to plugin lifecycle events. ","You need to provide","The file/fullpath to write the ref to","The path to the ptoperty where the ref will be applied","The value of the ref, which can use wildcards","For example, the following would add a property to pages named ",". ","The value is the title of all pages in the ","same"," directory as the current page"," async $afterSource(pages, { config }) {\n"," for (const page of pages) {\n"," config.setRef(page.fullPath, ['titles', '$ref'], `**#/title`);\n"," }\n"," return pages;\n"," }","When setting the property path the last string must be "," otherwise you're not creating a ref\n","that will be resolved by the RefPlugin.","Existing refs","To view refs that already exist you can use ",". ","For example to see all refs for a page:"," config.data.refs[fullPathToPage]","Create global refs","Global refs are similar to regular refs except they do not pre-resolve. ","This means they are resolved when the referenced file is read and the global mosaic filesystem, made up of multiple sources, is used rather than the filesystem of a single source."]},{"title":"UI Components","route":"/mosaic/author/ui-components","content":["Todo..."]},{"title":"Configure","route":"/mosaic/configure/index","content":["Mosaic is a tool which retrieves, formats and combines documentation pages from any number of different external sources (such as GitHub repositories, local disks or REST endpoints), into a single filesystem for you to use in your websites."]},{"title":"Content Fragment","route":"/mosaic/fragments/content-fragment","content":["Fragment Title","This is an example fragment of markdown content, being pulled from ","."]},{"title":"Fragments","route":"/mosaic/fragments/index","content":["This folder contains example fragments that are referenced and rendered in the Fragments docs page."]},{"title":"Tile A","route":"/mosaic/fragments/tile-a","content":[]},{"title":"Tile B","route":"/mosaic/fragments/tile-b","content":[]},{"title":"Create a Site","route":"/mosaic/getting-started/create-a-site","content":["In this guide you will learn how to generate and serve a Mosaic site.","Prerequisites","To begin setting up a Mosaic site, you need to have the following software installed:","Yarn v1","Node.js v18 or higher","Step 1: Generate a Mosaic site","Run the following command in your project directory to generate a new Mosaic site:","npx @jpmorganchase/mosaic-create-site create -o my-sample-site","This command creates a new Mosaic site in the my-sample-site directory.","Next, navigate to the site directory:","cd my-sample-site","Step 2: Serve the site","The example site you have generated comes preconfigured with two ","sources",": a remote repository and a local docs folder. ","Sources are used by Mosaic to pull content from disparate locations and merge them into a single virtual filesystem that can be used by a Mosaic site.","Set up Git credentials","If you want the site to read from remote repositories, you need to set up an environment variable to store your Git credentials. ","Follow these steps:","Open a terminal or command prompt.","Replace "," and "," in the following commands with your actual Git username and personal access token.","On Unix:","export MOSAIC_DOCS_CLONE_CREDENTIALS=\":\"","On Windows:","set MOSAIC_DOCS_CLONE_CREDENTIALS=\":\"","This sets the MOSAIC_DOCS_CLONE_CREDENTIALS environment variable with your Git credentials.","Serve command","Now you can serve your Mosaic site by running the following command:","yarn serve","Access your Mosaic site from a browser using the following URLs:","To browse the content from your local source: http://localhost:3000/local","To browse the content from the Mosaic Git repo source: http://localhost:3000/mosaic","That's it! ","Your Mosaic site is now up and running.","Next Steps:","Deploy your Mosaic site to AWS or Vercel for production use.","Create more pages to expand your site's content.","Configure your own sources in the mosaic.config.mjs file to pull content from different locations.","Theme your site"]},{"title":"Getting Started","route":"/mosaic/getting-started/index","content":["Getting Started with Mosaic","Follow our step-by-step guides to quickly create and deploy your first Mosaic site."]},{"title":"Publish a site to AWS","route":"/mosaic/getting-started/publish-site-to-aws","content":["Publish a site to AWS using S3 snapshots.","Step 1: Generate a Mosaic site","If you have already created your Mosaic site, skip ahead to step 2.","> npx @jpmorganchase/mosaic-create-site -o my-sample-site\n","> cd my-sample-site","Step 2: Create a Github repository","> git init\n","> git remote add origin git@github.com:username/my-sample-site.git\n","> git add .\n","> git commit -m \"initial commit\"\n","> git push origin main","Step 3: Generate a snapshot of content","Consider a snapshot as a directory of static content previously pulled from your content sources, which does not update itself.","> yarn gen:snapshot","Step 4: Configure environment for S3","> export MOSAIC_MODE=\"snapshot-s3\"\n","> export MOSAIC_S3_BUCKET=\"\"\n","> export MOSAIC_S3_REGION=\"\"\n","> export MOSAIC_S3_ACCESS_KEY_ID=\"\"\"\n","> export MOSAIC_S3_SECRET_ACCESS_KEY=\"\"\n","> yarn mosaic upload -S ./snapshots/latest","Step 5: Setup AWS","Switch to the ","AWS Amplify"," console and deploy your app as a SSR application by following the ","AWS docs",".","Setup an S3 bucket as per the ","AWS S3 docs",".","Step 7: Configure your AWS app","Add the environment vars to the hosted app via your console","MOSAIC_MODE=\"snapshot-s3\"\n","MOSAIC_S3_BUCKET=\"\"\n","MOSAIC_S3_REGION=\"\"\n","MOSAIC_S3_ACCESS_KEY_ID=\"\"\"\n","MOSAIC_S3_SECRET_ACCESS_KEY=\"\"","Add the following build settings","version: 1\n","frontend:\n"," phases:\n"," preBuild:\n"," commands:\n"," - yarn install\n"," - env | grep -e MOSAIC >> .env.production\n"," build:\n"," commands:\n"," - yarn run build\n"," artifacts:\n"," baseDirectory: .next\n"," files:\n"," - '**/*'\n"," cache:\n"," paths:\n"," - node_modules/**/*","Ensure the Node is set to 16","Step 8: Upload your snapshot","Upload your snapshot to S3 storage.","> yarn mosaic upload -S ./snapshots/latest"]},{"title":"Publish","route":"/mosaic/publish/index","content":["To create your first Mosaic site, we have created a command line generator that scaffolds a ","standard"," site.","A ","standard"," site offers","an out the box, working site, which showcases local and remote content sources","a minimal set of files that can be configured with your own components, themes, layouts, sources and plugins","an update path that enables you to update Mosaic, independently of your own configuration","Create your first site","Install the Mosaic create site script.","> yarn global add @jpmorganchase/mosaic-create-site","Create a directory for your site and run the "," script.","> mkdir mosaic-sample-site\n","> cd mosaic-sample-site\n","> mosaic-create-site -f .","Define the environment variable, which enables us to access your remote repo.","> export MOSAIC_DOCS_CLONE_CREDENTIALS=\"\"","The "," environment variable is composed of your git username and your PAT token.\n","Follow these ","docs"," to see how to create your own PAT token.","Your site is ready to run.","> yarn serve","In your browser load ","Congratulations, you have created your first Mosaic site."]},{"title":"Publish a site to AWS","route":"/mosaic/publish/publish-site-to-aws","content":["A Mosaic site is a ","Next.Js"," app.","To publish a Next.Js App to AWS, deploy your app as a SSR application by following the ","AWS docs",".","Once the basic app has been configured, add the Mosaic specifics.","Add the environment vars to the hosted app via the Amplify console","MOSAIC_MODE=\"snapshot-s3\"\n","MOSAIC_S3_BUCKET=\"\"\n","MOSAIC_S3_REGION=\"\"\n","MOSAIC_S3_ACCESS_KEY_ID=\"\"\"\n","MOSAIC_S3_SECRET_ACCESS_KEY=\"\"","Add the following build settings","version: 1\n","frontend:\n"," phases:\n"," preBuild:\n"," commands:\n"," - yarn install\n"," - env | grep -e MOSAIC >> .env.production\n"," build:\n"," commands:\n"," - yarn run build\n"," artifacts:\n"," baseDirectory: .next\n"," files:\n"," - '**/*'\n"," cache:\n"," paths:\n"," - node_modules/**/*","Ensure the Node is set to 16"]},{"title":"Publish a site to Vercel","route":"/mosaic/publish/publish-site-to-vercel","content":["A Mosaic site is a ","Next.Js"," app.","To publish a Next.Js App to Vercel, refer to the ","Vercel docs",".","Deployment","As the ","vercel platform"," hosts static content you will need to deploy a mosaic snapshot. ","There is no option to run mosaic in ","active mode",".","1. ","Update Config File","Add the following to the mosaic config file used by your site:"," deployment: { mode: 'snapshot-file', platform: 'vercel' }","2. ","Set Environment Variables","Set 2 ","environment variables"," in the vercel dashboard.","| Variable Name | Value |\n","| ------------------- | ----------------- |\n","| MOSAIC_MODE | snapshot-file |\n","| MOSAIC_SNAPSHOT_DIR | snapshots/latest. ","|","3. ","Run Build and Deploy","The "," command used by vercel must run "," followed by ","The "," command is needed to workaround an ","output file tracing"," problem.","Example:","yarn build && yarn deploy","Output File Tracing","Output File Tracing"," is a feature of Next.js that uses static analysis\n","to determine what files are needed to deploy a production version of an application.","Due to the architecture of mosaic, snapshot files can be ignored by this process and therefore excluded from the build artifacts deployed by vercel.","If you are deploying your site to the ","vercel platform"," then the mosaic site has a "," command that will update the nextjs output trace to include the snapshot files."]},{"title":"Test","route":"/mosaic/test/index","content":["Pages for e2e testing."]},{"title":"Layouts","route":"/mosaic/configure/layouts/index","content":["Todo..."]},{"title":"Active mode","route":"/mosaic/configure/modes/active","content":["In "," mode content can be ","pulled"," from heterogeneous data sources and normalized via plugins, to the configured components/theme.\n","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 ","a remote source, which loads content from a ","sample Github repository","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.\n","e.g Our sample docs are aggregated into a ","namespace"," called "," and served by the user journey ","Mosaic doc sources are defined by a file called ","Here is how that might look for a standard site.","Pull your local content","To tryout local content creation, add a file called","The load ","Each directory should contain an "," which is the default page, when a page is loaded without a path","Now create other pages and subdirectories and explore how Mosaic, builds your user-journeys from your fileset.","Pull your remote content","To tryout remote content creation, your standard site comes pre-configured to load our Mosaic sample docs.","Edit the "," and change your "," and "," to pull content from other repos."]},{"title":"Modes of operation","route":"/mosaic/configure/modes/index","content":["Mosaic can operate in 3 different modes","Active updates","In ","active"," mode, content updates in real-time.","active"," mode content is pulled at configured intervals in real-time, as defined by ",".","Read the ","active"," configuration docs.","Static content","Consider a snapshot as a directory of static content previously pulled from your content sources, which does not update itself.","In a snapshot mode, the snapshot does update itself.","File based snapshots","In "," mode, immutable snapshots of content are loaded at startup from the local file-system.","Read the ","snapshot-file"," configuration docs.","S3 based snapshots","In "," mode, snapshots of content are loaded at startup from a remote S3 bucket.","Read the ","snapshot-s3"," configuration docs."]},{"title":"Snapshot file mode","route":"/mosaic/configure/modes/snapshot-file","content":["In "," mode a local immutable snapshot can be loaded by the site. ","Typically, the snapshot and the site are\n","deployed together and upon startup the site can load the snapshot from the local file-system.","To use "," mode","export MOSAIC_MODE=\"snapshot-file\"\n","export MOSAIC_SNAPSHOT_DIR=\"./snapshot/latest\"","Generating a snapshot","To generate a snapshot, run","yarn gen:snapshot","Commit the snapshot to your Git repo and push the site+snapshot to your Git repo, within the same branch."]},{"title":"Snapshot AWS/S3 mode","route":"/mosaic/configure/modes/snapshot-s3","content":["In "," mode a snapshot can be loaded from a pre-configured AWS S3 bucket.","To use "," mode","> export MOSAIC_MODE=\"snapshot-s3\"\n","> MOSAIC_S3_BUCKET=\"\"\n","> MOSAIC_S3_REGION=\"\"\n","> MOSAIC_S3_ACCESS_KEY_ID=\"\"\n","> MOSAIC_S3_SECRET_ACCESS_KEY=\"\"","Generating a snapshot","To generate a snapshot, run","yarn gen:snapshot","Uploading a snapshot to S3","To upload a snapshot to S3, define the required environment variables and run","yarn mosaic upload -S "]},{"title":"$afterSource","route":"/mosaic/configure/plugins/after-source","content":["The first lifecycle hook to trigger after receiving pages from a source.\n","The pages can safely be mutated and will be reflected in the final filesystem that gets generated.\n","It ","must"," return a collection of pages.","The "," lifecycle event is called with:","pages - the collection of pages emitted by the source","helpers - an object with useful methods","options - the options specified for the plugin in the mosaic config file","Helpers","The helpers provided with this lifecycle event are listed in the table below","| Property | Description |\n","| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n","| serialiser | A matching "," for serialising/deserialising pages when reading/writing to the filesystem |\n","| config | A mutable object for sharing data with other lifecycle phases of all plugins for this source (including in the main thread) in this plugin |\n","| pageExtensions | A collection of pageExtensions the source is using |\n","| ignorePages | A collection of page globs that are to be ignored |","Example - Log out all page routes","async function $afterSource(pages, { config, ignorePages, pageExtensions }) {\n"," for (const page of pages) {\n"," console.log(page.route);\n"," }\n"," return pages;\n","}"]},{"title":"afterUpdate","route":"/mosaic/configure/plugins/after-update","content":["Calls after the filesystem and symlinks have been reconstructed due to a change to the current source. ","This happens in the main thread.","Pages will ","not"," be cached when read at this stage, to allow for reading content and writing a new copy of it without the cached version taking effect. ","This method is safe to use with lazy loading, as the filesystem should return the full page when read.","Todo"]},{"title":"$beforeSend","route":"/mosaic/configure/plugins/before-send","content":["Calls after a filesystem has been built up from the source pages.\n","Plugin lifecycle method that triggers inside child processes.\n","It ","must"," return a collection of pages.","Todo"]},{"title":"Plugins","route":"/mosaic/configure/plugins/index","content":["Mosaic Plugins are lifecycle-based hooks that are called on ","every"," source at different stages. ","You will never need to invoke a lifecycle method directly as their execution is managed by a plugin runner.","Plugins enable Mosaic to have a lightweight and flexible, modular architecture by encapsulating features in a plugin","Installation","Configuration","Plugins are added to the "," collection of the mosaic config file. ","Like ","sources",", plugins have an options property that can be used to provide plugin specific configuration.","| Property | Description | Required |\n","| ----------- | --------------------------------------------------------------------------- | -------- |\n","| modulePath | The path to the installed plugin module | Yes |\n","| disabled | Exclude this plugin completely. ","Defaults to false | No |\n","| runtimeOnly | Exclude this plugin when generating a snapshot. ","Defaults to false | No |\n","| priority | The importance of this plugin. ","This highest number plugin will be run first | No |\n","| options | Collection of other configuration values | No |","Plugin lifecycle","The plugin lifecycle is triggered when a source emits content.\n","Whether the execution happens on the main thread or the source worker thread depends on which lifecycle event is called. ","There are 4 lifecycle events:","$afterSource","$beforeSend","afterUpdate","shouldClearCache","Plugin methods that trigger inside the main thread should be async and highly optimised to avoid\n","holding up the main thread.","Mosaic Plugins","Mosaic ships with many plugins, most of which are enabled when using the standard generator.","plugins: [\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/SiteMapPlugin',\n"," options: {}\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/SearchIndexPlugin',\n"," options: { maxLineLength: 240, maxLineCount: 240 }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/BreadcrumbsPlugin',\n"," options: {\n"," indexPageName: 'index.mdx'\n"," }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/LazyPagePlugin',\n"," // This plugin must be the very last to run, so it can strip off metadata and content after the other\n"," // plugins are done with them\n"," priority: -2,\n"," // Exclude this plugin in builds\n"," runTimeOnly: true,\n"," options: {\n"," cacheDir: '.tmp/.pull-docs-last-page-plugin-cache'\n"," }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/PagesWithoutFileExtPlugin',\n"," options: {}\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/SidebarPlugin',\n"," options: {\n"," filename: 'sidebar.json'\n"," }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/ReadingTimePlugin',\n"," options: {}\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/SharedConfigPlugin',\n"," options: {\n"," filename: 'shared-config.json'\n"," },\n"," priority: 3\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/TableOfContentsPlugin',\n"," options: {\n"," minRank: 1,\n"," maxRank: 3\n"," }\n"," }\n"," ]"]},{"title":"shouldClearCache","route":"/mosaic/configure/plugins/should-clear-cache","content":["This method should return a boolean that will indicate if this source should clear page caches.\n","This method calls whenever another source (not this one) has changed. ","Returning undefined, false or no value, will result in the cache to be retained","Todo"]},{"title":"Git Repo Source","route":"/mosaic/configure/sources/git-repo-source","content":["The Git Repo Source is used to pull content from a remote git repository e.g. github.","Installation","Credentials and Access tokens","To successfully clone the git repo, the source definition must include credentials that have sufficient permissions to clone the repository.","We recommend storing a ","personal access token"," in an environment variable and using the environment variable in the source definition.","This keeps credentials out of code where they may be accidentally exposed to third parties.","Example","export MOSAIC_DOCS_CLONE_CREDENTIALS=\":\",","Configuration","| Property | Description | Required |\n","| ------------------- | -------------------------------------------------------------------------------- | -------- |\n","| modulePath | The path to the installed module (@jpmorganchase/mosaic-source-git-repo) | Yes |\n","| namespace | The scope for this source. ","| Yes |\n","| disabled | When true, content from this source is not used | No |\n","| options.credentials | Collection of URLS to make requests | Yes |\n","| options.prefixDir | The root path used in the content URL | Yes |\n","| options.subfolder | The name of the folder within the cloned repo containing the docs | Yes |\n","| options.repo | The repo URL | Yes |\n","| options.branch | The branch or tag to clone | Yes |\n","| options.extensions | Collection of file extensions that the source will look for inside the subfolder | Yes |\n","| options.remote | The name of the git remote to use. ","Defaults to origin. ","| Yes |","Example Git Repo Source Definition","\n"," {\n"," modulePath: '@jpmorganchase/mosaic-source-git-repo',\n"," namespace: 'mosaic',\n"," options: {\n"," credentials: process.env.MOSAIC_DOCS_CLONE_CREDENTIALS,\n"," prefixDir: 'mosaic',\n"," subfolder: 'docs',\n"," repo: 'https://github.com/jpmorganchase/mosaic.git',\n"," branch: 'main',\n"," extensions: ['.mdx'],\n"," remote: 'origin'\n"," }\n"," }\n"]},{"title":"HTTP Source","route":"/mosaic/configure/sources/http-source","content":["The HTTP Source is used to pull content over HTTP.","Multiple endpoints can be specified and the source will combine and transform the response from each into a single collection of pages.","Installation","Configuration","| Property | Description | Required |\n","| ------------------------------------------ | ----------------------------------------------------------------------------- | -------- |\n","| modulePath | The path to the installed module (@jpmorganchase/mosaic-source-http) | Yes |\n","| namespace | The scope for this source | Yes |\n","| disabled | When true, content from this source is not used | No |\n","| options.endpoints | Collection of URLS to make requests | Yes |\n","| options.prefixDir | The root path used in the content URL | Yes |\n","| options.transformResponseToPagesModulePath | The path of the module used to transform endpoint responses into Mosaic pages | Yes |\n","| options.checkIntervalMins | Number of minutes to wait between requests. ","Defaults to 5 minutes | No |\n","| options.initialDelayMs | Number of milliseconds to wait for making initial request. ","Defaults to 1000 | No |","Example HTTP Source Definition"," {\n"," modulePath: '@jpmorganchase/mosaic-source-http',\n"," namespace: 'my-namespace',\n"," options: {\n"," prefixDir: 'docs',\n"," endpoints: [\n"," 'https://api.data.com/blah',\n"," 'https://api.data.com/hello'\n"," ],\n"," transformResponseToPagesModulePath: '@scope/transformer-package'\n"," }\n"," }"]},{"title":"Sources","route":"/mosaic/configure/sources/index","content":["Sources are what Mosaic uses to pull content from disparte locations and merge into a single virtual filesystem that can be used by a Mosaic Site.","Depending on the ","mode"," used, sources can update periodically ensuring that new content is made available automatically.","Source Definitions","Source Definitions are specified in the "," collection of a mosaic config file.","Each source uses a ","zod schema"," to validate the provided JSON to ensure that all required information for the source to pull content has been provided.","A source definition at a minimum needs to provide the module path of the source and the ","namespace"," that it will use. ","A namespace is not unique across sources though it is common that each source has a different namespace.","Lastly, the options field can be used as a bucket for configuration values needed to configure the source e.g. credentials.","Users are free to add any property as a source option but please read the ","gotchas","\n","first regarding the allowed ","values",".","Example Local Folder Source Definition"," /**\n"," * Demonstrates a local file-system source, in this case a relative path to where the\n"," * site was generated.\n"," * Access from your browser as http://localhost:3000/local\n"," */\n"," {\n"," modulePath: '@jpmorganchase/mosaic-source-local-folder',\n"," namespace: 'local', // each site has it's own namespace, think of this as your content's uid\n"," options: {\n"," rootDir: '..","/../docs', // relative path to content\n"," prefixDir: 'local', // root path used for namespace\n"," extensions: ['.mdx'] // extensions of content which should be pulled\n"," }\n"," }","Source Namespace","A Source Namespace is a scoping mechanism for Mosaic sources used to filter the content loaded by Mosaic. ","By default all sources specified in the mosaic config file are loaded.","sources: [\n"," {\n"," namespace: 'my-namespace',\n"," modulePath: '@jpmorganchase/mosaic-source-local-folder'\n"," }\n","];","The following command will ensure mosaic only loads sources with the "," scope.","yarn mosaic serve -c ''./mosaic.config.mjs' -p 8080 --scope \"local\"","Source Schedules","Source schedules define how often sources pull in content that exists remotely and if a failed source is retried. ","More information can be found ","here","Source Types","Out of the box, Mosaic provides 3 source \"types\":","Local Folder","Git Repo Source","HTTP Source","Sources must expose an observable interface so it is possible to compose sources together e.g. the Git Repo source uses the Local Folder source internally to watch the cloned folder for changes.","Watching for Updates","When running in ","active mode",", Mosaic will watch for any changes to the source content and if a change is detected, will initiate a pull of that new content.","How often to check for updates and how updates are triggered are a matter for the source to handle. ","Mosaic simply responds when a source emits new content.","Source Worker Thread","Sources are executed inside their own worker thread to ensure that the main thread is not overloaded. ","It is here that a local virtual filesystem for the source is created and where several of the ","Plugin Lifecycle"," events are triggered.","Gotchas","A service worker thread uses ","postMessage"," to communicate with the main thread and vice-versa.","This is important because it limits what values can be provided in the source definition to those that can be processed by the ","Structured Clone Algorithm","."]},{"title":"Local Folder Source","route":"/mosaic/configure/sources/local-folder-source","content":["The Local Folder Source is used to pull content from a folder located on the same machine as Mosaic is running.","It is common to use this source when running mosaic locally.","Installation","Configuration","| Property | Description | Required |\n","| ------------------ | ------------------------------------------------------------------------------ | -------- |\n","| modulePath | The path to the installed module (@jpmorganchase/mosaic-source-local-folder) | Yes |\n","| namespace | The scope for this source | Yes |\n","| disabled | When true, content from this source is not used | No |\n","| options.rootDir | The top level directory content will be pulled from | Yes |\n","| options.prefixDir | The root path used in the content URL | Yes |\n","| options.extensions | Collection of file extensions that the source will look for inside the rootDir | Yes |","Example Local Folder Source Definition","{\n"," modulePath: '@jpmorganchase/mosaic-source-local-folder',\n"," namespace: 'local', // each site has it's own namespace, think of this as your content's uid\n"," options: {\n"," rootDir: '..","/../docs', // relative path to content\n"," prefixDir: 'local', // root path used for namespace\n"," extensions: ['.mdx'] // extensions of content which should be pulled\n"," }\n","}","This source will look for content with the \".mdx\" extension in a \"docs\" directory 2 levels up from the Mosaic working directory. ","That content is included in the \"local\" namespace and available from a route that is prefixed with \"local\".","So if you had a file, "," then you would be able to view it at ","."]},{"title":"Source Schedules","route":"/mosaic/configure/sources/schedules","content":["A source schedule defines how often a source initiates a content pull and what to do when their is a failure.","A schedule can be specified for each source in the source definition, but should a source not provide a schedule it will inherit the \"global\" schedule.","Configuration","| Property | Description | Required | Default |\n","| ----------------- | -------------------------------------------------------------------------------------- | -------- | ------- |\n","| checkIntervalMins | The length of time in minutes before triggering a content refresh | Yes | 30 mins |\n","| initialDelayMs | Startup delay for the source. ","| Yes | 1000 ms |\n","| retryEnabled | When true, failures will trigger another content pull | No | true |\n","| retryDelayMins | The interval between retries. ","This will rise exponentially on every failure. ","| No | 5 |\n","| maxRetries | Maximum number of retry attempts | No | 100 |\n","| resetOnSuccess | If true, when a source recovers and emits pages it's retry counter is returned to zero | No | true |","Global Schedule","The global schedule applies to all sources that do ","not"," provide their own schedule. ","It can be configured as a top-level property of the Mosaic config file."," schedule: {\n"," checkIntervalMins: 60,\n"," initialDelayMs: 1000,\n"," retryDelayMins: 15,\n"," maxRetries: 20\n"," }","Example","Given the config file below:"," schedule: {\n"," checkIntervalMins: 30,\n"," initialDelayMs: 1000,\n"," retryDelayMins: 5,\n"," maxRetries: 10\n"," },\n"," sources: [\n"," {\n"," modulePath: '@jpmorganchase/mosaic-source-git-repo',\n"," namespace: 'sourceA',\n"," options: {\n"," credentials: 'credentials',\n"," prefixDir: 'sourceA',\n"," subfolder: 'docs',\n"," repo: 'source-a-repo-url',\n"," branch: 'develop',\n"," extensions: ['.mdx'],\n"," remote: 'origin'\n"," }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-source-git-repo',\n"," namespace: 'sourceB',\n"," schedule:{\n"," checkIntervalMins: 60,\n"," initialDelayMs: 5000,\n"," retryDelayMins: 30,\n"," maxRetries: 50\n"," }\n"," options: {\n"," credentials: 'credentials',\n"," prefixDir: 'sourceB',\n"," subfolder: 'docs',\n"," repo: 'source-b-repo-url',\n"," branch: 'develop',\n"," extensions: ['.mdx'],\n"," remote: 'origin'\n"," }\n"," }\n"," ]","Source A will inherit the global schedule so it will:","Start after a 1 second delay","Pull content every 30 minutes","Retry a failed content pull after an initial 5 minute delay","Retry 10 times and if still unsuccessful, closing","Source B has its own schedule so it will:","Start after a 5 second delay","Pull content every 60 minutes","Retry a failed content pull after an initial 30 minute delay","Retry 50 times and if still unsuccessful, closing","Retry Strategy","The retry strategy that Mosaic employs is ","Exponential Backoff",". ","This is a common strategy for networking applications that aims to prevent retries from causing more harm than good.","For example, given a source schedule that has a 1 minute retry delay and will retry a maximum of 3 times then the total time spent retrying is 7 minutes:","1 minute delay then 1st retry","2 minute delay then 2nd retry","4 minute delay then 3rd (and final) retry","Total delay: 1 + 2 + 4 = 7 minutes","As you can see, the delay between retries is growing exponentially giving the content source more time to recover after each retry."]},{"title":"Custom Components","route":"/mosaic/configure/theme/custom-components","content":["Learn how to add your own custom components to your Mosaic site.","Create Components Folder","To start, create a "," folder under "," where you'll store your custom components.","src/\n","└── components/","In this tutorial, we will create a custom "," component.","Create Card Component","Inside the "," folder, create a "," folder, which will contain your React "," component. ","The "," folder should include "," and "," files as shown in the structure below:","├── src/\n","│ ├── components/\n","│ │ └── card/\n","│ │ ├── index.tsx\n","│ │ └── card.module.css","Card Component: index.tsx","Create your "," component within the "," file:","import React from 'react';\n","import styles from './card.module.css';\n","\n","type CardProps = {\n"," title: string;\n"," content: string;\n","};\n","\n","export const Card: React.FC = ({ title, content }) => {\n"," return (\n","
\n","

{title}

\n","

{content}

\n","
\n"," );\n","};","Card Component: card.module.css","Define your component styles in the "," file:",".card {\n"," background-color: #f5f5f5;\n"," border: 1px solid #ccc;\n"," border-radius: 4px;\n"," box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n"," padding: 16px;\n"," transition: box-shadow 0.2s ease-in-out;\n","}\n","\n",".card:hover {\n"," box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n","}\n","\n",".card h2 {\n"," color: #333;\n"," font-size: 24px;\n"," margin-bottom: 8px;\n","}\n","\n",".card p {\n"," color: #666;\n"," font-size: 16px;\n"," line-height: 1.5;\n","}","In this example, we use a CSS file, but you can use whichever styling approach you prefer, such as ","vanilla extract",".","To export your "," component, create an "," file in the "," folder:","export * from './card';","Your final folder structure should look like this:","├── src/\n","│ ├── components/\n","│ │ ├── card/\n","│ │ │ ├── index.tsx\n","│ │ │ └── card.module.css\n","│ │ ├── index.ts","Import Custom Card Component","To use your custom "," component, import it into your site's "," file. ","Add the following line to your imports:","import * as myComponents from '../components';","Replace this line:","const components = mosaicComponents;","with:","const components = {\n"," ...mosaicComponents,\n"," ...myComponents\n","};","This will add your custom components to the site, and any custom components in "," will override the corresponding ones in ",". ","The spread operator (",") merges both "," and "," objects, giving priority to "," when there is a naming conflict.","Use Your Custom Card Component","Now you're ready to use your custom "," component. ","Build and run your site, and add the "," component to an MDX file in your "," folder or another source:","","You can create and add more custom components to your Mosaic site by following the same process."]},{"title":"Custom CSS","route":"/mosaic/configure/theme/custom-css","content":["You can customize the look and feel of your Mosaic site by creating cusotm CSS files. ","Here is a step-by-step guide to help you create your own CSS theme.","Create a CSS folder","To get started, create a folder named \"css\" in the \"src\" folder of your Mosaic project.","src/\n","└── css/","Create your theme","Inside the \"css\" folder, create a folder named \"global\". ","This is where you will add your custom styles.","src/\n","└── css/\n"," ├── global/\n"," ├── index.css","Create an \"index.css\" file inside the \"css\" folder. ","This file will import your custom styles.","@import './global/';","Inside your global folder, create a separate CSS file for each part of your site that you want to customize. ","For instance, if you want to change the text styling, create a \"text.css\" file inside the \"global\" folder. ","Here is an example of how your \"text.css\" file could look like:","h1 {\n"," /* Set custom font size and weight */\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h2 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h3 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h4 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h5 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h6 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","p {\n"," font-size: /* insert value */ ;\n"," line-height: /* insert value */ ;\n","}","You can add as many CSS files as you need, depending on how much you want to customize your site.","Create an \"index.css\" file inside the \"global\" folder. ","This file will import your custom styles, in this example we are importing our \"text.css\" file.","@import './text.css';","Your \"css\" folder should now look like this:","src/\n","└── css/\n"," ├── global/\n"," │ ├── text.css\n"," │ ├── index.css\n"," ├── index.css","Import your custom CSS into your site","To apply your custom styles to your Mosaic site, open your \"_app.tsx\" file and add the following line to the bottom of your imports:","import '../css/index.css';","Congratulations! ","You have successfully applied your custom CSS styles to your site. ","This example demonstrated how to create text styles, but you can use the same approach to customize other aspects of your site as well."]},{"title":"Theming Your Site","route":"/mosaic/configure/theme/index","content":["Create a unique look and feel for your Mosaic site by customizing the CSS theme and integrating your own UI components.","Customize the CSS","Adapt various design elements of your Mosaic site to create a cohesive visual theme. ","Refer to our guide to learn more about crafting a custom CSS theme:","CSS Theme Guide","Import Custom Components","Incorporate your own UI components, to tailor the look and functionality of your content. ","This tutorial will walk you through the process of adding custom components to your site:","Adding Custom Components Tutorial"]},{"title":"Aliases Test","route":"/mosaic/test/aliases/index","content":["This page is the alias test page."]},{"title":"Detail Highlight Test Page","route":"/mosaic/test/layouts/detail-highlight","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Detail Overview Test Page","route":"/mosaic/test/layouts/detail-overview","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Detail Technical Test Page","route":"/mosaic/test/layouts/detail-technical","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Edit Layout","route":"/mosaic/test/layouts/edit","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Full Width Layout","route":"/mosaic/test/layouts/full-width","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Layouts","route":"/mosaic/test/layouts/index","content":["Pages for e2e testing of layouts."]},{"title":"Landing Layout Test Page","route":"/mosaic/test/layouts/landing","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Newsletter Test Page","route":"/mosaic/test/layouts/newsletter","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Product Discover Test Page","route":"/mosaic/test/layouts/product-discover","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Product Preview Test Page","route":"/mosaic/test/layouts/product-preview","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Refs Data","route":"/mosaic/test/refs/data","content":[]},{"title":"Refs Test","route":"/mosaic/test/refs/index","content":["The sidebar priority is ",".","The other page data is ","."]}] \ No newline at end of file +[{"title":"Mosaic","route":"/mosaic/index","content":["True to its name, Mosaic brings together several concepts—including content, design and technical infrastructure—to deliver a unified website experience that is truly greater than the sum of its individual parts.","With Mosaic, you can:","Don't move your content where it does not belong. ","Compose content from remote data sources which\n","are pulled at runtime by our content aggregator.","Visualize your content with your own theme, layouts and components or use the Mosaic Design\n","language.","Extend the existing code and add your own content source types through our simple plugin\n","architecture.","Publish your content through Server Side Rendering (SSR) or generate a snapshot of your content\n","and serve it as a Statically Generated Site (SGS).","Creating a website has never been so easy!"]},{"title":"Aliases","route":"/mosaic/author/aliases","content":["Aliases are virtual 'symlinks' of pages, allowing one page to take on one or more other routes.\n","This is not the same as copying the page, it is a primitive filesystem link which is resolved by Mosaic.","Use Cases","Aliases are great for linking to an old route if you've moved a page to a new place.\n","They can also be used to create short hand links to pages or to 'clone' a copy of a page into\n","another section of the site where it may be relevant.","Example","This is the frontmatter for this page:","---\n","title: Aliases\n","layout: DetailTechnical\n","aliases:\n"," - /mosaic/example/aliases\n","---","Try accessing this page from ","/mosaic/example/aliases"]},{"title":"Fragments","route":"/mosaic/author/fragments","content":["Fragments, also known as content fragments, are powerful tools that allow you to incorporate content from other pages into your documentation. ","By creating an MDX file and using the ","generic directives"," syntax ",", you can easily render the fragment in another file, providing modularity and reusability to your content.","Use Cases","Fragments offer various use cases, such as:","Consistent Content",": Use fragments to maintain consistent content across multiple pages. ","For instance, if you have a table or a tile that appears on multiple pages, you can create a fragment for it and include it in all relevant files. ","This ensures that any updates made to the fragment automatically reflect across the entire documentation.","Reusable Components",": Fragments enable the creation of reusable components or sections. ","You can define a complex or commonly used section once and then include it in multiple pages as needed. ","This approach saves time and effort, as you only need to update the fragment file to propagate changes throughout your documentation.","Modular Documentation",": With fragments, you can break down your documentation into smaller, manageable pieces. ","Each fragment represents a specific topic or section, allowing you to organize and structure your content more efficiently. ","This modular approach simplifies maintenance and makes it easier to navigate and update your documentation.","Usage","Firstly, enable the Fragment Plugin by adding the following to your plugins in ",".","{\n"," modulePath: '@jpmorganchase/mosaic-plugins/FragmentPlugin',\n"," options: {}\n","}","To include a fragment in your content, follow these steps:","Create an MDX file for the fragment you want to reuse. ","Remember to set the sidebar property of your fragment's frontmatter to exclude: true if you don't want the fragment to appear in the vertical navigation menu.","---\n","title: Fragment Title\n","sidebar:\n"," exclude: true\n","---","In the target file where you want to include the fragment, use the remark directive syntax ",".","Markdown Content Example","This is the contents of a fragment located at ",":","---\n","title: Content Fragment\n","sidebar:\n"," exclude: true\n","---\n","\n","#### Fragment Title\n","\n","This is an example fragment of markdown content, being pulled from `../fragments/content-fragment.mdx`.\n","The below code snippet will render the content from the content-fragment.mdx file in your target file:",":fragment{src=\"../fragments/content-fragment.mdx\"}","Example output:",":fragment","Component Example","Here is another example, where the fragment files each contain a "," component.",":fragment{src=\"../fragments/tile-a.mdx\"} :fragment{src=\"../fragments/tile-b.mdx\"}","The above code will render the content from tile-a.mdx and tile-b.mdx files, demonstrated below:",":fragment"," :fragment"]},{"title":"Frontmatter","route":"/mosaic/author/frontmatter","content":["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: ",".","Example page yaml","---\n","title: Page Title\n","layout: DetailTechnical\n","sidebar:\n"," priority: 4\n","---\n","\n","// frontmatter is closed and now comes page content\n","# Page Title\n","\n","This is some content.\n","Accessing Frontmatter in content","With the syntax below it is possible to directly reference frontmatter inside content using curly brackets and the "," object.","You can think of "," as a JSON object that holds all the frontmatter of a page and when the Mosaic "," encounters the curly brackets then the value in the frontmatter will be resolved.","{meta.title}\n","{meta.description}\n","{meta.someValueYouHaveAddedToTheFrontmatter}","This is very common to see Mosaic pages that reference the title as shown below:","---\n","title: Title\n","---\n","\n","# {meta.title}","Plugins & Frontmatter","Mosaic plugins can also embed their output into page frontmatter in 2 different ways:","a property is directly added to the page object","a JSON file is generated and referenced using a ","ref","Adding a property to the page","A plugin can add a property to a page simply by extending the page object it receives in the "," lifecycle event:","async function $afterSource(pages) {\n"," for (const page of pages) {\n"," page.newProperty = 'Hello'\n"," }\n"," return pages;\n","}","You could use this property in the page content using ","JSON File","Let's take a look at the ",".","The purpose of this plugin is to crawl the page hierarchy to find the closest "," found in any parent page's frontmatter.","Finds all index pages among the source docs","Deserialises those pages so it can read the frontmatter and content of the page","If a property called "," in the page frontmatter is found a new file named shared-config.json is created","Adds a ref named "," to the shared config file that points to the shared config of the index page","import type { Page, Plugin as PluginType } from '@jpmorganchase/mosaic-types';\n","import { flatten } from 'lodash-es';\n","import path from 'path';\n","\n","function createFileGlob(url, pageExtensions) {\n","if (pageExtensions.length === 1) {\n","return `${url}${pageExtensions[0]}`;\n","}\n","return `${url}{${pageExtensions.join(',')}}`;\n","}\n","\n","interface SharedConfigPluginPage extends Page {\n","sharedConfig?: string;\n","}\n","\n","interface SharedConfigPluginOptions {\n","filename: string;\n","}\n","\n","const SharedConfigPlugin: PluginType = {\n","async $beforeSend(\n"," mutableFilesystem,\n"," { config, serialiser, ignorePages, pageExtensions },\n"," options\n"," ) {\n"," const pagePaths = await mutableFilesystem.promises.glob(\n"," createFileGlob('**/index', pageExtensions),\n"," {\n"," ignore: [options.filename, ...flatten(ignorePages.map(ignore => [ignore, `**/${ignore}`]))],\n","cwd: '/'\n","}\n",");\n","\n"," for (const pagePath of pagePaths) {\n"," const sharedConfigFile = path.join(path.dirname(String(pagePath)), options.filename);\n","\n"," const page = await serialiser.deserialise(\n"," String(pagePath),\n"," await mutableFilesystem.promises.readFile(String(pagePath))\n"," );\n"," if (page.sharedConfig) {\n"," config.setRef(sharedConfigFile, ['config', '$ref'], `${String(pagePath)}#/sharedConfig`);\n"," await mutableFilesystem.promises.writeFile(sharedConfigFile, '{}');\n"," } else {\n"," const baseDir = path.posix.resolve(path.dirname(String(pagePath)), '..","/');\n"," config.setAliases(path.join(baseDir, options.filename), [sharedConfigFile]);\n"," }\n"," }\n","\n","}\n","};\n","\n","export default SharedConfigPlugin;\n"]},{"title":"Author","route":"/mosaic/author/index","content":["Here you will learn how to author documentation using markdown, Mosaic components and page templates"]},{"title":"Markdown Syntax","route":"/mosaic/author/markdown-syntax","content":["Out of the box, Mosaic supports documents written in ","MDX"," which allows React components to be embedded within the ","basic syntax"," outlined in the original Markdown design document.","In addition to the basic markdown syntax, the MDX processor used by Mosaic has been configured to support additional markdown syntax and features:","GitHub flavored markdown (gfm)","Frontmatter","Mosaic Standard Components","All components that comprise the "," export from "," package are available to use out of the box in your documents.","This includes components for all standard markdown syntax and additional components like "," and ",".","Referencing Frontmatter","Frontmatter values into the page using the "," object. ","See ","frontmatter"," for more information.","Configuring Supported components","TODO"]},{"title":"Page Templates","route":"/mosaic/author/page-templates","content":["Todo..."]},{"title":"Refs","route":"/mosaic/author/refs","content":["Refs are a very powerful feature of Mosaic documents that use ","JSON References"," to reference\n","a property from the page frontmatter or frontmatter of other pages.","The key concept is that of a JSON pointer which takes the form ","A","#","B"," where:","A"," is the relative path from the current schema to a target schema. ","If A is empty, the reference is to a type or property in the same schema, an in-schema reference. ","Otherwise, the reference is to a different schema, a cross-schema reference.","B"," is the complete path from the root of the schema to a type or property in the schema. ","If # in not included or B is empty, the reference is to an entire schema.","To translate this for our purposes:","A"," is the relative path to a file in the filesystem.","B"," is the path to a property in the frontmatter of the file.","It's probably better explained with examples...","Local refs (In-schema reference)","It is possible to reference a page's own frontmatter to avoid duplication:","---\n","title: Refs\n","layout: DetailTechnical\n","sidebar:\n"," priority: 3\n","data:\n"," sidebarPriority:\n"," $ref: '#/sidebar/priority'\n","---","This page you are reading right now has a sidebar priority of ",".","The value of "," comes from "," in the frontmatter.","Notice that because we don't specify a path before the "," in the ref we need to put the whole\n","value inside quotes.","Remote Refs (Cross-schema reference)","It is possible to reference frontmatter of other pages. ","Again this helps avoid duplication but the real power is using refs to build the data model. ","See ","advanced"," for more information.","The ","index"," page of the Author section has this frontmatter:","---\n","title: Author\n","layout: DetailTechnical\n","sidebar:\n"," priority: 3\n","data:\n"," exampleRefData: Hello from Author page\n","---","This page you are currently looking at is referencing the "," in it's frontmatter like this:","---\n","title: Refs\n","layout: DetailTechnical\n","sidebar:\n"," priority: 3\n","data:\n"," authorRef:\n"," $ref: ./#/data/exampleRefData\n","---","I can then use the data and embed it in this page like this:","{meta.data.authorRef}","And here it is: ","Notice that we did not need to put "," in the ref since index pages are resolved\n","automatically.","Advanced","You have had a taste of the power and want to know more? ","OK, lets reference and then list out all the mosaic modes:","The Modes ","index"," page has this frontmatter:","---\n","title: Modes of operation\n","layout: DetailTechnical\n","sidebar:\n"," priority: 4\n","data:\n"," modes:\n"," $ref: ./*#/title\n","---","The ref here is essentially using a wildcard (the *) to grab the "," property from the frontmatter of every page in the modes folder.","We can reference that data just like before:","---\n","title: Refs\n","layout: DetailTechnical\n","sidebar:\n"," priority: 3\n","data:\n"," modes:\n"," $ref: ../configure/modes#/data/modes\n","---","Output","With the code below, the referenced data can be embedded in a page.","
    \n"," {meta.data.modes.map(mode => (\n","
  • {mode}
    • \n"," ))}\n","
","Output with Mosaic Components","You can use Mosaic components with referenced data as well. ","Below we are using the "," and "," components.","\n"," {meta.data.modes.map(mode => (\n"," \n"," ))}\n","","Setting Refs using Plugins","Mosaic plugins can create new refs, create new ","global"," refs and see existing refs created by the page or other plugins. ","This is achieved using a special "," property available in the plugin helpers.","Create new refs","Use the "," function from the helpers provided to plugin lifecycle events. ","You need to provide","The file/fullpath to write the ref to","The path to the ptoperty where the ref will be applied","The value of the ref, which can use wildcards","For example, the following would add a property to pages named ",". ","The value is the title of all pages in the ","same"," directory as the current page"," async $afterSource(pages, { config }) {\n"," for (const page of pages) {\n"," config.setRef(page.fullPath, ['titles', '$ref'], `**#/title`);\n"," }\n"," return pages;\n"," }","When setting the property path the last string must be "," otherwise you're not creating a ref\n","that will be resolved by the RefPlugin.","Existing refs","To view refs that already exist you can use ",". ","For example to see all refs for a page:"," config.data.refs[fullPathToPage]","Create global refs","Global refs are similar to regular refs except they do not pre-resolve. ","This means they are resolved when the referenced file is read and the global mosaic filesystem, made up of multiple sources, is used rather than the filesystem of a single source."]},{"title":"UI Components","route":"/mosaic/author/ui-components","content":["Todo..."]},{"title":"Configure","route":"/mosaic/configure/index","content":["Mosaic is a tool which retrieves, formats and combines documentation pages from any number of different external sources (such as GitHub repositories, local disks or REST endpoints), into a single filesystem for you to use in your websites."]},{"title":"Content Fragment","route":"/mosaic/fragments/content-fragment","content":["Fragment Title","This is an example fragment of markdown content, being pulled from ","."]},{"title":"Fragments","route":"/mosaic/fragments/index","content":["This folder contains example fragments that are referenced and rendered in the Fragments docs page."]},{"title":"Tile A","route":"/mosaic/fragments/tile-a","content":[]},{"title":"Tile B","route":"/mosaic/fragments/tile-b","content":[]},{"title":"Create a Site","route":"/mosaic/getting-started/create-a-site","content":["In this guide you will learn how to generate and serve a Mosaic site.","Prerequisites","To begin setting up a Mosaic site, you need to have the following software installed:","Yarn v1","Node.js v18 or higher","Step 1: Generate a Mosaic site","Run the following command in your project directory to generate a new Mosaic site:","npx @jpmorganchase/mosaic-create-site create -o my-sample-site","This command creates a new Mosaic site in the my-sample-site directory.","Next, navigate to the site directory:","cd my-sample-site","Step 2: Serve the site","The example site you have generated comes preconfigured with two ","sources",": a remote repository and a local docs folder. ","Sources are used by Mosaic to pull content from disparate locations and merge them into a single virtual filesystem that can be used by a Mosaic site.","Set up Git credentials","If you want the site to read from remote repositories, you need to set up an environment variable to store your Git credentials. ","Follow these steps:","Open a terminal or command prompt.","Replace "," and "," in the following commands with your actual Git username and personal access token.","On Unix:","export MOSAIC_DOCS_CLONE_CREDENTIALS=\":\"","On Windows:","set MOSAIC_DOCS_CLONE_CREDENTIALS=\":\"","This sets the MOSAIC_DOCS_CLONE_CREDENTIALS environment variable with your Git credentials.","Serve command","Now you can serve your Mosaic site by running the following command:","yarn serve","Access your Mosaic site from a browser using the following URLs:","To browse the content from your local source: http://localhost:3000/local","To browse the content from the Mosaic Git repo source: http://localhost:3000/mosaic","That's it! ","Your Mosaic site is now up and running.","Next Steps:","Deploy your Mosaic site to AWS or Vercel for production use.","Create more pages to expand your site's content.","Configure your own sources in the mosaic.config.mjs file to pull content from different locations.","Theme your site"]},{"title":"Getting Started","route":"/mosaic/getting-started/index","content":["Getting Started with Mosaic","Follow our step-by-step guides to quickly create and deploy your first Mosaic site."]},{"title":"Publish a site to AWS","route":"/mosaic/getting-started/publish-site-to-aws","content":["Publish a site to AWS using S3 snapshots.","Step 1: Generate a Mosaic site","If you have already created your Mosaic site, skip ahead to step 2.","> npx @jpmorganchase/mosaic-create-site -o my-sample-site\n","> cd my-sample-site","Step 2: Create a Github repository","> git init\n","> git remote add origin git@github.com:username/my-sample-site.git\n","> git add .\n","> git commit -m \"initial commit\"\n","> git push origin main","Step 3: Generate a snapshot of content","Consider a snapshot as a directory of static content previously pulled from your content sources, which does not update itself.","> yarn gen:snapshot","Step 4: Configure environment for S3","> export MOSAIC_MODE=\"snapshot-s3\"\n","> export MOSAIC_S3_BUCKET=\"\"\n","> export MOSAIC_S3_REGION=\"\"\n","> export MOSAIC_S3_ACCESS_KEY_ID=\"\"\"\n","> export MOSAIC_S3_SECRET_ACCESS_KEY=\"\"\n","> yarn mosaic upload -S ./snapshots/latest","Step 5: Setup AWS","Switch to the ","AWS Amplify"," console and deploy your app as a SSR application by following the ","AWS docs",".","Setup an S3 bucket as per the ","AWS S3 docs",".","Step 7: Configure your AWS app","Add the environment vars to the hosted app via your console","MOSAIC_MODE=\"snapshot-s3\"\n","MOSAIC_S3_BUCKET=\"\"\n","MOSAIC_S3_REGION=\"\"\n","MOSAIC_S3_ACCESS_KEY_ID=\"\"\"\n","MOSAIC_S3_SECRET_ACCESS_KEY=\"\"","Add the following build settings","version: 1\n","frontend:\n"," phases:\n"," preBuild:\n"," commands:\n"," - yarn install\n"," - env | grep -e MOSAIC >> .env.production\n"," build:\n"," commands:\n"," - yarn run build\n"," artifacts:\n"," baseDirectory: .next\n"," files:\n"," - '**/*'\n"," cache:\n"," paths:\n"," - node_modules/**/*","Ensure the Node is set to 16","Step 8: Upload your snapshot","Upload your snapshot to S3 storage.","> yarn mosaic upload -S ./snapshots/latest"]},{"title":"Publish","route":"/mosaic/publish/index","content":["To create your first Mosaic site, we have created a command line generator that scaffolds a ","standard"," site.","A ","standard"," site offers","an out the box, working site, which showcases local and remote content sources","a minimal set of files that can be configured with your own components, themes, layouts, sources and plugins","an update path that enables you to update Mosaic, independently of your own configuration","Create your first site","Install the Mosaic create site script.","> yarn global add @jpmorganchase/mosaic-create-site","Create a directory for your site and run the "," script.","> mkdir mosaic-sample-site\n","> cd mosaic-sample-site\n","> mosaic-create-site -f .","Define the environment variable, which enables us to access your remote repo.","> export MOSAIC_DOCS_CLONE_CREDENTIALS=\"\"","The "," environment variable is composed of your git username and your PAT token.\n","Follow these ","docs"," to see how to create your own PAT token.","Your site is ready to run.","> yarn serve","In your browser load ","Congratulations, you have created your first Mosaic site."]},{"title":"Publish a site to AWS","route":"/mosaic/publish/publish-site-to-aws","content":["A Mosaic site is a ","Next.Js"," app.","To publish a Next.Js App to AWS, deploy your app as a SSR application by following the ","AWS docs",".","Once the basic app has been configured, add the Mosaic specifics.","Add the environment vars to the hosted app via the Amplify console","MOSAIC_MODE=\"snapshot-s3\"\n","MOSAIC_S3_BUCKET=\"\"\n","MOSAIC_S3_REGION=\"\"\n","MOSAIC_S3_ACCESS_KEY_ID=\"\"\"\n","MOSAIC_S3_SECRET_ACCESS_KEY=\"\"","Add the following build settings","version: 1\n","frontend:\n"," phases:\n"," preBuild:\n"," commands:\n"," - yarn install\n"," - env | grep -e MOSAIC >> .env.production\n"," build:\n"," commands:\n"," - yarn run build\n"," artifacts:\n"," baseDirectory: .next\n"," files:\n"," - '**/*'\n"," cache:\n"," paths:\n"," - node_modules/**/*","Ensure the Node is set to 16"]},{"title":"Publish a site to Vercel","route":"/mosaic/publish/publish-site-to-vercel","content":["A Mosaic site is a ","Next.Js"," app.","To publish a Next.Js App to Vercel, refer to the ","Vercel docs",".","Deployment","As the ","vercel platform"," hosts static content you will need to deploy a mosaic snapshot. ","There is no option to run mosaic in ","active mode",".","1. ","Update Config File","Add the following to the mosaic config file used by your site:"," deployment: { mode: 'snapshot-file', platform: 'vercel' }","2. ","Set Environment Variables","Set 2 ","environment variables"," in the vercel dashboard.","| Variable Name | Value |\n","| ------------------- | ----------------- |\n","| MOSAIC_MODE | snapshot-file |\n","| MOSAIC_SNAPSHOT_DIR | snapshots/latest. ","|","3. ","Run Build and Deploy","The "," command used by vercel must run "," followed by ","The "," command is needed to workaround an ","output file tracing"," problem.","Example:","yarn build && yarn deploy","Output File Tracing","Output File Tracing"," is a feature of Next.js that uses static analysis\n","to determine what files are needed to deploy a production version of an application.","Due to the architecture of mosaic, snapshot files can be ignored by this process and therefore excluded from the build artifacts deployed by vercel.","If you are deploying your site to the ","vercel platform"," then the mosaic site has a "," command that will update the nextjs output trace to include the snapshot files."]},{"title":"Test","route":"/mosaic/test/index","content":["Pages for e2e testing."]},{"title":"Admin","route":"/mosaic/configure/admin/index","content":["There are several admin urls exposed by Mosaic that provide an insight into how the filesystem has been configured and a way to remotely manage sources.","Endpoints","| Endpoint | Method | Description | Params |\n","| -------------------------- | ------ | -------------------------------------------- | ---------------------- |\n","| "," | GET | Returns the JSON from the Mosaic config file | n/a |\n","| "," | GET | Returns a collection of active sources | n/a |\n","| "," | POST | Adds the source | definition & isPreview |\n","| "," | PUT | Stops the source with the provided name | name |\n","| "," | PUT | Stops the source with the provided name | name |"]},{"title":"Layouts","route":"/mosaic/configure/layouts/index","content":["Todo..."]},{"title":"Active mode","route":"/mosaic/configure/modes/active","content":["In "," mode content can be ","pulled"," from heterogeneous data sources and normalized via plugins, to the configured components/theme.\n","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 ","a remote source, which loads content from a ","sample Github repository","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.\n","e.g Our sample docs are aggregated into a ","namespace"," called "," and served by the user journey ","Mosaic doc sources are defined by a file called ","Here is how that might look for a standard site.","Pull your local content","To tryout local content creation, add a file called","The load ","Each directory should contain an "," which is the default page, when a page is loaded without a path","Now create other pages and subdirectories and explore how Mosaic, builds your user-journeys from your fileset.","Pull your remote content","To tryout remote content creation, your standard site comes pre-configured to load our Mosaic sample docs.","Edit the "," and change your "," and "," to pull content from other repos."]},{"title":"Modes of operation","route":"/mosaic/configure/modes/index","content":["Mosaic can operate in 3 different modes","Active updates","In ","active"," mode, content updates in real-time.","active"," mode content is pulled at configured intervals in real-time, as defined by ",".","Read the ","active"," configuration docs.","Static content","Consider a snapshot as a directory of static content previously pulled from your content sources, which does not update itself.","In a snapshot mode, the snapshot does update itself.","File based snapshots","In "," mode, immutable snapshots of content are loaded at startup from the local file-system.","Read the ","snapshot-file"," configuration docs.","S3 based snapshots","In "," mode, snapshots of content are loaded at startup from a remote S3 bucket.","Read the ","snapshot-s3"," configuration docs."]},{"title":"Snapshot file mode","route":"/mosaic/configure/modes/snapshot-file","content":["In "," mode a local immutable snapshot can be loaded by the site. ","Typically, the snapshot and the site are\n","deployed together and upon startup the site can load the snapshot from the local file-system.","To use "," mode","export MOSAIC_MODE=\"snapshot-file\"\n","export MOSAIC_SNAPSHOT_DIR=\"./snapshot/latest\"","Generating a snapshot","To generate a snapshot, run","yarn gen:snapshot","Commit the snapshot to your Git repo and push the site+snapshot to your Git repo, within the same branch."]},{"title":"Snapshot AWS/S3 mode","route":"/mosaic/configure/modes/snapshot-s3","content":["In "," mode a snapshot can be loaded from a pre-configured AWS S3 bucket.","To use "," mode","> export MOSAIC_MODE=\"snapshot-s3\"\n","> MOSAIC_S3_BUCKET=\"\"\n","> MOSAIC_S3_REGION=\"\"\n","> MOSAIC_S3_ACCESS_KEY_ID=\"\"\n","> MOSAIC_S3_SECRET_ACCESS_KEY=\"\"","Generating a snapshot","To generate a snapshot, run","yarn gen:snapshot","Uploading a snapshot to S3","To upload a snapshot to S3, define the required environment variables and run","yarn mosaic upload -S "]},{"title":"$afterSource","route":"/mosaic/configure/plugins/after-source","content":["The first lifecycle hook to trigger after receiving pages from a source.\n","The pages can safely be mutated and will be reflected in the final filesystem that gets generated.\n","It ","must"," return a collection of pages.","The "," lifecycle event is called with:","pages - the collection of pages emitted by the source","helpers - an object with useful methods","options - the options specified for the plugin in the mosaic config file","Helpers","The helpers provided with this lifecycle event are listed in the table below","| Property | Description |\n","| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n","| serialiser | A matching "," for serialising/deserialising pages when reading/writing to the filesystem |\n","| config | A mutable object for sharing data with other lifecycle phases of all plugins for this source (including in the main thread) in this plugin |\n","| pageExtensions | A collection of pageExtensions the source is using |\n","| ignorePages | A collection of page globs that are to be ignored |","Example - Log out all page routes","async function $afterSource(pages, { config, ignorePages, pageExtensions }) {\n"," for (const page of pages) {\n"," console.log(page.route);\n"," }\n"," return pages;\n","}"]},{"title":"afterUpdate","route":"/mosaic/configure/plugins/after-update","content":["Calls after the filesystem and symlinks have been reconstructed due to a change to the current source. ","This happens in the main thread.","Pages will ","not"," be cached when read at this stage, to allow for reading content and writing a new copy of it without the cached version taking effect. ","This method is safe to use with lazy loading, as the filesystem should return the full page when read.","Todo"]},{"title":"$beforeSend","route":"/mosaic/configure/plugins/before-send","content":["Calls after a filesystem has been built up from the source pages.\n","Plugin lifecycle method that triggers inside child processes.\n","It ","must"," return a collection of pages.","Todo"]},{"title":"Plugins","route":"/mosaic/configure/plugins/index","content":["Mosaic Plugins are lifecycle-based hooks that are called on ","every"," source at different stages. ","You will never need to invoke a lifecycle method directly as their execution is managed by a plugin runner.","Plugins enable Mosaic to have a lightweight and flexible, modular architecture by encapsulating features in a plugin","Installation","Configuration","Plugins are added to the "," collection of the mosaic config file. ","Like ","sources",", plugins have an options property that can be used to provide plugin specific configuration.","| Property | Description | Required |\n","| ----------- | --------------------------------------------------------------------------- | -------- |\n","| modulePath | The path to the installed plugin module | Yes |\n","| disabled | Exclude this plugin completely. ","Defaults to false | No |\n","| runtimeOnly | Exclude this plugin when generating a snapshot. ","Defaults to false | No |\n","| priority | The importance of this plugin. ","This highest number plugin will be run first | No |\n","| options | Collection of other configuration values | No |","Plugin lifecycle","The plugin lifecycle is triggered when a source emits content.\n","Whether the execution happens on the main thread or the source worker thread depends on which lifecycle event is called. ","There are 4 lifecycle events:","$afterSource","$beforeSend","afterUpdate","shouldClearCache","Plugin methods that trigger inside the main thread should be async and highly optimised to avoid\n","holding up the main thread.","Mosaic Plugins","Mosaic ships with many plugins, most of which are enabled when using the standard generator.","plugins: [\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/SiteMapPlugin',\n"," options: {}\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/SearchIndexPlugin',\n"," options: { maxLineLength: 240, maxLineCount: 240 }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/BreadcrumbsPlugin',\n"," options: {\n"," indexPageName: 'index.mdx'\n"," }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/LazyPagePlugin',\n"," // This plugin must be the very last to run, so it can strip off metadata and content after the other\n"," // plugins are done with them\n"," priority: -2,\n"," // Exclude this plugin in builds\n"," runTimeOnly: true,\n"," options: {\n"," cacheDir: '.tmp/.pull-docs-last-page-plugin-cache'\n"," }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/PagesWithoutFileExtPlugin',\n"," options: {}\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/SidebarPlugin',\n"," options: {\n"," filename: 'sidebar.json'\n"," }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/ReadingTimePlugin',\n"," options: {}\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/SharedConfigPlugin',\n"," options: {\n"," filename: 'shared-config.json'\n"," },\n"," priority: 3\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-plugins/TableOfContentsPlugin',\n"," options: {\n"," minRank: 1,\n"," maxRank: 3\n"," }\n"," }\n"," ]"]},{"title":"shouldClearCache","route":"/mosaic/configure/plugins/should-clear-cache","content":["This method should return a boolean that will indicate if this source should clear page caches.\n","This method calls whenever another source (not this one) has changed. ","Returning undefined, false or no value, will result in the cache to be retained","Todo"]},{"title":"Git Repo Source","route":"/mosaic/configure/sources/git-repo-source","content":["The Git Repo Source is used to pull content from a remote git repository e.g. github.","Installation","Credentials and Access tokens","To successfully clone the git repo, the source definition must include credentials that have sufficient permissions to clone the repository.","We recommend storing a ","personal access token"," in an environment variable and using the environment variable in the source definition.","This keeps credentials out of code where they may be accidentally exposed to third parties.","Example","export MOSAIC_DOCS_CLONE_CREDENTIALS=\":\",","Configuration","| Property | Description | Required |\n","| ------------------- | -------------------------------------------------------------------------------- | -------- |\n","| modulePath | The path to the installed module (@jpmorganchase/mosaic-source-git-repo) | Yes |\n","| namespace | The scope for this source. ","| Yes |\n","| disabled | When true, content from this source is not used | No |\n","| options.credentials | Collection of URLS to make requests | Yes |\n","| options.prefixDir | The root path used in the content URL | Yes |\n","| options.subfolder | The name of the folder within the cloned repo containing the docs | Yes |\n","| options.repo | The repo URL | Yes |\n","| options.branch | The branch or tag to clone | Yes |\n","| options.extensions | Collection of file extensions that the source will look for inside the subfolder | Yes |\n","| options.remote | The name of the git remote to use. ","Defaults to origin. ","| Yes |","Example Git Repo Source Definition","\n"," {\n"," modulePath: '@jpmorganchase/mosaic-source-git-repo',\n"," namespace: 'mosaic',\n"," options: {\n"," credentials: process.env.MOSAIC_DOCS_CLONE_CREDENTIALS,\n"," prefixDir: 'mosaic',\n"," subfolder: 'docs',\n"," repo: 'https://github.com/jpmorganchase/mosaic.git',\n"," branch: 'main',\n"," extensions: ['.mdx'],\n"," remote: 'origin'\n"," }\n"," }\n"]},{"title":"HTTP Source","route":"/mosaic/configure/sources/http-source","content":["The HTTP Source is used to pull content over HTTP.","Multiple endpoints can be specified and the source will combine and transform the response from each into a single collection of pages.","Installation","Configuration","| Property | Description | Required |\n","| ------------------------------------------ | ----------------------------------------------------------------------------- | -------- |\n","| modulePath | The path to the installed module (@jpmorganchase/mosaic-source-http) | Yes |\n","| namespace | The scope for this source | Yes |\n","| disabled | When true, content from this source is not used | No |\n","| options.endpoints | Collection of URLS to make requests | Yes |\n","| options.prefixDir | The root path used in the content URL | Yes |\n","| options.transformResponseToPagesModulePath | The path of the module used to transform endpoint responses into Mosaic pages | Yes |\n","| options.checkIntervalMins | Number of minutes to wait between requests. ","Defaults to 5 minutes | No |\n","| options.initialDelayMs | Number of milliseconds to wait for making initial request. ","Defaults to 1000 | No |","Example HTTP Source Definition"," {\n"," modulePath: '@jpmorganchase/mosaic-source-http',\n"," namespace: 'my-namespace',\n"," options: {\n"," prefixDir: 'docs',\n"," endpoints: [\n"," 'https://api.data.com/blah',\n"," 'https://api.data.com/hello'\n"," ],\n"," transformResponseToPagesModulePath: '@scope/transformer-package'\n"," }\n"," }"]},{"title":"Sources","route":"/mosaic/configure/sources/index","content":["Sources are what Mosaic uses to pull content from disparte locations and merge into a single virtual filesystem that can be used by a Mosaic Site.","Depending on the ","mode"," used, sources can update periodically ensuring that new content is made available automatically.","Source Definitions","Source Definitions are specified in the "," collection of a mosaic config file.","Each source uses a ","zod schema"," to validate the provided JSON to ensure that all required information for the source to pull content has been provided.","A source definition at a minimum needs to provide the module path of the source and the ","namespace"," that it will use. ","A namespace is not unique across sources though it is common that each source has a different namespace.","Lastly, the options field can be used as a bucket for configuration values needed to configure the source e.g. credentials.","Users are free to add any property as a source option but please read the ","gotchas","\n","first regarding the allowed ","values",".","Example Local Folder Source Definition"," /**\n"," * Demonstrates a local file-system source, in this case a relative path to where the\n"," * site was generated.\n"," * Access from your browser as http://localhost:3000/local\n"," */\n"," {\n"," modulePath: '@jpmorganchase/mosaic-source-local-folder',\n"," namespace: 'local', // each site has it's own namespace, think of this as your content's uid\n"," options: {\n"," rootDir: '..","/../docs', // relative path to content\n"," prefixDir: 'local', // root path used for namespace\n"," extensions: ['.mdx'] // extensions of content which should be pulled\n"," }\n"," }","Source Namespace","A Source Namespace is a scoping mechanism for Mosaic sources used to filter the content loaded by Mosaic. ","By default all sources specified in the mosaic config file are loaded.","sources: [\n"," {\n"," namespace: 'my-namespace',\n"," modulePath: '@jpmorganchase/mosaic-source-local-folder'\n"," }\n","];","The following command will ensure mosaic only loads sources with the "," scope.","yarn mosaic serve -c ''./mosaic.config.mjs' -p 8080 --scope \"local\"","Source Schedules","Source schedules define how often sources pull in content that exists remotely and if a failed source is retried. ","More information can be found ","here","Source Types","Out of the box, Mosaic provides 3 source \"types\":","Local Folder","Git Repo Source","HTTP Source","Sources must expose an observable interface so it is possible to compose sources together e.g. the Git Repo source uses the Local Folder source internally to watch the cloned folder for changes.","Watching for Updates","When running in ","active mode",", Mosaic will watch for any changes to the source content and if a change is detected, will initiate a pull of that new content.","How often to check for updates and how updates are triggered are a matter for the source to handle. ","Mosaic simply responds when a source emits new content.","Source Worker Thread","Sources are executed inside their own worker thread to ensure that the main thread is not overloaded. ","It is here that a local virtual filesystem for the source is created and where several of the ","Plugin Lifecycle"," events are triggered.","Gotchas","A service worker thread uses ","postMessage"," to communicate with the main thread and vice-versa.","This is important because it limits what values can be provided in the source definition to those that can be processed by the ","Structured Clone Algorithm","."]},{"title":"Local Folder Source","route":"/mosaic/configure/sources/local-folder-source","content":["The Local Folder Source is used to pull content from a folder located on the same machine as Mosaic is running.","It is common to use this source when running mosaic locally.","Installation","Configuration","| Property | Description | Required |\n","| ------------------ | ------------------------------------------------------------------------------ | -------- |\n","| modulePath | The path to the installed module (@jpmorganchase/mosaic-source-local-folder) | Yes |\n","| namespace | The scope for this source | Yes |\n","| disabled | When true, content from this source is not used | No |\n","| options.rootDir | The top level directory content will be pulled from | Yes |\n","| options.prefixDir | The root path used in the content URL | Yes |\n","| options.extensions | Collection of file extensions that the source will look for inside the rootDir | Yes |","Example Local Folder Source Definition","{\n"," modulePath: '@jpmorganchase/mosaic-source-local-folder',\n"," namespace: 'local', // each site has it's own namespace, think of this as your content's uid\n"," options: {\n"," rootDir: '..","/../docs', // relative path to content\n"," prefixDir: 'local', // root path used for namespace\n"," extensions: ['.mdx'] // extensions of content which should be pulled\n"," }\n","}","This source will look for content with the \".mdx\" extension in a \"docs\" directory 2 levels up from the Mosaic working directory. ","That content is included in the \"local\" namespace and available from a route that is prefixed with \"local\".","So if you had a file, "," then you would be able to view it at ","."]},{"title":"Source Schedules","route":"/mosaic/configure/sources/schedules","content":["A source schedule defines how often a source initiates a content pull and what to do when their is a failure.","A schedule can be specified for each source in the source definition, but should a source not provide a schedule it will inherit the \"global\" schedule.","Configuration","| Property | Description | Required | Default |\n","| ----------------- | -------------------------------------------------------------------------------------- | -------- | ------- |\n","| checkIntervalMins | The length of time in minutes before triggering a content refresh | Yes | 30 mins |\n","| initialDelayMs | Startup delay for the source. ","| Yes | 1000 ms |\n","| retryEnabled | When true, failures will trigger another content pull | No | true |\n","| retryDelayMins | The interval between retries. ","This will rise exponentially on every failure. ","| No | 5 |\n","| maxRetries | Maximum number of retry attempts | No | 100 |\n","| resetOnSuccess | If true, when a source recovers and emits pages it's retry counter is returned to zero | No | true |","Global Schedule","The global schedule applies to all sources that do ","not"," provide their own schedule. ","It can be configured as a top-level property of the Mosaic config file."," schedule: {\n"," checkIntervalMins: 60,\n"," initialDelayMs: 1000,\n"," retryDelayMins: 15,\n"," maxRetries: 20\n"," }","Example","Given the config file below:"," schedule: {\n"," checkIntervalMins: 30,\n"," initialDelayMs: 1000,\n"," retryDelayMins: 5,\n"," maxRetries: 10\n"," },\n"," sources: [\n"," {\n"," modulePath: '@jpmorganchase/mosaic-source-git-repo',\n"," namespace: 'sourceA',\n"," options: {\n"," credentials: 'credentials',\n"," prefixDir: 'sourceA',\n"," subfolder: 'docs',\n"," repo: 'source-a-repo-url',\n"," branch: 'develop',\n"," extensions: ['.mdx'],\n"," remote: 'origin'\n"," }\n"," },\n"," {\n"," modulePath: '@jpmorganchase/mosaic-source-git-repo',\n"," namespace: 'sourceB',\n"," schedule:{\n"," checkIntervalMins: 60,\n"," initialDelayMs: 5000,\n"," retryDelayMins: 30,\n"," maxRetries: 50\n"," }\n"," options: {\n"," credentials: 'credentials',\n"," prefixDir: 'sourceB',\n"," subfolder: 'docs',\n"," repo: 'source-b-repo-url',\n"," branch: 'develop',\n"," extensions: ['.mdx'],\n"," remote: 'origin'\n"," }\n"," }\n"," ]","Source A will inherit the global schedule so it will:","Start after a 1 second delay","Pull content every 30 minutes","Retry a failed content pull after an initial 5 minute delay","Retry 10 times and if still unsuccessful, closing","Source B has its own schedule so it will:","Start after a 5 second delay","Pull content every 60 minutes","Retry a failed content pull after an initial 30 minute delay","Retry 50 times and if still unsuccessful, closing","Retry Strategy","The retry strategy that Mosaic employs is ","Exponential Backoff",". ","This is a common strategy for networking applications that aims to prevent retries from causing more harm than good.","For example, given a source schedule that has a 1 minute retry delay and will retry a maximum of 3 times then the total time spent retrying is 7 minutes:","1 minute delay then 1st retry","2 minute delay then 2nd retry","4 minute delay then 3rd (and final) retry","Total delay: 1 + 2 + 4 = 7 minutes","As you can see, the delay between retries is growing exponentially giving the content source more time to recover after each retry."]},{"title":"Custom Components","route":"/mosaic/configure/theme/custom-components","content":["Learn how to add your own custom components to your Mosaic site.","Create Components Folder","To start, create a "," folder under "," where you'll store your custom components.","src/\n","└── components/","In this tutorial, we will create a custom "," component.","Create Card Component","Inside the "," folder, create a "," folder, which will contain your React "," component. ","The "," folder should include "," and "," files as shown in the structure below:","├── src/\n","│ ├── components/\n","│ │ └── card/\n","│ │ ├── index.tsx\n","│ │ └── card.module.css","Card Component: index.tsx","Create your "," component within the "," file:","import React from 'react';\n","import styles from './card.module.css';\n","\n","type CardProps = {\n"," title: string;\n"," content: string;\n","};\n","\n","export const Card: React.FC = ({ title, content }) => {\n"," return (\n","
\n","

{title}

\n","

{content}

\n","
\n"," );\n","};","Card Component: card.module.css","Define your component styles in the "," file:",".card {\n"," background-color: #f5f5f5;\n"," border: 1px solid #ccc;\n"," border-radius: 4px;\n"," box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n"," padding: 16px;\n"," transition: box-shadow 0.2s ease-in-out;\n","}\n","\n",".card:hover {\n"," box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n","}\n","\n",".card h2 {\n"," color: #333;\n"," font-size: 24px;\n"," margin-bottom: 8px;\n","}\n","\n",".card p {\n"," color: #666;\n"," font-size: 16px;\n"," line-height: 1.5;\n","}","In this example, we use a CSS file, but you can use whichever styling approach you prefer, such as ","vanilla extract",".","To export your "," component, create an "," file in the "," folder:","export * from './card';","Your final folder structure should look like this:","├── src/\n","│ ├── components/\n","│ │ ├── card/\n","│ │ │ ├── index.tsx\n","│ │ │ └── card.module.css\n","│ │ ├── index.ts","Import Custom Card Component","To use your custom "," component, import it into your site's "," file. ","Add the following line to your imports:","import * as myComponents from '../components';","Replace this line:","const components = mosaicComponents;","with:","const components = {\n"," ...mosaicComponents,\n"," ...myComponents\n","};","This will add your custom components to the site, and any custom components in "," will override the corresponding ones in ",". ","The spread operator (",") merges both "," and "," objects, giving priority to "," when there is a naming conflict.","Use Your Custom Card Component","Now you're ready to use your custom "," component. ","Build and run your site, and add the "," component to an MDX file in your "," folder or another source:","","You can create and add more custom components to your Mosaic site by following the same process."]},{"title":"Custom CSS","route":"/mosaic/configure/theme/custom-css","content":["You can customize the look and feel of your Mosaic site by creating cusotm CSS files. ","Here is a step-by-step guide to help you create your own CSS theme.","Create a CSS folder","To get started, create a folder named \"css\" in the \"src\" folder of your Mosaic project.","src/\n","└── css/","Create your theme","Inside the \"css\" folder, create a folder named \"global\". ","This is where you will add your custom styles.","src/\n","└── css/\n"," ├── global/\n"," ├── index.css","Create an \"index.css\" file inside the \"css\" folder. ","This file will import your custom styles.","@import './global/';","Inside your global folder, create a separate CSS file for each part of your site that you want to customize. ","For instance, if you want to change the text styling, create a \"text.css\" file inside the \"global\" folder. ","Here is an example of how your \"text.css\" file could look like:","h1 {\n"," /* Set custom font size and weight */\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h2 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h3 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h4 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h5 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","h6 {\n"," font-size: /* insert value */ ;\n"," font-weight: /* insert value */ ;\n","}\n","\n","p {\n"," font-size: /* insert value */ ;\n"," line-height: /* insert value */ ;\n","}","You can add as many CSS files as you need, depending on how much you want to customize your site.","Create an \"index.css\" file inside the \"global\" folder. ","This file will import your custom styles, in this example we are importing our \"text.css\" file.","@import './text.css';","Your \"css\" folder should now look like this:","src/\n","└── css/\n"," ├── global/\n"," │ ├── text.css\n"," │ ├── index.css\n"," ├── index.css","Import your custom CSS into your site","To apply your custom styles to your Mosaic site, open your \"_app.tsx\" file and add the following line to the bottom of your imports:","import '../css/index.css';","Congratulations! ","You have successfully applied your custom CSS styles to your site. ","This example demonstrated how to create text styles, but you can use the same approach to customize other aspects of your site as well."]},{"title":"Theming Your Site","route":"/mosaic/configure/theme/index","content":["Create a unique look and feel for your Mosaic site by customizing the CSS theme and integrating your own UI components.","Customize the CSS","Adapt various design elements of your Mosaic site to create a cohesive visual theme. ","Refer to our guide to learn more about crafting a custom CSS theme:","CSS Theme Guide","Import Custom Components","Incorporate your own UI components, to tailor the look and functionality of your content. ","This tutorial will walk you through the process of adding custom components to your site:","Adding Custom Components Tutorial"]},{"title":"Aliases Test","route":"/mosaic/test/aliases/index","content":["This page is the alias test page."]},{"title":"Detail Highlight Test Page","route":"/mosaic/test/layouts/detail-highlight","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Detail Overview Test Page","route":"/mosaic/test/layouts/detail-overview","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Detail Technical Test Page","route":"/mosaic/test/layouts/detail-technical","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Edit Layout","route":"/mosaic/test/layouts/edit","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Full Width Layout","route":"/mosaic/test/layouts/full-width","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Layouts","route":"/mosaic/test/layouts/index","content":["Pages for e2e testing of layouts."]},{"title":"Landing Layout Test Page","route":"/mosaic/test/layouts/landing","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Newsletter Test Page","route":"/mosaic/test/layouts/newsletter","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Product Discover Test Page","route":"/mosaic/test/layouts/product-discover","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Product Preview Test Page","route":"/mosaic/test/layouts/product-preview","content":["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 1","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 2","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 3","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum","Heading 4","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n","Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n","Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"]},{"title":"Refs Data","route":"/mosaic/test/refs/data","content":[]},{"title":"Refs Test","route":"/mosaic/test/refs/index","content":["The sidebar priority is ",".","The other page data is ","."]}] \ No newline at end of file diff --git a/packages/site/snapshots/latest/sitemap.xml b/packages/site/snapshots/latest/sitemap.xml index 4f9c0ebd..c289a3c5 100644 --- a/packages/site/snapshots/latest/sitemap.xml +++ b/packages/site/snapshots/latest/sitemap.xml @@ -104,6 +104,11 @@ weekly 0.5 + + https://mosaic-mosaic-dev-team.vercel.app/mosaic/configure/admin/index + weekly + 0.5 + https://mosaic-mosaic-dev-team.vercel.app/mosaic/configure/layouts/index weekly