From a8af6ef821e827e61271dacc7185146d91b0dcba Mon Sep 17 00:00:00 2001
From: Troy Li <troy.lty@alipay.com>
Date: Thu, 13 Apr 2023 21:02:13 +0800
Subject: [PATCH] fix: encode demo.id to avoid route breaking

---
 src/client/theme-api/DumiDemo.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/client/theme-api/DumiDemo.tsx b/src/client/theme-api/DumiDemo.tsx
index 6cddffbc3f..6918b94a54 100644
--- a/src/client/theme-api/DumiDemo.tsx
+++ b/src/client/theme-api/DumiDemo.tsx
@@ -50,18 +50,25 @@ export const DumiDemo: FC<IDumiDemoProps> = (props) => {
   }
 
   const isHashRoute = historyType === 'hash';
+  
+  // allow user override demoUrl by frontmatter
+  let demoUrl =
+    props.previewerProps.demoUrl ||
+    // when use hash route, browser can automatically handle relative paths starting with #
+    `${isHashRoute ? `#` : ''}${basename}${SP_ROUTE_PREFIX}demos/${props.demo.id}`;
+  
+  const [, prefix = '', demoId] =
+    new RegExp(`(.*)${SP_ROUTE_PREFIX}demos/(.*)$`).exec(props.previewerProps.demoUrl || '') ||
+    [];
+  if (demoId) {
+    // encode demo.id to avoid slash in id breaking the route
+    demoUrl = `${prefix}${SP_ROUTE_PREFIX}demos/${encodeURIComponent(demoId)}`;
+  }
 
   return (
     <Previewer
       asset={asset}
-      demoUrl={
-        // allow user override demoUrl by frontmatter
-        props.previewerProps.demoUrl ||
-        // when use hash route, browser can automatically handle relative paths starting with #
-        `${isHashRoute ? `#` : ''}${basename}${SP_ROUTE_PREFIX}demos/${
-          props.demo.id
-        }`
-      }
+      demoUrl={demoUrl}
       {...props.previewerProps}
     >
       {props.previewerProps.iframe ? null : (