diff --git a/components/Common/BlogPostCard/index.stories.tsx b/components/Common/BlogPostCard/index.stories.tsx index dbf3a370edf89..dddbb10ae08f3 100644 --- a/components/Common/BlogPostCard/index.stories.tsx +++ b/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 => ( diff --git a/next.config.mjs b/next.config.mjs index f0070325e00b2..7a2e4390c4c2f 100644 --- a/next.config.mjs +++ b/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 diff --git a/next.mdx.mjs b/next.mdx.mjs index a22f09b3060f1..ed439c5748d6e 100644 --- a/next.mdx.mjs +++ b/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 }, ], ]; diff --git a/package-lock.json b/package-lock.json index d5d38e39f498f..5eabf2590993c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,12 +41,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:shikiji-compat@0.6.10", "tailwindcss": "^3.3.3", "turbo": "1.10.16", "typescript": "~5.2.2", @@ -14012,33 +14011,6 @@ "node": ">=4" } }, - "node_modules/hash-obj": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/hash-obj/-/hash-obj-4.0.0.tgz", - "integrity": "sha512-FwO1BUVWkyHasWDW4S8o0ssQXjvyghLV2rfVhnN36b2bbcj45eGiuzdn9XOvOpjV3TKQD7Gm2BWNXdE9V4KKYg==", - "dependencies": { - "is-obj": "^3.0.0", - "sort-keys": "^5.0.0", - "type-fest": "^1.0.2" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/hash-obj/node_modules/type-fest": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz", - "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/hash.js": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz", @@ -15677,17 +15649,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-obj": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-3.0.0.tgz", - "integrity": "sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/is-path-cwd": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz", @@ -24871,11 +24832,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/parse-numeric-range": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz", - "integrity": "sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==" - }, "node_modules/parse5": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", @@ -26718,22 +26674,6 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/rehype-pretty-code": { - "version": "0.10.1", - "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.10.1.tgz", - "integrity": "sha512-WHjRvGlqPXG8BVRB9mK0255WvIOnzvHivAWhFkA2OG+NTkQWtTbCULZMokOHLf3Yy8q8I8/F8QNjDSQBhjMK5w==", - "dependencies": { - "@types/hast": "^2.0.0", - "hash-obj": "^4.0.0", - "parse-numeric-range": "^1.3.0" - }, - "engines": { - "node": ">=16" - }, - "peerDependencies": { - "shiki": "0.x" - } - }, "node_modules/rehype-raw": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz", @@ -26800,6 +26740,138 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/rehype-shikiji": { + "version": "0.6.10", + "resolved": "https://registry.npmjs.org/rehype-shikiji/-/rehype-shikiji-0.6.10.tgz", + "integrity": "sha512-ezSKqk+llCTyrr72efEU8xzAfEreqt2vHS3dyMESlPExfWRe89PReFA6KQMHyMUJb3Id0BGVQvRCV1zierldvw==", + "dependencies": { + "@types/hast": "^3.0.1", + "hast-util-to-string": "^3.0.0", + "shikiji": "0.6.10", + "unified": "^11.0.3", + "unist-util-visit": "^5.0.0" + } + }, + "node_modules/rehype-shikiji/node_modules/@types/hast": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.2.tgz", + "integrity": "sha512-B5hZHgHsXvfCoO3xgNJvBnX7N8p86TqQeGKXcokW4XXi+qY4vxxPSFYofytvVmpFxzPv7oxDQzjg5Un5m2/xiw==", + "dependencies": { + "@types/unist": "*" + } + }, + "node_modules/rehype-shikiji/node_modules/@types/unist": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.1.tgz", + "integrity": "sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==" + }, + "node_modules/rehype-shikiji/node_modules/is-plain-obj": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", + "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/rehype-shikiji/node_modules/unified": { + "version": "11.0.4", + "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz", + "integrity": "sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==", + "dependencies": { + "@types/unist": "^3.0.0", + "bail": "^2.0.0", + "devlop": "^1.0.0", + "extend": "^3.0.0", + "is-plain-obj": "^4.0.0", + "trough": "^2.0.0", + "vfile": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/rehype-shikiji/node_modules/unist-util-is": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz", + "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==", + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/rehype-shikiji/node_modules/unist-util-stringify-position": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", + "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/rehype-shikiji/node_modules/unist-util-visit": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz", + "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0", + "unist-util-visit-parents": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/rehype-shikiji/node_modules/unist-util-visit-parents": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz", + "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/rehype-shikiji/node_modules/vfile": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz", + "integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0", + "vfile-message": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/rehype-shikiji/node_modules/vfile-message": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz", + "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/rehype-slug": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-6.0.0.tgz", @@ -29393,15 +29465,6 @@ "node": ">=8" } }, - "node_modules/shiki": { - "name": "shikiji-compat", - "version": "0.6.10", - "resolved": "https://registry.npmjs.org/shikiji-compat/-/shikiji-compat-0.6.10.tgz", - "integrity": "sha512-+PNx+1NbGHaAIkEMZwtWfwqVLE/oSivB2XOax5m4tnudJrjUe6TA5WrAFKIm57jFuM1aUFn0YX6IeU21Um78AA==", - "dependencies": { - "shikiji": "0.6.10" - } - }, "node_modules/shikiji": { "version": "0.6.10", "resolved": "https://registry.npmjs.org/shikiji/-/shikiji-0.6.10.tgz", @@ -29550,31 +29613,6 @@ "integrity": "sha512-VZBmZP8WU3sMOZm1bdgTadsQbcscK0UM8oKxKVBs4XAhUo2Xxzm/OFMGBkPusxw9xL3Uy8LrzEqGqJhclsr0yA==", "dev": true }, - "node_modules/sort-keys": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-5.0.0.tgz", - "integrity": "sha512-Pdz01AvCAottHTPQGzndktFNdbRA75BgOfeT1hH+AMnJFv8lynkPi42rfeEhpx1saTEI3YNMWxfqu0sFD1G8pw==", - "dependencies": { - "is-plain-obj": "^4.0.0" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/sort-keys/node_modules/is-plain-obj": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", - "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/source-map": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz", diff --git a/package.json b/package.json index 185265e17af4c..bf98b79b7c616 100644 --- a/package.json +++ b/package.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:shikiji-compat@0.6.10", "tailwindcss": "^3.3.3", "turbo": "1.10.16", "typescript": "~5.2.2", diff --git a/pages/en/docs/guides/nodejs-docker-webapp.md b/pages/en/docs/guides/nodejs-docker-webapp.md index 5eeae2a38c3f0..86aeeee95673f 100644 --- a/pages/en/docs/guides/nodejs-docker-webapp.md +++ b/pages/en/docs/guides/nodejs-docker-webapp.md @@ -74,7 +74,7 @@ image of your app. Create an empty file called `Dockerfile`: -```markup +```bash touch Dockerfile ``` @@ -84,14 +84,14 @@ The first thing we need to do is define from what image we want to build from. Here we will use the latest LTS (long term support) version `18` of `node` available from the [Docker Hub](https://hub.docker.com/_/node): -```docker +```dockerfile FROM node:18 ``` Next we create a directory to hold the application code inside the image, this will be the working directory for your application: -```docker +```dockerfile # Create app directory WORKDIR /usr/src/app ``` @@ -101,7 +101,7 @@ need to do is to install your app dependencies using the `npm` binary. Please note that if you are using `npm` version 4 or earlier a `package-lock.json` file will _not_ be generated. -```docker +```dockerfile # Install app dependencies # A wildcard is used to ensure both package.json AND package-lock.json are copied # where available (npm@5+) @@ -122,7 +122,7 @@ You can read more about this [here](https://blog.npmjs.org/post/171556855892/int To bundle your app's source code inside the Docker image, use the `COPY` instruction: -```docker +```dockerfile # Bundle app source COPY . . ``` @@ -130,20 +130,20 @@ COPY . . Your app binds to port `8080` so you'll use the `EXPOSE` instruction to have it mapped by the `docker` daemon: -```docker +```dockerfile EXPOSE 8080 ``` Last but not least, define the command to run your app using `CMD` which defines your runtime. Here we will use `node server.js` to start your server: -```docker +```dockerfile CMD [ "node", "server.js" ] ``` Your `Dockerfile` should now look like this: -```docker +```dockerfile FROM node:18 # Create app directory diff --git a/shiki.config.mjs b/shiki.config.mjs index 840a03a97d58e..423be52ce8003 100644 --- a/shiki.config.mjs +++ b/shiki.config.mjs @@ -2,10 +2,11 @@ /** * READ: This file allows us to configure a subset of languages that we want to support on the Node.js Website - * we use `shikiji-compat` (translation layer that exposes the same API of `shiki` with `shikiji`) - * we use `shikiji` instead of `shiki` as it is native ESM and we can use it in Node.js without transpiling + * we use `shikiji` which is an ESM-only rewrite of Shiki */ +import diffLanguage from 'shikiji/langs/diff.mjs'; +import dockerLanguage from 'shikiji/langs/docker.mjs'; import javaScriptLanguage from 'shikiji/langs/javascript.mjs'; import jsonLanguage from 'shikiji/langs/json.mjs'; import jsxLanguage from 'shikiji/langs/jsx.mjs'; @@ -16,57 +17,55 @@ import xmlLanguage from 'shikiji/langs/xml.mjs'; import yamlLanguage from 'shikiji/langs/yaml.mjs'; import shikiNordTheme from 'shikiji/themes/nord.mjs'; -/** @type {import('shiki').ILanguageRegistration[]} */ +/** @type {import('shikiji').LanguageRegistration[]} */ export const LANGUAGES = [ { ...javaScriptLanguage[0], - id: 'javascript', scopeName: 'source.js', - aliases: ['js'], + aliases: ['mjs', 'cjs', 'js'], }, { ...jsonLanguage[0], - id: 'json', scopeName: 'source.json', }, { ...jsxLanguage[0], - id: 'jsx', scopeName: 'source.js.jsx', }, { ...typeScriptLanguage[0], - id: 'typescript', scopeName: 'source.ts', aliases: ['ts'], }, { ...xmlLanguage[0], - id: 'xml', scopeName: 'text.xml', }, { ...yamlLanguage[0], - id: 'yaml', scopeName: 'source.yaml', aliases: ['yml'], }, { ...shellScriptLanguage[0], - id: 'shellscript', scopeName: 'source.shell', aliases: ['bash', 'sh', 'shell', 'zsh'], }, { ...shellSessionLanguage[0], - id: 'shellsession', scopeName: 'text.shell-session', aliases: ['console'], }, + { + ...dockerLanguage[0], + scopeName: 'source.dockerfile', + aliases: ['dockerfile'], + }, + { + ...diffLanguage[0], + scopeName: 'source.diff', + }, ]; // This is the default theme we use for our Shiki Syntax Highlighter export const DEFAULT_THEME = shikiNordTheme; - -// This is the default language we use for our Shiki Syntax Highlighter -export const DEFAULT_LANG = 'plaintext';