docs: switch to Just the Docs theme with sidebar navigation (#61)

Replaces minimal theme with just-the-docs: sidebar nav, search,
dark mode, table of contents, parent/child page hierarchy.
3 sections: Guides (5 pages), Concepts (4 pages), Reference (6 pages).

Co-authored-by: Claude <noreply@anthropic.com>

Author: rajnavakoti

docs/pages/_config.yml

@@ -1,5 +1,44 @@
 title: Architecture Blocks
 description: Versioned draw.io shape library for ArchiMate architecture blocks
-remote_theme: pages-themes/minimal@v0.2.0
+remote_theme: just-the-docs/just-the-docs
+
+color_scheme: dark
+
+search_enabled: true
+search:
+  heading_level: 3
+  previews: 3
+  focus_shortcut_key: "k"
+
+nav_enabled: true
+
+aux_links:
+  GitHub:
+    - https://github.com/ea-toolkit/architecture-blocks
+  npm:
+    - https://www.npmjs.com/package/@ea-toolkit/architecture-blocks
+
+aux_links_new_tab: true
+
+footer_content: "Architecture Blocks &mdash; MIT License &mdash; <a href=\"https://github.com/ea-toolkit/architecture-blocks\">ea-toolkit/architecture-blocks</a>"
+
+gh_edit_link: true
+gh_edit_link_text: "Edit this page on GitHub"
+gh_edit_repository: "https://github.com/ea-toolkit/architecture-blocks"
+gh_edit_branch: "master"
+gh_edit_source: "docs/pages"
+gh_edit_view_mode: "edit"
+
 plugins:
   - jekyll-remote-theme
+
+callouts:
+  warning:
+    title: Warning
+    color: yellow
+  note:
+    title: Note
+    color: blue
+  tip:
+    title: Tip
+    color: green

docs/pages/concepts/how-it-works.md

@@ -1,11 +1,23 @@
 ---
-layout: default
 title: How It Works
+layout: default
+parent: Concepts
+nav_order: 1
 ---
 
 # How It Works
+{: .no_toc }
 
 The complete data flow from YAML definition to upgraded diagram.
+{: .fs-6 .fw-300 }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
 
 ## The big picture
 

docs/pages/concepts/index.md

@@ -0,0 +1,10 @@
+---
+title: Concepts
+layout: default
+nav_order: 3
+has_children: true
+---
+
+# Concepts
+
+How Architecture Blocks works under the hood — the data flow, identity model, properties system, and YAML schema.

docs/pages/concepts/shape-identity.md

@@ -1,11 +1,23 @@
 ---
-layout: default
 title: Shape Identity
+layout: default
+parent: Concepts
+nav_order: 2
 ---
 
 # Shape Identity
+{: .no_toc }
 
 How shapes are identified, versioned, and tracked across diagrams.
+{: .fs-6 .fw-300 }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
 
 ## data-block-id
 

docs/pages/concepts/shape-properties.md

@@ -1,11 +1,23 @@
 ---
-layout: default
 title: Shape Properties
+layout: default
+parent: Concepts
+nav_order: 3
 ---
 
 # Shape Properties
+{: .no_toc }
 
 Custom metadata that gives shapes context beyond visual appearance.
+{: .fs-6 .fw-300 }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
 
 ## Why properties matter
 

docs/pages/concepts/yaml-schema.md

@@ -1,11 +1,23 @@
 ---
-layout: default
 title: YAML Schema
+layout: default
+parent: Concepts
+nav_order: 4
 ---
 
 # YAML Schema
+{: .no_toc }
 
 The shape definition format explained field by field.
+{: .fs-6 .fw-300 }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
 
 ## File structure
 

docs/pages/guides/enterprise.md

@@ -1,11 +1,23 @@
 ---
+title: Enterprise Adoption
 layout: default
-title: Enterprise Adoption Guide
+parent: Guides
+nav_order: 4
 ---
 
-# Enterprise Adoption Guide
+# Enterprise Adoption
+{: .no_toc }
 
 How to evaluate, pilot, and roll out architecture-blocks across your organization.
+{: .fs-6 .fw-300 }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
 
 ## Phased rollout
 

docs/pages/guides/extensions.md

@@ -1,11 +1,23 @@
 ---
-layout: default
 title: Custom Extensions
+layout: default
+parent: Guides
+nav_order: 5
 ---
 
 # Custom Extensions
+{: .no_toc }
 
 Add org-specific shapes without forking the library.
+{: .fs-6 .fw-300 }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
 
 ## Why extensions?
 

docs/pages/guides/index.md

@@ -0,0 +1,10 @@
+---
+title: Guides
+layout: default
+nav_order: 2
+has_children: true
+---
+
+# Guides
+
+Step-by-step guides for getting started, managing shapes, and rolling out across your organization.

docs/pages/guides/installation.md

@@ -1,9 +1,20 @@
 ---
-layout: default
 title: Installation
+layout: default
+parent: Guides
+nav_order: 1
 ---
 
 # Installation
+{: .no_toc }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
 
 ## Requirements
 
@@ -28,18 +39,18 @@ npm install --save-dev @ea-toolkit/architecture-blocks
 ### Full library (all 60 shapes)
 
 1. Open draw.io
-2. File > Open Library from > Device
-3. Navigate to your project's `node_modules/@ea-toolkit/architecture-blocks/libraries/`
-4. Select `architecture-blocks.xml`
+2. **File > Open Library from > Device**
+3. Navigate to `node_modules/@ea-toolkit/architecture-blocks/libraries/`
+4. Select **`architecture-blocks.xml`**
 
-The shapes appear in the sidebar under "Architecture Blocks".
+The shapes appear in the sidebar panel, ready to drag onto your canvas.
 
 ### Per-layer libraries
 
-If you only work with specific ArchiMate layers, import just the layers you need:
+If you only work with specific ArchiMate layers, import just what you need:
 
 | File | Shapes |
-|------|--------|
+|:-----|:-------|
 | `architecture-blocks-application.xml` | 9 application shapes |
 | `architecture-blocks-business.xml` | 13 business shapes |
 | `architecture-blocks-technology.xml` | 13 technology shapes |
@@ -54,11 +65,9 @@ If you only work with specific ArchiMate layers, import just the layers you need
 For teams who want the library loaded automatically:
 
 1. Copy `plugin/architecture-blocks-plugin.js` to a shared location
-2. In draw.io: Extras > Plugins > Add > select the plugin file
+2. In draw.io: **Extras > Plugins > Add** > select the file
 3. Restart draw.io
 
-The plugin auto-loads the library on startup.
-
 ## Verify installation
 
 ```bash
@@ -75,7 +84,5 @@ npx architecture-blocks version
 ├── dist/           # CLI + library JavaScript
 ├── libraries/      # Generated draw.io XML files (importable)
 ├── shapes/         # YAML source definitions
-└── schemas/        # JSON Schema for shape YAML
+└── schemas/        # JSON Schema for shape YAML validation
 ```
-
-[Next: Quick Start >](quick-start.html)