mirror of
https://github.com/github/awesome-copilot.git
synced 2026-07-17 03:13:25 +00:00
Aaron Powell
e65c8359b1
* Some layout tweaks * SSR resource listing pages Render resource listing pages in Astro for first paint and hydrate client filtering/search behavior on top. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Fixing font path * removing feature plugin reference as we don't track that anymore * button alignment * rendering markdown * Improve skills modal file browsing Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Improving the layout of the search/filter section --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
252 lines
8.9 KiB
TypeScript
252 lines
8.9 KiB
TypeScript
import { escapeHtml, sanitizeUrl } from "../utils";
|
|
|
|
export interface Language {
|
|
id: string;
|
|
name: string;
|
|
icon: string;
|
|
extension: string;
|
|
}
|
|
|
|
export interface RecipeVariant {
|
|
doc: string;
|
|
example: string | null;
|
|
}
|
|
|
|
export interface Recipe {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
tags: string[];
|
|
languages: string[];
|
|
variants: Record<string, RecipeVariant>;
|
|
external?: boolean;
|
|
url?: string | null;
|
|
author?: { name: string; url?: string } | null;
|
|
}
|
|
|
|
export interface Cookbook {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
path: string;
|
|
featured: boolean;
|
|
languages: Language[];
|
|
recipes: Recipe[];
|
|
}
|
|
|
|
export interface CookbookRecipeMatch {
|
|
cookbook: Cookbook;
|
|
recipe: Recipe;
|
|
highlightedName?: string;
|
|
}
|
|
|
|
export function getRecipeResultsCountText(
|
|
filteredCount: number,
|
|
totalCount: number
|
|
): string {
|
|
if (filteredCount === totalCount) {
|
|
return `${totalCount} recipe${totalCount !== 1 ? "s" : ""}`;
|
|
}
|
|
|
|
return `${filteredCount} of ${totalCount} recipe${
|
|
totalCount !== 1 ? "s" : ""
|
|
}`;
|
|
}
|
|
|
|
export function renderCookbookSectionsHtml(
|
|
matches: CookbookRecipeMatch[],
|
|
options: {
|
|
selectedLanguage?: string | null;
|
|
} = {}
|
|
): string {
|
|
if (matches.length === 0) {
|
|
return `
|
|
<div class="empty-state">
|
|
<h3>No Results Found</h3>
|
|
<p>Try adjusting your search or filters.</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
const { selectedLanguage = null } = options;
|
|
const byCookbook = new Map<
|
|
string,
|
|
{ cookbook: Cookbook; recipes: { recipe: Recipe; highlightedName?: string }[] }
|
|
>();
|
|
|
|
matches.forEach(({ cookbook, recipe, highlightedName }) => {
|
|
if (!byCookbook.has(cookbook.id)) {
|
|
byCookbook.set(cookbook.id, { cookbook, recipes: [] });
|
|
}
|
|
byCookbook.get(cookbook.id)?.recipes.push({ recipe, highlightedName });
|
|
});
|
|
|
|
let html = "";
|
|
byCookbook.forEach(({ cookbook, recipes }) => {
|
|
html += renderCookbookSection(cookbook, recipes, selectedLanguage);
|
|
});
|
|
|
|
return html;
|
|
}
|
|
|
|
function renderCookbookSection(
|
|
cookbook: Cookbook,
|
|
recipes: { recipe: Recipe; highlightedName?: string }[],
|
|
selectedLanguage: string | null
|
|
): string {
|
|
const languageTabs = cookbook.languages
|
|
.map(
|
|
(language) => `
|
|
<button class="lang-tab${selectedLanguage === language.id ? " active" : ""}"
|
|
data-lang="${escapeHtml(language.id)}"
|
|
title="${escapeHtml(language.name)}">
|
|
${escapeHtml(language.icon)}
|
|
</button>
|
|
`
|
|
)
|
|
.join("");
|
|
|
|
const recipeCards = recipes
|
|
.map(({ recipe, highlightedName }) =>
|
|
renderRecipeCard(cookbook, recipe, selectedLanguage, highlightedName)
|
|
)
|
|
.join("");
|
|
|
|
return `
|
|
<div class="cookbook-section" data-cookbook="${escapeHtml(cookbook.id)}">
|
|
<div class="cookbook-header">
|
|
<div class="cookbook-info">
|
|
<h2>${escapeHtml(cookbook.name)}</h2>
|
|
<p>${escapeHtml(cookbook.description)}</p>
|
|
</div>
|
|
<div class="cookbook-languages">
|
|
${languageTabs}
|
|
</div>
|
|
</div>
|
|
<div class="recipes-grid">
|
|
${recipeCards}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderRecipeCard(
|
|
cookbook: Cookbook,
|
|
recipe: Recipe,
|
|
selectedLanguage: string | null,
|
|
highlightedName?: string
|
|
): string {
|
|
const recipeKey = `${cookbook.id}-${recipe.id}`;
|
|
const tags = recipe.tags
|
|
.map((tag) => `<span class="recipe-tag">${escapeHtml(tag)}</span>`)
|
|
.join("");
|
|
const titleHtml = highlightedName || escapeHtml(recipe.name);
|
|
|
|
if (recipe.external && recipe.url) {
|
|
const authorHtml = recipe.author
|
|
? `<span class="recipe-author">by ${
|
|
recipe.author.url
|
|
? `<a href="${sanitizeUrl(
|
|
recipe.author.url
|
|
)}" target="_blank" rel="noopener">${escapeHtml(
|
|
recipe.author.name
|
|
)}</a>`
|
|
: escapeHtml(recipe.author.name)
|
|
}</span>`
|
|
: "";
|
|
|
|
return `
|
|
<div class="recipe-card external" data-recipe="${escapeHtml(recipeKey)}">
|
|
<div class="recipe-header">
|
|
<h3>${titleHtml}</h3>
|
|
<span class="recipe-badge external-badge" title="External project">
|
|
<svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true">
|
|
<path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"/>
|
|
</svg>
|
|
Community
|
|
</span>
|
|
</div>
|
|
<p class="recipe-description">${escapeHtml(recipe.description)}</p>
|
|
${authorHtml ? `<div class="recipe-author-line">${authorHtml}</div>` : ""}
|
|
<div class="recipe-tags">${tags}</div>
|
|
<div class="recipe-actions">
|
|
<a href="${sanitizeUrl(
|
|
recipe.url
|
|
)}" class="btn btn-primary btn-small" target="_blank" rel="noopener">
|
|
<svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true">
|
|
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
|
|
</svg>
|
|
View on GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
const displayLanguage = selectedLanguage || cookbook.languages?.[0]?.id || "nodejs";
|
|
const variant = recipe.variants[displayLanguage];
|
|
const langIndicators = (cookbook.languages ?? [])
|
|
.filter((language) => recipe.variants[language.id])
|
|
.map(
|
|
(language) =>
|
|
`<span class="lang-indicator" title="${escapeHtml(language.name)}">${escapeHtml(
|
|
language.icon
|
|
)}</span>`
|
|
)
|
|
.join("");
|
|
|
|
return `
|
|
<div class="recipe-card" data-recipe="${escapeHtml(
|
|
recipeKey
|
|
)}" data-cookbook="${escapeHtml(cookbook.id)}" data-recipe-id="${escapeHtml(
|
|
recipe.id
|
|
)}">
|
|
<div class="recipe-header">
|
|
<h3>${titleHtml}</h3>
|
|
<div class="recipe-langs">${langIndicators}</div>
|
|
</div>
|
|
<p class="recipe-description">${escapeHtml(recipe.description)}</p>
|
|
<div class="recipe-tags">${tags}</div>
|
|
<div class="recipe-actions">
|
|
${
|
|
variant
|
|
? `
|
|
<button class="btn btn-secondary btn-small view-recipe-btn" data-doc="${escapeHtml(
|
|
variant.doc
|
|
)}">
|
|
<svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true">
|
|
<path d="M1 2.75A.75.75 0 0 1 1.75 2h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75zm0 5A.75.75 0 0 1 1.75 7h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 7.75zM1.75 12h12.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1 0-1.5z"/>
|
|
</svg>
|
|
View Recipe
|
|
</button>
|
|
${
|
|
variant.example
|
|
? `
|
|
<button class="btn btn-secondary btn-small view-example-btn" data-example="${escapeHtml(
|
|
variant.example
|
|
)}">
|
|
<svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true">
|
|
<path d="M4.72 3.22a.75.75 0 0 1 1.06 0l3.5 3.5a.75.75 0 0 1 0 1.06l-3.5 3.5a.75.75 0 0 1-1.06-1.06L7.69 7.5 4.72 4.28a.75.75 0 0 1 0-1.06zm6.25 1.06L10.22 5l.75.75-2.25 2.25 2.25 2.25-.75.75-.75-.72L11.97 7.5z"/>
|
|
</svg>
|
|
View Example
|
|
</button>
|
|
`
|
|
: ""
|
|
}
|
|
<a href="https://github.com/github/awesome-copilot/blob/main/${escapeHtml(
|
|
variant.doc
|
|
)}"
|
|
class="btn btn-secondary btn-small" target="_blank" rel="noopener">
|
|
<svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true">
|
|
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
|
|
</svg>
|
|
GitHub
|
|
</a>
|
|
`
|
|
: '<span class="no-variant">Not available for selected language</span>'
|
|
}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|