starting write builder documentation

Author: Zwiterrion

docs/documentation/app/builder/getting-started/page.mdx

@@ -31,7 +31,7 @@ module.exports = {
 
         MANAGER_TEMPLATES: process.env.MANAGER_TEMPLATES,
         MANAGER_MAX_PARALLEL_JOBS: process.env.MANAGER_MAX_PARALLEL_JOBS || 2,
-        MANAGER_ALLOWED_DOMAINS: process.env.MANAGER_ALLOWED_DOMAINS,
+        MANAGER_ALLOWED_DOMAINS: process.env.MANAGER_ALLOWED_DOMAINS || 'localhost:5001',
 
         AUTH_MODE: process.env.AUTH_MODE || 'NO_AUTH',
         OTOROSHI_TOKEN_SECRET: process.env.OTOROSHI_TOKEN_SECRET || 'veryverysecret',

docs/documentation/app/builder/overview/page.mdx

@@ -4,3 +4,47 @@ import Github from '@/components/github';
 
 This section provides detailed documentation for working with the builder. 
 <br />
+
+# What is Wasmo Builder ?
+
+Wasmo Builder is an all-in-one builder for creating, editing and building **small** and **optimized** WASM binaries.
+
+# Key Features
+
+- `Variety of languages`: Write plugins in your favorite language, Javascript, Typescript, Rust, Golang or Open Policy Agent.
+- `Build in one click`: Click the hammer and start using your wasm in seconds
+- `Fast starter`: Deploy the builder in-memory
+
+# Start your first builder
+
+## Prerequisites
+
+- `Docker`: A Docker-enabled system with proper Docker access
+
+Choose a path to install Wasmo Builder:
+- `With a database`: Use a database to store generated Wasm binaries. Can use the Builder API for editing plugins.
+- `Without a database (in-memory)`: Store generated Wasm binaries on the file system. In this mode, the Builder API is unavailable but the CLI keeps running.
+
+Run the following command in your terminal to start your builder using a S3 storage:
+
+```
+docker network create wasmo-network
+docker run --name s3Server \
+    -p 8000:8000 \
+    -e SCALITY_ACCESS_KEY_ID=access_key \
+    -e SCALITY_SECRET_ACCESS_KEY=secret \
+    --net wasmo-network scality/s3server
+docker run -d --net wasmo-network \
+    --name wasmo \
+    -p 5001:5001 \
+    -e "AUTH_MODE=NO_AUTH" \
+    -e "AWS_ACCESS_KEY_ID=access_key" \
+    -e "AWS_SECRET_ACCESS_KEY=secret" \
+    -e "S3_FORCE_PATH_STYLE=true" \
+    -e "S3_ENDPOINT=http://localhost:8000" \
+    -e "S3_BUCKET=wasmo" \
+    -e "STORAGE=DOCKER_S3" \
+    maif/wasmo
+```
+
+If all goes well, Wasmo should now be serving your builder on [http://localhost:5001/](http://localhost:5001/)

docs/documentation/components/Layout.js

@@ -4,6 +4,8 @@ import { MDXProvider } from '@mdx-js/react';
 import { Heading } from './mdx/Heading';
 import { Link } from './mdx/Link';
 import { Sidebar } from './Sidebar';
+import { List } from './mdx/List';
+import { Misc } from './mdx/Misc';
 
 function Layout({ children, next }) {
   return <>
@@ -34,7 +36,10 @@ function Layout({ children, next }) {
         <MDXProvider components={{
           h1: Heading.H1,
           h2: Heading.H2,
-          a: Link.a
+          a: Link.a,
+          ul: List.ul,
+          code: Misc.code,
+          pre: Misc.pre
         }}>
           {children}
         </MDXProvider>

docs/documentation/components/Sidebar.js

@@ -18,6 +18,8 @@ const slugify = str => str.toString()
 
 export function Sidebar() {
 
+  const customWindow = window || { location: "/" }
+
   return <div className="flex h-screen flex-col justify-between border-e bg-white" style={{ minWidth: 250 }}>
     <div className="px-4 py-6 ps-0">
       {/* <span
@@ -30,15 +32,15 @@ export function Sidebar() {
         <li>
           <a
             href="/"
-            className={`block rounded-lg ${color(window.location.pathname === "/")} px-4 py-2 text-sm font-medium text-gray-700`}
+            className={`block rounded-lg ${color(customWindow.location.pathname === "/")} px-4 py-2 text-sm font-medium text-gray-700`}
           >
             Overview
           </a>
         </li>
 
         {Object.entries(LINKS).map(([group, children]) => {
           return <li key={group} >
-            <details className="group [&_summary::-webkit-details-marker]:hidden" open={window.location.pathname.startsWith(`/${slugify(group)}`)}>
+            <details className="group [&_summary::-webkit-details-marker]:hidden" open={customWindow.location.pathname.startsWith(`/${slugify(group)}`)}>
               <summary
                 className="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
               >
@@ -68,7 +70,7 @@ export function Sidebar() {
                   return <li key={child}>
                     <a
                       href={href}
-                      className={`block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 ${color(window.location.pathname === href)}`}
+                      className={`block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 ${color(customWindow.location.pathname === href)}`}
                     >
                       {child}
                     </a>

docs/documentation/components/mdx/Heading.js

@@ -1,4 +1,4 @@
 export const Heading = {
-  H1: ({ children }) => <h1 className="text-2xl font-bold text-gray-900 sm:text-4xl my-2">{children}</h1>,
+  H1: ({ children }) => <h1 className="text-2xl font-bold text-gray-900 sm:text-3xl mt-10 mb-5">{children}</h1>,
   H2: ({ children }) => <h2 className="text-xl font-bold my-2">{children}</h2>,
 };

docs/documentation/components/mdx/Link.js

@@ -1,5 +1,5 @@
 export const Link = {
   a: (props) => {
-    return <a className="font-medium text-blue-600 dark:text-blue-500 hover:underline" href={props.href}>{props.children}</a>
+    return <a className="font-medium text-blue-600 dark:text-blue-500 hover:underline" href={props.href} target="_blank">{props.children}</a>
   }
 };

docs/documentation/components/mdx/List.js

@@ -0,0 +1,5 @@
+export const List = {
+    ul: (props) => <div className="p-2 px-9">
+        <ul className="list-disc">{props.children}</ul>
+    </div>
+}

docs/documentation/components/mdx/Misc.js

@@ -0,0 +1,59 @@
+
+import { useEffect, useState } from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import rainbow from 'react-syntax-highlighter/dist/esm/styles/hljs/tomorrow-night-blue'
+
+export const Misc = {
+    code: props => <span className="font-bold">{props.children}</span>,
+    pre: props => {
+        const [copied, setCopied] = useState()
+
+        useEffect(() => {
+            if (copied)
+                setTimeout(() => {
+                    setCopied(false)
+                }, 1200)
+        }, [copied])
+
+        const codeString = props.children.props.children;
+
+        return <div className='overflow-hidden relative rounded-lg my-3'>
+            <div className='flex items-center bg-purple-900 ps-3' style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                height: '2rem',
+                gap: '.25rem',
+            }}>
+                <div style={{ width: 10, height: 10, borderRadius: '50%' }} className='bg-gray-400' />
+                <div style={{ width: 10, height: 10, borderRadius: '50%' }} className='bg-gray-400' />
+                <div style={{ width: 10, height: 10, borderRadius: '50%' }} className='bg-gray-400' />
+            </div>
+
+            <div className="absolute right-2 rounded-lg top-10 p-1 cursor-pointer hover:bg-gray-600"
+                onClick={() => {
+                    if (navigator.clipboard && window.isSecureContext) {
+                        navigator.clipboard.writeText(codeString);
+                        setCopied(true)
+                    }
+                }}
+                style={{
+                    border: '1px solid #fff'
+                }}>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"
+                    className="w-5 h-5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+                </svg>
+            </div>
+
+            {copied && <div className='absolute right-10 top-10 p-1 text-white'>Copied!</div>}
+
+            <SyntaxHighlighter language="bash" style={rainbow} customStyle={{
+                padding: '2.5rem 12px 1rem'
+            }}>
+                {codeString}
+            </SyntaxHighlighter>
+        </div >
+    }
+}

docs/documentation/components/mdx/ReactM

@@ -15,7 +15,8 @@
     "@types/mdx": "^2.0.9",
     "next": "14.0.1",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-syntax-highlighter": "^15.5.0"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",