[시작하기] 클라이언트와 서버 문서 추가

.github/workflows/deploy.yml

@@ -17,12 +17,34 @@ jobs:
       - name: Checkout your repository using git
         uses: actions/checkout@v4
 
-      - name: Install, build, and upload your site
-        uses: withastro/action@v2
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v3
+        with:
+          version: 'latest'
+
+      - name: Setup Node
+        uses: actions/setup-node@v4z
         with:
-          path: .
           node-version: 18
-          package-manager: pnpm@latest
+          cache: pnpm
+          cache-dependency-path: pnpm-lock.yaml
+
+      - name: Install
+        shell: bash
+        run: pnpm install
+
+      - name: Install playwright
+        shell: bash
+        run: npx playwright-core install --with-deps chromium
+
+      - name: Build
+        shell: bash
+        run: pnpm run build
+
+      - name: Upload Pages Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "./dist/"
 
   deploy:
     needs: build

README.md

@@ -22,5 +22,6 @@
 ### 실행
 ```bash
 pnpm install
+npx playwright-core install --with-deps chromium
 pnpm run dev
 ```

astro.config.mjs

@@ -1,10 +1,15 @@
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
 import tailwind from '@astrojs/tailwind';
+import rehypeMermaid from 'rehype-mermaid';
+import { rehypeMermaidOptions } from './src/plugins/rehype-mermaid';
 
 // https://astro.build/config
 export default defineConfig({
 	base: process.env.BASE_URL || '/dsm-freshman-guide/',
+	markdown: {
+		rehypePlugins: [[rehypeMermaid, rehypeMermaidOptions]],
+	},
 	integrations: [
 		starlight({
 			title: 'DSM 신입생 가이드',
@@ -43,5 +48,5 @@ export default defineConfig({
 			customCss: ['./src/tailwind.css'],
 		}),
 		tailwind({ applyBaseStyles: true }),
-	],
+	]
 });

package.json

@@ -15,6 +15,9 @@
     "@astrojs/starlight-tailwind": "^2.0.3",
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.8.6",
+    "playwright": "^1.44.1",
+    "playwright-core": "^1.44.1",
+    "rehype-mermaid": "^2.1.0",
     "sharp": "^0.32.5",
     "tailwindcss": "^3.4.1"
   }