fix web imgs (#10)

Author: luccabb

website/docs/GCM_GPU_Metrics/getting_started.md

@@ -14,11 +14,11 @@ This processor is particularly useful in high-performance computing environments
 
 We've found at Meta that this processor is mostly useful for Metrics data.
 
-<img src="/img/gcm_gpu_metrics.jpg" style={{ maxHeight: '200px', display: 'block', margin: '0 auto' }} />
+<img src="/gcm/img/gcm_gpu_metrics.jpg" style={{ maxHeight: '200px', display: 'block', margin: '0 auto' }} />
 
 Metric exporting from a DCGM sample perspective:
 
-<img src="/img/gcm_metrics_flow.png" style={{ maxHeight: '800px', display: 'block', margin: '0 auto' }} />
+<img src="/gcm/img/gcm_metrics_flow.png" style={{ maxHeight: '800px', display: 'block', margin: '0 auto' }} />
 
 ## Getting Started
 

website/docs/GCM_Health_Checks/getting_started.md

@@ -6,7 +6,7 @@ sidebar_position: 1
 
 GCM Health Checks is a Python CLI with a suite of [Health Checks](./getting_started#available-health-checks)
 
-<img src="/img/gcm_health_checks.png" style={{ maxHeight: '300px', display: 'block', margin: '0 auto' }} />
+<img src="/gcm/img/gcm_health_checks.png" style={{ maxHeight: '300px', display: 'block', margin: '0 auto' }} />
 
 ## Quick Start Guide
 

website/docs/GCM_Monitoring/getting_started.md

@@ -8,11 +8,11 @@ GCM Monitoring is a Python CLI with a series of [collectors](./getting_started#g
 
 For a cluster-level view of GCM Monitoring:
 
-<img src="/img/gcm_monitoring.png" style={{ maxHeight: '400px', display: 'block', margin: '0 auto' }} />
+<img src="/gcm/img/gcm_monitoring.png" style={{ maxHeight: '400px', display: 'block', margin: '0 auto' }} />
 
 On a Kubernetes environment:
 
-<img src="/img/gcm_monitoring_kube.png" style={{ maxHeight: '400px', display: 'block', margin: '0 auto' }} />
+<img src="/gcm/img/gcm_monitoring_kube.png" style={{ maxHeight: '400px', display: 'block', margin: '0 auto' }} />
 
 ## Quick Start Guide
 

website/docs/getting_started.md

@@ -14,7 +14,7 @@ GCM is a monorepo with the following components:
 - [GCM Health Checks](./GCM_Health_Checks/getting_started): Verifies the proper functioning of hardware, software, network, storage, and services throughout the job lifecycle.
 - [GCM GPU Metrics](./GCM_GPU_Metrics/getting_started): Enhances OpenTelemetry data by correlating telemetry with Slurm metadata, enabling attribution of metrics (e.g., GPU utilization) to specific jobs and users.
 
-<img src="/img/gcm_high_level.png" style={{ maxHeight: '400px', display: 'block', margin: '0 auto' }} />
+<img src="/gcm/img/gcm_high_level.png" style={{ maxHeight: '400px', display: 'block', margin: '0 auto' }} />
 
 Each component has their own Getting Started and Contributing Guide:
 

website/docusaurus.config.js

@@ -12,14 +12,14 @@ import {themes as prismThemes} from 'prism-react-renderer';
 const config = {
   title: 'Meta GPU Cluster Monitoring (GCM)',
   tagline: 'GCM: Large-Scale AI Research Cluster Monitoring.',
-  // favicon: 'img/gcm_white.svg',
+  // favicon: '/img/gcm_white.svg',
 
   headTags: [
     {
       tagName: "link",
       attributes: {
         rel: "icon",
-        href: "img/gcm_black.svg",
+        href: "/img/gcm_black.svg",
         type: "image/svg+xml",
         sizes: "32x32",
         media: "(prefers-color-scheme: light)",
@@ -29,7 +29,7 @@ const config = {
       tagName: "link",
       attributes: {
         rel: "icon",
-        href: "img/gcm_white.svg",
+        href: "/img/gcm_white.svg",
         type: "image/svg+xml",
         sizes: "32x32",
         media: "(prefers-color-scheme: dark)",
@@ -46,7 +46,7 @@ const config = {
   url: 'https://facebookresearch.github.io/',
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: '/gcm',
+  baseUrl: '/gcm/',
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
@@ -94,8 +94,8 @@ const config = {
         title: 'GCM',
         logo: {
           alt: 'GCM Logo',
-          src: 'img/gcm_black.svg',
-          srcDark: 'img/gcm_white.svg',
+          src: '/img/gcm_black.svg',
+          srcDark: '/img/gcm_white.svg',
         },
         items: [
           {

website/src/pages/index.js

@@ -16,8 +16,8 @@ function HomepageHeader() {
         <ThemedImage
           alt="GCM Logo"
           sources={{
-            light: 'img/gcm_long_white.svg',
-            dark: 'img/gcm_long_black.svg',
+            light: '/gcm/img/gcm_long_white.svg',
+            dark: '/gcm/img/gcm_long_black.svg',
           }}
           style={{maxWidth: '50%', minWidth: '250px'}}
         />