storybook amp

Libro de cuentos AMP HTML ·

Storybook Addon para AMP (páginas móviles aceleradas). Permite mostrar en sus historias componentes HTML AMP generados con React.

Tabla de contenido

• Características
• Manifestación
• Empezando
  • Instalación
  • Configuración
  • Uso
  • Ejemplos
• Hoja de ruta
• Que contribuye
• Licencia
• Expresiones de gratitud
• Campo de golf

Características

• Entregue en cada historia el código de salida (amplio listo) resultante de la SSR.
• Funciona con sitios web de AMP, correo electrónico de AMP y anuncios de AMP
• Validación de AMP en tiempo real.
• Agrega el panel Addon para validar también la historia (usando el validador de AMP en línea) y ver el código de salida.
• Soporte de componentes de estilo utilizando una función de renderizado personalizado

Manifestación

• Storybook amp html demostración

Empezando

Instalación

npm install -D storybook-amp

Configuración

A continuación, actualice .storybook/main.js a lo siguiente:

 // .storybook/main.js

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

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

Uso

Para establecer la configuración personalizada, use el parámetro 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)
  } ,
} ;

Puede usar el parámetro amp para anular la configuración de cada historia individualmente:

 // 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 >
)

Ejemplos

• Reaccionar

Hoja de ruta

• Hazlo compatible con el complemento cromático
• Hazlo compatible con el complemento de accesibilidad
• Ajuste los detalles de la interfaz de usuario cuando se usa con Docs Addon
• Más herramientas para anuncios de AMP y correo electrónico de AMP
• Agregar más pruebas de ejemplo
• Agregar pruebas
• Hacer posible la integración de CI

Que contribuye

Storybook AMP HTML Addon es un proyecto de código abierto. Estamos comprometidos con un proceso de desarrollo totalmente transparente y apreciamos altamente cualquier contribución. Ya sea que nos esté ayudando a arreglar errores, proponiendo nuevas características, mejorando nuestra documentación o difundir la palabra, nos encantaría tenerlo como parte de la comunidad.

Consulte nuestras pautas de contribución y código de conducta.

Licencia

El complemento HTML de Storybook AMP tiene licencia bajo la licencia MIT; consulte el archivo de licencia para obtener más detalles.

Expresiones de gratitud

Inicialmente creado por OnWidget y mantenido por una comunidad de contribuyentes.

Campo de golf

• Proyecto AMP
• Amper impresionante