fix: use rehype-shikiji (#6054)

* fix: use rehype-shikiji

* chore: webpack does not support .mjs by default

* fix: support dockerfile format

* fix: date changing on story every day

* fix: add support to diff

Author: ovflowd

components/Common/BlogPostCard/index.stories.tsx

@@ -17,7 +17,7 @@ export const Default: Story = {
         src: 'https://avatars.githubusercontent.com/u/',
       },
     ],
-    date: new Date(),
+    date: new Date('17 October 2023'),
   },
   decorators: [
     Story => (

next.config.mjs

@@ -34,6 +34,17 @@ const nextConfig = {
   // as we already check it on the CI within each Pull Request
   // we also configure ESLint to run its lint checking on all files (next lint)
   eslint: { dirs: ['.'], ignoreDuringBuilds: true },
+  // Next.js WebPack Bundler does not know how to handle `.mjs` files on `node_modules`
+  // This is not an issue when using TurboPack as it uses SWC and it is ESM-only
+  // Once we migrate to Next.js 14 we might be able to remove this
+  webpack: function (config) {
+    config.module.rules.push({
+      test: /\.m?js$/,
+      type: 'javascript/auto',
+      resolve: { fullySpecified: false },
+    });
+    return config;
+  },
   experimental: {
     // Some of our static pages from `getStaticProps` have a lot of data
     // since we pass the fully-compiled MDX page from `MDXRemote` through

next.mdx.mjs

@@ -12,12 +12,11 @@ import * as remarkHeadings from '@vcarl/remark-headings';
 import * as mdastAutoLink from 'mdast-util-gfm-autolink-literal';
 import * as mdastTable from 'mdast-util-gfm-table';
 import * as rehypeAutolinkHeadings from 'rehype-autolink-headings';
-import * as rehypePrettyCode from 'rehype-pretty-code';
 import * as rehypeRaw from 'rehype-raw';
+import * as rehypeShikiji from 'rehype-shikiji';
 import * as rehypeSlug from 'rehype-slug';
-import { getHighlighter } from 'shiki';
 
-import { LANGUAGES, DEFAULT_THEME, DEFAULT_LANG } from './shiki.config.mjs';
+import { LANGUAGES, DEFAULT_THEME } from './shiki.config.mjs';
 
 /**
  * This function is used to add individual `mdast` plugins to the unified/mdx
@@ -64,13 +63,8 @@ export function nextRehypePlugins(fileExtension) {
     ],
     [
       // Syntax Highlighter for Code Blocks
-      rehypePrettyCode.default,
-      {
-        theme: DEFAULT_THEME,
-        defaultLang: DEFAULT_LANG,
-        getHighlighter: options =>
-          getHighlighter({ ...options, langs: LANGUAGES }),
-      },
+      rehypeShikiji.default,
+      { theme: DEFAULT_THEME, langs: LANGUAGES },
     ],
   ];
 

package-lock.json

@@ -19,7 +19,7 @@
     "scripts:release-post": "cross-env NODE_NO_WARNINGS=1 node scripts/release-post/index.mjs",
     "scripts:generate-next-data": "cross-env NODE_NO_WARNINGS=1 node scripts/generate-next-data/index.mjs",
     "preserve": "npm run scripts:generate-next-data",
-    "serve": "cross-env NODE_NO_WARNINGS=1 next dev --turbo",
+    "serve": "cross-env NODE_NO_WARNINGS=1 next dev",
     "prebuild": "npm run scripts:generate-next-data",
     "build": "cross-env NODE_NO_WARNINGS=1 next build",
     "start": "cross-env NODE_NO_WARNINGS=1 next start",
@@ -73,12 +73,11 @@
     "react-dom": "^18.2.0",
     "react-intl": "~6.4.7",
     "rehype-autolink-headings": "~7.0.0",
-    "rehype-pretty-code": "~0.10.1",
     "rehype-raw": "~7.0.0",
+    "rehype-shikiji": "~0.6.10",
     "rehype-slug": "~6.0.0",
     "semver": "~7.5.4",
     "sharp": "0.32.6",
-    "shiki": "npm:[email protected]",
     "tailwindcss": "^3.3.3",
     "turbo": "1.10.16",
     "typescript": "~5.2.2",