Awesome/awesome-copilot
1
0
Fork 0
mirror of https://github.com/github/awesome-copilot.git synced 2026-02-20 10:25:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #649 from github/feature/last-updated-dates

Browse Source 
feat(website): Add last updated dates for resources
This commit is contained in:
Aaron Powell
2026-02-04 08:30:02 +11:00
committed by GitHub
parent e32291ee9f 7300b8ccff
commit 5e329d41c0
14 changed files with 360 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
website/public/styles/global.css
View File

@@ -1415,6 +1415,14 @@ a:hover {
flex-shrink: 0;
}
/* Last Updated */
.last-updated {
font-size: 12px;
color: var(--color-text-muted);
cursor: default;
margin-left: auto;
}
/* Collection Items */
.collection-items {
margin-top: 12px;

7
website/src/pages/agents.astro
View File

@@ -35,6 +35,13 @@ import Modal from '../components/Modal.astro';
Has Handoffs
</label>
</div>
<div class="filter-group">
<label for="sort-select">Sort:</label>
<select id="sort-select" aria-label="Sort by">
<option value="title">Name (A-Z)</option>
<option value="lastUpdated">Recently Updated</option>
</select>
</div>
<button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
</div>

7
website/src/pages/instructions.astro
View File

@@ -24,6 +24,13 @@ import Modal from '../components/Modal.astro';
<label for="filter-extension">File Extension:</label>
<select id="filter-extension" multiple aria-label="Filter by file extension"></select>
</div>
<div class="filter-group">
<label for="sort-select">Sort:</label>
<select id="sort-select" aria-label="Sort by">
<option value="title">Name (A-Z)</option>
<option value="lastUpdated">Recently Updated</option>
</select>
</div>
<button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
</div>

7
website/src/pages/prompts.astro
View File

@@ -24,6 +24,13 @@ import Modal from '../components/Modal.astro';
<label for="filter-tool">Tool:</label>
<select id="filter-tool" multiple aria-label="Filter by tool"></select>
</div>
<div class="filter-group">
<label for="sort-select">Sort:</label>
<select id="sort-select" aria-label="Sort by">
<option value="title">Name (A-Z)</option>
<option value="lastUpdated">Recently Updated</option>
</select>
</div>
<button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
</div>

7
website/src/pages/skills.astro
View File

@@ -30,6 +30,13 @@ import Modal from '../components/Modal.astro';
Has Bundled Assets
</label>
</div>
<div class="filter-group">
<label for="sort-select">Sort:</label>
<select id="sort-select" aria-label="Sort by">
<option value="title">Name (A-Z)</option>
<option value="lastUpdated">Recently Updated</option>
</select>
</div>
<button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
</div>

32
website/src/scripts/pages/agents.ts
View File

@@ -3,7 +3,7 @@
*/
import { createChoices, getChoicesValues, type Choices } from '../choices';
import { FuzzySearch, SearchItem } from '../search';
import { fetchData, debounce, escapeHtml, getGitHubUrl, getInstallDropdownHtml, setupDropdownCloseHandlers, getActionButtonsHtml, setupActionHandlers } from '../utils';
import { fetchData, debounce, escapeHtml, getGitHubUrl, getInstallDropdownHtml, setupDropdownCloseHandlers, getActionButtonsHtml, setupActionHandlers, getLastUpdatedHtml } from '../utils';
import { setupModal, openFileModal } from '../modal';
interface Agent extends SearchItem {
@@ -11,6 +11,7 @@ interface Agent extends SearchItem {
model?: string;
tools?: string[];
hasHandoffs?: boolean;
lastUpdated?: string | null;
}
interface AgentsData {
@@ -21,11 +22,14 @@ interface AgentsData {
};
}
type SortOption = 'title' | 'lastUpdated';
const resourceType = 'agent';
let allItems: Agent[] = [];
let search = new FuzzySearch<Agent>();
let modelSelect: Choices;
let toolSelect: Choices;
let currentSort: SortOption = 'title';
let currentFilters = {
models: [] as string[],
@@ -33,6 +37,19 @@ let currentFilters = {
hasHandoffs: false,
};
function sortItems(items: Agent[]): Agent[] {
return [...items].sort((a, b) => {
if (currentSort === 'lastUpdated') {
// Sort by last updated (newest first), with null/undefined at end
const dateA = a.lastUpdated ? new Date(a.lastUpdated).getTime() : 0;
const dateB = b.lastUpdated ? new Date(b.lastUpdated).getTime() : 0;
return dateB - dateA;
}
// Default: sort by title
return a.title.localeCompare(b.title);
});
}
function applyFiltersAndRender(): void {
const searchInput = document.getElementById('search-input') as HTMLInputElement;
const countEl = document.getElementById('results-count');
@@ -59,6 +76,9 @@ function applyFiltersAndRender(): void {
results = results.filter(item => item.hasHandoffs);
}
// Apply sorting
results = sortItems(results);
renderItems(results, query);
const activeFilters: string[] = [];
@@ -97,6 +117,7 @@ function renderItems(items: Agent[], query = ''): void {
${item.tools?.slice(0, 3).map(t => `<span class="resource-tag">${escapeHtml(t)}</span>`).join('') || ''}
${item.tools && item.tools.length > 3 ? `<span class="resource-tag">+${item.tools.length - 3} more</span>` : ''}
${item.hasHandoffs ? `<span class="resource-tag tag-handoffs">handoffs</span>` : ''}
${getLastUpdatedHtml(item.lastUpdated)}
</div>
</div>
<div class="resource-actions">
@@ -123,6 +144,7 @@ export async function initAgentsPage(): Promise<void> {
const searchInput = document.getElementById('search-input') as HTMLInputElement;
const handoffsCheckbox = document.getElementById('filter-handoffs') as HTMLInputElement;
const clearFiltersBtn = document.getElementById('clear-filters');
const sortSelect = document.getElementById('sort-select') as HTMLSelectElement;
const data = await fetchData<AgentsData>('agents.json');
if (!data || !data.items) {
@@ -149,6 +171,12 @@ export async function initAgentsPage(): Promise<void> {
applyFiltersAndRender();
});
// Initialize sort select
sortSelect?.addEventListener('change', () => {
currentSort = sortSelect.value as SortOption;
applyFiltersAndRender();
});
applyFiltersAndRender();
searchInput?.addEventListener('input', debounce(() => applyFiltersAndRender(), 200));
@@ -160,10 +188,12 @@ export async function initAgentsPage(): Promise<void> {
clearFiltersBtn?.addEventListener('click', () => {
currentFilters = { models: [], tools: [], hasHandoffs: false };
currentSort = 'title';
modelSelect.removeActiveItems();
toolSelect.removeActiveItems();
if (handoffsCheckbox) handoffsCheckbox.checked = false;
if (searchInput) searchInput.value = '';
if (sortSelect) sortSelect.value = 'title';
applyFiltersAndRender();
});

28
website/src/scripts/pages/instructions.ts
View File

@@ -3,13 +3,14 @@
*/
import { createChoices, getChoicesValues, type Choices } from '../choices';
import { FuzzySearch, SearchItem } from '../search';
import { fetchData, debounce, escapeHtml, getGitHubUrl, getInstallDropdownHtml, setupDropdownCloseHandlers, getActionButtonsHtml, setupActionHandlers } from '../utils';
import { fetchData, debounce, escapeHtml, getGitHubUrl, getInstallDropdownHtml, setupDropdownCloseHandlers, getActionButtonsHtml, setupActionHandlers, getLastUpdatedHtml } from '../utils';
import { setupModal, openFileModal } from '../modal';
interface Instruction extends SearchItem {
path: string;
applyTo?: string;
extensions?: string[];
lastUpdated?: string | null;
}
interface InstructionsData {
@@ -19,11 +20,25 @@ interface InstructionsData {
};
}
type SortOption = 'title' | 'lastUpdated';
const resourceType = 'instruction';
let allItems: Instruction[] = [];
let search = new FuzzySearch<Instruction>();
let extensionSelect: Choices;
let currentFilters = { extensions: [] as string[] };
let currentSort: SortOption = 'title';
function sortItems(items: Instruction[]): Instruction[] {
return [...items].sort((a, b) => {
if (currentSort === 'lastUpdated') {
const dateA = a.lastUpdated ? new Date(a.lastUpdated).getTime() : 0;
const dateB = b.lastUpdated ? new Date(b.lastUpdated).getTime() : 0;
return dateB - dateA;
}
return a.title.localeCompare(b.title);
});
}
function applyFiltersAndRender(): void {
const searchInput = document.getElementById('search-input') as HTMLInputElement;
@@ -41,6 +56,8 @@ function applyFiltersAndRender(): void {
});
}
results = sortItems(results);
renderItems(results, query);
let countText = `${results.length} of ${allItems.length} instructions`;
if (currentFilters.extensions.length > 0) {
@@ -67,6 +84,7 @@ function renderItems(items: Instruction[], query = ''): void {
${item.applyTo ? `<span class="resource-tag">applies to: ${escapeHtml(item.applyTo)}</span>` : ''}
${item.extensions?.slice(0, 4).map(e => `<span class="resource-tag tag-extension">${escapeHtml(e)}</span>`).join('') || ''}
${item.extensions && item.extensions.length > 4 ? `<span class="resource-tag">+${item.extensions.length - 4} more</span>` : ''}
${getLastUpdatedHtml(item.lastUpdated)}
</div>
</div>
<div class="resource-actions">
@@ -92,6 +110,7 @@ export async function initInstructionsPage(): Promise<void> {
const list = document.getElementById('resource-list');
const searchInput = document.getElementById('search-input') as HTMLInputElement;
const clearFiltersBtn = document.getElementById('clear-filters');
const sortSelect = document.getElementById('sort-select') as HTMLSelectElement;
const data = await fetchData<InstructionsData>('instructions.json');
if (!data || !data.items) {
@@ -109,13 +128,20 @@ export async function initInstructionsPage(): Promise<void> {
applyFiltersAndRender();
});
sortSelect?.addEventListener('change', () => {
currentSort = sortSelect.value as SortOption;
applyFiltersAndRender();
});
applyFiltersAndRender();
searchInput?.addEventListener('input', debounce(() => applyFiltersAndRender(), 200));
clearFiltersBtn?.addEventListener('click', () => {
currentFilters = { extensions: [] };
currentSort = 'title';
extensionSelect.removeActiveItems();
if (searchInput) searchInput.value = '';
if (sortSelect) sortSelect.value = 'title';
applyFiltersAndRender();
});

28
website/src/scripts/pages/prompts.ts
View File

@@ -3,12 +3,13 @@
*/
import { createChoices, getChoicesValues, type Choices } from '../choices';
import { FuzzySearch, SearchItem } from '../search';
import { fetchData, debounce, escapeHtml, getGitHubUrl, getInstallDropdownHtml, setupDropdownCloseHandlers, getActionButtonsHtml, setupActionHandlers } from '../utils';
import { fetchData, debounce, escapeHtml, getGitHubUrl, getInstallDropdownHtml, setupDropdownCloseHandlers, getActionButtonsHtml, setupActionHandlers, getLastUpdatedHtml } from '../utils';
import { setupModal, openFileModal } from '../modal';
interface Prompt extends SearchItem {
path: string;
tools?: string[];
lastUpdated?: string | null;
}
interface PromptsData {
@@ -18,11 +19,25 @@ interface PromptsData {
};
}
type SortOption = 'title' | 'lastUpdated';
const resourceType = 'prompt';
let allItems: Prompt[] = [];
let search = new FuzzySearch<Prompt>();
let toolSelect: Choices;
let currentFilters = { tools: [] as string[] };
let currentSort: SortOption = 'title';
function sortItems(items: Prompt[]): Prompt[] {
return [...items].sort((a, b) => {
if (currentSort === 'lastUpdated') {
const dateA = a.lastUpdated ? new Date(a.lastUpdated).getTime() : 0;
const dateB = b.lastUpdated ? new Date(b.lastUpdated).getTime() : 0;
return dateB - dateA;
}
return a.title.localeCompare(b.title);
});
}
function applyFiltersAndRender(): void {
const searchInput = document.getElementById('search-input') as HTMLInputElement;
@@ -37,6 +52,8 @@ function applyFiltersAndRender(): void {
);
}
results = sortItems(results);
renderItems(results, query);
let countText = `${results.length} of ${allItems.length} prompts`;
if (currentFilters.tools.length > 0) {
@@ -62,6 +79,7 @@ function renderItems(items: Prompt[], query = ''): void {
<div class="resource-meta">
${item.tools?.slice(0, 4).map(t => `<span class="resource-tag">${escapeHtml(t)}</span>`).join('') || ''}
${item.tools && item.tools.length > 4 ? `<span class="resource-tag">+${item.tools.length - 4} more</span>` : ''}
${getLastUpdatedHtml(item.lastUpdated)}
</div>
</div>
<div class="resource-actions">
@@ -87,6 +105,7 @@ export async function initPromptsPage(): Promise<void> {
const list = document.getElementById('resource-list');
const searchInput = document.getElementById('search-input') as HTMLInputElement;
const clearFiltersBtn = document.getElementById('clear-filters');
const sortSelect = document.getElementById('sort-select') as HTMLSelectElement;
const data = await fetchData<PromptsData>('prompts.json');
if (!data || !data.items) {
@@ -104,13 +123,20 @@ export async function initPromptsPage(): Promise<void> {
applyFiltersAndRender();
});
sortSelect?.addEventListener('change', () => {
currentSort = sortSelect.value as SortOption;
applyFiltersAndRender();
});
applyFiltersAndRender();
searchInput?.addEventListener('input', debounce(() => applyFiltersAndRender(), 200));
clearFiltersBtn?.addEventListener('click', () => {
currentFilters = { tools: [] };
currentSort = 'title';
toolSelect.removeActiveItems();
if (searchInput) searchInput.value = '';
if (sortSelect) sortSelect.value = 'title';
applyFiltersAndRender();
});

27
website/src/scripts/pages/skills.ts
View File

@@ -10,6 +10,7 @@ import {
getGitHubUrl,
getRawGitHubUrl,
showToast,
getLastUpdatedHtml,
} from "../utils";
import { setupModal, openFileModal } from "../modal";
import JSZip from "../jszip";
@@ -27,6 +28,7 @@ interface Skill extends SearchItem {
hasAssets: boolean;
assetCount: number;
files: SkillFile[];
lastUpdated?: string | null;
}
interface SkillsData {
@@ -36,6 +38,8 @@ interface SkillsData {
};
}
type SortOption = 'title' | 'lastUpdated';
const resourceType = "skill";
let allItems: Skill[] = [];
let search = new FuzzySearch<Skill>();
@@ -44,6 +48,18 @@ let currentFilters = {
categories: [] as string[],
hasAssets: false,
};
let currentSort: SortOption = 'title';
function sortItems(items: Skill[]): Skill[] {
return [...items].sort((a, b) => {
if (currentSort === 'lastUpdated') {
const dateA = a.lastUpdated ? new Date(a.lastUpdated).getTime() : 0;
const dateB = b.lastUpdated ? new Date(b.lastUpdated).getTime() : 0;
return dateB - dateA;
}
return a.title.localeCompare(b.title);
});
}
function applyFiltersAndRender(): void {
const searchInput = document.getElementById(
@@ -63,6 +79,8 @@ function applyFiltersAndRender(): void {
results = results.filter((item) => item.hasAssets);
}
results = sortItems(results);
renderItems(results, query);
const activeFilters: string[] = [];
if (currentFilters.categories.length > 0)
@@ -116,6 +134,7 @@ function renderItems(items: Skill[], query = ""): void {
<span class="resource-tag">${item.files.length} file${
item.files.length === 1 ? "" : "s"
}</span>
${getLastUpdatedHtml(item.lastUpdated)}
</div>
</div>
<div class="resource-actions">
@@ -236,6 +255,7 @@ export async function initSkillsPage(): Promise<void> {
"filter-has-assets"
) as HTMLInputElement;
const clearFiltersBtn = document.getElementById("clear-filters");
const sortSelect = document.getElementById("sort-select") as HTMLSelectElement;
const data = await fetchData<SkillsData>("skills.json");
if (!data || !data.items) {
@@ -262,6 +282,11 @@ export async function initSkillsPage(): Promise<void> {
applyFiltersAndRender();
});
sortSelect?.addEventListener("change", () => {
currentSort = sortSelect.value as SortOption;
applyFiltersAndRender();
});
applyFiltersAndRender();
searchInput?.addEventListener(
"input",
@@ -275,9 +300,11 @@ export async function initSkillsPage(): Promise<void> {
clearFiltersBtn?.addEventListener("click", () => {
currentFilters = { categories: [], hasAssets: false };
currentSort = 'title';
categorySelect.removeActiveItems();
if (hasAssetsCheckbox) hasAssetsCheckbox.checked = false;
if (searchInput) searchInput.value = "";
if (sortSelect) sortSelect.value = "title";
applyFiltersAndRender();
});

72
website/src/scripts/utils.ts
View File

@@ -429,3 +429,75 @@ export function setupActionHandlers(): void {
let dropdownHandlersReady = false;
let actionHandlersReady = false;
/**
* Format a date as relative time (e.g., "3 days ago")
* @param isoDate - ISO 8601 date string
* @returns Relative time string
*/
export function formatRelativeTime(isoDate: string | null | undefined): string {
if (!isoDate) return "Unknown";
const date = new Date(isoDate);
if (isNaN(date.getTime())) return "Unknown";
const now = new Date();
const diffMs = now.getTime() - date.getTime();
const diffSeconds = Math.floor(diffMs / 1000);
const diffMinutes = Math.floor(diffSeconds / 60);
const diffHours = Math.floor(diffMinutes / 60);
const diffDays = Math.floor(diffHours / 24);
const diffWeeks = Math.floor(diffDays / 7);
const diffMonths = Math.floor(diffDays / 30);
const diffYears = Math.floor(diffDays / 365);
if (diffDays === 0) {
if (diffHours === 0) {
if (diffMinutes === 0) return "just now";
return diffMinutes === 1 ? "1 minute ago" : `${diffMinutes} minutes ago`;
}
return diffHours === 1 ? "1 hour ago" : `${diffHours} hours ago`;
}
if (diffDays === 1) return "yesterday";
if (diffDays < 7) return `${diffDays} days ago`;
if (diffWeeks === 1) return "1 week ago";
if (diffWeeks < 4) return `${diffWeeks} weeks ago`;
if (diffMonths === 1) return "1 month ago";
if (diffMonths < 12) return `${diffMonths} months ago`;
if (diffYears === 1) return "1 year ago";
return `${diffYears} years ago`;
}
/**
* Format a date for display (e.g., "January 15, 2026")
* @param isoDate - ISO 8601 date string
* @returns Formatted date string
*/
export function formatFullDate(isoDate: string | null | undefined): string {
if (!isoDate) return "Unknown";
const date = new Date(isoDate);
if (isNaN(date.getTime())) return "Unknown";
return date.toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
});
}
/**
* Generate HTML for displaying last updated time with hover tooltip
* @param isoDate - ISO 8601 date string
* @returns HTML string with relative time and title attribute
*/
export function getLastUpdatedHtml(isoDate: string | null | undefined): string {
const relativeTime = formatRelativeTime(isoDate);
const fullDate = formatFullDate(isoDate);
if (relativeTime === "Unknown") {
return `<span class="last-updated">Updated: Unknown</span>`;
}
return `<span class="last-updated" title="${escapeHtml(fullDate)}">Updated ${relativeTime}</span>`;
}