wazo-platform · chartrandf · Nov 21, 2024 · Nov 21, 2024 · Nov 21, 2024 · Nov 22, 2024
diff --git a/.gitignore b/.gitignore
@@ -73,3 +73,4 @@ yarn-error.log
 .yarn-integrity
 
 tests/node_modules/
+static/provisioning
diff --git a/biome.json b/biome.json
@@ -12,7 +12,19 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "complexity": {
+        "noForEach": "off"
+      },
+      "style": {
+        "useImportType": "off"
+      },
+      "suspicious": {
+        "noExplicitAny": "off"
+      },
+      "a11y": {
+        "all": false
+      }
     }
   },
   "javascript": {

diff --git a/website/.gitignore b/website/.gitignore
@@ -30,6 +30,8 @@ yarn-error.log*
 !.yarn/sdks
 !.yarn/versions
 
+static/provisioning
+
 ## temporary --- remove once static folder has been moved inside website/
 static
 static/

diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
@@ -2,6 +2,7 @@ import type * as Preset from '@docusaurus/preset-classic';
 import type { Config } from '@docusaurus/types';
 import { themes as prismThemes } from 'prism-react-renderer';
 import REDIRECTS from './redirects';
+import pluginsProvisioningInit from './src/plugins/provisioning/builder/index';
 
 const config: Config = {
   title: 'Wazo Platform',
@@ -172,6 +173,7 @@ const config: Config = {
         redirects: REDIRECTS,
       },
     ],
+    pluginsProvisioningInit,
   ],
 };
 

diff --git a/website/package.json b/website/package.json
@@ -31,7 +31,8 @@
     "clsx": "^2.1.1",
     "prism-react-renderer": "^2.4.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",

diff --git a/website/src/plugins/provisioning/External.tsx b/website/src/plugins/provisioning/External.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import Vendors from './components/Vendors';
+import './provisioning.css';
+
+type Props = {
+  route: {
+    customData?: {
+      plugins: Record<string, any>;
+      images: Record<string, any>;
+    };
+  };
+};
+
+const ExternalPage = ({ route }: Props) => {
+  const { plugins, images } = route?.customData || {};
+
+  return (
+    <div className="provisioning-vendors provisioning-vendors-external wazo-inc">
+      <Vendors plugins={plugins} images={images} />
+    </div>
+  );
+};
+
+export default ExternalPage;
diff --git a/website/src/plugins/provisioning/Phone.tsx b/website/src/plugins/provisioning/Phone.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+
+import Layout from '@theme/Layout';
+
+import slugify from './builder/slugify';
+import { buildTable } from './helpers';
+import './provisioning.css';
+import Head from '@docusaurus/Head';
+
+const VENDORS_URL = '/uc-doc/ecosystem/supported_devices';
+
+type Props = {
+  route: {
+    customData?: {
+      name: string;
+      vendor: string;
+      phone: Record<string, any>;
+      vendor_images: Record<string, any>;
+    };
+  };
+};
+
+const PhonePage = ({ route }: Props) => {
+  const { name, vendor, phone, vendor_images } = route?.customData || {};
+
+  const breadcrumbs = [
+    { url: VENDORS_URL, label: 'Provd plugins' },
+    { url: `/provisioning/${slugify(vendor)}`, label: vendor },
+    { label: name },
+  ];
+
+  return (
+    <Layout>
+      <Head>
+        <title>{breadcrumbs.map(({ label }) => label).join(' - ')}</title>
+      </Head>
+      <div className="doc-wrapper provisioning-phone">
+        <div className="container">
+          <div className="row">
+            <div className="col col--3">
+              <div className="card card--full-height">
+                <div className="body">
+                  {vendor_images &&
+                  vendor_images.indexOf(`${slugify(name)}.png`) !== -1 ? (
+                    <img
+                      src={`/provisioning/${slugify(vendor)}-${slugify(name)}.png`}
+                      alt={`${slugify(vendor)}-${name}`}
+                    />
+                  ) : (
+                    <img
+                      src="/provisioning/img-placeholder.png"
+                      alt={`${slugify(vendor)}-${name}`}
+                    />
+                  )}
+                </div>
+              </div>
+            </div>
+            <div className="col col--9">{buildTable(phone)}</div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default PhonePage;
diff --git a/website/src/plugins/provisioning/Vendor.tsx b/website/src/plugins/provisioning/Vendor.tsx
@@ -0,0 +1,77 @@
+import Layout from '@theme/Layout';
+import React from 'react';
+
+import './provisioning.css';
+import Head from '@docusaurus/Head';
+import slugify from './builder/slugify';
+
+const vendorsUrl = '/uc-doc/ecosystem/supported_devices';
+
+type Props = {
+  route: {
+    customData?: {
+      name: string;
+      vendor_plugins: Record<string, any>;
+      vendor_images: Record<string, any>;
+    };
+  };
+};
+
+const VendorPage = ({ route }: Props) => {
+  const { name, vendor_plugins, vendor_images } = route?.customData || {};
+
+  const breadcrumbs = [
+    { url: vendorsUrl, label: 'Provd plugins' },
+    { url: `/provisioning/${slugify(name)}`, label: name },
+  ];
+
+  return (
+    <Layout>
+      <Head>
+        <title>{breadcrumbs.map(({ label }) => label).join(' - ')}</title>
+      </Head>
+      <div className="doc-wrapper provisioning-vendor">
+        <div className="container">
+          <div className="section-block">
+            <div className="row">
+              {Object.keys(vendor_plugins).map((phoneName) => (
+                <div className="col col--4" key={phoneName}>
+                  <div className="card">
+                    <a
+                      className="card__header"
+                      href={`/provisioning/${slugify(name)}/${slugify(phoneName)}`}
+                    >
+                      {phoneName}
+                    </a>
+                    <div className="body">
+                      <a
+                        className="phone-picture"
+                        href={`/provisioning/${slugify(name)}/${slugify(phoneName)}`}
+                      >
+                        {vendor_images &&
+                        vendor_images.indexOf(`${slugify(phoneName)}.png`) !==
+                          -1 ? (
+                          <img
+                            src={`/provisioning/${slugify(name)}-${slugify(phoneName)}.png`}
+                            alt={phoneName}
+                          />
+                        ) : (
+                          <img
+                            src="/provisioning/img-placeholder.png"
+                            alt={phoneName}
+                          />
+                        )}
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default VendorPage;
diff --git a/website/src/plugins/provisioning/builder/index.ts b/website/src/plugins/provisioning/builder/index.ts
@@ -0,0 +1,99 @@
+import { exec } from 'node:child_process';
+import fs from 'node:fs';
+
+import { PluginContentLoadedActions, PluginModule } from '@docusaurus/types';
+import slugify from './slugify';
+import { getProvisioningPlugins, walk } from './utils';
+
+type LoadedContent = {
+  plugins: Record<string, unknown>;
+};
+
+type GeneratePagesOpts = {
+  plugins: LoadedContent['plugins'];
+  actions: PluginContentLoadedActions;
+};
+
+const generatePages = async ({ plugins, actions }: GeneratePagesOpts) => {
+  // Retrieve images
+  const destPath = './static/provisioning/';
+  exec(`mkdir -p ${destPath}`);
+  const imagesPaths = walk('../content/provisioning/img', /.png$/, 'binary');
+
+  const images = {};
+
+  // Move only needed images to plulic folder
+  Object.keys(imagesPaths).forEach((basePath) => {
+    const vendorName = basePath.split('/').pop();
+    const isVendor = vendorName === 'vendors';
+
+    Object.keys(imagesPaths[basePath]).forEach((fileName) => {
+      const filePath = `${destPath}/${isVendor ? '' : `${vendorName}-`}${fileName}`;
+
+      if (!images[vendorName]) images[vendorName] = [];
+      images[vendorName].push(fileName);
+
+      fs.writeFileSync(filePath, imagesPaths[basePath][fileName], {
+        encoding: 'binary',
+      });
+    });
+  });
+
+  // Create external page
+  actions.addRoute({
+    path: '/provisioning/external',
+    component: '@site/src/plugins/provisioning/External.tsx',
+    exact: true,
+    customData: { plugins, images },
+  });
+
+  // Create vendor pages
+  Object.keys(plugins).forEach((vendor) => {
+    if (!plugins?.[vendor]) {
+      return;
+    }
+
+    actions.addRoute({
+      path: `/provisioning/${slugify(vendor)}`,
+      component: '@site/src/plugins/provisioning/Vendor.tsx',
+      exact: true,
+      customData: {
+        name: vendor,
+        vendor_plugins: plugins[vendor],
+        vendor_images: images[slugify(vendor)],
+      },
+    });
+  });
+
+  // Create phone pages
+  Object.keys(plugins).forEach((vendor) => {
+    Object.keys(plugins?.[vendor] || {}).forEach((phone) => {
+      actions.addRoute({
+        path: `/provisioning/${slugify(vendor)}/${slugify(phone)}`,
+        component: '@site/src/plugins/provisioning/Phone.tsx',
+        exact: true,
+        customData: {
+          name: phone,
+          vendor,
+          phone: plugins[vendor][phone],
+          vendor_images: images[slugify(vendor)],
+        },
+      });
+    });
+  });
+};
+
+const plugin: PluginModule<LoadedContent> = async () => ({
+  name: 'provisioning-pages-build',
+
+  async loadContent() {
+    const plugins = getProvisioningPlugins();
+    return { plugins };
+  },
+
+  async contentLoaded({ content, actions }) {
+    await generatePages({ plugins: content.plugins, actions });
+  },
+});
+
+export default plugin;
diff --git a/website/src/plugins/provisioning/builder/slugify.ts b/website/src/plugins/provisioning/builder/slugify.ts
@@ -0,0 +1,10 @@
+// @see: gist.github.com/mathewbyrne/1280286
+export default (text: string) =>
+  text
+    .toString()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w-]+/g, '')
+    .replace(/--+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '');