Add drafts for phase 3,4 and 5#7
Merged
Merged
Conversation
alien1976
approved these changes
Apr 20, 2026
| "@astrojs/starlight": "0.37.6", | ||
| "astro": "5.17.1", | ||
| "coherent-docs-theme": "^1.0.6", | ||
| "coherent-docs-theme": "file:coherent-docs-theme-1.0.7.tgz", |
There was a problem hiding this comment.
Do we need this to be from a local file? 1.0.7 is already available
Author
There was a problem hiding this comment.
No, we don't. I forgot to change it..
There was a problem hiding this comment.
Pull request overview
Adds draft documentation scaffolding for later phases of the UI workflow guide and aligns existing docs with the updated coherent-docs-theme component import paths.
Changes:
- Adds many new draft MDX pages (Phase 3/4/5) plus
_meta.ymlfiles to drive sidebar structure. - Updates multiple existing MDX pages to import
Summary/Highlight/Linkfromcoherent-docs-theme. - Updates
package.jsondependencies (theme bump + addsstarlight-auto-sidebar).
Reviewed changes
Copilot reviewed 75 out of 75 changed files in this pull request and generated 33 comments.
Show a summary per file
| File | Description |
|---|---|
| src/content/docs/phase-5-polishing/Localization & Accessibility/localization.mdx | Adds draft page outline for localization topic |
| src/content/docs/phase-5-polishing/Localization & Accessibility/accessibility.mdx | Adds draft page outline for accessibility topic |
| src/content/docs/phase-5-polishing/Localization & Accessibility/_meta.yml | Sidebar metadata for the section |
| src/content/docs/phase-5-polishing/Gameface Specific Features/live-views.mdx | Adds draft page outline for Live Views |
| src/content/docs/phase-5-polishing/Gameface Specific Features/compositor.mdx | Adds draft page outline for Compositor |
| src/content/docs/phase-5-polishing/Gameface Specific Features/advanced-visuals.mdx | Adds draft page outline for advanced visuals |
| src/content/docs/phase-5-polishing/Gameface Specific Features/_meta.yml | Sidebar metadata for the section |
| src/content/docs/phase-5-polishing/Debugging, Profiling & Testing/ui-testing.mdx | Adds draft page outline for UI testing |
| src/content/docs/phase-5-polishing/Debugging, Profiling & Testing/performance-and-memory-profiling.mdx | Adds draft page outline for perf/memory profiling |
| src/content/docs/phase-5-polishing/Debugging, Profiling & Testing/layout-debugging.mdx | Adds draft page outline for layout debugging |
| src/content/docs/phase-5-polishing/Debugging, Profiling & Testing/debugging-tools.mdx | Adds draft page outline for debugging tools |
| src/content/docs/phase-5-polishing/Debugging, Profiling & Testing/custom-tools.mdx | Adds draft page outline for custom inspector panels |
| src/content/docs/phase-5-polishing/Debugging, Profiling & Testing/_meta.yml | Sidebar metadata for the section |
| src/content/docs/phase-5-polishing/CSS & DOM Optimization/text-rendering.mdx | Adds draft page outline for text rendering optimization |
| src/content/docs/phase-5-polishing/CSS & DOM Optimization/layout-performance.mdx | Adds draft page outline for layout performance |
| src/content/docs/phase-5-polishing/CSS & DOM Optimization/gameface-css.mdx | Adds draft page outline for custom Gameface CSS properties |
| src/content/docs/phase-5-polishing/CSS & DOM Optimization/dom-management.mdx | Adds draft page outline for DOM sizing/visibility strategies |
| src/content/docs/phase-5-polishing/CSS & DOM Optimization/asset-preloading.mdx | Adds draft page outline for asset preloading/bundler config |
| src/content/docs/phase-5-polishing/CSS & DOM Optimization/_meta.yml | Sidebar metadata for the section |
| src/content/docs/phase-4-logic-and-interactions/Interactions/touch-support.mdx | Adds draft page outline for touch support |
| src/content/docs/phase-4-logic-and-interactions/Interactions/spatial-navigation-and-focus.mdx | Adds draft page outline for spatial navigation/focus |
| src/content/docs/phase-4-logic-and-interactions/Interactions/routing-input.mdx | Adds draft page outline for routing inputs UI vs world |
| src/content/docs/phase-4-logic-and-interactions/Interactions/interaction-manager.mdx | Adds draft page outline for interaction manager |
| src/content/docs/phase-4-logic-and-interactions/Interactions/drag-and-drop.mdx | Adds draft page outline for drag & drop |
| src/content/docs/phase-4-logic-and-interactions/Interactions/_meta.yml | Sidebar metadata for the section |
| src/content/docs/phase-4-logic-and-interactions/Engine Communication & Data Mocking/mocking-data.mdx | Adds draft page outline for mocking models |
| src/content/docs/phase-4-logic-and-interactions/Engine Communication & Data Mocking/engine-communication.mdx | Adds draft page outline for engine comms |
| src/content/docs/phase-4-logic-and-interactions/Engine Communication & Data Mocking/_meta.yml | Sidebar metadata for the section |
| src/content/docs/phase-4-logic-and-interactions/Data Binding & UI State/data-binding-basics.mdx | Adds draft page outline for data-binding basics |
| src/content/docs/phase-4-logic-and-interactions/Data Binding & UI State/structural-data-binding.mdx | Adds draft page outline for structural binding |
| src/content/docs/phase-4-logic-and-interactions/Data Binding & UI State/custom-data-bind-attribute.mdx | Adds draft page outline for custom binders |
| src/content/docs/phase-4-logic-and-interactions/Data Binding & UI State/observable-models-and-virtual-lists.mdx | Adds draft page outline for observables/virtual lists |
| src/content/docs/phase-4-logic-and-interactions/Data Binding & UI State/local-vs-game-state.mdx | Adds draft page outline for state management guidance |
| src/content/docs/phase-4-logic-and-interactions/Data Binding & UI State/_meta.yml | Sidebar metadata for the section |
| src/content/docs/phase-3-layout-assets-and-styling/laying-out-the-screen.mdx | Marks as draft + adds summary/topics outline |
| src/content/docs/phase-3-layout-assets-and-styling/animated-assets.mdx | Adds draft page outline for GIF/video guidance |
| src/content/docs/phase-3-layout-assets-and-styling/Texts & Fonts/importing-fonts-and-styling-text.mdx | Adds draft page outline for fonts/RTL |
| src/content/docs/phase-3-layout-assets-and-styling/Texts & Fonts/building-rich-text.mdx | Adds draft page outline for rich text/cohinline |
| src/content/docs/phase-3-layout-assets-and-styling/Texts & Fonts/auto-scaling-text.mdx | Adds draft page outline for font fitting |
| src/content/docs/phase-3-layout-assets-and-styling/Texts & Fonts/troubleshooting-text-and-rendering.mdx | Adds draft page outline for text artifacts/perf |
| src/content/docs/phase-3-layout-assets-and-styling/Texts & Fonts/_meta.yml | Sidebar metadata for the section |
| src/content/docs/phase-3-layout-assets-and-styling/Styling & Scalability/writting-maintainable-css.mdx | Adds draft (partially filled) CSS architecture article |
| src/content/docs/phase-3-layout-assets-and-styling/Styling & Scalability/building-responsive-game-ui.mdx | Adds draft page outline for responsive UI |
| src/content/docs/phase-3-layout-assets-and-styling/Styling & Scalability/handling-aspect-ratios-with-media-queries.mdx | Adds draft page outline for aspect-ratio MQs |
| src/content/docs/phase-3-layout-assets-and-styling/Styling & Scalability/_meta.yml | Sidebar metadata for the section |
| src/content/docs/phase-3-layout-assets-and-styling/Graphics & Shapes/image-assets.mdx | Adds draft page outline for SVG vs raster |
| src/content/docs/phase-3-layout-assets-and-styling/Graphics & Shapes/svg-ui-tricks.mdx | Adds draft page outline for SVG techniques |
| src/content/docs/phase-3-layout-assets-and-styling/Graphics & Shapes/advanced-ui-shapes.mdx | Adds draft page outline for masking/clipping/9-slice |
| src/content/docs/phase-3-layout-assets-and-styling/Graphics & Shapes/_meta.yml | Sidebar metadata for the section |
| src/content/docs/phase-3-layout-assets-and-styling/Dynamic Styling & Variables/dynamic-styling-in-javascript.mdx | Adds draft page outline for JS-driven styling |
| src/content/docs/phase-3-layout-assets-and-styling/Dynamic Styling & Variables/managing-variables.mdx | Adds draft page outline for CSS vars vs SCSS |
| src/content/docs/phase-3-layout-assets-and-styling/Dynamic Styling & Variables/_meta.yml | Sidebar metadata for the section |
| src/content/docs/phase-3-layout-assets-and-styling/Animations/ui-animations.mdx | Adds draft page outline for animation approaches |
| src/content/docs/phase-3-layout-assets-and-styling/Animations/svg-animations.mdx | Adds draft page outline for SVG animation guidance |
| src/content/docs/phase-3-layout-assets-and-styling/Animations/waapi.mdx | Adds draft page outline for WAAPI |
| src/content/docs/phase-3-layout-assets-and-styling/Animations/sprite-sheet-animations.mdx | Adds draft page outline for sprite sheets |
| src/content/docs/phase-3-layout-assets-and-styling/Animations/lottie.mdx | Adds draft page outline for Lottie |
| src/content/docs/phase-3-layout-assets-and-styling/Animations/gsap.mdx | Adds draft page outline for GSAP |
| src/content/docs/phase-3-layout-assets-and-styling/Animations/animejs.mdx | Adds draft page outline for AnimeJS |
| src/content/docs/phase-3-layout-assets-and-styling/Animations/_meta.yml | Sidebar metadata for the section |
| src/content/docs/phase-2-planning-and-setup/prototyping-and-developing.mdx | Switches component imports to coherent theme |
| src/content/docs/phase-2-planning-and-setup/development-environment-and-tools.mdx | Switches component imports to coherent theme |
| src/content/docs/phase-2-planning-and-setup/core-concepts-and-information-flow.mdx | Switches component imports to coherent theme |
| src/content/docs/phase-2-planning-and-setup/The Prototyping Workflow/section-overview.mdx | Switches component imports to coherent theme |
| src/content/docs/phase-2-planning-and-setup/The Prototyping Workflow/prototyping-an-inventory-part-one.mdx | Switches component imports + adjusts Row examples |
| src/content/docs/phase-2-planning-and-setup/The Prototyping Workflow/prototyping-an-inventory-part-two.mdx | Switches component imports to coherent theme |
| src/content/docs/phase-2-planning-and-setup/Recommended Tech Stack/setting-up-the-gameface-stack.mdx | Switches component imports to coherent theme |
| src/content/docs/phase-2-planning-and-setup/Recommended Tech Stack/recommended-teck-stack-overview.mdx | Switches component imports to coherent theme |
| src/content/docs/phase-2-planning-and-setup/Design Work/animations.mdx | Switches component imports to coherent theme |
| src/content/docs/phase-1-getting-started/introduction.mdx | Switches component imports to coherent theme |
| src/content/docs/phase-1-getting-started/working-separately-from-the-game.mdx | Switches component imports to coherent theme |
| src/content/docs/phase-1-getting-started/getting-started-with-the-player.mdx | Switches component imports to coherent theme |
| package.json | Bumps theme + adds missing dependency |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+13
to
+16
| * **Structural Binding (`if` and `for`):** * **How-to:** Show how to use `data-bind-if` to conditionally mount/unmount elements and `data-bind-for` to iterate over an array (e.g., generating an inventory list). | ||
| * **Gotcha:** Explicitly warn that modifying a DOM element generated by `data-bind-for` via JavaScript causes undefined behavior if the underlying collection's size changes. | ||
| * **Data-Binding Events:** * **How-to:** Explain the `data-bind-[eventName]` syntax for handling user interactions (like clicks, hovers, and focus) without writing manual `addEventListener` scripts. | ||
| Show how to pass the `event` object and `this` context directly to the model's function. |
There was a problem hiding this comment.
The Topics section uses * mid-line (* **...:** * **How-to:** ...), which won’t be treated as a nested list item and can render incorrectly. Move How-to/Gotcha onto separate indented sub-bullets under each main topic.
Comment on lines
+7
to
+9
| import Summary from 'coherent-docs-theme/components/Summary.astro'; | ||
| import Highlight from 'coherent-docs-theme/components/Highlight.astro'; | ||
| import Link from 'coherent-docs-theme/components/Link.astro'; |
There was a problem hiding this comment.
The filename recommended-teck-stack-overview.mdx contains a typo (“teck”). Since file names typically become part of the URL/slug, consider renaming it to recommended-tech-stack-overview.mdx to avoid a permanent typo in the public route.
Comment on lines
+13
to
+17
| * **The Gatekeeper Concept:** * **Context:** Unlike a normal website, a game engine captures OS events first and forwards them to the UI. The C++ engine acts as a gatekeeper via the `OnNodeMouseEvent` callback, deciding whether to evaluate the click (`ContinueHandling`) or pass it down to the 3D world (`InterruptHandling`). | ||
| * **Hybrid Input & Interception:** * **Context:** In games like RTS or MOBAs, clicking empty UI space should move a unit, but clicking a button should execute UI logic. | ||
| * **How-to:** Instruct frontend developers to coordinate with the C++ team. The easiest method is to mark transparent elements with specific CSS classes (e.g., `.ui-transparent`). The C++ handler can inspect the clicked element's classes and instantly interrupt the handling to pass the click to the game world. | ||
| * **Basic Web Inputs (Cursors & Selection):** * **Cursor Control:** Standard CSS `cursor: pointer` works, but developers can also use `cursor: url(myCursor.ani)` to load custom, animated, platform-specific cursors handled directly by the OS. | ||
| * **Text Selection:** Standard web text is strictly non-selectable by default in Gameface. To enable mouse drag selection, apply `user-select: text` via CSS. No newline at end of file |
There was a problem hiding this comment.
The list formatting mixes multiple * markers on the same line (e.g., * **...:** * **Context:** / * **Cursor Control:**), which Markdown will interpret as emphasis rather than nested bullets. Split these into separate indented sub-list items so the Topics section renders correctly.
Comment on lines
+13
to
+17
| * **Creating & Connecting a Mocked Model:** * **Tutorial:** Show how to use `engine.createJSModel("PlayerModel", { health: 100 })` inside the auto-detection block. | ||
| * **Connecting the Dots:** Show a 1-line HTML snippet (`<div data-bind-value="{{PlayerModel.health}}"></div>`) so the developer immediately understands *why* they are mocking the data. | ||
| * **Synchronizing the Mocked Data:** * **Concept:** In a real game, the C++ engine pushes updates to the UI automatically. When mocking in JS, you have to tell the engine to manually sync the DOM. | ||
| * **Tutorial:** Show a script changing the mocked health value, followed by calls to `engine.updateWholeModel("PlayerModel")` and `engine.synchronizeModels()` to force the UI to visually update. | ||
| * **Auto-Detecting the Environment:** * **Tutorial:** Show the ultimate workflow trick: automatically enabling mock data *only* if the UI is running in the browser/Player. Provide a snippet like: |
There was a problem hiding this comment.
The Topics section uses * mid-line (e.g., * **Creating & Connecting...:** * **Tutorial:** ...), which won’t render as nested list items. Move Tutorial/Concept blocks onto their own indented sub-bullets under each main topic for correct Markdown formatting.
Comment on lines
+175
to
+177
| ## Next Steps | ||
|
|
||
| Now that your CSS architecture is flat, maintainable, and optimized for the engine, it is time to ensure your views look flawless on any screen size. Move on to [Building Scalable & Responsive Game UIs](../building-scalable-and-responsive-game-uis/) to learn how to dynamically scale layouts and typography across different resolutions. |
There was a problem hiding this comment.
The “Next Steps” link points to ../building-scalable-and-responsive-game-uis/, but the actual doc file in this directory is building-responsive-game-ui.mdx (title matches). This relative link will likely 404; please update it to the correct slug/path.
Comment on lines
+13
to
+17
| * **Loading Custom Fonts (Global Scope):** * **How-to:** Provide a quick guide on using the standard `@font-face` declaration to load TrueType (`.ttf`) or OpenType (`.otf`) fonts. | ||
| * **Concept:** Explain that in Gameface, fonts are global to the entire system. If you load a font in your Main Menu view, it stays in memory and can be used immediately in your HUD view without being re-downloaded or re-parsed. | ||
| * **Text Effects & Outlines:** * **How-to:** Provide practical CSS snippets for styling game text. Show developers how to use standard CSS `text-shadow` to create crisp outlines, heavy drop shadows, and glowing text effects that are critical for HUD readability against complex 3D backgrounds. | ||
| * **Handling RTL Languages:** * **How-to:** Briefly explain how to structure HTML for Right-to-Left languages (like Arabic or Hebrew) using standard attributes like `dir="rtl"`. | ||
| * **Concept:** Note that Gameface has built-in support for complex text shaping. Developers do not need to write custom JavaScript to reverse strings; the engine handles the correct glyph placement automatically. No newline at end of file |
There was a problem hiding this comment.
Topic bullets include * mid-line (* **...:** * **How-to:** ...), which Markdown won’t interpret as a nested list and can cause formatting issues. Consider turning How-to/Concept into properly indented sub-bullets under each main topic.
MihailTodorov
approved these changes
May 5, 2026
MartinBozhilov-coh
force-pushed
the
add-drafts
branch
from
f70e837 to
b065c78
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.