From c55ae026f1f0b7f523a4ff615fd226dae9914b3e Mon Sep 17 00:00:00 2001
From: Dmytro Svystun <dmytro.svystun@dreamworks.com>
Date: Mon, 22 Jul 2024 19:59:06 +0300
Subject: [PATCH 1/2] Fix link base prefix

Signed-off-by: matthewlow-dwa <72585572+matthewlow-dwa@users.noreply.github.com>
---
 docs/src/pages/main.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/main.md b/docs/src/pages/main.md
index d3325643..78af00bd 100644
--- a/docs/src/pages/main.md
+++ b/docs/src/pages/main.md
@@ -20,8 +20,8 @@ For quick preview and inspection, [`USDView`](https://graphics.pixar.com/usd/doc
 
 # Documentation
 
-- [Documentation](ALab/main/documentation) - File structure layout and asset documentation.
-- [AL-specific content](/alSpecific) - Animal Logic specific concepts, which we love, but had to remove from ALab to ensure ease of use and compatibility.
+- [Documentation](ALab/documentation) - File structure layout and asset documentation.
+- [AL-specific content](ALab/alSpecific) - Animal Logic specific concepts, which we love, but had to remove from ALab to ensure ease of use and compatibility.
 - [Changelog](ALab/changelog) - List of all the updates from the latest versions of ALab.
 
 # About ALab

From 489555ca4ec041067ce288432671de758e92b38c Mon Sep 17 00:00:00 2001
From: Dmytro Svystun <dmytro.svystun@dreamworks.com>
Date: Fri, 19 Jul 2024 19:01:02 +0300
Subject: [PATCH 2/2] feat: [WTT-631] fix anchor links

Signed-off-by: Dmytro Svystun <dmytro.svystun@dreamworks.com>
---
 docs/src/components/GlobalStyles.astro | 218 ++++++++++++++++++++++++
 docs/src/layouts/AlSpecific.astro      |  17 ++
 docs/src/layouts/BaseLayout.astro      | 223 +------------------------
 docs/src/layouts/Changelog.astro       |  17 ++
 docs/src/layouts/Documentation.astro   |  17 ++
 docs/src/pages/alSpecific.md           |   6 +-
 docs/src/pages/changelog.md            |   2 +-
 docs/src/pages/documentation.md        |   4 +-
 8 files changed, 280 insertions(+), 224 deletions(-)
 create mode 100644 docs/src/components/GlobalStyles.astro
 create mode 100644 docs/src/layouts/AlSpecific.astro
 create mode 100644 docs/src/layouts/Changelog.astro
 create mode 100644 docs/src/layouts/Documentation.astro

diff --git a/docs/src/components/GlobalStyles.astro b/docs/src/components/GlobalStyles.astro
new file mode 100644
index 00000000..f5e7ffda
--- /dev/null
+++ b/docs/src/components/GlobalStyles.astro
@@ -0,0 +1,218 @@
+<style is:global>
+  :root {
+    --table-border-color: rgb(104, 104, 104);
+    --table-border-separator-color: #666;
+    --table-head-back-color: rgb(210 210 210);
+    --table-head-fore-color: #111;
+    --table-body-back-color: #f8f8f8;
+    --table-body-fore-color: #111;
+    --table-body-alt-back-color: #eee;
+    --fore-color: rgb(216, 216, 216);
+    --secondary-fore-color: rgb(161, 161, 161);
+    --back-color: #000000;
+    --secondary-back-color: #363636;
+    --blockquote-color: #f57c00;
+    --pre-color: #ecc100;
+    --border-color: rgb(104, 104, 104);
+    --secondary-border-color: rgb(92, 92, 92);
+    --heading-ratio: 1.19;
+    --universal-margin: 0.5rem;
+    --universal-padding: 0.5rem;
+    --universal-border-radius: 0.125rem;
+    --a-link-color: #ecc100;
+    --a-visited-color: #ecc100;
+    --table-body-hover-back-color: #f9e090;
+  }
+
+  #toc,
+  #documentation-1,
+  #changelog-1,
+  #animal-logic-1 {
+    display: none;
+  }
+
+  pre {
+    font-family: monospace;
+    white-space: pre;
+  }
+
+  pre {
+    overflow: auto;
+    background: var(--secondary-back-color);
+    padding: calc(1.5 * var(--universal-padding));
+    border-left: 0.25rem solid var(--pre-color);
+    border-radius: 0 var(--universal-border-radius)
+      var(--universal-border-radius) 0;
+  }
+
+  table {
+    border-collapse: separate;
+    border-spacing: 0;
+    margin: 0;
+    width: 100%;
+    padding: var(--universal-padding);
+    padding-top: 0;
+  }
+
+  table th {
+    text-align: left;
+    background: var(--table-head-back-color);
+    color: var(--table-head-fore-color);
+    padding: calc(2 * var(--universal-padding));
+  }
+
+  table tbody {
+    border-top: 0;
+    margin-top: calc(0 - var(--universal-margin));
+    border-radius: 0 0 var(--universal-border-radius)
+      var(--universal-border-radius);
+  }
+
+  table td {
+    padding: calc(var(--universal-padding));
+  }
+
+  body {
+    color: var(--fore-color);
+    background: var(--back-color);
+    max-width: 1080px;
+    margin: 0 auto !important;
+    float: none !important;
+    display: block;
+  }
+
+  p {
+    display: block;
+    margin: var(--universal-margin);
+    margin-block-start: 0.6em;
+    margin-block-end: 0.6em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+  }
+
+  html,
+  * {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,
+      "Helvetica Neue", Helvetica, sans-serif;
+    line-height: 1.5;
+    font-size: 1rem;
+  }
+
+  sup,
+  sub,
+  code,
+  kbd {
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  code {
+    border-radius: var(--universal-border-radius);
+    background: var(--secondary-back-color);
+    padding: calc(var(--universal-padding) / 4)
+      calc(var(--universal-padding) / 2);
+  }
+
+  code:has(.line) {
+    background-color: transparent;
+  }
+
+  code,
+  kbd,
+  pre,
+  samp {
+    font-family: Menlo, Consolas, monospace;
+    font-size: 0.85em;
+  }
+
+  li {
+    display: list-item;
+    text-align: -webkit-match-parent;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  a:visited {
+    color: var(--a-visited-color);
+  }
+  a:link {
+    color: var(--a-link-color);
+  }
+  a {
+    text-decoration: none;
+  }
+  a,
+  b,
+  del,
+  em,
+  i,
+  ins,
+  q,
+  span,
+  strong,
+  u {
+    font-size: 1em;
+  }
+
+  h1 {
+    color: #fff;
+    display: block;
+    font-size: 1.5em;
+    margin-block-start: 2em;
+    margin-block-end: 0.4em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bolder;
+  }
+
+  h2 {
+    color: #fff;
+    display: block;
+    font-size: 1.5em;
+    margin-block-start: 2em;
+    margin-block-end: 0.4em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: lighter;
+  }
+
+  h3 {
+    color: #fff;
+    display: block;
+    font-size: 1.3em;
+    margin-block-start: 1.5em;
+    margin-block-end: 0.4em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: lighter;
+  }
+
+  h4 {
+    color: #fff;
+    display: block;
+    font-size: 1.1em;
+    margin-block-start: 1.3em;
+    margin-block-end: 0.3em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: lighter;
+  }
+
+  h5 {
+    color: #fff;
+    display: block;
+    font-size: 1em;
+    margin-block-start: 1.1em;
+    margin-block-end: 0.2em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: lighter;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+</style>
diff --git a/docs/src/layouts/AlSpecific.astro b/docs/src/layouts/AlSpecific.astro
new file mode 100644
index 00000000..87262b5e
--- /dev/null
+++ b/docs/src/layouts/AlSpecific.astro
@@ -0,0 +1,17 @@
+---
+import "../components/GlobalStyles.astro";
+---
+
+<html lang="en">
+  <head>
+    <base href={`${import.meta.env.BASE_URL}/alSpecific`} />
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+  </head>
+
+  <body>
+    <slot />
+  </body>
+</html>
diff --git a/docs/src/layouts/BaseLayout.astro b/docs/src/layouts/BaseLayout.astro
index cb5387e0..276eb8b9 100644
--- a/docs/src/layouts/BaseLayout.astro
+++ b/docs/src/layouts/BaseLayout.astro
@@ -1,3 +1,7 @@
+---
+import "../components/GlobalStyles.astro";
+---
+
 <html lang="en">
   <head>
     <base href={import.meta.env.BASE_URL} />
@@ -6,225 +10,8 @@
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
   </head>
+
   <body>
     <slot />
   </body>
-  <style is:global>
-    :root {
-      --table-border-color: rgb(104, 104, 104);
-      --table-border-separator-color: #666;
-      --table-head-back-color: rgb(210 210 210);
-      --table-head-fore-color: #111;
-      --table-body-back-color: #f8f8f8;
-      --table-body-fore-color: #111;
-      --table-body-alt-back-color: #eee;
-      --fore-color: rgb(216, 216, 216);
-      --secondary-fore-color: rgb(161, 161, 161);
-      --back-color: #000000;
-      --secondary-back-color: #363636;
-      --blockquote-color: #f57c00;
-      --pre-color: #ecc100;
-      --border-color: rgb(104, 104, 104);
-      --secondary-border-color: rgb(92, 92, 92);
-      --heading-ratio: 1.19;
-      --universal-margin: 0.5rem;
-      --universal-padding: 0.5rem;
-      --universal-border-radius: 0.125rem;
-      --a-link-color: #ecc100;
-      --a-visited-color: #ecc100;
-      --table-body-hover-back-color: #f9e090;
-    }
-
-    #toc,
-    #documentation-1,
-    #changelog-1,
-    #animal-logic-1 {
-      display: none;
-    }
-
-    pre {
-      font-family: monospace;
-      white-space: pre;
-    }
-
-    pre {
-      overflow: auto;
-      background: var(--secondary-back-color);
-      padding: calc(1.5 * var(--universal-padding));
-      border-left: 0.25rem solid var(--pre-color);
-      border-radius: 0 var(--universal-border-radius)
-        var(--universal-border-radius) 0;
-    }
-
-    table {
-      border-collapse: separate;
-      border-spacing: 0;
-      margin: 0;
-      width: 100%;
-      padding: var(--universal-padding);
-      padding-top: 0;
-    }
-
-    table th {
-      text-align: left;
-      background: var(--table-head-back-color);
-      color: var(--table-head-fore-color);
-      padding: calc(2 * var(--universal-padding));
-    }
-
-    table tbody {
-      border-top: 0;
-      margin-top: calc(0 - var(--universal-margin));
-      border-radius: 0 0 var(--universal-border-radius)
-        var(--universal-border-radius);
-    }
-
-    table td {
-      padding: calc(var(--universal-padding));
-    }
-
-    body {
-      color: var(--fore-color);
-      background: var(--back-color);
-      max-width: 1080px;
-      margin: 0 auto !important;
-      float: none !important;
-      display: block;
-    }
-
-    p {
-      display: block;
-      margin: var(--universal-margin);
-      margin-block-start: 0.6em;
-      margin-block-end: 0.6em;
-      margin-inline-start: 0px;
-      margin-inline-end: 0px;
-    }
-
-    html,
-    * {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,
-        "Helvetica Neue", Helvetica, sans-serif;
-      line-height: 1.5;
-      font-size: 1rem;
-    }
-
-    sup,
-    sub,
-    code,
-    kbd {
-      line-height: 0;
-      position: relative;
-      vertical-align: baseline;
-    }
-    code {
-      border-radius: var(--universal-border-radius);
-      background: var(--secondary-back-color);
-      padding: calc(var(--universal-padding) / 4)
-        calc(var(--universal-padding) / 2);
-    }
-
-    code:has(.line) {
-      background-color: transparent;
-    }
-
-    code,
-    kbd,
-    pre,
-    samp {
-      font-family: Menlo, Consolas, monospace;
-      font-size: 0.85em;
-    }
-
-    li {
-      display: list-item;
-      text-align: -webkit-match-parent;
-    }
-
-    ul {
-      list-style-type: disc;
-    }
-
-    a:visited {
-      color: var(--a-visited-color);
-    }
-    a:link {
-      color: var(--a-link-color);
-    }
-    a {
-      text-decoration: none;
-    }
-    a,
-    b,
-    del,
-    em,
-    i,
-    ins,
-    q,
-    span,
-    strong,
-    u {
-      font-size: 1em;
-    }
-
-    h1 {
-      color: #fff;
-      display: block;
-      font-size: 1.5em;
-      margin-block-start: 2em;
-      margin-block-end: 0.4em;
-      margin-inline-start: 0px;
-      margin-inline-end: 0px;
-      font-weight: bolder;
-    }
-
-    h2 {
-      color: #fff;
-      display: block;
-      font-size: 1.5em;
-      margin-block-start: 2em;
-      margin-block-end: 0.4em;
-      margin-inline-start: 0px;
-      margin-inline-end: 0px;
-      font-weight: lighter;
-    }
-
-    h3 {
-      color: #fff;
-      display: block;
-      font-size: 1.3em;
-      margin-block-start: 1.5em;
-      margin-block-end: 0.4em;
-      margin-inline-start: 0px;
-      margin-inline-end: 0px;
-      font-weight: lighter;
-    }
-
-    h4 {
-      color: #fff;
-      display: block;
-      font-size: 1.1em;
-      margin-block-start: 1.3em;
-      margin-block-end: 0.3em;
-      margin-inline-start: 0px;
-      margin-inline-end: 0px;
-      font-weight: lighter;
-    }
-
-    h5 {
-      color: #fff;
-      display: block;
-      font-size: 1em;
-      margin-block-start: 1.1em;
-      margin-block-end: 0.2em;
-      margin-inline-start: 0px;
-      margin-inline-end: 0px;
-      font-weight: lighter;
-    }
-
-    img {
-      max-width: 100%;
-      height: auto;
-    }
-  </style>
 </html>
diff --git a/docs/src/layouts/Changelog.astro b/docs/src/layouts/Changelog.astro
new file mode 100644
index 00000000..d7fe34f7
--- /dev/null
+++ b/docs/src/layouts/Changelog.astro
@@ -0,0 +1,17 @@
+---
+import "../components/GlobalStyles.astro";
+---
+
+<html lang="en">
+  <head>
+    <base href={`${import.meta.env.BASE_URL}/changelog`} />
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+  </head>
+
+  <body>
+    <slot />
+  </body>
+</html>
diff --git a/docs/src/layouts/Documentation.astro b/docs/src/layouts/Documentation.astro
new file mode 100644
index 00000000..dd662f30
--- /dev/null
+++ b/docs/src/layouts/Documentation.astro
@@ -0,0 +1,17 @@
+---
+import "../components/GlobalStyles.astro";
+---
+
+<html lang="en">
+  <head>
+    <base href={`${import.meta.env.BASE_URL}/documentation`} />
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+  </head>
+
+  <body>
+    <slot />
+  </body>
+</html>
diff --git a/docs/src/pages/alSpecific.md b/docs/src/pages/alSpecific.md
index 5be0247e..efa8953a 100644
--- a/docs/src/pages/alSpecific.md
+++ b/docs/src/pages/alSpecific.md
@@ -1,5 +1,5 @@
 ---
-layout: ../layouts/BaseLayout.astro
+layout: ../layouts/AlSpecific.astro
 ---
 
 # Animal Logic
@@ -241,7 +241,7 @@ In the example below, you can see how the **weave** procedural is configured to
 
 > Note: We will replace the "relative path" string attribute with USD relationships soon.
 
-[weave.usda](../../public/weave.usda)
+[weave.usda](./public/weave.usda)
 
 ```python
 def "weave_gauze" (
@@ -303,7 +303,7 @@ With regards to material composition, we currently leverage referencing in two w
 - To `reference` materials from a centralised "material library" into "look bindings."
 - To `reference` "subgraphs" (node graphs) of shaders into materials. Our "triplanar projection" setup is an example of this.
 
-[look_binding.usda](../../public/look_binding.usda)
+[look_binding.usda](./public/look_binding.usda)
 
 ```c++
     over "GEO"
diff --git a/docs/src/pages/changelog.md b/docs/src/pages/changelog.md
index 91f73edb..be7b705b 100644
--- a/docs/src/pages/changelog.md
+++ b/docs/src/pages/changelog.md
@@ -1,5 +1,5 @@
 ---
-layout: ../layouts/BaseLayout.astro
+layout: ../layouts/Changelog.astro
 ---
 
 # Changelog
diff --git a/docs/src/pages/documentation.md b/docs/src/pages/documentation.md
index d54e759a..b894ebf4 100644
--- a/docs/src/pages/documentation.md
+++ b/docs/src/pages/documentation.md
@@ -1,5 +1,5 @@
 ---
-layout: ../layouts/BaseLayout.astro
+layout: ../layouts/Documentation.astro
 ---
 
 # Documentation
@@ -451,7 +451,7 @@ When crowd departments use this as an agent, they choose the `skeleton=on` varia
 
 `Primvars` are a special attribute that a renderer can associate with a geometric `primitive`. They can vary across the `primitive` they are defined on through various interpolation rules, defined in the [documentation](https://graphics.pixar.com/usd/dev/api/class_usd_geom_primvar.html).
 
-For example, **vertex** defines the value to be interpolated across the vertices on the surface. `Primvars` can also be passed onto children of USD `primitives`. This makes them very flexible, which makes them effective as custom attributes for renderers (such as Animal Logic's Glimpse) to read. You can read more about this in the [AL-Specific documentation](al_specific.html).
+For example, **vertex** defines the value to be interpolated across the vertices on the surface. `Primvars` can also be passed onto children of USD `primitives`. This makes them very flexible, which makes them effective as custom attributes for renderers (such as Animal Logic's Glimpse) to read. You can read more about this in the [AL-Specific documentation](alSpecific).
 
 As seen in the USD snippet above, the `SkelBindingAPI` uses its **skel** `primvars` to allow joint weights and joint indices to vary across the same primitive with vertex interpolation.