Refactor routing in App component to enhance navigation and improve error handling by integrating dynamic routes and updating the NotFound route.

node_modules/mdast-util-gfm-table/index.d.ts

@@ -0,0 +1,54 @@
+export type {Options} from './lib/index.js'
+
+export {gfmTableFromMarkdown, gfmTableToMarkdown} from './lib/index.js'
+
+// Add custom data tracked to turn markdown into a tree.
+declare module 'mdast-util-from-markdown' {
+  interface CompileData {
+    /**
+     * Whether we’re currently in a table.
+     */
+    inTable?: boolean | undefined
+  }
+}
+
+// Add custom data tracked to turn a syntax tree into markdown.
+declare module 'mdast-util-to-markdown' {
+  interface ConstructNameMap {
+    /**
+     * Whole table.
+     *
+     * ```markdown
+     * > | | a |
+     *     ^^^^^
+     * > | | - |
+     *     ^^^^^
+     * ```
+     */
+    table: 'table'
+
+    /**
+     * Table cell.
+     *
+     * ```markdown
+     * > | | a |
+     *     ^^^^^
+     *   | | - |
+     * ```
+     */
+    tableCell: 'tableCell'
+
+    /**
+     * Table row.
+     *
+     * ```markdown
+     * > | | a |
+     *     ^^^^^
+     *   | | - |
+     * ```
+     */
+    tableRow: 'tableRow'
+  }
+}
+
+// Note: `Table` is exposed from `@types/mdast`.

node_modules/mdast-util-gfm-table/index.js

@@ -0,0 +1,2 @@
+// Note: types exposed from `index.d.ts`.
+export {gfmTableFromMarkdown, gfmTableToMarkdown} from './lib/index.js'

node_modules/mdast-util-gfm-table/lib/index.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Create an extension for `mdast-util-from-markdown` to enable GFM tables in
+ * markdown.
+ *
+ * @returns {FromMarkdownExtension}
+ *   Extension for `mdast-util-from-markdown` to enable GFM tables.
+ */
+export function gfmTableFromMarkdown(): FromMarkdownExtension
+/**
+ * Create an extension for `mdast-util-to-markdown` to enable GFM tables in
+ * markdown.
+ *
+ * @param {Options | null | undefined} [options]
+ *   Configuration.
+ * @returns {ToMarkdownExtension}
+ *   Extension for `mdast-util-to-markdown` to enable GFM tables.
+ */
+export function gfmTableToMarkdown(
+  options?: Options | null | undefined
+): ToMarkdownExtension
+export type InlineCode = import('mdast').InlineCode
+export type Table = import('mdast').Table
+export type TableCell = import('mdast').TableCell
+export type TableRow = import('mdast').TableRow
+export type MarkdownTableOptions = import('markdown-table').Options
+export type CompileContext = import('mdast-util-from-markdown').CompileContext
+export type FromMarkdownExtension = import('mdast-util-from-markdown').Extension
+export type FromMarkdownHandle = import('mdast-util-from-markdown').Handle
+export type ToMarkdownExtension = import('mdast-util-to-markdown').Options
+export type ToMarkdownHandle = import('mdast-util-to-markdown').Handle
+export type State = import('mdast-util-to-markdown').State
+export type Info = import('mdast-util-to-markdown').Info
+/**
+ * Configuration.
+ */
+export type Options = {
+  /**
+   * Whether to add a space of padding between delimiters and cells (default:
+   * `true`).
+   */
+  tableCellPadding?: boolean | null | undefined
+  /**
+   * Whether to align the delimiters (default: `true`).
+   */
+  tablePipeAlign?: boolean | null | undefined
+  /**
+   * Function to detect the length of table cell content, used when aligning
+   * the delimiters between cells (optional).
+   */
+  stringLength?: MarkdownTableOptions['stringLength'] | null | undefined
+}

node_modules/mdast-util-gfm-table/lib/index.js

@@ -0,0 +1,300 @@
+/**
+ * @typedef {import('mdast').InlineCode} InlineCode
+ * @typedef {import('mdast').Table} Table
+ * @typedef {import('mdast').TableCell} TableCell
+ * @typedef {import('mdast').TableRow} TableRow
+ *
+ * @typedef {import('markdown-table').Options} MarkdownTableOptions
+ *
+ * @typedef {import('mdast-util-from-markdown').CompileContext} CompileContext
+ * @typedef {import('mdast-util-from-markdown').Extension} FromMarkdownExtension
+ * @typedef {import('mdast-util-from-markdown').Handle} FromMarkdownHandle
+ *
+ * @typedef {import('mdast-util-to-markdown').Options} ToMarkdownExtension
+ * @typedef {import('mdast-util-to-markdown').Handle} ToMarkdownHandle
+ * @typedef {import('mdast-util-to-markdown').State} State
+ * @typedef {import('mdast-util-to-markdown').Info} Info
+ */
+
+/**
+ * @typedef Options
+ *   Configuration.
+ * @property {boolean | null | undefined} [tableCellPadding=true]
+ *   Whether to add a space of padding between delimiters and cells (default:
+ *   `true`).
+ * @property {boolean | null | undefined} [tablePipeAlign=true]
+ *   Whether to align the delimiters (default: `true`).
+ * @property {MarkdownTableOptions['stringLength'] | null | undefined} [stringLength]
+ *   Function to detect the length of table cell content, used when aligning
+ *   the delimiters between cells (optional).
+ */
+
+import {ok as assert} from 'devlop'
+import {markdownTable} from 'markdown-table'
+import {defaultHandlers} from 'mdast-util-to-markdown'
+
+/**
+ * Create an extension for `mdast-util-from-markdown` to enable GFM tables in
+ * markdown.
+ *
+ * @returns {FromMarkdownExtension}
+ *   Extension for `mdast-util-from-markdown` to enable GFM tables.
+ */
+export function gfmTableFromMarkdown() {
+  return {
+    enter: {
+      table: enterTable,
+      tableData: enterCell,
+      tableHeader: enterCell,
+      tableRow: enterRow
+    },
+    exit: {
+      codeText: exitCodeText,
+      table: exitTable,
+      tableData: exit,
+      tableHeader: exit,
+      tableRow: exit
+    }
+  }
+}
+
+/**
+ * @this {CompileContext}
+ * @type {FromMarkdownHandle}
+ */
+function enterTable(token) {
+  const align = token._align
+  assert(align, 'expected `_align` on table')
+  this.enter(
+    {
+      type: 'table',
+      align: align.map(function (d) {
+        return d === 'none' ? null : d
+      }),
+      children: []
+    },
+    token
+  )
+  this.data.inTable = true
+}
+
+/**
+ * @this {CompileContext}
+ * @type {FromMarkdownHandle}
+ */
+function exitTable(token) {
+  this.exit(token)
+  this.data.inTable = undefined
+}
+
+/**
+ * @this {CompileContext}
+ * @type {FromMarkdownHandle}
+ */
+function enterRow(token) {
+  this.enter({type: 'tableRow', children: []}, token)
+}
+
+/**
+ * @this {CompileContext}
+ * @type {FromMarkdownHandle}
+ */
+function exit(token) {
+  this.exit(token)
+}
+
+/**
+ * @this {CompileContext}
+ * @type {FromMarkdownHandle}
+ */
+function enterCell(token) {
+  this.enter({type: 'tableCell', children: []}, token)
+}
+
+// Overwrite the default code text data handler to unescape escaped pipes when
+// they are in tables.
+/**
+ * @this {CompileContext}
+ * @type {FromMarkdownHandle}
+ */
+function exitCodeText(token) {
+  let value = this.resume()
+
+  if (this.data.inTable) {
+    value = value.replace(/\\([\\|])/g, replace)
+  }
+
+  const node = this.stack[this.stack.length - 1]
+  assert(node.type === 'inlineCode')
+  node.value = value
+  this.exit(token)
+}
+
+/**
+ * @param {string} $0
+ * @param {string} $1
+ * @returns {string}
+ */
+function replace($0, $1) {
+  // Pipes work, backslashes don’t (but can’t escape pipes).
+  return $1 === '|' ? $1 : $0
+}
+
+/**
+ * Create an extension for `mdast-util-to-markdown` to enable GFM tables in
+ * markdown.
+ *
+ * @param {Options | null | undefined} [options]
+ *   Configuration.
+ * @returns {ToMarkdownExtension}
+ *   Extension for `mdast-util-to-markdown` to enable GFM tables.
+ */
+export function gfmTableToMarkdown(options) {
+  const settings = options || {}
+  const padding = settings.tableCellPadding
+  const alignDelimiters = settings.tablePipeAlign
+  const stringLength = settings.stringLength
+  const around = padding ? ' ' : '|'
+
+  return {
+    unsafe: [
+      {character: '\r', inConstruct: 'tableCell'},
+      {character: '\n', inConstruct: 'tableCell'},
+      // A pipe, when followed by a tab or space (padding), or a dash or colon
+      // (unpadded delimiter row), could result in a table.
+      {atBreak: true, character: '|', after: '[\t :-]'},
+      // A pipe in a cell must be encoded.
+      {character: '|', inConstruct: 'tableCell'},
+      // A colon must be followed by a dash, in which case it could start a
+      // delimiter row.
+      {atBreak: true, character: ':', after: '-'},
+      // A delimiter row can also start with a dash, when followed by more
+      // dashes, a colon, or a pipe.
+      // This is a stricter version than the built in check for lists, thematic
+      // breaks, and setex heading underlines though:
+      // <https://github.com/syntax-tree/mdast-util-to-markdown/blob/51a2038/lib/unsafe.js#L57>
+      {atBreak: true, character: '-', after: '[:|-]'}
+    ],
+    handlers: {
+      inlineCode: inlineCodeWithTable,
+      table: handleTable,
+      tableCell: handleTableCell,
+      tableRow: handleTableRow
+    }
+  }
+
+  /**
+   * @type {ToMarkdownHandle}
+   * @param {Table} node
+   */
+  function handleTable(node, _, state, info) {
+    return serializeData(handleTableAsData(node, state, info), node.align)
+  }
+
+  /**
+   * This function isn’t really used normally, because we handle rows at the
+   * table level.
+   * But, if someone passes in a table row, this ensures we make somewhat sense.
+   *
+   * @type {ToMarkdownHandle}
+   * @param {TableRow} node
+   */
+  function handleTableRow(node, _, state, info) {
+    const row = handleTableRowAsData(node, state, info)
+    const value = serializeData([row])
+    // `markdown-table` will always add an align row
+    return value.slice(0, value.indexOf('\n'))
+  }
+
+  /**
+   * @type {ToMarkdownHandle}
+   * @param {TableCell} node
+   */
+  function handleTableCell(node, _, state, info) {
+    const exit = state.enter('tableCell')
+    const subexit = state.enter('phrasing')
+    const value = state.containerPhrasing(node, {
+      ...info,
+      before: around,
+      after: around
+    })
+    subexit()
+    exit()
+    return value
+  }
+
+  /**
+   * @param {Array<Array<string>>} matrix
+   * @param {Array<string | null | undefined> | null | undefined} [align]
+   */
+  function serializeData(matrix, align) {
+    return markdownTable(matrix, {
+      align,
+      // @ts-expect-error: `markdown-table` types should support `null`.
+      alignDelimiters,
+      // @ts-expect-error: `markdown-table` types should support `null`.
+      padding,
+      // @ts-expect-error: `markdown-table` types should support `null`.
+      stringLength
+    })
+  }
+
+  /**
+   * @param {Table} node
+   * @param {State} state
+   * @param {Info} info
+   */
+  function handleTableAsData(node, state, info) {
+    const children = node.children
+    let index = -1
+    /** @type {Array<Array<string>>} */
+    const result = []
+    const subexit = state.enter('table')
+
+    while (++index < children.length) {
+      result[index] = handleTableRowAsData(children[index], state, info)
+    }
+
+    subexit()
+
+    return result
+  }
+
+  /**
+   * @param {TableRow} node
+   * @param {State} state
+   * @param {Info} info
+   */
+  function handleTableRowAsData(node, state, info) {
+    const children = node.children
+    let index = -1
+    /** @type {Array<string>} */
+    const result = []
+    const subexit = state.enter('tableRow')
+
+    while (++index < children.length) {
+      // Note: the positional info as used here is incorrect.
+      // Making it correct would be impossible due to aligning cells?
+      // And it would need copy/pasting `markdown-table` into this project.
+      result[index] = handleTableCell(children[index], node, state, info)
+    }
+
+    subexit()
+
+    return result
+  }
+
+  /**
+   * @type {ToMarkdownHandle}
+   * @param {InlineCode} node
+   */
+  function inlineCodeWithTable(node, parent, state) {
+    let value = defaultHandlers.inlineCode(node, parent, state)
+
+    if (state.stack.includes('tableCell')) {
+      value = value.replace(/\|/g, '\\$&')
+    }
+
+    return value
+  }
+}

node_modules/mdast-util-gfm-table/license

@@ -0,0 +1,22 @@
+(The MIT License)
+
+Copyright (c) 2020 Titus Wormer <tituswormer@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

node_modules/mdast-util-gfm-table/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "mdast-util-gfm-table",
+  "version": "2.0.0",
+  "description": "mdast extension to parse and serialize GFM tables",
+  "license": "MIT",
+  "keywords": [
+    "unist",
+    "mdast",
+    "mdast-util",
+    "util",
+    "utility",
+    "markdown",
+    "markup",
+    "table",
+    "row",
+    "column",
+    "cell",
+    "tabular",
+    "gfm"
+  ],
+  "repository": "syntax-tree/mdast-util-gfm-table",
+  "bugs": "https://github.com/syntax-tree/mdast-util-gfm-table/issues",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/unified"
+  },
+  "author": "Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)",
+  "contributors": [
+    "Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)"
+  ],
+  "sideEffects": false,
+  "type": "module",
+  "exports": "./index.js",
+  "files": [
+    "lib/",
+    "index.d.ts",
+    "index.js"
+  ],
+  "dependencies": {
+    "@types/mdast": "^4.0.0",
+    "devlop": "^1.0.0",
+    "markdown-table": "^3.0.0",
+    "mdast-util-from-markdown": "^2.0.0",
+    "mdast-util-to-markdown": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "c8": "^8.0.0",
+    "micromark-extension-gfm-table": "^2.0.0",
+    "prettier": "^2.0.0",
+    "remark-cli": "^11.0.0",
+    "remark-preset-wooorm": "^9.0.0",
+    "string-width": "^6.0.0",
+    "type-coverage": "^2.0.0",
+    "typescript": "^5.0.0",
+    "unist-util-remove-position": "^5.0.0",
+    "xo": "^0.54.0"
+  },
+  "scripts": {
+    "prepack": "npm run build && npm run format",
+    "build": "tsc --build --clean && tsc --build && type-coverage",
+    "format": "remark . -qfo && prettier . -w --loglevel warn && xo --fix",
+    "test-api-prod": "node --conditions production test.js",
+    "test-api-dev": "node --conditions development test.js",
+    "test-api": "npm run test-api-dev && npm run test-api-prod",
+    "test-coverage": "c8 --100 --reporter lcov npm run test-api",
+    "test": "npm run build && npm run format && npm run test-coverage"
+  },
+  "prettier": {
+    "bracketSpacing": false,
+    "semi": false,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "none",
+    "useTabs": false
+  },
+  "remarkConfig": {
+    "plugins": [
+      "remark-preset-wooorm"
+    ]
+  },
+  "typeCoverage": {
+    "atLeast": 100,
+    "detail": true,
+    "ignoreCatch": true,
+    "strict": true
+  },
+  "xo": {
+    "overrides": [
+      {
+        "files": [
+          "**/*.ts"
+        ],
+        "rules": {
+          "@typescript-eslint/consistent-type-definitions": "off"
+        }
+      }
+    ],
+    "prettier": true
+  }
+}

node_modules/mdast-util-gfm-table/readme.md

@@ -0,0 +1,605 @@
+# mdast-util-gfm-table
+
+[![Build][build-badge]][build]
+[![Coverage][coverage-badge]][coverage]
+[![Downloads][downloads-badge]][downloads]
+[![Size][size-badge]][size]
+[![Sponsors][sponsors-badge]][collective]
+[![Backers][backers-badge]][collective]
+[![Chat][chat-badge]][chat]
+
+[mdast][] extensions to parse and serialize [GFM][] tables.
+
+## Contents
+
+*   [What is this?](#what-is-this)
+*   [When to use this](#when-to-use-this)
+*   [Install](#install)
+*   [Use](#use)
+*   [API](#api)
+    *   [`gfmTableFromMarkdown`](#gfmtablefrommarkdown)
+    *   [`gfmTableToMarkdown(options?)`](#gfmtabletomarkdownoptions)
+    *   [`Options`](#options)
+*   [Examples](#examples)
+    *   [Example: `stringLength`](#example-stringlength)
+*   [HTML](#html)
+*   [Syntax](#syntax)
+*   [Syntax tree](#syntax-tree)
+    *   [Nodes](#nodes)
+    *   [Enumeration](#enumeration)
+    *   [Content model](#content-model)
+*   [Types](#types)
+*   [Compatibility](#compatibility)
+*   [Related](#related)
+*   [Contribute](#contribute)
+*   [License](#license)
+
+## What is this?
+
+This package contains two extensions that add support for GFM table syntax in
+markdown to [mdast][].
+These extensions plug into
+[`mdast-util-from-markdown`][mdast-util-from-markdown] (to support parsing
+tables in markdown into a syntax tree) and
+[`mdast-util-to-markdown`][mdast-util-to-markdown] (to support serializing
+tables in syntax trees to markdown).
+
+## When to use this
+
+You can use these extensions when you are working with
+`mdast-util-from-markdown` and `mdast-util-to-markdown` already.
+
+When working with `mdast-util-from-markdown`, you must combine this package
+with [`micromark-extension-gfm-table`][extension].
+
+When you don’t need a syntax tree, you can use [`micromark`][micromark]
+directly with `micromark-extension-gfm-table`.
+
+When you are working with syntax trees and want all of GFM, use
+[`mdast-util-gfm`][mdast-util-gfm] instead.
+
+All these packages are used [`remark-gfm`][remark-gfm], which
+focusses on making it easier to transform content by abstracting these
+internals away.
+
+This utility does not handle how markdown is turned to HTML.
+That’s done by [`mdast-util-to-hast`][mdast-util-to-hast].
+
+## Install
+
+This package is [ESM only][esm].
+In Node.js (version 16+), install with [npm][]:
+
+```sh
+npm install mdast-util-gfm-table
+```
+
+In Deno with [`esm.sh`][esmsh]:
+
+```js
+import {gfmTableFromMarkdown, gfmTableToMarkdown} from 'https://esm.sh/mdast-util-gfm-table@2'
+```
+
+In browsers with [`esm.sh`][esmsh]:
+
+```html
+<script type="module">
+  import {gfmTableFromMarkdown, gfmTableToMarkdown} from 'https://esm.sh/mdast-util-gfm-table@2?bundle'
+</script>
+```
+
+## Use
+
+Say our document `example.md` contains:
+
+```markdown
+| a | b | c | d |
+| - | :- | -: | :-: |
+| e | f |
+| g | h | i | j | k |
+```
+
+…and our module `example.js` looks as follows:
+
+```js
+import fs from 'node:fs/promises'
+import {gfmTable} from 'micromark-extension-gfm-table'
+import {fromMarkdown} from 'mdast-util-from-markdown'
+import {gfmTableFromMarkdown, gfmTableToMarkdown} from 'mdast-util-gfm-table'
+import {toMarkdown} from 'mdast-util-to-markdown'
+
+const doc = await fs.readFile('example.md')
+
+const tree = fromMarkdown(doc, {
+  extensions: [gfmTable()],
+  mdastExtensions: [gfmTableFromMarkdown()]
+})
+
+console.log(tree)
+
+const out = toMarkdown(tree, {extensions: [gfmTableToMarkdown()]})
+
+console.log(out)
+```
+
+…now running `node example.js` yields (positional info removed for brevity):
+
+```js
+{
+  type: 'root',
+  children: [
+    {
+      type: 'table',
+      align: [null, 'left', 'right', 'center'],
+      children: [
+        {
+          type: 'tableRow',
+          children: [
+            {type: 'tableCell', children: [{type: 'text', value: 'a'}]},
+            {type: 'tableCell', children: [{type: 'text', value: 'b'}]},
+            {type: 'tableCell', children: [{type: 'text', value: 'c'}]},
+            {type: 'tableCell', children: [{type: 'text', value: 'd'}]}
+          ]
+        },
+        {
+          type: 'tableRow',
+          children: [
+            {type: 'tableCell', children: [{type: 'text', value: 'e'}]},
+            {type: 'tableCell', children: [{type: 'text', value: 'f'}]}
+          ]
+        },
+        {
+          type: 'tableRow',
+          children: [
+            {type: 'tableCell', children: [{type: 'text', value: 'g'}]},
+            {type: 'tableCell', children: [{type: 'text', value: 'h'}]},
+            {type: 'tableCell', children: [{type: 'text', value: 'i'}]},
+            {type: 'tableCell', children: [{type: 'text', value: 'j'}]},
+            {type: 'tableCell', children: [{type: 'text', value: 'k'}]}
+          ]
+        }
+      ]
+    }
+  ]
+}
+```
+
+```markdown
+| a | b  |  c |  d  |   |
+| - | :- | -: | :-: | - |
+| e | f  |    |     |   |
+| g | h  |  i |  j  | k |
+```
+
+## API
+
+This package exports the identifiers
+[`gfmTableFromMarkdown`][api-gfm-table-from-markdown] and
+[`gfmTableToMarkdown`][api-gfm-table-to-markdown].
+There is no default export.
+
+### `gfmTableFromMarkdown`
+
+Create an extension for [`mdast-util-from-markdown`][mdast-util-from-markdown]
+to enable GFM tables in markdown.
+
+###### Returns
+
+Extension for `mdast-util-from-markdown` to enable GFM tables
+([`FromMarkdownExtension`][from-markdown-extension]).
+
+### `gfmTableToMarkdown(options?)`
+
+Create an extension for [`mdast-util-to-markdown`][mdast-util-to-markdown] to
+enable GFM tables in markdown.
+
+###### Parameters
+
+*   `options` ([`Options`][api-options], optional)
+    — configuration
+
+###### Returns
+
+Extension for `mdast-util-to-markdown` to enable GFM tables
+([`ToMarkdownExtension`][to-markdown-extension]).
+
+### `Options`
+
+Configuration (TypeScript type).
+
+###### Fields
+
+*   `tableCellPadding` (`boolean`, default: `true`)
+    — whether to add a space of padding between delimiters and cells
+*   `tablePipeAlign` (`boolean`, default: `true`)
+    — whether to align the delimiters
+*   `stringLength` (`((value: string) => number)`, default: `s => s.length`)
+    — function to detect the length of table cell content, used when aligning
+    the delimiters between cells
+
+## Examples
+
+### Example: `stringLength`
+
+It’s possible to align tables based on the visual width of cells.
+First, let’s show the problem:
+
+```js
+import {gfmTable} from 'micromark-extension-gfm-table'
+import {fromMarkdown} from 'mdast-util-from-markdown'
+import {gfmTableFromMarkdown, gfmTableToMarkdown} from 'mdast-util-gfm-table'
+import {toMarkdown} from 'mdast-util-to-markdown'
+
+const doc = `| Alpha | Bravo |
+| - | - |
+| 中文 | Charlie |
+| 👩‍❤️‍👩 | Delta |`
+
+const tree = fromMarkdown(doc, {
+  extensions: [gfmTable],
+  mdastExtensions: [gfmTableFromMarkdown]
+})
+
+console.log(toMarkdown(tree, {extensions: [gfmTableToMarkdown()]}))
+```
+
+The above code shows how these utilities can be used to format markdown.
+The output is as follows:
+
+```markdown
+| Alpha    | Bravo   |
+| -------- | ------- |
+| 中文       | Charlie |
+| 👩‍❤️‍👩 | Delta   |
+```
+
+To improve the alignment of these full-width characters and emoji, pass a
+`stringLength` function that calculates the visual width of cells.
+One such algorithm is [`string-width`][string-width].
+It can be used like so:
+
+```diff
+@@ -2,6 +2,7 @@ import {gfmTable} from 'micromark-extension-gfm-table'
+ import {fromMarkdown} from 'mdast-util-from-markdown'
+ import {gfmTableFromMarkdown, gfmTableToMarkdown} from 'mdast-util-gfm-table'
+ import {toMarkdown} from 'mdast-util-to-markdown'
++import stringWidth from 'string-width'
+
+ const doc = `| Alpha | Bravo |
+ | - | - |
+@@ -13,4 +14,8 @@ const tree = fromMarkdown(doc, {
+   mdastExtensions: [gfmTableFromMarkdown()]
+ })
+
+-console.log(toMarkdown(tree, {extensions: [gfmTableToMarkdown()]}))
++console.log(
++  toMarkdown(tree, {
++    extensions: [gfmTableToMarkdown({stringLength: stringWidth})]
++  })
++)
+```
+
+The output of our code with these changes is as follows:
+
+```markdown
+| Alpha | Bravo   |
+| ----- | ------- |
+| 中文  | Charlie |
+| 👩‍❤️‍👩    | Delta   |
+```
+
+## HTML
+
+This utility does not handle how markdown is turned to HTML.
+That’s done by [`mdast-util-to-hast`][mdast-util-to-hast].
+
+## Syntax
+
+See [Syntax in `micromark-extension-gfm-table`][syntax].
+
+## Syntax tree
+
+The following interfaces are added to **[mdast][]** by this utility.
+
+### Nodes
+
+#### `Table`
+
+```idl
+interface Table <: Parent {
+  type: 'table'
+  align: [alignType]?
+  children: [TableContent]
+}
+```
+
+**Table** (**[Parent][dfn-parent]**) represents two-dimensional data.
+
+**Table** can be used where **[flow][dfn-flow-content]** content is expected.
+Its content model is **[table][dfn-table-content]** content.
+
+The *[head][term-head]* of the node represents the labels of the columns.
+
+An `align` field can be present.
+If present, it must be a list of **[alignTypes][dfn-enum-align-type]**.
+It represents how cells in columns are aligned.
+
+For example, the following markdown:
+
+```markdown
+| foo | bar |
+| :-- | :-: |
+| baz | qux |
+```
+
+Yields:
+
+```js
+{
+  type: 'table',
+  align: ['left', 'center'],
+  children: [
+    {
+      type: 'tableRow',
+      children: [
+        {
+          type: 'tableCell',
+          children: [{type: 'text', value: 'foo'}]
+        },
+        {
+          type: 'tableCell',
+          children: [{type: 'text', value: 'bar'}]
+        }
+      ]
+    },
+    {
+      type: 'tableRow',
+      children: [
+        {
+          type: 'tableCell',
+          children: [{type: 'text', value: 'baz'}]
+        },
+        {
+          type: 'tableCell',
+          children: [{type: 'text', value: 'qux'}]
+        }
+      ]
+    }
+  ]
+}
+```
+
+#### `TableRow`
+
+```idl
+interface TableRow <: Parent {
+  type: "tableRow"
+  children: [RowContent]
+}
+```
+
+**TableRow** (**[Parent][dfn-parent]**) represents a row of cells in a table.
+
+**TableRow** can be used where **[table][dfn-table-content]** content is
+expected.
+Its content model is **[row][dfn-row-content]** content.
+
+If the node is a *[head][term-head]*, it represents the labels of the columns
+for its parent **[Table][dfn-table]**.
+
+For an example, see **[Table][dfn-table]**.
+
+#### `TableCell`
+
+```idl
+interface TableCell <: Parent {
+  type: "tableCell"
+  children: [PhrasingContent]
+}
+```
+
+**TableCell** (**[Parent][dfn-parent]**) represents a header cell in a
+**[Table][dfn-table]**, if its parent is a *[head][term-head]*, or a data
+cell otherwise.
+
+**TableCell** can be used where **[row][dfn-row-content]** content is expected.
+Its content model is **[phrasing][dfn-phrasing-content]** content excluding
+**[Break][dfn-break]** nodes.
+
+For an example, see **[Table][dfn-table]**.
+
+### Enumeration
+
+#### `alignType`
+
+```idl
+enum alignType {
+  'center' | 'left' | 'right' | null
+}
+```
+
+**alignType** represents how phrasing content is aligned
+([\[CSSTEXT\]][css-text]).
+
+*   **`'left'`**: See the [`left`][css-left] value of the `text-align` CSS
+    property
+*   **`'right'`**: See the [`right`][css-right] value of the `text-align`
+    CSS property
+*   **`'center'`**: See the [`center`][css-center] value of the `text-align`
+    CSS property
+*   **`null`**: phrasing content is aligned as defined by the host environment
+
+### Content model
+
+#### `FlowContent` (GFM table)
+
+```idl
+type FlowContentGfm = Table | FlowContent
+```
+
+#### `TableContent`
+
+```idl
+type TableContent = TableRow
+```
+
+**Table** content represent the rows in a table.
+
+#### `RowContent`
+
+```idl
+type RowContent = TableCell
+```
+
+**Row** content represent the cells in a row.
+
+## Types
+
+This package is fully typed with [TypeScript][].
+It exports the additional type [`Options`][api-options].
+
+The `Table`, `TableRow`, and `TableCell` types of the mdast nodes are exposed
+from `@types/mdast`.
+
+## Compatibility
+
+Projects maintained by the unified collective are compatible with maintained
+versions of Node.js.
+
+When we cut a new major release, we drop support for unmaintained versions of
+Node.
+This means we try to keep the current release line, `mdast-util-gfm-table@^2`,
+compatible with Node.js 16.
+
+This utility works with `mdast-util-from-markdown` version 2+ and
+`mdast-util-to-markdown` version 2+.
+
+## Related
+
+*   [`remarkjs/remark-gfm`][remark-gfm]
+    — remark plugin to support GFM
+*   [`syntax-tree/mdast-util-gfm`][mdast-util-gfm]
+    — same but all of GFM (autolink literals, footnotes, strikethrough, tables,
+    tasklists)
+*   [`micromark/micromark-extension-gfm-table`][extension]
+    — micromark extension to parse GFM tables
+
+## Contribute
+
+See [`contributing.md`][contributing] in [`syntax-tree/.github`][health] for
+ways to get started.
+See [`support.md`][support] for ways to get help.
+
+This project has a [code of conduct][coc].
+By interacting with this repository, organization, or community you agree to
+abide by its terms.
+
+## License
+
+[MIT][license] © [Titus Wormer][author]
+
+<!-- Definitions -->
+
+[build-badge]: https://github.com/syntax-tree/mdast-util-gfm-table/workflows/main/badge.svg
+
+[build]: https://github.com/syntax-tree/mdast-util-gfm-table/actions
+
+[coverage-badge]: https://img.shields.io/codecov/c/github/syntax-tree/mdast-util-gfm-table.svg
+
+[coverage]: https://codecov.io/github/syntax-tree/mdast-util-gfm-table
+
+[downloads-badge]: https://img.shields.io/npm/dm/mdast-util-gfm-table.svg
+
+[downloads]: https://www.npmjs.com/package/mdast-util-gfm-table
+
+[size-badge]: https://img.shields.io/badge/dynamic/json?label=minzipped%20size&query=$.size.compressedSize&url=https://deno.bundlejs.com/?q=mdast-util-gfm-table
+
+[size]: https://bundlejs.com/?q=mdast-util-gfm-table
+
+[sponsors-badge]: https://opencollective.com/unified/sponsors/badge.svg
+
+[backers-badge]: https://opencollective.com/unified/backers/badge.svg
+
+[collective]: https://opencollective.com/unified
+
+[chat-badge]: https://img.shields.io/badge/chat-discussions-success.svg
+
+[chat]: https://github.com/syntax-tree/unist/discussions
+
+[npm]: https://docs.npmjs.com/cli/install
+
+[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
+
+[esmsh]: https://esm.sh
+
+[typescript]: https://www.typescriptlang.org
+
+[license]: license
+
+[author]: https://wooorm.com
+
+[health]: https://github.com/syntax-tree/.github
+
+[contributing]: https://github.com/syntax-tree/.github/blob/main/contributing.md
+
+[support]: https://github.com/syntax-tree/.github/blob/main/support.md
+
+[coc]: https://github.com/syntax-tree/.github/blob/main/code-of-conduct.md
+
+[remark-gfm]: https://github.com/remarkjs/remark-gfm
+
+[mdast]: https://github.com/syntax-tree/mdast
+
+[mdast-util-gfm]: https://github.com/syntax-tree/mdast-util-gfm
+
+[mdast-util-from-markdown]: https://github.com/syntax-tree/mdast-util-from-markdown
+
+[mdast-util-to-markdown]: https://github.com/syntax-tree/mdast-util-to-markdown
+
+[mdast-util-to-hast]: https://github.com/syntax-tree/mdast-util-to-hast
+
+[micromark]: https://github.com/micromark/micromark
+
+[extension]: https://github.com/micromark/micromark-extension-gfm-table
+
+[syntax]: https://github.com/micromark/micromark-extension-gfm-table#syntax
+
+[gfm]: https://github.github.com/gfm/
+
+[string-width]: https://github.com/sindresorhus/string-width
+
+[css-text]: https://drafts.csswg.org/css-text/
+
+[css-left]: https://drafts.csswg.org/css-text/#valdef-text-align-left
+
+[css-right]: https://drafts.csswg.org/css-text/#valdef-text-align-right
+
+[css-center]: https://drafts.csswg.org/css-text/#valdef-text-align-center
+
+[term-head]: https://github.com/syntax-tree/unist#head
+
+[dfn-parent]: https://github.com/syntax-tree/mdast#parent
+
+[dfn-phrasing-content]: https://github.com/syntax-tree/mdast#phrasingcontent
+
+[dfn-break]: https://github.com/syntax-tree/mdast#break
+
+[from-markdown-extension]: https://github.com/syntax-tree/mdast-util-from-markdown#extension
+
+[to-markdown-extension]: https://github.com/syntax-tree/mdast-util-to-markdown#options
+
+[api-gfm-table-from-markdown]: #gfmtablefrommarkdown
+
+[api-gfm-table-to-markdown]: #gfmtabletomarkdownoptions
+
+[api-options]: #options
+
+[dfn-flow-content]: #flowcontent-gfm-table
+
+[dfn-table-content]: #tablecontent
+
+[dfn-enum-align-type]: #aligntype
+
+[dfn-row-content]: #rowcontent
+
+[dfn-table]: #table