diff --git a/app/routes/blog.$name.tsx b/app/routes/blog.$name.tsx index 6fd42d0..11b7425 100644 --- a/app/routes/blog.$name.tsx +++ b/app/routes/blog.$name.tsx @@ -1,6 +1,6 @@ import type { LoaderFunctionArgs } from "@remix-run/node"; import { useLoaderData } from "@remix-run/react"; -import { getMDXComponent } from "mdx-bundler/client"; +import { getMDXComponent } from "mdx-bundler/client/index.js"; import React from "react"; import { BlogWrapper } from "~/components/BlogWrapper"; import { Title } from "~/components/Title"; diff --git a/app/utils/posts.server.ts b/app/utils/posts.server.ts index 3d65c8f..fa68a66 100644 --- a/app/utils/posts.server.ts +++ b/app/utils/posts.server.ts @@ -1,7 +1,6 @@ import { remarkCodeHike } from "@code-hike/mdx"; import { readdir, readFile } from "fs/promises"; import { bundleMDX } from "mdx-bundler"; -import codeHikeTheme from "shiki/themes/one-dark-pro.json"; type FrontMatter = { title: string; @@ -11,7 +10,7 @@ type FrontMatter = { export const getMdxFile = async (file: string) => { return bundleMDX({ - source: (await readFile(`${__dirname}/../posts/${file}.mdx`)).toString(), + source: (await readFile(`posts/${file}.mdx`)).toString(), mdxOptions(options) { return { rehypePlugins: [...(options.rehypePlugins ?? [])], @@ -20,7 +19,7 @@ export const getMdxFile = async (file: string) => { [ remarkCodeHike, { - theme: codeHikeTheme, + theme: "one-dark-pro", lineNumbers: true, showCopyButton: true, autoImport: true, @@ -33,20 +32,20 @@ export const getMdxFile = async (file: string) => { }; export const findPosts = async () => { - const files = await readdir(`${__dirname}/../posts`); + const files = await readdir(`posts`); const posts: (FrontMatter & { filename: string; })[] = []; for (const file of files.filter((file) => file.endsWith(".mdx"))) { const { frontmatter } = await bundleMDX({ - source: (await readFile(`${__dirname}/../posts/${file}`)).toString(), + source: (await readFile(`posts/${file}`)).toString(), mdxOptions() { return { remarkPlugins: [ [ remarkCodeHike, { - theme: codeHikeTheme, + theme: "one-dark-pro", lineNumbers: true, showCopyButton: true, autoImport: true, diff --git a/package-lock.json b/package-lock.json index 6052ec9..048a3c5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "mdx-bundler": "^10.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "shiki": "^0.14.3" + "react-icons": "^5.0.1" }, "devDependencies": { "@remix-run/dev": "^2.1.0", @@ -23,7 +23,6 @@ "@types/react": "^18.2.18", "@types/react-dom": "^18.2.7", "eslint": "^8.46.0", - "react-icons": "^4.10.1", "tailwindcss": "^3.3.3", "typescript": "^5.1.6" } @@ -4404,11 +4403,6 @@ "node": ">=8" } }, - "node_modules/ansi-sequence-parser": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.0.tgz", - "integrity": "sha512-lEm8mt52to2fT8GhciPCGeCXACSz2UwIN4X2e2LJSnZ5uAbn2/dsYdOmUXq0AtWS5cpAupysIneExOgH0Vd2TQ==" - }, "node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -9055,7 +9049,8 @@ "node_modules/jsonc-parser": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz", - "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==" + "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==", + "dev": true }, "node_modules/jsonfile": { "version": "6.1.0", @@ -12271,10 +12266,9 @@ } }, "node_modules/react-icons": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz", - "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==", - "dev": true, + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz", + "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==", "peerDependencies": { "react": "*" } @@ -12800,17 +12794,6 @@ "node": ">=8" } }, - "node_modules/shiki": { - "version": "0.14.3", - "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.3.tgz", - "integrity": "sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==", - "dependencies": { - "ansi-sequence-parser": "^1.1.0", - "jsonc-parser": "^3.2.0", - "vscode-oniguruma": "^1.7.0", - "vscode-textmate": "^8.0.0" - } - }, "node_modules/side-channel": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", @@ -14579,16 +14562,6 @@ "@esbuild/win32-x64": "0.16.17" } }, - "node_modules/vscode-oniguruma": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz", - "integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==" - }, - "node_modules/vscode-textmate": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz", - "integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==" - }, "node_modules/wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", @@ -17669,11 +17642,6 @@ "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", "dev": true }, - "ansi-sequence-parser": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.0.tgz", - "integrity": "sha512-lEm8mt52to2fT8GhciPCGeCXACSz2UwIN4X2e2LJSnZ5uAbn2/dsYdOmUXq0AtWS5cpAupysIneExOgH0Vd2TQ==" - }, "ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -20904,7 +20872,8 @@ "jsonc-parser": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz", - "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==" + "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==", + "dev": true }, "jsonfile": { "version": "6.1.0", @@ -23045,10 +23014,9 @@ } }, "react-icons": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz", - "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==", - "dev": true, + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz", + "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==", "requires": {} }, "react-is": { @@ -23432,17 +23400,6 @@ "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", "dev": true }, - "shiki": { - "version": "0.14.3", - "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.3.tgz", - "integrity": "sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==", - "requires": { - "ansi-sequence-parser": "^1.1.0", - "jsonc-parser": "^3.2.0", - "vscode-oniguruma": "^1.7.0", - "vscode-textmate": "^8.0.0" - } - }, "side-channel": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", @@ -24650,16 +24607,6 @@ } } }, - "vscode-oniguruma": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz", - "integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==" - }, - "vscode-textmate": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz", - "integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==" - }, "wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", diff --git a/package.json b/package.json index b97fe36..382361e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "private": true, "sideEffects": false, + "type": "module", "scripts": { "build": "remix build", "dev": "remix dev", @@ -17,7 +18,7 @@ "mdx-bundler": "^10.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "shiki": "^0.14.3" + "react-icons": "^5.0.1" }, "devDependencies": { "@remix-run/dev": "^2.1.0", @@ -26,7 +27,6 @@ "@types/react": "^18.2.18", "@types/react-dom": "^18.2.7", "eslint": "^8.46.0", - "react-icons": "^4.10.1", "tailwindcss": "^3.3.3", "typescript": "^5.1.6" } diff --git a/remix.config.js b/remix.config.js deleted file mode 100644 index 8ff5e7d..0000000 --- a/remix.config.js +++ /dev/null @@ -1,13 +0,0 @@ -const { remarkCodeHike } = require("@code-hike/mdx"); -const theme = require("shiki/themes/one-dark-pro.json"); - -/** @type {import('@remix-run/dev').AppConfig} */ -module.exports = { - ignoredRouteFiles: ["**/.*"], - serverDependenciesToBundle: ["mdx-bundler"], - tailwind: true, - serverModuleFormat: "cjs", - mdx: { - remarkPlugins: [[remarkCodeHike, { theme }]], - }, -}; diff --git a/remix.config.ts b/remix.config.ts new file mode 100644 index 0000000..00bc0e9 --- /dev/null +++ b/remix.config.ts @@ -0,0 +1,7 @@ +import type { AppConfig } from "@remix-run/dev"; + +export default { + ignoredRouteFiles: ["**/.*"], + serverDependenciesToBundle: ["mdx-bundler"], + tailwind: true, +} satisfies AppConfig;