@powerhousedao/academy 3.2.0-dev.2 → 3.2.0-dev.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@powerhousedao/academy",
-  "version": "3.2.0-dev.2",
+  "version": "3.2.0-dev.4",
   "homepage": "https://powerhouse.academy",
   "repository": {
     "type": "git",

package/sidebars.ts

@@ -15,7 +15,7 @@ const sidebars = {
   academySidebar: [
     {
       type: 'category',
-      label: 'Get Started',
+      label: 'Get started',
       link: {
         type: 'doc',
         id: 'academy/GetStarted/home',
@@ -30,11 +30,11 @@ const sidebars = {
     },
     {
       type: 'category',
-      label: 'Mastery Track',
+      label: 'Mastery track',
       items: [
         {
           type: 'category',
-          label: 'Builder Environment',
+          label: 'Builder environment',
           link: {
             type: 'doc',
             id: 'academy/MasteryTrack/BuilderEnvironment/Prerequisites'
@@ -47,10 +47,9 @@ const sidebars = {
         },
         {
           type: 'category',
-          label: 'Document Model Creation',
+          label: 'Document model creation',
           link: {
-            type: 'doc',
-            id: "academy/MasteryTrack/DocumentModelCreation/WhatIsADocumentModel"
+            type: 'generated-index',
           },
           items: [
             'academy/MasteryTrack/DocumentModelCreation/WhatIsADocumentModel',
@@ -64,7 +63,7 @@ const sidebars = {
         },
         {
           type: 'category',
-          label: 'Building User Experiences',
+          label: 'Building user experiences',
           link: {
             type: 'generated-index',
           },
@@ -72,7 +71,7 @@ const sidebars = {
         },
         {
           type: 'category',
-          label: 'Work With Data',
+          label: 'Work with data',
           link: {
             type: 'generated-index',
           },
@@ -90,7 +89,7 @@ const sidebars = {
     },
     {
       type: 'category',
-      label: 'Example Usecases',
+      label: 'Example usecases',
       items: [{ type: 'autogenerated', dirName: 'academy/03-ExampleUsecases' }],
     },
     {
@@ -102,7 +101,7 @@ const sidebars = {
     // Manually define the Component Library category
     {
       type: 'category',
-      label: 'Component Library',
+      label: 'Component library',
       items: [
         {
           type: 'doc',

package/src/css/custom.css

@@ -486,3 +486,21 @@ html[data-theme='dark'] .DocSearch-Hits > *:empty {
   font-weight: bold;
   text-decoration: none;
 }
+
+.image-container {
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-card-border-radius);
+  padding: 1rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin-bottom: 1.5rem;
+}
+
+.image-container img {
+  border-radius: var(--ifm-card-border-radius);
+}
+
+.image-container figcaption {
+  text-align: center;
+  margin-top: 0.5rem;
+  font-style: italic;
+}

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

@@ -1,88 +0,0 @@
-# Explore the Demo Package
-
-:::info How Long Will This Tutorial Take?
-We've designed this "Get Started" track to be as smooth as possible. The time it takes will vary based on your familiarity with modern web development tools.
-
-- **For Experienced Developers** (familiar with TypeScript, React, and CLIs), you can expect to complete the entire four-part tutorial in approximately **1 to 1.5 hours**.
-- **For Developers New to This Stack**, we recommend setting aside **3.5 to 4.5 hours**. This allows for time to understand not just the steps, but the core concepts behind them.
-
-This is just a guideline. The goal is to learn comfortably and build a solid foundation with Powerhouse!
-
-A more in theoretic and advanced version of this tutorial can also be found in [Mastery Track - Document Model Creation](../MasteryTrack/DocumentModelCreation/WhatIsADocumentModel).
-:::
-
-
-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 "**ToDoList Demo Package**". 
-This is also the package that you'll recreate during the tutorials and get's you familiar with Powerhouse. 
-
-```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 @powerhousedao/todo-demo-package.
-```
-
-This command downloads and sets up the todo-demo-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 open organization's, 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: Create an invoice & 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 invoice 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/04-APIReferences/01-ReactHooks

@@ -1,98 +0,0 @@
-# React Hooks (WIP)
-
-The idea is to make this feel as simple and familiar as using useState.
-Happy Path would look something like this: 
-
-```js
-// in a component that only needs to read a value, you can use
-const invoiceName = useReadDocumentField('myInvoiceDocumentId', 'name') // returns a string which is the `name`
-// and for documents that need to update data as well, you would have
-const updateInvoiceName = useUpdateDocumentField('myInvoiceDocumentId', 'name') // returns a function that takes a new string for the new name and dispatches the update
-// finally, we can combine these into a single hook which works like react's useState hook returning both the value and updater function
-const [invoiceName, updateInvoiceName] = useDocumentField('myInvoiceDocumentId', 'name')
-
-
-// Read-only value
-const invoiceName = useReadDocumentField('docId', 'name')
-
-// Write-only updater
-const updateInvoiceName = useUpdateDocumentField('docId', 'name')
-
-// Combined read + write (like useState)
-const [invoiceName, updateInvoiceName] = useDocumentField('docId', 'name')
-```
-
-Request	Translation
-Global access to drive state: A top-level, possibly context-based, way to introspect and interact with any document and its state tree without manually passing things around.
-Global dispatcher access: A utility or API (probably a hook or service function) where they give a document ID and get back all the relevant dispatch functions — kind of like a command palette for document ops.
-Time spent wiring > time spent building	Frustration with current DX (developer experience) — they want abstractions and helpers to just do the thing.
-
-Core Hooks & Patterns	
-- useDocumentField
-- useReadDocumentField
-- useUpdateDocumentField
-- useDocumentDispatch(docId):  updateX, delete, ... 
-
-Global Drive Access	
-- How to access and manipulate the global document tree
-- How to inspect children from parent context
-- Tree traversal utilities (if any)
-
-Convenience APIs	
-- Utility functions like getDispatchFunctions(docId)
-- “Quick Start” to manipulate any document like a pro
-
-Working with Context	
-- DriveContext: what lives there, how to use it
-- Example: using context to get current doc, sibling docs
-
-Best Practices & Patterns	
-- When to use useDocumentField vs getDispatch
-- Composing document fields into custom logic
-
-<details>
-<summary>Refresher on React Hooks</summary>
-
-React Hooks allow you to use various React features directly within your functional components. You can use built-in Hooks or combine them to create your own custom Hooks.
-
-**What are Custom Hooks?**
-A custom hook is a JavaScript function whose name starts with "use" and that calls other Hooks. They are used to:
-- Reuse stateful logic between components.
-- Abstract complex logic into a simpler interface.
-- Isolate side effects, particularly those managed by `useEffect`.
-
-**Key Built-in Hooks Examples:**
-- `useState`: Lets a component "remember" information (state).
-- `useEffect`: Lets a component perform side effects (e.g., data fetching, subscriptions, manually changing the DOM).
-- `useContext`: Lets a component receive information from distant parent components without explicitly passing props through every level of the component tree.
-
-**Naming Convention:**
-Hook names must always start with `use` followed by a capital letter (e.g., `useState`, `useOnlineStatus`).
-
-**Rules of Hooks:**
-1.  **Only Call Hooks at the Top Level**: Don't call Hooks inside loops, conditions, or nested functions.
-2.  **Only Call Hooks from React Functions**: Call Hooks from React functional components or from custom Hooks.
-
-It's important to note that a function should only be named and treated as a hook if it actually utilizes one or more built-in React hooks. If a function (even if named `useSomething`) doesn't call any built-in hooks, it behaves like a regular JavaScript function, and making it a "hook" offers no specific React advantages.
-
-For more details, see the official documentation and our API reference:
-- [Reusing Logic with Custom Hooks (react.dev)](https://react.dev/learn/reusing-logic-with-custom-hooks)
-- [Rules of Hooks (react.dev)](https://react.dev/reference/rules/rules-of-hooks)
-- [Powerhouse React Hooks API Reference](docs/academy/APIReferences/ReactHooks)
-
-</details>
-
-### Hook Name and Signature   
-The name of the hook and its TypeScript (or JavaScript) signature.
-### Description
-A brief explanation of what the hook does and when to use it.
-### Usage Example   
-A code snippet showing how to use the hook in a real-world scenario.
-### Parameters
-A table or list describing each parameter, its type, and its purpose.
-### Return Value   
-A description (and sometimes a table) of what the hook returns.
-### Notes / Caveats   
-Any important details, gotchas, or best practices.
-### Related Hooks
-Links to other relevant hooks or documentation.