feat: replace prism.js with code-hike

README.md

@@ -38,8 +38,8 @@ To setup the local dev environment with this repo, you need follow the below ste
 3. In the VDP folder you just clone, use `make build PROFILE=all` to build the full images of vdp, this step will take some time if this is your first time setting up the VDP.
 4. In the same VDP folder, use `make dev PROFILE=all` This will bring up the full working VDP backend, except the console you comment out at the second step.
 5. Clone the [console repo](https://github.com/instill-ai/console)
-6. Install yarn if you don’t have it, use `npm install` or `brew install yarn` if you have homebrew.
-7. Install all the dependencies, use `yarn install`.
+6. Install pnpm if you don’t have it, use `npm install -g pnpm` or `brew install pnpm` if you have homebrew.
+7. Install all the dependencies, use `pnpm install`.
 8. Make sure the environment variables in the `.env` file are correct. They should map one-to-one to the config of the VDP. By default they are
 
 ```
@@ -51,18 +51,18 @@ To setup the local dev environment with this repo, you need follow the below ste
 - NEXT_PUBLIC_API_VERSION=v1alpha
 ```
 
-9. You can now use `yarn dev` to run the local Next.js server if your VDP has been set up correctly, it should not have any error at the browser inspection window.
-10. If you want to build a docker container you could use `yarn docker:app:develop`.
+9. You can now use `pnpm dev` to run the local Next.js server if your VDP has been set up correctly, it should not have any error at the browser inspection window.
+10. If you want to build a docker container you could use `pnpm docker-compose-up`.
 
 # Available scripts
 
-- `yarn dev`: Set up the dev server for the Next.js app.
-- `yarn build`: Build a standalone server of Next.js app.
-- `yarn server`: Start a standalone server of the Next.js app you just built.
-- `yarn docker:app:develop`: Build the docker image of the Next.js app.
-- `yarn docker:prune-cache`: Prune all the cache you have (Be careful of this).
-- `yarn lint`: Lint the codebase.
-- `yarn storybook`: Bring up the storybook server.
+- `pnpm dev`: Set up the dev server for the Next.js app.
+- `pnpm build`: Build a standalone server of Next.js app.
+- `pnpm server`: Start a standalone server of the Next.js app you just built.
+- `pnpm docker-compose-up`: Build the docker image of the Next.js app.
+- `pnpm docker:prune-cache`: Prune all the cache you have (Be careful of this).
+- `pnpm lint`: Lint the codebase.
+- `pnpm storybook`: Bring up the storybook server.
 
 # Caveats
 

package.json

@@ -7,7 +7,7 @@
   "license": "Apache-2.0",
   "private": false,
   "scripts": {
-    "docker:app:develop": "cross-env DOCKER_BUILDKIT=1 docker-compose -f ./docker-compose_app.yml up --build --remove-orphans --force-recreate",
+    "docker-compose-up": "cross-env DOCKER_BUILDKIT=1 docker-compose -f ./docker-compose_app.yml up --build --remove-orphans --force-recreate",
     "docker:prune-cache": "docker buildx prune",
     "dev": "NODE_OPTIONS='--inspect' next dev",
     "build": "next build",
@@ -35,7 +35,6 @@
     "formik": "^2.2.9",
     "next": "^12.1.0",
     "next-mdx-remote": "^4.1.0",
-    "prismjs": "^1.28.0",
     "react": "^17.0.2",
     "react-code-blocks": "^0.0.9-0",
     "react-dom": "^17.0.2",

src/components/model/TestModelInstanceSection/TestModelInstanceSection.tsx

@@ -5,14 +5,14 @@ import {
   ProgressMessageBoxState,
 } from "@instill-ai/design-system";
 import cn from "clsx";
+import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
+import { CH } from "@code-hike/mdx/components";
 
-import { getCodeSourceQuery, ModelInstance } from "@/lib/instill";
+import { getCodeHikeTemplateSourceQuery, ModelInstance } from "@/lib/instill";
 import { Nullable } from "@/types/general";
 import { useAmplitudeCtx } from "@/contexts/AmplitudeContext";
 import { sendAmplitudeData } from "@/lib/amplitude";
 import { useTestModelInstance } from "@/services/model";
-import { CodeBlock } from "@/components/ui";
-import { highlightAll } from "prismjs";
 
 export type TestModelInstanceSectionProps = {
   modelInstance: Nullable<ModelInstance>;
@@ -25,14 +25,12 @@ const TestModelInstanceSection: FC<TestModelInstanceSectionProps> = ({
 }) => {
   const { amplitudeIsInit } = useAmplitudeCtx();
 
-  // ###################################################################
-  // #                                                                 #
-  // # Handle testing the model                                        #
-  // #                                                                 #
-  // ###################################################################
+  // ##########################################################################
+  // # Handle testing the model                                               #
+  // ##########################################################################
 
-  const [testResult, setTestResult] =
-    useState<Nullable<{ source: string; code: string }>>(null);
+  const [testResultCodeSource, setTestResultCodeSource] =
+    useState<Nullable<MDXRemoteSerializeResult>>(null);
 
   const [messageBoxState, setMessageBoxState] =
     useState<ProgressMessageBoxState>({
@@ -55,7 +53,7 @@ const TestModelInstanceSection: FC<TestModelInstanceSectionProps> = ({
       message: "Testing...",
     }));
 
-    setTestResult(null);
+    setTestResultCodeSource(null);
 
     testModelInstance.mutate(
       {
@@ -72,21 +70,19 @@ const TestModelInstanceSection: FC<TestModelInstanceSectionProps> = ({
           }));
 
           try {
-            const source = await getCodeSourceQuery(
-              "test-result-template.mdx",
-              "instilltestresult",
-              JSON.stringify(result, null, "\t")
-            );
-
-            setTestResult({
-              source,
-              code: JSON.stringify(result, null, "\t"),
+            const source = await getCodeHikeTemplateSourceQuery({
+              templateName: "test-result-template.mdx",
+              replaceRules: [
+                {
+                  match: "instillTestResult",
+                  replaceValue: JSON.stringify(result, null, "\t"),
+                },
+              ],
+              showCopyButton: true,
             });
-
-            highlightAll();
+            setTestResultCodeSource(source);
           } catch (err) {
-            console.log(err);
-            setTestResult(null);
+            setTestResultCodeSource(null);
           }
 
           if (amplitudeIsInit) {
@@ -97,7 +93,7 @@ const TestModelInstanceSection: FC<TestModelInstanceSectionProps> = ({
           }
         },
         onError: (error) => {
-          setTestResult(null);
+          setTestResultCodeSource(null);
           if (error instanceof Error) {
             setMessageBoxState(() => ({
               activate: true,
@@ -140,7 +136,9 @@ const TestModelInstanceSection: FC<TestModelInstanceSectionProps> = ({
           disabled={modelInstance?.state === "STATE_ONLINE" ? false : true}
         />
       </div>
-      {testResult ? <CodeBlock marginBottom="mb-10" {...testResult} /> : null}
+      {testResultCodeSource ? (
+        <MDXRemote {...testResultCodeSource} components={{ CH }} />
+      ) : null}
       <BasicProgressMessageBox
         state={messageBoxState}
         setState={setMessageBoxState}

src/lib/instill/helper/index.ts

@@ -1,5 +1,7 @@
+import { GetCodeHikeTemplateSourceProps } from "@/lib/markdown";
 import { Nullable } from "@/types/general";
 import axios from "axios";
+import { MDXRemoteSerializeResult } from "next-mdx-remote";
 
 export const getQueryString = (
   baseUrl: string,
@@ -24,18 +26,21 @@ export const getShikiSourceQuery = async (source: string) => {
   }
 };
 
-export const getCodeSourceQuery = async (
-  templateName: string,
-  match: string,
-  value: string
-) => {
+export type GetCodeHikeTemplateSourceQueryPayload =
+  GetCodeHikeTemplateSourceProps;
+
+export const getCodeHikeTemplateSourceQuery = async ({
+  templateName,
+  replaceRules,
+  showCopyButton,
+}: GetCodeHikeTemplateSourceQueryPayload) => {
   try {
-    const response = await axios.post("/api/get-code-source", {
+    const response = await axios.post("/api/get-code-hike-template-source", {
       templateName,
-      match,
-      value,
+      replaceRules,
+      showCopyButton,
     });
-    return Promise.resolve(response.data as string);
+    return Promise.resolve(response.data as MDXRemoteSerializeResult);
   } catch (err) {
     return Promise.reject(err);
   }

src/lib/markdown/README.md

@@ -1,8 +1,5 @@
 ## About lib/markdown
 
-!!! We had encountered some serious issue when using this method.
-https://github.com/EiffelFly/code-hike-remote-docker
-
 We will store stuff related to markdown, remark, mdx here.
 
 ### About how we utilize mdx, next-mdx-remote and code-hike.
@@ -70,4 +67,11 @@ const templateSource = await serialize(codeStr, {
 
 ## Caveat
 
-- Because mdx compiler can only run in server side, if client side need to dynamic change the value of code-block, you need to request `/api/get-template-code-block-mdx` api route to generate the mdx source.
+- Because mdx compiler can only run in server side, if client side need to dynamic change the value of code-block, you need to request `/api/get-code-hike-template-source` api route to generate the mdx source.
+- Because Shiki import languages and themes by fs, Next.js will tree-shake both languages and themes. We need to specific Next.js don't tree-shake these files by using unstable_includeFiles
+
+```js
+export const config = {
+  unstable_includeFiles: ["node_modules/.pnpm/**/shiki/**/*.json"],
+};
+```

src/lib/markdown/index.ts

@@ -8,11 +8,22 @@ import { remarkCodeHike } from "@code-hike/mdx";
  * with code-hike and rose-pine-moon theme
  */
 
-export const getTemplateCodeBlockMdx = async (
-  templateName: string,
-  match: string,
-  value: string
-) => {
+type ReplaceRule = {
+  match: string | RegExp;
+  replaceValue: string;
+};
+
+export type GetCodeHikeTemplateSourceProps = {
+  templateName: string;
+  replaceRules: ReplaceRule[];
+  showCopyButton: boolean;
+};
+
+export const getCodeHikeTemplateSource = async ({
+  templateName,
+  replaceRules,
+  showCopyButton,
+}: GetCodeHikeTemplateSourceProps) => {
   try {
     const templatePath = join(
       process.cwd(),
@@ -30,12 +41,17 @@ export const getTemplateCodeBlockMdx = async (
       )
     );
 
-    const template = fs.readFileSync(templatePath, { encoding: "utf-8" });
-    const codeStr = template.replaceAll(match, value);
+    let template = fs.readFileSync(templatePath, { encoding: "utf-8" });
+
+    replaceRules.forEach((e) => {
+      template = template.replace(new RegExp(e.match, "g"), e.replaceValue);
+    });
 
-    const templateSource = await serialize(codeStr, {
+    const templateSource = await serialize(template, {
       mdxOptions: {
-        remarkPlugins: [[remarkCodeHike, { autoImport: false, theme }]],
+        remarkPlugins: [
+          [remarkCodeHike, { autoImport: false, theme, showCopyButton }],
+        ],
         useDynamicImport: true,
       },
     });

src/lib/markdown/template/pipeline-code-template.mdx

@@ -1,7 +1,7 @@
 <CH.Code>
 
 ```sh cURL(url)
-curl -X POST http://localhost:8081/v1alpha/pipelines/instill-pipeline-id:trigger -d '{
+curl -X POST instillServerHostName/v1alpha/pipelines/instillPipelineId/trigger -d '{
   "inputs": [
     {
       "image_url": "https://artifacts.instill.tech/imgs/dog.jpg"
@@ -14,7 +14,7 @@ curl -X POST http://localhost:8081/v1alpha/pipelines/instill-pipeline-id:trigger
 ```
 
 ```sh cURL(base64)
-curl -X POST http://localhost:8081/v1alpha/pipelines/instill-pipeline-id:trigger -d '{
+curl -X POST instillServerHostName/v1alpha/pipelines/instillPipelineId/trigger -d '{
   "inputs": [
     {
       "image_base64": "/9j/4AAQSk...D/2Q=="
@@ -25,7 +25,7 @@ curl -X POST http://localhost:8081/v1alpha/pipelines/instill-pipeline-id:trigger
 ```
 
 ```sh cURL(multipart)
-curl -X POST http://localhost:8081/v1alpha/pipelines/instill-pipeline-id:trigger-multipart \
+curl -X POST instillServerHostName/v1alpha/pipelines/instillPipelineId/trigger-multipart \
 --form 'file=@"dog.jpg"' \
 --form 'file=@"horse.jpg"'
 ```

src/lib/markdown/template/test-result-template.mdx

@@ -1,3 +1,3 @@
 ```js
-instilltestresult
+instillTestResult;
 ```

src/pages/_app.tsx

@@ -7,7 +7,6 @@ import "../styles/global.css";
 import "../styles/github-markdown.css";
 import "@code-hike/mdx/dist/index.css";
 import "../styles/shiki.css";
-import "../styles/prism-rose-pine-moon.css";
 
 import "@instill-ai/design-system/build/index.cjs.css";
 import { useRouter } from "next/router";

src/pages/api/get-template-code-block-mdx.ts → src/pages/api/get-code-hike-template-source.ts

@@ -1,4 +1,4 @@
-import { getTemplateCodeBlockMdx } from "@/lib/markdown";
+import { getCodeHikeTemplateSource } from "@/lib/markdown";
 import { NextApiRequest, NextApiResponse } from "next";
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
@@ -13,18 +13,22 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     res.status(500).end(`templateName not provided`);
   }
 
-  if (!body.match) {
+  if (!body.replaceRules) {
     res.status(500).end(`match not provided`);
   }
 
-  if (!body.value) {
-    res.status(500).end(`value not provided`);
+  if (!body.showCopyButton) {
+    res.status(500).end(`match not provided`);
   }
 
-  const { templateName, match, value } = body;
+  const { templateName, replaceRules, showCopyButton } = body;
 
   try {
-    const source = await getTemplateCodeBlockMdx(templateName, match, value);
+    const source = await getCodeHikeTemplateSource({
+      templateName,
+      replaceRules,
+      showCopyButton,
+    });
     return res.status(200).json(source);
   } catch (err) {
     return res.status(500).json(err);