@powerhousedao/academy 5.1.0-staging.0 → 5.1.0

package/docs/academy/05-Architecture/00-PowerhouseArchitecture.md

@@ -1,9 +1,6 @@
 # Powerhouse Architecture
 
-**Vetra is part of the Powerhouse Ecosystem** and acts as the builder platform and builder tooling for scalable network organizations. 
-
-The Powerhouse ecosystem makes use of 4 core host applications that together form a modular, scalable operating system for decentralized organizations. 
-Each application serves a distinct role, yet they are interdependent, working as a unified system to streamline operations, enhance collaboration, and drive automation.
+The Powerhouse ecosystem is built on five core host applications that together form a modular, scalable operating system for decentralized organizations. Each application serves a distinct role, yet they are interdependent, working as a unified system to streamline operations, enhance collaboration, and drive automation.
 
 These five applications are:
 
@@ -11,10 +8,45 @@ These five applications are:
 2. **Switchboard** – The data infrastructure and API engine.
 3. **Fusion** – The public-facing collaboration hub.
 4. **Renown** – The decentralized reputation and identity system.
+5. **Academy** – The onboarding and learning modules.
+
+Each application is designed to be modular yet complementary, ensuring smooth data flows, structured collaboration, and scalable automation. The functionality of the four host apps offers an integrated experience for running decentralized operations.
 
 ![Powerhouse Host Apps Interaction](./images/PowerhouseArchitecture.png)
 
-With the help of these host applications Powerhouse is launching 2 platforms that form an example of the infrastructure that can be build with the Powerhouse techstack.
+## How the Five Applications Work Together
+
+The Powerhouse ecosystem functions as a decentralized operating system, where each of the four core applications works in synergy to ensure seamless collaboration, structured data management, and automated workflows. Each application has a distinct purpose, yet their interconnectivity is what makes the system powerful.
+
+### 1. Connect: The Contributor's Workspace and Data Capture Point
+
+Connect is the entry point for individual contributors, where they install apps and packages tailored to specific business solutions, enabling collaboration in public or private settings.
+
+- All work in Connect is captured as document models, ensuring that data is structured, traceable, and immediately available for processing.
+- This structured data flows into Switchboard, making it accessible for analytics, automation, and API-driven integrations.
+- Fusion then utilizes this data to generate dashboards, summaries, and insights for decision-making.
+- Renown serves as the authentication and access gateway, ensuring that contributors can securely interact with the system.
+
+### 2. Switchboard: The Data Processing and Automation Engine
+
+Switchboard acts as the central nervous system, ensuring that data flows efficiently between applications and powers real-time coordination.
+
+- It ingests structured data from Connect and makes it available for further analysis, automation, and integrations.
+- The API interface allows developers and data engineers to fuel the broader system, providing insights and feeding data-driven workflows.
+- The processed data is then transmitted to Fusion, where it is transformed into dashboards, analytics, and key performance indicators (KPIs).
+
+### 3. Fusion: The Public Collaboration and Data Visualization Layer
+
+Fusion serves as the public-facing marketplace and collaboration hub, allowing contributors and organizations to interact with structured data captured from Connect and processed through Switchboard.
+
+- Fusion structures, summarizes, and visualizes key metrics, enabling users to make data-driven decisions.
+- It pulls relevant operational insights, helping stakeholders navigate and act on real-time data.
+- Users can directly access work completed in Connect, viewing reports, summaries, and discussions within Fusion's public and private environments.
+
+### 4. Renown: Authentication, Reputation, and Access Control
+
+Renown is the trust and identity layer, ensuring security, reputation tracking, and access control across the ecosystem.
 
-- [Vetra Builder Platform](https://vetra.io/): Sovereign infrastructure for scalable network organizations that is local first, built to scale. 
-- [Achra Decentralized Operations Platform](https://achra.com/): Where open organizations can procure and purchase services. 
+- It acts as the authentication gateway, determining who has permission to view, edit, or execute specific operations within the system.
+- Every action performed in Connect is tracked in the document history, making it fully auditable through Switchboard.
+- Fusion utilizes Renown to verify contributor credibility, ensuring that data-driven decisions are based on trusted and authenticated inputs.

package/docs/academy/05-Architecture/02-ReferencingMonorepoPackages

@@ -0,0 +1,65 @@
+# Referencing Monorepo Packages
+
+## **Context**
+
+In scenarios where a project is not part of the monorepo but needs to reference monorepo packages (e.g., using `@powerhousedeao/ph-cli`), there's a streamlined approach that avoids duplicating dependencies and maintains consistency with monorepo versions.
+
+---
+
+## **Approach**
+
+### **1. Using `link:` in `package.json`**
+
+Instead of manually copying dependencies or trying complex build setups, you can use the `link:` protocol to create a symlink to the monorepo package.
+
+```json
+{
+  "dependencies": {
+    "@powerhousedeao/ph-cli": "link:../monorepo/clis/ph-cli"
+  }
+}
+```
+
+This approach creates a symlink under the node_modules directory, linking directly to the specified monorepo package.
+
+### **2. Running the Linked CLI**
+
+After linking, you can run the CLI tool using pnpm:
+
+```bash
+pnpm install
+pnpm run ../powerhouse/clis/ph-cli
+```
+
+Alternatively, use the command through the linked CLI:
+
+```bash
+ph connect
+```
+
+This will invoke the connect package from the monorepo.
+
+### **3. Building Dependencies**
+
+To ensure all dependencies are correctly built:
+
+```bash
+nx run @powerhousedeao/ph-cli
+```
+
+This command will build all necessary dependencies within the monorepo.
+
+### **4. Key Insights**
+
+- **Symlink Simplicity:** The link: protocol is the least disruptive, as it avoids version conflicts and unnecessary duplication.
+- **Development Workflow:** Changes made to the connect code in the monorepo will be picked up automatically when using the linked CLI, as ph-cli defers calls to the respective packages.
+
+### **5. Troubleshooting**
+
+If dependencies aren't picked up correctly: Ensure the symlink path is accurate relative to the project root.
+
+For isolated package builds: Use nx run to trigger specific package builds when needed.
+
+### **6. Conclusion**
+Using link: is an effective, developer-friendly method to reference monorepo packages in external boilerplate projects. It supports efficient development workflows, reduces redundancy, and ensures consistency across environments.
+

package/docs/academy/05-Architecture/04-MovingBeyondCRUD

@@ -0,0 +1,61 @@
+# Moving Beyond CRUD
+
+Powerhouse uses "single field operations" as granular actions that go beyond traditional CRUD (Create, Read, Update, Delete) operations.   
+In a basic CRUD framework, the focus is on making entire objects or records editable as a whole, often leading to oversimplified data management that can't easily handle complex workflows or state transitions.
+
+## What Are Single Field Operations?
+These are focused, granular updates to individual fields within a document rather than treating the document as a whole. This approach allows for precise control and tracking of changes. For example:
+
+- Setting a Document Number (simple string input)
+- Changing Master Status (an enum dropdown selection)
+
+Each of these operations targets only one field and has a corresponding form that collects and submits the new value.
+
+## Why go beyond CRUD?
+
+### Granular State Tracking:
+Powerhouse's system emphasizes understanding how documents transition from one state to another in fine detail. By breaking down actions into specific field-level operations, it allows for tracking the exact sequence of changes, which is crucial for things like auditing, version control, and complex workflows.
+
+### Operational Focus:
+The system is designed around the idea of operations themselves—not just the data they manipulate. While traditional CRUD frameworks might treat each field as independently updatable without any logic or process attached, Powerhouse assigns specific operations that can enforce business rules and state transitions.
+
+### Customization & Flexibility:
+CRUD frameworks are often too rigid for real-world applications that need more nuanced behaviors. Powerhouse offers both the simplicity of CRUD for standard operations and the ability to go deeper, defining more complex, field-specific operations when needed. This hybrid approach ensures flexibility without sacrificing systematic structure.
+
+### Automation Potential:
+Even though creating these granular operations might seem tedious, the goal is to build a system where standard CRUD operations can eventually be auto-generated, leaving developers to focus only on defining the exceptional, non-standard behaviors.
+
+### Improved Permissions and User Intent:
+By having specific operations tied to individual fields, it becomes easier to manage permissions (e.g., who can change the master status but not the content) and to capture user intent more precisely, which is valuable in complex collaborative environments.
+
+
+## Understanding the Code Example
+
+![Alt text for the image](./images/image.png)
+
+| `SetDocNumberForm.tsx` (StringField) | `SetMasterStatusForm.tsx` (EnumField) |
+|-------------------------------------|---------------------------------------|
+| **Purpose:** To update the document number (a string field).<br /><br />**How it works:**<br />- A form is rendered with a StringField input<br />- The defaultValue comes from the document model (props.defaultValue.docNo)<br />- On submit (or onBlur), the new document number is dispatched via the dispatch function<br />- It uses a generic onSubmit handler that processes the collected input and triggers the document update<br /><br />**Key takeaway:**<br />- This is a simple, single field form that maps a scalar string to a reusable component (StringField)<br />- The form structure is systematic: label, name, placeholder, and onBlur event handler | **Purpose:** To update the master status (an enum field).<br /><br />**How it works:**<br />- A form is rendered with an EnumField dropdown<br />- The dropdown options are enum values like "APPROVED", "DEFERRED", etc.<br />- The default value is pre-filled from props.defaultValue.masterStatus<br />- On change, the form dispatches the updated status<br /><br />**Key takeaway:**<br />- This form uses an EnumField component, showcasing how different scalar types (in this case, enums) map to different input components<br />- Options are provided systematically, meaning they could potentially be auto-generated from the document model |
+
+
+
+## Why Is This Granular Approach Important?    
+1. **Systematic Yet Customizable:**
+Even we are manually building these forms now, the structure is simple and repeatable:
+- Identify the scalar type (string, enum, etc.).
+- Map it to a reusable component.
+- Use a standardized form structure with an onSubmit handler and a dispatch function.
+2. **Auto-Generation Potential:**
+The systematic nature of these forms means they could be automatically generated in the future.
+- For example, if a field is identified as a string, the system could auto-generate a form using a StringField.
+- For enums, it could auto-generate the EnumField with all valid options.
+
+
+## How to implement single field operations
+
+### At the schema definition level
+
+### At the frontend level
+
+
+

package/docs/academy/06-ComponentLibrary/00-DocumentEngineering.md

@@ -112,86 +112,38 @@ While Storybook aims for accuracy, there might occasionally be discrepancies or
 
 ## Implementing a Component
 
-Let's walk through the typical workflow for using a component from the document-engineering system, using `BooleanField` for a checkbox in the [TodoList editor](/academy/MasteryTrack/BuildingUserExperiences/BuildingDocumentEditors).
+Let's walk through the typical workflow for using a component from the document-engineering system, using the `Checkbox` from the [To-do List editor](/academy/MasteryTrack/BuildingUserExperiences/BuildingDocumentEditors).
 
-1.  **Identify the Need:** While building your feature (e.g., the TodoList editor), you determine the need for a standard UI element, like a checkbox to mark items as complete.
+1.  **Identify the Need:** While building your feature (e.g., the To-do List editor in `editor.tsx`), you determine the need for a standard UI element, like a checkbox.
 2.  **Consult the Document Engineering Components in Storybook:**
     - Open the Powerhouse Storybook instance. [https://storybook.powerhouse.academy](https://storybook.powerhouse.academy)
-    - Navigate or search to find the `BooleanField` component (used for checkboxes).
+    - Navigate or search to find the `Checkbox` component.
     - Review the visual examples and interactive demo.
-    - Examine the "Usage" snippet and the **Props table** to understand the basic implementation and available configuration options (`name`, `value`, `onChange`, etc.).
-3.  **Import the Component:** In your code editor, open the relevant file (e.g., `editors/todo-list-editor/components/Checkbox.tsx`). Add an import statement at the top to bring the component into your file's scope:
+    - Examine the "Usage" snippet and the **Props table** to understand the basic implementation and available configuration options (`label`, `value`, `onChange`, etc.).
+3.  **Import the Component:** In your code editor, open the relevant file (e.g., `editors/to-do-list/editor.tsx`). Add an import statement at the top to bring the component into your file's scope:
     ```typescript
-    import { Form, BooleanField } from "@powerhousedao/document-engineering/scalars";
+    import { Checkbox } from "@powerhousedao/document-engineering/scalars";
+    // Or import other components as needed:
+    // import { Checkbox, InputField, Button } from '@powerhousedao/document-engineering/scalars';
     ```
-    This line instructs the build process to locate the `Form` and `BooleanField` components within the installed `@powerhousedao/document-engineering/scalars` package and make them available for use.
-
-    :::info Form Wrapper Required
-    Scalar components like `BooleanField` must be wrapped in a `Form` component from the same package. This provides built-in validation and form state management.
-    :::
-
-4.  **Use and Configure the Component:** Place the component tag in your JSX where needed. Use the information from Storybook (usage snippet and props table) as a guide, but adapt the props to your specific requirements:
-
-    **Step 4a: Create a reusable Checkbox component**
-    ```typescript
-    // editors/todo-list-editor/components/Checkbox.tsx
-    import { Form, BooleanField } from "@powerhousedao/document-engineering/scalars";
-
-    interface CheckboxProps {
-      value: boolean;
-      onChange: (value: boolean) => void;
-    }
-
-    export const Checkbox = ({ value, onChange }: CheckboxProps) => {
-      return (
-        <Form onSubmit={() => {}}>
-          <BooleanField
-            name="checked"
-            description="Mark as complete"
-            value={value}
-            onChange={onChange}
-          />
-        </Form>
-      );
-    };
-    ```
-
-    **Step 4b: Use it in your Todo component with the document model hook**
+    This line instructs the build process to locate the `Checkbox` component within the installed `@powerhousedao/document-engineering/scalars` package and make it available for use.
+4.  **Use and Configure the Component:** Place the component tag in your JSX where needed. Use the information from Storybook (usage snippet and props table) as a guide, but adapt the props to your specific requirements within `editor.tsx`:
     ```typescript
-    // editors/todo-list-editor/components/Todo.tsx
-    import { useSelectedTodoListDocument, updateTodoItem } from "todo-tutorial/document-models/todo-list";
-    import type { TodoItem } from "todo-tutorial/document-models/todo-list";
-    import { Checkbox } from "./Checkbox.js";
-
-    type Props = { todo: TodoItem };
-
-    export function Todo({ todo }: Props) {
-      // Use the hook to get dispatch function
-      const [todoList, dispatch] = useSelectedTodoListDocument();
-
-      if (!todoList) return null;
-
-      return (
-        <div className="flex items-center gap-2">
-          <Checkbox
-            value={todo.checked}
-            onChange={() => {
-              dispatch(updateTodoItem({
-                id: todo.id,
-                checked: !todo.checked,
-              }));
-            }}
-          />
-          <span className={todo.checked ? "line-through" : ""}>
-            {todo.text}
-          </span>
-        </div>
-      );
-    }
+    // Example from the To-do List Editor:
+    <Checkbox
+        // Bind the checked state to data within editor.tsx
+        value={item.checked}
+        // Provide a function from editor.tsx to handle changes
+        onChange={() => {
+            dispatch(actions.updateTodoItem({
+                id: item.id,
+                checked: !item.checked,
+            }));
+        }}
+        // Other props like 'label' might be omitted or added as needed.
+    />
     ```
-
-    You configure the component's appearance and behavior by passing the appropriate values to its props. Note the use of the `useSelectedTodoListDocument` hook to access the dispatch function.
-
+    You configure the component's appearance and behavior by passing the appropriate values to its props.
 5.  **Test and Refine:** Run your application (e.g., using `ph connect`) to see the component in context. Verify its appearance and functionality.
 
 ## Usage

package/docs/academy/08-Glossary.md

@@ -13,17 +13,13 @@
 
 ## Software Components
 
-- **Model Context Protocol (MCP)** – A standardized protocol that enables AI agents and external tools to interact with systems through structured operations. Powerhouse uses MCP to provide AI access to document management capabilities.
 - **Reactor** – A storage node for Powerhouse documents and files with multiple storage adapters (local, cloud, decentralized).
-- **Reactor-MCP** – A Model Context Protocol server for the Powerhouse ecosystem that provides AI agents and tools with structured access to document model operations, serving as a bridge between AI systems and Powerhouse document management infrastructure.
 - **Powerhouse Switchboard** – A scalable API service that aggregates and processes document data.
 - **Powerhouse Fusion** – A platform front-end that hosts the public marketplace for SNO interactions.
 - **Powerhouse Renown** – A decentralized authentication system managing contributor reputation.
 - **Powerhouse Academy** – A training platform for onboarding and upskilling SNO contributors.
 - **Connect** – The contributor's public or private workspace, serving as the entry point for individual contributors to install apps and packages for specific business solutions.
 - **Powergrid** – A decentralized network of reactors that sync with each other.
-- **Preview Drive** – A local drive created in `--watch` mode during `ph vetra` development, used for testing local document models and editors without affecting the main synced drive.
-- **Remote Drive** – A Powerhouse drive hosted on a remote server (e.g., Vetra) that syncs across team members, enabling collaborative development on shared documents and document models.
 - **Powerhouse CLI (ph)** – The command-line tool for Powerhouse project initialization, code generation, package management, and running local development environments (Connect Studio). It also manages services, ensuring the terminology aligns with the updated setup guide.
 - **Connect App (Connect Studio)** – The primary Powerhouse application for defining document models, building/testing editors (in Studio mode), and collaborating on documents.
 - **Document Tools** – Built-in features within Powerhouse applications (e.g., Connect) that assist with document management, inspection, and interaction, such as Operations History.
@@ -78,13 +74,10 @@
 - **State (Local State in Editor)** – Temporary, UI-specific data within an editor (e.g., form inputs), not persisted in the global document state.
 - **Storybook (for Powerhouse Design System)** – Interactive environment for browsing and testing Powerhouse Design System UI components.
 - **Tailwind CSS (in Connect Studio)** – Utility CSS framework integrated into Connect Studio for styling document editors.
-- **Vetra** – A Powerhouse platform for hosting remote drives, enabling collaborative development and document synchronization across team members.
-- **Watch Mode (`--watch`)** – A development mode flag for `ph vetra` that enables dynamic loading of local document models and editors, creating a separate Preview Drive for testing changes in real-time.
 
 ## AI & Automation
 
 - **AI Assistants** – AI-powered contributors paired with human contributors to automate tasks and improve productivity.
-- **Document Model Agent** – A specialized AI agent that guides users through creating document models, handling requirements gathering, design confirmation, and implementation using MCP tools for state schema definition, operation creation, and code generation.
 - **AI Contributor Modes** – Configurable states that determine the AI assistant's behavior, permissions, and task focus.
 - **Task Automation & Scaling** – The use of AI to streamline repetitive tasks, improve communications, and enhance decision-making.
 - **Decentralized Identifier (DID)** – A user-controlled, globally unique ID, used in Renown to link a user's blockchain key to actions pseudonymously.

package/docusaurus.config.ts

@@ -19,6 +19,7 @@ const config: Config = {
   projectName: "", // Usually your repo name.
 
   onBrokenLinks: "warn",
+  onBrokenMarkdownLinks: "warn",
   deploymentBranch: "gh-pages",
   trailingSlash: false,
   onBrokenAnchors: "ignore",
@@ -31,12 +32,6 @@ const config: Config = {
     locales: ["en"],
   },
 
-  markdown: {
-    hooks: {
-      onBrokenMarkdownLinks: "warn",
-    },
-  },
-
   presets: [
     [
       "classic",
@@ -81,8 +76,8 @@ const config: Config = {
       title: "",
       logo: {
         alt: "My Site Logo",
-        src: "img/Vetra-logo-dark.svg",
-        srcDark: "img/vetra-logo-light.svg",
+        src: "img/Powerhouse-main.svg",
+        srcDark: "img/Powerhouse-main-light.svg",
         href: "/",
       },
       items: [
@@ -159,26 +154,6 @@ const config: Config = {
     prism: {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
-      magicComments: [
-        // Default highlight
-        {
-          className: 'theme-code-block-highlighted-line',
-          line: 'highlight-next-line',
-          block: { start: 'highlight-start', end: 'highlight-end' },
-        },
-        // Green for additions
-        {
-          className: 'code-block-added-line',
-          line: 'added-line',
-          block: { start: 'added-start', end: 'added-end' },
-        },
-        // Red for deletions
-        {
-          className: 'code-block-removed-line',
-          line: 'removed-line',
-          block: { start: 'removed-start', end: 'removed-end' },
-        },
-      ],
     },
     tableOfContents: {
       minHeadingLevel: 2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@powerhousedao/academy",
-  "version": "5.1.0-staging.0",
+  "version": "5.1.0",
   "homepage": "https://powerhouse.academy",
   "repository": {
     "type": "git",

package/sidebars.ts

@@ -11,6 +11,14 @@
 const sidebars = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
   academySidebar: [
+    {
+      type: "doc",
+      id: "academy/EthereumArgentinaHackathon",
+      label: "ETH Argentina Hackathon",
+      customProps: {
+        icon: "/img/ethereum-logo.jpg",
+      },
+    },
     {
       type: "category",
       label: "Get started",
@@ -23,8 +31,9 @@ const sidebars = {
         "academy/GetStarted/CreateNewPowerhouseProject",
         "academy/GetStarted/DefineToDoListDocumentModel",
         "academy/GetStarted/ImplementOperationReducers",
-        "academy/GetStarted/WriteDocumentModelTests",
         "academy/GetStarted/BuildToDoListEditor",
+        "academy/GetStarted/VetraStudio",
+        "academy/GetStarted/ReactorMCP",
       ],
     },
     {
@@ -41,7 +50,7 @@ const sidebars = {
           items: [
             "academy/MasteryTrack/BuilderEnvironment/Prerequisites",
             "academy/MasteryTrack/BuilderEnvironment/StandardDocumentModelWorkflow",
-            "academy/MasteryTrack/BuilderEnvironment/VetraStudio",
+            "academy/MasteryTrack/BuilderEnvironment/BuilderTools",
           ],
         },
         {
@@ -104,59 +113,13 @@ const sidebars = {
     {
       type: "category",
       label: "Example usecases",
-      items: [
-        {
-          type: "category",
-          label: "Chatroom",
-          link: {
-            type: "generated-index",
-            description:
-              "Get started with the Chatroom tutorial: Jump into creating a new Powerhouse project if you have NodeJs, VSCode, and Git installed. We are going to create a new document model that represents a chat. So you as a user can post messages into that chat room, react to the messages. This chatroom will be synchronized between different connect instances. Let's explore the potential of the tools available in the powerhouse toolkit",
-          },
-          items: [
-            "academy/ExampleUsecases/Chatroom/CreateNewPowerhouseProject",
-            "academy/ExampleUsecases/Chatroom/DefineChatroomDocumentModel",
-            "academy/ExampleUsecases/Chatroom/ImplementOperationReducers",
-            "academy/ExampleUsecases/Chatroom/ImplementChatroomEditor",
-            "academy/ExampleUsecases/Chatroom/LaunchALocalReactor",
-          ],
-        },
-        {
-          type: "category",
-          label: "Vetra Package Library",
-          link: {
-            type: "doc",
-            id: "academy/ExampleUsecases/VetraPackageLibrary/VetraPackageLibrary",
-          },
-          items: [],
-        },
-        {
-          type: "category",
-          label: "Todo List Tutorial",
-          link: {
-            type: "generated-index",
-            description:
-              "Build a complete Todo List application with Powerhouse: Learn how to create a document model, implement reducers, add tests, build a document editor UI, and create a drive explorer.",
-          },
-          items: [
-            "academy/ExampleUsecases/TodoList/GetTheStarterCode",
-            "academy/ExampleUsecases/TodoList/GenerateTodoListDocumentModel",
-            "academy/ExampleUsecases/TodoList/ImplementTodoListDocumentModelReducerOperationHandlers",
-            "academy/ExampleUsecases/TodoList/AddTestsForTodoListActions",
-            "academy/ExampleUsecases/TodoList/GenerateTodoListDocumentEditor",
-            "academy/ExampleUsecases/TodoList/ImplementTodoListDocumentEditorUIComponents",
-            "academy/ExampleUsecases/TodoList/GenerateTodoDriveExplorer",
-            "academy/ExampleUsecases/TodoList/AddSharedComponentForShowingTodoListStats",
-          ],
-        },
-      ],
+      items: [{ type: "autogenerated", dirName: "academy/03-ExampleUsecases" }],
     },
     {
       type: "category",
       label: "API References",
       items: [
         "academy/APIReferences/PowerhouseCLI",
-        "academy/APIReferences/VetraRemoteDrive",
         "academy/APIReferences/ReactHooks",
         "academy/APIReferences/RelationalDatabase",
         "academy/APIReferences/PHDocumentMigrationGuide",
@@ -197,6 +160,7 @@ const sidebars = {
     },
     { type: "doc", id: "academy/Cookbook", label: "Cookbook" },
     { type: "doc", id: "academy/Glossary", label: "Glossary" },
+    // ...add more as needed
   ],
 };
 

package/src/css/custom.css

@@ -526,30 +526,22 @@ html[data-theme="dark"] .DocSearch-Hits > *:empty {
   font-style: italic;
 }
 
-/* Code diff highlighting - Green for additions */
-.code-block-added-line {
-  background-color: rgba(46, 160, 67, 0.15);
-  display: block;
-  margin: 0 calc(var(--ifm-pre-padding) * -1);
-  padding: 0 var(--ifm-pre-padding);
-  border-left: 3px solid #2ea043;
+/* Ethereum Argentina Hackathon sidebar icon */
+.menu__link[href*="EthereumArgentinaHackathon"] {
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+}
+
+.menu__link[href*="EthereumArgentinaHackathon"]::before {
+  content: "" !important;
+  display: inline-block !important;
+  width: 24px !important;
+  height: 24px !important;
+  min-width: 24px !important;
+  background-image: url("/img/ethereum-logo.jpeg") !important;
+  background-size: cover !important;
+  background-position: center !important;
+  border-radius: 50% !important;
+  flex-shrink: 0 !important;
 }
-
-/* Code diff highlighting - Red for deletions */
-.code-block-removed-line {
-  background-color: rgba(248, 81, 73, 0.15);
-  display: block;
-  margin: 0 calc(var(--ifm-pre-padding) * -1);
-  padding: 0 var(--ifm-pre-padding);
-  border-left: 3px solid #f85149;
-}
-
-/* Dark mode adjustments for diff highlighting */
-[data-theme="dark"] .code-block-added-line {
-  background-color: rgba(46, 160, 67, 0.25);
-}
-
-[data-theme="dark"] .code-block-removed-line {
-  background-color: rgba(248, 81, 73, 0.25);
-}
-