#DOC-009: update Vitest docs (#116)

* chore: fix mispeliing

* install shiki

* feat: code highlighter from shiki

* import CodeBlock

* doc: simple tests section

* style: shiki styling

* fix: wrong file ext

* fix: misspell on filename

* fix: import filename

package.json

@@ -55,6 +55,7 @@
     "eslint-config-next": "14.2.14",
     "jsdom": "^25.0.1",
     "postcss": "^8.4.47",
+    "shiki": "^1.23.1",
     "tailwindcss": "^3.4.1",
     "typescript": "^5",
     "vitest": "^2.1.2",

src/components/Documents/CodeBlock.tsx

@@ -0,0 +1,41 @@
+import { useTheme } from "@/hooks/useTheme";
+import { useEffect, useState } from "react";
+import { codeToHtml } from "shiki";
+
+export default function CodeBlock({
+  code,
+  lang,
+}: {
+  code: string;
+  lang: string;
+}) {
+  const { theme } = useTheme();
+  const [htmlOutput, setHtmlOutput] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchCode = async () => {
+      try {
+        const out = await codeToHtml(code, {
+          lang: lang || "plaintext",
+          themes: {
+            dark: "houston",
+            light: "one-light",
+          },
+        });
+        setHtmlOutput(out);
+      } catch (error) {
+        console.error("Failed to generate code block HTML:", error);
+        setHtmlOutput(null);
+      }
+    };
+
+    fetchCode();
+  }, [code, theme, lang]);
+
+  return (
+    <div
+      className="my-5 shiki-codeblock"
+      dangerouslySetInnerHTML={{ __html: htmlOutput || "" }}
+    />
+  );
+}

src/pages/release.mdx

@@ -8,13 +8,13 @@
 - Update Shadcn's installation folder
 
 ## v1.2.13 -> v1.2.14
-- Fixbugs
+- Fix bugs
 
 ## v1.2.12
-- Allow users to choose to install Prisma or not when scaffold nextjs template
+- Allow users to choose to install Prisma or not when scaffolding nextjs template
 
 ## v1.2.11
-- Install lint-staged for nextjs tempplate
+- Install lint-staged for nextjs template
 
 ## v1.2.10
 - Remove turbopack from nextjs template

src/pages/tech/vitest.mdx

@@ -1,5 +1,6 @@
 import Code from "../../components/Documents/Code"
 import HighlightedText from "../../components/Documents/HighlightedText"
+import CodeBlock from "../../components/Documents/CodeBlock.tsx"
 
 # Vitest
 
@@ -25,6 +26,27 @@ Vitest offers several advantages that make it a compelling choice for developers
 
 By choosing Vitest, developers can enjoy a powerful, efficient, and modern testing experience that aligns with contemporary development practices.
 
+## Simple test
+
+In this example, we will write a very simple test in order to verify output from a function: 
+
+<CodeBlock lang="ts" code={
+`// sum.ts
+export function sum(a: number, b: number) { 
+    return a + b 
+}`
+} />
+
+<CodeBlock lang="ts" code={
+`// sum.test.ts
+import { expect, it } from 'vitest'
+import { sum } from './sum.ts'
+
+it('should return 3 when adding 1 and 2', () => {
+    expect(sum(1, 2)).toBe(3)
+})`
+} />
+
 ## Official Documents
 
 For furthur information or instructions, please visit Vitest's official websites:

src/styles/nextra.css

@@ -1,12 +1,31 @@
 :root {
   --nextra-primary-hue: -213deg;
   --nextra-primary-saturation: 80%;
+  --shiki-codeblock-bg: #fff;
 }
 
 .dark {
   --nextra-primary-hue: 167deg;
+  --shiki-codeblock-bg: #000;
 }
 
 body {
   font-family: "Kanit", sans-serif;
 }
+
+.shiki-codeblock pre {
+  padding: 1rem;
+  border-radius: 1rem;
+  background-color: var(--shiki-codeblock-bg) !important;
+  overflow: auto;
+}
+
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}