From 3273a6d92c81c7e8337b825ce9765b1534f6fa3b Mon Sep 17 00:00:00 2001 From: Leonardo Montini Date: Sat, 9 Aug 2025 14:32:24 +0200 Subject: [PATCH 1/2] fix: move head order to restore types --- ...n.docs.framework.$framework.examples.$.tsx | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx b/src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx index 10ccb990c..ddc3fe1ef 100644 --- a/src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx +++ b/src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx @@ -45,20 +45,6 @@ const repoDirApiContentsQueryOptions = ( }) export const Route = createFileRoute({ - head: ({ params }) => { - const library = getLibrary(params.libraryId) - - return { - meta: seo({ - title: `${capitalize(params.framework)} ${library.name} ${slugToTitle( - params._splat || '' - )} Example | ${library.name} Docs`, - description: `An example showing how to implement ${slugToTitle( - params._splat || '' - )} in ${capitalize(params.framework)} using ${library.name}.`, - }), - } - }, component: RouteComponent, validateSearch: z.object({ path: z.string().optional(), @@ -105,6 +91,20 @@ export const Route = createFileRoute({ repoStartingFilePath, } }, + head: ({ params }) => { + const library = getLibrary(params.libraryId) + + return { + meta: seo({ + title: `${capitalize(params.framework)} ${library.name} ${slugToTitle( + params._splat || '' + )} Example | ${library.name} Docs`, + description: `An example showing how to implement ${slugToTitle( + params._splat || '' + )} in ${capitalize(params.framework)} using ${library.name}.`, + }), + } + }, staleTime: 1000 * 60 * 5, // 5 minutes }) @@ -114,8 +114,6 @@ function RouteComponent() { } function PageComponent() { - // Not sure why this inferred type is not working - // @ts-expect-error const { repoStartingDirPath, repoStartingFilePath } = Route.useLoaderData() const navigate = Route.useNavigate() From 8227f023fbf1e6d5808de2840776b8892faa7708 Mon Sep 17 00:00:00 2001 From: Leonardo Montini Date: Sat, 9 Aug 2025 14:51:30 +0200 Subject: [PATCH 2/2] feat: immediately show the selected path in file explorer --- src/components/Markdown.tsx | 4 +-- ...n.docs.framework.$framework.examples.$.tsx | 36 ++++++++----------- 2 files changed, 16 insertions(+), 24 deletions(-) diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx index 161c8a249..217e8e04e 100644 --- a/src/components/Markdown.tsx +++ b/src/components/Markdown.tsx @@ -104,10 +104,10 @@ export function CodeBlock({ const [codeElement, setCodeElement] = React.useState( <> - 
+      
         {code}
       

-      
+      
         {code}
       

     
diff --git a/src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx b/src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx
index ddc3fe1ef..1a8cab76c 100644
--- a/src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx
+++ b/src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx
@@ -50,19 +50,12 @@ export const Route = createFileRoute({
     path: z.string().optional(),
     panel: z.string().optional(),
   }),
-  loader: async ({ params, context: { queryClient } }) => {
+  loaderDeps: ({ search }) => ({ path: search.path }),
+  loader: async ({ params, context: { queryClient }, deps: { path } }) => {
     const library = getLibrary(params.libraryId)
     const branch = getBranch(library, params.version)
     const examplePath = [params.framework, params._splat].join('/')
 
-    // Used to determine the starting file name for the explorer
-    // i.e. app.tsx, main.tsx, src/routes/__root.tsx, etc.
-    // This value is not absolutely guaranteed to be available, so further resolution may be necessary
-    const explorerCandidateStartingFileName = getExampleStartingPath(
-      params.framework as Framework,
-      params.libraryId
-    )
-
     // Used to tell the github contents api where to start looking for files in the target repository
     const repoStartingDirPath = `examples/${examplePath}`
 
@@ -71,9 +64,17 @@ export const Route = createFileRoute({
       repoDirApiContentsQueryOptions(library.repo, branch, repoStartingDirPath)
     )
 
+    // Used to determine the starting file name for the explorer
+    // It's either the selected path in the search params or a default we can derive
+    // i.e. app.tsx, main.tsx, src/routes/__root.tsx, etc.
+    // This value is not absolutely guaranteed to be available, so further resolution may be necessary
+    const explorerCandidateStartingFileName =
+      path ||
+      getExampleStartingPath(params.framework as Framework, params.libraryId)
+
     // Using the fetched contents, get the actual starting file-path for the explorer
     // The `explorerCandidateStartingFileName` is used for matching, but the actual file-path may differ
-    const repoStartingFilePath = determineStartingFilePath(
+    const currentPath = determineStartingFilePath(
       githubContents,
       explorerCandidateStartingFileName,
       params.framework as Framework,
@@ -83,13 +84,10 @@ export const Route = createFileRoute({
     // Now that we've resolved the starting file path, we can
     // fetching and caching the file content for the starting file path
     await queryClient.ensureQueryData(
-      fileQueryOptions(library.repo, branch, repoStartingFilePath)
+      fileQueryOptions(library.repo, branch, currentPath)
     )
 
-    return {
-      repoStartingDirPath,
-      repoStartingFilePath,
-    }
+    return { repoStartingDirPath, currentPath }
   },
   head: ({ params }) => {
     const library = getLibrary(params.libraryId)
@@ -114,7 +112,7 @@ function RouteComponent() {
 }
 
 function PageComponent() {
-  const { repoStartingDirPath, repoStartingFilePath } = Route.useLoaderData()
+  const { repoStartingDirPath, currentPath } = Route.useLoaderData()
 
   const navigate = Route.useNavigate()
   const queryClient = useQueryClient()
@@ -156,12 +154,6 @@ function PageComponent() {
     })
   }
 
-  const currentPath = Route.useSearch({
-    select: (s) => {
-      return s.path || repoStartingFilePath
-    },
-  })
-
   const setCurrentPath = (path: string) => {
     navigate({
       search: { path, panel: undefined },