[Docs] Fix 404 asset base path for previews

.github/workflows/build-and-preview-docs.yml

@@ -71,6 +71,7 @@ jobs:
       - name: Build PR preview
         if: github.event.action != 'closed'
         env:
+          BASE_URL: /pr-preview/pr-${{ github.event.pull_request.number }}/
           HUGO_PREVIEW: 'true'
         run: |
           npm run build:preview
@@ -145,7 +146,7 @@ jobs:
         with:
           header: pr-preview
           message: |
-            🚀 Preview deployment: https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/pr-preview/pr-${{ github.event.pull_request.number }}/
+            🚀 Preview deployment: https://docs.layer5.io/pr-preview/pr-${{ github.event.pull_request.number }}/
             > *Note: Preview may take a moment (GitHub Pages deployment in progress). Please wait and refresh. Track deployment [here](https://github.com/${{ github.repository }}/actions/workflows/pages/pages-build-deployment)*
 
       - name: Comment on pruned previews

Makefile

@@ -27,6 +27,9 @@ site: check-go
 build:
 	hugo
 
+docs-build-production:
+	npm run build:production
+
 ## Empty build cache and run docs.layer5.io on your local machine.
 clean: 
 	hugo --cleanDestinationDir
@@ -45,4 +48,4 @@ docker:
 
 ## Format code using Prettier
 format:
-	npm run format
+	npm run format

assets/js/offline-search.js

@@ -123,9 +123,10 @@
         } else {
           results.forEach((r) => {
             const doc = resultDetails.get(r.ref);
-            const href =
-              $searchInput.data('offline-search-base-href') +
-              r.ref.replace(/^\//, '');
+            const href = resolveSearchResultHref(
+              $targetSearchInput.data('offline-search-base-href'),
+              r.ref
+            );
 
             const $entry = $('<div>').addClass('mt-4');
 
@@ -165,6 +166,33 @@
         popover.show();
       };
 
+      const resolveSearchResultHref = (baseHref, ref) => {
+        if (!ref || typeof ref !== 'string') return ref;
+        if (/^(?:[a-z]+:)?\/\//i.test(ref)) return ref;
+        if (/^(?:data:|mailto:|tel:|#)/i.test(ref)) return ref;
+
+        const basePath = new URL(baseHref || '/', window.location.origin)
+          .pathname
+          .replace(/\/+$/, '/');
+
+        if (ref.startsWith('/')) {
+          const baseWithoutTrailingSlash = basePath.replace(/\/$/, '');
+
+          if (
+            basePath === '/' ||
+            ref === baseWithoutTrailingSlash ||
+            ref.startsWith(basePath)
+          ) {
+            return ref;
+          }
+
+          return `${basePath}${ref.replace(/^\//, '')}`;
+        }
+
+        const resolvedUrl = new URL(ref, new URL(basePath, window.location.origin));
+        return `${resolvedUrl.pathname}${resolvedUrl.search}${resolvedUrl.hash}`;
+      };
+
       //Bring focus to search bar
       $(document).on('keydown', function (event) {
         if (event.key === '/' && !(document.activeElement instanceof HTMLInputElement)) {

assets/scss/_fonts_project.scss

@@ -1,147 +1,147 @@
 @font-face {
     font-family: "Qanelas Soft Black";
-    src: url('/fonts/qanelas-soft/QanelasSoftBlack.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftBlack.otf") format('opentype');
     font-weight: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Black Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftBlackItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftBlackItalic.otf") format('opentype');
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Heavy";
-    src: url('/fonts/qanelas-soft/QanelasSoftHeavy.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftHeavy.otf") format('opentype');
     font-weight: 900;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Heavy Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftHeavyItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftHeavyItalic.otf") format('opentype');
     font-weight: 900;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft ExtraBold";
-    src: url('/fonts/qanelas-soft/QanelasSoftExtraBold.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftExtraBold.otf") format('opentype');
     font-weight: 800;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft ExtraBold Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftExtraBoldItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftExtraBoldItalic.otf") format('opentype');
     font-weight: 800;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Bold";
-    src: url('/fonts/qanelas-soft/QanelasSoftBold.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftBold.otf") format('opentype');
     font-weight: bold;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Bold Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftBoldItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftBoldItalic.otf") format('opentype');
     font-weight: bold;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft";
-    src: url('/fonts/qanelas-soft/QanelasSoftSemiBold.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftSemiBold.otf") format('opentype');
     font-weight: 600;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft SemiBold Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftSemiBoldItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftSemiBoldItalic.otf") format('opentype');
     font-weight: 600;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Medium";
-    src: url('/fonts/qanelas-soft/QanelasSoftMedium.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftMedium.otf") format('opentype');
     font-weight: 500;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Medium Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftMediumItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftMediumItalic.otf") format('opentype');
     font-weight: 500;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft";
-    src: url('/fonts/qanelas-soft/QanelasSoftRegular.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftRegular.otf") format('opentype');
     font-weight: 400;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Regular Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftRegularItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftRegularItalic.otf") format('opentype');
     font-weight: 400;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Light";
-    src: url('/fonts/qanelas-soft/QanelasSoftLight.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftLight.otf") format('opentype');
     font-weight: 300;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Light Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftLightItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftLightItalic.otf") format('opentype');
     font-weight: 300;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft UltraLight";
-    src: url('/fonts/qanelas-soft/QanelasSoftUltraLight.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftUltraLight.otf") format('opentype');
     font-weight: 200;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft UltraLight Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftUltraLightItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftUltraLightItalic.otf") format('opentype');
     font-weight: 200;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Thin";
-    src: url('/fonts/qanelas-soft/QanelasSoftThin.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftThin.otf") format('opentype');
     font-weight: 100;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Qanelas Soft Thin Italic";
-    src: url('/fonts/qanelas-soft/QanelasSoftThinItalic.otf') format('opentype');
+    src: url("../fonts/qanelas-soft/QanelasSoftThinItalic.otf") format('opentype');
     font-weight: 100;
     font-style: italic;
     font-display: swap;

assets/scss/_landing_project.scss

@@ -81,10 +81,10 @@
 } 
 .playground-section {
   &.playground-logo {
-    background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/logos/meshery-light-icon.svg");
+    background-image: url("../images/logos/black-semi-opaque.svg"), url("../images/logos/meshery-light-icon.svg");
   }
   &.video-play-logo {
-    background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/video-play.svg");
+    background-image: url("../images/logos/black-semi-opaque.svg"), url("../images/video-play.svg");
   }
     &.playground-logo, &.video-play-logo {
     background-repeat: no-repeat;
@@ -102,13 +102,13 @@
 
 .catalog-section {
   &.catalog-logo {
-    background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/logos/catalog.svg");
+    background-image: url("../images/logos/black-semi-opaque.svg"), url("../images/logos/catalog.svg");
   }
   &.academy-logo{
-    background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/logos/academy.svg");
+    background-image: url("../images/logos/black-semi-opaque.svg"), url("../images/logos/academy.svg");
   }
   &.recognition-program-logo{
-    background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/logos/recognition-program.png");
+    background-image: url("../images/logos/black-semi-opaque.svg"), url("../images/logos/recognition-program.png");
   }
   &.catalog-logo, &.academy-logo , &.recognition-program-logo {
     background-repeat: no-repeat;

content/en/_index.md

@@ -14,27 +14,31 @@ description: >
 </div>
 <div>
 <h1 style="margin:4.5rem auto 1.5rem auto">Explore tutorials & documentation</h1>
-<a class="btn btn-lg btn-primary me-3 mb-4 l5btn" href="/cloud" aria-label="Cloud Docs"
-onmouseover="changeImage('layer5', 'images/logos/layer5-light.svg')" onmouseout="restoreImage('layer5', 'images/logos/5-light-no-trim.svg')">
-    <img id="layer5" src="images/logos/5-light-no-trim.svg" alt="Layer5 Cloud Docs Logo" />
+<a class="btn btn-lg btn-primary me-3 mb-4 l5btn" href="{{< ref "cloud/_index.md" >}}" aria-label="Cloud Docs"
+data-hover='{{< static "images/logos/layer5-light.svg" >}}' data-default='{{< static "images/logos/5-light-no-trim.svg" >}}'
+onmouseover="changeImage('layer5', this.dataset.hover)" onmouseout="restoreImage('layer5', this.dataset.default)">
+    <img id="layer5" src='{{< static "images/logos/5-light-no-trim.svg" >}}' alt="Layer5 Cloud Docs Logo" />
     Cloud Docs
     <i class="fas fa-arrow-alt-circle-right ms-2"></i>
 </a>
-<a class="btn btn-lg btn-primary me-3 mb-4 l5btn" href="/kanvas" aria-label="Kanvas Docs"
-onmouseover="changeImage('Kanvas', 'images/logos/kanvas-light.svg')" onmouseout="restoreImage('Kanvas', 'images/logos/kanvas-icon-color.svg')">
-    <img id="Kanvas" src="images/logos/kanvas-icon-color.svg" alt="Layer5 Kanvas Docs Logo" />
+<a class="btn btn-lg btn-primary me-3 mb-4 l5btn" href="{{< ref "kanvas/_index.md" >}}" aria-label="Kanvas Docs"
+data-hover='{{< static "images/logos/kanvas-light.svg" >}}' data-default='{{< static "images/logos/kanvas-icon-color.svg" >}}'
+onmouseover="changeImage('Kanvas', this.dataset.hover)" onmouseout="restoreImage('Kanvas', this.dataset.default)">
+    <img id="Kanvas" src='{{< static "images/logos/kanvas-icon-color.svg" >}}' alt="Layer5 Kanvas Docs Logo" />
     Kanvas Docs
     <i class="fas fa-arrow-alt-circle-right ms-2"></i>
 </a>
 <a class="btn btn-lg btn-primary me-3 mb-4 l5btn" href="https://docs.meshery.io" aria-label="Meshery Docs"
-onmouseover="changeImage('meshery', 'images/logos/meshery-light.svg')" onmouseout="restoreImage('meshery', 'images/logos/meshery-light-icon.svg')">
-    <img id="meshery" src="images/logos/meshery-light-icon.svg" alt="Meshery Docs Logo" />
+data-hover='{{< static "images/logos/meshery-light.svg" >}}' data-default='{{< static "images/logos/meshery-light-icon.svg" >}}'
+onmouseover="changeImage('meshery', this.dataset.hover)" onmouseout="restoreImage('meshery', this.dataset.default)">
+    <img id="meshery" src='{{< static "images/logos/meshery-light-icon.svg" >}}' alt="Meshery Docs Logo" />
     Meshery Docs
     <i class="fas fa-arrow-alt-circle-right ms-2"></i>
 </a>
 <a class="btn btn-lg btn-primary me-3 mb-4 l5btn" href="https://getnighthawk.dev" aria-label="Nighthawk Docs"
-  onmouseover="changeImage('nighthawk', 'images/logos/nighthawk-light.svg')" onmouseout="restoreImage('nighthawk', 'images/logos/nighthawk-logo.svg')">
-    <img id="nighthawk" src="images/logos/nighthawk-logo.svg" alt="Layer5 Nighthawk Docs Logo" />
+data-hover='{{< static "images/logos/nighthawk-light.svg" >}}' data-default='{{< static "images/logos/nighthawk-logo.svg" >}}'
+onmouseover="changeImage('nighthawk', this.dataset.hover)" onmouseout="restoreImage('nighthawk', this.dataset.default)">
+    <img id="nighthawk" src='{{< static "images/logos/nighthawk-logo.svg" >}}' alt="Layer5 Nighthawk Docs Logo" />
     Nighthawk Docs
     <i class="fas fa-arrow-alt-circle-right ms-2"></i>
 </a>
@@ -48,7 +52,7 @@ onmouseover="changeImage('meshery', 'images/logos/meshery-light.svg')" onmouseou
 
   <!-- Video Library -->
   <div class="playground-card grow-1">
-    <a href="/videos">
+    <a href="{{< ref "videos/_index.md" >}}">
     <!-- Wave Visualizer Background
     <canvas id="visualizer" style="position:absolute; top:0; left:0; margin:auto;  width:300px; height:300px;"></canvas> -->
       <div class="landing-card">
@@ -121,7 +125,7 @@ onmouseover="changeImage('meshery', 'images/logos/meshery-light.svg')" onmouseou
               <p>Get help. Find your answer on the forum. Share your knowledge with others.</p>
           </div>
           <div class="forum-image">
-              <img src="images/landing/discuss.png" alt="Discussion Forum Image" />
+              <img src='images/landing/discuss.png' alt="Discussion Forum Image" />
           </div>
         </div>
       </a>
@@ -223,4 +227,4 @@ function restoreImage(imgId, originalSrc) {
       animate();
     }
   </script>
-  <!-- Wave Visualizer Script -->
+  <!-- Wave Visualizer Script -->

content/en/charts/_index.md

@@ -12,19 +12,19 @@ cascade:
 {{< alert type="info" title="Repository Only">}}
 This page only contains a brief synopsis of the Helm repository.
 
-See the [Self-Hosted section](/cloud/guides/self-hosted/) of the Layer5 Cloud documentation for deployment prerequisites, considerations, and instructions.
+See the [Self-Hosted section]({{< ref "cloud/guides/self-hosted/_index.md" >}}) of the Layer5 Cloud documentation for deployment prerequisites, considerations, and instructions.
 {{< /alert >}}
 
 ## Repository Contents
 
-Contained in the Layer5 Helm repository is the [Meshery Remote Provider](https://docs.meshery.io/extensibility/providers) charts (and it's subcharts) for Layer5 Cloud. See the repository's <a href="/charts/index.yaml">full index</a> of Layer5 Helm charts</a>.
+Contained in the Layer5 Helm repository is the [Meshery Remote Provider](https://docs.meshery.io/extensibility/providers) charts (and it's subcharts) for Layer5 Cloud. See the repository's [full index]({{< static "charts/index.yaml" >}}) of Layer5 Helm charts.
 
 ## Chart Source
 
 <p>The source for this chart is located in the <code>layer5io/meshery-cloud</code> repository under <code>install/kubernetes/</code>.</p>
 
 {{< alert type="info" title="Complete Deployment Instructions">}}
-Layer5 Cloud's Helm chart supports a number of [configuration options]({{<ref "/cloud/guides/self-hosted/deployment/helm-chart-values" >}})
+Layer5 Cloud's Helm chart supports a number of [configuration options]({{<ref "cloud/guides/self-hosted/deployment/helm-chart-values.md" >}})
 
-See the [Self-Hosted section](/cloud/guides/self-hosted/) of the Layer5 Cloud documentation for deployment prerequisites, considerations, and instructions.
+See the [Self-Hosted section]({{< ref "cloud/guides/self-hosted/_index.md" >}}) of the Layer5 Cloud documentation for deployment prerequisites, considerations, and instructions.
 {{< /alert >}}

content/en/cloud/_index.md

@@ -58,10 +58,10 @@ cascade:
 </div>
 </div>
 
-<a href="/kanvas">
+<a href="{{< ref "kanvas/_index.md" >}}">
   <div class="hidden-highlight-box">
     <div style="min-width:50px; align-self:center;">
-      <img src="/images/logos/kanvas-icon-color.svg" alt="kanvas logo" style="height:65px;width:65px;margin-left:-.45rem; border:0 ; background-color: transparent;" />
+      <img src='{{< static "images/logos/kanvas-icon-color.svg" >}}' alt="kanvas logo" style="height:65px;width:65px;margin-left:-.45rem; border:0 ; background-color: transparent;" />
     </div>
     <div style="margin:auto; padding-left:1rem; color:#ccc; line-height:1.85rem;">
       <strong>Kanvas</strong> delivers a collaborative experience similar to how Google Workplace transforms the digital work environment and how Figma democratizes UX design tooling. Kanvas simplifies the complexity of Kubernetes and multi-cloud infrastructure management accessible to all. Kanvas provides a visual, multi-player experience that allows you to create, configure, deploy, and manage modern infrastructure with confidence.
@@ -76,7 +76,7 @@ cascade:
 
 Layer5 Cloud is the centralized management console and identity provider for the Layer5 ecosystem — specifically for **Kanvas** and **Meshery** deployments. It provides an extensible, highly flexible authorization framework that enables organizations to govern complex, multi-cloud infrastructure with confidence. Think of it as the command center where your teams, workspaces, and cloud-native assets come together under a single, unified platform.
 
-Layer5 Cloud is available both as a fully managed service and as a [self-hosted](/cloud/guides/self-hosted/) deployment, giving organizations the flexibility to meet their own security and compliance requirements.
+Layer5 Cloud is available both as a fully managed service and as a [self-hosted]({{< ref "cloud/guides/self-hosted/_index.md" >}}) deployment, giving organizations the flexibility to meet their own security and compliance requirements.
 
 ## Why use Layer5 Cloud?