Merge pull request #38 from MAIF/plugins.json

Plugins.json

cli/README.md

@@ -67,7 +67,10 @@ Then open the content of your `my-first-plugin` folder. You should find the gene
 
 You can now optionally start a new plugin from a template by appending `--template=[template-name]` to the creation command.
 
-If you don't pass a template, Wasmo will list the available templates: `js`, `ts`, `opa`, `go` and `rust`.
+If you don't pass a template, Wasmo will list the available templates. There are listed by product : 
+  - empty template : `js`, `ts`, `opa`, `go` and `rust`
+  - Otoroshi template : `otoroshi_go`, `otoroshi_rust`, `otoroshi_opa`, `otoroshi_ts`, `otoroshi_js`
+  - Izanami template : `izanami_js`, `izanami_go`, `izanami_rust`, `izanami_opa`, `izanami_ts`
 
 ```
 wasmo init --name=my-first-plugin --template=[template-name] --path=[output-directory]

docs/documentation/app/builder/collaborate/_page.mdx

@@ -0,0 +1,13 @@
+
+# Collaborate
+
+Wasmo 1.2.2 brings a new feature to collaborate inside the product. You can work together on a plugin by sharing it with collaborators. It's easy to share plugins with your entire team. 
+
+To share plugins from the UI:
+  1. Click on the desired plugin
+  2. Click the 🔗 button
+  3. Write administrators and users emails in their respective lists
+
+<div style={{ display: 'flex', justifyContent: 'center', width: '100%', marginTop: '2rem' }}>
+  <img src="/wasmo/collaborate.png" width={500} style={{ borderRadius: '.5rem' }} />
+</div>

docs/documentation/app/builder/collaborate/layout.js

@@ -0,0 +1,7 @@
+import Page from './page';
+
+export const metadata = {
+  title: 'Builder - UI',
+}
+
+export default Page;

docs/documentation/app/builder/collaborate/page.js

@@ -0,0 +1,24 @@
+"use client"
+
+import Layout from '@/components/Layout';
+import Page from './_page.mdx';
+
+export default function Home() {
+
+  return <Layout
+    metadata={{
+      title: 'Wasmo - User Interface',
+      href: '/builder/ui'
+    }}
+    previous={{
+      href: "/builder/plugin-structure",
+      title: "Plugin structure"
+    }}
+    next={{
+      href: "/cli/ui",
+      title: "User interface"
+    }}>
+    <Page />
+  </Layout>
+
+}

docs/documentation/app/builder/ui/page.js

@@ -11,8 +11,8 @@ export default function Home() {
       href: '/builder/ui'
     }}
     previous={{
-      href: "/builder/plugin-structure",
-      title: "Plugin Structure"
+      href: "/builder/collaborate",
+      title: "Collaborate"
     }}
     next={{
       href: "/cli/getting-started",

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

@@ -43,7 +43,10 @@ Then open the content of your `my-first-plugin` folder. You should find the gene
 
 You can now optionally start a new plugin from a template by appending `--template=[template-name]` to the creation command.
 
-If you don't pass a template, Wasmo will list the available templates: `js`, `ts`, `opa`, `go` and `rust`.
+If you don't pass a template, Wasmo will list the available templates. There are listed by product : 
+  - empty template : `js`, `ts`, `opa`, `go` and `rust`
+  - Otoroshi template : `otoroshi_go`, `otoroshi_rust`, `otoroshi_opa`, `otoroshi_ts`, `otoroshi_js`
+  - Izanami template : `izanami_js`, `izanami_go`, `izanami_rust`, `izanami_opa`, `izanami_ts`
 
 ```
 wasmo init --name=my-first-plugin --template=[template-name] --path=[output-directory]
@@ -61,7 +64,11 @@ You have two ways to build your plugin:
 
 [wasmoserver]: https://github.com/MAIF/wasmo
 
-Assuming we want to build our `my-first-plugin` locally. Enter `wasmo build --host=OneShotDocker --path=my-first-plugin` to start the build. 
+Assuming we want to build our `my-first-plugin` locally. Enter the following command to start the build. 
+
+```
+wasmo build --host=OneShotDocker --path=my-first-plugin
+```
 
 Let's explain these 3 parameters:
   - the `path` parameter is explicitly used to indicate the plugin to build

docs/documentation/app/faq/_page.mdx

@@ -0,0 +1,109 @@
+import Badge from '../../components/Badge'
+import Badges from '../../components/Badges'
+import FAQButton from '../../components/FAQButton'
+
+# FAQ
+
+<FAQButton title="What is the fastest way to use Wasmo?" />
+<FAQButton title="How to create an Otoroshi-compatible plugin using Docker?" />
+<FAQButton title="How can I create a new development version of my plugin?" />
+<FAQButton title="Can I download the generated Wasm from the UI?" />
+<FAQButton title="Can I determine who built each version and at what time?" />
+<FAQButton title="How to collaborate with my team ?" />
+<FAQButton title="Our team have a CI/CD process and wants to automate the building of our plugins." />
+<FAQButton title="How can I collaborate with my team?" />
+
+### What is the fastest way to use Wasmo?
+
+```
+$ cargo install wasmo
+or
+$ brew tap maif/wasmo
+$ brew install wasmo
+```
+
+### How to create an Otoroshi-compatible plugin using Docker? 
+<Badge raw value="Name : foo" default/>
+
+Initialize the plugin with corresponding Otoroshi template and Javascript language 
+``` 
+wasmo init --template=otoroshi_js --name=foo
+```
+
+Build plugin from folder and Docker
+```
+wasmo build --host=OneShotDocker --path=.
+```
+
+### How can I create a new development version of my plugin?
+<Badges raw values={["Name : foo", "Version : 1.0.2"]} default/>
+
+Rust plugin
+
+``` Cargo.toml
+[package]
+name = "foo"
+version = "1.0.2"
+
+...
+```
+
+JS/TS/Open Policy Agent plugin
+
+``` package.json
+{
+  "name": "foo",
+  "version": "1.0.2",
+  ...
+}
+```
+
+Go plugin
+
+``` go.mod
+module foo/1.0.2
+
+...
+```
+
+<div style={{ display: 'flex', justifyContent: 'center', width: '100%', marginTop: '2rem' }}>
+  <img src="/wasmo/release.png" style={{  borderRadius: '.5rem',
+    width: '230px',
+    maxWidth: '230px',
+    height: '503px',
+    minHeight: '503px'
+  }} />
+
+  <div className="flex flex-col ms-5">
+    ### Can I download the generated Wasm from the UI?
+
+    Once you have built a dev or release version of your plugin using the Hammer or Rocker buttons (available at the top right of the screen),
+    you can click on each version under the 'Releases' section on the left side of the screen.
+
+    ### Can I determine who built each version and at what time?
+
+    Each plugin has a **config** file under the **configuration** section with the following information : 
+      - type: language used to develop the plugin.
+      - users: list of users allowed to edit and view the plugin.
+      - admins: list of admins allowed to edit, view and share the plugin.
+      - filename: name of the plugin.
+      - pluginId: unique ID of the plugin.
+      - template: original template, selected at plugin creation.
+      - **versions: list of built versions, with name, creator and date of generation**.
+      - last_hash: hash used by the backend to check if changes has been made between last version.
+  </div>
+</div>
+
+### How can I collaborate with my team?
+
+Since version 1.22, Wasmo allows users to share plugins with two levels of rights: 
+- `users`: Can edit and view plugin.
+- `admins`: Can edit, view and share plugin.
+
+You can find more information about sharing by reading this [article](/wasmo/builder/collaborate)
+
+### Our team have a CI/CD process and wants to automate the building of our plugins.
+
+Since version 1.x, Wasmo includes a command line interface to create, edit and build plugins. 
+
+You can find more [information](/wasmo/cli/getting-started) about the CLI and the Github [repository](https://github.com/MAIF/wasmo/tree/main/cli)

docs/documentation/app/faq/layout.js

@@ -0,0 +1,7 @@
+import Page from './page';
+
+export const metadata = {
+  title: 'FAQ',
+}
+
+export default Page;

docs/documentation/app/faq/page.js

@@ -0,0 +1,20 @@
+"use client"
+
+import Layout from '@/components/Layout';
+import Page from './_page.mdx';
+
+export default function Home() {
+
+  return <Layout
+    metadata={{
+      title: 'FAQ',
+      href: '/cli/examples'
+    }}
+    next={{
+      href: "/builder/getting-started",
+      title: "Builder - Getting started"
+    }}>
+    <Page />
+  </Layout>
+
+}

docs/documentation/app/globals.css

@@ -16,4 +16,38 @@
     overflow: auto;
     max-height: calc(500px - 71px);
     margin-bottom: 24px;
+}
+
+.sidebar-group::before {
+    position: absolute;
+    bottom: -0.1rem;
+    top: -0.1rem;
+    left: -0.5rem;
+    width: 10px;
+    --tw-border-opacity: 1;
+    border-right-width: 2px;
+    border-color: rgb(226 232 240 / var(--tw-border-opacity));
+    opacity: 1;
+    content: "";
+}
+
+.sidebar-group-selected::before {
+    border-color: rgb(126 34 206);
+}
+
+h2, h3 {
+    position: relative;
+}
+
+.anchor-link {
+    color: #666;
+    opacity: 0;
+    position: absolute;
+    transform: translate(-1em, -2px);
+    width: 1em;
+}
+
+h3:hover .anchor-link,
+h2:hover .anchor-link {
+    opacity: 1;
 }

docs/documentation/components/Badge.js

@@ -0,0 +1,7 @@
+export default function Badge({ value, raw, ...props }) {
+    return <div className={`inline-flex flex items-center ${props.default ? 'mb-3' : 'ms-3 mt-2 '}`} style={{ gap: '.5rem' }}>
+        <span className="whitespace-nowrap rounded-full bg-purple-100 px-2.5 py-0.5 text-sm text-purple-700">
+            {!raw ? `<${value}>` : value}
+        </span>
+    </div>
+}

docs/documentation/components/Badges.js

@@ -1,5 +1,5 @@
-export default function Badges({ values, raw  }) {
-    return <div className="inline-flex ms-6 flex items-center mt-2" style={{ gap: '.5rem' }}>
+export default function Badges({ values, raw, ...props }) {
+    return <div className={`inline-flex flex items-center ${props.default ? 'mb-3' : 'ms-6  mt-2 '}`} style={{ gap: '.5rem' }}>
         {values.map(value => <span key={value} className="whitespace-nowrap rounded-full bg-purple-100 px-2.5 py-0.5 text-sm text-purple-700">
             {!raw ? `<${value}>` : value}
         </span>)}

docs/documentation/components/FAQButton.js

@@ -0,0 +1,21 @@
+export default function FAQButton({ title }) {
+    return <button className="block btn border border-black p-2 w-4/5 text-start rounded-lg mb-3 flex items-center justify-between" type="button"
+        onClick={() => {
+            window.location.href = `/wasmo/faq#${title
+                .toLowerCase()
+                .replace(/[^a-z0-9 ]/g, '')
+                .replace(/[ ]/g, '-')}`
+        }}>
+        <div className="items-center flex gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" width={24}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+            </svg>
+            {title}
+        </div>
+
+
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.25} stroke="currentColor" width={24}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672ZM12 2.25V4.5m5.834.166-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243-1.59-1.59" />
+        </svg>
+    </button>
+}

docs/documentation/components/Layout.js

@@ -49,7 +49,7 @@ function Layout({ children, next, metadata, previous }) {
           table: Table,
           th: props => <th className='whitespace-nowrap px-4 py-2 font-medium text-gray-900'>{props.children}</th>,
           thead: props => <thead className="ltr:text-left rtl:text-right">{props.children}</thead>,
-          h3: props => <h3 className='text-xl font-bold my-3'>{props.children}</h3>,
+          h3: Heading.H3,
           h4: props => <h4 className='text-lg my-3'>{props.children}</h4>
         }}>
           {children}

docs/documentation/components/Searchbar.js

@@ -70,7 +70,9 @@ export default function Searchbar({ handleOpen, open }) {
           paddingTop: open ? 20 : 6
         }}>
           <div id="search" style={{ display: open ? 'initial' : 'none' }}></div>
-          {!open && <div className='cursor-pointer p-2 bg-purple-700 rounded-xl items-center flex'>
+          {!open && <div className='cursor-pointer p-2 rounded-xl items-center flex' style={{
+            background: 'rgb(126 34 206)'
+          }}>
             <svg viewBox="0 0 20 20"
               aria-hidden="true"
               className="h-auto w-5 fill-white">