@powerhousedao/academy 0.1.0-dev.3 → 0.1.0-dev.5

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## 0.1.0-dev.5 (2025-06-03)
+
+### 🩹 Fixes
+
+- **academy:** lockfile issue second time' ([6208fe614](https://github.com/powerhouse-inc/powerhouse/commit/6208fe614))
+- **academy:** fix frozen lockfile issue' ([80f18ec73](https://github.com/powerhouse-inc/powerhouse/commit/80f18ec73))
+- **academy:** fix frozen lockfile issue ([bfc3dcd21](https://github.com/powerhouse-inc/powerhouse/commit/bfc3dcd21))
+
+### ❤️ Thank You
+
+- Callme-T
+
+## 0.1.0-dev.4 (2025-06-03)
+
+### 🚀 Features
+
+- **academy:** centralize husky & auto-update cli docs ([8c92e0bb1](https://github.com/powerhouse-inc/powerhouse/commit/8c92e0bb1))
+- **ph-cli:** added setup-service command ([dfa082aa6](https://github.com/powerhouse-inc/powerhouse/commit/dfa082aa6))
+- **scripts:** updated setup scripts ([9f7fa7644](https://github.com/powerhouse-inc/powerhouse/commit/9f7fa7644))
+
+### 🩹 Fixes
+
+- **pre-commit:** use bash syntax and shebang ([da00ff581](https://github.com/powerhouse-inc/powerhouse/commit/da00ff581))
+- added missing dep to academy ([4ec6c8278](https://github.com/powerhouse-inc/powerhouse/commit/4ec6c8278))
+- **academy:** clean up husky script ([e18e26cd8](https://github.com/powerhouse-inc/powerhouse/commit/e18e26cd8))
+
+### ❤️ Thank You
+
+- Callme-T
+- Frank
+- Guillermo Puente @gpuente
+
 ## 0.1.0-dev.3 (2025-05-27)
 
 ### 🚀 Features

package/README.md

@@ -16,7 +16,7 @@ $ npm install
 $ npm run dev
 ```
 
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. The server will break upon broken links or big navigation/relinking. 
 
 ### Build
 

package/docs/academy/01-GetStarted/00-ExploreDemoPackage.md

@@ -0,0 +1,78 @@
+# Explore the Demo Package
+
+:::tip
+To give you a quick idea of how the Powerhouse ecosystem operates on document models and packages, why don\'t you try installing a package?   
+
+Install the Powerhouse command-line tool `ph-cmd` and then use it to install a pre-built demo package with document models & editors.
+:::
+
+## Step 1: Install the Powerhouse CLI
+
+You will use the Powerhouse CLI to launch a local environment with a "**Contributor Billing**" package. This package demonstrates how you might track and bill for contributions in a project. First, you need the Powerhouse command-line interface (CLI). Open your terminal and run the installation command:
+
+```bash
+pnpm install -g ph-cmd
+```
+
+Verify the installation:
+
+```bash
+ph-cmd --version
+```                                                   
+
+## Step 2: Install the Contributor Billing Package
+
+Now, use the `ph` command to install the demo package into a global project.
+
+```bash
+# Install the package
+ph install contributor-billing
+```
+
+This command downloads and sets up the Contributor Billing package, making its features available in your Powerhouse environment.
+
+You have now successfully installed `ph-cmd` and added your first package! 
+
+## Step 3: Run the Connect App in Studio mode
+To run the package locally in Connect Studio (our collaboration and contributor app), run the `ph connect` command. 
+
+## Step 4: Log in with Renown
+
+Renown is Powerhouse's decentralized identity and reputation system designed to address the challenge of trust within DAOs, where contributors often operate under pseudonyms. In traditional organizations, personal identity and reputation are key to establishing trust and accountability. Renown replicates this dynamic in the digital space, allowing contributors to earn experience and build reputation without revealing their real-world identities.
+
+
+:::tip
+When signing in with Renown, use an Ethereum or blockchain address that can function as your \'identity\', as this address will accrue more experience and history over time.
+:::
+
+### Login Flow 
+"**Log in with Renown**" is a decentralized authentication flow that enables you to log into applications by signing a credential with your Ethereum wallet. Upon signing in, a Decentralized Identifier (DID) is created based on your Ethereum key. 
+
+![Renown Login](./images/RenownLogin.png)
+
+### Generate a DID to sign operations in Connect
+This DID is then associated with a credential that authorizes a specific Connect instance to act on your behalf. That credential is stored securely on Ceramic, a decentralized data network. When you perform actions through the Powerhouse Connect interface, those operations are signed with the DID and transmitted to Switchboard, which serves as the verifier. 
+
+![Renown Login](./images/ConnectAddress.png)
+
+![Renown Login](./images/LoginComplete.png)
+
+### Modify a document
+Switchboard checks the validity of the DID and credential, ensuring the operation request is legitimate. This flow is designed to offer a verifiable, cryptographically secure login system that replaces traditional password-based authentication with decentralized identity and signature-based trust.
+
+## Step 5: Explore the Document Operations History 
+
+![Renown Login](./images/OperationsHistory.png)
+
+By leveraging this system, every operation or modification made to a document is cryptographically signed by the contributor\'s Renown identity. This ensures that each change is verifiable, traceable, and attributable to a specific pseudonymous user, providing a robust audit trail for all document activity. 
+
+A key feature you get with Connect is the **Operations History**. Every change to a document is stored as an individual operation, creating an immutable and replayable history. This provides complete auditability and transparency, as you can inspect each revision, its details, and any associated signatures. For example, you can see a chronological list of all modifications, along with who made them and when. This ensures every action is traceable and verifiable.
+Learn more about the [Operations History and other document tools you get for free](../MasteryTrack/BuildingUserExperiences/DocumentTools/OperationHistory).
+
+## Step 6: Export a Document
+
+Export the document as a `.phd` (Powerhouse Document) file using the export button in the document toolbar at the top. In this toolbar, you will find all available functionality for your documents. The `.phd` file can be sent through any of your preferred channels to other users on your Powergrid network. 
+
+Now that you have explored a Powerhouse package and discovered its basic functionalities, it is time to start building your own. 
+Our next tutorial focuses on creating a simple To-Do list document and will introduce you to the world of Document Models. 
+

package/docs/academy/01-GetStarted/{03-ToDoList/01-CreateNewPowerhouseProject.md → 01-CreateNewPowerhouseProject.md}

@@ -1,7 +1,7 @@
-# Create a Powerhouse Project
+# Create a new ToDoList Document
 
 ## Overview
-This tutorial will guide you through creating a new 'Powerhouse project', which primarily consists of a document model and its editor. You'll be using Connect locally, known as 'Studio mode'.
+This tutorial guides you through creating a 'Powerhouse project' for a ToDoList. A Powerhouse project primarily consists of a document model and its editor. You'll be using Connect locally, known as 'Studio mode'.
 
 ## Prerequisites
 - Powerhouse CLI installed: `pnpm install -g ph-cmd`
@@ -9,6 +9,8 @@ This tutorial will guide you through creating a new 'Powerhouse project', which
 - Visual Studio Code (or your preferred IDE)
 - Terminal/Command Prompt access
 
+If you need help with installing the prerequisites you can visit our page prerequisites. @callme-t
+
 ## Quick Start
 Create a new Powerhouse project with a single command:
 ```bash
@@ -35,7 +37,7 @@ Please be aware that these versions can contain bugs and experimental features t
 </details>
 
 ## Before You Begin
-1. Open your terminal (either your system terminal or VS Code's integrated terminal)
+1. Open your terminal (either your system terminal or IDE's integrated terminal)
 2. Navigate to your desired project directory using:
 
    ```bash
@@ -65,7 +67,7 @@ Navigate to the newly created project directory:
 cd <yourprojectname>
 ```
 
-Once you are in the project directory, you can run the `ph connect` command to instantiate a local version of the Connect application to start building your document model.
+Once in the project directory, run the `ph connect` command to start a local instance of the Connect application. This allows you to start your document model specification document.
 
 Run the following command to start the Connect application:
 
@@ -86,12 +88,12 @@ A new browser window will open and you will see the Connect application. If it d
 You will see your local drive and a button to create a new drive. 
 
 :::tip
-A drive is a folder to store and organize your documents in. Powerhouse offers the ability to build customized 'Drive Apps' for your documents. Think of a Drive-App as a specialized lens— it offers **different ways to visualize, organize, and interact with** the data stored within a drive, making it more intuitive and efficient for specific use cases. To learn more, visit [Building A Drive App](/docs/academy/AdvancedTutorial/BuildingUserExperiences/BuildingADriveExplorer)
+A drive is a folder to store and organize your documents in. Powerhouse offers the ability to build customized 'Drive Apps' for your documents. Think of a Drive App as a specialized lens—it offers **different ways to visualize, organize, and interact with** the data stored within a drive, making it more intuitive and efficient for specific use cases. To learn more, visit [Building A Drive App](/academy/MasteryTrack/BuildingUserExperiences/BuildingADriveExplorer)
 :::
 
 Move into your local drive. 
-Create a new document model by clicking on the `DocumentModel` button by the "New Document" section in the bottom. 
+Create a new document model by clicking the `DocumentModel` button, found in the 'New Document' section at the bottom of the page. 
 
-If you followed the steps correctly, you should have an empty document model created.
+If you've followed the steps correctly, you'll have an empty document where you can define the 'Document Specifications'.
 
-In the next tutorials, you will learn how to design your document model and export it to be later used in your Powerhouse project.
+In the next tutorials, you will learn how to specify, add code and build an editor for your document model and export it to be used in your Powerhouse package. 

package/docs/academy/01-GetStarted/02-DefineToDoListDocumentModel.md

@@ -0,0 +1,97 @@
+# Define the ToDoList document specification 
+
+In this tutorial, you will learn how to define the specifications for a `ToDoList` document model within the Connect application using its GraphQL schema, and then export the resulting document model specification document for your Powerhouse project.
+If you don't have a document specification file created yet, have a look at the previous step of this tutorial to create a new document specification.
+
+Before you start, make sure you have the Connect application running locally with the command `ph connect`
+
+## ToDoList Document Specification
+
+Likely you have called your project 'ToDoList'. If you've used a different name, please create a new document specification named 'ToDoList'. Pay close attention to capitalization, as it influences our code.
+We'll continue with this project to teach you how to create a document model specification and later an editor for your document model. We use the **GraphQL Schema Definition Language** (SDL) to define the schema for the document model. Below, you can see the SDL for the `ToDoList` document model.
+
+:::info
+This schema defines the **data structure** of the document model and the types involved in its operations, which are detailed further as input types.
+Documents in Powerhouse leverage **event sourcing principles**, where every state transition is represented by an operation. GraphQL input types describe operations, ensuring that user intents are captured effectively. These operations detail the parameters needed for state transitions. The use of GraphQL aligns these transitions with explicit, validated, and reproducible commands, supporting **CQRS** (Command Query Responsibility Segregation) patterns.
+:::
+
+
+
+<details>
+<summary>State Schema of our ToDoList</summary>
+
+```graphql
+# The state of our ToDoList
+type ToDoListState {
+  items: [ToDoItem!]!
+}
+
+# A single to-do item
+type ToDoItem {
+  id: ID!
+  text: String!
+  checked: Boolean!
+}
+```
+</details>
+
+
+
+<details>
+<summary>Operations Schema of our ToDoList</summary>
+```graphql
+# Defines a GraphQL input type for adding a new to-do item
+input AddTodoItemInput {
+  id: ID!
+  text: String!
+}
+
+# Defines a GraphQL input type for updating a to-do item
+input UpdateTodoItemInput {
+  id: ID!
+  text: String
+  checked: Boolean
+}
+
+# Defines a GraphQL input type for deleting a to-do item
+input DeleteTodoItemInput {
+  id: ID!
+}
+```
+</details>
+
+## Define the Document Model Specification
+
+To be able to define the document model, you need to open the document model editor in Connect. 
+
+#### The steps below show you how to do this:
+
+1. In the Connect application, click on **'document model'** to open the document model specification editor.
+2. Name your document model 'ToDoList' in the Connect application, paying close attention to capitalization. 
+3. You'll be presented with a form to fill in metadata about the document model. Fill in the details in the respective fields. 
+
+    In the **Document Type** field, type `powerhouse/todolist`. This defines the new type of document that will be created with this document model specification.
+    
+    ![ToDoList Document Model Form Metadata](./images/DocumentModelHeader.png)
+
+4. In the code editor, you can see the SDL for the document model. Replace the existing SDL template with the SDL defined in the [State Schema](#state-schema) section. Only copy and paste the types, leaving the inputs for the next step. You can, however, already press the 'Sync with schema' button to set the initial state of your document model specification based on your Schema Definition Language. 
+5. Below the editor, find the input field `Add module`. You'll use this to create and name a module for organizing your input operations. In this case, we will name the module `to_do_list`. Press enter.
+6. Now there is a new field, called `Add operation`. Here you will have to add each input operation to the module, one by one.
+7. Inside the `Add operation` field, type `ADD_TODO_ITEM` and press enter. A small editor will appear underneath it, with an empty input type that you have to fill. Copy the first input type from the [Operations Schema](#operations-schema) section and paste it in the editor. The editor should look like this:
+
+    ```graphql
+    input AddTodoItemInput {
+        id: ID!
+        text: String!
+    }
+    ```
+
+8. Repeat the process from step 7 for the other input operations: `UPDATE_TODO_ITEM` and `DELETE_TODO_ITEM`. You may have noticed that you only need to add the name of the operation (e.g., `UPDATE_TODO_ITEM`, `DELETE_TODO_ITEM`) without the `Input` suffix. It will then be generated once you press enter.
+
+9. Once you have added all the input operations, click the `Export` button at the top right of the editor to save the document model specification document to your local machine. Ideally, you should save your file in the root of your Powerhouse project on your machine.
+
+Check below screenshot for the complete implementation:
+
+![ToDoList Document Model](./images/DocumentModelOperations.png)
+
+Up next, you'll learn how to implement the runtime logic and components that will use the `ToDoList` document model specification you've just created and exported. 

package/docs/academy/01-GetStarted/{03-ToDoList/03-ImplementOperationReducers.md → 03-ImplementOperationReducers.md}

@@ -1,8 +1,8 @@
-# Implement Operation Reducers
+# Implement the Document Model
 
-In this section, we will implement and test the operation reducers for the **ToDoList** document model. In order to do this, you have to export the document model from the Connect application and import it into your powerhouse project directory. 
+In this section, we will implement and test the operation reducers for the **ToDoList** document model. For this, you have to export the document model specification from the Connect application and import it into your Powerhouse project directory. 
 
-To export the document model, follow the steps in the [Define ToDoList Document Model](/docs/academy/GetStarted/ToDoList/DefineToDoListDocumentModel) section.
+To export the document model specification, follow the steps in the [Define ToDoList Document Model](/academy/GetStarted/DefineToDoListDocumentModel) section.
 
 ## Understanding Reducers in Document Models
 
@@ -16,25 +16,25 @@ Reducers are a core concept in Powerhouse document models. They implement the st
 
 4. **Type Safety**: Powerhouse generates TypeScript types from your SDL, ensuring that your reducers and operations are type-safe.
 
-5. **Pure Functions**: Reducers should be pure functions that only depend on the current state and the operation input, making them predictable and testable.
+5. **Pure Functions**: Reducers should be pure functions that depend only on the current state and the operation input, making them predictable and testable.
 
 Let's see how these concepts are implemented in our **ToDoList** document model.
 
-## Import Document Model and Generate Code
+## Importing the Document Model Specification and Generating Code
 
-To import the document model into your powerhouse project, you can either:
+To import the document model specification into your Powerhouse project, you can either:
  
-- Copy and paste the file directly into the root of your powerhouse project.
-- Or drag and drop the file into the powerhouse project directory in the VSCode editor as seen in the image below:
+- Copy and paste the file directly into the root of your Powerhouse project.
+- Or drag and drop the file into the Powerhouse project directory in the VSCode editor as seen in the image below:
 
-Either step will import the document model into your powerhouse project.
+Either step will import the document model specification into your Powerhouse project.
 
 ![vscode image](./images/vscode.png)
 
 The next steps will take place in the VSCode editor. Make sure to have it open and the terminal window inside VSCode open as well. 
 
 
-To write the operation reducers of the **ToDoList** document model, you need to generate the document model code from the document model file you have exported into the powerhouse project directory.
+To write the operation reducers of the **ToDoList** document model, you need to generate the document model code from the document model specification file you have exported into the Powerhouse project directory.
 
 To do this, run the following command in the terminal:
 
@@ -44,7 +44,7 @@ ph generate ToDoList.phdm.zip
 
 Now you can navigate to `/document-models/to-do-list/src/reducers/to-do-list.ts` and start writing the operation reducers.
 
-Open the `to-do-list.ts` file and you should see the code that needs to be filled for the three operations you have defined earlier. Image below shows the code that needs to be filled:
+Open the `to-do-list.ts` file and you should see the code that needs to be filled for the three operations you have specified earlier. The image below shows the code that needs to be filled:
 
 ![to-do-list ts file](./images/reducers.png)
 
@@ -54,6 +54,8 @@ Open the `to-do-list.ts` file and you should see the code that needs to be fille
 2. Save the file.
 
 
+<details>
+<summary>Operation Reducers</summary>
 ```typescript
 import { ToDoListToDoListOperations } from '../../gen/to-do-list/operations.js';
 
@@ -104,6 +106,7 @@ export const reducer: ToDoListToDoListOperations = {
   },
 };
 ```
+</details>
 
 ## Write the Operation Reducers Tests
 
@@ -111,8 +114,10 @@ In order to make sure the operation reducers are working as expected, you need t
 
 Navigate to `/document-models/to-do-list/src/reducers/tests/to-do-list.test.ts` and copy and paste the code below into the file. Save the file.
 
-Here are the tests for the three operations written in the reducers file. This test file creates an empty ToDoList document model, then adds a todo item, updates it and deletes it.
+Here are the tests for the three operations implemented in the reducers file. This test file creates an empty ToDoList document model, then adds a todo item, updates it and deletes it.
 
+<details>
+<summary>Operation Reducers Tests</summary>
 ```typescript
 import utils from '../../gen/utils';
 import { reducer } from '../../gen/reducer';
@@ -178,6 +183,7 @@ describe('Todolist Operations', () => {
     });
 });
 ```
+</details>
 
 Now you can run the tests to make sure the operation reducers are working as expected.
 
@@ -194,8 +200,6 @@ Output should be as follows:
    Duration  417ms (transform 79ms, setup 0ms, collect 174ms, tests 12ms, environment 0ms, prepare 158ms)
 ```
 
-If you got the same output, you have successfully implemented the operation reducers and tests for the **ToDoList** document model. Congratulations, you've successfully setup the backbone for a simple **ToDoList** document model. 
+If you got the same output, you have successfully implemented the operation reducers and tests for the **ToDoList** document model. Congratulations, you've successfully set up the backbone for a simple **ToDoList** document. 
 
-:::tip
-Continue to the next chapter on your builder track to learn how to implement the document model editor so you can see a simple user interface for the **ToDoList** document model in action. Click here for the [ToDoList Editor](/docs/academy/GetStarted/ToDoList/BuildToDoListEditor)
-:::
+In the next chapter of this introduction track you will learn how to implement an editor for your document model so you can see a simple user interface for the **ToDoList** document model in action.

package/docs/academy/01-GetStarted/{03-ToDoList/04-BuildToDoListEditor.md → 04-BuildToDoListEditor.md}

@@ -1,12 +1,12 @@
-# Build a Todo-list Editor
+# Build a ToDoList Editor
 
-In this chapter we will continue with the interface or editor implementation of the **ToDoList** document model editor. This means you will create a simple user interface for the **ToDoList** document model which will be used inside the Connect app to create, update and delete your ToDoList items.
+In this chapter we will continue with the interface or editor implementation of the **ToDoList** document model. This means you will create a simple user interface for the **ToDoList** document model which will be used inside the Connect app to create, update and delete your ToDoList items.
 
 ## Generate the editor template
 
-Run the command below to generate the editor template for the **ToDoList** document model. This command reads the **ToDoList** document model definition from the `document-models` folder and generates the editor template in the `editors/to-do-list/editor.tsx` folder.
+Run the command below to generate the editor template for the **ToDoList** document model. This command reads the **ToDoList** document model definition from the `document-models` folder and generates the editor template in the `editors/to-do-list` folder as `editor.tsx`.
 
-Notice the `--editor` flag which defines the **ToDoList** document model. And the `--document-types` flag which defines the document type `powerhouse/todolist`.
+Notice the `--editor` flag which specifies the **ToDoList** document model, and the `--document-types` flag defines the document type `powerhouse/todolist`.
 
 ```bash
 ph generate --editor ToDoList --document-types powerhouse/todolist
@@ -188,24 +188,24 @@ export default function Editor({ document, dispatch }: IProps) {
 
 ---
 
-## To-do List Editor 
+## ToDoList Editor
 
 :::tip
 ### Implementing Components
-The editor we are about to implement makes use of some components from the **Powerhouse Design System**.   
-When you'll add the editor code you'll see it makes use of two components, the `Checkbox` and `InputField`.    
-These are imported from the Powerhouse Design System (`@powerhousedao/design-system/scalars`).   
+The editor we are about to implement makes use of some components from **Powerhouse Document Engineering**. 
+When you add the editor code, you'll see it makes use of two components, the `Checkbox` and `InputField`.
+These are imported from the Powerhouse Document Engineering design system (`@powerhousedao/document-engineering/scalars`).   
 
 This system provides a library of reusable components to ensure consistency and speed up development.  
-You can explore available components, see usage examples, and understand their properties (props) using our Storybook instance. For a detailed guide on how to leverage the design system and Storybook, see [using the Powerhouse Design System](/docs/academy/ComponentLibrary/PowerhouseDesignSystem) page.
+You can explore available components, see usage examples, and understand their properties (props) using our Storybook instance. For a detailed guide on how to leverage the Document Engineering design system and Storybook, see [Using the Powerhouse Document Engineering](/academy/ComponentLibrary/DocumentEngineering) page.
 
-For our tutorial you can now create a `components` folder in the `editors/to-do-list` folder and add the following code to each of the components
+For this tutorial, create a `components` folder inside `editors/to-do-list`. Then, within this new `components` folder, create the files for the `Checkbox` and `InputField` components (e.g., `Checkbox.tsx` and `InputField.tsx`) with the following code:
 :::
 
 <details>
 <summary>Checkbox</summary>
 ```typescript
-import { Form, BooleanField } from "@powerhousedao/design-system/scalars";
+import { Form, BooleanField } from "@powerhousedao/document-engineering/scalars";
 
 interface CheckboxProps {
   value: boolean;
@@ -230,7 +230,7 @@ export const Checkbox = ({ value, onChange }: CheckboxProps) => {
 <details>
 <summary>Inputfield</summary>
 ```typescript
-import { Form, StringField } from "@powerhousedao/design-system/scalars";
+import { Form, StringField } from "@powerhousedao/document-engineering/scalars";
 
 interface InputFieldProps {
   input: string;
@@ -270,10 +270,10 @@ export const InputField = (props: InputFieldProps) => {
 </details>
 
 
-Below is the complete code for the To-do List editor, primarily using Tailwind CSS for styling and importing the components from the Powerhouse Design System. 
+Below is the complete code for the To-Do List editor. It primarily uses Tailwind CSS for styling and imports the local `Checkbox` and `InputField` components you created in the previous step. These local components, in turn, utilize elements from the Powerhouse Document Engineering design system.
 
 <details>
-<summary>Complete To-do-list Editor Example (using Tailwind CSS)</summary>
+<summary>Complete ToDoList Editor Example (using Tailwind CSS)</summary>
 
 ```typescript
 // Import necessary types and components.
@@ -487,7 +487,7 @@ The editor will update dynamically, so you can play around with your editor styl
 Congratulations!
 If you managed to follow this tutorial until this point, you have successfully implemented the **ToDoList** document model with its reducer operations and editor. 
 
-Now you can move on to creating a [custom drive explorer](/docs/academy/AdvancedTutorial/BuildingUserExperiences/BuildingADriveExplorer) for your ToDoList document.    
+Now you can move on to creating a [custom drive explorer](/academy/MasteryTrack/BuildingUserExperiences/BuildingADriveExplorer) for your ToDoList document.    
 Imagine you have many ToDoLists sitting in a drive. A custom drive explorer will allow you to organize and track them at a glance, opening up a new world of possibilities to increase the functionality of your documents!
 
 

package/docs/academy/01-GetStarted/{00-GetStarted.mdx → home.mdx}

@@ -1,7 +1,7 @@
 ---
 title: Get Started
-sidebar_label: Get Started
-sidebar_position: 1
+slug: /
+sidebar_class_name: category-index-page
 ---
 
 import React from 'react';
@@ -44,44 +44,24 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
     </div>
   </div>
 
-  {/* Create Cards - One in each column */}
-  <div className={styles.pathCard}>
-    <div className={styles.cardHeader}>
-      <div className={styles.cardIconWrapper}>
-        <img src="/img/academy/icons/Book.svg" alt="" />
-      </div>
-      <h3 className="card-title">Book of Powerhouse</h3>
-    </div>
-    <div className={styles.cardContent}>
-      <a href="/docs/bookofpowerhouse/Overview" className="path-button">The Vision of Powerhouse</a>
-    </div>
-  </div>
+  {/* Row 1: [Empty Placeholder], Create, [Empty Placeholder] */}
+  <div></div> {/* Placeholder for the deleted "New Link" card */}
 
   <div className={styles.pathCard} style={{ border: '1px solid #4FC86F' }}>
     <div className={styles.cardHeader}>
       <div className={styles.cardIconWrapper}>
-        <img src="/img/academy/icons/Create.svg" alt="" />
+        <img src="/img/academy/icons/BuilderEnvironment.svg" alt="" />
       </div>
-      <h3 className="card-title">Create</h3>
+      <h3 className="card-title">Get Started</h3>
     </div>
     <div className={styles.cardContent}>
-      <a href="/docs/academy/GetStarted/ToDoList/CreateNewPowerhouseProject" className="path-button">Build a Todo-list Document Model</a>
+      <a href="/docs/academy/GetStarted/CreateNewPowerhouseProject" className="path-button">Build a Todo-list Document Model</a>
     </div>
   </div>
 
-  <div className={styles.pathCard}>
-    <div className={styles.cardHeader}>
-      <div className={styles.cardIconWrapper}>
-        <img src="/img/academy/icons/Advanced.svg" alt="" />
-      </div>
-      <h3 className="card-title">Document Model Theory</h3>
-    </div>
-    <div className={styles.cardContent}>
-      <a href="/docs/academy/GetStarted/DocumentModelTheory/WhatIsADocumentModel" className="path-button">Deep Dive into Document Modelling</a>
-    </div>
-  </div>
+  <div></div> {/* Placeholder for the deleted "Document Model Theory" card */}
 
-  {/* Left Column Card with 2 buttons */}
+  {/* Row 2: Build User Experiences, Builder Track Image, Work with Data */}
   <div className={styles.pathCard} style={{ border: '1px solid #4FC86F' }}>
     <div className={styles.cardHeader}>
       <div className={styles.cardIconWrapper}>
@@ -90,35 +70,34 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
       <h3 className="card-title">Build User Experiences</h3>
     </div>
     <div className={styles.cardContent}>
-      <a href="/docs/academy/GetStarted/ToDoList/BuildToDoListEditor" className="path-button">Building a Todo-list Editor</a>
-      <a href="/docs/academy/BuildingUserExperiences/BuildingBeautifulDocumentEditors" className="path-button">Building Beautiful Document Editors</a>
-      <a href="/docs/academy/AdvancedTutorial/BuildingUserExperiences/BuildingADriveExplorer" className="path-button">Building Custom Drive Explorers</a>
+      <a href="/docs/academy/GetStarted/BuildToDoListEditor" className="path-button">Building a Todo-list Editor</a>
+      <a href="/docs/academy/BuildingUserExperiences/BuildingBeautifulDocumentEditors" className="path-button">Building Document Editors</a>
+      <a href="/docs/academy/MasteryTrack/BuildingUserExperiences/BuildingADriveExplorer" className="path-button">Building Custom Drive Explorers</a>
+      <a href="/docs/academy/ComponentLibrary/DocumentEngineering" className="path-button">Component Library</a>
     </div>
   </div>
 
-  {/* Middle column with Union.svg */}
-  <div className={styles.middleColumn} style={{ 
-    display: 'flex', 
-    justifyContent: 'center', 
-    alignItems: 'flex-start', 
+  <div className={styles.middleColumn} style={{
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
     paddingTop: '-20px',
     position: 'relative'
   }}>
     <img src="/img/Union.svg" alt="Powerhouse Union" width="250" />
-    <div style={{ 
+    <div style={{
       position: 'absolute',
       top: '18px',
-      backgroundColor: 'white', 
-      padding: '8px 16px', 
+      backgroundColor: 'white',
+      padding: '8px 16px',
       borderRadius: '8px',
       textAlign: 'center',
       zIndex: 2,
     }}>
-      <h3 className="card-title" style={{ margin: 0 }}>Builder Track</h3>
+      <h3 className="card-title" style={{ margin: 0 }}>Mastery Track</h3>
     </div>
   </div>
 
-  {/* Right Column Card with 3 buttons */}
   <div className={styles.pathCard} style={{ border: '1px solid #4FC86F' }}>
     <div className={styles.cardHeader}>
       <div className={styles.cardIconWrapper}>
@@ -127,13 +106,14 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
       <h3 className="card-title">Work with Data</h3>
     </div>
     <div className={styles.cardContent}>
-      <a href="//docs/academy/AdvancedTutorial/WorkWithData/ReadingAndWritingThroughTheAPI" className="path-button">Reading & Writing through the API</a>
-      <a href="/docs/academy/AdvancedTutorial/WorkWithData/WorkingWithSubgraphs" className="path-button">Create your own Subgraph</a>
+      <a href="//docs/academy/MasteryTrack/WorkWithData/ReadingAndWritingThroughTheAPI" className="path-button">Reading & Writing through the API</a>
+      <a href="/docs/academy/MasteryTrack/WorkWithData/WorkingWithSubgraphs" className="path-button">Create your own Subgraph</a>
+      <a href="/docs/academy/WorkWithData/Analytics Engine/intro" className="path-button">Using the Analytics Engine</a>
       <a href="/docs/academy/WorkWithData/Analytics Engine/intro" className="path-button">Using the Analytics Engine</a>
     </div>
   </div>
 
-  {/* Launch Card - Full Width with 3 column buttons */}
+  {/* Launch Card - Full Width with 3 column buttons - RE-INSERTED */}
   <div className={`${styles.pathCard} ${styles.fullWidth}`}>
     <div className={styles.cardHeader} style={{ justifyContent: 'center' }}>
       <div className={styles.cardIconWrapper}>
@@ -143,14 +123,14 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
     </div>
     <div className={styles.cardContent}>
       <div className={styles.buttonContainer}>
-        <a href="/docs/academy/AdvancedTutorial/Launch/PublishYourProject" className="path-button">Package & Publish</a>
+        <a href="/docs/academy/MasteryTrack/Launch/PublishYourProject" className="path-button">Package & Publish</a>
         <a href="/docs/academy/Launch/LaunchYourBackend" className="path-button">Launch Back-end</a>
         <a href="/docs/academy/Launch/LaunchYourFrontend" className="path-button">Launch Front-end</a>
       </div>
     </div>
   </div>
 
-  {/* Cookbook Card - Left Column */}
+  {/* Row 3: Cookbook, Use-cases, Advanced Topics */}
   <div className={styles.pathCard}>
     <div className={styles.cardHeader}>
       <div className={styles.cardIconWrapper}>
@@ -163,19 +143,28 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
     </div>
   </div>
 
-  {/* Empty middle column */}
-  <div></div>
+  {/* Ensure this Use-cases Card block is clean */}
+  <div className={styles.pathCard}> {/* New Use-cases Card */}
+    <div className={styles.cardHeader}>
+      <div className={styles.cardIconWrapper}>
+        <img src="/img/academy/icons/Cookbook.svg" alt="Use-cases Icon" />
+      </div>
+      <h3 className="card-title">Use-cases</h3>
+    </div>
+    <div className={styles.cardContent}>
+      <a href="/docs/academy/ExampleUsecases/Chatroom/SetupBuilderEnvironment" className="path-button">Explore Use-cases</a>
+    </div>
+  </div>
 
-  {/* Advanced Topics Card - Right Column */}
   <div className={styles.pathCard}>
     <div className={styles.cardHeader}>
       <div className={styles.cardIconWrapper}>
         <img src="/img/academy/icons/Advanced.svg" alt="" />
       </div>
-      <h3 className="card-title">Advanced Topics</h3>
+      <h3 className="card-title">Architecture</h3>
     </div>
     <div className={styles.cardContent}>
-      <a href="/docs/academy/Architecture/PowerhouseArchitecture" className="path-button">Learn More</a>
+      <a href="/academy/05-Architecture/00-PowerhouseArchitecture" className="path-button">Learn More</a>
     </div>
   </div>
 </div>