{project.project_name}
-
- {project.categories.map((category) => (
-
- {category}
-
- ))}
+
+
)
}
diff --git a/src/data/screenshotManifest.json b/src/data/screenshotManifest.json
new file mode 100644
index 0000000..e800027
--- /dev/null
+++ b/src/data/screenshotManifest.json
@@ -0,0 +1,34 @@
+{
+ "1": true,
+ "2": true,
+ "3": true,
+ "4": true,
+ "5": true,
+ "6": true,
+ "8": true,
+ "9": true,
+ "10": true,
+ "11": true,
+ "12": true,
+ "13": true,
+ "15": true,
+ "16": true,
+ "17": true,
+ "18": true,
+ "19": true,
+ "20": true,
+ "21": true,
+ "22": true,
+ "24": true,
+ "25": true,
+ "26": true,
+ "27": true,
+ "28": true,
+ "30": true,
+ "31": true,
+ "33": true,
+ "34": true,
+ "35": true,
+ "36": true,
+ "37": true
+}
diff --git a/src/index.css b/src/index.css
index f4bdf7c..0b2424c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -92,9 +92,16 @@ code {
display: flex;
gap: 12px;
align-items: center;
- justify-content: center;
+ justify-content: flex-start;
flex-wrap: wrap;
margin: 24px 0;
+ /* Anchors the row's left edge under the Developers logo's left edge.
+ The logo (646px, centered in the full-width header) and this row (inside
+ the sidebar-offset tab-content) live in different coordinate spaces, so
+ matching them means re-deriving the logo's position here: half the
+ leftover viewport width outside the logo, minus the sidebar's full
+ rendered width (220px content + 24px padding + 1px border-right). */
+ margin-left: max(0px, calc((100vw - 646px) / 2 - 245px));
}
.dashboard-controls input,
@@ -107,6 +114,10 @@ code {
color: var(--text-h);
}
+.search-input {
+ width: 280px;
+}
+
.project-count {
color: var(--text);
font-size: 14px;
@@ -121,28 +132,102 @@ code {
}
.project-card {
+ perspective: 1000px;
+ aspect-ratio: 1 / 1;
+ cursor: pointer;
+}
+
+.project-card-inner {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ transition: transform 0.6s;
+ transform-style: preserve-3d;
+}
+
+.project-card-inner.flipped {
+ transform: rotateY(180deg);
+}
+
+.project-card-inner.flipped .project-card-front {
+ pointer-events: none;
+ visibility: hidden;
+}
+
+.project-card-back {
+ pointer-events: none;
+}
+
+.project-card-inner.flipped .project-card-back {
+ pointer-events: auto;
+}
+
+.project-card-front,
+.project-card-back {
+ position: absolute;
+ inset: 0;
border: 1px solid var(--border);
border-radius: 8px;
- padding: 16px;
box-shadow: var(--shadow);
- display: flex;
- flex-direction: column;
- gap: 8px;
- aspect-ratio: 1 / 1;
overflow: hidden;
- color: inherit;
- text-decoration: none;
+ backface-visibility: hidden;
transition: background-color 0.15s;
+ box-sizing: border-box;
+}
+
+.project-card-front {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 16px;
+ text-align: center;
+ background-size: cover;
+ background-position: center;
}
-.project-card:hover {
+.project-card-front:hover {
background-color: var(--accent-bg);
}
-.project-card-image {
- width: 100%;
- max-height: 120px;
- object-fit: contain;
+.project-card-front.has-screenshot::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: var(--bg);
+ opacity: 0.88;
+ z-index: 0;
+}
+
+.project-card-front.has-screenshot:hover::before {
+ background: linear-gradient(var(--accent-bg), var(--accent-bg)), var(--bg);
+}
+
+.project-card-title {
+ position: relative;
+ z-index: 1;
+ color: inherit;
+ text-decoration: none;
+ font-size: 1.4em;
+ font-weight: 600;
+ transition: color 0.15s;
+}
+
+.project-card-title:hover {
+ color: var(--accent);
+ text-decoration: none;
+}
+
+.project-card-back {
+ transform: rotateY(180deg);
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding: 16px;
+ background: var(--bg);
+}
+
+.project-card-back:hover {
+ background-color: var(--accent-bg);
}
.project-card-categories {
@@ -156,9 +241,9 @@ code {
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
- background: var(--accent-bg);
- color: var(--accent);
- border: 1px solid var(--accent-border);
+ background: color-mix(in srgb, var(--category-color, var(--accent)) 14%, var(--bg));
+ color: color-mix(in srgb, var(--category-color, var(--accent)) 70%, var(--text-h));
+ border: 1px solid color-mix(in srgb, var(--category-color, var(--accent)) 40%, var(--bg));
}
.empty-state {
@@ -167,7 +252,7 @@ code {
}
.project-card-desc {
- /* fills whatever vertical space the square card leaves after image/title/category/link */
+ /* fills whatever vertical space the back face leaves after the category tags */
flex: 1;
min-height: 0;
overflow-y: auto;
diff --git a/src/utils/categories.js b/src/utils/categories.js
index 7b05223..5cda818 100644
--- a/src/utils/categories.js
+++ b/src/utils/categories.js
@@ -8,6 +8,22 @@ export const KNOWN_CATEGORIES = [
export const UNCATEGORIZED = 'Uncategorized'
+// Fixed-order categorical hues, matching the palette already used elsewhere
+// in the dashboard's charts; gray is reserved for Uncategorized (and any
+// unrecognized label) and is never one of the known-category colors.
+const CATEGORY_COLORS = {
+ 'AI Projects, Apps, & Other Tools': '#2a78d6',
+ 'Learning & Study Tools': '#eb6834',
+ 'Community, Interaction, & Social': '#1baf7a',
+ 'Visualization & Data Analysis': '#4a3aa7',
+ 'Extensions, API Integrations, & GitHub Code': '#e87ba4',
+ [UNCATEGORIZED]: '#9a9a94',
+}
+
+export function getCategoryColor(category) {
+ return CATEGORY_COLORS[category] ?? CATEGORY_COLORS[UNCATEGORIZED]
+}
+
// Some older submissions used this wording for category 5; treat it as the same category.
const LEGACY_LABEL_MAP = {
'Extensions and API Integrations': 'Extensions, API Integrations, & GitHub Code',
diff --git a/src/utils/categories.test.js b/src/utils/categories.test.js
new file mode 100644
index 0000000..f0d7604
--- /dev/null
+++ b/src/utils/categories.test.js
@@ -0,0 +1,21 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { getCategoryColor, KNOWN_CATEGORIES, UNCATEGORIZED } from './categories.js'
+
+test('getCategoryColor returns a distinct color for every known category', () => {
+ const colors = KNOWN_CATEGORIES.map(getCategoryColor)
+ assert.equal(new Set(colors).size, KNOWN_CATEGORIES.length)
+ for (const color of colors) {
+ assert.match(color, /^#[0-9a-f]{6}$/)
+ }
+})
+
+test('getCategoryColor returns a color for Uncategorized distinct from every known category', () => {
+ const uncategorizedColor = getCategoryColor(UNCATEGORIZED)
+ assert.match(uncategorizedColor, /^#[0-9a-f]{6}$/)
+ assert.equal(KNOWN_CATEGORIES.map(getCategoryColor).includes(uncategorizedColor), false)
+})
+
+test('getCategoryColor falls back to the Uncategorized color for an unrecognized label', () => {
+ assert.equal(getCategoryColor('Not a real category'), getCategoryColor(UNCATEGORIZED))
+})
diff --git a/src/utils/screenshots.js b/src/utils/screenshots.js
new file mode 100644
index 0000000..27d4652
--- /dev/null
+++ b/src/utils/screenshots.js
@@ -0,0 +1,5 @@
+import manifest from '../data/screenshotManifest.json' with { type: 'json' }
+
+export function getScreenshotUrl(id) {
+ return manifest[id] ? `/screenshots/${id}.jpg` : null
+}
diff --git a/src/utils/screenshots.test.js b/src/utils/screenshots.test.js
new file mode 100644
index 0000000..6375d75
--- /dev/null
+++ b/src/utils/screenshots.test.js
@@ -0,0 +1,15 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { getScreenshotUrl } from './screenshots.js'
+
+test('getScreenshotUrl returns the screenshot path for an id present in the manifest', () => {
+ assert.equal(getScreenshotUrl('1'), '/screenshots/1.jpg')
+})
+
+test('getScreenshotUrl returns the screenshot path when id is passed as a number', () => {
+ assert.equal(getScreenshotUrl(1), '/screenshots/1.jpg')
+})
+
+test('getScreenshotUrl returns null for an id not in the manifest', () => {
+ assert.equal(getScreenshotUrl('does-not-exist'), null)
+})
diff --git a/src/utils/sefariaTools.js b/src/utils/sefariaTools.js
new file mode 100644
index 0000000..9b00dad
--- /dev/null
+++ b/src/utils/sefariaTools.js
@@ -0,0 +1,62 @@
+// Base paths from Sefaria's public API reference (developers.sefaria.org).
+// Raw sefaria_tools_used values are free text and often include a trailing
+// slash, a query string, or extra path segments (a specific text ref) after
+// the real endpoint — normalizeEndpoint collapses all of that down to one
+// of these base paths.
+export const KNOWN_ENDPOINTS = [
+ '/api/texts', '/api/v3/texts', '/api/texts/versions', '/api/texts/translations',
+ '/api/texts/random-by-topic', '/api/bulktext', '/api/passages',
+ '/api/index', '/api/v2/raw/index',
+ '/api/shape', '/api/links', '/api/related', '/api/ref-topic-links',
+ '/api/link-summary', '/api/search-wrapper', '/api/find-refs',
+ '/api/name', '/api/topics', '/api/v2/topics', '/api/topics-graph',
+ '/api/recommend/topics', '/api/calendars', '/api/calendars/next-read',
+ '/api/sheets', '/api/collections', '/api/counts', '/api/authors',
+ '/api/manuscripts', '/api/img-gen', '/api/ref', '/api/profile', '/api/async',
+ '/api/words/completion', '/api/words',
+]
+
+// Longest base path first, so a more specific base (e.g. /api/words/completion)
+// is tried before a shorter one it would otherwise also match (/api/words).
+const ENDPOINTS_BY_LENGTH_DESC = [...KNOWN_ENDPOINTS].sort((a, b) => b.length - a.length)
+
+export function normalizeEndpoint(raw) {
+ const withoutQuery = raw.trim().split('?')[0]
+ const withoutTrailingSlash =
+ withoutQuery.length > 1 && withoutQuery.endsWith('/')
+ ? withoutQuery.slice(0, -1)
+ : withoutQuery
+
+ const knownMatch = ENDPOINTS_BY_LENGTH_DESC.find(
+ (base) => withoutTrailingSlash === base || withoutTrailingSlash.startsWith(`${base}/`),
+ )
+
+ return knownMatch ?? withoutTrailingSlash
+}
+
+const TOP_ENDPOINT_LIMIT = 6
+
+export function getToolUsageCounts(projects) {
+ const counts = new Map()
+
+ for (const project of projects) {
+ const normalized = new Set(
+ (project.sefaria_tools_used ?? []).filter((tool) => typeof tool === 'string').map(normalizeEndpoint),
+ )
+ for (const endpoint of normalized) {
+ counts.set(endpoint, (counts.get(endpoint) ?? 0) + 1)
+ }
+ }
+
+ const sorted = [...counts.entries()]
+ .map(([endpoint, count]) => ({ endpoint, count }))
+ .sort((a, b) => b.count - a.count)
+
+ const top = sorted.slice(0, TOP_ENDPOINT_LIMIT)
+ const rest = sorted.slice(TOP_ENDPOINT_LIMIT)
+
+ if (rest.length === 0) return top
+
+ const otherCount = rest.reduce((sum, entry) => sum + entry.count, 0)
+ return [...top, { endpoint: 'Other', count: otherCount }]
+}
diff --git a/src/utils/sefariaTools.test.js b/src/utils/sefariaTools.test.js
new file mode 100644
index 0000000..a8151ad
--- /dev/null
+++ b/src/utils/sefariaTools.test.js
@@ -0,0 +1,92 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { normalizeEndpoint, getToolUsageCounts } from './sefariaTools.js'
+
+test('normalizeEndpoint strips a trailing slash', () => {
+ assert.equal(normalizeEndpoint('/api/texts/'), '/api/texts')
+})
+
+test('normalizeEndpoint strips a query string', () => {
+ assert.equal(normalizeEndpoint('/api/index?foo=bar'), '/api/index')
+})
+
+test('normalizeEndpoint collapses extra path segments onto the longest known base', () => {
+ assert.equal(
+ normalizeEndpoint('/api/v3/texts/Esther%201.1?version=french'),
+ '/api/v3/texts',
+ )
+})
+
+test('normalizeEndpoint prefers the longest matching known base', () => {
+ assert.equal(normalizeEndpoint('/api/words/completion/foo/bar'), '/api/words/completion')
+ assert.equal(normalizeEndpoint('/api/words/foo'), '/api/words')
+})
+
+test('normalizeEndpoint keeps an unrecognized endpoint as its own bucket', () => {
+ assert.equal(normalizeEndpoint('/api/totally-unknown-thing'), '/api/totally-unknown-thing')
+})
+
+test('normalizeEndpoint trims whitespace', () => {
+ assert.equal(normalizeEndpoint(' /api/index '), '/api/index')
+})
+
+test('getToolUsageCounts returns [] when no project reports any tools', () => {
+ const projects = [{ sefaria_tools_used: [] }, {}, { sefaria_tools_used: undefined }]
+ assert.deepEqual(getToolUsageCounts(projects), [])
+})
+
+test('getToolUsageCounts counts each project once per normalized endpoint even with variant duplicates', () => {
+ const projects = [
+ { sefaria_tools_used: ['/api/texts', '/api/texts/'] }, // same project, same endpoint twice
+ { sefaria_tools_used: ['/api/texts'] },
+ ]
+ assert.deepEqual(getToolUsageCounts(projects), [{ endpoint: '/api/texts', count: 2 }])
+})
+
+test('getToolUsageCounts sorts descending by count', () => {
+ const projects = [
+ { sefaria_tools_used: ['/api/index'] },
+ { sefaria_tools_used: ['/api/calendars'] },
+ { sefaria_tools_used: ['/api/calendars'] },
+ ]
+ assert.deepEqual(getToolUsageCounts(projects), [
+ { endpoint: '/api/calendars', count: 2 },
+ { endpoint: '/api/index', count: 1 },
+ ])
+})
+
+test('getToolUsageCounts skips non-string entries instead of throwing', () => {
+ const projects = [
+ { sefaria_tools_used: [null, 42, '/api/index'] },
+ { sefaria_tools_used: ['/api/index'] },
+ ]
+ assert.doesNotThrow(() => getToolUsageCounts(projects))
+ assert.deepEqual(getToolUsageCounts(projects), [{ endpoint: '/api/index', count: 2 }])
+})
+
+test('getToolUsageCounts does not add an Other bucket at exactly 6 distinct endpoints', () => {
+ const endpoints = ['/api/index', '/api/texts', '/api/calendars', '/api/words', '/api/name', '/api/related']
+ const projects = endpoints.map((endpoint) => ({ sefaria_tools_used: [endpoint] }))
+ const result = getToolUsageCounts(projects)
+ assert.equal(result.length, 6)
+ assert.equal(result.some((r) => r.endpoint === 'Other'), false)
+})
+
+test('getToolUsageCounts buckets past 6 distinct endpoints into Other', () => {
+ // 6 endpoints used twice each (ranked 1-6), 3 endpoints used once each (fold into Other)
+ const projects = [
+ ...Array(2).fill({ sefaria_tools_used: ['/api/index'] }),
+ ...Array(2).fill({ sefaria_tools_used: ['/api/texts'] }),
+ ...Array(2).fill({ sefaria_tools_used: ['/api/calendars'] }),
+ ...Array(2).fill({ sefaria_tools_used: ['/api/words'] }),
+ ...Array(2).fill({ sefaria_tools_used: ['/api/name'] }),
+ ...Array(2).fill({ sefaria_tools_used: ['/api/related'] }),
+ { sefaria_tools_used: ['/api/shape'] },
+ { sefaria_tools_used: ['/api/links'] },
+ { sefaria_tools_used: ['/api/topics'] },
+ ]
+ const result = getToolUsageCounts(projects)
+ assert.equal(result.length, 7)
+ assert.deepEqual(result[6], { endpoint: 'Other', count: 3 })
+ assert.equal(result.slice(0, 6).every((r) => r.count === 2), true)
+})
diff --git a/src/utils/submissionsTrend.js b/src/utils/submissionsTrend.js
index 472fc35..f219812 100644
--- a/src/utils/submissionsTrend.js
+++ b/src/utils/submissionsTrend.js
@@ -1,5 +1,7 @@
import { EXPERIENCE_LEVELS, getExperienceLevel } from './experience.js'
+export const VIBE_CODED_SERIES = ['Not vibe-coded', 'Vibe-coded']
+
const MONTH_NAMES = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December',
@@ -111,3 +113,31 @@ export function getSubmissionsTrendByExperience(projects, referenceDate = new Da
...counts.get(monthKey(year, monthIndex)),
}))
}
+
+export function getSubmissionsTrendByVibeCoded(projects, referenceDate = new Date()) {
+ const months = last12Months(referenceDate)
+
+ const counts = new Map(
+ months.map(({ year, monthIndex }) => [
+ monthKey(year, monthIndex),
+ Object.fromEntries(VIBE_CODED_SERIES.map((series) => [series, 0])),
+ ]),
+ )
+
+ for (const project of projects) {
+ const [rawDate] = project.tags ?? []
+ const parsed = parseTagMonth(rawDate)
+ if (!parsed) continue
+
+ const key = monthKey(parsed.year, parsed.monthIndex)
+ if (!counts.has(key)) continue
+
+ const series = project.vibe_coded ? 'Vibe-coded' : 'Not vibe-coded'
+ counts.get(key)[series] += 1
+ }
+
+ return months.map(({ year, monthIndex }) => ({
+ month: `${MONTH_NAMES[monthIndex].slice(0, 3)} ${year}`,
+ ...counts.get(monthKey(year, monthIndex)),
+ }))
+}
diff --git a/src/utils/submissionsTrend.test.js b/src/utils/submissionsTrend.test.js
index cd92c55..71a1da5 100644
--- a/src/utils/submissionsTrend.test.js
+++ b/src/utils/submissionsTrend.test.js
@@ -1,6 +1,6 @@
import { test } from 'node:test'
import assert from 'node:assert/strict'
-import { getSubmissionsTrendByExperience } from './submissionsTrend.js'
+import { getSubmissionsTrendByExperience, getSubmissionsTrendByVibeCoded } from './submissionsTrend.js'
const referenceDate = new Date(2026, 6, 15) // July 2026
@@ -63,3 +63,49 @@ test('getSubmissionsTrendByExperience ignores unspecified-experience months when
{ month: 'Jul 2026', 'No Experience': 1, Beginner: 0, Intermediate: 0, Advanced: 0 },
])
})
+
+test('getSubmissionsTrendByVibeCoded returns 12 zero-filled months when no project has a parseable date', () => {
+ const referenceDate = new Date(2026, 6, 15) // July 2026
+ const projects = [{ tags: ['Date unspecified'] }, {}]
+ const result = getSubmissionsTrendByVibeCoded(projects, referenceDate)
+
+ assert.equal(result.length, 12)
+ assert.equal(result[11].month, 'Jul 2026')
+ for (const entry of result) {
+ assert.equal(entry['Vibe-coded'], 0)
+ assert.equal(entry['Not vibe-coded'], 0)
+ }
+})
+
+test('getSubmissionsTrendByVibeCoded buckets each project into the correct series for its month', () => {
+ const referenceDate = new Date(2026, 6, 15) // July 2026
+ const projects = [
+ { tags: ['July 2026'], vibe_coded: true },
+ { tags: ['July 2026'], vibe_coded: true },
+ { tags: ['July 2026'], vibe_coded: false },
+ { tags: ['June 2026'], vibe_coded: false },
+ ]
+ const result = getSubmissionsTrendByVibeCoded(projects, referenceDate)
+
+ const july = result.find((entry) => entry.month === 'Jul 2026')
+ const june = result.find((entry) => entry.month === 'Jun 2026')
+
+ assert.deepEqual(july, { month: 'Jul 2026', 'Vibe-coded': 2, 'Not vibe-coded': 1 })
+ assert.deepEqual(june, { month: 'Jun 2026', 'Vibe-coded': 0, 'Not vibe-coded': 1 })
+})
+
+test('getSubmissionsTrendByVibeCoded ignores projects with unparseable or missing dates', () => {
+ const referenceDate = new Date(2026, 6, 15) // July 2026
+ const projects = [
+ { tags: ['July 2026'], vibe_coded: true },
+ { tags: ['not a date'], vibe_coded: true },
+ { vibe_coded: true },
+ ]
+ const result = getSubmissionsTrendByVibeCoded(projects, referenceDate)
+
+ const july = result.find((entry) => entry.month === 'Jul 2026')
+ assert.deepEqual(july, { month: 'Jul 2026', 'Vibe-coded': 1, 'Not vibe-coded': 0 })
+
+ const total = result.reduce((sum, entry) => sum + entry['Vibe-coded'] + entry['Not vibe-coded'], 0)
+ assert.equal(total, 1)
+})
diff --git a/src/utils/techUsed.js b/src/utils/techUsed.js
new file mode 100644
index 0000000..4b4333e
--- /dev/null
+++ b/src/utils/techUsed.js
@@ -0,0 +1,67 @@
+// tech_used_raw is free-text prose (not tags), so matching is done via
+// case-insensitive substring search rather than exact lookup. "Claude Code"
+// is checked and stripped first so a mention of the CLI tool doesn't also
+// get counted toward the generic Claude/Anthropic API bucket.
+const CLAUDE_CODE_PATTERN = 'claude code'
+
+export const KNOWN_TECHNOLOGIES = [
+ { label: 'Claude/Anthropic API', patterns: ['claude', 'anthropic'] },
+ { label: 'React', patterns: ['react'] },
+ { label: 'Next.js', patterns: ['next.js', 'nextjs'] },
+ { label: 'Vercel', patterns: ['vercel'] },
+ { label: 'Python', patterns: ['python'] },
+ { label: 'MCP', patterns: ['mcp'] },
+ { label: 'Supabase', patterns: ['supabase'] },
+ { label: 'Deepgram', patterns: ['deepgram'] },
+ { label: '.NET', patterns: ['.net'] },
+ { label: 'C#', patterns: ['c#'] },
+ { label: 'Avalonia', patterns: ['avalonia'] },
+ { label: 'LiteDB', patterns: ['litedb'] },
+ { label: 'GitHub', patterns: ['github'] },
+ { label: 'ChatGPT', patterns: ['chatgpt'] },
+ { label: 'Gemini', patterns: ['gemini'] },
+ { label: 'Base44', patterns: ['base44'] },
+ { label: 'Discord', patterns: ['discord'] },
+ { label: 'Spring Boot', patterns: ['springboot', 'spring boot'] },
+ { label: 'GCP', patterns: ['gcp'] },
+ { label: 'Lovable', patterns: ['lovable'] },
+ { label: 'Llama Index', patterns: ['llama index', 'llamaindex'] },
+ { label: 'Gradio', patterns: ['gradio'] },
+ { label: 'OpenAI', patterns: ['openai'] },
+ { label: 'Google Colab', patterns: ['colab'] },
+ { label: 'Flask', patterns: ['flask'] },
+ { label: 'PostgreSQL', patterns: ['postgres'] },
+ { label: 'Drizzle ORM', patterns: ['drizzle'] },
+ { label: 'Tiptap', patterns: ['tiptap'] },
+ { label: 'Google Sheets API', patterns: ['google sheets'] },
+ { label: 'Umami', patterns: ['umami'] },
+ { label: 'Hebcal', patterns: ['hebcal'] },
+]
+
+const TOP_TECH_LIMIT = 8
+
+export function getTechCounts(projects) {
+ const counts = new Map()
+
+ for (const project of projects) {
+ const raw = (project.tech_used_raw ?? '').toLowerCase()
+ if (!raw.trim()) continue
+
+ let working = raw
+ if (working.includes(CLAUDE_CODE_PATTERN)) {
+ counts.set('Claude Code', (counts.get('Claude Code') ?? 0) + 1)
+ working = working.replaceAll(CLAUDE_CODE_PATTERN, '')
+ }
+
+ for (const { label, patterns } of KNOWN_TECHNOLOGIES) {
+ if (patterns.some((pattern) => working.includes(pattern))) {
+ counts.set(label, (counts.get(label) ?? 0) + 1)
+ }
+ }
+ }
+
+ return [...counts.entries()]
+ .map(([label, count]) => ({ label, count }))
+ .sort((a, b) => b.count - a.count)
+ .slice(0, TOP_TECH_LIMIT)
+}
diff --git a/src/utils/techUsed.test.js b/src/utils/techUsed.test.js
new file mode 100644
index 0000000..703cf30
--- /dev/null
+++ b/src/utils/techUsed.test.js
@@ -0,0 +1,64 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { getTechCounts } from './techUsed.js'
+
+test('getTechCounts counts a known technology mentioned by one project', () => {
+ const projects = [{ tech_used_raw: 'Next.js, Supabase, Vercel' }]
+ const result = getTechCounts(projects)
+ assert.deepEqual(result, [
+ { label: 'Next.js', count: 1 },
+ { label: 'Vercel', count: 1 },
+ { label: 'Supabase', count: 1 },
+ ])
+})
+
+test('getTechCounts is case-insensitive', () => {
+ const projects = [{ tech_used_raw: 'REACT frontend, python3' }]
+ const result = getTechCounts(projects)
+ assert.deepEqual(result, [
+ { label: 'React', count: 1 },
+ { label: 'Python', count: 1 },
+ ])
+})
+
+test('getTechCounts ignores projects with empty or missing tech_used_raw', () => {
+ const projects = [{ tech_used_raw: '' }, {}, { tech_used_raw: 'React' }]
+ const result = getTechCounts(projects)
+ assert.deepEqual(result, [{ label: 'React', count: 1 }])
+})
+
+test('getTechCounts treats "Claude Code" and generic Claude/Anthropic mentions as separate, exclusive buckets', () => {
+ const projects = [
+ { tech_used_raw: 'Claude code, python3' },
+ { tech_used_raw: 'Claude API (Anthropic)' },
+ ]
+ const result = getTechCounts(projects)
+ assert.deepEqual(result, [
+ { label: 'Claude Code', count: 1 },
+ { label: 'Python', count: 1 },
+ { label: 'Claude/Anthropic API', count: 1 },
+ ])
+})
+
+test('getTechCounts sorts descending by count', () => {
+ const projects = [
+ { tech_used_raw: 'React' },
+ { tech_used_raw: 'React, Vercel' },
+ { tech_used_raw: 'React' },
+ ]
+ const result = getTechCounts(projects)
+ assert.deepEqual(result, [
+ { label: 'React', count: 3 },
+ { label: 'Vercel', count: 1 },
+ ])
+})
+
+test('getTechCounts returns at most the top 8 technologies', () => {
+ const distinctSingleMentionTechs = [
+ 'Supabase', 'Deepgram', '.NET', 'C#', 'Avalonia', 'LiteDB', 'GitHub',
+ 'ChatGPT', 'Gemini', 'Base44', 'Discord', 'GCP', 'Lovable',
+ ]
+ const projects = distinctSingleMentionTechs.map((tech) => ({ tech_used_raw: tech }))
+ const result = getTechCounts(projects)
+ assert.equal(result.length, 8)
+})
+
+
-
+
+ {project.categories.map((category) => (
+
+ {category}
+
+ ))}
+
+ {project.project_desc}
+{project.project_desc}
- +