feat: 🎸 update body.ejs and footer.ejs template

BREAKING CHANGE: 🧨 The JS part of playground was moved from body.ejs to footer.ejs
template.

Author: mjancarik

Diff for: packages/cli/src/merkurConfig.mjs

@@ -262,6 +262,7 @@ emitter.on(
             new RegExp('^https?://127\\.0\\.0\\.1(:[0-9]+)?$'),
           ],
           methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE', 'OPTIONS'],
+          optionsSuccessStatus: 200,
           ...merkurConfig.widgetServer?.cors?.options,
         },
       },

Diff for: packages/cli/src/templates/body.ejs

@@ -1,19 +1,6 @@
 <% if(widgetProperties?.slot?.headline?.html){ %>
-  <div class="<%= (widgetProperties?.slot?.headline?.containerSelector ?? 'headline-view').replace('.', '') %>">
+  <div class="<%= (widgetProperties?.slot?.headline?.containerSelector ?? 'merkur-headline').replace('.', '') %>">
     <%- widgetProperties?.slot?.headline?.html %>
   </div>
 <% } %>
-<div class="merkur-view"><%- html %></div>
-<script>
-  window.addEventListener('load', function () {
-    __merkur__.create(<%- escapeToJSON(widgetProperties) %>)
-      .then(function (widget) {
-        widget.containerSelector = '.merkur-view';
-        if (widget?.slot?.headline && !widget?.slot?.headline?.containerSelector) {
-          widget.slot.headline.containerSelector = '.headline-view';
-        }
-
-        widget.mount();
-      });
-  });
-</script>
+<div class="<%= (widgetProperties?.containerSelector ?? 'merkur-main').replace('.', '') %>"><%- html %></div>

Diff for: packages/cli/src/templates/footer.ejs

@@ -0,0 +1,25 @@
+<script>
+  window.addEventListener('load', function () {
+    __merkur__.create(<%- escapeToJSON(widgetProperties) %>)
+      .then(function (widget) {
+        widget.containerSelector = widget.containerSelector ?? '.merkur-main';
+
+        if (widget.slot && Object.keys(widget.slot).length > 0) {
+          Object.keys(widget.slot).forEach(function (slotName) {
+            widget.slot[slotName].containerSelector = widget.slot[slotName].containerSelector ?? '.merkur-' + slotName;
+          });
+        }
+
+        // support for router plugin
+        if (widget.router) {
+          widget.on('@merkur/plugin-router.redirect', function (_, url) {
+            var parsedUrl = new URL(url.url);
+            window.location = parsedUrl.href;
+          });
+        }
+
+        // mount widget to DOM
+        widget.mount();
+      });
+  });
+</script>

Diff for: packages/create-widget/template/src/style.css

@@ -15,32 +15,29 @@ button {
   margin: 0 auto;
 }
 
-.merkur__page {
-}
-
-.merkur__headline {
+.merkur-headline {
   background-color: #282c34;
   padding: 120px 10px 80px 10px;
   color: #a2a8b6;
   text-align: center;
 }
 
-.merkur__headline a {
+.merkur-headline a {
   color: white;
   text-decoration: none;
 }
 
-.merkur__headline h1 {
+.merkur-headline h1 {
   font-size: 60px;
   margin: 0 0 20px 0;
 }
 
-.merkur__headline h2 {
+.merkur-headline h2 {
   margin: 0;
   line-height: 1.3;
 }
 
-.merkur__headline h3 {
+.merkur-headline h3 {
   margin: 40px 0 16px 0;
   line-height: 1.3;
 }