🦹ผู้ช่วยพัฒนา

สำหรับเพื่อนๆที่สนใจอยากช่วยพัฒนาให้ตัวเว็บสลัดผักมีความสามารถแจ่มๆ หรือ ช่วยจัดการ Issues ต่างๆ ก็สามารถเข้ามาร่วมขบวนกันอุ๊งๆได้เลยครับ 😽

ภาพจาก Microsoft Copilot

---

😅ให้ช่วยไยหร๋า

ประเด็นต่างๆที่ผองเพื่อนแมวน้ำส่งมาทั้งหมดนั้นจะเข้ามาจาก Github Issues เพียงช่องทางเดียวเยย เช่น เสนอไอเดียใหม่ๆ ขอความช่วยเหลือ ติดปัญหา บลาๆ ซึ่งกระป๋มขอสารภาพว่าตัวป๋มเพียงลำพังคงจะไม่สามารถทำทั้งหมดได้เองครับ ซึ่งหากเพื่อนๆคนไหนพอมีเวลาที่จะช่วยผลักดันสังคมแห่งการแบ่งปันที่ชื่อว่าสลัดผักนี้ได้ ดช.แมวน้ำ ก็ขอขอบพระคุณเป็นอย่างสูงครับ 🙇🙇‍♂️🙇‍♀️

รายละเอียดการรันโปรเจคอยู่ใน README.md

note

การติดตามงานและรายละเอียดต่างๆทั้งหมดจะใช้ Github เป็นหลักนะครับ

📦การสร้าง React Components

เว็บสลัดผักถูกสร้างมาจาก Docusaurus ซึ่งสามารถนำไฟล์ Markdown มา render แสดงผลได้เลย แถมยังสามารถผสม React component ร่วมเข้ามาได้ด้วย โดยเวทมนต์เบื้องหลังนี้คือ MDX เช่น การสร้าง custom component เพื่อทำไฮไลท์สี ตามโค้ดตัวอย่างด้านล่าง

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`You clicked the color ${color} with label ${children}`)
    }}>
    {children}
  </span>
);

<Highlight color="#25c2a0">Green</Highlight> and <Highlight color="#1877F2">Blue</Highlight>

ผลลัพท์

Green and Blue