add more pathPrefix on links

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

Hide file tree

Showing 6 changed files with 32 additions and 31 deletions.
diff --git a/src/component/LayoutCorporate.js b/src/component/LayoutCorporate.js
@@ -9,7 +9,7 @@ const WazoHeader = () => {
     <div className="wazo-header">
       <div className="container">
         <div className="site-logo">
-          <a href="/" title="Wazo" rel="home">
+          <a href={withPrefix("/")} title="Wazo" rel="home">
             <img className="header-image" alt="Wazo" src="https://i1.wp.com/wazo.io/wp-content/uploads/2020/03/WAZO-LogoWAZO-transparent-2.png?resize=300%2C79&ssl=1" title="Wazo" />
           </a>
         </div>
@@ -57,15 +57,15 @@ const PageHeader = () => (
       <div>
         <div className="branding">
           <h1 className="logo">
-            <Link to="/">
+            <Link to={withPrefix("/")}>
               <span className="text-bold">Documentation</span>
             </Link>
           </h1>
         </div>
 
         <ol className="breadcrumb">
           <li className="breadcrumb-item">
-            <Link to="/">Home</Link>
+            <Link to={withPrefix("/")}>Home</Link>
           </li>
           <li className="breadcrumb-item active">Quick Start</li>
         </ol>

diff --git a/src/component/LayoutPlatform.js b/src/component/LayoutPlatform.js
@@ -1,6 +1,6 @@
 import Helmet from 'react-helmet';
 import React, { useState, useEffect } from 'react';
-import { Link } from 'gatsby';
+import { Link, withPrefix } from 'gatsby';
 import Search from './platform/search';
 import LogoHoriz from '../assets/logo.horiz.svg';
 
@@ -56,7 +56,7 @@ const Page = ({ children, section, className, pageTitle, pageTitleDate, PageTitl
     <div className="main">
       <Helmet bodyAttributes={bodyAttributes}>
         <title>{headTitle.replace(/<\/?[^>]+(>|$)/g, '')}</title>
-        <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
+        <link rel="shortcut icon" type="image/x-icon" href={withPrefix("/favicon.ico")} />
         <meta property="og:image" content="https://wazo-platform.org/images/og-image.jpg" />
         <link
           href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
@@ -68,7 +68,7 @@ const Page = ({ children, section, className, pageTitle, pageTitleDate, PageTitl
 
       <header id="header" className="header">
         <div className="container">
-          <Link to="/">
+          <Link to={withPrefix("/")}>
             <img src={LogoHoriz} alt="Wazo Platform" id="wazo-platform-nav" />
           </Link>
           <nav id="main-nav" className={navigationClasses.join(' ')} role="navigation">
@@ -82,36 +82,36 @@ const Page = ({ children, section, className, pageTitle, pageTitleDate, PageTitl
             <div className="navbar-collapse collapse" id="navbar-collapse">
               <ul className="nav navbar-nav">
                 <li className="nav-item sr-only">
-                  <a className="nav-link scrollto" href="/#promo">
+                  <a className="nav-link scrollto" href={withPrefix("/#promo")}>
                     Home
                   </a>
                 </li>
                 <li className="nav-item">
-                  <Link className="nav-link" to="/documentation" activeClassName="active" partiallyActive>
+                  <Link className="nav-link" to={withPrefix("/documentation")} activeClassName="active" partiallyActive>
                     API
                   </Link>
                 </li>
                 <li className="nav-item">
-                  <Link className="nav-link" to="/use-cases" activeClassName="active">
+                  <Link className="nav-link" to={withPrefix("/use-cases")} activeClassName="active">
                     Use Cases
                   </Link>
                 </li>
                 <li className="nav-item">
-                  <Link className="nav-link" to="/blog" activeClassName="active" partiallyActive>
+                  <Link className="nav-link" to={withPrefix("/blog")} activeClassName="active" partiallyActive>
                     Blog
                   </Link>
                 </li>
                 <li className="nav-item">
-                  <Link className="nav-link" to="/tutorials" activeClassName="active" partiallyActive>
+                  <Link className="nav-link" to={withPrefix("/tutorials")} activeClassName="active" partiallyActive>
                     Tutorials
                   </Link>
                 </li>                <li className="nav-item">
-                  <Link className="nav-link" to="/contribute" activeClassName="active" partiallyActive>
+                                       <Link className="nav-link" to={withPrefix("/contribute")} activeClassName="active" partiallyActive>
                     Contribute
                   </Link>
                 </li>
                 <li className="nav-item">
-                  <Link className="nav-link" to="/ecosystem" activeClassName="active" partiallyActive>
+                  <Link className="nav-link" to={withPrefix("/ecosystem")} activeClassName="active" partiallyActive>
                     Ecosystem
                   </Link>
                 </li>

diff --git a/src/component/blog/article.js b/src/component/blog/article.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Layout from '../Layout';
 import ReactMarkdown from 'react-markdown';
-import { Link } from 'gatsby';
+import { Link, withPrefix } from 'gatsby';
 
 const Page = ({ pageContext: { title, author, tags: tagsRaw, date: dateRaw, category, body } }) => {
   const date = new Date(dateRaw);
@@ -15,10 +15,10 @@ const Page = ({ pageContext: { title, author, tags: tagsRaw, date: dateRaw, cate
           <ReactMarkdown children={body} />
 
           <div className="article--content--footer">
-            <Link className="article--content--footer-author" to="/blog" state={{ filter: { type: 'author', value: author }}}>{author}</Link>
-            <p>Category: <Link to="/blog" state={{ filter: { type: 'category', value: category }}}>{category}</Link></p>
+            <Link className="article--content--footer-author" to={withPrefix("/blog")} state={{ filter: { type: 'author', value: author }}}>{author}</Link>
+            <p>Category: <Link to={withPrefix("/blog")} state={{ filter: { type: 'category', value: category }}}>{category}</Link></p>
             {tags && tags.length && (
-              <p className="tags">Tags: {tags.map(item => <Link key={item} to="/blog" state={{ filter: { type: 'tag', value: item }}}>{item}</Link>)}</p>
+              <p className="tags">Tags: {tags.map(item => <Link key={item} to={withPrefix("/blog")} state={{ filter: { type: 'tag', value: item }}}>{item}</Link>)}</p>
             )}
           </div>
         </div>

diff --git a/src/component/blog/index.js b/src/component/blog/index.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import Layout from '../Layout';
-import { Link } from 'gatsby';
+import { Link, withPrefix } from 'gatsby';
 
 const sortArticles = a => a.sort((a, b) => {
   const dateA = new Date(a.date);
@@ -11,8 +11,8 @@ const sortArticles = a => a.sort((a, b) => {
 });
 
 const Page = ({ location, pageContext: { articles: articlesRaw  } }) => {
-  const [ filter, setFilter ] = useState((location.state && location.state.filter) || {}); 
-  const [ articles, setArticles ] = useState(articlesRaw); 
+  const [ filter, setFilter ] = useState((location.state && location.state.filter) || {});
+  const [ articles, setArticles ] = useState(articlesRaw);
 
   // sort articles
   sortArticles(articles);
@@ -49,22 +49,21 @@ const Page = ({ location, pageContext: { articles: articlesRaw  } }) => {
             const date = new Date(dateRaw);
             const formattedDate = `${date.getDate()} ${date.toLocaleString('default', { month: 'long' })} ${date.getFullYear()}`;
             const tags = tagsRaw && tagsRaw.split(',');
- 
+
             return <div key={slug} className="item">
-              <Link to={`/blog/${slug}`} className="title">{title}</Link>
+              <Link to={withPrefix(`/blog/${slug}`)} className="title">{title}</Link>
               <div className="summary">{summary}...</div>
               <div className="head">
                 Posted on {formattedDate}  {" "}
-                in <Link className="hilite" to="/blog" state={{ filter: { type: 'category', value: category }}}>{category}</Link> {" "}
-                by <Link className="hilite" to="/blog" state={{ filter: { type: 'author', value: author }}}>{author}</Link>  {" "}
+                in <Link className="hilite" to={withPrefix("/blog")} state={{ filter: { type: 'category', value: category }}}>{category}</Link> {" "}
+                by <Link className="hilite" to={withPrefix("/blog")} state={{ filter: { type: 'author', value: author }}}>{author}</Link>  {" "}
                 {tags && tags.length &&
-                  <span className="tags"> * Tagged with {tags.map(item => <Link key={item} className="hilite" to="/blog" state={{ filter: { type: 'tag', value: item }}}>{item}</Link>)}</span>}
-              </div> 
-            </div>; 
+                 <span className="tags"> * Tagged with {tags.map(item => <Link key={item} className="hilite" to={withPrefix("/blog")} state={{ filter: { type: 'tag', value: item }}}>{item}</Link>)}</span>}
+              </div>
+            </div>;
           })}
         </div>
       </div>
-
     </Layout>
   );
 }

diff --git a/src/component/provisioning/phone.js b/src/component/provisioning/phone.js
@@ -3,6 +3,8 @@ import React  from 'react';
 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';
@@ -15,14 +17,14 @@ const Page = ({ pageContext: { name, vendor, phone, vendor_images } }) => {
   ];
 
   return (
-    <Layout pageTitle={`<a href="${vendorsUrl}">Provd Plugins</a> &gt; <a href="/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">
             <div className="col-card col col-3">
               <div className="card">
                 <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}`} />}
+                  {vendor_images && vendor_images.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>
             </div>

diff --git a/src/component/uc-doc/TableOfContents.js b/src/component/uc-doc/TableOfContents.js
@@ -126,7 +126,7 @@ const Page = () => {
   const renderLinks = () => {
     return (
       <ul>
-        <li><Link to="/uc-doc/">Wazo Documentation</Link></li>
+        <li><Link to={withPrefix("/uc-doc/")}>Wazo Documentation</Link></li>
         { renderLinksRecurse(links['introduction']) }
         { renderLinksRecurse(links['installation']) }
         { renderLinksRecurse(links['upgrade']) }