Fix sandpack configuration

ryuuart · Sep 7, 2023 · 204c884 · 204c884
1 parent 1428f8f
commit 204c884
Show file tree

Hide file tree

Showing 12 changed files with 18 additions and 22 deletions.
diff --git a/web/src/components/docs/sandpack/Sandpack.tsx b/web/src/components/docs/sandpack/Sandpack.tsx
@@ -5,8 +5,7 @@ import type { SandpackThemeProp } from "@codesandbox/sandpack-react";
 
 import defaultHTML from "./src/index.html?raw";
 import defaultJS from "./src/index?raw";
-import defaultCSS from "./src/style.css?raw";
-import manawaveRaw from "../../../../node_modules/manawave/dist/manawave.js?raw";
+import defaultCSS from "./src/styles.css?raw";
 
 interface Props {
   js?: string;
@@ -50,22 +49,19 @@ export default ({ js: code, html, css, activeFile }: Props) => {
         devDependencies: {
           "@babel/core": "^7.2.0",
         },
+        dependencies: {
+          manawave: "^0.11.1",
+        },
       }}
       files={{
-        "node_modules/manawave/package.json": {
+        "/sandbox.config.json": {
           code: JSON.stringify({
-            name: "manawave",
-            main: "./index.js",
-            type: "module",
+            infiniteLoopProtection: false,
           }),
           hidden: true,
         },
-        "node_modules/manawave/index.js": {
-          code: manawaveRaw,
-          hidden: true,
-        },
         "/index.html": { code: html ?? defaultHTML },
-        "/style.css": { code: css ?? defaultCSS },
+        "/styles.css": { code: css ?? defaultCSS },
         "/index.js": {
           code: code ?? defaultJS,
         },

diff --git a/web/src/components/docs/sandpack/src/index.html b/web/src/components/docs/sandpack/src/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="./styles.css">
     <script type="module" src="./index.js"></script>
 </head>
 

diff --git a/...rc/components/docs/sandpack/src/style.css → ...c/components/docs/sandpack/src/styles.css b/...rc/components/docs/sandpack/src/style.css → ...c/components/docs/sandpack/src/styles.css
diff --git a/web/src/content/docs/docs/guides/_src/css/content/index.html b/web/src/content/docs/docs/guides/_src/css/content/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="./styles.css">
     <script type="module" src="./index.js"></script>
 </head>
 

diff --git a/...cs/docs/guides/_src/css/content/style.css → ...s/docs/guides/_src/css/content/styles.css b/...cs/docs/guides/_src/css/content/style.css → ...s/docs/guides/_src/css/content/styles.css
diff --git a/web/src/content/docs/docs/guides/_src/css/marquee/index.html b/web/src/content/docs/docs/guides/_src/css/marquee/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="./styles.css">
     <script type="module" src="./index.js"></script>
 </head>
 

diff --git a/...cs/docs/guides/_src/css/marquee/style.css → ...s/docs/guides/_src/css/marquee/styles.css b/...cs/docs/guides/_src/css/marquee/style.css → ...s/docs/guides/_src/css/marquee/styles.css
diff --git a/web/src/content/docs/docs/guides/_src/initialization/dom/index.html b/web/src/content/docs/docs/guides/_src/initialization/dom/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="./styles.css">
     <script type="module" src="./index.js"></script>
 </head>
 

diff --git a/web/src/content/docs/docs/guides/_src/nesting/index.html b/web/src/content/docs/docs/guides/_src/nesting/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="./styles.css">
     <script type="module" src="./index.js"></script>
 </head>
 

diff --git a/web/src/content/docs/docs/guides/_src/reusing/index.html b/web/src/content/docs/docs/guides/_src/reusing/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="./styles.css">
     <script type="module" src="./index.js"></script>
 </head>
 

diff --git a/web/src/content/docs/docs/guides/css.mdx b/web/src/content/docs/docs/guides/css.mdx
@@ -5,9 +5,9 @@ description: Learn how to style a MANAWAVE marquee
 
 import Sandpack from "@components/sandpack";
 import marqueeHTML from "./_src/css/marquee/index.html?raw";
-import marqueeCSS from "./_src/css/marquee/style.css?raw";
+import marqueeCSS from "./_src/css/marquee/styles.css?raw";
 import contentHTML from "./_src/css/content/index.html?raw";
-import contentCSS from "./_src/css/content/style.css?raw";
+import contentCSS from "./_src/css/content/styles.css?raw";
 
 Styling MANAWAVE should be the same experience styling HTML regularly.
 
@@ -20,7 +20,7 @@ If you use web components, you can style the marquee by using `manawave-marquee`
 Here are some basic examples of things you could do to style the marquee container.
 {/* TODO: include link to page with more complicated examples */}
 
-<Sandpack activeFile="style.css" html={marqueeHTML} css={marqueeCSS} />
+<Sandpack activeFile="styles.css" html={marqueeHTML} css={marqueeCSS} />
 
 :::danger[flex, grid, and inline display types don't work on marquees]
 By design, MANAWAVE doesn't interfere with your page's layout. It takes whatever is inside a designated space
@@ -37,7 +37,7 @@ _is still responsive_. You can think of anything that appears inside a marquee,
 
 It's easier to show by example, so here is one. All of what CSS would normally do still applies.
 
-<Sandpack activeFile="style.css" html={contentHTML} css={contentCSS} />
+<Sandpack activeFile="styles.css" html={contentHTML} css={contentCSS} />
 
 :::tip[Do you use Flexbox or CSS Grid?]
 If you plan on styling grids or flexboxes, you should make a wrapper element.

diff --git a/web/src/content/docs/docs/quickstart/_src/getting-started/webcomponent/index.html b/web/src/content/docs/docs/quickstart/_src/getting-started/webcomponent/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="./styles.css">
     <script type="module" src="./index.js"></script>
 </head>