{
export const links: LinksFunction = () => {
return [
- { rel: 'stylesheet', href: styles },
- {
- rel: 'stylesheet',
- href: prismThemeLight,
- media: '(prefers-color-scheme: light)',
- },
- {
- rel: 'stylesheet',
- href: prismThemeDark,
- media: '(prefers-color-scheme: dark)',
- },
- {
- rel: 'stylesheet',
- href: docSearchStyles,
- },
- {
- rel: 'stylesheet',
- href: carbonStyles,
- },
{
rel: 'apple-touch-icon',
sizes: '180x180',
diff --git a/app/utils/documents.server.ts b/app/utils/documents.server.ts
index 2bc7b1c7..138ee890 100644
--- a/app/utils/documents.server.ts
+++ b/app/utils/documents.server.ts
@@ -1,5 +1,6 @@
import fsp from 'node:fs/promises'
import path from 'node:path'
+import { fileURLToPath } from 'node:url'
import { bundleMDX } from 'mdx-bundler'
import * as graymatter from 'gray-matter'
import { fetchCached } from '~/utils/cache.server'
@@ -48,8 +49,8 @@ async function fetchRemote(
* Return text content of file from local file system
*/
async function fetchFs(repo: string, filepath: string) {
- // const __dirname = fileURLToPath(new URL('.', import.meta.url))
- const localFilePath = path.resolve(__dirname, `../../${repo}`, filepath)
+ const __dirname = fileURLToPath(new URL('.', import.meta.url))
+ const localFilePath = path.resolve(__dirname, `../../../${repo}`, filepath)
const file = await fsp.readFile(localFilePath)
return file.toString()
}
diff --git a/remix.env.d.ts b/env.d.ts
similarity index 50%
rename from remix.env.d.ts
rename to env.d.ts
index dcf8c45e..78ed2345 100644
--- a/remix.env.d.ts
+++ b/env.d.ts
@@ -1,2 +1,2 @@
-///
///
+///
diff --git a/package.json b/package.json
index 4827ff53..758149c3 100644
--- a/package.json
+++ b/package.json
@@ -4,10 +4,10 @@
"sideEffects": false,
"repository": "https://github.com/TanStack/tanstack.com.git",
"packageManager": "pnpm@8.10.2",
- "type": "commonjs",
+ "type": "module",
"scripts": {
- "dev": "remix dev --manual",
- "build": "remix build",
+ "dev": "vite dev",
+ "build": "vite build && vite build --ssr",
"start": "remix-serve ./build/index.js",
"format": "prettier --plugin-search-dir . \"**/*.{md,js,jsx,cjs,ts,tsx,json}\" --write",
"lint": "eslint --ext .ts,.tsx ./app"
@@ -57,7 +57,9 @@
"npm-run-all": "^4.1.5",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5",
- "typescript": "^5.2.2"
+ "typescript": "^5.2.2",
+ "vite": "^4.5.0",
+ "vite-tsconfig-paths": "^4.2.1"
},
"engines": {
"node": ">=18.0.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ae84b0f0..3ddd829f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -99,7 +99,7 @@ dependencies:
devDependencies:
'@remix-run/dev':
specifier: ^2.2.0
- version: 2.2.0(@remix-run/serve@2.2.0)(typescript@5.2.2)
+ version: 2.2.0(@remix-run/serve@2.2.0)(typescript@5.2.2)(vite@4.5.0)
'@remix-run/eslint-config':
specifier: ^2.2.0
version: 2.2.0(eslint@8.53.0)(react@18.2.0)(typescript@5.2.2)
@@ -136,6 +136,12 @@ devDependencies:
typescript:
specifier: ^5.2.2
version: 5.2.2
+ vite:
+ specifier: ^4.5.0
+ version: 4.5.0
+ vite-tsconfig-paths:
+ specifier: ^4.2.1
+ version: 4.2.1(typescript@5.2.2)(vite@4.5.0)
packages:
@@ -1656,7 +1662,7 @@ packages:
dev: true
optional: true
- /@remix-run/dev@2.2.0(@remix-run/serve@2.2.0)(typescript@5.2.2):
+ /@remix-run/dev@2.2.0(@remix-run/serve@2.2.0)(typescript@5.2.2)(vite@4.5.0):
resolution: {integrity: sha512-JtteMtYirQlj1Xf9FSLLjqO+owxlqJVsTESgVWdF+CR5kon2i12YjPnRx1xGtB4UGgU/yTZseMTPNhTKc5mwpQ==}
engines: {node: '>=18.0.0'}
hasBin: true
@@ -1729,6 +1735,7 @@ packages:
tsconfig-paths: 4.2.0
typescript: 5.2.2
undici: 5.27.2
+ vite: 4.5.0
ws: 7.5.9
transitivePeerDependencies:
- '@types/node'
@@ -4297,6 +4304,10 @@ packages:
slash: 3.0.0
dev: true
+ /globrex@0.1.2:
+ resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+ dev: true
+
/gopd@1.0.1:
resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
dependencies:
@@ -7324,6 +7335,19 @@ packages:
/ts-interface-checker@0.1.13:
resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+ /tsconfck@2.1.2(typescript@5.2.2):
+ resolution: {integrity: sha512-ghqN1b0puy3MhhviwO2kGF8SeMDNhEbnKxjK7h6+fvY9JAxqvXi8y5NAHSQv687OVboS2uZIByzGd45/YxrRHg==}
+ engines: {node: ^14.13.1 || ^16 || >=18}
+ hasBin: true
+ peerDependencies:
+ typescript: ^4.3.5 || ^5.0.0
+ peerDependenciesMeta:
+ typescript:
+ optional: true
+ dependencies:
+ typescript: 5.2.2
+ dev: true
+
/tsconfig-paths@3.14.2:
resolution: {integrity: sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==}
dependencies:
@@ -7636,6 +7660,23 @@ packages:
- terser
dev: true
+ /vite-tsconfig-paths@4.2.1(typescript@5.2.2)(vite@4.5.0):
+ resolution: {integrity: sha512-GNUI6ZgPqT3oervkvzU+qtys83+75N/OuDaQl7HmOqFTb0pjZsuARrRipsyJhJ3enqV8beI1xhGbToR4o78nSQ==}
+ peerDependencies:
+ vite: '*'
+ peerDependenciesMeta:
+ vite:
+ optional: true
+ dependencies:
+ debug: 4.3.4
+ globrex: 0.1.2
+ tsconfck: 2.1.2(typescript@5.2.2)
+ vite: 4.5.0
+ transitivePeerDependencies:
+ - supports-color
+ - typescript
+ dev: true
+
/vite@4.5.0:
resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
engines: {node: ^14.18.0 || >=16.0.0}
diff --git a/postcss.config.js b/postcss.config.cjs
similarity index 100%
rename from postcss.config.js
rename to postcss.config.cjs
diff --git a/remix.config.js b/remix.config.js
deleted file mode 100644
index 1bf0d286..00000000
--- a/remix.config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/** @type {import('@remix-run/dev').AppConfig} */
-module.exports = {
- ignoredRouteFiles: ['**/.*'],
- // appDirectory: "app",
- // assetsBuildDirectory: "public/build",
- // publicPath: "/build/",
- // serverBuildPath: "build/index.js",
- serverModuleFormat: 'cjs',
-}
diff --git a/tailwind.config.js b/tailwind.config.cjs
similarity index 100%
rename from tailwind.config.js
rename to tailwind.config.cjs
diff --git a/tsconfig.json b/tsconfig.json
index 09f05602..ad5ae055 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,12 @@
{
- "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+ "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
- "moduleResolution": "node",
+ "module": "ESNext",
+ "moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2022",
"strict": true,
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000..177dd59b
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+ plugins: [remix(), tsconfigPaths()],
+});
From 003cdac6d25a0cfe404d75e126a905b89f33818b Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Sun, 5 Nov 2023 11:34:30 +1100
Subject: [PATCH 02/39] Run prettier
---
vite.config.ts | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/vite.config.ts b/vite.config.ts
index 177dd59b..8d62f693 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,7 @@
-import { unstable_vitePlugin as remix } from "@remix-run/dev";
-import { defineConfig } from "vite";
-import tsconfigPaths from "vite-tsconfig-paths";
+import { unstable_vitePlugin as remix } from '@remix-run/dev'
+import { defineConfig } from 'vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
export default defineConfig({
plugins: [remix(), tsconfigPaths()],
-});
+})
From 758593cd8e7bbd3f41082abaa81937b678eacb57 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Sun, 5 Nov 2023 11:35:49 +1100
Subject: [PATCH 03/39] Fix missing stylesheets
---
app/root.tsx | 3 +++
1 file changed, 3 insertions(+)
diff --git a/app/root.tsx b/app/root.tsx
index 29fcf558..d5ee32b9 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,5 +1,8 @@
import { Outlet, isRouteErrorResponse, useRouteError } from '@remix-run/react'
+import '~/styles/app.css'
+import '~/styles/carbon.css'
import '~/styles/prismThemeDark.css'
+import '@docsearch/css/dist/style.css'
import { seo } from '~/utils/seo'
import { RootDocument } from '~/components/RootDocument'
import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
From 2065b980233e3ea0bab716b27b61ec4b24153a51 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Sun, 5 Nov 2023 11:50:11 +1100
Subject: [PATCH 04/39] Add remark-shiki-twoslash
---
app/components/CodeBlock.tsx | 69 -----
app/components/Mdx.tsx | 12 -
app/root.tsx | 1 -
app/styles/app.css | 297 +++++++++++++++++++-
app/styles/prismThemeDark.css | 446 ------------------------------
app/styles/prismThemeLight.css | 434 -----------------------------
app/utils/documents.server.ts | 8 +-
app/utils/svelteHighlighter.js | 150 ----------
package.json | 9 +-
pnpm-lock.yaml | 482 ++++++++++++++++++++++-----------
10 files changed, 622 insertions(+), 1286 deletions(-)
delete mode 100644 app/components/CodeBlock.tsx
delete mode 100644 app/styles/prismThemeDark.css
delete mode 100644 app/styles/prismThemeLight.css
delete mode 100644 app/utils/svelteHighlighter.js
diff --git a/app/components/CodeBlock.tsx b/app/components/CodeBlock.tsx
deleted file mode 100644
index 7b71fd4c..00000000
--- a/app/components/CodeBlock.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import type { FC, HTMLAttributes, ReactElement } from 'react'
-import invariant from 'tiny-invariant'
-import type { Language } from 'prism-react-renderer'
-import { Highlight, Prism } from 'prism-react-renderer'
-import { svelteHighlighter } from '~/utils/svelteHighlighter'
-// Add back additional language support after `prism-react` upgrade
-;(typeof global !== 'undefined' ? global : window).Prism = Prism
-// require('prismjs/components/prism-diff')
-// require('prismjs/components/prism-bash')
-
-// @ts-ignore Alias markup as vue highlight
-Prism.languages.vue = Prism.languages.markup
-
-// Enable svelte syntax highlighter
-svelteHighlighter()
-
-function getLanguageFromClassName(className: string) {
- const match = className.match(/language-(\w+)/)
- return match ? match[1] : ''
-}
-
-function isLanguageSupported(lang: string): lang is Language {
- return lang in Prism.languages
-}
-
-export const CodeBlock: FC
> = ({ children }) => {
- invariant(!!children, 'children is required')
- const child = children as ReactElement
- const className = child.props?.className || ''
- const userLang = getLanguageFromClassName(className)
- const lang = isLanguageSupported(userLang) ? userLang : 'bash'
- const code = child.props.children || ''
- return (
-
-
- {({ className, tokens, getLineProps, getTokenProps }) => (
-
-
- {lang}
-
-
-
-
- {tokens.map((line, i) => (
-
- {line.map((token, key) => (
-
- ))}
-
- ))}
-
-
-
-
-
+
{children}