feat: open up relevant file on sandbox load on all example pages

app/routes/$libraryId.$version.docs.framework.$framework.examples.$.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { FaExternalLinkAlt } from 'react-icons/fa'
 import { DocTitle } from '~/components/DocTitle'
 import { getBranch, getLibrary } from '~/libraries'
+import { getInitialSandboxFileName } from '~/utils/sandbox'
 import { seo } from '~/utils/seo'
 import { capitalize, slugToTitle } from '~/utils/utils'
 
@@ -38,19 +39,21 @@ export default function Example() {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
+  const sandboxFirstFileName = getInitialSandboxFileName(framework, libraryId)
+
   const githubUrl = `https://github.com/${library.repo}/tree/${branch}/examples/${examplePath}`
   // preset=node can be removed once Stackblitz runs Angular as webcontainer by default
   // See https://github.com/stackblitz/core/issues/2957
   const stackBlitzUrl = `https://stackblitz.com/github/${
     library.repo
   }/tree/${branch}/examples/${examplePath}?embed=1&theme=${
     isDark ? 'dark' : 'light'
-  }&preset=node`
+  }&preset=node&file=${sandboxFirstFileName}`
   const codesandboxUrl = `https://codesandbox.io/s/github/${
     library.repo
   }/tree/${branch}/examples/${examplePath}?embed=1&theme=${
     isDark ? 'dark' : 'light'
-  }`
+  }&file=${sandboxFirstFileName}`
 
   const hideCodesandbox = library.hideCodesandboxUrl
   const hideStackblitz = library.hideStackblitzUrl

app/utils/sandbox.ts

@@ -1,14 +1,28 @@
 import { type Framework } from '~/libraries'
 
-export const getInitialSandboxFileName = (framework: Framework) =>
-  framework === 'svelte'
-    ? 'src/App.svelte'
-    : framework === 'vue'
-    ? 'src/App.vue'
-    : framework === 'solid'
-    ? 'src/App.tsx'
-    : framework === 'angular'
-    ? 'src/app/app.component.ts'
-    : framework === 'lit'
-    ? 'src/main.ts'
-    : 'src/main.tsx'
+export const getInitialSandboxFileName = (
+  framework: Framework,
+  libraryId?: string
+) => {
+  const dir = 'src'
+
+  const file =
+    framework === 'angular'
+      ? 'app.component'
+      : ['svelte', 'vue'].includes(framework)
+      ? 'App'
+      : ['form', 'query'].includes(libraryId!)
+      ? 'index'
+      : 'main'
+
+  const ext =
+    framework === 'svelte'
+      ? 'svelte'
+      : framework === 'vue'
+      ? 'vue'
+      : ['angular', 'lit'].includes(framework)
+      ? 'ts'
+      : 'tsx'
+
+  return `${dir}/${file}.${ext}` as const
+}