From 52121bc4667b82b617dbacd882b84bf23b2b7ddf Mon Sep 17 00:00:00 2001
From: Lukasz Czajczyk <LukeCz@users.noreply.github.com>
Date: Mon, 2 Jan 2023 17:40:43 +0100
Subject: [PATCH] Support for multiple macros on the same page

Hi, the current design assumes there is only one hardcoded swagger-ui div per page. When the macro is used multiple times, the content goes always to the 1st div.
This proposed change is to parametrize the div name and script name using a simple global counter.
---
 lib/swagger-ui-block-macro.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/lib/swagger-ui-block-macro.js b/lib/swagger-ui-block-macro.js
index b8f8c68740..e1c8b859a5 100644
--- a/lib/swagger-ui-block-macro.js
+++ b/lib/swagger-ui-block-macro.js
@@ -1,7 +1,7 @@
-const buildSwaggerUi = ({ specUrl, bundleUrl }) => `<link rel="stylesheet" href="${bundleUrl}/swagger-ui.css">
+const buildSwaggerUi = ({ specUrl, bundleUrl, divID }) => `<link rel="stylesheet" href="${bundleUrl}/swagger-ui.css">
 <script src="${bundleUrl}/swagger-ui-bundle.js"></script>
 <script src="${bundleUrl}/swagger-ui-standalone-preset.js"></script>
-<script id="swagger-ui-script" data-url="${specUrl}">
+<script id="swagger-ui-script-${divID}" data-url="${specUrl}">
 ;(function (config) {
   var initialHash = window.location.hash
   var jumpToAnchorOnLoad = function () {
@@ -34,10 +34,10 @@ const buildSwaggerUi = ({ specUrl, bundleUrl }) => `<link rel="stylesheet" href=
     } else {
       requestAnimationFrame(jumpToAnchorOnLoad)
     }
-  }.bind(document.getElementById('swagger-ui'))
+  }.bind(document.getElementById('swagger-ui-${divID}'))
   SwaggerUIBundle({
     url: config.url,
-    dom_id: '#swagger-ui',
+    dom_id: '#swagger-ui-${divID}',
     deepLinking: true,
     presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
     plugins: [SwaggerUIBundle.plugins.DownloadUrl],
@@ -50,9 +50,11 @@ const buildSwaggerUi = ({ specUrl, bundleUrl }) => `<link rel="stylesheet" href=
     if (initialHash.charAt(1) !== '/') window.location.hash = ''
     jumpToAnchorOnLoad()
   }
-})(document.getElementById('swagger-ui-script').dataset)
+})(document.getElementById('swagger-ui-script-${divID}').dataset)
 </script>`
 
+var divID = 0;
+
 function blockSwaggerUiMacro ({ file }) {
   return function () {
     this.process((parent, specUrl, attrs) => {
@@ -64,9 +66,10 @@ function blockSwaggerUiMacro ({ file }) {
       const bundleUrl = specUrl.startsWith('https://s3.amazonaws.com/cb-docs-swagger/')
         ? 'https://cb-docs-swagger.s3.amazonaws.com/dist3'
         : 'https://couchbase-docs.s3.amazonaws.com/assets/swagger-ui-3.7'
-      const contentScripts = buildSwaggerUi({ specUrl, bundleUrl })
-      file.asciidoc.attributes['page-content-scripts'] = contentScripts
-      return this.createBlock(parent, 'pass', '<div id="swagger-ui"></div>')
+      divID++
+      const contentScripts = buildSwaggerUi({ specUrl, bundleUrl, divID })
+      file.asciidoc.attributes['page-content-scripts'] += contentScripts
+      return this.createBlock(parent, 'pass', '<div id="swagger-ui-' + divID + '"></div>')
     })
   }
 }