frontpage

Situs web buku cerita

Storybook adalah penjelajah komponen UI paling populer! Ini adalah situs web untuk https://storybook.js.org/.

Catatan : Ini bukan dokumen, yang terletak di sini.

? Berkontribusi

Kontribusi Selamat Datang! Jika itu sesuatu yang kecil seperti tata bahasa atau tanda baca, buka permintaan tarik. Jika ini adalah perubahan yang lebih besar atau fitur baru, tambahkan masalah untuk diskusi.

Alur kerja

1. Ide fitur atau perbaikan bug?
2. Bangun UI baru atau tweak UI yang ada di buku cerita terlebih dahulu
3. Integrasi dengan Gatsby
4. Pastikan tes lulus dalam buku cerita/frontpage lingkaran CI
5. Pastikan situs berfungsi dan dibandingkan dengan pratinjau netlify
6. Pastikan tidak ada bug visual dalam buku cerita/frontpage kromatik
7. Permintaan tarik

Menjalankan proyek secara lokal

Instruksi buku cerita

Buku cerita untuk buku cerita berisi setiap komponen UI. UI dibangun pengembangan yang digerakkan oleh komponen, suatu proses yang membangun UI dari "bottom up" yang dimulai dengan komponen dan diakhiri dengan layar. Itu berarti kontributor harus menyusun UI dalam buku cerita sebelum berintegrasi dengan aplikasi Gatsby.

1. Instalasi benang
2. Bangun benang
3. Buku Story Beting Run

Instruksi Gatsby

Gatsby digunakan untuk routing dasar dan pembuatan situs statis.

1. yarn start menjalankan seluruh situs

2. yarn start:skip-addons Untuk Melewati Membangun Katalog Addon

3. yarn start:docs-only untuk mengejek halaman beranda dan membangun halaman dokumen

Konten dokumen

Konten untuk bagian dokumentasi ada di docs/ subdirektori buku cerita Monorepo: https://github.com/storybookjs/storybook/tree/next/docs.

Untuk menjalankan aplikasi ini saat mengedit file -file itu, periksa repositori ini dan monorepo, lalu:

Di dalam storybook Monorepo:

1. Jalankan perintah yarn task dan kemudian pilih opsi Synchronize documentation (sync-docs) .

2. Berikan jalur ke proyek frontpage .

Dengan ini, storybook/docs folder dan frontpage/src/content/docs akan disinkronkan, memastikan bahwa setiap perubahan yang dilakukan pada dokumentasi dalam buku cerita monorepo akan tercermin dalam dokumen situs web buku cerita.

Di dalam repositori frontpage :

Untuk menjalankan dokumentasi situs web, gunakan perintah berikut:

 yarn start:docs-only

Proyek ini akan divisualisasikan di browser di http://localhost:8000

Catatan Rilis

Catatan rilis disimpan di direktori SRC/Content/Rilis sebagai file .md . Nama file sesuai dengan versi (Major.minor) dari rilis dan akan digunakan untuk mengisi tautan ke rilis spesifik dari halaman rilis.

Dalam file .md rilis, FrontMatter digunakan untuk membuat judul halaman, sedangkan sisa konten diuraikan menggunakan gatsby-transformer-remark dan ditata dengan selektor di src/styles/formatting.js .

Menerbitkan versi baru

Lihat dokumen terperinci

Variabel Lingkungan

Dalam pengembangan dan dengan pembuatan produksi lokal, variabel lingkungan dapat dikonfigurasi dengan file .env seperti yang dijelaskan di sini. Variabel diawali dengan GATSBY_ ketika variabel itu harus tersedia dalam kode sisi klien.

Dalam penyebaran pratinjau dan penyebaran produksi, variabel -variabel ini ditetapkan dengan variabel build Netlify.

Mencari

Pencarian di dalam dokumen didukung oleh DocSearch. Agar ini berfungsi, variabel lingkungan diperlukan:

GATSBY_ALGOLIA_API_KEY

Cara Mengatur pada Mesin Anda:

1. Buat file .env.development secara lokal
2. Dapatkan kunci di sini: https://app.netlify.com/sites/storybook-frontpage/settings/deploys#environment
3. Tambahkan GATSBY_ALGOLIA_API_KEY=key ke file dari langkah 1

Situs ini dirangkak setiap 24 jam sehingga setiap pembaruan akan tercermin dalam jumlah waktu itu.

Posting Blog

Posting blog terbaru diambil dari Ghost. Anda perlu menambahkan agar ini berfungsi, variabel lingkungan diperlukan:

GHOST_STORYBOOK_API_KEY

Cara Mengatur pada Mesin Anda:

1. Buat file .env.development secara lokal
2. Dapatkan kunci di sini: https://storybookblog.ghost.io/ghost
3. Tambahkan GHOST_STORYBOOK_API_KEY=key ke file dari Langkah 1

Perkakas

Proyek ini menggunakan alat ini untuk membuat pekerjaan kita lebih mudah.

? Menyebarkan oleh Netlify

Utama dan cabang secara otomatis digunakan oleh netlify setiap komit.

? Pengujian visual dengan berwarna

Semua cerita dalam buku cerita secara otomatis diuji visual di desktop dan mobile setiap komit. Pastikan semua garis dasar ✅ diterima sebelum bergabung.

? Integrasi Berkelanjutan oleh Circle CI

Setiap build sebuah suite tes berjalan. Pastikan tidak ada kesalahan sebelum bergabung.