From 2558da9810baffad2a961046b405a01b5cb061b6 Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Fri, 14 Feb 2025 09:33:02 -0500
Subject: [PATCH] Redesign web interface with custom CSS and simplified layout

---
 README.md       |  38 ++++----
 docs/schema.md  |   7 +-
 index.html      | 229 ++++++++++++++++++++++++++++++++++--------------
 repository.json |   6 +-
 4 files changed, 190 insertions(+), 90 deletions(-)

diff --git a/README.md b/README.md
index 308e49b..2d55c4c 100644
--- a/README.md
+++ b/README.md
@@ -13,17 +13,17 @@ plugins/             # Directory containing all plugin files
   plugin2.json       # Individual plugin definition
   ...
 assets/              # Optional directory for repository assets
-  icon.png          # Repository icon
-  banner.jpg        # Repository banner
-  logo.svg          # Repository logo
+  repository-icon.png    # Repository icon
+  repository-logo.png    # Repository logo
+  repository-banner.png  # Repository banner
 ```
 
 ## Web Interface
 
-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:
+The repository includes a built-in web interface (`index.html`) that provides a user-friendly way to view repository information. When hosting your repository, this interface will automatically:
 
 - Display repository name, description, and metadata
-- Show repository statistics (plugin count, downloads, stars)
+- Show repository statistics (plugin count)
 - List author information and compatibility details
 - Display repository tags and categories
 - Show repository assets (icon, banner, logo)
@@ -39,7 +39,12 @@ The `repository.json` file contains the repository's metadata and configuration:
   "id": "unique-repository-id",
   "name": "Repository Name",
   "description": "Repository description",
-  "url": "https://example.com/repository",
+  "urls": {
+    "repository": "https://example.com/repository",
+    "git": "https://github.com/user/repo.git"
+  },
+  "official": false,
+  "trust": "community",
   "author": {
     "name": "Author Name",
     "organization": "Organization Name",
@@ -52,18 +57,16 @@ The `repository.json` file contains the repository's metadata and configuration:
     },
     "ros2": {
       "distributions": ["humble", "iron"],
-      "recommended": "humble"
+      "recommended": "iron"
     }
   },
   "assets": {
-    "icon": "assets/icon.png",
-    "banner": "assets/banner.jpg",
-    "logo": "assets/logo.svg"
+    "icon": "assets/repository-icon.png",
+    "banner": "assets/repository-banner.png",
+    "logo": "assets/repository-logo.png"
   },
   "stats": {
-    "plugins": 0,
-    "downloads": 0,
-    "stars": 0
+    "plugins": 0
   },
   "tags": ["robots", "simulation", "education"]
 }
@@ -77,13 +80,12 @@ For detailed information about plugin structure and requirements, see the [Plugi
 
 ## Contributing
 
-1. Fork this repository
-2. Create your plugin branch (`git checkout -b my-new-plugin`)
+1. Fork or clone this repository
+2. Create your plugin branch
 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
+5. Test your changes locally
+6. Submit your changes
 
 ## License
 
diff --git a/docs/schema.md b/docs/schema.md
index 85f9437..dee191e 100644
--- a/docs/schema.md
+++ b/docs/schema.md
@@ -11,7 +11,10 @@ The repository itself is defined by a `repository.json` file with the following
   "id": string,
   "name": string,
   "description": string?,
-  "url": string (URL),
+  "urls": {
+    "repository": string (URL),
+    "git": string (URL)?
+  },
   "official": boolean,
   "author": {
     "name": string,
@@ -48,8 +51,6 @@ The repository itself is defined by a `repository.json` file with the following
   },
   "tags": string[],
   "stats": {
-    "downloads": number,
-    "stars": number,
     "plugins": number
   }?
 }
diff --git a/index.html b/index.html
index 3ae66aa..e217bde 100644
--- a/index.html
+++ b/index.html
@@ -4,99 +4,198 @@
     <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; }
+        /* Base styles */
+        :root {
+            --primary: #0066cc;
+            --primary-light: #e6f0ff;
+            --text: #1a1a1a;
+            --text-muted: #666666;
+            --border: #e5e7eb;
+            --background: #f9fafb;
+            --card: #ffffff;
+        }
+
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        
+        body {
+            font-family: system-ui, -apple-system, sans-serif;
+            line-height: 1.5;
+            color: var(--text);
+            background: var(--background);
+        }
+
+        /* Layout */
+        .container {
+            max-width: 64rem;
+            margin: 0 auto;
+            padding: 1.5rem;
+        }
+
+        .grid {
+            display: grid;
+            gap: 1.5rem;
+        }
+
+        .grid-cols-2 {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        /* Components */
+        .card {
+            background: var(--card);
+            border: 1px solid var(--border);
+            border-radius: 0.5rem;
+            padding: 1.5rem;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+        }
+
+        .header {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .header img {
+            width: 4rem;
+            height: 4rem;
+            border-radius: 0.5rem;
+            object-fit: contain;
+            background: var(--primary-light);
+            padding: 0.5rem;
+        }
+
+        .banner {
+            width: 100%;
+            height: 12rem;
+            border-radius: 0.75rem;
+            object-fit: cover;
+            margin-bottom: 1.5rem;
+        }
+
+        .title {
+            font-size: 1.875rem;
+            font-weight: 600;
+            margin-bottom: 0.25rem;
+        }
+
+        .description {
+            color: var(--text-muted);
+            margin-bottom: 1rem;
+        }
+
+        .badge {
+            display: inline-block;
+            padding: 0.25rem 0.75rem;
+            border-radius: 9999px;
+            font-size: 0.875rem;
+            font-weight: 500;
+            background: var(--primary-light);
+            color: var(--primary);
+        }
+
+        .stat {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: var(--text-muted);
+            font-size: 0.875rem;
+        }
+
+        .tag {
+            display: inline-block;
+            padding: 0.25rem 0.75rem;
+            border-radius: 9999px;
+            font-size: 0.875rem;
+            background: var(--background);
+            color: var(--text-muted);
+            margin: 0.25rem;
+        }
+
+        code {
+            font-family: ui-monospace, monospace;
+            background: var(--background);
+            padding: 0.25rem 0.5rem;
+            border-radius: 0.25rem;
+            font-size: 0.875rem;
+        }
+
+        .hidden { display: none; }
     </style>
 </head>
-<body class="bg-gray-50">
-    <div class="max-w-4xl mx-auto p-6">
+<body>
+    <div class="container">
         <div id="loading" class="text-center py-12">Loading repository data...</div>
-        <div id="content" class="hidden space-y-8">
+        <div id="content" class="hidden">
             <!-- 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 class="header">
+                <img id="repoIcon" alt="Repository Icon" class="hidden">
+                <div>
+                    <h1 id="repoName" class="title"></h1>
+                    <p id="repoDescription" class="description"></p>
                 </div>
-                <div id="repoBanner" class="w-full h-48 rounded-xl bg-cover bg-center hidden"></div>
             </div>
 
+            <img id="repoBanner" class="banner hidden">
+
             <!-- 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 class="card">
+                <div class="stat">
+                    <span>Plugins:</span>
+                    <span id="pluginCount"></span>
                 </div>
             </div>
 
             <!-- Details -->
-            <div class="grid gap-6 md:grid-cols-2">
+            <div class="grid 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 class="card">
+                    <h2>Author</h2>
+                    <div class="content">
                         <div>
-                            <span class="text-gray-600">Name:</span>
-                            <span id="authorName" class="ml-2"></span>
+                            <span>Name:</span>
+                            <span id="authorName"></span>
                         </div>
                         <div id="authorOrgContainer" class="hidden">
-                            <span class="text-gray-600">Organization:</span>
-                            <span id="authorOrg" class="ml-2"></span>
+                            <span>Organization:</span>
+                            <span id="authorOrg"></span>
                         </div>
                         <div id="authorUrlContainer" class="hidden">
-                            <a id="authorUrl" class="text-blue-600 hover:underline" target="_blank">View Profile</a>
+                            <a id="authorUrl" class="text-primary 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 class="card">
+                    <h2>Compatibility</h2>
+                    <div>
+                        <h3>HRIStudio</h3>
                         <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>
+                            <span>Min Version:</span>
+                            <code id="hriMin"></code>
                         </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 id="hriRecommendedContainer" class="hidden">
+                            <span>Recommended:</span>
+                            <code id="hriRecommended"></code>
+                        </div>
+                    </div>
+                    <div id="ros2Container" class="hidden">
+                        <h3>ROS 2</h3>
+                        <div id="ros2Distributions"></div>
+                        <div id="ros2RecommendedContainer" class="hidden">
+                            <span>Recommended:</span>
+                            <code id="ros2Recommended"></code>
                         </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 class="card">
+                <h2>Tags</h2>
+                <div id="tags"></div>
             </div>
         </div>
     </div>
@@ -116,8 +215,6 @@
                 
                 // 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;
@@ -142,7 +239,7 @@
                     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.className = 'badge';
                         badge.textContent = dist;
                         distributionsDiv.appendChild(badge);
                     });
@@ -157,7 +254,7 @@
                 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.className = 'tag';
                     badge.textContent = tag;
                     tagsContainer.appendChild(badge);
                 });
@@ -171,7 +268,7 @@
                 
                 if (data.assets?.banner) {
                     const banner = document.getElementById('repoBanner');
-                    banner.style.backgroundImage = `url(${data.assets.banner})`;
+                    banner.src = data.assets.banner;
                     banner.classList.remove('hidden');
                 }
                 
diff --git a/repository.json b/repository.json
index e1c6503..7b9fd54 100644
--- a/repository.json
+++ b/repository.json
@@ -2,7 +2,9 @@
   "id": "hristudio-official",
   "name": "HRIStudio Official Robot Plugins",
   "description": "Official collection of robot plugins maintained by the HRIStudio team",
-  "url": "https://soconnor0919.github.io/robot-plugins",
+  "urls": {
+    "repository": "https://soconnor0919.github.io/robot-plugins"
+  },
   "official": true,
   "trust": "official",
   "author": {
@@ -43,8 +45,6 @@
     "turtlebot"
   ],
   "stats": {
-    "downloads": 0,
-    "stars": 0,
     "plugins": 1
   }
 } 
\ No newline at end of file