Add 'start' to examples in homepage

allevo · Nov 27, 2024 · 4ebe52b · 4ebe52b
1 parent 4914ccc
commit 4ebe52b
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 10 deletions.
diff --git a/packages/website/README.md b/packages/website/README.md
@@ -0,0 +1,19 @@
+# Website
+
+Run
+```
+pnpm install
+pnpm start
+```
+
+To build and see the output locally, run:
+```
+pnpm build
+npx serve dist
+```
+
+To deploy:
+```
+vercel build
+vercel deploy --prebuilt
+```
diff --git a/packages/website/src/index.html b/packages/website/src/index.html
@@ -15,7 +15,7 @@
         <title>SeqFlow JS</title>
         <link rel="custom">
     </head>
-    <body class="vh-100 w-screen" data-prismjs-copy-timeout="500">
+    <body class="vh-100 w-screen" data-prismjs-copy-timeout="500" style="background-color: #2d2d2d;">
         <div id="root" class="d-flex flex-column vh-100 overflow-y-hidden"></div>
     </body>
 

diff --git a/packages/website/src/pages/Home.tsx b/packages/website/src/pages/Home.tsx
@@ -315,7 +315,7 @@ function setupArrow() {
 }
 
 const ASYNC_CLIENT_COMPONENT_CODE = `
-import { Contexts, ComponentProps } from "@seqflow/seqflow";
+import { Contexts, ComponentProps, start } from "@seqflow/seqflow";
 
 // component properties
 interface MyComponentProps {
@@ -339,10 +339,13 @@ export async function MyComponent(
   component.renderSync(
     <div>\${JSON.stringify(data)}</div>
   );
-} `.trim();
+}
+
+start(document.getElementById("root")!, MyComponent, {}, {});
+`.trim();
 
 const EVENT_AS_STREAM_CODE = `
-import { Contexts, ComponentProps } from "@seqflow/seqflow";
+import { Contexts, ComponentProps, start } from "@seqflow/seqflow";
 
 async function MyComponent(
   { }: ComponentProps<unknown>,
@@ -361,10 +364,12 @@ async function MyComponent(
 	console.log('Button clicked', ev);
   }
 }
+
+start(document.getElementById("root")!, MyComponent, {}, {});
 `.trim();
 
 const STATE_CODE = `
-import { Contexts, ComponentProps } from "@seqflow/seqflow";
+import { Contexts, ComponentProps, start } from "@seqflow/seqflow";
 
 async function MyComponent(
   { }: ComponentProps<unknown>,
@@ -386,10 +391,12 @@ async function MyComponent(
 	console.log('Number of click', counter);
   }
 }
+
+start(document.getElementById("root")!, MyComponent, {}, {});
 `.trim();
 
 const REPLACE_CHILD_CODE = `
-import { Contexts, ComponentProps } from "@seqflow/seqflow";
+import { Contexts, ComponentProps, start } from "@seqflow/seqflow";
 
 async function MyComponent(
   { }: ComponentProps<unknown>,
@@ -420,11 +427,13 @@ async function MyComponent(
 	// component.getChild('counter').textContent = \`\${counter}\`;
   }
 }
+
+start(document.getElementById("root")!, MyComponent, {}, {});
 `.trim();
 
 const EXAMPLES_COUNTER_CODE = `
 // Imports
-import { Contexts } from "@seqflow/seqflow";
+import { Contexts, ComponentProps, start } from "@seqflow/seqflow";
 import { Button } from "@seqflow/components";
 
 interface CounterProps {
@@ -460,11 +469,14 @@ export async function Counter(
   for await (const _ of events) {
     counterDiv.textContent = \`\${counter ++}\`;
   }
-}`.trim();
+}
+
+start(document.getElementById("root")!, Counter, {}, {});
+`.trim();
 
 const EXAMPLES_RANDOM_QUOTE_CODE = `
 // Imports
-import { Contexts } from "@seqflow/seqflow";
+import { Contexts, ComponentProps, start } from "@seqflow/seqflow";
 import { Button, Loading } from "@seqflow/components";
 // Quote interface
 interface Quote {
@@ -508,4 +520,7 @@ export async function RandomQuote(
       <footer>{quote.author}</footer>
     </blockquote>
   );
-}`.trim();
+}
+
+start(document.getElementById("root")!, RandomQuote, {}, {});  
+`.trim();