Feature/props in markdown

next.config.js

@@ -31,7 +31,9 @@ const nextConfigAsync = async () => {
   });
   const remarkGfm = (await import('remark-gfm')).default;
   const remarkFrontmatter = (await import('remark-frontmatter')).default;
+  const remarkMdxFrontmatter = (await import('remark-mdx-frontmatter')).default;
 
+  const recmaStaticProps = (await import('recma-nextjs-static-props')).default;
   const recmaStaticImages = (await import('recma-next-static-images')).default;
   const recmaStaticImagesConfig =
     /** @type {import('recma-next-static-images').Options} */ ({
@@ -45,11 +47,13 @@ const nextConfigAsync = async () => {
       remarkPlugins: [
         remarkGfm,
         remarkFrontmatter,
+        remarkMdxFrontmatter
         //   [remarkMorematter,  remarkMorematterConfig],
         //   [remarkValidateVFile, remarkValidateVFileConfig],
       ],
       rehypePlugins: [],
       recmaPlugins: [
+        recmaStaticProps,
         [recmaStaticImages, recmaStaticImagesConfig],
       ],
       providerImportSource: '@mdx-js/react',

package.json

@@ -22,10 +22,12 @@
     "react-dom": "^18.1.0",
     "react-remark": "^2.1.0",
     "recma-next-static-images": "helmturner/recma-next-static-images",
+    "recma-nextjs-static-props": "^1.0.0",
     "rehype-format": "^4.0.1",
     "rehype-sanitize": "^5.0.1",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
+    "remark-mdx-frontmatter": "^2.1.1",
     "remark-morematter": "helmturner/remark-morematter",
     "remark-parse": "^10.0.1",
     "remark-stringify": "^10.0.2",

src/pages/_app.tsx

@@ -23,6 +23,8 @@ export type NextPageWithLayout<TProps = {}, TInitialProps = {}> = NextPage<
  * from the data-fetching method on that page (getStaticProps, getServerSideProps, etc.)
  */
 function MyApp({Component, pageProps}: AppPropsWithLayout) {
+  // For `.md` & `.mdx` files in the `pages` directory, frontmatter from the file becomes `pageProps`
+  console.log(pageProps);
   // If Component.getLayout is undefined, use the DefaultLayout.
   // The layout can be disabled by setting Componenet.getLayout to null
   const getLayout: NextPageWithLayout['getLayout'] =

yarn.lock

@@ -1442,6 +1442,14 @@ estree-util-to-js@^1.1.0:
     astring "^1.8.0"
     source-map "^0.7.0"
 
+estree-util-value-to-estree@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/estree-util-value-to-estree/-/estree-util-value-to-estree-2.1.0.tgz#a10cdb500ee002bec36e13f2cd8c7838e6347dbe"
+  integrity sha512-fcAWmZilY1+tEt7GSeLZoHDvp2NNgLkJznBRYkEpaholas41d+Y0zd/Acch7+qzZdxLtxLi+m04KjHFJSoMa6A==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    is-plain-obj "^4.0.0"
+
 estree-util-visit@^1.0.0, estree-util-visit@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/estree-util-visit/-/estree-util-visit-1.2.0.tgz#aa0311a9c2f2aa56e9ae5e8b9d87eac14e4ec8f8"
@@ -3561,6 +3569,15 @@ recma-next-static-images@helmturner/recma-next-static-images:
     node-fetch "^3.2.10"
     unist-util-is "^5.1.1"
 
+recma-nextjs-static-props@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/recma-nextjs-static-props/-/recma-nextjs-static-props-1.0.0.tgz#99c1f0782adf0f5c43e78a2a8991c8e0f42031d8"
+  integrity sha512-szo+rOZFU6mR0YWZi3e3dSqcEQU+E0f7GIyfMfntHeJccH1s9ODP0HWUeK7No0lcY1smRCcC43JrpoekzuX4Aw==
+  dependencies:
+    "@types/estree" "*"
+    periscopic "^3.0.0"
+    unified "^10.0.0"
+
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
@@ -3644,6 +3661,18 @@ remark-gfm@^3.0.1:
     micromark-extension-gfm "^2.0.0"
     unified "^10.0.0"
 
+remark-mdx-frontmatter@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/remark-mdx-frontmatter/-/remark-mdx-frontmatter-2.1.1.tgz#c0c029a4cd3e3c70fde0112aa19de55bcebc4166"
+  integrity sha512-kH8R4FcZ9VD2Uak9FuEgoZnKdIXhIXA3kYVB+6hkoWgYXbgpZNetgiAw58q4Z0MMN3W+nfkg7Fv6bcJTr1Y8BQ==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    estree-util-is-identifier-name "^2.0.0"
+    estree-util-value-to-estree "^2.0.0"
+    toml "^3.0.0"
+    unified "^10.0.0"
+    yaml "^2.0.0"
+
 remark-mdx@^2.0.0:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-2.1.5.tgz#69b19ec42d30a289e0663c3fc7656ebdca0a8d8e"
@@ -4048,6 +4077,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toml@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/toml/-/toml-3.0.0.tgz#342160f1af1904ec9d204d03a5d61222d762c5ee"
+  integrity sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==
+
 tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz"
@@ -4489,7 +4523,7 @@ yaml@^1.10.2:
   resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-yaml@^2.1.3:
+yaml@^2.0.0, yaml@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.1.3.tgz#9b3a4c8aff9821b696275c79a8bee8399d945207"
   integrity sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg==