mirror of
https://github.com/github/awesome-copilot.git
synced 2026-02-20 02:15:12 +00:00
feat(website): Add last updated dates for agents, prompts, instructions, and skills
- Add git-dates.mjs utility to extract file modification dates from git history - Include lastUpdated field in JSON data for all resource types - Display relative time (e.g., '3 days ago') with full date on hover - Add 'Recently Updated' sort option to agents, prompts, instructions, and skills pages - Update deploy-website.yml to use fetch-depth: 0 for full git history CI overhead: ~20-30s additional for full git checkout
This commit is contained in:
Aaron Powell
2
.github/workflows/deploy-website.yml
vendored
2
.github/workflows/deploy-website.yml
vendored
@@ -40,6 +40,8 @@ jobs:
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0 # Full history needed for git-based last updated dates
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
|
||||
@@ -24,6 +24,7 @@ import {
|
||||
parseSkillMetadata,
|
||||
parseYamlFile,
|
||||
} from "./yaml-parser.mjs";
|
||||
import { getGitFileDates } from "./utils/git-dates.mjs";
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
@@ -65,7 +66,7 @@ function extractTitle(filePath, frontmatter) {
|
||||
/**
|
||||
* Generate agents metadata
|
||||
*/
|
||||
function generateAgentsData() {
|
||||
function generateAgentsData(gitDates) {
|
||||
const agents = [];
|
||||
const files = fs
|
||||
.readdirSync(AGENTS_DIR)
|
||||
@@ -106,6 +107,7 @@ function generateAgentsData() {
|
||||
: [],
|
||||
path: relativePath,
|
||||
filename: file,
|
||||
lastUpdated: gitDates.get(relativePath) || null,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -124,7 +126,7 @@ function generateAgentsData() {
|
||||
/**
|
||||
* Generate prompts metadata
|
||||
*/
|
||||
function generatePromptsData() {
|
||||
function generatePromptsData(gitDates) {
|
||||
const prompts = [];
|
||||
const files = fs
|
||||
.readdirSync(PROMPTS_DIR)
|
||||
@@ -152,6 +154,7 @@ function generatePromptsData() {
|
||||
tools: tools,
|
||||
path: relativePath,
|
||||
filename: file,
|
||||
lastUpdated: gitDates.get(relativePath) || null,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -207,7 +210,7 @@ function extractExtensionFromPattern(pattern) {
|
||||
/**
|
||||
* Generate instructions metadata
|
||||
*/
|
||||
function generateInstructionsData() {
|
||||
function generateInstructionsData(gitDates) {
|
||||
const instructions = [];
|
||||
const files = fs
|
||||
.readdirSync(INSTRUCTIONS_DIR)
|
||||
@@ -254,6 +257,7 @@ function generateInstructionsData() {
|
||||
extensions: [...new Set(extensions)],
|
||||
path: relativePath,
|
||||
filename: file,
|
||||
lastUpdated: gitDates.get(relativePath) || null,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -317,7 +321,7 @@ function categorizeSkill(name, description) {
|
||||
/**
|
||||
* Generate skills metadata
|
||||
*/
|
||||
function generateSkillsData() {
|
||||
function generateSkillsData(gitDates) {
|
||||
const skills = [];
|
||||
|
||||
if (!fs.existsSync(SKILLS_DIR)) {
|
||||
@@ -344,6 +348,9 @@ function generateSkillsData() {
|
||||
// Get all files in the skill folder recursively
|
||||
const files = getSkillFiles(skillPath, relativePath);
|
||||
|
||||
// Get last updated from SKILL.md file
|
||||
const skillFilePath = `${relativePath}/SKILL.md`;
|
||||
|
||||
skills.push({
|
||||
id: folder,
|
||||
name: metadata.name,
|
||||
@@ -357,8 +364,9 @@ function generateSkillsData() {
|
||||
assetCount: metadata.assets.length,
|
||||
category: category,
|
||||
path: relativePath,
|
||||
skillFile: `${relativePath}/SKILL.md`,
|
||||
skillFile: skillFilePath,
|
||||
files: files,
|
||||
lastUpdated: gitDates.get(skillFilePath) || null,
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -407,7 +415,7 @@ function getSkillFiles(skillPath, relativePath) {
|
||||
/**
|
||||
* Generate collections metadata
|
||||
*/
|
||||
function generateCollectionsData() {
|
||||
function generateCollectionsData(gitDates) {
|
||||
const collections = [];
|
||||
|
||||
if (!fs.existsSync(COLLECTIONS_DIR)) {
|
||||
@@ -448,6 +456,7 @@ function generateCollectionsData() {
|
||||
})),
|
||||
path: relativePath,
|
||||
filename: file,
|
||||
lastUpdated: gitDates.get(relativePath) || null,
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -543,6 +552,7 @@ function generateSearchIndex(
|
||||
title: agent.title,
|
||||
description: agent.description,
|
||||
path: agent.path,
|
||||
lastUpdated: agent.lastUpdated,
|
||||
searchText: `${agent.title} ${agent.description} ${agent.tools.join(
|
||||
" "
|
||||
)}`.toLowerCase(),
|
||||
@@ -556,6 +566,7 @@ function generateSearchIndex(
|
||||
title: prompt.title,
|
||||
description: prompt.description,
|
||||
path: prompt.path,
|
||||
lastUpdated: prompt.lastUpdated,
|
||||
searchText: `${prompt.title} ${prompt.description}`.toLowerCase(),
|
||||
});
|
||||
}
|
||||
@@ -567,6 +578,7 @@ function generateSearchIndex(
|
||||
title: instruction.title,
|
||||
description: instruction.description,
|
||||
path: instruction.path,
|
||||
lastUpdated: instruction.lastUpdated,
|
||||
searchText: `${instruction.title} ${instruction.description} ${
|
||||
instruction.applyTo || ""
|
||||
}`.toLowerCase(),
|
||||
@@ -580,6 +592,7 @@ function generateSearchIndex(
|
||||
title: skill.title,
|
||||
description: skill.description,
|
||||
path: skill.skillFile,
|
||||
lastUpdated: skill.lastUpdated,
|
||||
searchText: `${skill.title} ${skill.description}`.toLowerCase(),
|
||||
});
|
||||
}
|
||||
@@ -592,6 +605,7 @@ function generateSearchIndex(
|
||||
description: collection.description,
|
||||
path: collection.path,
|
||||
tags: collection.tags,
|
||||
lastUpdated: collection.lastUpdated,
|
||||
searchText: `${collection.name} ${
|
||||
collection.description
|
||||
} ${collection.tags.join(" ")}`.toLowerCase(),
|
||||
@@ -704,32 +718,40 @@ async function main() {
|
||||
|
||||
ensureDataDir();
|
||||
|
||||
// Load git dates for all resource files (single efficient git command)
|
||||
console.log("Loading git history for last updated dates...");
|
||||
const gitDates = getGitFileDates(
|
||||
["agents/", "prompts/", "instructions/", "skills/", "collections/"],
|
||||
ROOT_FOLDER
|
||||
);
|
||||
console.log(`✓ Loaded dates for ${gitDates.size} files\n`);
|
||||
|
||||
// Generate all data
|
||||
const agentsData = generateAgentsData();
|
||||
const agentsData = generateAgentsData(gitDates);
|
||||
const agents = agentsData.items;
|
||||
console.log(
|
||||
`✓ Generated ${agents.length} agents (${agentsData.filters.models.length} models, ${agentsData.filters.tools.length} tools)`
|
||||
);
|
||||
|
||||
const promptsData = generatePromptsData();
|
||||
const promptsData = generatePromptsData(gitDates);
|
||||
const prompts = promptsData.items;
|
||||
console.log(
|
||||
`✓ Generated ${prompts.length} prompts (${promptsData.filters.tools.length} tools)`
|
||||
);
|
||||
|
||||
const instructionsData = generateInstructionsData();
|
||||
const instructionsData = generateInstructionsData(gitDates);
|
||||
const instructions = instructionsData.items;
|
||||
console.log(
|
||||
`✓ Generated ${instructions.length} instructions (${instructionsData.filters.extensions.length} extensions)`
|
||||
);
|
||||
|
||||
const skillsData = generateSkillsData();
|
||||
const skillsData = generateSkillsData(gitDates);
|
||||
const skills = skillsData.items;
|
||||
console.log(
|
||||
`✓ Generated ${skills.length} skills (${skillsData.filters.categories.length} categories)`
|
||||
);
|
||||
|
||||
const collectionsData = generateCollectionsData();
|
||||
const collectionsData = generateCollectionsData(gitDates);
|
||||
const collections = collectionsData.items;
|
||||
console.log(
|
||||
`✓ Generated ${collections.length} collections (${collectionsData.filters.tags.length} tags)`
|
||||
|
||||
103
eng/utils/git-dates.mjs
Normal file
103
eng/utils/git-dates.mjs
Normal file
@@ -0,0 +1,103 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* Utility to extract last modification dates from git history.
|
||||
* Uses a single git log command for efficiency.
|
||||
*/
|
||||
|
||||
import { execSync } from "child_process";
|
||||
import path from "path";
|
||||
|
||||
/**
|
||||
* Get the last modification date for all tracked files in specified directories.
|
||||
* Returns a Map of file path -> ISO date string.
|
||||
*
|
||||
* @param {string[]} directories - Array of directory paths to scan
|
||||
* @param {string} rootDir - Root directory for relative paths
|
||||
* @returns {Map<string, string>} Map of relative file path to ISO date string
|
||||
*/
|
||||
export function getGitFileDates(directories, rootDir) {
|
||||
const fileDates = new Map();
|
||||
|
||||
try {
|
||||
// Get git log with file names for all specified directories
|
||||
// Format: ISO date, then file names that were modified in that commit
|
||||
const gitArgs = [
|
||||
"--no-pager",
|
||||
"log",
|
||||
"--format=%aI", // Author date in ISO 8601 format
|
||||
"--name-only",
|
||||
"--diff-filter=ACMR", // Added, Copied, Modified, Renamed
|
||||
"--",
|
||||
...directories,
|
||||
];
|
||||
|
||||
const output = execSync(`git ${gitArgs.join(" ")}`, {
|
||||
encoding: "utf8",
|
||||
cwd: rootDir,
|
||||
stdio: ["pipe", "pipe", "pipe"],
|
||||
});
|
||||
|
||||
// Parse the output: alternating date lines and file name lines
|
||||
// Format is:
|
||||
// 2026-01-15T10:30:00+00:00
|
||||
//
|
||||
// file1.md
|
||||
// file2.md
|
||||
//
|
||||
// 2026-01-14T09:00:00+00:00
|
||||
// ...
|
||||
|
||||
let currentDate = null;
|
||||
const lines = output.split("\n");
|
||||
|
||||
for (const line of lines) {
|
||||
const trimmed = line.trim();
|
||||
|
||||
if (!trimmed) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Check if this is a date line (ISO 8601 format)
|
||||
if (/^\d{4}-\d{2}-\d{2}T/.test(trimmed)) {
|
||||
currentDate = trimmed;
|
||||
} else if (currentDate && trimmed) {
|
||||
// This is a file path - only set if we haven't seen this file yet
|
||||
// (first occurrence is the most recent modification)
|
||||
if (!fileDates.has(trimmed)) {
|
||||
fileDates.set(trimmed, currentDate);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// Git command failed - might not be a git repo or no history
|
||||
console.warn("Warning: Could not get git dates:", error.message);
|
||||
}
|
||||
|
||||
return fileDates;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the last modification date for a single file.
|
||||
*
|
||||
* @param {string} filePath - Path to the file (relative to git root)
|
||||
* @param {string} rootDir - Root directory
|
||||
* @returns {string|null} ISO date string or null if not found
|
||||
*/
|
||||
export function getGitFileDate(filePath, rootDir) {
|
||||
try {
|
||||
const output = execSync(
|
||||
`git --no-pager log -1 --format="%aI" -- "${filePath}"`,
|
||||
{
|
||||
encoding: "utf8",
|
||||
cwd: rootDir,
|
||||
stdio: ["pipe", "pipe", "pipe"],
|
||||
}
|
||||
);
|
||||
|
||||
const date = output.trim();
|
||||
return date || null;
|
||||
} catch (error) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
|
||||
@@ -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>`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user