improve documentation

docs/documentation/app/_page.mdx

@@ -1,27 +1,41 @@
 import Github from '../components/github';
 
-# Wasmo Overview
-
-This section provides detailed documentation for working with Wasmo. 
-
+# Wasmo
 
 Wasmo is combined tool (Builder and CLI) for creating and building from scrach your WASM binaries with a simple Docker container.
 WebAssembly (WASM) is a simple machine model and executable format with an extensive specification. It is designed to be portable, compact, and execute at or near native speeds.
 
-
 Wasmo is strongly linked to [Extism](https://extism.org/) and all plugins built with Wasmo will be only executable with an Existm runtime.
 
-
-Our Wasmo documentation is broken down into app:
-<Github title="Wasmo Builder" href="https://github.com/MAIF/wasmo" />
-*A tool for building WebAssembly binaries.*
-
-The builder is a tool for creating, editing and building your code to WASM binaries. 
-It supports the creation and edition in a built-in UI.
-
-<Github title="Wasmo CLI" href="https://github.com/MAIF/wasmo/tree/main/cli" />
-*A tool for creating and leading WebAssembly building.*
-
-
-The CLI is a tool to leading from your terminal the creation of WASM binaries.
-It comes with its own documentation, available in the [cli directory](https://github.com/MAIF/wasmo/tree/main/cli) of this project.
+<br />
+## Articles : examples and enterprise use cases
+
+Wasmo plugins can be used :
+  - With the reverse proxy [Otoroshi](https://www.otoroshi.io/)
+    - [Wasm usage](https://maif.github.io/otoroshi/manual/how-to-s/wasm-usage.html)
+    - [Wasmo and Otoroshi](https://maif.github.io/otoroshi/manual/how-to-s/wasmo-installation.html)
+    - [Build plugins to manipulate http requests](https://zwiterrion.hashnode.dev/leveraging-wasm-for-api-gateway) 
+
+  - To build FAAS [Function As a Service](https://zwiterrion.hashnode.dev/building-your-first-faas-with-wasm)
+  - To control [Feature flags](https://maif.github.io/izanami/docs/guides/local-scripts?_highlight=wasmo#creating-your-script-with-wasmo-cli) with [Izanami](https://maif.github.io/izanami/)
+
+<div className='flex gap-3'>
+  <div className='flex-1'>
+    <Github title="Wasmo Builder" href="https://github.com/MAIF/wasmo" />
+    <div style={{ minHeight: '4rem'}}>
+      ### A tool for building WebAssembly binaries
+    </div>
+    The builder is a tool for creating, editing and building your code to WASM binaries. 
+  It supports the creation and edition in a built-in UI.
+  </div>
+
+  <div className='flex-1'>
+    <Github title="Wasmo CLI" href="https://github.com/MAIF/wasmo/tree/main/cli" />
+    <div style={{ minHeight: '4rem'}}>
+      ###  A tool for creating and leading WebAssembly building
+    </div>
+
+    The CLI is a tool to leading from your terminal the creation of WASM binaries.
+  It comes with its own documentation, available in the [cli directory](https://github.com/MAIF/wasmo/tree/main/cli) of this project.
+  </div>
+</div>

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

@@ -1,25 +1,44 @@
 
 # Getting started
 
-## Prerequisites
+Wasmo Builder is an all-in-one builder for creating, editing and building **small** and **optimized** WASM binaries.
 
-- **Docker**: A Docker-enabled system with proper Docker access
+### 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
 
 ## Instantiate a Wasmo 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 UI for editing plugins.
 - **Without a database (in-memory)**: Store generated Wasm binaries on the file system. In this mode, the Builder UI is unavailable but the CLI keeps running.
 
-Run the following command in your terminal to start your builder using a S3 storage:
+Run the following command in your terminal to start your builder using a S3 storage.
+
+
+These commands will first create a custom Docker network.
 
 ```
 docker network create wasmo-network
+```
+
+then instantiate a new S3 from the Scality image
+```
 docker run -d --name s3Server \
     -p 8000:8000 \
     -e SCALITY_ACCESS_KEY_ID=access_key \
     -e SCALITY_SECRET_ACCESS_KEY=secret \
     --net wasmo-network scality/s3server
+```
+
+and run a Wasmo Builder connnected to the S3.
+```
 docker run -d --net wasmo-network \
     --name wasmo \
     -p 5001:5001 \
@@ -33,7 +52,7 @@ docker run -d --net wasmo-network \
     maif/wasmo
 ```
 
-These commands will first create a custom Docker network, then instantiate a new S3 from the Scality imagte and run a Wasmo Builder connnected to the S3.
+ 
 
 If all goes well, Wasmo should now be serving your builder on [http://localhost:5001/](http://localhost:5001/).
 

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

@@ -11,8 +11,8 @@ export default function Home() {
       href: '/builder/getting-started'
     }}
     previous={{
-      href: "/builder/overview",
-      title: "Builder - Overview"
+      href: "/",
+      title: "Overview"
     }}
     next={{
       href: "/builder/your-first-plugin",

docs/documentation/app/integrations/otoroshi/_page.mdx

@@ -1,18 +1,38 @@
 # Integration with Otoroshi
 
-We can connect Otoroshi with Wasmo. The only step is to navigate to the danger zone of your Otoroshi instance, 
-and add the following values in the Wasmo section:
+Wasmo plugins can be used with [Otoroshi](https://www.otoroshi.io/) to build plugins to manipulate http requests.
 
-- `URL`: http://localhost:5001
-- `Apikey id`: admin-api-apikey-id
-- `Apikey secret`: admin-api-apikey-secret
-- `User`: *
-- `Token secret`:
+[Click here](https://zwiterrion.hashnode.dev/leveraging-wasm-for-api-gateway) to read an article about Otoroshi and Wasmo.
 
-The User property is used by Wasmo to filter the list of returned plugins. For example, 
-if the value of the property is `[email protected]`, Wasmo will return the list of Wasm plugins with the creator at `[email protected]`.
+## Bind Wasmo to Otoroshi
 
-Don’t forget to save the configuration.
+A convenient way to leverage Wasmo's plugins is by integrating Wasmo with Otoroshi. 
+This enables manipulation of HTTP requests and responses within Otoroshi, facilitating the creation of mock API backends and addressing various other scenarios. 
+
+We can connect Otoroshi with Wasmo. 
+
+Steps are really straightforward : 
+  - navigate to the danger zone of your Otoroshi instance (create a new [Otoroshi instance](https://maif.github.io/otoroshi/manual/how-to-s/wasm-usage.html#before-your-start) if not already done)
+  - connect Wasmo by specify the URL field where your Wasmo is deployed : http://localhost:5001 (following the Getting Started tutorial).
+  - save the configuration
+
+Congratulations! You can now use your Wasmo plugins in the Otoroshi plugins : 
+  - [Wasm Pre-Route](https://maif.github.io/otoroshi/manual/plugins/built-in-plugins.html#otoroshi.next.plugins.WasmPreRoute)
+  - [Wasm Request Transformer](https://maif.github.io/otoroshi/manual/plugins/built-in-plugins.html#otoroshi.next.plugins.WasmRequestTransformer)
+  - [Wasm Response Transformer](https://maif.github.io/otoroshi/manual/plugins/built-in-plugins.html#otoroshi.next.plugins.WasmResponseTransformer)
+  - [Wasm Route matcher](https://maif.github.io/otoroshi/manual/plugins/built-in-plugins.html#otoroshi.next.plugins.WasmRouteMatcher)
+  - [Wasm Sink](https://maif.github.io/otoroshi/manual/plugins/built-in-plugins.html#otoroshi.next.plugins.WasmSink)
+  - [Wasm Router](https://maif.github.io/otoroshi/manual/plugins/built-in-plugins.html#otoroshi.next.plugins.WasmRouter)
+  - [Wasm Access Control](https://maif.github.io/otoroshi/manual/plugins/built-in-plugins.html#otoroshi.next.plugins.WasmAccessValidator)
+  - [Wasm Backend](https://maif.github.io/otoroshi/manual/plugins/built-in-plugins.html#otoroshi.next.plugins.WasmBackend)
+
+
+## Expose Wasmo behind Otoroshi 
+
+You can configure Wasmo to delegate its authentication to Otoroshi. You should use this configuration in a production environment.
+
+You can follow this [tutorial](https://maif.github.io/otoroshi/manual/how-to-s/wasmo-installation.html#create-a-route-to-expose-and-protect-wasmo-with-authentication)
+to deploy Otoroshi and Wasmo, both locally, and to secure access to Wasmo.
 
 To have more informations about Otoroshi and Wasmo, you can follow the two tutorials:
 

docs/documentation/app/page.js

@@ -11,8 +11,8 @@ export default function Home() {
       title: "Wasmo - Overview"
     }}
     next={{
-      href: "/builder/overview",
-      title: "Builder"
+      href: "/builder/getting-started",
+      title: "Getting started"
     }}>
     <Page />
   </Layout>

docs/documentation/components/Layout.js

@@ -15,8 +15,8 @@ function Layout({ children, next, metadata, previous }) {
   const [open, handleOpen] = useState(false)
 
   return <>
-    <header className="sticky top-2 z-50 flex items-center justify-between px-3 py-2 bg-white" onClick={() => handleOpen(false)}>
-      <div className="flex items-center flex-grow">
+    <header className="sticky top-0 z-50 flex items-center justify-between px-3 py-2 bg-slate-100" onClick={() => handleOpen(false)}>
+      <div className="flex items-center flex-grow mx-auto">
         <a href="" className="text-3xl font-bold tracking-tight text-slate-1200 flex items-center gap-2">
           <img src="/wasmo/wasmo.png" width={32} />
           Wasmo Docs

docs/documentation/components/Searchbar.js

@@ -67,15 +67,18 @@ export default function Searchbar({ handleOpen, open }) {
           minHeight: open ? 280 : 0,
           maxHeight: open ? 'initial' : 50,
           overflow: open ? 'initial' : 'hidden',
-          paddingTop: open ? 20 : 0
+          paddingTop: open ? 20 : 6
         }}>
           <div id="search" style={{ display: open ? 'initial' : 'none' }}></div>
-          {!open && <div className='cursor-pointer p-3 bg-purple-700 rounded-xl'>
+          {!open && <div className='cursor-pointer p-2 bg-purple-700 rounded-xl items-center flex'>
             <svg viewBox="0 0 20 20"
               aria-hidden="true"
               className="h-auto w-5 fill-white">
               <path d="M16.72 17.78a.75.75 0 1 0 1.06-1.06l-1.06 1.06ZM9 14.5A5.5 5.5 0 0 1 3.5 9H2a7 7 0 0 0 7 7v-1.5ZM3.5 9A5.5 5.5 0 0 1 9 3.5V2a7 7 0 0 0-7 7h1.5ZM9 3.5A5.5 5.5 0 0 1 14.5 9H16a7 7 0 0 0-7-7v1.5Zm3.89 10.45 3.83 3.83 1.06-1.06-3.83-3.83-1.06 1.06ZM14.5 9a5.48 5.48 0 0 1-1.61 3.89l1.06 1.06A6.98 6.98 0 0 0 16 9h-1.5Zm-1.61 3.89A5.48 5.48 0 0 1 9 14.5V16a6.98 6.98 0 0 0 4.95-2.05l-1.06-1.06Z" />
             </svg>
+            <p className='text-white px-2'>
+              Search
+            </p>
           </div>}
         </div>
       </div>

docs/documentation/components/Sidebar.js

@@ -1,11 +1,11 @@
 "use client"
 const LINKS = {
-  Builder: ["Overview", "Getting started", "Your first plugin", "Environment Variables", "Plugin Structure", 'UI'],
+  Builder: ["Getting started", "Your first plugin", "Environment Variables", "Plugin Structure", 'UI'],
   CLI: ["Getting started", "Core commands", "Configuration file"],
   Integrations: ["Otoroshi"],
 }
 
-const SELECTED = "bg-gray-200";
+const SELECTED = "bg-gray-400";
 
 const color = test => test ? SELECTED : 'transparent';
 const slugify = str => str.toString()
@@ -19,8 +19,8 @@ const slugify = str => str.toString()
 
 export function Sidebar({ metadata }) {
 
-  return <div className="flex h-screen flex-col justify-between ps-2" style={{ minWidth: 250 }}>
-    <div className="px-4 py-6 ps-0">
+  return <div className="flex h-screen flex-col justify-between ps-2 bg-slate-100" style={{ minWidth: 250 }}>
+    <div className="px-4 py-5 ps-0">
       {/* <span
         className="grid h-10 w-32 place-content-center rounded-lg bg-gray-100 text-xs text-gray-600"
       >
@@ -40,11 +40,10 @@ export function Sidebar({ metadata }) {
         {Object.entries(LINKS).map(([group, children]) => {
           return <li key={group} >
             <details className="group [&_summary::-webkit-details-marker]:hidden"
-              // open={metadata.href.startsWith(`/${slugify(group)}`)}
               open={true}
             >
               <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"
+                className="border-slate-200 border-2 flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
               >
                 <span className="text-sm font-medium"> {group} </span>
 
@@ -72,7 +71,7 @@ export function Sidebar({ metadata }) {
                   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(`/wasmo/${metadata.href}` === href)}`}
+                      className={`block rounded-lg px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 ${color(`/wasmo/${metadata.href}` === href)}`}
                     >
                       {child}
                     </a>

docs/documentation/components/mdx/Pre.js

@@ -16,7 +16,7 @@ export const Pre = props => {
   const codeString = props.children.props.children;
 
   return <div className='overflow-hidden relative rounded-lg my-7' style={{ maxWidth: 800 }}>
-    <div className='flex items-center bg-purple-900 ps-3' style={{
+    {language && <div className='flex items-center bg-purple-900 ps-3' style={{
       position: 'absolute',
       top: 0,
       left: 0,
@@ -29,9 +29,9 @@ export const Pre = props => {
       <div style={{ width: 10, height: 10, borderRadius: '50%' }} className='bg-gray-400' />
 
       {!['javascript', 'go', 'rust', 'js'].includes(language) && <span className='text-white ms-3'>{language}</span>}
-    </div>
+    </div>}
 
-    <div className="absolute right-2 rounded-lg top-10 p-1 cursor-pointer hover:bg-gray-600"
+    <div className={`absolute right-2 rounded-lg top-${language ? 10 : 2} p-1 cursor-pointer hover:bg-gray-600`}
       onClick={() => {
         if (navigator.clipboard && window.isSecureContext) {
           navigator.clipboard.writeText(codeString);
@@ -50,7 +50,7 @@ export const Pre = props => {
     {copied && <div className='absolute right-10 top-10 p-1 text-white'>Copied!</div>}
 
     <SyntaxHighlighter language={language || "bash"} style={rainbow} customStyle={{
-      padding: '2.5rem 12px 1rem'
+      padding: language ? '2.5rem 12px 1rem' : '1rem 12px'
     }}>
       {codeString}
     </SyntaxHighlighter>

ui/src/TabsHeader.js

@@ -9,6 +9,9 @@ export function TabsHeader({
   selectedPlugin, onSave, onBuild, onDownload,
   showPlaySettings, children }) {
 
+  if (!selectedPlugin?.pluginId)
+    return null
+
   return <Header
     selectedPluginType={selectedPlugin?.type}
     onSave={onSave}
@@ -28,9 +31,6 @@ function Header({
   children, onSave, onBuild, showActions, onDownload,
   showPlaySettings, pluginId }) {
 
-  if (!pluginId)
-    return null
-
   const [runtimeState, setRuntimeEnvironment] = useState(false);
   const [canShare, setCanSharePlugin] = useState(false);