add ember-table (#1042)

* add ember-table

* code snippet fixes for ember

* order library pills better

Author: KevinVandy

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/images/ember-logo.svg

@@ -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/frameworks.tsx

@@ -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/libraries.ts

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

src/libraries/types.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-utils.ts

@@ -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.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/routes/libraries_.$framework.tsx

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