Enhance metadata handling in CodeBlockWithMetadata component and update example codeblock configuration

Author: mguludag

docs/libs/beman.optional/index.md

@@ -59,7 +59,7 @@ for (const auto& i : opt) {
 Full code can be found in [./examples/range_loop.cpp](https://github.com/bemanproject/optional/blob/main/examples/range_loop.cpp). Build and run instructions in
 [./examples/README.md](https://github.com/bemanproject/optional/blob/main/examples/README.md).  
 
-```cpp { "compiler": "clang_trunk", "libs": ["beman_optional@trunk"], "options": "-std=c++26" }
+```cpp { "compilers": ["clang_trunk -std=c++26", "gsnapshot -std=c++26"], "libs": ["beman_optional@trunk"], "filters": {"execute":true} }
 // examples/range_loop.cpp -*-C++-*-
 // SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
 

docusaurus.config.ts

@@ -43,8 +43,6 @@ const config: Config = {
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
 
-  // plugins: [require.resolve("./src/plugins/codeblock-metadata")],
-
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
   // may want to replace "en" with "zh-Hans".

package-lock.json

@@ -17,15 +17,12 @@
   "dependencies": {
     "@docusaurus/core": "3.7.0",
     "@docusaurus/preset-classic": "3.7.0",
-    "@docusaurus/theme-live-codeblock": "^3.8.1",
     "@mdx-js/react": "^3.0.0",
     "@remark-embedder/core": "^3.0.3",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "remark-code-blocks": "^2.0.1",
-    "unist-util-visit": "^5.0.0"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.7.0",

package.json

@@ -1,38 +1,59 @@
 import React from "react";
 import CodeBlock from "@theme/CodeBlock";
 
+let uniqueID = (function () {
+  let id = 0;
+  return function () { return id++; };
+})();
+
 export default function CodeBlockWithMetadata({ children, meta, language }) {
   const sourceCode = children.trim();
 
   let metadata = {};
   try {
-    metadata = JSON.parse(meta || "{}");
+    metadata = JSON.parse(meta);
+    if (!metadata.compilers) {
+      throw new Error("Metadata JSON must include a 'compilers' field.");
+    }
   } catch (err) {
     console.error("Invalid metadata JSON in code block:", err);
+    return (
+      <div style={{ marginBottom: "1em" }}>
+        <CodeBlock language={language}>{sourceCode}</CodeBlock>
+      </div>
+    );
   }
 
   const lang = (language == "cpp" ? "c++" : language);
 
-  console.log("CodeBlock language:", lang);
-
   const transformedLibs = (metadata.libs || []).map((lib) => {
     const [id, version] = lib.split("@");
     return { id, version };
   });
 
-  const compilerConfig = {
-    id: metadata.compiler,
-    libs: transformedLibs,
-    options: metadata.options || "",
+  const transformedCompilers = (metadata.compilers || []).map((compiler) => {
+    const firstSpace = compiler.indexOf(" ");
+    const id = firstSpace === -1 ? compiler : compiler.slice(0, firstSpace);
+    const options = firstSpace === -1 ? "" : compiler.slice(firstSpace + 1);
+    const libs = transformedLibs;
+    const filters = metadata.filters || {};
+    return { id, options, libs, filters };
+  });
+
+  const executor = {
+    compilerVisible: true,
+    compilerOutputVisible: true,
+    compiler: transformedCompilers[0] || {},
   };
-  const executor = { compiler: compilerConfig };
+
   const session = {
-    id: 1,
-    lang,
+    id: uniqueID(),
+    language: lang,
     source: sourceCode,
-    compilers: [],
-    executors: [executor],
+    compilers: transformedCompilers,
+    executors: [],
   };
+
   const clientState = { sessions: [session] };
 
   const clientStateB64 = btoa(JSON.stringify(clientState)).replace(/\//g, "%2F");