Add navigation map diagrams for TPEN ecosystem interfaces

_layouts/default.html

@@ -31,6 +31,7 @@
                 <nav style="margin-top: 1rem; padding: 0.5rem 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;">
                     <a href="{{ "/getting-started" | absolute_url }}" style="margin-right: 1.5rem;">Getting Started</a>
                     <a href="{{ "/category/tutorials" | absolute_url }}" style="margin-right: 1.5rem;">Tutorials</a>
+                    <a href="{{ "/workflow" | absolute_url }}" style="margin-right: 1.5rem;">Workflow</a>
                     <a href="{{ "/about" | absolute_url }}" style="margin-right: 1.5rem;">About</a>
                     <a href="{{ "/api" | absolute_url }}" style="margin-right: 1.5rem;">API</a>
                     <a href="https://app.t-pen.org" style="margin-right: 1.5rem;">Launch App →</a>
@@ -45,6 +46,7 @@
                 <nav style="display: flex; gap: 1.5rem; align-items: center;">
                     <a href="{{ "/getting-started" | absolute_url }}">Getting Started</a>
                     <a href="{{ "/category/tutorials" | absolute_url }}">Tutorials</a>
+                    <a href="{{ "/workflow" | absolute_url }}">Workflow</a>
                     <a href="{{ "/about" | absolute_url }}">About</a>
                     <a href="{{ "/api" | absolute_url }}">API</a>
                     <a href="https://app.t-pen.org" style="font-weight: bold;">Launch App →</a>

core-workflow-mermaid.md

@@ -9,6 +9,246 @@ permalink: /workflow
 
 This page visualizes the core workflow interfaces in the TPEN Application. This is a work in progress and will be updated as the workflow evolves.
 
+---
+
+## TPEN Navigation Map
+
+This section provides a clear visual overview of how the TPEN ecosystem components interlink. The diagrams are organized from high-level system architecture down to specific workflows.
+
+---
+
+### 1. System Overview
+
+High-level view of the major TPEN components and how they connect.
+
+```mermaid
+graph LR
+    Doc[Documentation Site<br/>t-pen.org]
+    Auth[Authentication<br/>Auth0]
+    App[Application<br/>app.t-pen.org]
+    Ext[External Services<br/>RERUM, IIIF]
+
+    Doc -->|User Sign-up| Auth
+    Auth -->|Login| App
+    App -.->|Data Export| Ext
+    Doc -.->|API Reference| Ext
+
+    classDef docStyle fill:#e1f5ff,stroke:#0077b6,stroke-width:3px
+    classDef authStyle fill:#fff4e6,stroke:#fd7e14,stroke-width:3px
+    classDef appStyle fill:#d4edda,stroke:#28a745,stroke-width:3px
+    classDef extStyle fill:#f8d7da,stroke:#dc3545,stroke-width:3px
+
+    class Doc docStyle
+    class Auth authStyle
+    class App appStyle
+    class Ext extStyle
+```
+
+---
+
+### 2. User Entry & Authentication Flow
+
+How users access TPEN from the documentation site through authentication to the application.
+
+```mermaid
+graph TB
+    %% Documentation Entry Points
+    Home([Home Page])
+    GettingStarted([Getting Started])
+    Tutorials([Tutorials])
+
+    %% Documentation Resources - clustered
+    DocResources{{"Documentation<br/>Resources"}}
+
+    %% Authentication
+    Login([Login/Sign Up])
+    Auth0[Auth0 Service]
+    Callback([OAuth Callback])
+
+    %% Application Entry
+    AppHome([App Dashboard])
+
+    %% Main Flow
+    Home --> GettingStarted
+    Home --> Tutorials
+    Home --> DocResources
+    GettingStarted --> Login
+    Tutorials --> Login
+    Login --> Auth0
+    Auth0 --> Callback
+    Callback --> AppHome
+
+    %% Grouped peripheral pages
+    DocResources -.->|About, API,<br/>Announcements,<br/>Roadmap, Beta| Login
+
+    classDef docStyle fill:#e1f5ff,stroke:#0077b6,stroke-width:2px
+    classDef authStyle fill:#fff4e6,stroke:#fd7e14,stroke-width:2px
+    classDef appStyle fill:#d4edda,stroke:#28a745,stroke-width:2px
+    classDef groupStyle fill:#f0f0f0,stroke:#666,stroke-width:2px,stroke-dasharray: 5 5
+
+    class Home,GettingStarted,Tutorials docStyle
+    class Login,Auth0,Callback authStyle
+    class AppHome appStyle
+    class DocResources groupStyle
+```
+
+---
+
+### 3. Application Dashboard & Project Access
+
+Main navigation within the app.t-pen.org dashboard.
+
+```mermaid
+graph TB
+    AppHome([App Dashboard])
+
+    %% Project Views
+    ProjectList([Project List])
+    RecentActivity([Recent Activity])
+    ProjectDetail([Project Detail])
+
+    %% Quick Actions
+    NewProject([Create New Project])
+    ImportResource([Import Resource])
+
+    %% User Settings - clustered
+    UserSettings{{"User Settings"}}
+
+    %% Main Navigation
+    AppHome --> ProjectList
+    AppHome --> RecentActivity
+    AppHome --> NewProject
+    AppHome --> ImportResource
+    AppHome --> UserSettings
+
+    ProjectList --> ProjectDetail
+    RecentActivity --> ProjectDetail
+
+    %% Grouped peripheral actions
+    UserSettings -.->|Manage Profile<br/>Link TPEN 2.8 Account<br/>Logout| AppHome
+
+    classDef appStyle fill:#d4edda,stroke:#28a745,stroke-width:2px
+    classDef groupStyle fill:#f0f0f0,stroke:#666,stroke-width:2px,stroke-dasharray: 5 5
+
+    class AppHome,ProjectList,RecentActivity,ProjectDetail,NewProject,ImportResource appStyle
+    class UserSettings groupStyle
+```
+
+---
+
+### 4. Project Management Workflow
+
+Interfaces for project leaders to configure and manage projects.
+
+```mermaid
+graph TB
+    ProjectDetail([Project Detail])
+    Management([Management Interface])
+
+    %% Management Functions
+    ManageUsers([Manage Users & Roles])
+    ProjectConfig([Project Configuration])
+    EditDesc([Edit Description])
+
+    %% Additional Settings - clustered
+    AdvancedSettings{{"Advanced<br/>Settings"}}
+
+    ProjectDetail -->|Leader Access| Management
+    Management --> ManageUsers
+    Management --> ProjectConfig
+    Management --> EditDesc
+    Management --> AdvancedSettings
+
+    %% Grouped peripheral management
+    AdvancedSettings -.->|Project Options<br/>Organize Pages/Layers<br/>Export/Share| Management
+
+    classDef appStyle fill:#d4edda,stroke:#28a745,stroke-width:2px
+    classDef groupStyle fill:#f0f0f0,stroke:#666,stroke-width:2px,stroke-dasharray: 5 5
+
+    class ProjectDetail,Management,ManageUsers,ProjectConfig,EditDesc appStyle
+    class AdvancedSettings groupStyle
+```
+
+---
+
+### 5. Core Transcription Workflow
+
+The primary workflow for transcribing and annotating content.
+
+```mermaid
+graph LR
+    ProjectDetail([Project Detail])
+    RecentActivity([Recent Activity])
+
+    DefineLines([Define Lines])
+    Transcribe([Transcription Interface])
+    Annotate([Specialized Annotation])
+
+    ProjectDetail -->|Start| DefineLines
+    RecentActivity -->|Continue| Transcribe
+    DefineLines --> Transcribe
+    Transcribe --> Annotate
+    Annotate -->|Save & Continue| Transcribe
+
+    classDef appStyle fill:#d4edda,stroke:#28a745,stroke-width:2px
+    classDef workflowStyle fill:#d1f2eb,stroke:#28a745,stroke-width:3px
+
+    class ProjectDetail,RecentActivity appStyle
+    class DefineLines,Transcribe,Annotate workflowStyle
+```
+
+---
+
+### 6. External Service Integrations
+
+Data flow between TPEN and external services.
+
+```mermaid
+graph TB
+    %% App Interfaces
+    Transcribe([Transcription Interface])
+    Annotate([Annotation Interface])
+    ImportResource([Import Resource])
+    ProjectConfig([Project Configuration])
+    Export([Export/Share])
+
+    %% External Services
+    RERUM[(RERUM<br/>Repository)]
+    IIIF[IIIF Image<br/>Services]
+    WebAnnotation[Web Annotation<br/>Standard]
+
+    %% Data Flow
+    Transcribe -.->|Save Transcriptions| RERUM
+    Annotate -.->|Save Annotations| RERUM
+    Export -.->|Export Data| RERUM
+
+    ImportResource -.->|Load Images| IIIF
+    ProjectConfig -.->|Configure Resources| IIIF
+
+    RERUM -.->|Follows Standard| WebAnnotation
+
+    classDef appStyle fill:#d4edda,stroke:#28a745,stroke-width:2px
+    classDef extStyle fill:#f8d7da,stroke:#dc3545,stroke-width:2px
+
+    class Transcribe,Annotate,ImportResource,ProjectConfig,Export appStyle
+    class RERUM,IIIF,WebAnnotation extStyle
+```
+
+---
+
+**Navigation Guide:**
+
+1. **System Overview**: Shows the four main components of the TPEN ecosystem
+2. **User Entry & Authentication**: How users discover and access TPEN through the documentation site
+3. **Application Dashboard**: Main navigation hub once users are logged in
+4. **Project Management**: Administrative interfaces for project configuration
+5. **Core Transcription Workflow**: The primary task flow for creating transcriptions
+6. **External Integrations**: How TPEN connects with RERUM, IIIF, and Web Annotation standards
+
+> **Legend**: Solid lines (→) indicate navigation paths, dotted lines (-.->) indicate data flow or grouped peripheral interfaces.
+
+---
+
 ```mermaid
 flowchart TD
     LandingPage([Landing Page])