Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Demo all examples on StackBlitz #145

Merged
merged 1 commit into from
Jan 20, 2024
Merged

feat: Demo all examples on StackBlitz #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 41 additions & 5 deletions app/routes/form.$version.docs.framework.$framework.examples.$.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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"
/>
Expand Down
53 changes: 45 additions & 8 deletions app/routes/query.$version.docs.$framework.examples.$.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand All @@ -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"
/>
Expand Down
45 changes: 40 additions & 5 deletions app/routes/ranger.v1.docs.examples.$.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand Down
2 changes: 2 additions & 0 deletions app/routes/ranger.v1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
8 changes: 4 additions & 4 deletions app/routes/router.v1.docs.examples.$.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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'
}`

Expand Down
2 changes: 2 additions & 0 deletions app/routes/router.v1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
46 changes: 41 additions & 5 deletions app/routes/store.$version.docs.framework.$framework.examples.$.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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"
/>
Expand Down
Loading
Loading