Update tmpl landing page

2026-11-06 15:24:42 +07:00 · 2026-11-06 15:24:42 +07:00 · a37c55b9aa
commit a37c55b9aa
parent c8ae736cd5
11 changed files with 323 additions and 157 deletions
--- a/app/tmpl/page.tsx
+++ b/app/tmpl/page.tsx
@ -1,28 +1,43 @@
-// app/page.tsx (ระบบ B)
-'use client';
+// app/page.tsx
+import fs from 'fs';
+import path from 'path';
 import Link from "next/link";
-import type { ChangeEvent } from 'react';
-import DependentDropdown, { DropdownData } from '@/components/utils/DependentDropdown';
+import TmplHome from "@/components/TmplHome";
+import { DropdownData } from '@/components/utils/DependentDropdown';
 import {
-  Bookmark, ToyBrick, FilePenLine, BicepsFlexed, Rocket, Workflow, Files, Blocks, FileQuestionMark,
-  ExternalLink,
-  FileText,
-  Highlighter,
-  MessagesSquare,
+  ToyBrick, FilePenLine, Rocket, Workflow, NotepadTextDashed,
+  Files, Blocks, FileQuestionMark, ShieldLock, FileUp, GitMerge,
+  ExternalLink, FileText
 } from "lucide-react";

 export default function HomePage() {
-  const templateData: DropdownData = {
-    T_X: ['T_no_warning', 'TF_no_warning_P2', 'TS_P2_IN'],
-    T12_X: ['T12_b2_IN', 'T12_FD155_3s-long'],
-  };
-  const handleTmplSelect = (template: string, data: string) => {
-    //console.log('Location Selected:', { template, data });
-  };
-  const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
-    // console.log(e.target)
-    return true;
+  // อ่านไฟล์จากโฟลเดอร์ public/tmpl บน Server
+  const tmplDirectory = path.join(process.cwd(), 'public/tmpl');
+  let filenames: string[] = [];
+  
+  try {
+    filenames = fs.readdirSync(tmplDirectory);
+  } catch (error) {
+    console.error("ไม่พบโฟลเดอร์ public/tmpl", error);
  }
+
+  // กรองเฉพาะไฟล์ .docx และ .json
+  const docxFiles = filenames.filter(file => file.endsWith('.docx'));
+  const jsonFiles = filenames.filter(file => file.endsWith('.json'));
+
+  // สร้างโครงสร้างข้อมูลสำหรับ DependentDropdown แบบอัตโนมัติ (หรือปรับเงื่อนไขการจัดกลุ่มตามต้องการ)
+  // ตัวอย่างนี้จัดกลุ่มตามชื่อไฟล์ตั้งต้น
+  const templateData: DropdownData = {};
+  docxFiles.forEach(docx => {
+    const key = docx.replace('.docx', '');
+    // หาไฟล์ json ที่ชื่อขึ้นต้นตรงกันมาใส่เป็นตัวเลือกย่อย
+    const matchedJsons = jsonFiles
+      .filter(json => json.startsWith(key))
+      .map(json => json.replace('.json', ''));
+    
+    templateData[key] = matchedJsons.length > 0 ? matchedJsons : ['default'];
+  });
+
  return (
    <div style={{ padding: '2rem' }}>
      <div className="mx-auto max-w-4xl px-4 pb-16 pt-12 sm:px-6">
@ -30,71 +45,81 @@ export default function HomePage() {
          DOCEDIT Template & Add-ins
        </h1>
        <p className="mt-2 text-body text-ink-soft">
-          ระบบเทมเพลตเพื่อสร้างเอกสาร MS Word และจัดการรุ่นของเอกสารผ่าน Word Add-ins ยุคใหม่ แบบอิสระ ที่สามารถ Integrate กับระบบความปลอดภัยของระบบอื่นๆได้
+          ชุดพัฒนาระบบสร้างเอกสาร docx จากข้อมูลและเทมเพลต นำไปแก้ไขจัดหน้าต่อบน MS Word โดยที่ข้อมูลในฟอร์มเอกสารสามารถสะกัดออกมาใช้งานต่อได้ ควบคุมรุ่นของเอกสารด้วย Add-ins สามารถผสานกับระบบงานเดิมได้แบบไร้รอยต่อ
        </p>

+        {/* ส่วนเนื้อหาคงที่ (Features, Flow, Add-ins) */}
        <section className="mt-10">
          <div className="border-b border-line pb-3">
            <h2 className="font-display text-section-title text-ink">
-              ระบบนี้ทำอะไรได้
+              คุณสมบัติของระบบ
            </h2>
          </div>
          <div className="mt-5 grid gap-5 sm:grid-cols-2">
            {[
              {
                icon: FileText,
-                title: "DOCX Template",
+                title: "ออกแบบเทมเพลตด้วย Microsoft Word",
                detail:
-                  "ออกแบบหน้าของเอกสารจาก Microsoft Word โดยไม่ต้องใช้เครื่องมือพิเศษ " +
-                  "สามารถนำเอกสารตัวเดิมมาใช้ออกแบบได้ทันที " +
-                  "ไม่จำเป็นต้องมีทักษะการเขียนโปรแกรมก็สามารถสร้างเทมเพลตได้ด้วยตัวเอง",
+                  "สร้างเทมเพลตเอกสารได้ง่าย ๆ ด้วย Microsoft Word เครื่องมือที่ทุกคนคุ้นเคย " +
+                  "ไม่จำเป็นต้องติดตั้งโปรแกรมเพิ่มเติมหรือเรียนรู้เครื่องมือเฉพาะทาง สามารถนำเอกสาร Word ที่มีอยู่เดิมมาปรับใช้เป็นเทมเพลตได้ทันที " +
+                  "ไแม้ไม่มีทักษะด้านการเขียนโปรแกรม ก็สามารถออกแบบและสร้างเทมเพลตเอกสารได้ด้วยตนเอง ",
+              },
+              {
+                icon: NotepadTextDashed,
+                title: "รองรับเอกสารที่มีเงื่อนไขซับซ้อน",
+                detail:
+                  "รองรับการสร้างเอกสารที่มีโครงสร้างและเงื่อนไขซับซ้อน ไม่ว่าจะเป็นข้อมูลจำนวนไม่แน่นอน การแสดงผลตามเงื่อนไข " +
+                  "หรือการจัดรูปแบบเนื้อหาแบบไดนามิก สามารถเพิ่มชุดคำสั่งและเขียนโปรแกรมลงในเทมเพลตได้ เช่น FOR, IF, " +
+                  "การแทรกโค้ด และฟังก์ชันเพิ่มเติม พร้อม API สำหรับนักพัฒนา เพื่อทดสอบการสร้างเอกสารจากเทมเพลต DOCX ร่วมกับชุดข้อมูล JSON ได้อย่างสะดวก "
              },
              {
                icon: FilePenLine,
-                title: "Fill Form",
+                title: "เปลี่ยนเอกสาร Word ให้เป็นแบบฟอร์มอัจฉริยะ",
                detail:
-                  "รอรับ Rich และ Plain Text Content Control " +
-                  "สามารถสร้างฟอร์มสำหรับกรอกข้อมูลจากไฟล์ docx " +
-                  "สามารถใช้ API ดึงข้อมูลในฟอร์มกลับมาเพื่อนำไปใช้งานต่อ เช่นเก็บในฐานข้อมูลได้",
+                  "รองรับ Rich Text และ Plain Text Content Controls ใน Microsoft Word " +
+                  "สามารถนำไฟล์ DOCX มาสร้างเป็นแบบฟอร์มสำหรับกรอกข้อมูลได้ทันที โดยไม่ต้องเสียเวลาออกแบบฟอร์มใหม่บน " +
+                  "Web Application พร้อม API สำหรับดึงข้อมูลที่ผู้ใช้กรอกกลับมาในรูปแบบ JSON เพื่อนำไปประมวลผล "+
+                  "จัดเก็บลงฐานข้อมูล หรือเชื่อมต่อกับกระบวนการทำงานอื่น ๆ ได้อย่างยืดหยุ่น ",
              },
              {
                icon: ToyBrick,
-                title: "Integration",
+                title: "เชื่อมต่อระบบงานเดิมได้อย่างอิสร",
                detail:
-                  "ระบบทำงานเป็นอิสระแบบ Microservice ใช้ API Key เพื่อจำกัดการใช้งาน สามารถออกบัตรผ่านที่ลงลายเซ็นต์ด้วย HmacSha256" +
-                  "เพื่อให้ผสาน(Integrate)กับระบบงานที่มีอยู่เดิม ได้อย่างปลอดภัย" +
-                  "เพื่อให้ผสานกับระบบงานอื่นๆ ได้อย่างปลอดภัย",
+                  "ออกแบบให้ทำงานเป็นระบบอิสระ สามารถเชื่อมต่อกับระบบงานที่มีอยู่เดิมผ่าน API ได้อย่างยืดหยุ่น รองรับการออก Access Token " + 
+                  "สำหรับกำหนดสิทธิ์และควบคุมการเข้าถึง โดยไม่จำเป็นต้องพึ่งพาระบบ Single Sign-On (SSO) " +
+                  "หรือเชื่อมต่อเข้าถึงฐานข้อมูลของระบบงานเดิม ช่วยลดความซับซ้อนในการบูรณาการระบบและเพิ่มความคล่องตัวในการพัฒนา ",
              },
              {
-                icon: FileText,
-                title: "Dynamic Template",
+                icon: GitMerge,
+                title: "จัดการเวอร์ชันเอกสารอย่างเป็นระบบ",
                detail:
-                  "รองรับเทมเพลตที่ซับซ้อน ข้อมูลที่มีจำนวนไม่แน่นอน การแสดงผลตามเงื่อนไขแบบต่างๆ " +
-                  "สามารถเขียนโปรแกรมเพิ่มลงในเทมเพลตได้ รองรับ FOR , IF แทรกโค้ด " +
-                  "ฟังก์ชั่นเพื่อสร้าง Content Control Bookmark ฯลฯ" +
-                  "มี API ช่วยนักพัฒนาสร้างเอกสารจากเทมเพลต(DOCX)และข้อมูล(JSON) "
+                  "รองรับการจัดเก็บและบริหารจัดการเวอร์ชันของเอกสารร่วมกันผ่าน Microsoft Word Add-ins " +
+                  "สามารถบันทึกเวอร์ชันใหม่ เรียกดูประวัติการแก้ไข และเรียกคืนเวอร์ชันที่ต้องการกลับมาแก้ไขต่อได้ " +
+                  "ช่วยให้การทำงานร่วมกันเป็นระบบ ลดความสับสนจากการจัดเก็บไฟล์หลายฉบับ และสามารถตรวจสอบย้อนกลับไปยังเวอร์ชันก่อนหน้าได้",
              },
              {
                icon: Rocket,
-                title: "Versioning",
+                title: "ประสิทธิภาพสูง พร้อมรองรับการขยายระบบ",
                detail:
-                  "จัดการ Veresion(รุ่น)ของเอกสารร่วมกันได้ผ่าน Microsoft Word Add-ins " +
-                  "สามารถดึง Veresion ที่ต้องการกลับมาแก้ไขได้ ",
+                  "พัฒนาด้วยสถาปัตยกรรมแบบ Container รองรับการขยายระบบ (Scalability) ได้อย่างยืดหยุ่น " +
+                  "กระบวนการสร้างเอกสารจากเทมเพลตทำงานแบบ Multi-threading สามารถใช้ประโยชน์จาก CPU หลายแกนประมวลผลพร้อมกัน " +
+                  "รองรับการจัดเก็บไฟล์ผ่าน Object Storage ที่มีความยืดหยุ่นและรองรับการขยายพื้นที่จัดเก็บ ช่วยเพิ่มประสิทธิภาพและรองรับปริมาณงานที่เพิ่มขึ้นในอนาคต ",
              },
              {
-                icon: Rocket,
-                title: "High Performance",
+                icon: FileUp,
+                title: "ส่งออก PDF ด้วยรูปแบบที่ตรงกับต้นฉบับ",
                detail:
-                  "containerization ขยายระบบได้ง่าย " +
-                  "การสร้าง template ทำงานแบบ Multi-Thread รองรับ CPU หลายแกน " +
-                  "เก็บไฟล์ใน Object Storage มีความทนทานและรับโหลดได้หนัก",
+                  "สร้างไฟล์ PDF โดยอัตโนมัติทุกครั้งที่บันทึกเวอร์ชันเอกสาร ผ่าน Microsoft Word โดยตรง ทำให้รูปแบบและการจัดวางหน้าของ PDF " +
+                  "สอดคล้องกับเอกสารต้นฉบับ ลดปัญหาความคลาดเคลื่อนของรูปแบบเอกสารจากความแตกต่างของ Microsoft Office แต่ละเวอร์ชัน " +
+                  "นอกจากนี้ยังประมวลผลบนเครื่องผู้ใช้งาน (Client-side Processing) ช่วยลดภาระการประมวลผลและการใช้ทรัพยากรของเซิร์ฟเวอร์",
              },
              {
-                icon: Rocket,
-                title: "PDF Export",
+                icon: ShieldLock,
+                title: "ปลอดภัยด้วยมาตรฐานการสื่อสารและการควบคุมการเข้าถึง",
                detail:
-                  "ทุกครั้งที่ Save Veresion จะสร้าง PDF อัตโนมัติในด้วย MS Word ทำให้ได้เค้าโครงของหน้าตรงกับเอกสารที่แก้ไข " +
-                  "โดยไม่เกิดปัญหาความผิดเพี้ยนของ PDF ที่ใช้ MS Office ต่างเวอร์ชั่นในการแปลง ประมวลผลที่ไคลเอนต์ลดการใช้ทรัพยากรที่เซิร์ฟเวอร์",
+                  "ให้ความสำคัญกับความปลอดภัยของข้อมูล ด้วยการเข้ารหัสการสื่อสารผ่าน HTTPS และควบคุมการเข้าถึงไฟล์ด้วย Access Token " +
+                  "ที่ผ่านการลงลายมือชื่อดิจิทัลด้วย HMAC-SHA256 ช่วยป้องกันการปลอมแปลง Token และจำกัดการเข้าถึงทรัพยากรตามสิทธิ์ที่ได้รับ ลดความเสี่ยงจากการเข้าถึงข้อมูลโดยไม่ได้รับอนุญาต",

              },
            ].map(({ icon: Icon, title, detail }) => (
@ -114,97 +139,41 @@ export default function HomePage() {
              </div>
            ))}
          </div>
+
        </section>

+
+        {/* ส่วนตัวอย่างการใช้งานที่ต้องการให้อัปเดตอัตโนมัติ */}
        <section className="mt-10">
          <div className="border-b border-line pb-3">
            <h2 className="font-display text-section-title text-ink">
              ตัวอย่างการใช้งาน
            </h2>
          </div>
+          
+          <TmplHome templateData={templateData} />
+
+
+
+        </section>
+        <section className="mt-10">
          <div className="mt-5 grid gap-5 sm:grid-cols-2">
-
            <div className="flex gap-4 rounded-xl border border-line bg-white p-6">
              <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/[0.08] text-primary">
-                <ExternalLink className="h-5 w-5" aria-hidden />
+                <FileQuestionMark className="h-5 w-5" aria-hidden />
              </span>
              <div>
-                <h3 className="font-display text-subhead text-ink">Link (GET)</h3>
+                <h3 className="font-display text-subhead text-ink">วิธีการใช้งาน</h3>
                <p className="mt-1.5 text-sm leading-relaxed text-ink-soft">
-
-                  <a href="/docedit/api/template/download-docx?tid=T_X&fid=T_no_warning&uid=john&uname=John%20Doe">T_no_warning_john_xxx.docx</a><br />
-                  <a href="/docedit/api/template/download-docx?tid=T_X&fid=TF_no_warning_P2&uid=john&uname=John%20Doe">TF_no_warning_P2_john_xxx.docx</a><br />
-                  <a href="/docedit/api/template/download-docx?tid=T_X&fid=TS_P2_IN&uid=john&uname=John%20Doe">TS_P2_IN_john_xxx.docx</a><br />
-
-                  <a href="/docedit/api/template/download-docx?tid=T12_X&fid=T12_b2_IN&uid=john&uname=John%20Doe">T12_b2_IN_john_xxx.docx</a><br />
-                  <a href="/docedit/api/template/download-docx?tid=T12_X&fid=T12_FD155_3s-long&uid=john&uname=John%20Doe">T12_FD155_3s-long_john_xxx.docx</a><br />
-
+                  <a target="_blank" href="https://www.youtube.com/watch?v=QxMitSk3S4E" className="text-primary transition hover:underline">
+                    แนะนำเทมเพลตของ Docedit เบื้องต้น</a><br />
+                  <a target="_blank" href="https://www.youtube.com/watch?v=kOBoVN-KQzU" className="text-primary transition hover:underline">
+                    ติดตั้ง MS Word Add-ins</a><br />
+                  <a target="_blank" href="https://www.youtube.com/watch?v=P1-xe24nOUo" className="text-primary transition hover:underline">
+                    ใช้งาน DOCEDIT Add-ins</a><br />
                </p>
              </div>
            </div>
-
-            <div className="flex gap-4 rounded-xl border border-line bg-white p-6">
-              <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/[0.08] text-primary">
-                <Files className="h-5 w-5" aria-hidden />
-              </span>
-              <div>
-                <h3 className="font-display text-subhead text-ink">Template & Data</h3>
-                <p className="mt-1.5 text-sm leading-relaxed text-ink-soft">
-                  <b>Template: </b><Link href="/tmpl/T_X.docx">T_X.docx</Link>, &nbsp;
-                  <Link href="/tmpl/T12_X.docx">T12_X.docx</Link><br />
-                  <b>Data: </b><Link href="tmpl/TF_no_warning_P2.json">TF_no_warning_P2.json</Link>, &nbsp;
-                  <Link href="/tmpl/T_no_warning.json">T_no_warning.json</Link>, &nbsp;
-                  <Link href="/tmpl/TS_P2_IN.json">TS_P2_IN.json</Link><br />
-                  <Link href="/tmpl/T12_b2_IN.json">T12_b2_IN.json</Link>, &nbsp;
-                  <Link href="/tmpl/T12_FD155_3s-long.json">T12_FD155_3s-long.json</Link>
-                  <br />
-                  นำไฟล์ไปทดสอบกับ <Link href="/api/swagger/" target="_top">API</Link>
-
-                </p>
-              </div>
-            </div>
-
-            <div className="flex gap-4 rounded-xl border border-line bg-white p-6">
-              <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/[0.08] text-primary">
-                <FilePenLine className="h-5 w-5" aria-hidden />
-              </span>
-              <div>
-                <h3 className="font-display text-subhead text-ink">Form (POST)</h3>
-                <div className="mt-1.5 text-sm leading-relaxed text-ink-soft">
-
-                  <form action="/docedit/api/template/download-docx" method="POST">
-                    <DependentDropdown data={templateData} name1='tid' name2='fid'
-                      label1="Template(tid):" label2="ข้อมูล(fid):" onSelectChange={handleTmplSelect} />
-                    <div className="mb-2"></div>
-                    <div>
-                      <label htmlFor="uid">uid: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                        <input type="text" name="uid" className="p-2 mb-2 border border-gray-300 rounded-md" defaultValue="john" />
-                      </label>
-                    </div>
-                    <div>
-                      <label htmlFor="uname">uname:
-                        <input type="text" name="uname" className="p-2 mb-2  border border-gray-300 rounded-md" defaultValue="John Doe" />
-                      </label>
-                    </div>
-                    <button
-                      type="submit"
-                      style={{
-                        padding: '10px 20px',
-                        backgroundColor: '#0070f3',
-                        color: '#fff',
-                        border: 'none',
-                        borderRadius: '5px',
-                        cursor: 'pointer',
-                      }}
-                    >
-                      ดาวน์โหลดเอกสาร MS Word
-                    </button>
-                  </form>
-
-                </div>
-              </div>
-            </div>
-
            <div className="flex gap-4 rounded-xl border border-line bg-white p-6">
              <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/[0.08] text-primary">
                <Workflow className="h-5 w-5" aria-hidden />
@ -212,7 +181,7 @@ export default function HomePage() {
              <div>
                <h3 className="font-display text-subhead text-ink">Flow</h3>
                <div className="mt-1.5 text-sm leading-relaxed text-ink-soft">
-                  <div className="text-xl font-bold text-center">
+                  <div className="text-center">
                    ลิงค์เลือกไฟล์<br />
                    &darr; <br />
                    ตรวจสิทธิ์ สร้าง docx <br />
@ -229,25 +198,11 @@ export default function HomePage() {
              </div>
            </div>

-            <div className="flex gap-4 rounded-xl border border-line bg-white p-6">
-              <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/[0.08] text-primary">
-                <FileQuestionMark className="h-5 w-5" aria-hidden />
-              </span>
-              <div>
-                <h3 className="font-display text-subhead text-ink">วิธีการใช้งาน</h3>
-                <p className="mt-1.5 text-sm leading-relaxed text-ink-soft">
-                  <a target="_blank" href="https://www.youtube.com/watch?v=QxMitSk3S4E" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
-                    แนะนำเทมเพลตของ Docedit เบื้องต้น</a><br />
-                  <a target="_blank" href="https://www.youtube.com/watch?v=kOBoVN-KQzU" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
-                    ติดตั้ง MS Word Add-ins</a>
-                  <a target="_blank" href="https://www.youtube.com/watch?v=P1-xe24nOUo" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
-                    ใช้งาน DOCEDIT Add-ins</a>
-                </p>
-              </div>
-            </div>

          </div>
+          
        </section>
+
        <section className="mt-10">
          <div className="border-b border-line pb-3">
            <h2 className="font-display text-section-title text-ink">
@ -262,22 +217,25 @@ export default function HomePage() {
              <h3 className="font-display text-subhead text-ink">
                Word Add-ins<br />
              </h3>
-              <p className="mt-1.5 text-sm leading-relaxed text-ink-soft">
-                การติดตั้งสามารถติดตั้งได้หลายวิธี
+              <div className="mt-1.5 text-sm leading-relaxed text-ink-soft">
+                การนำไปเผยแพร่สามารถติดตั้งได้หลายวิธี (แนะนำ Shared Folder Sideloading)
                <ol>
-                  <li>1. ติดตั้งผ่าน Office Store (วิธีทั่วไปสำหรับผู้ใช้ทั่วไป)</li>
-                  <li>2. Sideloading ด้วยไฟล์ <Link target="_blank" href="/wordaddin/manifest.xml" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
+                  <li>1. ติดตั้งผ่าน Office Store การเผยแพร่ต้องสมัครบัญชีนักพัฒนาใช้ Microsoft Partner Center ลงทะเบียนในโปรแกรม Office Store</li>
+                  <li>2. การติดตั้งระดับองค์กร (ผ่าน Microsoft 365 Admin Center) ทำตาม
+                    <a target="_blank" className="text-primary transition hover:underline" href="https://www.youtube.com/watch?v=KB_KRfAfJzY">
+                    วีดีโอนี้</a></li>
+                  <li>3. Sideloading ด้วยไฟล์ <Link target="_blank" href="/wordaddin/manifest.xml" className="text-primary transition hover:underline">
                    manifest.xml </Link>(Office 365) Insert&gt;Add-ins&gt;My Add-ins คลิ้ก "Upload My Add-in"</li>
-                  <li>3. Shared Folder Sideloading(Office 2019+) นำไฟล์ <Link target="_blank" href="/wordaddin/manifest.xml" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
-                    manifest.xml </Link>&nbsp;ไปทำตามวีดีโอ <a target="_blank" href="https://www.youtube.com/watch?v=kOBoVN-KQzU" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
+                  <li>4. Shared Folder Sideloading(Office 2019+ รุ่นเดสท็อป) นำไฟล์ <Link target="_blank" href="/wordaddin/manifest.xml" className="text-primary transition hover:underline">
+                    manifest.xml </Link>&nbsp;ไปทำตามวีดีโอ <a target="_blank" href="https://www.youtube.com/watch?v=kOBoVN-KQzU" className="text-primary transition hover:underline">
                      ติดตั้ง MS Word Add-ins</a> </li>
-                  <li>4. ใช้คำสั่ง reg.exe ร่วมกับ <Link target="_blank" href="/wordaddin/manifest.xml" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
-                    manifest.xml </Link>&nbsp;ไปทำตามวีดีโอ <a target="_blank" href="https://www.youtube.com/watch?v=kOBoVN-KQzU" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
+                  <li>5. นักพัฒนา ใช้คำสั่ง reg.exe ร่วมกับ <Link target="_blank" href="/wordaddin/manifest.xml" className="text-primary transition hover:underline">
+                    manifest.xml </Link>&nbsp;ไปทำตามวีดีโอ <a target="_blank" href="https://www.youtube.com/watch?v=kOBoVN-KQzU" className="text-primary transition hover:underline">
                      ติดตั้ง MS Word Add-ins</a> </li>
-                  <li>5. สคริปต์ PowerShell(Dev Install)
-                    <Link href="/wordaddin/install-word-addins.ps1" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
-                      install-word-addins.ps1</Link>&nbsp;
-                    แล้วเรียกคำสั่งด้านล่างเพื่อติดตั้ง<br />
+                  <li>6. นักพัฒนาสร้างสคริปต์  
+                    <Link href="/wordaddin/install-word-addins.ps1" className="text-primary transition hover:underline">
+                      install-word-addins.ps1 (เรียกใช้ reg.exe)</Link>&nbsp;
+                    สำหรับ Power Shell จะต้องให้สิทธิ์ในการเรียกใช้ สามารถเรียกคำสั่งด้านล่างเพื่อติดตั้ง<br />
                    <br />
                    <b className="whitespace-nowrap">Unblock-File .\install-word-addins.ps1</b><br />
                    <b className="whitespace-nowrap">Set-ExecutionPolicy -Scope Process -ExecutionPolicy RemoteSigned -Force</b><br />
@ -290,16 +248,17 @@ export default function HomePage() {
                  ด้วยข้อกำหนดของ TOR ให้รองรับ Word 2019(Desktop) บนวินโดว์ 10 เป็นขั้นต่ำ ทำให้ถูกจำกัดที่ WordApi 1.3 เท่านั้น
                  ฟึเจอร์บางอย่างบน Add-ins จะถูกจำกัดตามความสามารถตามรุ่นของ WordApi การทดสอบต่างๆตามที่กำหนดใน TOR
                  <br />
-                  สำหรับ Microsoft Office เวอร์ชันขายขาดแบบเก่า (เช่น Office 2016, 2019 หรือ 2021) จะไม่มีปุ่มอัปโหลดไฟล์ XML
+                  สำหรับ Microsoft Office เวอร์ชันขายขาดแบบเก่า (เช่น Office 2016, 2019, 2021 หรือ 2024) จะไม่มีปุ่มอัปโหลดไฟล์ XML
                  บนหน้าต่างเมนูโดยตรงเหมือน Microsoft 365 หากต้องการติดตั้งไฟล์ manifest.xml ในรุ่นดังกล่าว
-                  จำเป็นต้องใช้วิธีแชร์โฟลเดอร์เครือข่าย (Shared Folder Sideloading)
+                  นะนำให้ใช้วิธีแชร์โฟลเดอร์เครือข่าย (Shared Folder Sideloading) หรือผ่าน Microsoft 365 Admin Center
                  <br />
                </i>
-              </p>
+              </div>
            </div>
          </div>
        </section>

+
      </div>
    </div>
  );