Markdown syntax migration script

Script replacing include_code with code-snippet

Migration script: partials, some variables

Add variables to conversion script

draft repo-link component

Complete repo-link component

Migration script: handle github links

Draft include_svg→inline-svg (non-functional)

Currently doesn't work due to image path issues.
Also, captions and custom classes (for inlining) not implemented yet.

Conversion script: refactor & add code-page-name

Custom code-page-name component works around Markdoc limitation where
vars can't be used in `inline code` sections.

Migrate script: Handle more code includes correctly

Migration script: tabs and tabbed code samples

Child pages macro & conversion script

Adapted from 70cffa67ed

Migration script: update with some partial fixes

Migration script: callouts→admonitions

Fix auto-generation of index pages

Migration script: fix SVG migration

Migration scripting: fix code block prefixes & indentation

- Use the Redocly 0.66 feature for code block prefixes
- Update the script for converting indented code blocks to fences with
  Roman's latest fixes (now uses 4 spaces per level, for consistency)

content/@theme/markdoc/components.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+// @ts-ignore
+import dynamicReact from '@markdoc/markdoc/dist/react';
+import { usePageSharedData } from '@portal/hooks';
+import { Link } from '@portal/Link';
+
+export function IndexPageItems() {
+    const data = usePageSharedData('index-page-items') as any[];
+    return (
+        <div className="children-display">
+            <ul>
+              {data.map((item: any) => (
+                <li className="level-1">
+                  <Link to={item.slug}>{item.title}</Link>
+                  <p className='class="blurb child-blurb'>{item.blurb}</p>
+                </li>
+              ))}
+            </ul>
+        </div>
+    );
+}
+
+export function RepoLink(props: {
+        children: React.ReactNode;
+        path: string;
+        github_fork: string;
+        github_branch: string
+    }) {
+    const treeblob = props.path.indexOf(".") >= 0 ? "blob/" : "tree/"
+    const sep = props.github_fork[-1] == "/" ? "" : "/"
+    const href = props.github_fork+sep+treeblob+props.github_branch+"/"+props.path
+
+    return (
+        <Link to={href}>{dynamicReact(props.children, React, {})}</Link>
+    )
+}
+
+export function CodePageName(props: {
+    name: string;
+}) {
+    return (
+        <code>{props.name}</code>
+    )
+}

content/@theme/markdoc/schema.ts

@@ -0,0 +1,50 @@
+import { Schema, Tag } from '@markdoc/markdoc';
+
+export const indexPageList: Schema & { tagName: string } = {
+  tagName: 'child-pages',
+  render: 'IndexPageItems',
+  selfClosing: true,
+};
+
+export const repoLink: Schema & { tagName: string } = {
+    tagName: 'repo-link',
+    attributes: {
+      path: {
+        type: 'String',
+        required: true,
+      },
+      github_fork: {
+        type: 'String',
+        required: false,
+      },
+      github_branch: {
+        type: 'String',
+        required: false,
+      },
+    },
+    transform(node, config) {
+        const attributes = node.transformAttributes(config);
+        attributes["github_fork"] = attributes["github_fork"] || config.variables.env.PUBLIC_GITHUB_FORK;
+        attributes["github_branch"] = attributes["github_branch"] || config.variables.env.PUBLIC_GITHUB_BRANCH;
+        const children = node.transformChildren(config);
+        return new Tag(this.render, attributes, children);
+    },
+    render: 'RepoLink',
+};
+
+export const codePageName: Schema & { tagName: string } = {
+  tagName: 'code-page-name',
+  attributes: {
+    name: {
+      type: 'String',
+      required: false,
+    },
+  },
+  transform(node, config) {
+    const attributes = node.transformAttributes(config);
+    attributes["name"] = config.variables.frontmatter.seo.title;
+    return new Tag(this.render, attributes);
+  },
+  render: 'CodePageName',
+  selfClosing: true,
+};

content/@theme/plugins/index-pages.js

@@ -0,0 +1,63 @@
+// @ts-check
+import { readSharedData } from '@redocly/portal/dist/server/utils/shared-data.js'; // TODO: export function from root package
+const INDEX_PAGE_INFO_DATA_KEY = 'index-page-items';
+
+export function indexPages() {
+  /** @type {import("@redocly/portal/dist/server/plugins/types").PluginInstance } */
+  const instance = {
+    // hook that gets executed after all routes were created
+    async afterRoutesCreated(contentProvider, actions) {
+      // get all the routes that are ind pages
+      const indexRoutes = actions.getAllRoutes().filter(route => route.metadata?.indexPage);
+
+      for (const route of indexRoutes) {
+        // @ts-ignore this uses some internals, we will expose them in nicer way in the future releases
+        const sidebarId = actions.routesSharedData.get(route.slug)?.['sidebar']; // TODO: implement a helper function for this
+        /** @type {any} */
+        const sidebar = await readSharedData(sidebarId, actions.outdir);
+
+        if (!sidebar) {
+          console.log('[warn] Index route used with no sidebar', route.fsPath);
+          continue;
+        }
+
+        const item = findItemDeep(sidebar.items, route.fsPath);
+        const childrenPaths = (item.items || []).map(item => item.fsPath).filter(Boolean);
+
+        const childRoutes = childrenPaths.map(fsPath => actions.getRouteByFsPath(fsPath));
+        const childRoutesData = await Promise.all(
+          childRoutes.map(async route => {
+            const { parsed } = contentProvider.loadContent(route.fsPath, 'frontmatter');
+            return {
+              ...parsed?.data,
+              slug: route.slug,
+              title: await route.getNavText(),
+            };
+          })
+        );
+
+        const sharedDataId = await actions.createSharedData(
+          route.slug + '_' + INDEX_PAGE_INFO_DATA_KEY,
+          childRoutesData
+        );
+        actions.addRouteSharedData(route.slug, INDEX_PAGE_INFO_DATA_KEY, sharedDataId);
+      }
+    },
+  };
+  return instance;
+}
+
+function findItemDeep(items, fsPath) {
+  for (const item of items) {
+    if (item.fsPath === fsPath) {
+      return item;
+    }
+
+    if (item.items) {
+      const found = findItemDeep(item.items, fsPath);
+      if (found) {
+        return found;
+      }
+    }
+  }
+}