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

package/sidebars.ts

@@ -1,4 +1,4 @@
-import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
+import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
 
 /**
  * Creating a sidebar enables you to:
@@ -16,17 +16,78 @@ const sidebars: SidebarsConfig = {
     {
       type: 'category',
       label: 'Get Started',
-      items: [{ type: 'autogenerated', dirName: 'academy/01-GetStarted' }],
+      link: {
+        type: 'doc',
+        id: 'academy/GetStarted/home',
+      },
+      items: [
+        'academy/GetStarted/ExploreDemoPackage',
+        'academy/GetStarted/CreateNewPowerhouseProject',
+        'academy/GetStarted/DefineToDoListDocumentModel',
+        'academy/GetStarted/ImplementOperationReducers',
+        'academy/GetStarted/BuildToDoListEditor',
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Mastery Track',
+      items: [
+        {
+          type: 'category',
+          label: 'Builder Environment',
+          link: {
+            type: 'doc',
+            id: 'academy/MasteryTrack/BuilderEnvironment/Prerequisites'
+          },
+          items: [
+            'academy/MasteryTrack/BuilderEnvironment/Prerequisites',
+            'academy/MasteryTrack/BuilderEnvironment/StandardDocumentModelWorkflow',
+            'academy/MasteryTrack/BuilderEnvironment/BuilderTools',
+          ]
+        },
+        {
+          type: 'category',
+          label: 'Document Model Creation',
+          link: {
+            type: 'generated-index',
+          },
+          items: [{type: 'autogenerated', dirName: 'academy/02-MasteryTrack/02-DocumentModelCreation'}]
+        },
+        {
+          type: 'category',
+          label: 'Building User Experiences',
+          link: {
+            type: 'generated-index',
+          },
+          items: [{type: 'autogenerated', dirName: 'academy/02-MasteryTrack/03-BuildingUserExperiences'}]
+        },
+        {
+          type: 'category',
+          label: 'Work With Data',
+          link: {
+            type: 'generated-index',
+          },
+          items: [{type: 'autogenerated', dirName: 'academy/02-MasteryTrack/04-WorkWithData'}]
+        },
+        {
+          type: 'category',
+          label: 'Launch',
+          link: {
+            type: 'generated-index',
+          },
+          items: [{type: 'autogenerated', dirName: 'academy/02-MasteryTrack/05-Launch'}]
+        }
+      ],
     },
     {
       type: 'category',
-      label: 'Advanced Tutorial',
-      items: [{ type: 'autogenerated', dirName: 'academy/02-AdvancedTutorial' }],
+      label: 'Example Usecases',
+      items: [{ type: 'autogenerated', dirName: 'academy/03-ExampleUsecases' }],
     },
     {
       type: 'category',
       label: 'API References',
-      items: [{ type: 'autogenerated', dirName: 'academy/03-APIReferences' }],
+      items: [{ type: 'autogenerated', dirName: 'academy/04-APIReferences' }],
     },
 
     // Manually define the Component Library category
@@ -34,20 +95,46 @@ const sidebars: SidebarsConfig = {
       type: 'category',
       label: 'Component Library',
       items: [
+        {
+          type: 'doc',
+          id: 'academy/ComponentLibrary/DocumentEngineering',
+        },
         {
           type: 'html',
           value: `
-            <a href="https://storybook.powerhouse.academy/" target="_blank" rel="noopener" style="display: flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: none;">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style="vertical-align: middle; margin-left: 13px;">
-                <rect width="24" height="24" rx="4" fill="#FF4785"/>
-                <text x="12" y="16" text-anchor="middle" fill="white" font-size="12" font-family="Arial" font-weight="bold">SB</text>
-              </svg>
-              Storybook
+            <a class="menu__link" href="https://storybook.powerhouse.academy/" target="_blank" rel="noopener" style="display: flex; align-items: center; justify-content: space-between; font-weight: 500; text-decoration: none;">
+              <span style="display: flex; align-items: center; gap: 6px;">
+                Storybook
+                <img src="/img/storybook-icon.svg" alt="Storybook" width="20" height="20" />
+              </span>
+              <svg width="20" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7v2H5v14h14v-6h2ZM13 3h8v8h-2V5.414L11.707 12.707l-1.414-1.414L17.586 4H13V3Z"/></svg>
             </a>
           `,
         },
-        // Autogenerate the rest of the docs in this folder
-        {type: 'autogenerated', dirName: 'academy/04-ComponentLibrary'},
+        {
+          type: 'doc',
+          id: 'academy/ComponentLibrary/BuildingWithScalars',
+        },
+        {
+          type: 'category',
+          label: 'Scalar Components',
+          items: [{type: 'autogenerated', dirName: 'academy/06-ComponentLibrary/03-Scalar-Components'}],
+        },
+        {
+          type: 'category',
+          label: 'Complex Components',
+          items: [{type: 'autogenerated', dirName: 'academy/06-ComponentLibrary/04-Complex-Components'}],
+        },
+        {
+          type: 'category',
+          label: 'Layout Components',
+          items: [{type: 'autogenerated', dirName: 'academy/06-ComponentLibrary/05-Layout-Components'}],
+        },
+        {
+          type: 'category',
+          label: 'Fragments',
+          items: [{type: 'autogenerated', dirName: 'academy/06-ComponentLibrary/06-Fragments'}],
+        },
       ],
     },
 
@@ -61,7 +148,6 @@ const sidebars: SidebarsConfig = {
     { type: 'doc', id: 'academy/Glossary', label: 'Glossary' },
     // ...add more as needed
   ],
-  bookofpowerhouseSidebar: [{type: 'autogenerated', dirName: 'bookofpowerhouse'}],
 };
 
 export default sidebars;

package/src/components/HomepageFeatures/index.tsx

@@ -25,7 +25,7 @@ const FeatureList: FeatureItem[] = [
   {
     title: "Switchboard",
     imageSrc: require("@site/static/img/switchboard.png").default,
-    docPath: "/docs/academy/AdvancedTutorial/WorkWithData/ReadingAndWritingThroughTheAPI",
+    docPath: "/docs/academy/MasteryTrack/WorkWithData/ReadingAndWritingThroughTheAPI",
     description: <>Get access to the open API interface with Switchboard</>,
   },
   {
@@ -41,7 +41,7 @@ const FeatureList: FeatureItem[] = [
   {
     title: "Renown",
     imageSrc: require("@site/static/img/renown.png").default,
-    docPath: "/docs/academy/AdvancedTutorial/BuildingUserExperiences/Authorization/RenownAuthenticationFlow",
+    docPath: "/docs/academy/MasteryTrack/BuildingUserExperiences/Authorization/RenownAuthenticationFlow",
     description: (
       <>
         Dive into the customizable reputation system 
@@ -123,10 +123,10 @@ export default function HomepageFeatures() {
               <div className={styles.cardIconWrapper}>
                 <img src="/img/academy/icons/Book.svg" alt="" />
               </div>
-              <h3 className={styles.cardTitle}>Book of Powerhouse</h3>
+              <h3 className={styles.cardTitle}>New Link</h3>
             </div>
             <div className={styles.cardContent}>
-              <a href="/docs/bookofpowerhouse/Overview" className={styles.pathButton}>The Vision of Powerhouse</a>
+              <a href="@callmeT" className={styles.pathButton}>The Vision of Powerhouse</a>
             </div>
           </div>
 
@@ -138,7 +138,7 @@ export default function HomepageFeatures() {
               <h3 className={styles.cardTitle}>Create</h3>
             </div>
             <div className={styles.cardContent}>
-              <a href="/docs/academy/GetStarted/ToDoList/CreateNewPowerhouseProject" className={styles.pathButton}>Build a Todo-list Document Model</a>
+              <a href="/docs/academy/GetStarted/CreateNewPowerhouseProject" className={styles.pathButton}>Build a Todo-list Document Model</a>
             </div>
           </div>
 
@@ -163,9 +163,9 @@ export default function HomepageFeatures() {
               <h3 className={styles.cardTitle}>Build User Experiences</h3>
             </div>
             <div className={styles.cardContent}>
-              <a href="/docs/academy/GetStarted/ToDoList/BuildToDoListEditor" className={styles.pathButton}>Building a Todo-list Editor</a>
+              <a href="/docs/academy/GetStarted/BuildToDoListEditor" className={styles.pathButton}>Building a Todo-list Editor</a>
               <a href="/docs/academy/BuildingUserExperiences/BuildingBeautifulDocumentEditors" className={styles.pathButton}>Building Beautiful Document Editors</a>
-              <a href="/docs/academy/AdvancedTutorial/BuildingUserExperiences/BuildingADriveExplorer" className={styles.pathButton}>Building Custom Drive Explorers</a>
+              <a href="/docs/academy/MasteryTrack/BuildingUserExperiences/BuildingADriveExplorer" className={styles.pathButton}>Building Custom Drive Explorers</a>
             </div>
           </div>
 
@@ -200,8 +200,8 @@ export default function HomepageFeatures() {
               <h3 className={styles.cardTitle}>Work with Data</h3>
             </div>
             <div className={styles.cardContent}>
-              <a href="//docs/academy/AdvancedTutorial/WorkWithData/ReadingAndWritingThroughTheAPI" className={styles.pathButton}>Reading & Writing through the API</a>
-              <a href="/docs/academy/AdvancedTutorial/WorkWithData/WorkingWithSubgraphs" className={styles.pathButton}>Create your own Subgraph</a>
+              <a href="//docs/academy/MasteryTrack/WorkWithData/ReadingAndWritingThroughTheAPI" className={styles.pathButton}>Reading & Writing through the API</a>
+              <a href="/docs/academy/MasteryTrack/WorkWithData/WorkingWithSubgraphs" className={styles.pathButton}>Create your own Subgraph</a>
               <a href="/docs/academy/WorkWithData/Analytics Engine/intro" className={styles.pathButton}>Using the Analytics Engine</a>
             </div>
           </div>
@@ -216,7 +216,7 @@ export default function HomepageFeatures() {
             </div>
             <div className={styles.cardContent}>
               <div className={styles.buttonContainer}>
-                <a href="/docs/academy/AdvancedTutorial/Launch/PublishYourProject" className={styles.pathButton}>Package & Publish</a>
+                <a href="/docs/academy/MasteryTrack/Launch/PublishYourProject" className={styles.pathButton}>Package & Publish</a>
                 <a href="/docs/academy/Launch/LaunchYourBackend" className={styles.pathButton}>Launch Back-end</a>
                 <a href="/docs/academy/Launch/LaunchYourFrontend" className={styles.pathButton}>Launch Front-end</a>
               </div>

package/src/css/custom.css

@@ -448,3 +448,14 @@ html[data-theme='dark'] .DocSearch-Hits > *:empty {
   border-radius: 8px;
   border: none;
 }
+
+/* Styles for DocCardList as a list */
+.doc-card-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ifm-spacing-vertical);
+}
+
+.doc-card-list-item {
+  width: 100%; /* Ensure items take full width */
+}

package/src/pages/{index.tsx → _archive-homepage.tsx}

@@ -39,4 +39,4 @@ export default function Home(): JSX.Element {
       </main>
     </Layout>
   );
-}
+} 

package/src/theme/DocCardList/index.tsx

@@ -0,0 +1,30 @@
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {
+  useCurrentSidebarCategory,
+  filterDocCardListItems,
+} from '@docusaurus/plugin-content-docs/client';
+import DocCard from '@theme/DocCard';
+import type {Props} from '@theme/DocCardList';
+
+function DocCardListForCurrentSidebarCategory({className}: Props) {
+  const category = useCurrentSidebarCategory();
+  return <DocCardList items={category.items} className={className} />;
+}
+
+export default function DocCardList(props: Props): ReactNode {
+  const {items, className} = props;
+  if (!items) {
+    return <DocCardListForCurrentSidebarCategory {...props} />;
+  }
+  const filteredItems = filterDocCardListItems(items);
+  return (
+    <section className={clsx('doc-card-list', className)}>
+      {filteredItems.map((item, index) => (
+        <article key={index} className="doc-card-list-item margin-bottom--lg">
+          <DocCard item={item} />
+        </article>
+      ))}
+    </section>
+  );
+}

package/static/img/storybook-icon.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-31.5 0 319 319" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <defs>
+        <path d="M9.87245893,293.324145 L0.0114611411,30.5732167 C-0.314208957,21.8955842 6.33948896,14.5413918 15.0063196,13.9997149 L238.494389,0.0317105427 C247.316188,-0.519651867 254.914637,6.18486163 255.466,15.0066607 C255.486773,15.339032 255.497167,15.6719708 255.497167,16.0049907 L255.497167,302.318596 C255.497167,311.157608 248.331732,318.323043 239.492719,318.323043 C239.253266,318.323043 239.013844,318.317669 238.774632,318.306926 L25.1475605,308.712253 C16.8276309,308.338578 10.1847994,301.646603 9.87245893,293.324145 L9.87245893,293.324145 Z" id="path-1">
+
+    </defs>
+		<g>
+				<mask id="mask-2" fill="white">
+						<use xlink:href="#path-1">
+
+				</mask>
+				<use fill="#FF4785" fill-rule="nonzero" xlink:href="#path-1">
+
+				<path d="M188.665358,39.126973 L190.191903,2.41148534 L220.883535,0 L222.205755,37.8634126 C222.251771,39.1811466 221.22084,40.2866846 219.903106,40.3327009 C219.338869,40.3524045 218.785907,40.1715096 218.342409,39.8221376 L206.506729,30.4984116 L192.493574,41.1282444 C191.443077,41.9251106 189.945493,41.7195021 189.148627,40.6690048 C188.813185,40.2267976 188.6423,39.6815326 188.665358,39.126973 Z M149.413703,119.980309 C149.413703,126.206975 191.355678,123.222696 196.986019,118.848893 C196.986019,76.4467826 174.234041,54.1651411 132.57133,54.1651411 C90.9086182,54.1651411 67.5656805,76.7934542 67.5656805,110.735941 C67.5656805,169.85244 147.345341,170.983856 147.345341,203.229219 C147.345341,212.280549 142.913138,217.654777 133.162291,217.654777 C120.456641,217.654777 115.433477,211.165914 116.024438,189.103298 C116.024438,184.317101 67.5656805,182.824962 66.0882793,189.103298 C62.3262146,242.56887 95.6363019,257.990394 133.753251,257.990394 C170.688279,257.990394 199.645341,238.303123 199.645341,202.663511 C199.645341,139.304202 118.683759,141.001326 118.683759,109.604526 C118.683759,96.8760922 128.139127,95.178968 133.753251,95.178968 C139.662855,95.178968 150.300143,96.2205679 149.413703,119.980309 Z" fill="#FFFFFF" fill-rule="nonzero" mask="url(#mask-2)">
+
+		</g>
+</svg>

package/docs/academy/01-GetStarted/01-InstallDemoPackage.md

@@ -1,38 +0,0 @@
-# Install 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?   
-
-Let's get started by installing the Powerhouse command-line tool `ph-cmd` and then using it to install a pre-built demo package with document models & editors. 
-:::
-
-## Powerhouse CLI
-
-You'll 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.
-
-### Step 1: Install `ph-cmd`
-
-First, you need the Powerhouse command-line interface. 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 `ph` to install the demo package into a globals 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've now successfully installed `ph-cmd` and added your first package! To run the package locally in Connect, our collaboration & contributor app, you run the `ph connect` command. 

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

@@ -1,32 +0,0 @@
-# Login 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 is fit to function as your 'identity' as over time more experience and history will be accrued by this address. 
-:::
-
-## Login Flow 
-
-### Find the Renown Icon
-"**Login with Renown**" is a decentralized authentication flow that enables users to log into applications by signing a credential with their Ethereum wallet. Upon signing in, a Decentralized Identifier (DID) is created based on the user's 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 the user's behalf. That credential is stored securely on Ceramic, a decentralized data network. When the user performs 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.
-
-![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. 
-
-For a deeper dive into how these signed operations are recorded and visualized, see the [Operations History](/docs/academy/AdvancedTutorial/BuildingUserExperiences/DocumentTools/OperationHistory) page.
-

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

@@ -1,86 +0,0 @@
-# The ToDoList Data Model
-
-In this tutorial, you will learn how to design your document model and export it to be later used in your Powerhouse project.
-If you don't have a document model created yet, have a look at the previous step of this tutorial to create a new document model.
-
-Before you start, make sure you have the Connect application running with the command `ph connect`
-
-## ToDoList Document Model Schema
-
-Likely you have called your project 'ToDoList'. If not, please make a new document and pay attention to the capitalization as it influences our code. We'll continue with this project to teach you how to create a document model and later an editor for your model. We use the GraphQL Schema Definition Language (SDL) to define the document model schema. Below, you can see the SDL for the `ToDoList` document model.
-
-:::info
-This schema contains the **data structure** of the document model and the basic operations that can be performed on the document model.
-Document models 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.
-:::
-
-## State Schema
-
-```graphql
-# The state of our todolist
-type ToDoListState {
-  items: [ToDoItem!]!
-}
-
-# A single to-do item
-type ToDoItem {
-  id: ID!
-  text: String!
-  checked: Boolean!
-}
-```
-
-## Operations Schema
-
-```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!
-}
-```
-
-## Define the Document Model
-
-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 the **'document model'** editor to open the document model editor.
-2. Call your document model 'ToDoList' and pay 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.
-    
-    ![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 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 based on your Schema Definition Language. 
-5. Below the editor, there is an input field `Add module`. You need to create and name a module that the input operations will be added to. 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!
-    }
-    ```
-
-7. Repeat step 6 for the other input operations. 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.
-8. Once you have added all the input operations, click on the `Export` button, at the top right of the editor, to save the document model on 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)

package/docs/academy/01-GetStarted/03-ToDoList/_category_.json

@@ -1,8 +0,0 @@
-{
-  "label": "Create a ToDoList",
-  "position": 1,
-  "link": {
-    "type": "generated-index",
-    "description": "Get started with the ToDoList tutorial! Jump into creating a new Powerhouse project if you have NodeJs, VSCode, and Git installed."
-  }
-}

package/docs/academy/01-GetStarted/_category_.json

@@ -1,3 +0,0 @@
-{
-    "label": "Get Started"
-  }

package/docs/academy/02-AdvancedTutorial/01-Create/02-MoreTutorials/_category_.json

@@ -1,8 +0,0 @@
-{
-    "label": "More Tutorials",
-    "position": 3,
-    "link": {
-      "type": "generated-index",
-      "description": "Explore our tutorials to learn how to use document models in your project."
-    }
-}