add more withPrefix

wazo-platform · Aug 11, 2022 · b95b2f0 · b95b2f0
1 parent 22ff82c
commit b95b2f0
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 16 deletions.
diff --git a/src/component/LayoutCorporate.js b/src/component/LayoutCorporate.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Helmet from 'react-helmet';
 
-import { Link } from 'gatsby';
+import { Link, withPrefix } from 'gatsby';
 import Search from './corporate/search';
 
 const WazoHeader = () => {

diff --git a/src/component/provisioning/components/Vendors.js b/src/component/provisioning/components/Vendors.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { withPrefix } from "gatsby"
 
 import { buildTable } from '../helpers';
 const slugify = require('../../../builder/slugify');
@@ -19,17 +20,17 @@ const Page = ({ plugins, images }) => {
 
   return Object.keys(plugins).map(vendor => (
       <div className="vendor" key={vendor}>
-        <a className="title" href={`/provisioning/${slugify(vendor)}`} id={vendor} onClick={onVendorClick}>{vendor}</a>
+        <a className="title" href={withPrefix(`/provisioning/${slugify(vendor)}`)} id={vendor} onClick={onVendorClick}>{vendor}</a>
         {vendor === currentVendor && 
           <div className="phones">
             {Object.keys(plugins[vendor]).sort().map(name => {
               const id = `${slugify(vendor)}-${slugify(name)}`;
               return <div className={id === currentDevice ? 'selected' : ''} key={id} >
-                <a href={`/provisioning/${slugify(vendor)}/${slugify(name)}`} onClick={onDeviceClick} id={id}>{name}</a>
+                <a href={withPrefix(`/provisioning/${slugify(vendor)}/${slugify(name)}`)} onClick={onDeviceClick} id={id}>{name}</a>
                 {id === currentDevice && <div className="slide">
                   <div className="image">
                     <div className="name">{name}</div>
-                    {images[slugify(vendor)] && images[slugify(vendor)].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}`} />}
+                    {images[slugify(vendor)] && images[slugify(vendor)].indexOf(`${slugify(name)}.png`) !== -1 ? <img src={withPrefix(`/provisioning/${slugify(vendor)}-${slugify(name)}.png`)} alt={`${slugify(vendor)}-${name}`}/> : <img src={withPrefix('/provisioning/img-placeholder.png')} alt={`${slugify(vendor)}-${name}`} />}
                   </div>
                   <div className="content">{buildTable(plugins[vendor][name])}</div>
             </div>}

diff --git a/src/component/provisioning/phone.js b/src/component/provisioning/phone.js
@@ -1,23 +1,23 @@
 import React  from 'react';
+import { withPrefix } from "gatsby"
 
 import Layout from '../Layout';
 import { buildTable } from './helpers';
 import './provisioning.scss';
-import { withPrefix } from 'gatsby';
 
 const slugify = require('../../builder/slugify');
 
-const vendorsUrl = '/uc-doc/ecosystem/supported_devices';
+const vendorsUrl = withPrefix('/uc-doc/ecosystem/supported_devices');
 
 
 const Page = ({ pageContext: { name, vendor, phone, vendor_images } }) => {
   const breadcrumbs = [
     { url: vendorsUrl, label: 'Provd plugins' },
-    { url: `/provisioning/${slugify(vendor)}`, label: vendor },
+    { url: withPrefix(`/provisioning/${slugify(vendor)}`), label: vendor },
   ];
 
   return (
-    <Layout pageTitle={`<a href="${vendorsUrl}">Provd Plugins</a> &gt; <a href=withPrefix("/provisioning/${slugify(vendor)}")>${vendor}</a> &gt; ${name}`} breadcrumbs={breadcrumbs} currentPageName={name}>
+    <Layout pageTitle={`<a href="${vendorsUrl}">Provd Plugins</a> &gt; <a href="${withPrefix(`/provisioning/${slugify(vendor)}`)}">${vendor}</a> &gt; ${name}`} breadcrumbs={breadcrumbs} currentPageName={name}>
       <div className="doc-wrapper provisioning-phone">
         <div className="container">
           <div className="row">

diff --git a/src/component/provisioning/vendor.js b/src/component/provisioning/vendor.js
@@ -1,10 +1,11 @@
 import React  from 'react';
+import { withPrefix } from "gatsby"
 
 import Layout from '../Layout';
 import './provisioning.scss';
 const slugify = require('../../builder/slugify');
 
-const vendorsUrl = '/uc-doc/ecosystem/supported_devices';
+const vendorsUrl = withPrefix('/uc-doc/ecosystem/supported_devices');
 
 const breadcrumbs = [{
   url: vendorsUrl, label: 'Provd plugins',
@@ -19,12 +20,12 @@ const Page = ({ pageContext: { name, vendor_plugins, vendor_images } }) => (
             {Object.keys(vendor_plugins).map(phoneName => (
               <div className="col-md-4 col-12 mb-3" key={phoneName}>
                 <div className="card">
-                  <a className="card-header" href={`/provisioning/${slugify(name)}/${slugify(phoneName)}`}>{phoneName}</a>
+                  <a className="card-header" href={withPrefix(`/provisioning/${slugify(name)}/${slugify(phoneName)}`)}>{phoneName}</a>
                    <div className="body">
-                      <a className="phone-picture" href={`/provisioning/${slugify(name)}/${slugify(phoneName)}`}>
+                      <a className="phone-picture" href={withPrefix(`/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} />}
+                          ? <img src={withPrefix(`/provisioning/${slugify(name)}-${slugify(phoneName)}.png`)} alt={phoneName} />
+                          : <img src={withPrefix(`/provisioning/img-placeholder.png`)} alt={phoneName} />}
                       </a>
                   </div>
                 </div>

diff --git a/src/component/tutorials/index.js b/src/component/tutorials/index.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import Layout from '../Layout';
-import { Link } from 'gatsby';
+import { Link, withPrefix } from 'gatsby';
 
 const sortTutorials = (a) =>
   a.sort((a, b) => {
@@ -19,8 +19,8 @@ const Page = ({ pageContext: { tutorials: tutorialsRaw } }) => {
       <div className="container">
         <div className="tutorials-items">
           {tutorials.map(({ title, slug, author, summary, thumbnail }) => (
-            <Link key={slug} to={`/tutorials/${slug}`} className="tutorials-items-item">
-              <div class="thumbnail" style={{ backgroundImage: `url(/images/tutorials/${thumbnail})` }} />
+            <Link key={slug} to={withPrefix(`/tutorials/${slug}`)} className="tutorials-items-item">
+              <div class="thumbnail" style={{ backgroundImage: `url(${withPrefix('/images/tutorials/${thumbnail')}})` }} />
 
               <h2 className="title">{title}</h2>
               <p className="summary">{summary}...</p>