@@ -154,7 +159,7 @@ export const SaveView = ({ design, settings, setView, saveAs }) => {
current={name}
update={setName}
valid={notEmpty}
- docs={}
+ docs={docs.name}
/>
{withNotes ? (
@@ -162,7 +167,7 @@ export const SaveView = ({ design, settings, setView, saveAs }) => {
label={t('workbench:notes')}
current={notes}
update={setNotes}
- docs={}
+ docs={docs.notes}
/>
) : null}
@@ -170,6 +175,7 @@ export const SaveView = ({ design, settings, setView, saveAs }) => {
update={setEditAfterSaveAs}
label={t('workbench:whereToGoAfterSaveAs')}
current={editAfterSaveAs}
+ docs={docs.goto}
list={[
{
val: true,
diff --git a/sites/shared/components/wrappers/mdx.mjs b/sites/shared/components/wrappers/mdx.mjs
index e3080233176..0d1add93695 100644
--- a/sites/shared/components/wrappers/mdx.mjs
+++ b/sites/shared/components/wrappers/mdx.mjs
@@ -1,7 +1,7 @@
// __SDEFILE__ - This file is a dependency for the stand-alone environment
// Dependencies
import * as runtime from 'react/jsx-runtime'
-import { runSync } from '@mdx-js/mdx'
+import { run, runSync } from '@mdx-js/mdx'
import { useState, useEffect } from 'react'
// Components that are available in MDX content
import { components as baseComponents } from 'shared/components/mdx/index.mjs'
@@ -14,7 +14,7 @@ import { Loading } from 'shared/components/spinner.mjs'
* This is the default async version
*/
const runMdx = async (mdx) => {
- const { default: Content } = await runSync(mdx, runtime)
+ const { default: Content } = await run(mdx, runtime)
return Content
}
diff --git a/sites/shared/mdx/browser-compile.mjs b/sites/shared/mdx/browser-compile.mjs
new file mode 100644
index 00000000000..f79eaa9361b
--- /dev/null
+++ b/sites/shared/mdx/browser-compile.mjs
@@ -0,0 +1,36 @@
+// MDX compiler
+import { compile } from '@mdx-js/mdx'
+// Remark plugins from the ecosystem
+import remarkFrontmatter from 'remark-frontmatter'
+import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
+import remarkGfm from 'remark-gfm'
+import smartypants from 'remark-smartypants'
+// FreeSewing custom remark plugins
+import { remarkGithubImages } from './remark-github-images.mjs'
+
+/*
+ * Compiles markdown/mdx to a function body
+ */
+export const compileMdx = async ({
+ md, // A string holding the markdown
+ site, // The site folder, one of 'org' or 'dev'
+ slug, // The slug to the page below the folder (like 'guides/plugins')
+ jargon, // An object of jargon definitions. See rehype-jargon
+ fromGithub = false, // Set this to true when dynamically loading mdx from Github
+}) => {
+ const mdx = String(
+ await compile(md, {
+ outputFormat: 'function-body',
+ development: false,
+ remarkPlugins: [
+ remarkFrontmatter,
+ remarkMdxFrontmatter,
+ remarkGfm,
+ smartypants,
+ [remarkGithubImages, { site, slug }],
+ ],
+ })
+ )
+
+ return mdx
+}
diff --git a/sites/shared/mdx/compile.mjs b/sites/shared/mdx/compile.mjs
index 6bd0252aff0..512b6bd977a 100644
--- a/sites/shared/mdx/compile.mjs
+++ b/sites/shared/mdx/compile.mjs
@@ -11,6 +11,7 @@ import smartypants from 'remark-smartypants'
// FreeSewing custom remark plugins
import { remarkIntroAsFrontmatter } from './remark-intro-as-frontmatter.mjs'
import { remarkTocAsFrontmatter } from './remark-toc-as-frontmatter.mjs'
+import { remarkGithubImages } from './remark-github-images.mjs'
// Rehype plugins from the ecosystem
import rehypeHighlight from 'rehype-highlight'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
@@ -28,6 +29,7 @@ export const compileMdx = async ({
site, // The site folder, one of 'org' or 'dev'
slug, // The slug to the page below the folder (like 'guides/plugins')
jargon, // An object of jargon definitions. See rehype-jargon
+ fromGithub = false, // Set this to true when dynamically loading mdx from Github
}) => {
const mdx = String(
await compile(md, {
@@ -38,14 +40,16 @@ export const compileMdx = async ({
remarkMdxFrontmatter,
remarkGfm,
smartypants,
- [
- remarkCopyLinkedFiles,
- {
- destinationDir: path.resolve(`../${site}/public/mdx`),
- sourceDir: path.resolve(`../../markdown/${site}/${slug}`),
- staticPath: '/mdx/',
- },
- ],
+ fromGithub
+ ? remarkGithubImages
+ : [
+ remarkCopyLinkedFiles,
+ {
+ destinationDir: path.resolve(`../${site}/public/mdx`),
+ sourceDir: path.resolve(`../../markdown/${site}/${slug}`),
+ staticPath: '/mdx/',
+ },
+ ],
remarkTocAsFrontmatter,
remarkIntroAsFrontmatter,
],
diff --git a/sites/shared/mdx/load.mjs b/sites/shared/mdx/load.mjs
index 3a8b26309d5..be428424a63 100644
--- a/sites/shared/mdx/load.mjs
+++ b/sites/shared/mdx/load.mjs
@@ -2,6 +2,7 @@ import fs from 'fs'
import path from 'path'
import { compileMdx } from './compile.mjs'
import { jargon } from 'shared/jargon/index.mjs'
+import { ghPrefix } from './remark-github-images.mjs'
/*
* Loads markdown/mdx from disk
@@ -13,6 +14,20 @@ export const loadMdxFromDisk = async ({
}) =>
await fs.promises.readFile(path.resolve(`../../markdown/${site}/${slug}/${language}.md`), 'utf-8')
+/*
+ * Loads markdown/mdx from Github
+ */
+export const loadMdxFromGithub = async ({
+ language, // The language code of the markdown to load (like 'en')
+ site, // The site folder, one of 'dev' or 'org'
+ slug, // The slug below that folder, like 'guides/plugins'
+}) => {
+ const response = await fetch(`${ghPrefix}/${site}/${slug}/${language}.md`)
+ const md = await response.text()
+
+ return md
+}
+
/*
* Loads markdown/mdx from disk and compiles it for use
* in static props.
@@ -24,7 +39,7 @@ export const loadMdxAsStaticProps = async ({
slugs = {}, // An object where key is an ID and value the slug to load
}) => {
const result = {}
- if (slug) result.default = slug
+ if (slug) slugs.default = slug
for (const [key, val] of Object.entries(slugs)) {
const md = await loadMdxFromDisk({ language, site, slug: val })
const mdx = await compileMdx({
@@ -33,7 +48,7 @@ export const loadMdxAsStaticProps = async ({
slug: val,
jargon: jargon[language],
})
- result[key] = { mdx, slug: val }
+ result[key] = { ...mdx, slug: val }
}
return slug ? result.default : result
diff --git a/sites/shared/mdx/remark-github-images.mjs b/sites/shared/mdx/remark-github-images.mjs
new file mode 100644
index 00000000000..f5013b0ea88
--- /dev/null
+++ b/sites/shared/mdx/remark-github-images.mjs
@@ -0,0 +1,28 @@
+/*
+ * This is a remark plugin that will update the src of local images to
+ * load them from Github. It is used when we load markdown/mdx dynamically
+ * from Github rather than from disk.
+ */
+import { visit } from 'unist-util-visit'
+
+export const ghPrefix = 'https://raw.githubusercontent.com/freesewing/freesewing/develop/markdown'
+
+const convertUrl = ({ site, slug, url }) => {
+ if (url.slice(0, 1) === 'http://') return url
+ if (url.slice(0, 7) === 'http://') return url
+ if (url.slice(0, 8) === 'https://') return url
+
+ return `${ghPrefix}/${site}/${slug}/${url}`
+}
+
+export function remarkGithubImages({ site, slug }) {
+ return (tree) => {
+ visit(tree, function (node, index, parent) {
+ if (node.type === 'image') node.url = convertUrl({ site, slug, url: node.url })
+
+ return node
+ })
+
+ return tree
+ }
+}