Platform circles

Author: m-bert

packages/docs-gesture-handler/docusaurus.config.js

@@ -1,6 +1,7 @@
 /*
 In swizzled components look for "SWM -" string to see our modifications
 */
+const platformsCirclePlugin = require('./plugins/platforms-circles.js');
 
 const lightCodeTheme = require('./src/theme/CodeBlock/highlighting-light.js');
 const darkCodeTheme = require('./src/theme/CodeBlock/highlighting-dark.js');
@@ -49,6 +50,10 @@ const config = {
               label: '3.x',
             },
           },
+          beforeDefaultRemarkPlugins: [
+            platformsCirclePlugin.processHeaderMarkers,
+          ],
+          remarkPlugins: [platformsCirclePlugin.removeHeaderJSX],
         },
         theme: {
           customCss: require.resolve('./src/css/index.css'),

packages/docs-gesture-handler/package.json

@@ -51,6 +51,7 @@
     "react-native-worklets": "^0.1.0",
     "source-map": "^0.7.4",
     "source-map-loader": "^4.0.1",
+    "unist-util-visit": "^5.1.0",
     "usehooks-ts": "^2.9.1",
     "vis-network": "^10.0.2"
   },

packages/docs-gesture-handler/plugins/platforms-circles.js

@@ -0,0 +1,81 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+
+// plugins/remark-add-platform-metadata.js
+import { visit } from 'unist-util-visit';
+
+const platformClasses = {
+  '[A]': 'platform-indicator-android',
+  '[I]': 'platform-indicator-ios',
+  '[W]': 'platform-indicator-web',
+};
+
+const processHeaderMarkers = () => {
+  return (ast) => {
+    visit(ast, 'heading', (node) => {
+      let textContent = '';
+      let markers = [];
+
+      visit(node, 'text', (textNode) => {
+        // Split header into text and platform markers
+        const headerParts = textNode.value
+          .split(/(\[A\]|\[I\]|\[W\])/g)
+          .filter((headerPart) => headerPart !== '');
+
+        // Assume that the first part is always the text content, and the rest are markers
+        textContent = headerParts.shift().trimEnd();
+
+        // Sort markers to ensure consistent order
+        markers = headerParts.sort();
+      });
+
+      if (markers.length === 0) {
+        return;
+      }
+
+      const newChildren = [{ type: 'text', value: textContent }];
+
+      markers.forEach((marker) => {
+        newChildren.push({
+          type: 'mdxJsxTextElement',
+          name: 'span',
+          attributes: [
+            {
+              type: 'mdxJsxAttribute',
+              name: 'className',
+              value: platformClasses[marker],
+            },
+          ],
+          children: [],
+          data: { isPlatformIndicator: true },
+        });
+      });
+
+      node.children = newChildren;
+    });
+  };
+};
+
+const removeHeaderJSX = () => {
+  return (ast) => {
+    const classes = Object.values(platformClasses);
+
+    visit(ast, 'heading', (node) => {
+      node.children = node.children.filter((child) => {
+        if (child.type === 'mdxJsxTextElement') {
+          const classAttr = child.attributes?.find(
+            (a) => a.name === 'className'
+          );
+
+          return !(classAttr && classes.includes(classAttr.value));
+        }
+
+        return true;
+      });
+    });
+  };
+};
+
+export { processHeaderMarkers, removeHeaderJSX };

packages/docs-gesture-handler/src/css/index.css

@@ -1,3 +1,4 @@
 @import 'colors.css';
 @import 'typography.css';
+@import 'toc.css';
 @import 'overrides.css';

packages/docs-gesture-handler/src/css/toc.css

@@ -0,0 +1,29 @@
+.table-of-contents .platform-indicator-android,
+.table-of-contents .platform-indicator-ios,
+.table-of-contents .platform-indicator-web {
+  display: inline-block;
+
+  /* Circle shape */
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+
+  margin-left: 4px;
+
+  /* Vertical alignment */
+  vertical-align: middle;
+  position: relative;
+  top: -1px;
+}
+
+.table-of-contents .platform-indicator-android {
+  background: #34a853;
+}
+
+.table-of-contents .platform-indicator-ios {
+  background: #000000;
+}
+
+.table-of-contents .platform-indicator-web {
+  background: #1067c4;
+}

packages/docs-gesture-handler/yarn.lock

@@ -12980,6 +12980,15 @@ unist-util-visit@^5.0.0:
     unist-util-is "^6.0.0"
     unist-util-visit-parents "^6.0.0"
 
+unist-util-visit@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-5.1.0.tgz#9a2a28b0aa76a15e0da70a08a5863a2f060e2468"
+  integrity sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==
+  dependencies:
+    "@types/unist" "^3.0.0"
+    unist-util-is "^6.0.0"
+    unist-util-visit-parents "^6.0.0"
+
 universalify@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"