storybook amp

Storybook Amp Html ·

Storybook Addon für AMP (beschleunigte mobile Seiten). Ermöglicht die Anzeige in Ihren Geschichten -AMP -HTML -Komponenten, die mit React erzeugt wurden.

Inhaltsverzeichnis

• Merkmale
• Demo
• Erste Schritte
  • Installation
  • Konfiguration
  • Verwendung
  • Beispiele
• Roadmap
• Beitragen
• Lizenz
• Anerkennung
• Links

Merkmale

• Liefern Sie in jeder Geschichte den Ausgabescode (AMP Ready), der aus der SSR resultiert.
• Arbeitet mit AMP -Websites, AMP -E -Mails und AMP -Anzeigen
• Echtzeitverstärker -Validierung.
• Fügt Addon Panel hinzu, um auch die Geschichte (mit dem Online -AMP -Validator) zu validieren und den Ausgabescode anzuzeigen.
• Unterstützen Sie gestaltete Komponenten mithilfe einer benutzerdefinierten Renderfunktion

Demo

• Storybook AMP HTML Demo

Erste Schritte

Installation

npm install -D storybook-amp

Konfiguration

Als nächstes aktualisieren Sie .storybook/main.js zu Folgendem:

 // .storybook/main.js

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

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

Verwendung

Um benutzerdefinierte Einstellungen festzulegen, verwenden Sie den amp -Parameter.

 // .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)
  } ,
} ;

Sie können den amp -Parameter verwenden, um Einstellungen in jeder Geschichte einzeln zu überschreiben:

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

Beispiele

• Reagieren

Roadmap

• Machen Sie es mit dem chromatischen Addon kompatibel
• Machen Sie es mit dem ADGAVIERTIFITIBIERTE -Addon kompatibel
• Passen Sie die UI -Details an, wenn Sie mit DOCS -Addon verwendet werden
• Weitere Tools für AMP -Anzeigen und AMP -E -Mails
• Fügen Sie weitere Beispieltests hinzu
• Fügen Sie Tests hinzu
• CI -Integration ermöglichen

Beitragen

Storybook AMP HTML Addon ist ein Open-Source-Projekt. Wir verpflichten uns für einen vollständig transparenten Entwicklungsprozess und schätzen alle Beiträge. Egal, ob Sie uns helfen, Fehler zu reparieren, neue Funktionen vorzuschlagen, unsere Dokumentation zu verbessern oder das Wort zu verbreiten - wir würden gerne Sie als Teil der Community haben.

Weitere Informationen zu unseren Beitragsrichtlinien und unseren Verhaltenskodex.

Lizenz

Das Storybook AMP HTML Addon ist unter der MIT -Lizenz lizenziert - Einzelheiten finden Sie in der Lizenzdatei.

Anerkennung

Ursprünglich von Onwidget erstellt und von einer Community von Mitwirkenden gepflegt.

Links

• Amp -Projekt
• Toller Verstärker