frontpage

เว็บไซต์หนังสือนิทาน

หนังสือนิทานเป็น Exponer UI Component ที่ได้รับความนิยมมากที่สุด! นี่คือเว็บไซต์สำหรับ https://storybook.js.org/

หมายเหตุ : นี่ไม่ใช่เอกสารที่อยู่ที่นี่

- การบริจาค

ยินดีต้อนรับผลงาน! หากมันมีอะไรเล็ก ๆ เช่นไวยากรณ์หรือเครื่องหมายวรรคตอนให้เปิดคำขอดึง หากเป็นการเปลี่ยนแปลงที่ใหญ่กว่าหรือคุณสมบัติใหม่ให้เพิ่มปัญหาสำหรับการสนทนา

เวิร์กโฟลว์

1. ไอเดียคุณสมบัติหรือข้อผิดพลาด?
2. สร้าง UI ใหม่หรือปรับแต่ง UI ที่มีอยู่ในนิทานก่อน
3. รวมเข้ากับ Gatsby
4. ตรวจสอบให้แน่ใจว่าการทดสอบผ่านใน Circle CI Books/Frontpage
5. ตรวจสอบให้แน่ใจว่าไซต์ทำงานและมี QAED ผ่านตัวอย่าง NetLify
6. ตรวจสอบให้แน่ใจว่าไม่มีข้อบกพร่องทางสายตาในหนังสือนิทาน/หน้าแรก
7. ดึงคำขอ

ดำเนินโครงการในพื้นที่

คำแนะนำหนังสือนิทาน

หนังสือนิทานสำหรับหนังสือนิทานมีองค์ประกอบ UI ทุกชิ้น UI ถูกสร้างขึ้นตามการพัฒนาที่ขับเคลื่อนด้วยส่วนประกอบซึ่งเป็นกระบวนการที่สร้าง UIs จาก“ ล่างขึ้นบน” เริ่มต้นด้วยส่วนประกอบและลงท้ายด้วยหน้าจอ นั่นหมายถึงผู้มีส่วนร่วมควรเขียน UIs ในนิทาน ก่อนที่ จะรวมเข้ากับแอพ Gatsby

1. การติดตั้งเส้นด้าย
2. การสร้างเส้นด้าย
3. นิทานแนวเส้นด้าย

คำแนะนำ Gatsby

Gatsby ใช้สำหรับการกำหนดเส้นทางพื้นฐานและการสร้างไซต์คงที่

1. yarn start เรียกใช้เว็บไซต์ทั้งหมด

2. yarn start:skip-addons เพื่อข้ามการสร้างแคตตาล็อก Addon

3. yarn start:docs-only เพื่อเยาะเย้ยหน้าแรกและสร้างหน้าเอกสาร

เนื้อหาเอกสาร

เนื้อหาสำหรับส่วนเอกสารอยู่ใน docs/ ไดเรกทอรีย่อยของหนังสือนิทาน Monorepo: https://github.com/storybookjs/storybook/tree/next/docs

ในการเรียกใช้แอพนี้ในขณะที่แก้ไขไฟล์เหล่านั้นชำระเงินทั้งที่เก็บนี้และ monorepo จากนั้น:

ภายใน storybook Monorepo:

1. เรียกใช้คำสั่ง yarn task จากนั้นเลือกตัวเลือก Synchronize documentation (sync-docs)

2. จัดเตรียมเส้นทางไปยังโครงการ frontpage

ด้วยวิธีนี้ storybook/docs และ frontpage/src/content/docs จะถูกซิงโครไนซ์เพื่อให้มั่นใจว่าการเปลี่ยนแปลงใด ๆ ที่เกิดขึ้นกับเอกสารในนิทาน Monorepo จะสะท้อนให้เห็นในเอกสารเว็บไซต์นิทาน

ภายในที่เก็บ frontpage :

ในการเรียกใช้เอกสารของเว็บไซต์ให้ใช้คำสั่งต่อไปนี้:

 yarn start:docs-only

โครงการจะถูกมองเห็นในเบราว์เซอร์ที่ http://localhost:8000

บันทึกย่อ

หมายเหตุการเปิดตัวจะถูกเก็บไว้ในไดเรกทอรี SRC/Content/Releases เป็นไฟล์. .md ชื่อของไฟล์สอดคล้องกับเวอร์ชัน (major.minor) ของการเปิดตัวและจะถูกใช้เพื่อเติมลิงก์ไปยังรีลีสเฉพาะจากหน้าเผยแพร่

ภายในไฟล์ .md ของรุ่น Frontmatter ใช้เพื่อสร้างชื่อหน้าในขณะที่ส่วนที่เหลือของเนื้อหาจะถูกแยกวิเคราะห์โดยใช้ gatsby-transformer-remark และสไตล์ด้วยตัวเลือกใน src/styles/formatting.js

เผยแพร่เวอร์ชันใหม่

ดูเอกสารโดยละเอียด

ตัวแปรสภาพแวดล้อม

ในการพัฒนาและด้วยการสร้างการผลิตในท้องถิ่นตัวแปรสภาพแวดล้อมสามารถกำหนดค่าได้ด้วยไฟล์ .env ตามที่อธิบายไว้ที่นี่ ตัวแปรจะถูกนำหน้าด้วย GATSBY_ เมื่อตัวแปรนั้นจำเป็นต้องมีอยู่ในรหัสฝั่งไคลเอ็นต์

ในการปรับใช้ตัวอย่างและการปรับใช้การผลิตตัวแปรเหล่านี้ถูกตั้งค่าด้วยตัวแปรบิลด์ของ NetLify

ค้นหา

การค้นหาภายในเอกสารนั้นใช้พลังงานจาก Docsearch เพื่อให้สิ่งนี้ต้องทำงานจำเป็นต้องมีตัวแปรสภาพแวดล้อม:

GATSBY_ALGOLIA_API_KEY

วิธีการตั้งค่าบนเครื่องของคุณ:

1. สร้างไฟล์. env.development ในเครื่อง
2. รับคีย์ที่นี่: https://app.netlify.com/sites/storybook-frontpage/settings/deploys#environment
3. เพิ่ม GATSBY_ALGOLIA_API_KEY=key ไปยังไฟล์จากขั้นตอนที่ 1

ไซต์ถูกรวบรวมข้อมูลทุก 24 ชั่วโมงดังนั้นการอัปเดตใด ๆ จะสะท้อนให้เห็นในเวลานั้น

โพสต์บล็อก

โพสต์บล็อกล่าสุดถูกดึงมาจาก Ghost คุณจะต้องเพิ่มเพื่อให้สิ่งนี้ทำงานได้จำเป็นต้องมีตัวแปรสภาพแวดล้อม:

GHOST_STORYBOOK_API_KEY

วิธีการตั้งค่าบนเครื่องของคุณ:

1. สร้างไฟล์. env.development ในเครื่อง
2. รับคีย์ที่นี่: https://storybookblog.ghost.io/ghost
3. เพิ่ม GHOST_STORYBOOK_API_KEY=key ไปยังไฟล์จากขั้นตอนที่ 1

การใช้เครื่องมือ

โครงการนี้ใช้เครื่องมือเหล่านี้เพื่อให้งานของเราง่ายขึ้น

- ปรับใช้โดย netlify

หลักและสาขาจะถูกปรับใช้โดยอัตโนมัติโดย netlify ทุกการกระทำ

- การทดสอบด้วยภาพด้วยสี

เรื่องราวทั้งหมดในนิทานจะถูกทดสอบโดยอัตโนมัติบนเดสก์ท็อปและมือถือแต่ละครั้ง ตรวจสอบให้แน่ใจว่ามีเส้นเขตแดนทั้งหมดได้รับการยอมรับก่อนที่จะรวมเข้าด้วยกัน

- การรวมอย่างต่อเนื่องโดย Circle CI

ทุกการสร้างชุดทดสอบจะทำงาน ตรวจสอบให้แน่ใจว่าไม่มีข้อผิดพลาดก่อนที่จะรวม