fix: fixed table rendering (html and gfm) and reorganised mdx plugins (#6039)

* fix: fixed table rendering (html and gfm) and reorganised mdx plugins

* Update next.mdx.mjs

Signed-off-by: Claudio W <cwunder@gnome.org>

---------

Signed-off-by: Claudio W <cwunder@gnome.org>

Author: ovflowd

next.dynamic.mjs

@@ -3,20 +3,13 @@
 import { readFileSync } from 'node:fs';
 import { join, normalize, sep } from 'node:path';
 
-import remarkHeadings from '@vcarl/remark-headings';
 import { serialize } from 'next-mdx-remote/serialize';
-import rehypeAutolinkHeadings from 'rehype-autolink-headings';
-import rehypePrettyCode from 'rehype-pretty-code';
-import rehypeSlug from 'rehype-slug';
-import { getHighlighter } from 'shiki';
-import shikiNordTheme from 'shiki/themes/nord.json';
 import { VFile } from 'vfile';
 
 import { DEFAULT_LOCALE_CODE, MD_EXTENSION_REGEX } from './next.constants.mjs';
 import { getMarkdownFiles } from './next.helpers.mjs';
 import { availableLocales } from './next.locales.mjs';
-import { remarkAutoLinkLiteral } from './next.mdast.mjs';
-import { SUPPORTED_LANGUAGES } from './shiki.config.mjs';
+import { nextRehypePlugins, nextRemarkPlugins } from './next.mdx.mjs';
 
 // allows us to run a glob to get markdown files based on a language folder
 const getPathsByLanguage = async (locale = DEFAULT_LOCALE_CODE, ignored = []) =>
@@ -152,34 +145,19 @@ export const generateStaticProps = async (source = '', filename = '') => {
     // data post serialization (compilation) of the source Markdown into MDX
     const sourceAsVirtualFile = new VFile(source);
 
+    // Gets the file extension of the file, to determine which parser and plugins to use
+    const fileExtension = filename.endsWith('.mdx') ? 'mdx' : 'md';
+
     // This act as a MDX "compiler" but, lightweight. It parses the Markdown
     // string source into a React Component tree, and then it serializes it
     // it also supports Remark plugins, and MDX components
     // Note.: We use the filename extension to define the mode of execution
     const { compiledSource } = await serialize(sourceAsVirtualFile, {
       parseFrontmatter: true,
       mdxOptions: {
-        rehypePlugins: [
-          rehypeSlug,
-          [
-            rehypeAutolinkHeadings,
-            {
-              behaviour: 'append',
-              properties: { ariaHidden: true, tabIndex: -1, class: 'anchor' },
-            },
-          ],
-          [
-            rehypePrettyCode,
-            {
-              theme: shikiNordTheme,
-              defaultLang: 'plaintext',
-              getHighlighter: options =>
-                getHighlighter({ ...options, langs: SUPPORTED_LANGUAGES }),
-            },
-          ],
-        ],
-        remarkPlugins: [remarkHeadings, remarkAutoLinkLiteral],
-        format: filename.includes('.mdx') ? 'mdx' : 'md',
+        rehypePlugins: nextRehypePlugins(fileExtension),
+        remarkPlugins: nextRemarkPlugins(fileExtension),
+        format: fileExtension,
       },
     });
 

next.mdast.mjs

@@ -0,0 +1,96 @@
+'use strict';
+
+/// <reference types="remark-parse" />
+/// <reference types="remark-stringify" />
+
+/**
+ * @typedef {import('mdast').Root} Root
+ * @typedef {import('unified').Processor<Root>} Processor
+ */
+
+import * as remarkHeadings from '@vcarl/remark-headings';
+import * as mdastAutoLink from 'mdast-util-gfm-autolink-literal';
+import * as mdastTable from 'mdast-util-gfm-table';
+import * as rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import * as rehypePrettyCode from 'rehype-pretty-code';
+import * as rehypeRaw from 'rehype-raw';
+import * as rehypeSlug from 'rehype-slug';
+import { getHighlighter } from 'shiki';
+import shikiNordTheme from 'shiki/themes/nord.json';
+
+import { SUPPORTED_LANGUAGES } from './shiki.config.mjs';
+
+/**
+ * This function is used to add individual `mdast` plugins to the unified/mdx
+ * processor with the intent of being able to customize plugins
+ *
+ * @returns {void}
+ */
+function nextMdastPlugins() {
+  const self = /** @type {Processor} */ (this);
+  const data = self.data();
+
+  const fromMarkdownExtensions =
+    data.fromMarkdownExtensions || (data.fromMarkdownExtensions = []);
+
+  const toMarkdownExtensions =
+    data.toMarkdownExtensions || (data.toMarkdownExtensions = []);
+
+  // Converts plain URLs on Markdown to HTML Anchor Tags
+  fromMarkdownExtensions.push(mdastAutoLink.gfmAutolinkLiteralFromMarkdown());
+  toMarkdownExtensions.push(mdastAutoLink.gfmAutolinkLiteralToMarkdown());
+
+  // Converts plain Markdown Tables (GFM) to HTML Tables
+  fromMarkdownExtensions.push(mdastTable.gfmTableFromMarkdown);
+  toMarkdownExtensions.push(mdastTable.gfmTableToMarkdown());
+}
+
+/**
+ * Provides all our Rehype Plugins that are used within MDX
+ *
+ * @param {'md' | 'mdx'} fileExtension
+ * @returns {import('unified').Plugin[]}
+ */
+export function nextRehypePlugins(fileExtension) {
+  const rehypePlugins = [
+    // Generates `id` attributes for headings (H1, ...)
+    rehypeSlug.default,
+    [
+      // Automatically add anchor links to headings (H1, ...)
+      rehypeAutolinkHeadings.default,
+      {
+        behaviour: 'append',
+        properties: { ariaHidden: true, tabIndex: -1, class: 'anchor' },
+      },
+    ],
+    [
+      // Syntax Highlighter for Code Blocks
+      rehypePrettyCode.default,
+      {
+        theme: shikiNordTheme,
+        defaultLang: 'plaintext',
+        getHighlighter: options =>
+          getHighlighter({ ...options, langs: SUPPORTED_LANGUAGES }),
+      },
+    ],
+  ];
+
+  if (fileExtension === 'md') {
+    // We add this plugin at the top of the array as it is supposed to parse raw HTML
+    // before any other plugins (such as adding headings, etc)
+    // before any of the other plugins being applied
+    rehypePlugins.unshift(rehypeRaw.default);
+  }
+
+  return rehypePlugins;
+}
+
+/**
+ * Provides all our Remark Plugins that are used within MDX
+ *
+ * @param {'md' | 'mdx'} fileExtension
+ * @returns {import('unified').Plugin[]}
+ */
+export function nextRemarkPlugins() {
+  return [remarkHeadings.default, nextMdastPlugins];
+}