added modal popup for godbolt links

Author: mguludag

docs/libs/beman.optional/index.md

@@ -4,7 +4,6 @@
 SPDX-License-Identifier: 2.0 license with LLVM exceptions
 -->
 
-
 <!-- markdownlint-disable -->
 <img src="https://raw.githubusercontent.com/bemanproject/beman/refs/heads/main/images/logos/beman_logo-beman_library_production_ready_api_may_undergo_changes.png" width="5%" height="auto" /> ![CI Tests](https://github.com/bemanproject/optional/actions/workflows/ci.yml/badge.svg) [![Coverage](https://coveralls.io/repos/github/bemanproject/optional/badge.svg?branch=main)](https://coveralls.io/github/bemanproject/optional?branch=main)
 <!-- markdownlint-enable -->
@@ -117,9 +116,9 @@ beman::optional::optional<Cat&> cat = api();
 ```
 
 Full code can be found in [./examples/optional_ref.cpp](https://github.com/bemanproject/optional/blob/main/examples/optional_ref.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:  
-
+<Godbolt url="
 https://godbolt.org/#z:OYLghAFBqd5QCxAYwPYBMCmBRdBLAF1QCcAaPECAMzwBtMA7AQwFtMQByARg9KtQYEAysib0QXACx8BBAKoBnTAAUAHpwAMvAFYTStJg1DIApACYAQuYukl9ZATwDKjdAGFUtAK4sGIAKwAbKSuADJ4DJgAcj4ARpjEAQCcpAAOqAqETgwe3r4BwemZjgLhkTEs8Yn%2BKXaYDtlCBEzEBLk%2BfkG2mPYlDE0tBGXRcQnJts2t7fldCpNDESOVYzUAlLaoXsTI7BwA9HsA1JiqrKn0CnuoqX1iAPrEmFQAdMipqYcAtABUn27W1h%2BnxMGgAggdDkJlAARAAan3COwYSk%2BAEksII8DQxodQakmMgEJhPmZnhpDgB1VEAFQAEodQqEAGoAWU%2BJx2N2yINBPPMAGYIshvFhDiZ%2BW54ixDFcuQIxLLbrRngh3uLsHywQKhSLMGKJXNiBFgOrNaDDV4HIc3EwCGKAOxWMGHF2HCJ20TNWioYB3CJYVQmR0aIPQ8VO3n2sP8iM85hsBT4naHOboLj2h2xsEQ5RGkiHIjWgGWMzBAtEw5oUUAd02tHQh29qAA1o28M29QQEHgFM8eRDFMbDsQmNXDul3QkFAXUMPMKlHkpBIdrkq51QEowdr3%2B0coqgCOxDoOjCnpa1x6hJ8Rp7WvPXDmIFLP4o/KwgrztSIdYl47YQ3QYAA3TwgMwadUGrSIb27D4lGlTFkB3LUwRtAhvkOGgGHQO5PQgVMQBAQ1jVWTM5wILYGEOBh71oG5iHDB0wxQ0E0Iw9BUD9AgIDQ8xAkrW1SKDCxyMosVS09RjQzNNjH1SPAICEx0eVda1bQwz19WhTD/Vw20IHMMwADE8A4wzVnDFTXSxQ4IE0sAwHFbSaNoOiCGIJSI1U1THgo4gqI4riIG%2BT0LJjKyXWk51XV8sSXLchjwq1KMzVDQ4IXjcCkz1VN0zNTLEwJHKCHQUtM13XEqEPYgi0sawyurQgEEOZQzCSAAOdqACV/G/Ls9SrPU7wfJtW1odtO27ZDwSOE9gEOfBHgcWgAE8VzlZhaBnOcF3Axg7VXbIxHXTcGG3PsWKlQxCMO%2BVaBujaxHFNxeNLdUdOwvTuIIoj3JIsjYv88qUpjJizSuvwQFuzaHqVZ7XsCd7AsIHjbT4gSCE80SgeEySQZEqLeTBCHYaO%2B6oce2h4bRt7%2BWwOSFM8iKf0wBDSbu9nNupgg%2BPezSnI%2BnC8MMkyzLMMwwq8mLMD8qjPWeQwcP6hgIGRzHLOS5iicjbSMtYLKipTEq3pY91DmlCJFPK6KXQhbBThYc49SoYhUBYFq2s6nqQHWtdHg3R4zswC7QVUkx/CsCPpRW%2BI7i8GilHQcOw38bTZO8jPM6z11PCF20tKNtN7UIph5MUjXQ9dcPI4saPY/jrxE%2BT5OWbZimlU5p6JQR97ImrL6C9TUsS7LyWzR8mWxJDJKdbNCEBR/Lw6AbE4znECqABJK2lDsvk%2BWtiGbKhvTHT5Pl2pQ7WAZBkE%2BKRdwqhfiHj44HadkBN8OZ5f2XvZr9vqQexV6OwuHsLqPQKRNWhJgWIqIGD8EVGTB4TwODrHuhwfwvA/AcC0KQVAnB/h1UsCmTY2w9QCh4KQAgmhUHrGbCASQ7VnhJH8Fwdq/h2GSCSJIQIXB/D8P0JwSQvAWABA0KQbBuD8EcF4AoEA4jqE4NQaQOAsAYCIBACceof4SDkEoC0YAChlCGB6EID8UFOCULQI7OgtpsjGMiLQMxkFJG8GsfJegiRDHMFSAoD8BBSDuLoAkKI%2BtOBuLdh4hIAB5P8ziLFKJCKoeooJiCGPCUk%2BoTR8DYN4PwQQIgxDsCkDIQQigVDqESboXqBgjAoGLDYcasQ5GwEyiACGdxoZiFIGBRI7l47NlWOsaGciOCfFTE5UwRCLCll4KgXpRosAtMUqQZ%2BmI2DUlQJ4ZZ6xnxbB2HoVMEQHGmPMdgyh1YRypEsco9BmCJE0LwZwe22iiA1VUO1QInxAiSEOP/Wy/SGCDNsoQqwlhvy4EIPmChqxeCKK0EM0gRImBYESCs%2Bh/hxHoOEaQURmKHmJOkbI%2BRVCaHrFURorRyAdFkAoBAAxRiTFOLOTcwJkTbF9BOcylxjygmeJQLU30gLmxspsZ40JbAMl8piXElliSqWpPSTIzJyBskRAyfk4QohxAlM1eUtQjzdDBEFfU6Z%2Bg8DNPgBANpHSum0B6WMYViKRmcHGSVSZDTZl4IWaZcC8B1hrMcBsrZtAdkbH2cUiYOSuXxPObwS5pcbloM4Pc1xTyOAvOpW8w4Hyvk/MrIKgFazgU8QaRC/A2aYVwrJesZFqLKDJo4DivF4i01EtsCS%2BFtDSD0K4BoLFnB%2BQiLEQSqRGSu2It7f2wRHAh2jrmeOmtDqbzZAYUAA
-
+"/>
 ## How to Build
 
 ### Compiler Support

docusaurus.config.ts

@@ -84,6 +84,10 @@ const config: Config = {
     ],
   ],
 
+  clientModules: [
+    require.resolve('./src/components/Godbolt.jsx'),
+  ],
+
   themeConfig: {
     //TODO: Replace with your project's social card
     image: './img/beman_logo.png',

package.json

@@ -23,6 +23,7 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-modal": "^3.16.3",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {

src/components/CodeBlockWithMetadata.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import CodeBlock from "@theme/CodeBlock";
+import Godbolt from "./Godbolt";
 
 let uniqueID = (function () {
   let id = 0;
@@ -60,14 +61,7 @@ export default function CodeBlockWithMetadata({ children, meta, language }) {
 
   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>
+      <Godbolt url={`https://godbolt.org/clientstate/${clientStateB64}`} />
       <CodeBlock language={language}>{sourceCode}</CodeBlock>
     </div>
   );

src/components/Godbolt.jsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import Modal from 'react-modal';
+
+// Bind modal to app element for accessibility
+Modal.setAppElement('#__docusaurus');
+
+export default function Godbolt({ url }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const getHTMLIframe = (url) => {
+    if (!url.includes('godbolt.org')) {
+      return '<p>Invalid Godbolt URL</p>';
+    }
+    const fullUrl = url.trim().includes('godbolt.org/#')
+      ? url.replace('godbolt.org/#', 'godbolt.org/e?hideEditorToolbars=false#')
+      : url;
+    return `<iframe src="${fullUrl}" style="margin:auto; width:100%; height:100%; display:block; overflow:hidden;" frameBorder="0"></iframe>`;
+  };
+
+  const openModal = () => setIsOpen(true);
+  const closeModal = () => setIsOpen(false);
+  const iframeHTML = getHTMLIframe(url);
+
+  return (
+    <div>
+      <a
+        href={url}
+        onClick={(e) => {
+          e.preventDefault();
+          openModal();
+        }}
+        style={{
+          fontSize: '16px',
+          color: '#007bff',
+          textDecoration: 'underline',
+          cursor: 'pointer',
+          zIndex: 1000,
+        }}
+        onMouseOver={(e) => (e.target.style.color = '#0056b3')}
+        onMouseOut={(e) => (e.target.style.color = '#007bff')}
+      >
+        Try it on Compiler Explorer 🚀
+      </a>
+      <Modal
+        isOpen={isOpen}
+        onRequestClose={closeModal}
+        style={{
+          content: {
+            top: '50%',
+            left: '50%',
+            right: 'auto',
+            bottom: 'auto',
+            marginRight: '-50%',
+            transform: 'translate(-50%, -50%)',
+            width: '90%',
+            height: '90%',
+            padding: 0,
+          },
+          overlay: { zIndex: 1001 },
+        }}
+        contentLabel="Godbolt Compiler Modal"
+      >
+        <div
+          style={{ width: '100%', height: '100%' }}
+          dangerouslySetInnerHTML={{ __html: iframeHTML }}
+        />
+        <button
+          onClick={closeModal}
+          style={{
+            position: 'absolute',
+            top: '10px',
+            right: '10px',
+            padding: '5px 10px',
+            backgroundColor: '#dc3545',
+            color: 'white',
+            border: 'none',
+            borderRadius: '5px',
+            cursor: 'pointer',
+          }}
+        >
+          Close
+        </button>
+      </Modal>
+    </div>
+  );
+}

src/theme/MDXComponents.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import MDXComponents from '@theme-original/MDXComponents';
+import Godbolt from '../components/Godbolt.jsx';
+
+export default {
+  ...MDXComponents,
+  Godbolt,
+};

yarn.lock

@@ -4184,6 +4184,11 @@ execa@^5.0.0:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
+exenv@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+  integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==
+
 express@^4.17.3:
   version "4.21.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.21.2.tgz#cf250e48362174ead6cea4a566abef0162c1ec32"
@@ -7468,6 +7473,11 @@ react-json-view-lite@^1.2.0:
   resolved "https://registry.yarnpkg.com/react-json-view-lite/-/react-json-view-lite-1.5.0.tgz#377cc302821717ac79a1b6d099e1891df54c8662"
   integrity sha512-nWqA1E4jKPklL2jvHWs6s+7Na0qNgw9HCP6xehdQJeg6nPBTFZgGwyko9Q0oj+jQWKTTVRS30u0toM5wiuL3iw==
 
+react-lifecycles-compat@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
 react-loadable-ssr-addon-v5-slorber@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/react-loadable-ssr-addon-v5-slorber/-/react-loadable-ssr-addon-v5-slorber-1.0.1.tgz#2cdc91e8a744ffdf9e3556caabeb6e4278689883"
@@ -7482,6 +7492,16 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@types/react" "*"
 
+react-modal@^3.16.3:
+  version "3.16.3"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.16.3.tgz#c412d41915782e3c261253435d01468e2439b11b"
+  integrity sha512-yCYRJB5YkeQDQlTt17WGAgFJ7jr2QYcWa1SHqZ3PluDmnKJ/7+tVU+E6uKyZ0nODaeEj+xCpK4LcSnKXLMC0Nw==
+  dependencies:
+    exenv "^1.2.0"
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.0"
+    warning "^4.0.3"
+
 react-router-config@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988"
@@ -8740,6 +8760,13 @@ vfile@^6.0.0, vfile@^6.0.1:
     "@types/unist" "^3.0.0"
     vfile-message "^4.0.0"
 
+warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^2.4.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.2.tgz#2feeaed67412e7c33184e5a79ca738fbd38564da"