test generate godbolt link from codeblock

Author: mguludag

docs/libs/beman.optional/index.md

@@ -57,9 +57,69 @@ 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). Or try it on Compiler Explorer:  
+[./examples/README.md](https://github.com/bemanproject/optional/blob/main/examples/README.md).  
 
-https://godbolt.org/z/qdzz8Y7jT  
+```cpp { "compiler": "clang_trunk", "libs": ["beman_optional@trunk"], "options": "-std=c++26" }
+// examples/optional_ref.cpp -*-C++-*-
+// SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
+
+#include <beman/optional/optional.hpp>
+
+#include <string>
+
+struct Cat {
+    int catalog_index{0};
+};
+
+namespace std17 {
+
+// Prior to C++26, the code would look like this.
+// Using raw pointers to represent optional references.
+// Note: Using smart pointers would also be a choice, but it involves ownership semantics.
+
+Cat* find_cat(std::string) { return nullptr; }
+
+Cat* do_it(Cat& cat) { return &cat; }
+
+Cat* api() {
+    Cat* cat = find_cat("Fido");
+    if (cat != nullptr) {
+        return do_it(*cat);
+    }
+    return nullptr;
+}
+
+} // namespace std17
+
+namespace std26 {
+// After C++26 with P2988R5, the code would look like this.
+// Using directly optional to represent optional references.
+
+beman::optional::optional<Cat&> find_cat(std::string) { return {}; }
+
+beman::optional::optional<Cat&> do_it(Cat& cat) { return {cat}; }
+
+beman::optional::optional<Cat&> api() {
+    beman::optional::optional<Cat&> cat = find_cat("Fido");
+    return cat.and_then(do_it);
+}
+
+} // namespace std26
+
+int main() {
+    // Example from P2988R5: optional reference.
+    [[maybe_unused]] Cat*                              old_cat = std17::api();
+    [[maybe_unused]] beman::optional::optional<Cat&> new_cat = std26::api();
+
+    return 0;
+}
+
+// # build example:
+// $ cmake --workflow --preset gcc-14
+//
+// # run example:
+// $ .build/gcc-14/examples/RelWithDebInfo/optional_ref
+```
   
 ### optional_ref
 

docusaurus.config.ts

@@ -6,6 +6,7 @@ import { execSync } from 'child_process';
 const remarkEmbedder = require('@remark-embedder/core');
 const YouTubeTransformer = require('./src/components/youtube-transformer.js');
 const GodboltTransformer = require('./src/components/godbolt-transformer.js');
+const remarkCodeblockMeta = require('./src/plugins/remark-codeblock-meta');
 
 // Note: This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
@@ -23,7 +24,6 @@ try {
   console.error(`Error determining branch name: ${err}`);
 }
 
-
 const config: Config = {
   title: 'The Beman Project',
   tagline:
@@ -43,6 +43,8 @@ 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".
@@ -62,7 +64,7 @@ const config: Config = {
           // Remove this to remove the 'edit this page' links.
           editUrl: `https://github.com/bemanproject/website/tree/${branchName}`,
           remarkPlugins: [
-            [remarkEmbedder, { transformers: [YouTubeTransformer, GodboltTransformer] }],
+            [remarkEmbedder, { transformers: [YouTubeTransformer, GodboltTransformer] }], remarkCodeblockMeta
           ],
         },
         blog: {
@@ -72,7 +74,7 @@ const config: Config = {
             xslt: true,
           },
           remarkPlugins: [
-            [remarkEmbedder, { transformers: [YouTubeTransformer, GodboltTransformer] }],
+            [remarkEmbedder, { transformers: [YouTubeTransformer, GodboltTransformer] }], remarkCodeblockMeta
           ],
           // Remove this to remove the 'edit this page' links.
           editUrl: `https://github.com/bemanproject/website/tree/${branchName}`,

package.json

@@ -17,12 +17,15 @@
   "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"
+    "react-dom": "^19.0.0",
+    "remark-code-blocks": "^2.0.1",
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.7.0",

src/components/CodeBlockWithMetadata.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import CodeBlock from "@theme/CodeBlock";
+
+export default function CodeBlockWithMetadata({ children, meta, language }) {
+  const sourceCode = children.trim();
+
+  let metadata = {};
+  try {
+    metadata = JSON.parse(meta || "{}");
+  } catch (err) {
+    console.error("Invalid metadata JSON in code block:", err);
+  }
+
+  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 executor = { compiler: compilerConfig };
+  const session = {
+    id: 1,
+    lang,
+    source: sourceCode,
+    compilers: [],
+    executors: [executor],
+  };
+  const clientState = { sessions: [session] };
+
+  const clientStateB64 = btoa(JSON.stringify(clientState)).replace(/\//g, "%2F");
+
+  return (
+    <div style={{ marginBottom: "1em" }}>
+      <a
+        href={`https://godbolt.org/clientstate/${clientStateB64}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ display: "inline-block", marginBottom: "0.5em", color: "#0b5ed7" }}
+      >
+        Try it on Compiler Explorer 🚀
+      </a>
+      <CodeBlock language={language}>{sourceCode}</CodeBlock>
+    </div>
+  );
+}

src/plugins/remark-codeblock-meta/index.js

@@ -0,0 +1,30 @@
+// plugins/remark-codeblock-meta.js
+
+// Try importing visit using both methods
+let visit;
+try {
+  // ES Modules style import
+  ({ visit } = require("unist-util-visit"));
+} catch (err) {
+  // Fallback if not available like that
+  visit = require("unist-util-visit").default || require("unist-util-visit");
+}
+
+module.exports = function remarkCodeblockMeta() {
+  return (tree) => {
+    visit(tree, "code", (node) => {
+      const meta = node.meta?.trim();
+      if (meta && meta.startsWith("{") && meta.endsWith("}")) {
+        // Attach metadata and change node to use our custom component
+        node.data = {
+          hName: "CodeBlockWithMetadata",
+          hProperties: {
+            meta,
+            language: node.lang,
+            children: node.value,
+          },
+        };
+      }
+    });
+  };
+};

src/theme/Layout/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Layout from '@theme-original/Layout';
+import CodeBlockWithMetadata from '@site/src/components/CodeBlockWithMetadata';
+import { MDXProvider } from '@mdx-js/react';
+
+export default function LayoutWrapper(props) {
+  return (
+    <MDXProvider
+      components={{
+        CodeBlockWithMetadata,
+      }}
+    >
+      <Layout {...props} />
+    </MDXProvider>
+  );
+}