@increments/qiita-slide-mode

@increments/qiita-slide-mode Qiita's Slide Mode component for Hyperapp.

Table of Contents

• Installation
• Usage
• Styles
• Options
  • Properties
    • contentClass?: string
    • theme?: string
  • Example
• License

Installation

npm i @increments/qiita-slide-mode

Usage

import { h, app } from "hyperapp"
import { SlideViewer, slide } from "@increments/qiita-slide-mode"

const state = {
  article: {
    body: [
      `<h1>First Slide</h1><p>This is the first slide.</p>`,
      `<h1>Second Slide</h1><p>This is the second slide.</p>`
    ]
  },
  slide: slide.state
}

const actions = {
  slide: slide.actions
}

const view = (state, actions) => (
  <SlideViewer
    state={state.slide}
    actions={actions.slide}
    pages={state.article.body}
  />
)

app(state, actions, view, document.body)

Styles

@import "@increments/qiita-slide-mode/src/styles/vars";
@import "@increments/qiita-slide-mode/src/styles/core";

Options

Properties

contentClass?: string

• Default markdownContent

Markdown body content CSS class name.

theme?: string

• Default null

Color scheme theme suffix.

Example

const option = {
  contentClass: "your-class",
  theme: "your-theme"
}

const view = (state, actions) => (
  <SlideViewer
    state={state.slide}
    actions={actions.slide}
    pages={state.article.body}
    option={option}
  />
)

See inside the example directory for a working demo.

License

@increments/qiita-slide-mode is MIT licensed. See LICENSE.