soconnor/robot-plugins
1
0
Fork 0
mirror of https://github.com/soconnor0919/robot-plugins.git synced 2025-12-15 08:24:45 -05:00
Code Issues Packages Projects Releases Wiki Activity

Redesign web interface with custom CSS and simplified layout

Browse Source
This commit is contained in:
Sean O'Connor
2025-02-14 09:33:02 -05:00
parent 76935668c9
commit 2558da9810
4 changed files with 190 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
README.md
View File

@@ -13,17 +13,17 @@ plugins/ # Directory containing all plugin files
plugin2.json # Individual plugin definition plugin2.json # Individual plugin definition
... ...
assets/ # Optional directory for repository assets assets/ # Optional directory for repository assets
icon.png # Repository icon repository-icon.png # Repository icon
banner.jpg # Repository banner repository-logo.png # Repository logo
logo.svg # Repository logo repository-banner.png # Repository banner
``` ```
## Web Interface ## 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 - Display repository name, description, and metadata
- Show repository statistics (plugin count, downloads, stars) - Show repository statistics (plugin count)
- List author information and compatibility details - List author information and compatibility details
- Display repository tags and categories - Display repository tags and categories
- Show repository assets (icon, banner, logo) - 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", "id": "unique-repository-id",
"name": "Repository Name", "name": "Repository Name",
"description": "Repository description", "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": { "author": {
"name": "Author Name", "name": "Author Name",
"organization": "Organization Name", "organization": "Organization Name",
@@ -52,18 +57,16 @@ The `repository.json` file contains the repository's metadata and configuration:
}, },
"ros2": { "ros2": {
"distributions": ["humble", "iron"], "distributions": ["humble", "iron"],
"recommended": "humble" "recommended": "iron"
} }
}, },
"assets": { "assets": {
"icon": "assets/icon.png", "icon": "assets/repository-icon.png",
"banner": "assets/banner.jpg", "banner": "assets/repository-banner.png",
"logo": "assets/logo.svg" "logo": "assets/repository-logo.png"
}, },
"stats": { "stats": {
"plugins": 0, "plugins": 0
"downloads": 0,
"stars": 0
}, },
"tags": ["robots", "simulation", "education"] "tags": ["robots", "simulation", "education"]
} }
@@ -77,13 +80,12 @@ For detailed information about plugin structure and requirements, see the [Plugi
## Contributing ## Contributing
1. Fork this repository 1. Fork or clone this repository
2. Create your plugin branch (`git checkout -b my-new-plugin`) 2. Create your plugin branch
3. Add your plugin JSON file to the `plugins` directory 3. Add your plugin JSON file to the `plugins` directory
4. Update `plugins/index.json` to include your plugin 4. Update `plugins/index.json` to include your plugin
5. Commit your changes (`git commit -am 'Add new plugin'`) 5. Test your changes locally
6. Push to the branch (`git push origin my-new-plugin`) 6. Submit your changes
7. Create a new Pull Request
## License ## License

7
docs/schema.md
View File

@@ -11,7 +11,10 @@ The repository itself is defined by a `repository.json` file with the following
"id": string, "id": string,
"name": string, "name": string,
"description": string?, "description": string?,
"url": string (URL), "urls": {
"repository": string (URL),
"git": string (URL)?
},
"official": boolean, "official": boolean,
"author": { "author": {
"name": string, "name": string,
@@ -48,8 +51,6 @@ The repository itself is defined by a `repository.json` file with the following
}, },
"tags": string[], "tags": string[],
"stats": { "stats": {
"downloads": number,
"stars": number,
"plugins": number "plugins": number
}? }?
} }

229
index.html
View File

@@ -4,99 +4,198 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HRIStudio Robot Plugins</title> <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> <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> </style>
</head> </head>
<body class="bg-gray-50"> <body>
<div class="max-w-4xl mx-auto p-6"> <div class="container">
<div id="loading" class="text-center py-12">Loading repository data...</div> <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 --> <!-- Header -->
<div class="space-y-4"> <div class="header">
<div class="flex items-center gap-4"> <img id="repoIcon" alt="Repository Icon" class="hidden">
<img id="repoIcon" alt="Repository Icon" class="w-16 h-16 rounded-lg bg-white shadow-sm border hidden"> <div>
<div> <h1 id="repoName" class="title"></h1>
<h1 id="repoName" class="text-3xl font-bold"></h1> <p id="repoDescription" class="description"></p>
<p id="repoDescription" class="text-gray-600"></p>
</div>
</div> </div>
<div id="repoBanner" class="w-full h-48 rounded-xl bg-cover bg-center hidden"></div>
</div> </div>
<img id="repoBanner" class="banner hidden">
<!-- Stats --> <!-- Stats -->
<div class="grid grid-cols-3 gap-4"> <div class="card">
<div class="bg-white p-4 rounded-lg shadow-sm border"> <div class="stat">
<div class="text-sm text-gray-600">Plugins</div> <span>Plugins:</span>
<div id="pluginCount" class="text-2xl font-semibold"></div> <span id="pluginCount"></span>
</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>
</div> </div>
<!-- Details --> <!-- Details -->
<div class="grid gap-6 md:grid-cols-2"> <div class="grid grid-cols-2">
<!-- Author Info --> <!-- Author Info -->
<div class="bg-white p-6 rounded-lg shadow-sm border"> <div class="card">
<h2 class="text-lg font-semibold mb-4">Author</h2> <h2>Author</h2>
<div class="space-y-2"> <div class="content">
<div> <div>
<span class="text-gray-600">Name:</span> <span>Name:</span>
<span id="authorName" class="ml-2"></span> <span id="authorName"></span>
</div> </div>
<div id="authorOrgContainer" class="hidden"> <div id="authorOrgContainer" class="hidden">
<span class="text-gray-600">Organization:</span> <span>Organization:</span>
<span id="authorOrg" class="ml-2"></span> <span id="authorOrg"></span>
</div> </div>
<div id="authorUrlContainer" class="hidden"> <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> </div>
</div> </div>
<!-- Compatibility --> <!-- Compatibility -->
<div class="bg-white p-6 rounded-lg shadow-sm border"> <div class="card">
<h2 class="text-lg font-semibold mb-4">Compatibility</h2> <h2>Compatibility</h2>
<div class="space-y-4"> <div>
<h3>HRIStudio</h3>
<div> <div>
<div class="text-gray-600 mb-2">HRIStudio</div> <span>Min Version:</span>
<div class="space-y-1"> <code id="hriMin"></code>
<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>
<div id="ros2Container" class="hidden"> <div id="hriRecommendedContainer" class="hidden">
<div class="text-gray-600 mb-2">ROS 2</div> <span>Recommended:</span>
<div class="space-y-1"> <code id="hriRecommended"></code>
<div id="ros2Distributions"></div> </div>
<div id="ros2RecommendedContainer" class="hidden"> </div>
<span class="text-sm text-gray-600">Recommended:</span> <div id="ros2Container" class="hidden">
<code id="ros2Recommended" class="ml-2 px-2 py-1 bg-gray-100 rounded text-sm"></code> <h3>ROS 2</h3>
</div> <div id="ros2Distributions"></div>
</div> <div id="ros2RecommendedContainer" class="hidden">
<span>Recommended:</span>
<code id="ros2Recommended"></code>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Tags --> <!-- Tags -->
<div class="bg-white p-6 rounded-lg shadow-sm border"> <div class="card">
<h2 class="text-lg font-semibold mb-4">Tags</h2> <h2>Tags</h2>
<div id="tags" class="flex flex-wrap gap-2"></div> <div id="tags"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -116,8 +215,6 @@
// Update stats // Update stats
document.getElementById('pluginCount').textContent = data.stats?.plugins || 0; 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 // Update author info
document.getElementById('authorName').textContent = data.author.name; document.getElementById('authorName').textContent = data.author.name;
@@ -142,7 +239,7 @@
const distributionsDiv = document.getElementById('ros2Distributions'); const distributionsDiv = document.getElementById('ros2Distributions');
data.compatibility.ros2.distributions.forEach(dist => { data.compatibility.ros2.distributions.forEach(dist => {
const badge = document.createElement('span'); 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; badge.textContent = dist;
distributionsDiv.appendChild(badge); distributionsDiv.appendChild(badge);
}); });
@@ -157,7 +254,7 @@
const tagsContainer = document.getElementById('tags'); const tagsContainer = document.getElementById('tags');
data.tags.forEach(tag => { data.tags.forEach(tag => {
const badge = document.createElement('span'); 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; badge.textContent = tag;
tagsContainer.appendChild(badge); tagsContainer.appendChild(badge);
}); });
@@ -171,7 +268,7 @@
if (data.assets?.banner) { if (data.assets?.banner) {
const banner = document.getElementById('repoBanner'); const banner = document.getElementById('repoBanner');
banner.style.backgroundImage = `url(${data.assets.banner})`; banner.src = data.assets.banner;
banner.classList.remove('hidden'); banner.classList.remove('hidden');
} }

6
repository.json
View File

@@ -2,7 +2,9 @@
"id": "hristudio-official", "id": "hristudio-official",
"name": "HRIStudio Official Robot Plugins", "name": "HRIStudio Official Robot Plugins",
"description": "Official collection of robot plugins maintained by the HRIStudio team", "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, "official": true,
"trust": "official", "trust": "official",
"author": { "author": {
@@ -43,8 +45,6 @@
"turtlebot" "turtlebot"
], ],
"stats": { "stats": {
"downloads": 0,
"stars": 0,
"plugins": 1 "plugins": 1
} }
} }