add ember-table

src/components/FileExplorer.tsx

@@ -7,6 +7,7 @@ import jsonIconUrl from '~/images/file-icons/json.svg?url'
 import svelteIconUrl from '~/images/file-icons/svelte.svg?url'
 import vueIconUrl from '~/images/file-icons/vue.svg?url'
 import markoIconUrl from '~/images/file-icons/marko.svg?url'
+import emberIconUrl from '~/images/ember-logo.svg?url'
 import textIconUrl from '~/images/file-icons/txt.svg?url'
 import type { GitHubFileNode } from '~/utils/documents.server'
 import { twMerge } from 'tailwind-merge'
@@ -33,6 +34,9 @@ const getFileIconPath = (filename: string) => {
       return vueIconUrl
     case 'marko':
       return markoIconUrl
+    case 'gjs':
+    case 'gts':
+      return emberIconUrl
     default:
       return textIconUrl
   }

src/components/markdown/codeBlock.shared.tsx

@@ -83,6 +83,8 @@ export function getCodeBlockLanguageFromFilePath(filePath: string) {
 
   if (['cts', 'mts'].includes(ext)) return 'ts'
   if (['cjs', 'mjs'].includes(ext)) return 'js'
+  if (ext === 'gts') return 'ts'
+  if (ext === 'gjs') return 'js'
   if (['prettierrc', 'babelrc', 'webmanifest'].includes(ext)) return 'json'
   if (['env', 'example'].includes(ext)) return 'sh'
 

src/libraries/frameworks.tsx

@@ -1,5 +1,6 @@
 import alpineLogo from '../images/alpine-logo.svg'
 import angularLogo from '../images/angular-logo.svg'
+import emberLogo from '../images/ember-logo.svg'
 import jsLogo from '../images/js-logo.svg'
 import litLogo from '../images/lit-logo.svg'
 import markoLogo from '../images/marko-logo.svg'
@@ -40,6 +41,13 @@ export const frameworkOptions = [
     color: 'bg-red-500',
     fontColor: 'text-fuchsia-500',
   },
+  {
+    label: 'Ember',
+    value: 'ember',
+    logo: emberLogo,
+    color: 'bg-orange-600',
+    fontColor: 'text-orange-600',
+  },
   {
     label: 'Solid',
     value: 'solid',

src/libraries/libraries.ts

@@ -314,7 +314,7 @@ export const table: LibrarySlim = {
   to: '/table',
   tagline: 'Headless UI for building powerful tables & datagrids',
   description:
-    'Supercharge your tables or build a datagrid from scratch for TS/JS, React, Vue, Solid, Svelte, Qwik, Angular, and Lit while retaining 100% control over markup and styles.',
+    'Supercharge your tables or build a datagrid from scratch in any framework while retaining 100% control over markup and styles.',
   bgStyle: 'bg-blue-500',
   borderStyle: 'border-blue-500/50',
   textStyle: 'text-blue-500',
@@ -326,6 +326,7 @@ export const table: LibrarySlim = {
   repo: 'tanstack/table',
   frameworks: [
     'angular',
+    'ember',
     'react',
     'preact',
     'solid',

src/libraries/types.ts

@@ -6,6 +6,7 @@ export type { LibraryId } from './ids'
 export type Framework =
   | 'angular'
   | 'alpine'
+  | 'ember'
   | 'lit'
   | 'marko'
   | 'preact'

src/routes/-libraries-utils.ts

@@ -41,3 +41,17 @@ export function getFrameworkLibraryCounts(allLibraries: Array<LibrarySlim>) {
 
   return counts
 }
+
+export function orderFrameworksForBrowse<
+  TFramework extends { value: Framework },
+>(
+  frameworks: ReadonlyArray<TFramework>,
+  counts: Partial<Record<Framework, number>>,
+) {
+  return [...frameworks].sort((a, b) => {
+    if (a.value === 'vanilla') return 1
+    if (b.value === 'vanilla') return -1
+
+    return (counts[b.value] ?? 0) - (counts[a.value] ?? 0)
+  })
+}

src/routes/libraries.tsx

@@ -7,6 +7,7 @@ import LibraryCard from '~/components/LibraryCard'
 import {
   getFrameworkLibraryCounts,
   getVisibleLibraries,
+  orderFrameworksForBrowse,
   orderLibrariesForBrowse,
 } from './-libraries-utils'
 
@@ -30,8 +31,11 @@ function LibrariesPage() {
   const allLibraries = getVisibleLibraries()
   const ordered = orderLibrariesForBrowse(allLibraries)
   const frameworkCounts = getFrameworkLibraryCounts(allLibraries)
-  const frameworksWithLibraries = frameworkOptions.filter(
-    (framework) => (frameworkCounts[framework.value] ?? 0) > 0,
+  const frameworksWithLibraries = orderFrameworksForBrowse(
+    frameworkOptions.filter(
+      (framework) => (frameworkCounts[framework.value] ?? 0) > 0,
+    ),
+    frameworkCounts,
   )
   const deprecatedLibraries = [reactChartsProject]
 

src/routes/libraries_.$framework.tsx

@@ -6,6 +6,7 @@ import LibraryCard from '~/components/LibraryCard'
 import {
   getFrameworkLibraryCounts,
   getVisibleLibraries,
+  orderFrameworksForBrowse,
   orderLibrariesForBrowse,
 } from './-libraries-utils'
 
@@ -45,8 +46,11 @@ function LibrariesFrameworkPage() {
 
   const allLibraries = getVisibleLibraries()
   const frameworkCounts = getFrameworkLibraryCounts(allLibraries)
-  const frameworksWithLibraries = frameworkOptions.filter(
-    (option) => (frameworkCounts[option.value] ?? 0) > 0,
+  const frameworksWithLibraries = orderFrameworksForBrowse(
+    frameworkOptions.filter(
+      (option) => (frameworkCounts[option.value] ?? 0) > 0,
+    ),
+    frameworkCounts,
   )
   const filteredLibraries = orderLibrariesForBrowse(
     allLibraries.filter((library) =>

src/utils/llms.ts

@@ -41,6 +41,7 @@ const librarySections = [
 const frameworkLabels: Record<Framework, string> = {
   angular: 'Angular',
   alpine: 'Alpine',
+  ember: 'Ember',
   lit: 'Lit',
   marko: 'Marko',
   preact: 'Preact',

src/utils/npm-packages.ts

@@ -26,10 +26,11 @@ export const frameworkMeta: Record<Framework, { name: string; color: string }> =
     solid: { name: 'Solid', color: '#2C4F7C' },
     vue: { name: 'Vue', color: '#42B883' },
     svelte: { name: 'Svelte', color: '#FF3E00' },
-    marko: { name: 'Marko', color: '#44bfef' },
     angular: { name: 'Angular', color: '#DD0031' },
-    alpine: { name: 'Alpine', color: '#77C1D2' },
     lit: { name: 'Lit', color: '#325CFF' },
+    alpine: { name: 'Alpine', color: '#77C1D2' },
+    marko: { name: 'Marko', color: '#44bfef' },
+    ember: { name: 'Ember', color: '#E04E39' },
     qwik: { name: 'Qwik', color: '#18B6F6' },
     vanilla: { name: 'Vanilla', color: '#F7DF1E' },
   }

tests/libraries-utils.test.ts

@@ -0,0 +1,33 @@
+import assert from 'node:assert/strict'
+import { orderFrameworksForBrowse } from '../src/routes/-libraries-utils'
+import type { Framework } from '../src/libraries/types'
+
+const frameworks: Array<{ value: Framework }> = [
+  { value: 'react' },
+  { value: 'vue' },
+  { value: 'solid' },
+  { value: 'vanilla' },
+  { value: 'ember' },
+]
+
+const ordered = orderFrameworksForBrowse(frameworks, {
+  react: 8,
+  vue: 5,
+  solid: 5,
+  vanilla: 10,
+  ember: 1,
+})
+
+assert.deepEqual(
+  ordered.map((framework) => framework.value),
+  ['react', 'vue', 'solid', 'ember', 'vanilla'],
+  'frameworks sort by library count, preserve ties, and keep Vanilla last',
+)
+
+assert.deepEqual(
+  frameworks.map((framework) => framework.value),
+  ['react', 'vue', 'solid', 'vanilla', 'ember'],
+  'framework sorting does not mutate the shared framework options',
+)
+
+console.log('libraries utils tests passed')