@powerhousedao/academy 5.0.0-staging.1 → 5.0.0-staging.10

package/.vscode/settings.json

@@ -1,3 +1,3 @@
 {
   "svg.preview.background": "transparent"
-}
+}

package/CHANGELOG.md

@@ -1,3 +1,63 @@
+## 5.0.0-staging.10 (2025-09-11)
+
+### 🚀 Features
+
+- **reactor-api:** generate sdk ([ec107015c](https://github.com/powerhouse-inc/powerhouse/commit/ec107015c))
+- **reactor-api:** initial gql codegen ([3db9e9778](https://github.com/powerhouse-inc/powerhouse/commit/3db9e9778))
+- **monorepo:** make format consistent across ignores ([98469560f](https://github.com/powerhouse-inc/powerhouse/commit/98469560f))
+- **monorepo:** use consistent separate type imports ([6fd4ac0f4](https://github.com/powerhouse-inc/powerhouse/commit/6fd4ac0f4))
+- **monorepo:** use consistent formatting ([d2a1182c5](https://github.com/powerhouse-inc/powerhouse/commit/d2a1182c5))
+
+### 🩹 Fixes
+
+- linting fixes ([27fe7d397](https://github.com/powerhouse-inc/powerhouse/commit/27fe7d397))
+- annoyingly, you have to add ignores to the root eslint ([bb6d993bd](https://github.com/powerhouse-inc/powerhouse/commit/bb6d993bd))
+- **docs:** improve document hooks documentation ([d05fcb835](https://github.com/powerhouse-inc/powerhouse/commit/d05fcb835))
+
+### ❤️ Thank You
+
+- Benjamin Jordan (@thegoldenmule)
+- Callme-T
+- ryanwolhuter @ryanwolhuter
+
+## 5.0.0-staging.9 (2025-09-09)
+
+This was a version bump only for @powerhousedao/academy to align it with other projects, there were no code changes.
+
+## 5.0.0-staging.8 (2025-09-09)
+
+This was a version bump only for @powerhousedao/academy to align it with other projects, there were no code changes.
+
+## 5.0.0-staging.7 (2025-09-09)
+
+This was a version bump only for @powerhousedao/academy to align it with other projects, there were no code changes.
+
+## 5.0.0-staging.6 (2025-09-08)
+
+This was a version bump only for @powerhousedao/academy to align it with other projects, there were no code changes.
+
+## 5.0.0-staging.5 (2025-09-08)
+
+This was a version bump only for @powerhousedao/academy to align it with other projects, there were no code changes.
+
+## 5.0.0-staging.4 (2025-09-08)
+
+This was a version bump only for @powerhousedao/academy to align it with other projects, there were no code changes.
+
+## 5.0.0-staging.3 (2025-09-08)
+
+This was a version bump only for @powerhousedao/academy to align it with other projects, there were no code changes.
+
+## 5.0.0-staging.2 (2025-09-05)
+
+### 🩹 Fixes
+
+- **docs:** added zip redundancy to release notes ([3acfe1027](https://github.com/powerhouse-inc/powerhouse/commit/3acfe1027))
+
+### ❤️ Thank You
+
+- Callme-T
+
 ## 5.0.0-staging.1 (2025-09-04)
 
 This was a version bump only for @powerhousedao/academy to align it with other projects, there were no code changes.

package/README.md

@@ -1,8 +1,8 @@
 # Website
 
 This documentation website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
-To contribute to the documentation please work on a feature branch in case of big refactors, and build & serve before pushing to the development branch. 
-Pushing from the dev branch to the main branch will trigger an auto deployment in Heroku for the staging deployment. 
+To contribute to the documentation please work on a feature branch in case of big refactors, and build & serve before pushing to the development branch.
+Pushing from the dev branch to the main branch will trigger an auto deployment in Heroku for the staging deployment.
 
 ### Installation
 
@@ -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. The server will break upon broken links or big navigation/relinking. 
+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/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
 };

package/blog/BeyondCommunication-ABlueprintForDevelopment.md

@@ -3,7 +3,7 @@ title: Beyond Communication - A Blueprint for Development
 description: GraphQL Schema’s as a common language for software design
 slug: Graphql-schema-as-a-common-language
 authors:
-  - name: Call me T. 
+  - name: Call me T.
     title: Product Manager at Powerhouse
     image_url: https://avatars.githubusercontent.com/u/148560082?v=4
     socials:
@@ -12,6 +12,7 @@ tags: [Design thinking, Tooling, Product, GraphQL, Schema's]
 image: https://i.imgur.com/mErPwqL.png
 hide_table_of_contents: false
 ---
+
 GraphQL Schema’s as a common language for software design, bridging the gaps between all stakeholders with the help of a single source of truth document model.
 
 <!-- truncate -->
@@ -26,7 +27,7 @@ GraphQL Schema’s as a common language for software design, bridging the gaps b
 
 #### For non-technical contributors, schemas offer a clear, readable map of how data flows through a system. Business analysts, product managers, and designers can quickly grasp the relationships between data types and operations without needing to dive into code. “**For developers, schemas serve as a contract, reducing ambiguity during implementation**”. Queries and mutations clearly define how data can be fetched or modified, leaving little room for misinterpretation.
 
-#### 
+####
 
 #### By bringing clarity to these conversations, GraphQL fosters collaboration within cross-functional teams and accelerates onboarding for new contributors.
 
@@ -34,12 +35,12 @@ GraphQL Schema’s as a common language for software design, bridging the gaps b
 
 The utility of GraphQL schemas extends far beyond communication. They act as a blueprint that shapes every phase of the development lifecycle:
 
-* **Planning and Design**:  
-  * During the design phase, schemas enable teams to validate assumptions early. Data requirements and workflows can be reviewed collaboratively, ensuring alignment before development begins.  
-* **Implementation**:  
-  * Developers use schemas as a definitive source of truth, minimizing the need for rework caused by unclear specifications.  
-* **Testing and Maintenance**:  
-  * When the schema evolves, it highlights changes or inconsistencies, making it easier to adapt systems without breaking existing functionality.
+- **Planning and Design**:
+  - During the design phase, schemas enable teams to validate assumptions early. Data requirements and workflows can be reviewed collaboratively, ensuring alignment before development begins.
+- **Implementation**:
+  - Developers use schemas as a definitive source of truth, minimizing the need for rework caused by unclear specifications.
+- **Testing and Maintenance**:
+  - When the schema evolves, it highlights changes or inconsistencies, making it easier to adapt systems without breaking existing functionality.
 
 The result is a smoother development process, where every stakeholder operates with a shared understanding of the system’s architecture.
 
@@ -49,9 +50,9 @@ GraphQL's design pairs naturally with the Command Query Responsibility Segregati
 
 In a CQRS-driven architecture:
 
-* **Queries** retrieve data efficiently.  
-* **Mutations** handle data modifications.  
-* **Subscriptions** enable real-time updates.
+- **Queries** retrieve data efficiently.
+- **Mutations** handle data modifications.
+- **Subscriptions** enable real-time updates.
 
 GraphQL’s separation of these operations ensures clarity and scalability, especially in distributed systems. Developers can optimize read and write models independently, leading to improved performance and maintainability. This structured approach also simplifies troubleshooting and ensures a smoother evolution of complex systems.
 
@@ -59,12 +60,12 @@ GraphQL’s separation of these operations ensures clarity and scalability, espe
 
 GraphQL’s strong typing makes it a natural ally for TypeScript, a language known for its type safety and developer-friendly features. Together, they form a powerful combination that enhances developer experience and system reliability.
 
-* **Type Safety Across the Stack**:  
-  * Developers can auto-generate TypeScript types from GraphQL schemas, ensuring consistency between client and server. This reduces boilerplate code and eliminates many common runtime errors.  
-* **Improved Developer Productivity**:  
-  * With type safety built into both the API and the client code, developers can catch potential issues during development, saving time and reducing bugs.  
-* **Seamless Front-End Integrations**:  
-  * For front-end teams, GraphQL and TypeScript streamline the process of building data-driven applications, ensuring that APIs and components stay in sync.
+- **Type Safety Across the Stack**:
+  - Developers can auto-generate TypeScript types from GraphQL schemas, ensuring consistency between client and server. This reduces boilerplate code and eliminates many common runtime errors.
+- **Improved Developer Productivity**:
+  - With type safety built into both the API and the client code, developers can catch potential issues during development, saving time and reducing bugs.
+- **Seamless Front-End Integrations**:
+  - For front-end teams, GraphQL and TypeScript streamline the process of building data-driven applications, ensuring that APIs and components stay in sync.
 
 This synergy results in cleaner, more reliable code and a significantly improved development experience.
 
@@ -72,12 +73,12 @@ This synergy results in cleaner, more reliable code and a significantly improved
 
 Beyond fostering better communication and aligning stakeholders, GraphQL drives efficiency in several key ways:
 
-* **Streamlined API Development**:  
-  * With its declarative queries, GraphQL eliminates over-fetching and under-fetching of data, allowing front-end teams to request only what they need.  
-* **Empowered Non-Technical Contributors**:  
-  * The interactive nature of GraphQL schemas makes them accessible to non-technical stakeholders, enabling them to explore APIs independently and contribute more effectively to design discussions. The ‘lingua franca’ characteristic now truly starts to live up to its promises as designer or business analysts now can interact with the base schema and steer and discuss potential solutions together with the development team.   
-* **Real-Time Introspection**:  
-  * Tools like GraphQL Playground allow teams to inspect and test APIs dynamically, making development and debugging faster and more collaborative.
+- **Streamlined API Development**:
+  - With its declarative queries, GraphQL eliminates over-fetching and under-fetching of data, allowing front-end teams to request only what they need.
+- **Empowered Non-Technical Contributors**:
+  - The interactive nature of GraphQL schemas makes them accessible to non-technical stakeholders, enabling them to explore APIs independently and contribute more effectively to design discussions. The ‘lingua franca’ characteristic now truly starts to live up to its promises as designer or business analysts now can interact with the base schema and steer and discuss potential solutions together with the development team.
+- **Real-Time Introspection**:
+  - Tools like GraphQL Playground allow teams to inspect and test APIs dynamically, making development and debugging faster and more collaborative.
 
 These features combine to create a more agile, responsive development environment, where teams can adapt quickly to changing requirements.
 
@@ -85,4 +86,4 @@ These features combine to create a more agile, responsive development environmen
 
 The success of any software project hinges on clear communication and shared understanding. GraphQL schemas provide the common language that teams need to align around a unified vision. From clarifying data relationships to supporting scalable architectures, GraphQL empowers organizations to overcome the "lost in translation" problem and focus on what truly matters: building great products.
 
-For teams seeking to improve collaboration, efficiency, and scalability, GraphQL is more than a tool—it’s a framework for shared success,
+For teams seeking to improve collaboration, efficiency, and scalability, GraphQL is more than a tool—it’s a framework for shared success,

package/blog/TheChallengeOfChange.md

@@ -1,9 +1,9 @@
 ---
 title: The Challenge of Change
-description: Rapid Application Development with document models. 
+description: Rapid Application Development with document models.
 slug: Rapid-Application-Development-with-document-models.
 authors:
-  - name: Call me T. 
+  - name: Call me T.
     title: Product Manager at Powerhouse
     image_url: https://avatars.githubusercontent.com/u/148560082?v=4
     socials:
@@ -12,6 +12,7 @@ tags: [Dao, Tooling]
 image: https://i.imgur.com/mErPwqL.png
 hide_table_of_contents: false
 ---
+
 ### **The Challenge of Change**
 
 The pace of innovation is relentless. Organizations today find themselves in a race to adapt to new technologies, shifting consumer demands, and evolving or opaque regulations. Yet, the traditional methods of building and maintaining software systems often lag behind the speed of change, creating bottlenecks that stifle growth and innovation.
@@ -20,10 +21,10 @@ The pace of innovation often outstrips an organization’s ability to adapt, kee
 
 <!-- truncate -->
 
-Across many industries, this comes down to a familiar struggle of common trade-offs in product and solution development. 
+Across many industries, this comes down to a familiar struggle of common trade-offs in product and solution development.
 
 **\- Speed vs. Accuracy:** The balance between haste or precision  
-**\- Customizability vs. Scalability:** Meeting specific needs or relentless standardisation 
+**\- Customizability vs. Scalability:** Meeting specific needs or relentless standardisation
 
 As businesses push to innovate, they face a crucial question: how can they accelerate development without sacrificing quality or flexibility?
 
@@ -37,19 +38,18 @@ The answer lies in embracing methodologies that prioritize agility and adaptabil
 
 Key benefits of RAD include:
 
-* **Rapid Prototyping**: Organizations can quickly test ideas without committing to large-scale development, allowing for faster feedback and iteration.  
-* **Iterative Development**: Instead of delivering a finished product all at once, RAD emphasizes incremental improvements, reducing the risk of misaligned expectations.  
-* **Adaptability to Change**: By designing with flexibility in mind, RAD allows organizations to pivot and respond to new demands or challenges with ease.
-
-These principles have been widely embraced in industries ranging from DAO’s, incubators, tech startups to multinational corporations (in the case of the latter often with the help of a high ticket consultant). Other methodologies from adjacent domains of RAD, that you might be more familiar with include: 
+- **Rapid Prototyping**: Organizations can quickly test ideas without committing to large-scale development, allowing for faster feedback and iteration.
+- **Iterative Development**: Instead of delivering a finished product all at once, RAD emphasizes incremental improvements, reducing the risk of misaligned expectations.
+- **Adaptability to Change**: By designing with flexibility in mind, RAD allows organizations to pivot and respond to new demands or challenges with ease.
 
-* **Lean Start-up Methodology**: Focussing on finding product market fit early with a minimum viable product through a build, measure, learn cycle.   
-* **Pre-totyping:** A method by Google's first engineering director focused on validating that you are building the ‘right it’ before you ‘build it’ right with the help of smoke tests or mock-ups.   
-* **Design-thinking:** Where designers & developers go through non-linear, iterative processes of discovery, definition, development & delivery of their ideas with the help of prototyping together with end-users.
+These principles have been widely embraced in industries ranging from DAO’s, incubators, tech startups to multinational corporations (in the case of the latter often with the help of a high ticket consultant). Other methodologies from adjacent domains of RAD, that you might be more familiar with include:
 
+- **Lean Start-up Methodology**: Focussing on finding product market fit early with a minimum viable product through a build, measure, learn cycle.
+- **Pre-totyping:** A method by Google's first engineering director focused on validating that you are building the ‘right it’ before you ‘build it’ right with the help of smoke tests or mock-ups.
+- **Design-thinking:** Where designers & developers go through non-linear, iterative processes of discovery, definition, development & delivery of their ideas with the help of prototyping together with end-users.
 
 ![Iteration](./images/Iteration.png)
-*Figure 1: Notice how  Design thinking, Lean Startup Methodology and Rapid Application Development all rely on tooling that put rapid iteration at the center of the methodology? It remains crucial to select the right tool with the correct prototype fidelity at any of the stages these methodologies prescribe*
+_Figure 1: Notice how Design thinking, Lean Startup Methodology and Rapid Application Development all rely on tooling that put rapid iteration at the center of the methodology? It remains crucial to select the right tool with the correct prototype fidelity at any of the stages these methodologies prescribe_
 
 ---
 
@@ -57,9 +57,9 @@ These principles have been widely embraced in industries ranging from DAO’s, i
 
 Despite their success in simpler times, traditional development methodologies are currently often falling short in today’s dynamic environments.
 
-* **Long Lead Times**: Developing complex systems from scratch can take months or even years, by which time business requirements may have shifted.  
-* **Limited Customization**: Off-the-shelf solutions may be fast to deploy but rarely align perfectly with an organization’s unique workflows.  
-* **High Costs of Change**: Adjusting systems mid-development often incurs significant costs and delays, making organizations hesitant to pivot.
+- **Long Lead Times**: Developing complex systems from scratch can take months or even years, by which time business requirements may have shifted.
+- **Limited Customization**: Off-the-shelf solutions may be fast to deploy but rarely align perfectly with an organization’s unique workflows.
+- **High Costs of Change**: Adjusting systems mid-development often incurs significant costs and delays, making organizations hesitant to pivot.
 
 To overcome these challenges, businesses need a new approach—one that combines speed, flexibility, and precision.
 
@@ -71,16 +71,16 @@ Powerhouse is proposing a framework built to address these very challenges, offe
 
 At the core of Powerhouse’s approach is its **document model-driven architecture**, a GraphQL schema based foundation that reimagines how data, workflows, and processes are structured. This architecture enables organizations to:
 
-* **Capture Data Effectively**: Modular document models allow organizations to define and adapt workflows with higher accuracy.   
-* **Automate Workflows**: With tools to streamline even the most complex processes, so organizations can focus on innovation instead of repetitive tasks.  
-* **Iterate and Evolve Rapidly**: Modular, reusable components reduce development times, enabling organizations to adapt to their most pressing challenges and changes. 
+- **Capture Data Effectively**: Modular document models allow organizations to define and adapt workflows with higher accuracy.
+- **Automate Workflows**: With tools to streamline even the most complex processes, so organizations can focus on innovation instead of repetitive tasks.
+- **Iterate and Evolve Rapidly**: Modular, reusable components reduce development times, enabling organizations to adapt to their most pressing challenges and changes.
 
 ---
 
 ### **From a front-end developers perspective**
 
->“The coolest part is being able to plug into any document model and start building UI components for it without the hassle of managing a 'backend' or 'state management' for the components. All front-end devs use and love redux, the event driven architecture these document models are using. But the fact that as a front end dev, you don't have to set up any of it, and can just plug into the underlying framework saves time. It allows me to focus on my actual tasks \- building awesome UI components and experiences. I could start thinking of the same document model but with a 1000 different UI’s depending on the user's specific needs and preferences. Like swapping skins in my favorite video game”
+> “The coolest part is being able to plug into any document model and start building UI components for it without the hassle of managing a 'backend' or 'state management' for the components. All front-end devs use and love redux, the event driven architecture these document models are using. But the fact that as a front end dev, you don't have to set up any of it, and can just plug into the underlying framework saves time. It allows me to focus on my actual tasks \- building awesome UI components and experiences. I could start thinking of the same document model but with a 1000 different UI’s depending on the user's specific needs and preferences. Like swapping skins in my favorite video game”
 
-The rapid application development process we’re setting up, allows us to move quicker from initial problem definition to potential prototype opens up time for designers and developers to actually test and iterate on their imagined solution. 
+The rapid application development process we’re setting up, allows us to move quicker from initial problem definition to potential prototype opens up time for designers and developers to actually test and iterate on their imagined solution.
 
 By prioritizing rapid, iterative development, Powerhouse aims to empower organizations to innovate faster, adapt more seamlessly, and achieve sustainable growth in even the most challenging environments.

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

@@ -2,7 +2,7 @@
 
 ## Let's get started
 
-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? 
+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?
 We will show you how to install the Powerhouse command-line tool `ph-cmd` and then use it to install a pre-built demo package with a document models, an editor and a drive-app.
 
 ## Step 1: Install the Powerhouse CLI
@@ -18,7 +18,7 @@ Verify the installation:
 
 ```bash
 ph-cmd --version
-```                                                   
+```
 
 ## Step 2: Install the to-do list demo package
 
@@ -73,27 +73,34 @@ This command downloads and sets up the `@powerhousedao/todo-demo-package`, makin
 
 </details>
 
-
-You have now successfully installed `ph-cmd` and added your first package! 
+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:
 
 ```bash
 ph connect
 ```
-Click the returned localhost URL and you should see Connect Studio appear in your browser. 
+
+Click the returned localhost URL and you should see Connect Studio appear in your browser.
+
 <figure className="image-container">
   <img src={require("./images/Connect.png").default} alt="Connect Home" />
   <figcaption>The Powerhouse Connect Studio interface.</figcaption>
 </figure>
 
-When you move to the settingswheel in the bottom right corner you'll get access to the **Package Manager**. 
-Here, you'll see that you've installed the `@powerhousedao/todo-demo-package`, which contains not only a **Document Model** and its accompanying editor but also a **Drive App** specific to the to-do document model. 
+When you move to the settingswheel in the bottom right corner you'll get access to the **Package Manager**.
+Here, you'll see that you've installed the `@powerhousedao/todo-demo-package`, which contains not only a **Document Model** and its accompanying editor but also a **Drive App** specific to the to-do document model.
 
 <figure className="image-container">
-  <img src={require("./images/Packagemanager.png").default} alt="Package Manager" />
-  <figcaption>The Package Manager showing the installed todo-demo-package.</figcaption>
+  <img
+    src={require("./images/Packagemanager.png").default}
+    alt="Package Manager"
+  />
+  <figcaption>
+    The Package Manager showing the installed todo-demo-package.
+  </figcaption>
 </figure>
 
 ## Step 4: Create a todo list document
@@ -124,20 +131,36 @@ Now move into the drive you've just created:
 - After closing the document, look at the To-do Drive App interface—you'll see that it tracks your tasks and displays a progress bar
 
 <figure className="image-container">
-  <img src={require("./images/TodoDriveApp.png").default} alt="Todo Drive App" />
+  <img
+    src={require("./images/TodoDriveApp.png").default}
+    alt="Todo Drive App"
+  />
   <figcaption>A list of todo's in the custom todo drive app. </figcaption>
 </figure>
 
 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.
 
 <figure className="image-container">
-  <img src={require("./images/OperationsHistoryButton.png").default} alt="Operations History Button" />
-  <figcaption> You can find the button to visit the operations history in the document model toolbar </figcaption>
+  <img
+    src={require("./images/OperationsHistoryButton.png").default}
+    alt="Operations History Button"
+  />
+  <figcaption>
+    {" "}
+    You can find the button to visit the operations history in the document
+    model toolbar{" "}
+  </figcaption>
 </figure>
 
 <figure className="image-container">
-  <img src={require("./images/OperationsHistory.png").default} alt="Operations History" />
-  <figcaption>Example of the operations history for a document, showing all modifications made to it in a list. </figcaption>
+  <img
+    src={require("./images/OperationsHistory.png").default}
+    alt="Operations History"
+  />
+  <figcaption>
+    Example of the operations history for a document, showing all modifications
+    made to it in a list.{" "}
+  </figcaption>
 </figure>
 
 Learn more about the [Operations History](../MasteryTrack/BuildingUserExperiences/DocumentTools/OperationHistory) and other document tools you get for free.
@@ -158,7 +181,9 @@ When signing in with Renown, use an Ethereum or blockchain address that can func
 
 <figure className="image-container">
   <img src={require("./images/RenownLogin.png").default} alt="Renown Login" />
-  <figcaption>The Renown login screen, prompting for a signature from a wallet.</figcaption>
+  <figcaption>
+    The Renown login screen, prompting for a signature from a wallet.
+  </figcaption>
 </figure>
 
 ### 5.2 Authorize Connect to sign document edits on your behalf
@@ -166,12 +191,20 @@ When signing in with Renown, use an Ethereum or blockchain address that can func
 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.
 
 <figure className="image-container">
-  <img src={require("./images/ConnectAddress.png").default} alt="Connect Address for DID" />
-  <figcaption>A newly generated DID and address shown within the Connect interface.</figcaption>
+  <img
+    src={require("./images/ConnectAddress.png").default}
+    alt="Connect Address for DID"
+  />
+  <figcaption>
+    A newly generated DID and address shown within the Connect interface.
+  </figcaption>
 </figure>
 
 <figure className="image-container">
-  <img src={require("./images/LoginComplete.png").default} alt="Renown Login Complete" />
+  <img
+    src={require("./images/LoginComplete.png").default}
+    alt="Renown Login Complete"
+  />
   <figcaption>Confirmation of a successful login with Renown.</figcaption>
 </figure>
 
@@ -182,16 +215,20 @@ By leveraging this system, every operation or modification made to a document is
 Now, return to your to-do list and make some additional changes. You'll notice that these operations are now signed with your Renown identity, making every action traceable and verifiable in the operations history.
 
 <figure className="image-container">
-  <img src={require("./images/OperationsHistorySignature.png").default} alt="Operation History Signature" />
-  <figcaption>Your DID is now signing the operations that are being added to the history.</figcaption>
+  <img
+    src={require("./images/OperationsHistorySignature.png").default}
+    alt="Operation History Signature"
+  />
+  <figcaption>
+    Your DID is now signing the operations that are being added to the history.
+  </figcaption>
 </figure>
 
 ## 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 network. 
+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 network.
 
-### Up next 
+### Up next
 
-Now that you have explored a Powerhouse package and discovered its basic functionalities, it is time to start building your own. 
+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/01-CreateNewPowerhouseProject.md

@@ -1,11 +1,13 @@
 # Create a new to-do list document
 
 ## Overview
-This tutorial guides you through creating a simplified version of a 'Powerhouse project' for a **To-do List**.   
-A Powerhouse project primarily consists of a document model and its editor.   
+
+This tutorial guides you through creating a simplified version of a 'Powerhouse project' for a **To-do List**.  
+A Powerhouse project primarily consists of a document model and its editor.  
 For this purpose, you'll be using Connect, our use-centric collaboration tool, locally, known as Connect in 'Studio mode'.
 
 ## Prerequisites
+
 - Powerhouse CLI installed: `pnpm install -g ph-cmd`
 - node.js 22 and pnpm installed
 - Visual Studio Code (or your preferred IDE)
@@ -14,12 +16,15 @@ For this purpose, you'll be using Connect, our use-centric collaboration tool, l
 If you need help with installing the prerequisites you can visit our page [prerequisites](/academy/MasteryTrack/BuilderEnvironment/Prerequisites)
 
 ## Quick start
+
 Create a new Powerhouse project with a single command:
+
 ```bash
 ph init
 ```
 
 ## Before you begin
+
 1. Open your terminal (either your system terminal or IDE's integrated terminal)
 2. Optionally, create a folder first to keep your Powerhouse projects:
 
@@ -27,18 +32,20 @@ ph init
    mkdir ph-projects
    cd ph-projects
    ```
+
 3. Ensure you're in the correct directory before running the `ph init` command.  
-In the terminal, you will be asked to enter the project name. Fill in the project name and press Enter.
-   ```bash
+   In the terminal, you will be asked to enter the project name. Fill in the project name and press Enter.
+
+   ````bash
     you@yourmachine:~/ph-projects % ph init
 
     ? What is the project name? ‣ getting-started
-    ```	
+    ```
 
     Once the project is created, you will see the following output:
     ```bash
     Initialized empty Git repository in /Users/you/ph-projects/getting-started/.git/
-    The installation is done! 
+    The installation is done!
     ```
 
     Navigate to the newly created project directory:
@@ -62,15 +69,17 @@ In the terminal, you will be asked to enter the project name. Fill in the projec
 
     A new browser window will open and you will see the Connect application. If it doesn't open automatically, you can open it manually by navigating to `http://localhost:3000/` in your browser.
 
-    You will see your local drive and a button to create a new drive.    
-    If you local drive is not present navigate into Settings in the bottom left corner. Settings > Danger Zone > Clear Storage.    
-    Clear the storage of your localhost application as it might has an old session cached.   
+    You will see your local drive and a button to create a new drive.
+    If you local drive is not present navigate into Settings in the bottom left corner. Settings > Danger Zone > Clear Storage.
+    Clear the storage of your localhost application as it might has an old session cached.
+
+   ````
 
-4. Move into your local drive.   
-Create a new document model by clicking the `DocumentModel` button, found in the 'New Document' section at the bottom of the page. 
+4. Move into your local drive.  
+   Create a new document model by clicking the `DocumentModel` button, found in the 'New Document' section at the bottom of the page.
 
 If you've followed the steps correctly, you'll have an empty document where you can define the **'Document Specifications'**.
 
 ## Up next
 
-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. 
+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.