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

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 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

package/docs/academy/01-GetStarted/04-BuildToDoListEditor.md

@@ -197,7 +197,7 @@ When you add the editor code, you'll see it makes use of two components, the `Ch
 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 Document Engineering design system and Storybook, see [Using the Powerhouse Document Engineering](/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 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:
 :::

package/docs/academy/01-GetStarted/home.mdx

@@ -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">New Link</h3>
-    </div>
-    <div className={styles.cardContent}>
-      <a href="@callme-t" 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/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/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}>
@@ -91,34 +71,33 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
     </div>
     <div className={styles.cardContent}>
       <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 Beautiful Document Editors</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}>
@@ -130,10 +109,11 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
       <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}>
@@ -150,7 +130,7 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
     </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,16 +143,25 @@ 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="/academy/05-Architecture/00-PowerhouseArchitecture" className="path-button">Learn More</a>

package/docs/academy/02-MasteryTrack/01-BuilderEnvironment/03-BuilderTools.md

@@ -178,7 +178,7 @@ The Powerhouse Design System is a collection of reusable front-end components ba
 - Automatic inclusion as a dependency in new Document Model projects
 - Customization options using CSS variables
 
-We cover some of these topics in our design system documentation. Read more about the [design system here](/academy/ComponentLibrary/PowerhouseDesignSystem)
+We cover some of these topics in our design system documentation. Read more about the [design system here](/academy/ComponentLibrary/DocumentEngineering)
 
 ## Reactor Libraries
 ___

package/docs/academy/04-APIReferences/00-PowerhouseCLI.md

@@ -1,19 +1,21 @@
-# Powerhouse CLI (WIP)
+# Powerhouse CLI
 
 ### Installing the Powerhouse CLI 
 :::tip
-The Powerhouse CLI tool is the only essential tool to install on this page.   
-Once you've installed it with the command below you can continue to the next steps.
-:::
-
+The **Powerhouse CLI tool** is the only essential tool to install on this page. Install it with the command below. 
+You can find all of the commands on this page, similar to what would displayed when using ph --help or ph *command* --help. 
+Use the table of content or the search function to find what you are looking for.
 The Powerhouse CLI (`ph-cmd`) is a command-line interface tool that provides essential commands for managing Powerhouse projects. You can get access to the Powerhouse ecosystem tools by installing them globally using:
+
 ```bash
 pnpm install -g ph-cmd
 ``` 
+ :::
 
-This tool will be fundamental on your journey when creating, building, and running Document Models
+<!-- AUTO-GENERATED-CLI-COMMANDS-START -->
 
-<!-- AUTO-GENERATED-CLI-COMMANDS-START -->\n<!-- This content is automatically generated. Do not edit directly. -->\n### ph-cmd Commands\n\n- [Init](#init)
+## ph-cmd Commands
+- [Init](#init)
 - [Setup Globals](#setup-globals)
 - [Update](#update)
 - [Use](#use)
@@ -23,13 +25,13 @@ This tool will be fundamental on your journey when creating, building, and runni
 ```
 Command Overview:
   The init command creates a new Powerhouse project with optimal defaults. It sets up a fully 
-  configured project structure with all necessary dependencies, configurations, and boilerplate.   
+  configured project structure with all necessary dependencies, configurations, and boilerplate.
 
   This command:
-  1. Creates a new project with the specified name.
-  2. Installs all required dependencies for Powerhouse development.
-  3. Sets up a proper project structure and configuration files.
-  4. Can run in interactive mode for customized setup.
+  1. Creates a new project with the specified name
+  2. Installs all required dependencies for Powerhouse development
+  3. Sets up a proper project structure and configuration files
+  4. Can run in interactive mode for customized setup
 
 Arguments:
   [project-name]        Optional. Name of the project to create. If not provided,
@@ -100,9 +102,9 @@ Options:
 
 Project Structure:
   The command will set up a project with the following structure:
-  - Proper configuration files for TypeScript and ESLint.
-  - Dependencies for Powerhouse packages.
-  - Build and development scripts.
+  - Proper configuration files for TypeScript and ESLint
+  - Dependencies for Powerhouse packages
+  - Build and development scripts
 
 Examples:
   $ ph setup-globals my-project          # Create a new project named "my-project"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@powerhousedao/academy",
-  "version": "0.1.0-dev.4",
+  "version": "0.1.0-dev.5",
   "homepage": "https://powerhouse.academy",
   "dependencies": {
     "@codesandbox/sandpack-react": "^2.14.4",
@@ -37,7 +37,7 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus serve",
-    "dev": "docusaurus start",
+    "dev": "docusaurus start --no-open",
     "build": "NODE_OPTIONS=--max_old_space_size=2048 docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",

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:
@@ -97,7 +97,7 @@ const sidebars: SidebarsConfig = {
       items: [
         {
           type: 'doc',
-          id: 'academy/ComponentLibrary/PowerhouseDesignSystem',
+          id: 'academy/ComponentLibrary/DocumentEngineering',
         },
         {
           type: 'html',