Add openapi support

docs/integrations/rest-api.md → docs/integrations/rest-api.mdx

@@ -2,8 +2,20 @@
 sidebar_position: 1
 ---
 
+import SwaggerUIWrapper from "../../src/components/SwaggerUiWrapper";
+
 # REST API
 
+Die HTTP REST API ist ein einfaches Interface um automatisiert Einstellungen zu ändern.
+Diese Schnittstelle wird auch von der Weboberfläche genutzt.
+
+<SwaggerUIWrapper
+  url="/rest-api.yaml"
+  showCommonExtensions
+  displayRequestDuration
+  defaultModelsExpandDepth={-1}
+/>
+
 Alle API IDs (z.B. die Loadpoint ID) beginnen bei `1`.
 
 ## State

package.json

@@ -3,9 +3,10 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "generate": "node src/generateFromTemplate.js",
+    "generate": "node src/generateFromTemplate.js && node src/copySwaggerStyles.js",
     "docusaurus": "docusaurus",
     "start": "npm run generate && docusaurus start",
+    "restart": "npm run clear && npm run start",
     "start:en": "npm run start -- --locale en",
     "build": "npm run generate && docusaurus build",
     "swizzle": "docusaurus swizzle",
@@ -17,7 +18,7 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.0.1",
+    "@docusaurus/core": "^3.6.3",
     "@docusaurus/faster": "^3.6.1",
     "@docusaurus/plugin-client-redirects": "^3.5.2",
     "@docusaurus/preset-classic": "^3.0.1",
@@ -30,6 +31,7 @@
     "mdx-mermaid": "^2.0.0",
     "prism-react-renderer": "^2.3.1",
     "raw-loader": "^4.0.2",
+    "swagger-ui-react": "^5.18.2",
     "url-loader": "^4.1.1"
   },
   "browserslist": {
@@ -48,4 +50,4 @@
     "prettier": "^3.1.1",
     "trim": ">=0.0.3"
   }
-}
+}

src/components/SwaggerUIWrapper.jsx

@@ -0,0 +1,45 @@
+import React, { useRef, useEffect } from "react";
+import ReactDOM from "react-dom";
+import SwaggerUI from "swagger-ui-react";
+
+const customCss = `
+@import url('/swagger-ui.css');
+.swagger-ui .information-container {
+  display: none;
+}
+.swagger-ui .scheme-container {
+    box-shadow: none;
+    background-color: transparent;
+}
+.swagger-ui .wrapper {
+    padding: 0;
+}
+.swagger-ui .copy-to-clipboard {
+    transition: none !important;
+}
+`;
+
+export default (props) => {
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    if (containerRef.current?.attachShadow) {
+      try {
+        const shadowRoot = containerRef.current.attachShadow({ mode: "open" });
+        const style = document.createElement("style");
+        style.textContent = customCss;
+        shadowRoot.appendChild(style);
+
+        const div = document.createElement("div");
+        shadowRoot.appendChild(div);
+
+        const root = ReactDOM.createRoot(div);
+        root.render(<SwaggerUI {...props} />);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }, [props]);
+
+  return <div ref={containerRef}></div>;
+};

src/copySwaggerStyles.js

@@ -0,0 +1,9 @@
+const fs = require("fs");
+const path = require("path");
+
+fs.copyFileSync(
+  path.join(__dirname, "../node_modules/swagger-ui-react/swagger-ui.css"),
+  path.join(__dirname, "../static/swagger-ui.css"),
+);
+
+console.log("Copied swagger-ui.css to static directory");

src/generateFromTemplate.js

@@ -224,7 +224,7 @@ function generateMarkdown(data, type, translations, target) {
   const content = fs
     .readFileSync(target, "utf-8")
     .replace(
-      new RegExp(`${escapeRegExp(AUTOGEN_MARKER)}(.|\n)*`, "gm"),
+      new RegExp(`${escapeRegExp(AUTOGEN_MARKER)}([\\s\\S])*`, "gm"),
       `${AUTOGEN_MARKER}\n\n${generated}`,
     );
   console.log(`${type}: ${brandCounter} brands, ${productCounter} products`);