From 76935668c9b7f6675e35b98fb25c7dfe56ac6812 Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Thu, 13 Feb 2025 16:15:20 -0500
Subject: [PATCH] Refactor README with comprehensive repository structure and
 web interface details

---
 README.md  | 107 +++++++++++++++++++-----------
 index.html | 191 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 258 insertions(+), 40 deletions(-)
 create mode 100644 index.html

diff --git a/README.md b/README.md
index 0c88330..308e49b 100644
--- a/README.md
+++ b/README.md
@@ -1,63 +1,90 @@
-# HRIStudio Robot Plugins
+# HRIStudio Robot Plugins Repository
 
-This repository contains robot plugins for use with HRIStudio, a platform for designing and executing human-robot interaction experiments.
+This repository contains robot plugins for use with HRIStudio. Each plugin provides a standardized interface for controlling and interacting with different types of robots.
 
 ## Repository Structure
 
 ```
-robot-plugins/
-├── plugins/         # Robot plugin definitions (JSON)
-├── assets/         # Robot images and 3D models
-│   ├── repository-icon.png  # Repository icon (256x256px)
-│   ├── repository-logo.png  # Repository logo (512x512px)
-│   ├── repository-banner.png  # Repository banner (optional)
-│   └── {robotId}/  # Assets for each robot
-└── docs/           # Plugin documentation
+repository.json       # Repository metadata and configuration
+index.html           # Web interface for viewing repository information
+plugins/             # Directory containing all plugin files
+  index.json         # List of available plugins
+  plugin1.json       # Individual plugin definition
+  plugin2.json       # Individual plugin definition
+  ...
+assets/              # Optional directory for repository assets
+  icon.png          # Repository icon
+  banner.jpg        # Repository banner
+  logo.svg          # Repository logo
 ```
 
-## Adding a New Robot Plugin
+## Web Interface
 
-1. Create a new JSON file in the `plugins` directory with your robot's plugin definition
-2. Add required assets to the `assets/{robotId}` directory
-3. Update documentation if needed
-4. Submit a pull request
+The repository includes a built-in web interface (`index.html`) that provides a user-friendly way to view repository information. When hosting your repository on GitHub Pages or any web server, this interface will automatically:
 
-## Required Files
+- Display repository name, description, and metadata
+- Show repository statistics (plugin count, downloads, stars)
+- List author information and compatibility details
+- Display repository tags and categories
+- Show repository assets (icon, banner, logo)
 
-For each robot plugin, you need:
+The web interface is automatically available when you host your repository, making it easy for users to browse repository information before adding it to HRIStudio.
 
-### Plugin Definition
-- `plugins/{robotId}.json` - Plugin configuration file
+## Repository Configuration
 
-### Assets
-- `assets/{robotId}/thumb.png` - Thumbnail image (160x160px)
-- `assets/{robotId}/logo.png` - Robot logo (512x512px, transparent background)
-- `assets/{robotId}/main.png` - Main image (16:9 aspect ratio)
-- Additional views (optional):
-  - `assets/{robotId}/front.png`
-  - `assets/{robotId}/side.png`
-  - `assets/{robotId}/top.png`
+The `repository.json` file contains the repository's metadata and configuration:
 
-### Repository Assets
-- `assets/repository-icon.png` - Repository icon (256x256px, square)
-- `assets/repository-logo.png` - Repository logo (512x512px, transparent background)
-- `assets/repository-banner.png` - Repository banner (optional, 1280x640px)
+```json
+{
+  "id": "unique-repository-id",
+  "name": "Repository Name",
+  "description": "Repository description",
+  "url": "https://example.com/repository",
+  "author": {
+    "name": "Author Name",
+    "organization": "Organization Name",
+    "url": "https://example.com"
+  },
+  "compatibility": {
+    "hristudio": {
+      "min": "1.0.0",
+      "recommended": "1.1.0"
+    },
+    "ros2": {
+      "distributions": ["humble", "iron"],
+      "recommended": "humble"
+    }
+  },
+  "assets": {
+    "icon": "assets/icon.png",
+    "banner": "assets/banner.jpg",
+    "logo": "assets/logo.svg"
+  },
+  "stats": {
+    "plugins": 0,
+    "downloads": 0,
+    "stars": 0
+  },
+  "tags": ["robots", "simulation", "education"]
+}
+```
 
-## Plugin Schema
+## Plugin Structure
 
-See [docs/schema.md](docs/schema.md) for the complete plugin schema documentation.
+Each plugin is defined in a JSON file within the `plugins` directory. The `plugins/index.json` file contains a list of all available plugin files.
 
-## Example Plugin
-
-See the TurtleBot3 Burger plugin (`plugins/turtlebot3-burger.json`) for a complete example.
+For detailed information about plugin structure and requirements, see the [Plugin Documentation](docs/plugins.md).
 
 ## Contributing
 
 1. Fork this repository
-2. Create your plugin following the structure above
-3. Test your plugin with HRIStudio
-4. Submit a pull request
+2. Create your plugin branch (`git checkout -b my-new-plugin`)
+3. Add your plugin JSON file to the `plugins` directory
+4. Update `plugins/index.json` to include your plugin
+5. Commit your changes (`git commit -am 'Add new plugin'`)
+6. Push to the branch (`git push origin my-new-plugin`)
+7. Create a new Pull Request
 
 ## License
 
-MIT License - See LICENSE file for details 
\ No newline at end of file
+This repository is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3ae66aa
--- /dev/null
+++ b/index.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HRIStudio Robot Plugins</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <div class="max-w-4xl mx-auto p-6">
+        <div id="loading" class="text-center py-12">Loading repository data...</div>
+        <div id="content" class="hidden space-y-8">
+            <!-- Header -->
+            <div class="space-y-4">
+                <div class="flex items-center gap-4">
+                    <img id="repoIcon" alt="Repository Icon" class="w-16 h-16 rounded-lg bg-white shadow-sm border hidden">
+                    <div>
+                        <h1 id="repoName" class="text-3xl font-bold"></h1>
+                        <p id="repoDescription" class="text-gray-600"></p>
+                    </div>
+                </div>
+                <div id="repoBanner" class="w-full h-48 rounded-xl bg-cover bg-center hidden"></div>
+            </div>
+
+            <!-- Stats -->
+            <div class="grid grid-cols-3 gap-4">
+                <div class="bg-white p-4 rounded-lg shadow-sm border">
+                    <div class="text-sm text-gray-600">Plugins</div>
+                    <div id="pluginCount" class="text-2xl font-semibold"></div>
+                </div>
+                <div class="bg-white p-4 rounded-lg shadow-sm border">
+                    <div class="text-sm text-gray-600">Downloads</div>
+                    <div id="downloadCount" class="text-2xl font-semibold"></div>
+                </div>
+                <div class="bg-white p-4 rounded-lg shadow-sm border">
+                    <div class="text-sm text-gray-600">Stars</div>
+                    <div id="starCount" class="text-2xl font-semibold"></div>
+                </div>
+            </div>
+
+            <!-- Details -->
+            <div class="grid gap-6 md:grid-cols-2">
+                <!-- Author Info -->
+                <div class="bg-white p-6 rounded-lg shadow-sm border">
+                    <h2 class="text-lg font-semibold mb-4">Author</h2>
+                    <div class="space-y-2">
+                        <div>
+                            <span class="text-gray-600">Name:</span>
+                            <span id="authorName" class="ml-2"></span>
+                        </div>
+                        <div id="authorOrgContainer" class="hidden">
+                            <span class="text-gray-600">Organization:</span>
+                            <span id="authorOrg" class="ml-2"></span>
+                        </div>
+                        <div id="authorUrlContainer" class="hidden">
+                            <a id="authorUrl" class="text-blue-600 hover:underline" target="_blank">View Profile</a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Compatibility -->
+                <div class="bg-white p-6 rounded-lg shadow-sm border">
+                    <h2 class="text-lg font-semibold mb-4">Compatibility</h2>
+                    <div class="space-y-4">
+                        <div>
+                            <div class="text-gray-600 mb-2">HRIStudio</div>
+                            <div class="space-y-1">
+                                <div>
+                                    <span class="text-sm text-gray-600">Min Version:</span>
+                                    <code id="hriMin" class="ml-2 px-2 py-1 bg-gray-100 rounded text-sm"></code>
+                                </div>
+                                <div id="hriRecommendedContainer" class="hidden">
+                                    <span class="text-sm text-gray-600">Recommended:</span>
+                                    <code id="hriRecommended" class="ml-2 px-2 py-1 bg-gray-100 rounded text-sm"></code>
+                                </div>
+                            </div>
+                        </div>
+                        <div id="ros2Container" class="hidden">
+                            <div class="text-gray-600 mb-2">ROS 2</div>
+                            <div class="space-y-1">
+                                <div id="ros2Distributions"></div>
+                                <div id="ros2RecommendedContainer" class="hidden">
+                                    <span class="text-sm text-gray-600">Recommended:</span>
+                                    <code id="ros2Recommended" class="ml-2 px-2 py-1 bg-gray-100 rounded text-sm"></code>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Tags -->
+            <div class="bg-white p-6 rounded-lg shadow-sm border">
+                <h2 class="text-lg font-semibold mb-4">Tags</h2>
+                <div id="tags" class="flex flex-wrap gap-2"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        async function loadRepositoryData() {
+            try {
+                const response = await fetch('repository.json');
+                const data = await response.json();
+                
+                // Update page title
+                document.title = data.name;
+                
+                // Update header
+                document.getElementById('repoName').textContent = data.name;
+                document.getElementById('repoDescription').textContent = data.description || '';
+                
+                // Update stats
+                document.getElementById('pluginCount').textContent = data.stats?.plugins || 0;
+                document.getElementById('downloadCount').textContent = data.stats?.downloads || 0;
+                document.getElementById('starCount').textContent = data.stats?.stars || 0;
+                
+                // Update author info
+                document.getElementById('authorName').textContent = data.author.name;
+                if (data.author.organization) {
+                    document.getElementById('authorOrgContainer').classList.remove('hidden');
+                    document.getElementById('authorOrg').textContent = data.author.organization;
+                }
+                if (data.author.url) {
+                    document.getElementById('authorUrlContainer').classList.remove('hidden');
+                    document.getElementById('authorUrl').href = data.author.url;
+                }
+                
+                // Update compatibility
+                document.getElementById('hriMin').textContent = data.compatibility.hristudio.min;
+                if (data.compatibility.hristudio.recommended) {
+                    document.getElementById('hriRecommendedContainer').classList.remove('hidden');
+                    document.getElementById('hriRecommended').textContent = data.compatibility.hristudio.recommended;
+                }
+                
+                if (data.compatibility.ros2) {
+                    document.getElementById('ros2Container').classList.remove('hidden');
+                    const distributionsDiv = document.getElementById('ros2Distributions');
+                    data.compatibility.ros2.distributions.forEach(dist => {
+                        const badge = document.createElement('span');
+                        badge.className = 'inline-block px-2 py-1 bg-gray-100 rounded text-sm mr-2';
+                        badge.textContent = dist;
+                        distributionsDiv.appendChild(badge);
+                    });
+                    
+                    if (data.compatibility.ros2.recommended) {
+                        document.getElementById('ros2RecommendedContainer').classList.remove('hidden');
+                        document.getElementById('ros2Recommended').textContent = data.compatibility.ros2.recommended;
+                    }
+                }
+                
+                // Update tags
+                const tagsContainer = document.getElementById('tags');
+                data.tags.forEach(tag => {
+                    const badge = document.createElement('span');
+                    badge.className = 'px-2 py-1 bg-gray-100 rounded-full text-sm text-gray-700';
+                    badge.textContent = tag;
+                    tagsContainer.appendChild(badge);
+                });
+                
+                // Handle assets
+                if (data.assets?.icon) {
+                    const iconImg = document.getElementById('repoIcon');
+                    iconImg.src = data.assets.icon;
+                    iconImg.classList.remove('hidden');
+                }
+                
+                if (data.assets?.banner) {
+                    const banner = document.getElementById('repoBanner');
+                    banner.style.backgroundImage = `url(${data.assets.banner})`;
+                    banner.classList.remove('hidden');
+                }
+                
+                // Show content
+                document.getElementById('loading').classList.add('hidden');
+                document.getElementById('content').classList.remove('hidden');
+            } catch (error) {
+                console.error('Error loading repository data:', error);
+                document.getElementById('loading').textContent = 'Error loading repository data';
+            }
+        }
+
+        // Load data when page loads
+        loadRepositoryData();
+    </script>
+</body>
+</html> 
\ No newline at end of file