feat: Demo all examples on stackblitz (#145)

TanStack · Jan 20, 2024 · bdc4712 · bdc4712 · vercel · Jan 20, 2024
1 parent 6d47a4f
commit bdc4712
Show file tree

Hide file tree

Showing 11 changed files with 269 additions and 45 deletions.
diff --git a/app/routes/form.$version.docs.framework.$framework.examples.$.tsx b/app/routes/form.$version.docs.framework.$framework.examples.$.tsx
@@ -6,6 +6,7 @@ import { DocTitle } from '~/components/DocTitle'
 import { repo, getBranch } from '~/routes/form'
 import { seo } from '~/utils/seo'
 import { capitalize, slugToTitle } from '~/utils/utils'
+import { FaExternalLinkAlt } from 'react-icons/fa'
 
 export const loader = async (context: LoaderFunctionArgs) => {
   const { framework: kind, '*': name } = context.params
@@ -30,25 +31,60 @@ export default function RouteExamples() {
   const branch = getBranch(version)
 
   const examplePath = branch === 'v3' ? name : [kind, name].join('/')
+
   const [isDark, setIsDark] = React.useState(true)
 
   React.useEffect(() => {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
+  const githubUrl = `https://github.com/${repo}/tree/${branch}/examples/${examplePath}`
+  const stackBlitzUrl = `https://stackblitz.com/github/${repo}/tree/${branch}/examples/${examplePath}?embed=1&theme=${
+    isDark ? 'dark' : 'light'
+  }`
+  const codesandboxUrl = `https://codesandbox.io/s/github/${repo}/tree/${branch}/examples/${examplePath}?embed=1&theme=${
+    isDark ? 'dark' : 'light'
+  }`
+
   return (
     <div className="flex-1 flex flex-col min-h-0 overflow-auto">
       <div className="p-4 lg:p-6">
         <DocTitle>
-          {capitalize(kind)} Example: {slugToTitle(name)}
+          <span>
+            {capitalize(kind)} Example: {slugToTitle(name)}
+          </span>
+          <div className="flex items-center gap-4 flex-wrap font-normal text-xs">
+            <a
+              href={githubUrl}
+              target="_blank"
+              className="flex gap-1 items-center"
+              rel="noreferrer"
+            >
+              <FaExternalLinkAlt /> Github
+            </a>
+            <a
+              href={stackBlitzUrl}
+              target="_blank"
+              className="flex gap-1 items-center"
+              rel="noreferrer"
+            >
+              <FaExternalLinkAlt /> StackBlitz
+            </a>
+            <a
+              href={codesandboxUrl}
+              target="_blank"
+              className="flex gap-1 items-center"
+              rel="noreferrer"
+            >
+              <FaExternalLinkAlt /> CodeSandbox
+            </a>
+          </div>
         </DocTitle>
       </div>
       <div className="flex-1 lg:px-6 flex flex-col min-h-0">
         <iframe
-          src={`https://codesandbox.io/embed/github/${repo}/tree/${branch}/examples/${examplePath}?autoresize=1&fontsize=14&theme=${
-            isDark ? 'dark' : 'light'
-          }`}
-          title={`${repo}: ${examplePath}`}
+          src={stackBlitzUrl}
+          title={`tanstack/form: ${examplePath}`}
           sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
           className="flex-1 w-full overflow-hidden lg:rounded-lg shadow-xl shadow-gray-700/20 bg-white dark:bg-black"
         />

diff --git a/app/routes/query.$version.docs.$framework.examples.$.tsx b/app/routes/query.$version.docs.$framework.examples.$.tsx
@@ -6,12 +6,14 @@ import { DocTitle } from '~/components/DocTitle'
 import { repo, getBranch } from '~/routes/query'
 import { seo } from '~/utils/seo'
 import { capitalize, slugToTitle } from '~/utils/utils'
+import { FaExternalLinkAlt } from 'react-icons/fa'
 
 export const loader = async (context: LoaderFunctionArgs) => {
   const { '*': examplePath } = context.params
-  const [kind, name] = (examplePath ?? '').split('/')
+  const [kind, _name] = (examplePath ?? '').split('/')
+  const [name, search] = _name.split('?')
 
-  return json({ kind, name })
+  return json({ kind, name, search: search ?? '' })
 }
 
 export const meta: MetaFunction = ({ data }) => {
@@ -26,30 +28,65 @@ export const meta: MetaFunction = ({ data }) => {
 }
 
 export default function RouteExamples() {
-  const { kind, name } = useLoaderData<typeof loader>()
+  const { kind, name, search } = useLoaderData<typeof loader>()
   const { version } = useParams()
   const branch = getBranch(version)
 
   const examplePath = branch === 'v3' ? name : [kind, name].join('/')
+
   const [isDark, setIsDark] = React.useState(true)
 
   React.useEffect(() => {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
+  const githubUrl = `https://github.com/${repo}/tree/${branch}/examples/${examplePath}`
+  const stackBlitzUrl = `https://stackblitz.com/github/${repo}/tree/${branch}/examples/${examplePath}?${search}embed=1&theme=${
+    isDark ? 'dark' : 'light'
+  }`
+  const codesandboxUrl = `https://codesandbox.io/s/github/${repo}/tree/${branch}/examples/${examplePath}?${search}embed=1&theme=${
+    isDark ? 'dark' : 'light'
+  }`
+
   return (
     <div className="flex-1 flex flex-col min-h-0 overflow-auto">
       <div className="p-4 lg:p-6">
         <DocTitle>
-          {capitalize(kind)} Example: {slugToTitle(name)}
+          <span>
+            {capitalize(kind)} Example: {slugToTitle(name)}
+          </span>
+          <div className="flex items-center gap-4 flex-wrap font-normal text-xs">
+            <a
+              href={githubUrl}
+              target="_blank"
+              className="flex gap-1 items-center"
+              rel="noreferrer"
+            >
+              <FaExternalLinkAlt /> Github
+            </a>
+            <a
+              href={stackBlitzUrl}
+              target="_blank"
+              className="flex gap-1 items-center"
+              rel="noreferrer"
+            >
+              <FaExternalLinkAlt /> StackBlitz
+            </a>
+            <a
+              href={codesandboxUrl}
+              target="_blank"
+              className="flex gap-1 items-center"
+              rel="noreferrer"
+            >
+              <FaExternalLinkAlt /> CodeSandbox
+            </a>
+          </div>
         </DocTitle>
       </div>
       <div className="flex-1 lg:px-6 flex flex-col min-h-0">
         <iframe
-          src={`https://codesandbox.io/embed/github/${repo}/tree/${branch}/examples/${examplePath}?autoresize=1&fontsize=14&theme=${
-            isDark ? 'dark' : 'light'
-          }`}
-          title={`${repo}: ${examplePath}`}
+          src={stackBlitzUrl}
+          title={`tanstack/query: ${examplePath}`}
           sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
           className="flex-1 w-full overflow-hidden lg:rounded-lg shadow-xl shadow-gray-700/20 bg-white dark:bg-black"
         />

diff --git a/app/routes/ranger.v1.docs.examples.$.tsx b/app/routes/ranger.v1.docs.examples.$.tsx
@@ -3,9 +3,10 @@ import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
 import { json } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 import { DocTitle } from '~/components/DocTitle'
-import { v1branch } from '~/routes/ranger.v1'
+import { repo, v1branch } from '~/routes/ranger.v1'
 import { seo } from '~/utils/seo'
 import { capitalize, slugToTitle } from '~/utils/utils'
+import { FaExternalLinkAlt } from 'react-icons/fa'
 
 export const loader = async (context: LoaderFunctionArgs) => {
   const { '*': examplePath } = context.params
@@ -37,18 +38,52 @@ export default function RouteReactRangerDocs() {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
+  const githubUrl = `https://github.com/${repo}/tree/${v1branch}/examples/${examplePath}`
+  const stackBlitzUrl = `https://stackblitz.com/github/${repo}/tree/${v1branch}/examples/${examplePath}?${search}embed=1&theme=${
+    isDark ? 'dark' : 'light'
+  }`
+  const codesandboxUrl = `https://codesandbox.io/s/github/${repo}/tree/${v1branch}/examples/${examplePath}?${search}embed=1&theme=${
+    isDark ? 'dark' : 'light'
+  }`
+
   return (
     <div className="flex-1 flex flex-col min-h-0 overflow-auto">
       <div className="p-4 lg:p-6">
         <DocTitle>
-          {capitalize(kind)} Example: {slugToTitle(name)}
+          <span>
+            {capitalize(kind)} Example: {slugToTitle(name)}
+          </span>
+          <div className="flex items-center gap-4 flex-wrap font-normal text-xs">
+            <a
+              href={githubUrl}
+              target="_blank"
+              className="flex gap-1 items-center"
+              rel="noreferrer"
+            >
+              <FaExternalLinkAlt /> Github
+            </a>
+            <a
+              href={stackBlitzUrl}
+              target="_blank"
+              className="flex gap-1 items-center"
+              rel="noreferrer"
+            >
+              <FaExternalLinkAlt /> StackBlitz
+            </a>
+            <a
+              href={codesandboxUrl}
+              target="_blank"
+              className="flex gap-1 items-center"
+              rel="noreferrer"
+            >
+              <FaExternalLinkAlt /> CodeSandbox
+            </a>
+          </div>
         </DocTitle>
       </div>
       <div className="flex-1 lg:px-6 flex flex-col min-h-0">
         <iframe
-          src={`https://stackblitz.com/github/tanstack/ranger/tree/${v1branch}/examples/${examplePath}?${search}embed=1&theme=${
-            isDark ? 'dark' : 'light'
-          }`}
+          src={stackBlitzUrl}
           title={`tanstack/ranger: ${examplePath}`}
           sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
           className="flex-1 w-full overflow-hidden lg:rounded-lg shadow-xl shadow-gray-700/20 bg-white dark:bg-black"

diff --git a/app/routes/ranger.v1.tsx b/app/routes/ranger.v1.tsx
@@ -6,6 +6,8 @@ import type { DocsConfig } from '~/components/Docs'
 import { fetchRepoFile } from '~/utils/documents.server'
 import { useMatchesData } from '~/utils/utils'
 
+export const repo = 'tanstack/ranger'
+
 export const v1branch = 'main'
 
 export const loader: LoaderFunction = async () => {

diff --git a/app/routes/router.v1.docs.examples.$.tsx b/app/routes/router.v1.docs.examples.$.tsx
@@ -3,7 +3,7 @@ import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
 import { json } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 import { DocTitle } from '~/components/DocTitle'
-import { v1branch } from '~/routes/router.v1'
+import { repo, v1branch } from '~/routes/router.v1'
 import { seo } from '~/utils/seo'
 import { capitalize, slugToTitle } from '~/utils/utils'
 import { FaExternalLinkAlt } from 'react-icons/fa'
@@ -38,11 +38,11 @@ export default function RouteReactTableDocs() {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
-  const githubUrl = `https://github.com/tanstack/router/tree/${v1branch}/examples/${examplePath}`
-  const stackBlitzUrl = `https://stackblitz.com/github/tanstack/router/tree/${v1branch}/examples/${examplePath}?${search}embed=1&theme=${
+  const githubUrl = `https://github.com/${repo}/tree/${v1branch}/examples/${examplePath}`
+  const stackBlitzUrl = `https://stackblitz.com/github/${repo}/tree/${v1branch}/examples/${examplePath}?${search}embed=1&theme=${
     isDark ? 'dark' : 'light'
   }`
-  const codesandboxUrl = `https://codesandbox.io/s/github/tanstack/router/tree/${v1branch}/examples/${examplePath}?${search}embed=1&theme=${
+  const codesandboxUrl = `https://codesandbox.io/s/github/${repo}/tree/${v1branch}/examples/${examplePath}?${search}embed=1&theme=${
     isDark ? 'dark' : 'light'
   }`
 

diff --git a/app/routes/router.v1.tsx b/app/routes/router.v1.tsx
@@ -6,6 +6,8 @@ import type { DocsConfig } from '~/components/Docs'
 import { fetchRepoFile } from '~/utils/documents.server'
 import { useMatchesData } from '~/utils/utils'
 
+export const repo = 'tanstack/router'
+
 export const v1branch = 'main'
 
 export const loader: LoaderFunction = async () => {

diff --git a/app/routes/store.$version.docs.framework.$framework.examples.$.tsx b/app/routes/store.$version.docs.framework.$framework.examples.$.tsx
@@ -6,6 +6,7 @@ import { DocTitle } from '~/components/DocTitle'
 import { repo, getBranch } from '~/routes/store'
 import { seo } from '~/utils/seo'
 import { capitalize, slugToTitle } from '~/utils/utils'
+import { FaExternalLinkAlt } from 'react-icons/fa'
 
 export const loader = async (context: LoaderFunctionArgs) => {
   const { framework: kind, '*': name } = context.params
@@ -30,25 +31,60 @@ export default function RouteExamples() {
   const branch = getBranch(version)
 
   const examplePath = branch === 'v3' ? name : [kind, name].join('/')
+
   const [isDark, setIsDark] = React.useState(true)
 
   React.useEffect(() => {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
+  const githubUrl = `https://github.com/${repo}/tree/${branch}/examples/${examplePath}`
+  const stackBlitzUrl = `https://stackblitz.com/github/${repo}/tree/${branch}/examples/${examplePath}?embed=1&theme=${
+    isDark ? 'dark' : 'light'
+  }`
+  const codesandboxUrl = `https://codesandbox.io/s/github/${repo}/tree/${branch}/examples/${examplePath}?embed=1&theme=${
+    isDark ? 'dark' : 'light'
+  }`
+
   return (
     <div className="flex-1 flex flex-col min-h-0 overflow-auto">
       <div className="p-4 lg:p-6">
         <DocTitle>
-          {capitalize(kind)} Example: {slugToTitle(name)}
+          <span>
+            {capitalize(kind)} Example: {slugToTitle(name)}
+          </span>
+          <div className="flex items-center gap-4 flex-wrap font-normal text-xs">
+            <a
+              href={githubUrl}
+              target="_blank"
+              className="flex gap-1 items-center"
+              rel="noreferrer"
+            >
+              <FaExternalLinkAlt /> Github
+            </a>
+            <a
+              href={stackBlitzUrl}
+              target="_blank"
+              className="flex gap-1 items-center"
+              rel="noreferrer"
+            >
+              <FaExternalLinkAlt /> StackBlitz
+            </a>
+            <a
+              href={codesandboxUrl}
+              target="_blank"
+              className="flex gap-1 items-center"
+              rel="noreferrer"
+            >
+              <FaExternalLinkAlt /> CodeSandbox
+            </a>
+          </div>
         </DocTitle>
       </div>
       <div className="flex-1 lg:px-6 flex flex-col min-h-0">
         <iframe
-          src={`https://codesandbox.io/embed/github/${repo}/tree/${branch}/examples/${examplePath}?autoresize=1&fontsize=14&theme=${
-            isDark ? 'dark' : 'light'
-          }`}
-          title={`${repo}: ${examplePath}`}
+          src={stackBlitzUrl}
+          title={`tanstack/form: ${examplePath}`}
           sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
           className="flex-1 w-full overflow-hidden lg:rounded-lg shadow-xl shadow-gray-700/20 bg-white dark:bg-black"
         />