Ryuuart/issue203 (#225)

* Enable more sandpack customization * Clean up * Polish * Start on Getting Started documentation * Structure first pass of documentation * Write design principles * Change where sandpack source files are stored * Add css support * Draft CSS docs * Polish styles * Polish * Polish * Document initialization * Document nesting * Add docs for nesting and reusing * Use local manawave build * Change CTA * Polish * Draft * Document * Document * Document
ryuuart · Sep 6, 2023 · 077a87b · 077a87b
1 parent 01ec9ca
commit 077a87b
Show file tree

Hide file tree

Showing 34 changed files with 1,034 additions and 41 deletions.
diff --git a/web/astro.config.mjs b/web/astro.config.mjs
@@ -10,7 +10,22 @@ export default defineConfig({
     },
     head: [{
       tag: 'script',
-      content: `window.addEventListener('load', () => document.querySelector('.site-title').href += 'docs')`
+      content: `window.addEventListener('load', () => document.querySelector('.site-title').href += 'docs/quickstart')`
     }],
+    sidebar: [
+      { label: "Home", link: "/" },
+      {
+        label: "Start Here",
+        autogenerate: { directory: 'docs/quickstart' }
+      },
+      {
+        label: "Guides",
+        autogenerate: { directory: 'docs/guides' }
+      },
+      {
+        label: "Reference",
+        autogenerate: { directory: 'docs/reference' }
+      }
+    ]
   }), react()]
 });
diff --git a/web/src/components/docs/sandpack/Sandpack.astro b/web/src/components/docs/sandpack/Sandpack.astro
@@ -2,15 +2,24 @@
 import SandpackReactComponent from "./Sandpack.jsx";
 
 interface Props {
-  code?: string;
+  js?: string;
   html?: string;
+  css?: string;
+  activeFile?: string;
 }
 
-const { code, html } = Astro.props;
+const { js, html, css, activeFile } = Astro.props;
 ---
 
 <div class="container-sandpack not-content">
-  <SandpackReactComponent client:load client:only code={code} html={html} />
+  <SandpackReactComponent
+    client:load
+    client:only
+    js={js}
+    html={html}
+    css={css}
+    activeFile={activeFile}
+  />
 </div>
 
 <style>

diff --git a/web/src/components/docs/sandpack/Sandpack.tsx b/web/src/components/docs/sandpack/Sandpack.tsx
@@ -1,16 +1,23 @@
 import { useEffect, useState } from "react";
-import { Sandpack, SandpackThemeProp } from "@codesandbox/sandpack-react";
+import {
+  Sandpack,
+  SandpackInternalOptions,
+  SandpackThemeProp,
+} from "@codesandbox/sandpack-react";
 
 import defaultHTML from "./src/index.html?raw";
-import defaultJS from "./src/js/index?raw";
-import css from "./src/styles/style.css?raw";
+import defaultJS from "./src/index?raw";
+import defaultCSS from "./src/style.css?raw";
+import manawaveRaw from "../../../../node_modules/manawave/dist/manawave.js?raw";
 
 interface Props {
-  code?: string;
+  js?: string;
   html?: string;
+  css?: string;
+  activeFile?: string;
 }
 
-export default ({ code, html }: Props) => {
+export default ({ js: code, html, css, activeFile }: Props) => {
   const [theme, setTheme] = useState<SandpackThemeProp>(
     (window.document.documentElement.dataset.theme as SandpackThemeProp) ??
       "auto"
@@ -39,24 +46,34 @@ export default ({ code, html }: Props) => {
 
   return (
     <Sandpack
+      template="vite"
       customSetup={{
-        environment: "parcel",
-        devDependencies: {
-          "@babel/core": "7.2.0",
-        },
-        dependencies: {
-          manawave: "^0.11.0",
-        },
         entry: "index.html",
       }}
       files={{
+        "node_modules/manawave/package.json": {
+          code: JSON.stringify({
+            name: "manawave",
+            main: "./index.js",
+            type: "module",
+          }),
+          hidden: true,
+        },
+        "node_modules/manawave/index.js": {
+          code: manawaveRaw,
+          hidden: true,
+        },
         "/index.html": { code: html ?? defaultHTML },
-        "/styles/style.css": { code: css, hidden: true },
-        "/js/index.js": {
+        "/style.css": { code: css ?? defaultCSS },
+        "/index.js": {
           code: code ?? defaultJS,
-          active: true,
         },
       }}
+      options={{
+        //@ts-ignore
+        activeFile: activeFile ?? "/index.js",
+        showConsoleButton: true,
+      }}
       theme={theme}
     />
   );

diff --git a/web/src/components/docs/sandpack/src/index.html b/web/src/components/docs/sandpack/src/index.html
@@ -4,14 +4,16 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="./styles/style.css">
+    <link rel="stylesheet" href="./style.css">
+    <script type="module" src="./index.js"></script>
 </head>
 
 <body>
-    <manawave-marquee>
-        <div class="text-manawave">manawave</div>
-    </manawave-marquee>
-    <script type="module" src="./js/index.js"></script>
+    <main>
+        <manawave-marquee class="resize--parent" autoplay direction="15" speed="1.5">
+            <div class="text-manawave">manawave</div>
+        </manawave-marquee>
+    </main>
 </body>
 
 </html>
diff --git a/web/src/components/docs/sandpack/src/index.js b/web/src/components/docs/sandpack/src/index.js
@@ -0,0 +1 @@
+import "manawave";
diff --git a/web/src/components/docs/sandpack/src/js/index.js b/web/src/components/docs/sandpack/src/js/index.js
diff --git a/web/src/components/docs/sandpack/src/style.css b/web/src/components/docs/sandpack/src/style.css
@@ -0,0 +1,27 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+body > main {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+main {
+  padding: 0.5rem;
+}
+
+.text-manawave {
+  font-family: sans-serif;
+  font-size: 3rem;
+}
+
+.resize--parent {
+  widdth: 100%;
+  height: 100%;
+}
diff --git a/web/src/components/docs/sandpack/src/styles/style.css b/web/src/components/docs/sandpack/src/styles/style.css
diff --git a/web/src/components/home/hero/Hero.astro b/web/src/components/home/hero/Hero.astro
@@ -15,7 +15,7 @@ import Primordia from "./Primordia.astro";
     </p>
   </div>
   <div class="cta">
-    <div><a href="/docs">Get Started</a></div>
+    <div><a href="/docs/quickstart">Learn more</a></div>
     <div><a href="https://github.com/ryuuart/manawave">Github</a></div>
   </div>
   <Primordia class="primordia" />

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
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <script type="module" src="./index.js"></script>
+</head>
+
+<body>
+    <main>
+        <h1>Styling your marquee content</h1>
+        <h2>Applying CSS</h2>
+        <h3>Using different selectors</h3>
+        <manawave-marquee>
+            <div class="content">content</div>
+            <div id="special" class="content">content</div>
+            <div id="special" class="content" style="color: hotpink">content</div>
+        </manawave-marquee>
+        <h2>Different layouts</h2>
+        <h3>Grid</h3>
+        <manawave-marquee>
+            <div class="grid grid-col--2 grid-row--2">
+                <div class="content">1</div>
+                <div class="content">2</div>
+                <div class="content">3</div>
+                <div class="content">4</div>
+            </div>
+        </manawave-marquee>
+        <h3>Inline block wrapping</h3>
+        <p>If you have a really big monitor and browser window, you can still see this by resizing your browser around.
+        </p>
+        <manawave-marquee autoplay>
+            <div class="inline-block border bg--pink w--50 h--50 m--small"></div>
+            <div class="inline-block border bg--pink w--50 h--50 m--small"></div>
+            <div class="inline-block border bg--pink w--50 h--50 m--small"></div>
+            <div class="inline-block border bg--pink w--50 h--50 m--small"></div>
+            <div class="inline-block border bg--pink w--50 h--50 m--small"></div>
+            <div class="inline-block border bg--pink w--50 h--50 m--small"></div>
+            <div class="inline-block border bg--pink w--50 h--50 m--small"></div>
+            <div class="inline-block border bg--pink w--50 h--50 m--small"></div>
+        </manawave-marquee>
+    </main>
+</body>
+
+</html>
diff --git a/web/src/content/docs/docs/guides/_src/css/content/style.css b/web/src/content/docs/docs/guides/_src/css/content/style.css
@@ -0,0 +1,56 @@
+* {
+  box-sizing: border-box;
+}
+
+h1 {
+  font-size: 0.75rem;
+  font-weight: normal;
+  text-transform: uppercase;
+}
+
+.content {
+  font-family: sans-serif;
+  font-weight: bold;
+
+  margin: 0.5rem;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.grid {
+  display: grid;
+}
+
+.grid-col--2 {
+  grid-template-columns: auto auto;
+}
+
+.grid-row--2 {
+  grid-template-rows: auto auto;
+}
+
+.border {
+  border: 1px solid black;
+}
+
+.bg--pink {
+  background: pink;
+}
+
+.w--50 {
+  width: 50px;
+}
+
+.h--50 {
+  height: 50px;
+}
+
+.m--small {
+  margin: 0.5rem;
+}
+
+#special {
+  color: blue;
+}
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
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <script type="module" src="./index.js"></script>
+</head>
+
+<body>
+    <main>
+        <h1>Styling your marquee container</h1>
+        <h2>Applying CSS</h2>
+        <h3>Using element selectors</h3>
+        <manawave-marquee>
+            <div>styling the marquee</div>
+        </manawave-marquee>
+        <h3>With generic classes</h3>
+        <manawave-marquee class="marquee">
+            <div>styling the marquee</div>
+        </manawave-marquee>
+        <manawave-marquee class="marquee">
+            <div>styling the marquee</div>
+        </manawave-marquee>
+        <h3>With an ID</h3>
+        <manawave-marquee id="selected" class="marquee">
+            <div>styling the marquee</div>
+        </manawave-marquee>
+        <h3>Using inline styles</h3>
+        <manawave-marquee style="color: blue" class="marquee">
+            <div>styling the marquee</div>
+        </manawave-marquee>
+        <h2>Resizing</h2>
+        <h3>Limited marquee</h3>
+        <manawave-marquee class="marquee marquee--small">
+            <div>styling the marquee</div>
+        </manawave-marquee>
+        <h3>Large, filling marquee</h3>
+        <manawave-marquee class="marquee marquee--fill">
+            <div>styling the marquee</div>
+        </manawave-marquee>
+    </main>
+</body>
+
+</html>
diff --git a/web/src/content/docs/docs/guides/_src/css/marquee/style.css b/web/src/content/docs/docs/guides/_src/css/marquee/style.css
@@ -0,0 +1,34 @@
+* {
+  box-sizing: border-box;
+}
+
+h1 {
+  font-size: 0.75rem;
+  font-weight: normal;
+  text-transform: uppercase;
+}
+
+manawave-marquee {
+  font-family: sans-serif;
+}
+
+.marquee {
+  padding: 1rem;
+  margin: 1rem;
+
+  border: 1px solid black;
+}
+
+.marquee--small {
+  width: 100px;
+  height: 100px;
+}
+
+.marquee--fill {
+  height: 200px;
+}
+
+#selected {
+  border-radius: 1rem;
+  background: bisque;
+}