mirror of
https://github.com/github/awesome-copilot.git
synced 2026-03-12 04:05:12 +00:00
feat: show external plugins on the website (#937)
* feat: show external plugins on the website Read plugins/external.json during website data generation and include external plugins alongside local ones in plugins.json. External plugins are flagged with external:true and carry metadata (author, repository, homepage, license, source). On the website: - Plugin cards show a '🔗 External' badge and author attribution - The 'Repository' button links to the source path within the repo - The modal shows metadata (author, repo, homepage, license) and a 'View Repository' CTA instead of an items list - External plugins are searchable and filterable by tags Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: address PR #937 security and UX review comments - Add sanitizeUrl() function to validate URLs and prevent XSS via javascript:/data: schemes - Add rel="noopener noreferrer" to all target="_blank" links to prevent reverse-tabnabbing - Change external plugin path from external/<name> to plugins/<name> for proper deep-linking - Track actual count of external plugins added (after filtering/deduplication) in build logs Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Aaron Powell
GitHub
@@ -544,6 +544,63 @@ function generatePluginsData(gitDates) {
|
||||
}
|
||||
}
|
||||
|
||||
// Load external plugins from plugins/external.json
|
||||
const externalJsonPath = path.join(PLUGINS_DIR, "external.json");
|
||||
if (fs.existsSync(externalJsonPath)) {
|
||||
try {
|
||||
const externalPlugins = JSON.parse(
|
||||
fs.readFileSync(externalJsonPath, "utf-8")
|
||||
);
|
||||
if (Array.isArray(externalPlugins)) {
|
||||
let addedCount = 0;
|
||||
for (const ext of externalPlugins) {
|
||||
if (!ext.name || !ext.description) {
|
||||
console.warn(
|
||||
`Skipping external plugin with missing name/description`
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
// Skip if a local plugin with the same name already exists
|
||||
if (plugins.some((p) => p.id === ext.name)) {
|
||||
console.warn(
|
||||
`Skipping external plugin "${ext.name}" — local plugin with same name exists`
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
const tags = ext.keywords || ext.tags || [];
|
||||
|
||||
plugins.push({
|
||||
id: ext.name,
|
||||
name: ext.name,
|
||||
description: ext.description || "",
|
||||
path: `plugins/${ext.name}`,
|
||||
tags: tags,
|
||||
itemCount: 0,
|
||||
items: [],
|
||||
external: true,
|
||||
repository: ext.repository || null,
|
||||
homepage: ext.homepage || null,
|
||||
author: ext.author || null,
|
||||
license: ext.license || null,
|
||||
source: ext.source || null,
|
||||
lastUpdated: null,
|
||||
searchText: `${ext.name} ${ext.description || ""} ${tags.join(
|
||||
" "
|
||||
)} ${ext.author?.name || ""} ${ext.repository || ""}`.toLowerCase(),
|
||||
});
|
||||
addedCount++;
|
||||
}
|
||||
console.log(
|
||||
` ✓ Loaded ${addedCount} external plugin(s)`
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn(`Failed to parse external plugins: ${e.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Collect all unique tags
|
||||
const allTags = [...new Set(plugins.flatMap((p) => p.tags))].sort();
|
||||
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
getResourceType,
|
||||
escapeHtml,
|
||||
getResourceIcon,
|
||||
sanitizeUrl,
|
||||
} from "./utils";
|
||||
|
||||
// Modal state
|
||||
@@ -83,6 +84,17 @@ interface PluginItem {
|
||||
usage?: string | null;
|
||||
}
|
||||
|
||||
interface PluginAuthor {
|
||||
name: string;
|
||||
url?: string;
|
||||
}
|
||||
|
||||
interface PluginSource {
|
||||
source: string;
|
||||
repo?: string;
|
||||
path?: string;
|
||||
}
|
||||
|
||||
interface Plugin {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -90,6 +102,12 @@ interface Plugin {
|
||||
path: string;
|
||||
items: PluginItem[];
|
||||
tags?: string[];
|
||||
external?: boolean;
|
||||
repository?: string | null;
|
||||
homepage?: string | null;
|
||||
author?: PluginAuthor | null;
|
||||
license?: string | null;
|
||||
source?: PluginSource | null;
|
||||
}
|
||||
|
||||
interface PluginsData {
|
||||
@@ -519,7 +537,114 @@ async function openPluginModal(
|
||||
title.textContent = plugin.name;
|
||||
document.title = `${plugin.name} | Awesome GitHub Copilot`;
|
||||
|
||||
// Render plugin view
|
||||
// Render external plugin view (metadata + links) or local plugin view (items list)
|
||||
if (plugin.external) {
|
||||
renderExternalPluginModal(plugin, modalContent);
|
||||
} else {
|
||||
renderLocalPluginModal(plugin, modalContent);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the best URL for an external plugin, preferring the deep path within the repo
|
||||
*/
|
||||
function getExternalPluginUrl(plugin: Plugin): string {
|
||||
if (plugin.source?.source === "github" && plugin.source.repo) {
|
||||
const base = `https://github.com/${plugin.source.repo}`;
|
||||
return plugin.source.path ? `${base}/tree/main/${plugin.source.path}` : base;
|
||||
}
|
||||
// Sanitize URLs from JSON to prevent XSS via javascript:/data: schemes
|
||||
return sanitizeUrl(plugin.repository || plugin.homepage);
|
||||
}
|
||||
|
||||
/**
|
||||
* Render modal content for an external plugin (no local files)
|
||||
*/
|
||||
function renderExternalPluginModal(
|
||||
plugin: Plugin,
|
||||
modalContent: HTMLElement
|
||||
): void {
|
||||
const authorHtml = plugin.author?.name
|
||||
? `<div class="external-plugin-meta-row">
|
||||
<span class="external-plugin-meta-label">Author</span>
|
||||
<span class="external-plugin-meta-value">${
|
||||
plugin.author.url
|
||||
? `<a href="${sanitizeUrl(plugin.author.url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(plugin.author.name)}</a>`
|
||||
: escapeHtml(plugin.author.name)
|
||||
}</span>
|
||||
</div>`
|
||||
: "";
|
||||
|
||||
const repoHtml = plugin.repository
|
||||
? `<div class="external-plugin-meta-row">
|
||||
<span class="external-plugin-meta-label">Repository</span>
|
||||
<span class="external-plugin-meta-value"><a href="${sanitizeUrl(plugin.repository)}" target="_blank" rel="noopener noreferrer">${escapeHtml(plugin.repository)}</a></span>
|
||||
</div>`
|
||||
: "";
|
||||
|
||||
const homepageHtml =
|
||||
plugin.homepage && plugin.homepage !== plugin.repository
|
||||
? `<div class="external-plugin-meta-row">
|
||||
<span class="external-plugin-meta-label">Homepage</span>
|
||||
<span class="external-plugin-meta-value"><a href="${sanitizeUrl(plugin.homepage)}" target="_blank" rel="noopener noreferrer">${escapeHtml(plugin.homepage)}</a></span>
|
||||
</div>`
|
||||
: "";
|
||||
|
||||
const licenseHtml = plugin.license
|
||||
? `<div class="external-plugin-meta-row">
|
||||
<span class="external-plugin-meta-label">License</span>
|
||||
<span class="external-plugin-meta-value">${escapeHtml(plugin.license)}</span>
|
||||
</div>`
|
||||
: "";
|
||||
|
||||
const sourceHtml = plugin.source?.repo
|
||||
? `<div class="external-plugin-meta-row">
|
||||
<span class="external-plugin-meta-label">Source</span>
|
||||
<span class="external-plugin-meta-value">GitHub: ${escapeHtml(plugin.source.repo)}${plugin.source.path ? ` (${escapeHtml(plugin.source.path)})` : ""}</span>
|
||||
</div>`
|
||||
: "";
|
||||
|
||||
const repoUrl = getExternalPluginUrl(plugin);
|
||||
|
||||
modalContent.innerHTML = `
|
||||
<div class="collection-view">
|
||||
<div class="collection-description">${escapeHtml(plugin.description || "")}</div>
|
||||
${
|
||||
plugin.tags && plugin.tags.length > 0
|
||||
? `<div class="collection-tags">
|
||||
<span class="resource-tag resource-tag-external">🔗 External Plugin</span>
|
||||
${plugin.tags.map((t) => `<span class="resource-tag">${escapeHtml(t)}</span>`).join("")}
|
||||
</div>`
|
||||
: `<div class="collection-tags">
|
||||
<span class="resource-tag resource-tag-external">🔗 External Plugin</span>
|
||||
</div>`
|
||||
}
|
||||
<div class="external-plugin-metadata">
|
||||
${authorHtml}
|
||||
${repoHtml}
|
||||
${homepageHtml}
|
||||
${licenseHtml}
|
||||
${sourceHtml}
|
||||
</div>
|
||||
<div class="external-plugin-cta">
|
||||
<a href="${sanitizeUrl(repoUrl)}" class="btn btn-primary external-plugin-repo-btn" target="_blank" rel="noopener noreferrer">
|
||||
View Repository →
|
||||
</a>
|
||||
</div>
|
||||
<div class="external-plugin-note">
|
||||
This is an external plugin maintained outside this repository. Browse the repository to see its contents and installation instructions.
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render modal content for a local plugin (item list)
|
||||
*/
|
||||
function renderLocalPluginModal(
|
||||
plugin: Plugin,
|
||||
modalContent: HTMLElement
|
||||
): void {
|
||||
modalContent.innerHTML = `
|
||||
<div class="collection-view">
|
||||
<div class="collection-description">${escapeHtml(
|
||||
|
||||
@@ -3,9 +3,20 @@
|
||||
*/
|
||||
import { createChoices, getChoicesValues, type Choices } from '../choices';
|
||||
import { FuzzySearch, type SearchItem } from '../search';
|
||||
import { fetchData, debounce, escapeHtml, getGitHubUrl } from '../utils';
|
||||
import { fetchData, debounce, escapeHtml, getGitHubUrl, sanitizeUrl } from '../utils';
|
||||
import { setupModal, openFileModal } from '../modal';
|
||||
|
||||
interface PluginAuthor {
|
||||
name: string;
|
||||
url?: string;
|
||||
}
|
||||
|
||||
interface PluginSource {
|
||||
source: string;
|
||||
repo?: string;
|
||||
path?: string;
|
||||
}
|
||||
|
||||
interface Plugin extends SearchItem {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -13,6 +24,12 @@ interface Plugin extends SearchItem {
|
||||
tags?: string[];
|
||||
featured?: boolean;
|
||||
itemCount: number;
|
||||
external?: boolean;
|
||||
repository?: string | null;
|
||||
homepage?: string | null;
|
||||
author?: PluginAuthor | null;
|
||||
license?: string | null;
|
||||
source?: PluginSource | null;
|
||||
}
|
||||
|
||||
interface PluginsData {
|
||||
@@ -56,6 +73,15 @@ function applyFiltersAndRender(): void {
|
||||
if (countEl) countEl.textContent = countText;
|
||||
}
|
||||
|
||||
function getExternalPluginUrl(plugin: Plugin): string {
|
||||
if (plugin.source?.source === 'github' && plugin.source.repo) {
|
||||
const base = `https://github.com/${plugin.source.repo}`;
|
||||
return plugin.source.path ? `${base}/tree/main/${plugin.source.path}` : base;
|
||||
}
|
||||
// Sanitize URLs from JSON to prevent XSS via javascript:/data: schemes
|
||||
return sanitizeUrl(plugin.repository || plugin.homepage);
|
||||
}
|
||||
|
||||
function renderItems(items: Plugin[], query = ''): void {
|
||||
const list = document.getElementById('resource-list');
|
||||
if (!list) return;
|
||||
@@ -65,22 +91,35 @@ function renderItems(items: Plugin[], query = ''): void {
|
||||
return;
|
||||
}
|
||||
|
||||
list.innerHTML = items.map(item => `
|
||||
<div class="resource-item" data-path="${escapeHtml(item.path)}">
|
||||
list.innerHTML = items.map(item => {
|
||||
const isExternal = item.external === true;
|
||||
const metaTag = isExternal
|
||||
? `<span class="resource-tag resource-tag-external">🔗 External</span>`
|
||||
: `<span class="resource-tag">${item.itemCount} items</span>`;
|
||||
const authorTag = isExternal && item.author?.name
|
||||
? `<span class="resource-tag">by ${escapeHtml(item.author.name)}</span>`
|
||||
: '';
|
||||
const githubHref = isExternal
|
||||
? escapeHtml(getExternalPluginUrl(item))
|
||||
: getGitHubUrl(item.path);
|
||||
|
||||
return `
|
||||
<div class="resource-item${isExternal ? ' resource-item-external' : ''}" data-path="${escapeHtml(item.path)}">
|
||||
<div class="resource-info">
|
||||
<div class="resource-title">${item.featured ? '⭐ ' : ''}${query ? search.highlight(item.name, query) : escapeHtml(item.name)}</div>
|
||||
<div class="resource-description">${escapeHtml(item.description || 'No description')}</div>
|
||||
<div class="resource-meta">
|
||||
<span class="resource-tag">${item.itemCount} items</span>
|
||||
${metaTag}
|
||||
${authorTag}
|
||||
${item.tags?.slice(0, 4).map(t => `<span class="resource-tag">${escapeHtml(t)}</span>`).join('') || ''}
|
||||
${item.tags && item.tags.length > 4 ? `<span class="resource-tag">+${item.tags.length - 4} more</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="resource-actions">
|
||||
<a href="${getGitHubUrl(item.path)}" class="btn btn-secondary" target="_blank" onclick="event.stopPropagation()" title="View on GitHub">GitHub</a>
|
||||
<a href="${githubHref}" class="btn btn-secondary" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation()" title="${isExternal ? 'View repository' : 'View on GitHub'}">${isExternal ? 'Repository' : 'GitHub'}</a>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
</div>`;
|
||||
}).join('');
|
||||
|
||||
// Add click handlers
|
||||
list.querySelectorAll('.resource-item').forEach(el => {
|
||||
|
||||
@@ -214,6 +214,24 @@ export function escapeHtml(text: string): string {
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate and sanitize URLs to prevent XSS attacks
|
||||
* Only allows http/https protocols, returns '#' for invalid URLs
|
||||
*/
|
||||
export function sanitizeUrl(url: string | null | undefined): string {
|
||||
if (!url) return '#';
|
||||
try {
|
||||
const parsed = new URL(url);
|
||||
// Only allow http and https protocols
|
||||
if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
|
||||
return url;
|
||||
}
|
||||
} catch {
|
||||
// Invalid URL
|
||||
}
|
||||
return '#';
|
||||
}
|
||||
|
||||
/**
|
||||
* Truncate text with ellipsis
|
||||
*/
|
||||
|
||||
@@ -900,6 +900,71 @@ body:has(#main-content) {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
/* External plugin badge */
|
||||
.resource-tag-external {
|
||||
background: var(--color-accent);
|
||||
color: var(--color-bg);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* External plugin modal metadata */
|
||||
.external-plugin-metadata {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
padding: 12px 16px;
|
||||
background: var(--color-bg-tertiary);
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.external-plugin-meta-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.external-plugin-meta-label {
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 500;
|
||||
min-width: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.external-plugin-meta-value {
|
||||
color: var(--color-text);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.external-plugin-meta-value a {
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.external-plugin-meta-value a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.external-plugin-cta {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.external-plugin-repo-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.external-plugin-note {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Page Layouts */
|
||||
.page-header {
|
||||
padding: 56px 0 40px;
|
||||
|
||||
Reference in New Issue
Block a user