Add Marko framework support (marko-virtual) to the site (#1019)

feat: marko-virtual integration

Co-authored-by: dasathyakuma <dasathyakuma@ebay.com>

Author: defunkt-dev

src/components/FileExplorer.tsx

@@ -6,6 +6,7 @@ import htmlIconUrl from '~/images/file-icons/html.svg?url'
 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 textIconUrl from '~/images/file-icons/txt.svg?url'
 import type { GitHubFileNode } from '~/utils/documents.server'
 import { twMerge } from 'tailwind-merge'
@@ -30,6 +31,8 @@ const getFileIconPath = (filename: string) => {
       return svelteIconUrl
     case 'vue':
       return vueIconUrl
+    case 'marko':
+      return markoIconUrl
     default:
       return textIconUrl
   }

src/components/markdown/codeBlock.shared.tsx

@@ -86,6 +86,10 @@ export function getCodeBlockLanguageFromFilePath(filePath: string) {
   if (['prettierrc', 'babelrc', 'webmanifest'].includes(ext)) return 'json'
   if (['env', 'example'].includes(ext)) return 'sh'
 
+  // Marko is HTML-based; @tanstack/highlight has no Marko grammar, so fall
+  // back to html for reasonable tag/attribute/string coloring.
+  if (ext === 'marko') return 'html'
+
   if (
     [
       'gitignore',

src/images/file-icons/marko.svg

@@ -2,6 +2,7 @@ import alpineLogo from '../images/alpine-logo.svg'
 import angularLogo from '../images/angular-logo.svg'
 import jsLogo from '../images/js-logo.svg'
 import litLogo from '../images/lit-logo.svg'
+import markoLogo from '../images/marko-logo.svg'
 import qwikLogo from '../images/qwik-logo.svg'
 import preactLogo from '../images/preact-logo.svg'
 import reactLogo from '../images/react-logo.svg'
@@ -53,6 +54,13 @@ export const frameworkOptions = [
     color: 'bg-orange-600',
     fontColor: 'text-orange-600',
   },
+  {
+    label: 'Marko',
+    value: 'marko',
+    logo: markoLogo,
+    color: 'bg-cyan-500',
+    fontColor: 'text-cyan-500',
+  },
   {
     label: 'Qwik',
     value: 'qwik',

src/images/marko-logo.svg

@@ -428,7 +428,7 @@ export const virtual: LibrarySlim = {
   to: '/virtual',
   tagline: 'Headless UI for Virtualizing Large Element Lists',
   description:
-    'Virtualize only the visible content for massive scrollable DOM nodes at 60FPS in TS/JS, React, Vue, Solid, Svelte, Lit & Angular while retaining 100% control over markup and styles.',
+    'Virtualize only the visible content for massive scrollable DOM nodes at 60FPS in TS/JS, React, Vue, Solid, Svelte, Lit, Angular & Marko while retaining 100% control over markup and styles.',
   bgStyle: 'bg-purple-500',
   borderStyle: 'border-purple-500/50',
   textStyle: 'text-purple-500',
@@ -438,7 +438,7 @@ export const virtual: LibrarySlim = {
   bgRadial: 'from-purple-500 via-violet-600/50 to-transparent',
   badge: undefined,
   repo: 'tanstack/virtual',
-  frameworks: ['react', 'solid', 'vue', 'svelte', 'lit', 'angular'],
+  frameworks: ['react', 'solid', 'vue', 'svelte', 'lit', 'angular', 'marko'],
   corePackageName: '@tanstack/virtual-core',
   npmPackageNames: ['@tanstack/virtual-core', 'react-virtual'],
   latestVersion: 'v3',

src/libraries/frameworks.tsx

@@ -7,6 +7,7 @@ export type Framework =
   | 'angular'
   | 'alpine'
   | 'lit'
+  | 'marko'
   | 'preact'
   | 'qwik'
   | 'react'

src/libraries/libraries.ts

@@ -7,7 +7,7 @@ const textStyles = 'text-violet-700 dark:text-violet-400'
 
 export const virtualProject = {
   ...virtual,
-  description: `Virtualize only the visible content for massive scrollable DOM nodes at 60FPS in TS/JS, React, Vue, Solid, Svelte, Lit & Angular while retaining 100% control over markup and styles.`,
+  description: `Virtualize only the visible content for massive scrollable DOM nodes at 60FPS in TS/JS, React, Vue, Solid, Svelte, Lit, Angular & Marko while retaining 100% control over markup and styles.`,
   latestBranch: 'main',
   bgRadial: 'from-purple-500 via-violet-600/50 to-transparent',
   textColor: 'text-purple-600',

src/libraries/types.ts

@@ -42,6 +42,7 @@ const frameworkLabels: Record<Framework, string> = {
   angular: 'Angular',
   alpine: 'Alpine',
   lit: 'Lit',
+  marko: 'Marko',
   preact: 'Preact',
   qwik: 'Qwik',
   react: 'React',

src/libraries/virtual.tsx

@@ -26,6 +26,7 @@ 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' },