add drafts & content for phase 1 and 2#6
Merged
Conversation
alien1976
approved these changes
Apr 20, 2026
alien1976
left a comment
alien1976
left a comment
There was a problem hiding this comment.
Can we install the starlight-auto-sidebar, because it is not presented in the package.json file and leads to errors on build. We need 0.1.4 version of it!
Comment on lines
+24
to
+28
| ### Data Binding Autocomplete | ||
| Your frontend will communicate heavily with the game engine's backend data. The Data Binding Autocomplete extension provides context-aware IntelliSense for these bindings, helping you quickly reference properties and preventing typos when linking to engine data. | ||
|
|
||
| * **How to install:** [Placeholder for VS Code Marketplace link or install instructions] | ||
|
|
There was a problem hiding this comment.
Maybe add a link to its documentation as well, for more information
Comment on lines
+25
to
+31
| ## Why Not Vanilla JavaScript? | ||
|
|
||
| Choosing between using vanilla JavaScript (plain JavaScript) and a JavaScript framework is an important decision when starting your project. Vanilla JavaScript gives you complete control over the code, which can be an advantage for fine-tuning performance and behavior. | ||
|
|
||
| However, as your project grows, building complex features from scratch can be time-consuming, potentially extending project timelines. Managing and maintaining a large codebase can become challenging without the organization and structure provided by a framework. Frameworks offer tools and features that streamline development and speed up the creation of complex applications. They also provide predefined architecture and patterns that help maintain a well-organized codebase. | ||
|
|
||
| To get the organization of a framework without sacrificing the speed of Vanilla JS, we rely on <Highlight>SolidJS</Highlight>. |
There was a problem hiding this comment.
Here maybe it is a good idea to tell that as Javascript gives fine control over the UI as advantage, but if you are not familiar how it works under the hood you may write something that is terrible and slow compared to using simple framework. Most of the clients think they know javascript and try to for example extend our old components by writing their systems that are doing terrible things and then they are reaching us with performance problems.
|
|
||
| Vite is a modern build tool and development server designed for web development. We chose it over older tools like Webpack for several key reasons: | ||
| * **Native ESM:** Vite natively supports ES modules without bundling during development, resulting in quicker build times. | ||
| * **Instant Updates:** Vite offers HMR by default, making it easy for developers to see changes in real-time during development. |
There was a problem hiding this comment.
Basically compared to other frameworks the vite's hmr works out of the box and that is why we like it (maybe it is good to mention that). For example for webpack you need to add aditional configuration and polling polyfill in order to make it working.
|
|
||
| TypeScript definitions and documentation provide strong typing and enhanced tooling for your JavaScript code within the Gameface environment. | ||
| Because your UI will be communicating heavily with a C++ backend via data-binding, this ensures you catch data-shape errors in your IDE before your UI ever touches the game engine. | ||
|
|
There was a problem hiding this comment.
Maybe here add a short summary for the recommended teck stack describing that we recomend solidjs+vite and scss with bem naming.
|
|
||
| Once the installation is complete, you can see how to [preview the project in gameface](#connect-to-the-gameface-player) in the next section. | ||
|
|
||
| ### Option B: The Gameface UI project |
There was a problem hiding this comment.
Why not this to be Option A instead of B?
Comment on lines
+46
to
+61
| Your server is now running at `http://localhost:3000/menu`. | ||
|
|
||
| 2. **Run the server in the player:** Locate the `Player.bat` file included in your Gameface package. Open the file in a text editor, | ||
| scroll down until you see a similar command: | ||
|
|
||
| ```bat | ||
| start "Player" /d "%wd%" "..\Player\Player.exe" --player %*" | ||
| ``` | ||
|
|
||
| and add the following parameter to the end of the line: | ||
|
|
||
| <Code | ||
| code={`start "Player" /d "%wd%" "..\Player\Player.exe" --player "--url=http://localhost:3000/menu"`} | ||
| lang="bat" | ||
| ins={' "--url=http://localhost:3000/menu"'} | ||
| /> |
There was a problem hiding this comment.
You need to have '/' at the end in the links.
Suggested change
| Your server is now running at `http://localhost:3000/menu`. | |
| 2. **Run the server in the player:** Locate the `Player.bat` file included in your Gameface package. Open the file in a text editor, | |
| scroll down until you see a similar command: | |
| ```bat | |
| start "Player" /d "%wd%" "..\Player\Player.exe" --player %*" | |
| ``` | |
| and add the following parameter to the end of the line: | |
| <Code | |
| code={`start "Player" /d "%wd%" "..\Player\Player.exe" --player "--url=http://localhost:3000/menu"`} | |
| lang="bat" | |
| ins={' "--url=http://localhost:3000/menu"'} | |
| /> | |
| Your server is now running at `http://localhost:3000/menu/`. | |
| 2. **Run the server in the player:** Locate the `Player.bat` file included in your Gameface package. Open the file in a text editor, | |
| scroll down until you see a similar command: | |
| ```bat | |
| start "Player" /d "%wd%" "..\Player\Player.exe" --player %*" | |
| ``` | |
| and add the following parameter to the end of the line: | |
| <Code | |
| code={`start "Player" /d "%wd%" "..\Player\Player.exe" --player "--url=http://localhost:3000/menu/"`} | |
| lang="bat" | |
| ins={' "--url=http://localhost:3000/menu/"'} | |
| /> |
|
Maybe it is a good idea to add some kind of alias/comment with |
There was a problem hiding this comment.
Pull request overview
This PR expands the Starlight documentation site with new Phase 1–2 content (including a detailed “Prototyping an Inventory” walkthrough), adds initial stubs for later sections/phases, and introduces starlight-auto-sidebar integration.
Changes:
- Added substantial Phase 1 and Phase 2 documentation content (tech stack, setup, prototyping workflow).
- Added draft/stub pages for additional topics (alternative frameworks, design work, workflow planning, core concepts).
- Updated Astro/Starlight configuration to include
starlight-auto-sidebarand its content collection.
Reviewed changes
Copilot reviewed 34 out of 47 changed files in this pull request and generated 15 comments.
Show a summary per file
| File | Description |
|---|---|
| src/content/docs/phase-4-logic-and-interactions/mocking-data.mdx | Adds Phase 4 page frontmatter stub. |
| src/content/docs/phase-3-layout-assets-and-styling/laying-out-the-screen.mdx | Adds Phase 3 page frontmatter stub. |
| src/content/docs/phase-2-planning-and-setup/prototyping-and-developing.mdx | Adds Gameface UI boilerplate guide (with media/examples). |
| src/content/docs/phase-2-planning-and-setup/development-environment-and-tools.mdx | Adds draft tooling/environment guide. |
| src/content/docs/phase-2-planning-and-setup/core-concepts-and-information-flow.mdx | Adds draft “push vs fetch / views” concepts page. |
| src/content/docs/phase-2-planning-and-setup/Workflow Planning/workflow-planning.mdx | Adds draft workflow planning page (frontmatter + bullets). |
| src/content/docs/phase-2-planning-and-setup/Workflow Planning/switching-from-unreal-umg-to-gameface.mdx | Adds draft Unreal-to-Gameface translation stub. |
| src/content/docs/phase-2-planning-and-setup/Workflow Planning/switching-from-unity-ui-to-gameface.mdx | Adds draft Unity-to-Gameface translation stub. |
| src/content/docs/phase-2-planning-and-setup/Workflow Planning/_meta.yml | Adds sidebar ordering/collapse metadata. |
| src/content/docs/phase-2-planning-and-setup/The Prototyping Workflow/section-overview.mdx | Adds inventory prototyping section overview + assets link. |
| src/content/docs/phase-2-planning-and-setup/The Prototyping Workflow/prototyping-an-inventory-part-one.mdx | Adds Part 1 walkthrough (assets/layout/routing). |
| src/content/docs/phase-2-planning-and-setup/The Prototyping Workflow/prototyping-an-inventory-part-two.mdx | Adds Part 2 walkthrough (components/interactivity). |
| src/content/docs/phase-2-planning-and-setup/The Prototyping Workflow/_meta.yml | Adds sidebar ordering/collapse metadata. |
| src/content/docs/phase-2-planning-and-setup/Recommended Tech Stack/setting-up-the-gameface-stack.mdx | Adds setup guide for Vite + Solid (and Player connection). |
| src/content/docs/phase-2-planning-and-setup/Recommended Tech Stack/recommended-teck-stack-overview.mdx | Adds recommended stack overview article. |
| src/content/docs/phase-2-planning-and-setup/Recommended Tech Stack/_meta.yml | Adds sidebar ordering/collapse metadata. |
| src/content/docs/phase-2-planning-and-setup/Design Work/figma-exporter.mdx | Adds draft Figma exporter stub. |
| src/content/docs/phase-2-planning-and-setup/Design Work/arranging-your-designs.mdx | Adds draft design organization stub. |
| src/content/docs/phase-2-planning-and-setup/Design Work/animations.mdx | Adds draft animations handoff/perf notes. |
| src/content/docs/phase-2-planning-and-setup/Design Work/_meta.yml | Adds sidebar ordering/collapse metadata. |
| src/content/docs/phase-2-planning-and-setup/Alternative Frameworks/react-setup.mdx | Adds draft React setup stub. |
| src/content/docs/phase-2-planning-and-setup/Alternative Frameworks/preact-setup.mdx | Adds draft Preact setup stub. |
| src/content/docs/phase-2-planning-and-setup/Alternative Frameworks/svelte-setup.mdx | Adds draft Svelte setup stub. |
| src/content/docs/phase-2-planning-and-setup/Alternative Frameworks/vue-setup.mdx | Adds draft Vue setup stub. |
| src/content/docs/phase-2-planning-and-setup/Alternative Frameworks/_meta.yml | Adds sidebar ordering/collapse metadata. |
| src/content/docs/phase-1-getting-started/introduction.mdx | Adds Phase 1 introduction article content. |
| src/content/docs/phase-1-getting-started/getting-started-with-the-player.mdx | Adds draft “Getting Started with the Player” article. |
| src/content/docs/phase-1-getting-started/working-separately-from-the-game.mdx | Adds draft inspector/debugging workflow article. |
| src/content/docs/introduction/hello-world.mdx | Removes placeholder Hello World doc. |
| src/content/docs/ecosystem-tools/hello-world.mdx | Removes placeholder Hello World doc. |
| src/content/docs/core-concepts/hello-world.mdx | Removes placeholder Hello World doc. |
| src/content/docs/Polishing/accessibility.mdx | Adds Polishing/Accessibility page frontmatter stub. |
| src/content.config.ts | Adds autoSidebar content collection wiring. |
| src/assets/phase-2/the-prototyping-workflow/item-inspector-1.png | Adds walkthrough image asset. |
| src/assets/phase-2/the-prototyping-workflow/item-inspector-2.png | Adds walkthrough image asset. |
| src/assets/phase-2/prototyping-and-developing/inventory-view.png | Adds walkthrough image asset. |
| astro.config.mjs | Adds starlight-auto-sidebar plugin to Starlight config. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+95
to
+97
| ```bat | ||
| start "Player" /d "%wd%" "..\Player\Player.exe" --player %*" | ||
| ``` |
Comment on lines
+43
to
+46
| :::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](). | ||
| ::: |
Comment on lines
+67
to
+69
| <video autoplay loop muted> | ||
| <source src={menuPreviewVideo} type="video/mp4" /> | ||
| </video> |
Comment on lines
6
to
+30
| @@ -21,10 +22,12 @@ export default defineConfig({ | |||
| }, | |||
| ], | |||
| plugins: [ | |||
| ...coherentTheme({ | |||
| documentationSearchTag: 'UI workflow guide', | |||
| showPageProgress: true, | |||
| })], | |||
| ...coherentTheme({ | |||
| documentationSearchTag: 'UI workflow guide', | |||
| showPageProgress: true, | |||
| }), | |||
| starlightAutoSidebar() | |||
| ], | |||
Comment on lines
+4
to
+12
| import { autoSidebarLoader } from 'starlight-auto-sidebar/loader' | ||
| import { autoSidebarSchema } from 'starlight-auto-sidebar/schema' | ||
|
|
||
| export const collections = { | ||
| docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }), | ||
| autoSidebar: defineCollection({ | ||
| loader: autoSidebarLoader(), | ||
| schema: autoSidebarSchema(), | ||
| }), |
Comment on lines
+444
to
+446
| :::note[Icon fill property] | ||
| Notice the use of the `fill` prop on the `<Icon>` components? This is a built-in property that tells the icon image to span the full width & height of it's container. | ||
| ::: |
MihailTodorov
approved these changes
May 5, 2026
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.
List of finished articles:
phase 1
phase 2