feat: tanstack lit table links

app/components/DocsLayout.tsx

@@ -12,10 +12,10 @@
   useMatches,
   useNavigate,
   useParams,
   useRouterState,
 } from '@tanstack/react-router'
 import type { AnyOrama, SearchParamsFullText, AnyDocument } from '@orama/orama'
 import { SearchBox, SearchButton } from '@orama/searchbox'
 import { Carbon } from '~/components/Carbon'
 import { Select } from '~/components/Select'
 import { useLocalStorage } from '~/utils/useLocalStorage'
@@ -25,7 +25,7 @@
 import type { ConfigSchema, MenuItem } from '~/utils/config'
 import { create } from 'zustand'
 import { searchBoxParams, searchButtonParams } from '~/components/Orama'
 import { Framework, getFrameworkOptions, getLibrary } from '~/libraries'
 import { DocsCalloutQueryGG } from '~/components/DocsCalloutQueryGG'
 import { DocsCalloutBytes } from '~/components/DocsCalloutBytes'
 import { ClientOnlySearchButton } from './ClientOnlySearchButton'
@@ -407,8 +407,10 @@
                                   ? 'text-fuchsia-500'
                                   : child.badge === 'qwik'
                                   ? 'text-indigo-500'
+                                  : child.badge === 'lit'
+                                  ? 'text-emerald-500'
                                   : child.badge === 'vanilla'
-                                  ? 'text-gray-300'
+                                  ? 'text-yellow-500'
                                   : 'text-gray-500'
                               }`}
                             >

app/libraries/table.ts

@@ -7,7 +7,7 @@ export const tableProject: Library = {
   cardStyles: `shadow-xl shadow-blue-700/20 dark:shadow-lg dark:shadow-blue-500/30 text-blue-500 border-2 border-transparent hover:border-current`,
   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, and Angular while retaining 100% control over markup and styles.`,
+  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.`,
   ogImage: 'https://github.com/tanstack/table/raw/main/media/repo-header.png',
   bgStyle: 'bg-blue-500',
   textStyle: 'text-blue-500',
@@ -18,7 +18,16 @@ export const tableProject: Library = {
   colorFrom: 'from-teal-500',
   colorTo: 'to-blue-600',
   textColor: 'text-blue-600',
-  frameworks: ['angular', 'qwik', 'react', 'solid', 'svelte', 'vue', 'vanilla'],
+  frameworks: [
+    'angular',
+    'lit',
+    'qwik',
+    'react',
+    'solid',
+    'svelte',
+    'vue',
+    'vanilla',
+  ],
   scarfId: 'dc8b39e1-3fe9-4f3a-8e56-d4e2cf420a9e',
   defaultDocs: 'framework/react/overview',
   handleRedirects: (href) => {

app/routes/_libraries.table.$version.index.tsx

@@ -421,6 +421,7 @@ export default function TableVersionIndex() {
             {(
               [
                 { label: 'Angular', value: 'angular' },
+                { label: 'Lit', value: 'lit' },
                 { label: 'Qwik', value: 'qwik' },
                 { label: 'React', value: 'react' },
                 { label: 'Solid', value: 'solid' },

app/utils/sandbox.ts

@@ -9,4 +9,6 @@ export const getInitialSandboxFileName = (framework: Framework) =>
     ? 'src/App.tsx'
     : framework === 'angular'
     ? 'src/app/app.component.ts'
+    : framework === 'lit'
+    ? 'src/main.ts'
     : 'src/main.tsx'