storybook amp

Buku cerita amp html ·

Addon buku cerita untuk AMP (halaman seluler yang dipercepat). Memungkinkan untuk menampilkan dalam cerita Anda komponen HTML yang dihasilkan dengan React.

Daftar isi

• Fitur
• Demo
• Memulai
  • Instalasi
  • Konfigurasi
  • Penggunaan
  • Contoh
• Peta jalan
• Berkontribusi
• Lisensi
• Ucapan Terima Kasih
• Tautan

Fitur

• Kirim di setiap cerita kode output (AMP Ready) yang dihasilkan dari SSR.
• Bekerja dengan situs web AMP, email AMP dan iklan AMP
• Validasi AMP Realtime.
• Tambahkan Panel Addon untuk juga memvalidasi cerita (menggunakan validator AMP online) dan lihat kode output.
• Komponen gaya dukungan menggunakan fungsi render khusus

Demo

• Buku cerita amp html demo

Memulai

Instalasi

npm install -D storybook-amp

Konfigurasi

Selanjutnya, perbarui .storybook/main.js ke yang berikut:

 // .storybook/main.js

module . exports = {
  stories : [
    // ...
  ] ,
  addons : [
    // Other Storybook addons

    'storybook-amp' , // ? The addon registered here
  ] ,
} ;

Penggunaan

Untuk mengatur pengaturan khusus, gunakan parameter amp .

 // .storybook/preview.js

const scripts = '' ;
const styles = '' ;

export const parameters = {
  // Other defined parameters

  amp : {              // ? The addon parameters here
    isEnabled : true ,  // Enable the addon, false by default (boolean)
    scripts ,          // Global scripts to add, empty by default (string)
    styles ,           // Custom css styles, empty by default (string)
  } ,
} ;

Anda dapat menggunakan parameter amp untuk mengganti pengaturan pada setiap cerita secara individual:

 // Story example

export default {
  title : "Components/amp-youtube" ,
  parameters : {
    amp : {
      scripts : // ? Script needed by the story
        `<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>` ,
    } ,
  } ,
} ;

export const Story = ( args ) => (
  < amp-youtube
    width = "480"
    height = "270"
    layout = "responsive"
    data-videoid = 'lBTCB7yLs8Y'
  > </ amp-youtube >
)

Contoh

• Bereaksi

Peta jalan

• Membuatnya kompatibel dengan addon kromatik
• Membuatnya kompatibel dengan addon aksesibilitas
• Sesuaikan detail UI saat digunakan dengan addon docs
• Lebih banyak alat untuk iklan AMP dan email amp
• Tambahkan lebih banyak contoh tes
• Tambahkan tes
• Memungkinkan integrasi CI

Berkontribusi

Storybook Amp HTML Addon adalah proyek open-source. Kami berkomitmen untuk proses pengembangan yang sepenuhnya transparan dan sangat menghargai kontribusi apa pun. Apakah Anda membantu kami memperbaiki bug, mengusulkan fitur -fitur baru, meningkatkan dokumentasi kami atau menyebarkan berita - kami akan senang memiliki Anda sebagai bagian dari komunitas.

Silakan merujuk ke Pedoman Kontribusi dan Kode Etik kami.

Lisensi

Buku cerita AMP HTML Addon dilisensikan di bawah lisensi MIT - lihat file lisensi untuk detailnya.

Ucapan Terima Kasih

Awalnya dibuat oleh OnWidget dan dikelola oleh komunitas kontributor.

Tautan

• Proyek amp
• AMP yang luar biasa