CoherentLabs · MartinBozhilov-coh · Apr 2, 2026 · Apr 3, 2026 · Apr 24, 2026 · Apr 27, 2026
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@astrojs/starlight": "0.37.6",
     "astro": "5.17.1",
-    "coherent-docs-theme": "^1.0.7",
+    "coherent-docs-theme": "^1.0.8",
     "gray-matter": "^4.0.3",
     "sharp": "^0.34.2",
     "starlight-auto-sidebar": "^0.1.4"

diff --git a/src/assets/phase-3/animations/animation-js-control-play-from-to.webm b/src/assets/phase-3/animations/animation-js-control-play-from-to.webm
diff --git a/src/assets/phase-3/animations/animation-js-control.webm b/src/assets/phase-3/animations/animation-js-control.webm
diff --git a/src/assets/phase-3/animations/complex-spritesheets-animation-1.webm b/src/assets/phase-3/animations/complex-spritesheets-animation-1.webm
diff --git a/src/assets/phase-3/animations/complex-spritesheets-animation-2.webm b/src/assets/phase-3/animations/complex-spritesheets-animation-2.webm
diff --git a/src/assets/phase-3/animations/complex-spritesheets-animation-3.webm b/src/assets/phase-3/animations/complex-spritesheets-animation-3.webm
diff --git a/src/assets/phase-3/animations/complex-spritesheets-animation-4.webm b/src/assets/phase-3/animations/complex-spritesheets-animation-4.webm
diff --git a/src/assets/phase-3/animations/complex-spritesheets-animation-5.webm b/src/assets/phase-3/animations/complex-spritesheets-animation-5.webm
diff --git a/src/assets/phase-3/animations/complex-spritesheets-animation-variants.webm b/src/assets/phase-3/animations/complex-spritesheets-animation-variants.webm
diff --git a/src/assets/phase-3/animations/complex-spritesheets-animation.webm b/src/assets/phase-3/animations/complex-spritesheets-animation.webm
diff --git a/src/assets/phase-3/animations/css-keyframes-entrance.webm b/src/assets/phase-3/animations/css-keyframes-entrance.webm
diff --git a/src/assets/phase-3/animations/css-keyframes-glow.webm b/src/assets/phase-3/animations/css-keyframes-glow.webm
diff --git a/src/assets/phase-3/animations/css-transitions-example.webm b/src/assets/phase-3/animations/css-transitions-example.webm
diff --git a/src/assets/phase-3/animations/fire-effect-strip.png b/src/assets/phase-3/animations/fire-effect-strip.png
diff --git a/src/assets/phase-3/animations/spiral-effect-strip.png b/src/assets/phase-3/animations/spiral-effect-strip.png
diff --git a/src/assets/phase-3/animations/spritesheet-flame-variants.webm b/src/assets/phase-3/animations/spritesheet-flame-variants.webm
diff --git a/src/assets/phase-3/animations/spritesheet-flame.webm b/src/assets/phase-3/animations/spritesheet-flame.webm
diff --git a/src/assets/phase-3/animations/starting-style-modal.webm b/src/assets/phase-3/animations/starting-style-modal.webm
diff --git a/src/assets/phase-3/animations/svg-animation-blink-glow.webm b/src/assets/phase-3/animations/svg-animation-blink-glow.webm
diff --git a/src/assets/phase-3/animations/svg-animation-locked-glow.webm b/src/assets/phase-3/animations/svg-animation-locked-glow.webm
diff --git a/src/assets/phase-3/animations/svg-animation-shimmer.webm b/src/assets/phase-3/animations/svg-animation-shimmer.webm
diff --git a/src/assets/phase-3/graphics-and-shapes/9-slice-example.webm b/src/assets/phase-3/graphics-and-shapes/9-slice-example.webm
diff --git a/src/assets/phase-3/graphics-and-shapes/border-image-generator.webm b/src/assets/phase-3/graphics-and-shapes/border-image-generator.webm
diff --git a/src/assets/phase-3/graphics-and-shapes/clip-path-radial-menu-disabled.png b/src/assets/phase-3/graphics-and-shapes/clip-path-radial-menu-disabled.png
diff --git a/src/assets/phase-3/graphics-and-shapes/clip-path-radial-menu.png b/src/assets/phase-3/graphics-and-shapes/clip-path-radial-menu.png
diff --git a/src/assets/phase-3/graphics-and-shapes/health-bar.png b/src/assets/phase-3/graphics-and-shapes/health-bar.png
diff --git a/src/assets/phase-3/graphics-and-shapes/hexagon-skill-node.png b/src/assets/phase-3/graphics-and-shapes/hexagon-skill-node.png
diff --git a/src/assets/phase-3/graphics-and-shapes/inline-svg-button-group.png b/src/assets/phase-3/graphics-and-shapes/inline-svg-button-group.png
diff --git a/src/assets/phase-3/graphics-and-shapes/mask-pattern-complete.png b/src/assets/phase-3/graphics-and-shapes/mask-pattern-complete.png
diff --git a/src/assets/phase-3/graphics-and-shapes/mask-pattern-tiled.png b/src/assets/phase-3/graphics-and-shapes/mask-pattern-tiled.png
diff --git a/src/assets/phase-3/graphics-and-shapes/mask-pattern.png b/src/assets/phase-3/graphics-and-shapes/mask-pattern.png
diff --git a/src/assets/phase-3/graphics-and-shapes/minimap-base.png b/src/assets/phase-3/graphics-and-shapes/minimap-base.png
diff --git a/src/assets/phase-3/graphics-and-shapes/minimap-fade.png b/src/assets/phase-3/graphics-and-shapes/minimap-fade.png
diff --git a/src/assets/phase-3/graphics-and-shapes/progress-bar.webm b/src/assets/phase-3/graphics-and-shapes/progress-bar.webm
diff --git a/src/assets/phase-3/graphics-and-shapes/progress-circle.webm b/src/assets/phase-3/graphics-and-shapes/progress-circle.webm
diff --git a/src/assets/phase-3/graphics-and-shapes/skill-tree-node.webm b/src/assets/phase-3/graphics-and-shapes/skill-tree-node.webm
diff --git a/src/assets/phase-3/graphics-and-shapes/svg-rarity-variations.webm b/src/assets/phase-3/graphics-and-shapes/svg-rarity-variations.webm
diff --git a/src/assets/phase-3/graphics-and-shapes/svg-stroke-dashing-progress.webm b/src/assets/phase-3/graphics-and-shapes/svg-stroke-dashing-progress.webm
diff --git a/src/assets/phase-3/graphics-and-shapes/viewbox-minimap-panning.webm b/src/assets/phase-3/graphics-and-shapes/viewbox-minimap-panning.webm
diff --git a/src/assets/phase-3/text-and-fonts/3d-text.png b/src/assets/phase-3/text-and-fonts/3d-text.png
diff --git a/src/assets/phase-3/text-and-fonts/emoji-example.png b/src/assets/phase-3/text-and-fonts/emoji-example.png
diff --git a/src/assets/phase-3/text-and-fonts/localization-fit-fixed-padding.png b/src/assets/phase-3/text-and-fonts/localization-fit-fixed-padding.png
diff --git a/src/assets/phase-3/text-and-fonts/localization-fit-fixed.png b/src/assets/phase-3/text-and-fonts/localization-fit-fixed.png
diff --git a/src/assets/phase-3/text-and-fonts/localization-fit-grow.png b/src/assets/phase-3/text-and-fonts/localization-fit-grow.png
diff --git a/src/assets/phase-3/text-and-fonts/localization-fit-max-size.png b/src/assets/phase-3/text-and-fonts/localization-fit-max-size.png
diff --git a/src/assets/phase-3/text-and-fonts/localization-fit.png b/src/assets/phase-3/text-and-fonts/localization-fit.png
diff --git a/src/assets/phase-3/text-and-fonts/neon-text.png b/src/assets/phase-3/text-and-fonts/neon-text.png
diff --git a/src/assets/phase-3/text-and-fonts/text-outline.png b/src/assets/phase-3/text-and-fonts/text-outline.png
diff --git a/src/assets/phase-3/text-and-fonts/vertical-align-correct.png b/src/assets/phase-3/text-and-fonts/vertical-align-correct.png
diff --git a/src/assets/phase-3/text-and-fonts/vertical-align-wrong.png b/src/assets/phase-3/text-and-fonts/vertical-align-wrong.png
diff --git a/src/content/docs/Polishing/accessibility.mdx b/src/content/docs/Polishing/accessibility.mdx
@@ -0,0 +1,6 @@
+---
+title: Accessibility
+description: Learn how to make your game UI accessible to all players using Gameface's built-in accessibility features. This section covers best practices for implementing screen reader support, keyboard navigation, and localization to ensure your UI is inclusive and reaches a wider audience.
+sidebar:
+    order: 1
+---
diff --git a/src/content/docs/phase-1-getting-started/introduction.mdx b/src/content/docs/phase-1-getting-started/introduction.mdx
@@ -31,9 +31,9 @@ Here's a brief overview of what we'll cover in each phase:
     Configuring your development environment, establishing your <Highlight>recommended tech stack</Highlight> (like SolidJS and Vite), and understanding how data flows between the game and the UI. 
 
     This phase covers <Highlight>core concepts</Highlight> like "push vs. fetch", how to organize your views, and bridging the gap between design and development 
-    using tools like the [Figma Exporter](https://www.figma.com/community/plugin/1595556380268929590/coherent-gameface-exporter). 
+    using tools like the <Link href="https://www.figma.com/community/plugin/1595556380268929590/coherent-gameface-exporter">Figma Exporter</Link>. 
 
-    We also bridge to prototyping by introducing [Gameface UI](https://gameface-ui.coherent-labs.com/)—our component library that makes prototyping fast and easy.
+    We also bridge to prototyping by introducing <Link href="https://gameface-ui.coherent-labs.com/">Gameface UI</Link>—our component library that makes prototyping fast and easy.
 
 3. #### **Phase 3: Layout, Assets & Styling**
     The fun part! We cover how to translate designs into clean, scalable game UIs. 
@@ -49,7 +49,7 @@ Here's a brief overview of what we'll cover in each phase:
 
     We cover how to <Highlight>mock real game data</Highlight> to test your UI independently, 
     manage local versus game state using <Highlight>data-binding</Highlight>, 
-    and handle complex user inputs like <Highlight>gamepad, touch support, and spatial navigation</Highlight> using the [Interaction Manager](https://frontend-tools.coherent-labs.com/interaction-manager/getting-started/).
+    and handle complex user inputs like <Highlight>gamepad, touch support, and spatial navigation</Highlight> using the <Link href="https://frontend-tools.coherent-labs.com/interaction-manager/getting-started/">Interaction Manager</Link>.
 
 5. #### **Phase 5: Polishing & Debugging**
     The final 10%. We cover how to polish your UI to make it feel smooth, accessible, bug-free, and most importantly, performant. 
@@ -66,7 +66,7 @@ To keep this guide lean and focused on UI creation, we have intentionally exclud
 * Deep dives into the Gameface API.
 * Instructions on how to compile or initialize the Gameface library within your game.
 
-*If you are a backend programmer looking for engine integration, please refer to the [official Gameface technical documentation](https://docs.coherent-labs.com/cpp-gameface/).*
+*If you are a backend programmer looking for engine integration, please refer to the <Link href="https://docs.coherent-labs.com/cpp-gameface/">official Gameface technical documentation</Link>.*
 
 ## Your Content Creation Reference
 
@@ -99,5 +99,5 @@ We will get our hands dirty with a quick demo showcasing how to run, test, and u
 
 ### Need more convincing?
 
-- Read more about what [Gameface is](https://docs.coherent-labs.com/cpp-gameface/what_is_gfp/overview/) - for a technical overview.
-- Check out the main differences between Gameface and a traditional browser environment in our [Differences to traditional browsers](https://docs.coherent-labs.com/cpp-gameface/what_is_gfp/htmlfeaturesupport/) documentation.
+- Read more about what <Link href="https://docs.coherent-labs.com/cpp-gameface/what_is_gfp/overview/">Gameface is</Link> - for a technical overview.
+- Check out the main differences between Gameface and a traditional browser environment in our <Link href="https://docs.coherent-labs.com/cpp-gameface/what_is_gfp/htmlfeaturesupport/">Differences to traditional browsers</Link> documentation.
diff --git a/src/content/docs/phase-2-planning-and-setup/Alternative Frameworks/_meta.yml b/src/content/docs/phase-2-planning-and-setup/Alternative Frameworks/_meta.yml
diff --git a/...content/docs/phase-2-planning-and-setup/Alternative Frameworks/preact-setup.mdx b/...content/docs/phase-2-planning-and-setup/Alternative Frameworks/preact-setup.mdx
diff --git a/src/content/docs/phase-2-planning-and-setup/Alternative Frameworks/react-setup.mdx b/src/content/docs/phase-2-planning-and-setup/Alternative Frameworks/react-setup.mdx
diff --git a/...content/docs/phase-2-planning-and-setup/Alternative Frameworks/svelte-setup.mdx b/...content/docs/phase-2-planning-and-setup/Alternative Frameworks/svelte-setup.mdx
diff --git a/src/content/docs/phase-2-planning-and-setup/Alternative Frameworks/vue-setup.mdx b/src/content/docs/phase-2-planning-and-setup/Alternative Frameworks/vue-setup.mdx
diff --git a/...2-planning-and-setup/Recommended Tech Stack/recommended-tech-stack-overview.mdx b/...2-planning-and-setup/Recommended Tech Stack/recommended-tech-stack-overview.mdx
@@ -42,7 +42,7 @@ If you are coming from traditional web development, SolidJS has a very similar s
 
 :::note[Alternative Frameworks]
 While Gameface does support other frameworks like React, Vue, and Preact, they rely on Virtual DOMs or heavier runtimes that can impact game performance. You can find setup guides for these in the 
-[Alternative Frameworks section]().
+[Alternative Frameworks section](/phase-2-planning-and-setup/alternative-frameworks/).
 :::
 
 ## The Bundler: Vite
@@ -67,7 +67,7 @@ We tackle this using a combination of <Link href="https://sass-lang.com/">SCSS</
 In general, strict BEM can result in longer class names, which might affect code readability in your HTML. You can opt for a more relaxed version of BEM that allows for shorter class names and clean nesting.
 
 For example, instead of writing `.dropdown__option--active`, you could write `.dropdown-option--active` or even `.dropdown-option-active`. 
-You can leverage scoped SolidJS [CSS Modules](https://docs.solidjs.com/guides/styling-components/css-modules) and SCSS's nesting capabilities to keep your styles scoped and organized while still compiling down to engine-friendly flat selectors.
+You can leverage scoped SolidJS <Link href="https://docs.solidjs.com/guides/styling-components/css-modules">CSS Modules</Link> and SCSS's nesting capabilities to keep your styles scoped and organized while still compiling down to engine-friendly flat selectors.
 
 ```scss
 .dropdown {

diff --git a/...e-2-planning-and-setup/Recommended Tech Stack/setting-up-the-gameface-stack.mdx b/...e-2-planning-and-setup/Recommended Tech Stack/setting-up-the-gameface-stack.mdx
@@ -69,7 +69,7 @@ cd my-game-ui
 npm install
 ```
 
-Once the installation is complete, you can see how to [preview the project in gameface](#connect-to-the-gameface-player) in the next section.
+Once the installation is complete, you can see how to preview the project in Gameface in the next section.
 
 ## Connect to the Gameface Player
 
@@ -84,7 +84,7 @@ Regardless of which option you chose above, the steps to start your local server
     npm run dev
     ```
 
-    This will start a local web server, usually at `http://localhost:3000`. 
+    This will start a local web server, usually at `http://localhost:3000/`. 
 
 2. #### Launch the Player
     Instead of viewing your UI in a standard web browser like Chrome, you should view it directly in the Gameface Player to ensure 100% engine accuracy. 
@@ -110,7 +110,7 @@ Regardless of which option you chose above, the steps to start your local server
 
     :::caution[Gameface UI URL]
     Gameface UI comes with 2 pre built in samples.
-    If you went with the Gameface UI template, make sure to change the url to `http://localhost:3000/menu` or `/hud` depending on which preset sample you wish to preview.
+    If you went with the Gameface UI template, make sure to change the url to `http://localhost:3000/menu/` or `http://localhost:3000/hud/` depending on which preset sample you wish to preview.
     Otherwise you will see a blank page.
     :::
 
@@ -120,8 +120,8 @@ Regardless of which option you chose above, the steps to start your local server
 
 Your local environment is now running smoothly inside the Gameface Player! Where you go next depends on which starter project you chose:
 
-* **If you chose Option B (The Blank Starter):** Move on to [Workflow Planning](../../workflow-planning).
-We will discuss setting up your IDE, version control, and how to translate your mindset from UMG/Unity to web & Gameface technologies.
-
 * **If you chose Option A (The Gameface UI Library):** Jump right into [Prototyping and Developing (Gameface UI)](../../prototyping-and-developing). 
-We will explore the Gameface UI's file structure and show you how to rapidly prototype a view using the pre-made components.
+We will explore the Gameface UI's file structure and show you how to rapidly prototype a view using the pre-made components.
+
+* **If you chose Option B (The Blank Starter):** Move on to [Workflow Planning](/phase-2-planning-and-setup/workflow-planning/workflow-planning/).
+We will discuss setting up your IDE, version control, and how to translate your mindset from UMG/Unity to web & Gameface technologies.
diff --git a/src/content/docs/phase-2-planning-and-setup/alternative-frameworks.mdx b/src/content/docs/phase-2-planning-and-setup/alternative-frameworks.mdx
@@ -0,0 +1,29 @@
+---
+title: Alternative Frameworks
+description: Learn about alternative frameworks that you can use to build your Gameface projects.
+sidebar:
-title: Alternative Frameworks
-description: Learn about alternative frameworks that you can use to build your Gameface projects.
-sidebar:
+title: Alternative Frameworks
+draft: true
+description: Learn about alternative frameworks that you can use to build your Gameface projects.
+sidebar:
-title: Alternative Frameworks
-description: Learn about alternative frameworks that you can use to build your Gameface projects.
-sidebar:
+title: Alternative Frameworks
+draft: true
+description: Learn about alternative frameworks that you can use to build your Gameface projects.
+sidebar:
+    order: 3
+---
+
+:::note[TO DO]
+Use tabs to distinguish between the different frameworks.
+
+Either:
+- write a single article and use tabs to distinguish between the different frameworks or
+- write a separate article for each framework and wrap it in a tab component.
+
+Frameworks to cover:
+- React,
+- Preact,
+- Vue,
+- Svelte
+:::
+
+## Topics 
+
+- Degit or install with CLI the vite react gameface template
+
+- Go over the structure and how to run and build the project
+
+- Cover some important caveats about the framework in Gameface
+
diff --git a/src/content/docs/phase-2-planning-and-setup/development-environment-and-tools.mdx b/src/content/docs/phase-2-planning-and-setup/development-environment-and-tools.mdx
@@ -9,6 +9,10 @@ draft: true
 import Summary from 'coherent-docs-theme/components/Summary.astro';
 import Highlight from 'coherent-docs-theme/components/Highlight.astro';
 
+:::note[TO DO]
+- Complete article whenever all the tools and the public player are live.
+:::
+
 <Summary>
     To set you up for success with Gameface, we provide a suite of specialized tools designed to streamline your workflow. 
 

diff --git a/src/content/docs/phase-2-planning-and-setup/prototyping-and-developing.mdx b/src/content/docs/phase-2-planning-and-setup/prototyping-and-developing.mdx
@@ -12,6 +12,10 @@ import { FileTree, Steps, Code } from '@astrojs/starlight/components';
 import menuPreviewVideo from '../../../assets/phase-2/prototyping-and-developing/gameface-ui-menu-preview.webm'
 import hmrPreview from '../../../assets/phase-2/prototyping-and-developing/HMR-preview.webm'
 
+:::note[TO DO]
+- add a valid link to the The Vite Gameface style transformer when it is live.
+:::
+
 <Summary>
     <Link href="https://gameface-ui.coherent-labs.com/">Gameface UI</Link> is an official boilerplate powered by <Highlight>Vite and SolidJS</Highlight>, pre-configured with a comprehensive library of game-ready components.
 
@@ -317,4 +321,4 @@ We have also integrated some of our own tools and libraries directly into the bo
 This is just scratching the surface of what Gameface UI can do. We will be exploring more of its features and capabilities in the upcoming articles, 
 including how to prototype quickly and create custom components.
 
-If you are ready to finalize your setup, move on to the [Workflow Planning](../workflow-planning/) article, where we will discuss version control and IDE configuration.
+If you are ready to finalize your setup, move on to the [Workflow Planning](/phase-2-planning-and-setup/workflow-planning/workflow-planning/) article, where we will discuss version control and IDE configuration.