fix typo

Author: anthule123

public/book.pdf

@@ -25,7 +25,8 @@ export default async function Home(){
     return (
         <div className="">
             <LanguageSwitcher />
-            Có { cards.length} bài viết. 
+            Tải sách tại <ILink href='download-book'> Link tải sách</ILink>
+            <div>Có { cards.length} bài viết.</div> 
             {cards.map((card, index) => (
                 <div className="card" key = {`${index}`}>
                     <ILink href= {card.path}><h3>{card.metadata?.title}</h3>

src/app/[lang]/Home.tsx

@@ -0,0 +1,58 @@
+
+
+import style from '@/css/components/article.module.css';
+import path from "path";
+import Article from '../../components/Article';
+import { getAllDocPaths2 } from '../../blog/[...slug]/getAllDocPaths';
+
+
+type Params = {
+    slug: string[]
+}
+export async function generateStaticParams(): Promise<Params[]>{
+    const folderDir = path.join(process.cwd(), `src/content/blog`);
+    const paths =await getAllDocPaths2(folderDir);
+    
+    const result =  paths.map(
+        (pathArray: any ) => ({slug: pathArray}));
+    console.log(result);
+    if(!result || result.length===0){
+        return [{slug: ['not-found']}];
+    }
+    return result
+}
+export default async function BlogPage(
+    props: any
+) {
+
+    try{
+        //join slug array with '/'
+        const params = props.params;
+        const {slug: slugArray, lang: lang} = await params;
+        const decodeURISlugArray = slugArray.map(
+            (segment: any)=> (decodeURIComponent(segment))
+        )
+        const slugPath = decodeURISlugArray.join('/') 
+        const {default: Post, metadata} = await import(`@/content/blog/${slugPath}.mdx`)
+        if (lang==='en') {
+            const {default: PostEn, metadata} = await import(`@/content/blogen/${slugPath}.mdx`)
+            return (
+                <article className={style.article}>
+                    <PostEn/>
+                </article>
+            )
+        }  
+        return (<article className={style.article}>
+            <Post/>
+        </article>) 
+    }
+    catch(error){
+        console.error('Error loading this blog post') 
+        return (
+            <div className="">
+                <h1 className="">Error</h1>
+                <p className="">Sorry, there was an error loading this blog post.</p>
+            </div>
+        )
+    }
+}

src/app/[lang]/book/[...slug]/page.tsx

@@ -6,6 +6,8 @@ import puppeteer from 'puppeteer'
 import { FormState } from '@/types/form';
 import {PDFDocument, rgb, StandardFonts} from 'pdf-lib'
 import { getAllMdxNodes } from '../lib/getAllMdxNodes';
+import Cookies from 'js-cookie';
+
 export default async function bookAction(
   prevState: FormState,
   formData: FormData,
@@ -59,8 +61,9 @@ export async function generatePdfBook() {
   const filePaths = nodes.map((node: any) => (node.dir));
   let urls = nodes.map((node: any) => {
   let path = decodeURIComponent(node.path);
-  path = path.replace('blog', 'book')
-  return `http://localhost:3102${path}`})
+  path = path.replace('blog', 'book') 
+  const lang = Cookies.get('NEXT_LOCALE') || 'vi'; // fallback mặc định
+  return `http://localhost:3102/${lang}/${path}`})
   // urls = ['http://localhost:3102/blog/N%E1%BB%91/']
   const sections = await Promise.all(
     urls.map((url: any) => 

src/app/[lang]/download-book/bookAction.ts

@@ -23,7 +23,7 @@ export default async  function Page() {
           production/đọc ở web static sẽ ko hiển thị đc nút 
           này vì nút này chuyên dùng cho back end.
         </p>
-        <ILink
+        <Link
         //   href="/blog-book.pdf"
         href='/book.pdf'  
         download
@@ -38,7 +38,7 @@ export default async  function Page() {
           }}
         >
           📘 Download PDF Book
-        </ILink>
+        </Link>
       </div>
     );
   }

src/app/[lang]/download-book/page.tsx

@@ -1,14 +1,21 @@
+export const metadata = {
+    title: 'Giải bài toán nhảy cầu kính',
+    date: '2025-01-2',
+    last_modified_at: '2025-07-16',
+    tags: ['intro', 'draftkit']
+}
 
 # Overview 
-Draftkit là 1 cái mớ lộn xộn. Nó là 1 kho chứa các bài viết. 
 
+Draftkit là 1 cái mớ lộn xộn. Nó là 1 kho chứa các bài viết. 
 
+## Sơ lược về Draftkit 
 
-Các output:
+### Các output:
 - Trang web tĩnh 
 - Book pdf 
 
-Tính năng: 
+### Tính năng: 
 - Tính năng bình thường của 1 blog: 
     + Blog có các bài viết tạo bởi file mdx 
     + Có danh sách các bài viết theo thời gian
@@ -28,3 +35,26 @@ DraftKit có thể làm gì:
 - Lưu lại các bài viết theo cả dòng thời gian và cấu trúc 
 thư mục. 
 - Có thể in sách pdf từ input 1 list file mdx. 
+
+## Vài vấn đề về nó 
+
+### Tinh chỉnh trên Github pages 
+Build web tĩnh ở Github pages có nhiều cái phải tinh chỉnh 
+khá là trick so với build 1 trang web bình thường. 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/content/blog/1. Intro/0. Overview.mdx

@@ -38,7 +38,7 @@
 @media (min-width: 869px) {
   .container {
     display: grid;
-    grid-template-columns: auto 300px;
+    grid-template-columns: auto auto;
   }
 }
 

src/css/components/article.module.css

@@ -1,6 +1,5 @@
 a,
-button,
-div, details {
+button, details {
   font-family: var(--font-inter);
 }
 
@@ -19,6 +18,12 @@ li, span {
   font-family: var(--font-garamond);
 }
 
+details a, details {
+  font-family: var(--font-garamond);
+  font-size: 1.2rem;
+  font-weight: 400;
+}
+
 h1 {
   font-size: 2em;
   font-weight: bold;

src/css/globals.css

@@ -1,8 +1,7 @@
 @use "../abstract/colors" as color;
 
 a,
-button,
-div, details {
+button, details {
     font-family: var(--font-inter);
 }
 
@@ -20,6 +19,11 @@ ul,
 li ,span{
     font-family: var(--font-garamond);
 }
+details a, details{
+    font-family: var(--font-garamond);
+    font-size: 1.1rem;
+    font-weight: 400;
+}
 //size and weight
 
 h1 {

src/scss/base/_typo.scss

@@ -41,7 +41,7 @@
     @include display.center;
     @include adapts.desktop{
         display: grid; 
-        grid-template-columns: auto 300px;
+        grid-template-columns: auto auto;
     }
 }
 .toc{