├── .npmignore
├── .prettierrc
├── renovate.json
├── postcss.config.js
├── .browserslistrc
├── src
    ├── types
    │   ├── shims-vue.d.ts
    │   ├── vue-component-wrapper.d.ts
    │   ├── shims-tsx.d.ts
    │   └── item.ts
    ├── utils
    │   ├── sanitizer.ts
    │   ├── getSlideCursor.ts
    │   ├── http.ts
    │   └── parser.ts
    ├── development.ts
    ├── main.ts
    ├── components
    │   ├── SlideViewer.vue
    │   ├── ErrorView.vue
    │   ├── LoadingView.vue
    │   ├── SlideControl.vue
    │   └── LoadingIndicator.vue
    ├── Kamishibai.vue
    └── DevApp.vue
├── tests
    └── unit
    │   └── utils
    │       └── getSlideCursor.spec.ts
├── .gitignore
├── vue.config.js
├── public
    └── index.html
├── jest.config.js
├── tsconfig.json
├── LICENSE
├── CHANGELOG.md
├── package.json
└── README.md


/.npmignore:
--------------------------------------------------------------------------------
1 | tests/
2 | public/
3 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "config:base"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | last 2 Chrome versions
2 | > 2.5%
3 | not ie <= 12
4 | Firefox >= 61
5 | Edge >= 17
6 | 


--------------------------------------------------------------------------------
/src/types/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import Vue from 'vue'
3 |   export default Vue
4 | }
5 | 


--------------------------------------------------------------------------------
/src/utils/sanitizer.ts:
--------------------------------------------------------------------------------
1 | import xss from 'xss'
2 | 
3 | export function sanitizeAllTags(html: string): string {
4 |   return xss(html)
5 | }
6 | 


--------------------------------------------------------------------------------
/src/types/vue-component-wrapper.d.ts:
--------------------------------------------------------------------------------
1 | declare module '@vue/web-component-wrapper' {
2 |   export default function wrap(Vue: any, Component: any): any
3 | }
4 | 


--------------------------------------------------------------------------------
/src/utils/getSlideCursor.ts:
--------------------------------------------------------------------------------
1 | export function getSlideCursor(
2 |   pageLength: number,
3 |   elementWidth: number,
4 |   clientX: number
5 | ) {
6 |   return ~~((clientX / elementWidth) * pageLength) + 1
7 | }
8 | 


--------------------------------------------------------------------------------
/src/development.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import DevApp from './DevApp.vue'
 3 | 
 4 | Vue.config.productionTip = false
 5 | Vue.config.errorHandler = () => {
 6 | 
 7 | }
 8 | 
 9 | new Vue({
10 |   render: h => h(DevApp)
11 | }).$mount('#app')
12 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | const { default: wrap } = require('@vue/web-component-wrapper')
3 | const { default: Kamishibai } = require('./Kamishibai.vue?shadow')
4 | 
5 | window.customElements.define('kamishibai-viewer', wrap(Vue, Kamishibai))
6 | 


--------------------------------------------------------------------------------
/tests/unit/utils/getSlideCursor.spec.ts:
--------------------------------------------------------------------------------
1 | import { getSlideCursor } from "@/utils/getSlideCursor";
2 | 
3 | describe('getSlideCursor.ts', () => {
4 |   test('getSlideCursor', () => {
5 |     expect(getSlideCursor(20, 520, 0)).toBe(1)
6 |     expect(getSlideCursor(20, 520, 519)).toBe(20)
7 |   })
8 | })
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/src/types/shims-tsx.d.ts:
--------------------------------------------------------------------------------
 1 | import Vue, { VNode } from 'vue'
 2 | 
 3 | declare global {
 4 |   namespace JSX {
 5 |     // tslint:disable no-empty-interface
 6 |     interface Element extends VNode {}
 7 |     // tslint:disable no-empty-interface
 8 |     interface ElementClass extends Vue {}
 9 |     interface IntrinsicElements {
10 |       [elem: string]: any
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const pkg = require('./package.json')
 2 | let baseUrl = '/'
 3 | 
 4 | if (process.env.BUILD_TYPE === 'lib') {
 5 |   baseUrl = `/kamishibai-viewer/dist/${pkg.version}/`
 6 | }
 7 | 
 8 | if (process.env.BUILD_TYPE === 'app') {
 9 |   baseUrl = `/kamishibai-viewer/`
10 | }
11 | 
12 | if (process.env.VUE_TEST === '1') {
13 |   baseUrl = baseUrl.replace('/kamishibai-viewer/', '/')
14 | }
15 | 
16 | module.exports = {
17 |   baseUrl
18 | }
19 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 7 |     <title>Kamishibai - Web Component based Qiita slide viewer built with Vue.js(Vue CLI v3)</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <!-- built files will be auto injected -->
12 |     <!-- <kamishibai-viewer itemid="4ff5873776992f0511d6"></kamishibai-viewer> -->
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   moduleFileExtensions: [
 3 |     'js',
 4 |     'json',
 5 |     'vue',
 6 |     'ts'
 7 |   ],
 8 |   transform: {
 9 |     '^.+\\.vue$': 'vue-jest',
10 |     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
11 |     '^.+\\.tsx?$': 'ts-jest'
12 |   },
13 |   moduleNameMapper: {
14 |     '^@/(.*)$': '<rootDir>/src/$1'
15 |   },
16 |   snapshotSerializers: [
17 |     'jest-serializer-vue'
18 |   ],
19 |   testMatch: [
20 |     '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
21 |   ],
22 |   testURL: 'http://localhost/'
23 | }
24 | 


--------------------------------------------------------------------------------
/src/utils/http.ts:
--------------------------------------------------------------------------------
 1 | import { Item } from '../types/item'
 2 | 
 3 | interface Option {
 4 |   token: string
 5 | }
 6 | 
 7 | export async function fetchItem(id: string, option?: Option) {
 8 |   let config = {}
 9 |   const token = (option || ({} as Option)).token
10 |   if (token) {
11 |     config = {
12 |       headers: {
13 |         authorization: `Bearer ${token}`
14 |       }
15 |     }
16 |   }
17 |   try {
18 |     const res = await fetch(`https://qiita.com/api/v2/items/${id}`, config)
19 |     const data = (await res.json()) as Item
20 |     return data
21 |   } catch (e) {
22 |     throw new Error()
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "esModuleInterop": true,
10 |     "downlevelIteration": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "sourceMap": true,
13 |     "baseUrl": ".",
14 |     "types": [
15 |       "webpack-env",
16 |       "jest"
17 |     ],
18 |     "paths": {
19 |       "@/*": [
20 |         "src/*"
21 |       ]
22 |     },
23 |     "lib": [
24 |       "esnext",
25 |       "dom",
26 |       "dom.iterable",
27 |       "scripthost"
28 |     ]
29 |   },
30 |   "include": [
31 |     "src/**/*.ts",
32 |     "src/**/*.vue",
33 |     "tests/**/*.ts",
34 |   ],
35 |   "exclude": [
36 |     "node_modules"
37 |   ]
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/SlideViewer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="slideMode-Viewer" @click="handleClickViewer">
 3 |     <div class="slideMode-Viewer_content"><div v-html="pages[page]"></div></div>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import Vue from 'vue'
 9 | 
10 | export default Vue.extend({
11 |   props: {
12 |     pages: Array as () => string[],
13 |     page: Number,
14 |     option: Object
15 |   },
16 |   methods: {
17 |     handleClickViewer(event: MouseEvent) {
18 |       const target = event.target! as HTMLElement
19 |       const currentTarget = event.currentTarget! as HTMLElement
20 |       if (['A', 'IMG'].includes(target.tagName)) {
21 |         return
22 |       }
23 |       const rect = currentTarget.getBoundingClientRect()
24 |       if (event.clientX - rect.left > rect.width / 2) {
25 |         this.$emit('next')
26 |       } else {
27 |         this.$emit('prev')
28 |       }
29 |     }
30 |   }
31 | })
32 | </script>
33 | 


--------------------------------------------------------------------------------
/src/types/item.ts:
--------------------------------------------------------------------------------
 1 | export interface Item {
 2 |   rendered_body: string
 3 |   body: string
 4 |   coediting: boolean
 5 |   comments_count: number
 6 |   created_at: string
 7 |   group?: null
 8 |   id: string
 9 |   likes_count: number
10 |   private: boolean
11 |   reactions_count: number
12 |   tags?: (TagsEntity)[] | null
13 |   title: string
14 |   updated_at: string
15 |   url: string
16 |   user: User
17 |   page_views_count?: null
18 | }
19 | 
20 | export interface TagsEntity {
21 |   name: string
22 |   versions?: (null)[] | null
23 | }
24 | 
25 | export interface User {
26 |   description: string
27 |   facebook_id: string
28 |   followees_count: number
29 |   followers_count: number
30 |   github_login_name: string
31 |   id: string
32 |   items_count: number
33 |   linkedin_id: string
34 |   location: string
35 |   name: string
36 |   organization: string
37 |   permanent_id: number
38 |   profile_image_url: string
39 |   team_only: boolean
40 |   twitter_screen_name: string
41 |   website_url: string
42 | }
43 | 


--------------------------------------------------------------------------------
/src/components/ErrorView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="slideMode-error">
 3 |     <div class="slideMode-error_body">{{ errorReason || 'error' }}</div>
 4 |     <SlideControl :option="option" :page="0" :pages="['']" :disable="true" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import Vue from 'vue'
10 | import SlideControl from './SlideControl.vue'
11 | 
12 | export default Vue.extend({
13 |   props: {
14 |     errorReason: String,
15 |     option: Object
16 |   },
17 |   components: {
18 |     SlideControl
19 |   }
20 | })
21 | </script>
22 | 
23 | <style lang="scss" scoped>
24 | .slideMode-error {
25 |   width: 100%;
26 |   height: 480px;
27 |   display: flex;
28 |   align-items: center;
29 |   justify-content: center;
30 |   flex-direction: column;
31 |   color: #fff;
32 |   background: #d4645c;
33 |   font-weight: bold;
34 |   border-radius: 3px;
35 |   overflow: hidden;
36 | }
37 | 
38 | .slideMode-error_body {
39 |   width: 100%;
40 |   height: 430px;
41 |   display: flex;
42 |   align-items: center;
43 |   justify-content: center;
44 |   font-size: 18px;
45 | }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/utils/parser.ts:
--------------------------------------------------------------------------------
 1 | import { Item } from '@/types/item'
 2 | import { sanitizeAllTags } from './sanitizer'
 3 | 
 4 | export function parseItem(item: Item): string[] {
 5 |   const doc = new DOMParser().parseFromString(item.rendered_body, 'text/html')
 6 |   const elements = doc.querySelectorAll('html > body > *')
 7 |   const sections = [firstPage(item)]
 8 |   for (let el of elements) {
 9 |     if (
10 |       ['H1', 'H2'].includes(el.tagName) ||
11 |       el.classList.contains('footnotes')
12 |     ) {
13 |       sections.push('')
14 |     }
15 |     if (el.tagName === 'HR') {
16 |       sections.push('')
17 |       continue
18 |     }
19 |     sections[sections.length - 1] = `${sections[sections.length - 1]}${
20 |       el.outerHTML
21 |     }`
22 |   }
23 |   return sections.filter(section => section)
24 | }
25 | 
26 | const firstPage = (item: Item) => `
27 | <div class="slideMode-Viewer_content slideMode-Viewer_content--firstSlide markdownContent">
28 |   <h1>${sanitizeAllTags(item.title)}</h1>
29 |   <div class="slideMode-Viewer_content--firstSlideAuthor">
30 |     by ${sanitizeAllTags(item.user.id)}
31 |   </div>
32 | </div>
33 | `
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 HANATANI Takuma (@potato4d)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Change Log
 2 | 
 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 4 | 
 5 | <a name="1.0.6"></a>
 6 | ## [1.0.6](https://github.com/potato4d/kamishibai-viewer/compare/v1.0.5...v1.0.6) (2019-01-08)
 7 | 
 8 | 
 9 | 
10 | <a name="1.0.5"></a>
11 | ## [1.0.5](https://github.com/potato4d/kamishibai-viewer/compare/v1.0.3...v1.0.5) (2019-01-08)
12 | 
13 | 
14 | 
15 | <a name="1.0.0"></a>
16 | ## [1.0.0](https://github.com/potato4d/kamishibai/compare/v0.1.0...v1.0.0) (2019-01-08)
17 | 
18 | <a name="0.1.1"></a>
19 | ## [0.1.1](https://github.com/potato4d/kamishibai/compare/v0.1.0...v0.1.1) (2018-12-26)
20 | 
21 | 
22 | 
23 | <a name="0.1.0"></a>
24 | # 0.1.0 (2018-12-26)
25 | 
26 | 
27 | ### Features
28 | 
29 | * implement base functions ([8647b81](https://github.com/potato4d/kamishibai/commit/8647b81))
30 | * Implement click pagination fix [#1](https://github.com/potato4d/kamishibai/issues/1) ([02692c8](https://github.com/potato4d/kamishibai/commit/02692c8))
31 | * Implement loading and error handling ([60a77bc](https://github.com/potato4d/kamishibai/commit/60a77bc))
32 | * Update devapp ([20a8604](https://github.com/potato4d/kamishibai/commit/20a8604))
33 | 


--------------------------------------------------------------------------------
/src/components/LoadingView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="slideMode-loading">
 3 |     <div class="slideMode-loading_body">
 4 |       <LoadingIndicator /><br />
 5 |       <div>Loading slide...</div>
 6 |     </div>
 7 |     <SlideControl :option="option" :page="0" :pages="['']" :disable="true" />
 8 |   </div>
 9 | </template>
10 | 
11 | <script lang="ts">
12 | import Vue from 'vue'
13 | import LoadingIndicator from './LoadingIndicator.vue'
14 | import SlideControl from './SlideControl.vue'
15 | 
16 | export default Vue.extend({
17 |   props: {
18 |     option: Object
19 |   },
20 |   components: {
21 |     LoadingIndicator,
22 |     SlideControl
23 |   }
24 | })
25 | </script>
26 | 
27 | <style lang="scss" scoped>
28 | .slideMode-loading {
29 |   width: 100%;
30 |   height: 480px;
31 |   display: flex;
32 |   align-items: stetch;
33 |   justify-content: center;
34 |   flex-direction: column;
35 |   // background: #f0f0f0;
36 |   font-weight: bold;
37 | }
38 | 
39 | .slideMode-loading_body {
40 |   width: 100%;
41 |   height: 430px;
42 |   display: flex;
43 |   align-items: center;
44 |   justify-content: center;
45 |   flex-direction: column;
46 |   font-size: 14px;
47 |   color: #56c502;
48 |   border: solid 1px #e5e5e5;
49 |   border-radius: 3px 3px 0 0 / 3px 3px 0 0;
50 | }
51 | </style>
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "kamishibai-viewer",
 3 |   "version": "1.0.6",
 4 |   "main": "src/Kamishibai.vue",
 5 |   "repository": {
 6 |     "url": "potato4d/kamishibai-viewer",
 7 |     "type": "git"
 8 |   },
 9 |   "scripts": {
10 |     "serve": "vue-cli-service serve src/development.ts",
11 |     "serve:prod": "vue-cli-service serve",
12 |     "build": "cross-env BUILD_TYPE=lib VUE_CLI_CSS_SHADOW_MODE=true vue-cli-service build --dest dist/dist/1.0.6/ --target wc --name kamishibai-viewer ./src/main.ts",
13 |     "build:web": "cross-env BUILD_TYPE=app vue-cli-service build --dest dist ./src/development.ts",
14 |     "test:unit": "vue-cli-service test:unit",
15 |     "format": "prettier './src/**/*.{ts,vue}' --write"
16 |   },
17 |   "dependencies": {
18 |     "@increments/qiita-slide-mode": "^0.2.1",
19 |     "@vue/web-component-wrapper": "^1.2.0",
20 |     "vue": "^2.5.17",
21 |     "vue-awesome": "^3.2.0",
22 |     "xss": "^1.0.3"
23 |   },
24 |   "devDependencies": {
25 |     "@types/jest": "23.3.14",
26 |     "@vue/cli-plugin-typescript": "3.4.1",
27 |     "@vue/cli-plugin-unit-jest": "3.4.1",
28 |     "@vue/cli-service": "3.4.1",
29 |     "@vue/test-utils": "1.0.0-beta.29",
30 |     "cross-env": "5.2.0",
31 |     "gh-pages": "2.0.1",
32 |     "node-sass": "4.11.0",
33 |     "prettier": "1.16.4",
34 |     "sass-loader": "7.1.0",
35 |     "standard-version": "4.4.0",
36 |     "ts-jest": "24.0.0",
37 |     "typescript": "3.3.3333",
38 |     "vue-template-compiler": "2.6.7"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Kamishibai Viewer
 2 | 
 3 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/potato4d/kamishibai-viewer)
 4 | 
 5 | <!--
 6 | <kamishibai-viewer itemid="4ff5873776992f0511d6"></kamishibai-viewer>
 7 | -->
 8 | 
 9 | Web Component based Qiita slide viewer built with Vue.js(Vue CLI v3)
10 | 
11 | [![Image from Gyazo](https://i.gyazo.com/447d26f36fd0d346464be0901ee51ddc.gif)](https://gyazo.com/447d26f36fd0d346464be0901ee51ddc)
12 | 
13 | ## !! Under development !!
14 | 
15 | Kamishibai is a under development library.
16 | Because breaking changes may be born, please be careful when using.
17 | 
18 | ## About
19 | 
20 | This is a library for embedding slides of Qiita which is a Japanese technical document sharing site.
21 | 
22 | demo: https://potato4d.github.io/kamishibai-viewer/dist/1.0.0/demo.html
23 | 
24 | ## Usage
25 | 
26 | ※ As we are planning to publish to webcomponents.org, the URL may change!
27 | 
28 | 1. Load runtime on script tag
29 | 
30 | ```
31 | <script src="https://unpkg.com/vue"></script>
32 | <script src="https://potato4d.github.io/kamishibai/dist/1.0.0/kamishibai.min.js"></script>
33 | ```
34 | 
35 | 2. Write custom element tag for your HTML
36 | 
37 | ```html
38 | <kamishibai-viewer itemid="4ff5873776992f0511d6"></kamishibai-viewer>
39 | ```
40 | 
41 | 3. Done!
42 | 
43 | ## Props
44 | - itemid: String
45 |   - Qiita item ID
46 | - apikey?: String
47 |   - Qiita personal access token
48 | 
49 | ## Contributing
50 | 
51 | requirements:
52 | 
53 | - Node: Current LTS
54 | - Yarn: 1.12.0 or higher
55 | 
56 | ### clone repository
57 | 
58 | ```bash
59 | $ git clone https://github.com/potato4d/kamishibai-viewer
60 | $ cd kamishibai-viewer
61 | ```
62 | 
63 | ### Install deps
64 | 
65 | ```bash
66 | $ yarn
67 | ```
68 | 
69 | ### Run development server
70 | 
71 | ```bash
72 | $ yarn serve
73 | ```
74 | 
75 | ### Build
76 | 
77 | ```bash
78 | $ yarn build:web # Build Development website
79 | $ yarn build # Build Web Component
80 | ```
81 | 
82 | ## LICENSE
83 | 
84 | MIT @ HANATANI Takuma(@potato4d)
85 | 
86 | email: mail@potato4d.me
87 | 


--------------------------------------------------------------------------------
/src/components/SlideControl.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="slideMode-Dashboard">
 3 |     <button
 4 |       class="slideMode-Dashboard_button slideMode-Dashboard_button--prev "
 5 |       @click="$emit('prev')"
 6 |       :disabled="page === 0 && !disable"
 7 |       :class="{
 8 |         'slideMode-Dashboard_button--clickable': page !== 0 && !disable
 9 |       }"
10 |     >
11 |       <v-icon name="backward" class="icon" />
12 |     </button>
13 |     <button
14 |       class="slideMode-Dashboard_button slideMode-Dashboard_button--next "
15 |       @click="$emit('next')"
16 |       :disabled="page === pages.length - 1 && !disable"
17 |       :class="{
18 |         'slideMode-Dashboard_button--clickable':
19 |           page !== pages.length - 1 && !disable
20 |       }"
21 |     >
22 |       <v-icon name="forward" class="icon" />
23 |     </button>
24 |     <span class="slideMode-Dashboard_pageCount"
25 |       >{{ page + 1 }} / {{ pages.length }}</span
26 |     >
27 |     <div
28 |       class="slideMode-Dashboard_progress"
29 |       ref="progress"
30 |       @click="handleClickProgress"
31 |     >
32 |       <div
33 |         class="slideMode-Dashboard_progressFill"
34 |         :style="{
35 |           width: disable ? '0%' : `${((page + 1) / pages.length) * 100}%`
36 |         }"
37 |       ></div>
38 |     </div>
39 |     <div style="margin: 0 10px;font-size: 10px; font-weight:bold;">
40 |       <a
41 |         style="color: #fff;text-decoration: none;"
42 |         target="_blank"
43 |         href="https://github.com/potato4d/kamishibai-viewer"
44 |       >
45 |         kamishibai v{{ option.version }}
46 |       </a>
47 |     </div>
48 |   </div>
49 | </template>
50 | 
51 | <script lang="ts">
52 | import Vue from 'vue'
53 | import { getSlideCursor } from '@/utils/getSlideCursor'
54 | import 'vue-awesome/icons/forward'
55 | import 'vue-awesome/icons/backward'
56 | const { default: Icon } = require('vue-awesome/components/Icon')
57 | 
58 | export default Vue.extend({
59 |   components: {
60 |     'v-icon': Icon
61 |   },
62 |   props: {
63 |     disable: Boolean,
64 |     pages: Array as () => string[],
65 |     page: Number,
66 |     option: Object
67 |   },
68 |   methods: {
69 |     handleClickProgress(event: MouseEvent) {
70 |       const progress = this.$refs.progress! as HTMLElement
71 |       const clientX = event.clientX - progress.getBoundingClientRect().left
72 |       const p = Math.min(
73 |         this.pages.length,
74 |         getSlideCursor(this.pages.length, progress.clientWidth, clientX) - 1
75 |       )
76 |       this.$emit('move', p)
77 |     }
78 |   }
79 | })
80 | </script>
81 | 
82 | <style lang="scss" scoped>
83 | .slideMode-Dashboard {
84 |   display: flex !important;
85 | }
86 | .icon {
87 |   transform: scale(0.8);
88 |   margin-top: 4px;
89 | }
90 | </style>
91 | 


--------------------------------------------------------------------------------
/src/components/LoadingIndicator.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="sk-fading-circle">
  3 |     <div :class="`sk-circle${n} sk-circle`" v-for="n in 12" :key="n"></div>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script lang="ts">
  8 | import Vue from 'vue'
  9 | export default Vue.extend({})
 10 | </script>
 11 | 
 12 | <style lang="scss" scoped>
 13 | .sk-fading-circle {
 14 |   margin: 100px auto 0;
 15 |   width: 40px;
 16 |   height: 40px;
 17 |   position: relative;
 18 | 
 19 |   .sk-circle {
 20 |     width: 100%;
 21 |     height: 100%;
 22 |     position: absolute;
 23 |     left: 0;
 24 |     top: 0;
 25 | 
 26 |     &::before {
 27 |       content: '';
 28 |       display: block;
 29 |       margin: 0 auto;
 30 |       width: 15%;
 31 |       height: 15%;
 32 |       background-color: #56c502;
 33 |       border-radius: 100%;
 34 |       -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
 35 |       animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
 36 |     }
 37 |   }
 38 |   .sk-circle2 {
 39 |     transform: rotate(30deg);
 40 |   }
 41 |   .sk-circle3 {
 42 |     transform: rotate(60deg);
 43 |   }
 44 |   .sk-circle4 {
 45 |     transform: rotate(90deg);
 46 |   }
 47 |   .sk-circle5 {
 48 |     transform: rotate(120deg);
 49 |   }
 50 |   .sk-circle6 {
 51 |     transform: rotate(150deg);
 52 |   }
 53 |   .sk-circle7 {
 54 |     transform: rotate(180deg);
 55 |   }
 56 |   .sk-circle8 {
 57 |     transform: rotate(210deg);
 58 |   }
 59 |   .sk-circle9 {
 60 |     transform: rotate(240deg);
 61 |   }
 62 |   .sk-circle10 {
 63 |     transform: rotate(270deg);
 64 |   }
 65 |   .sk-circle11 {
 66 |     transform: rotate(300deg);
 67 |   }
 68 |   .sk-circle12 {
 69 |     transform: rotate(330deg);
 70 |   }
 71 | }
 72 | 
 73 | .sk-fading-circle .sk-circle2:before {
 74 |   animation-delay: -1.1s;
 75 | }
 76 | .sk-fading-circle .sk-circle3:before {
 77 |   animation-delay: -1s;
 78 | }
 79 | .sk-fading-circle .sk-circle4:before {
 80 |   animation-delay: -0.9s;
 81 | }
 82 | .sk-fading-circle .sk-circle5:before {
 83 |   animation-delay: -0.8s;
 84 | }
 85 | .sk-fading-circle .sk-circle6:before {
 86 |   animation-delay: -0.7s;
 87 | }
 88 | .sk-fading-circle .sk-circle7:before {
 89 |   animation-delay: -0.6s;
 90 | }
 91 | .sk-fading-circle .sk-circle8:before {
 92 |   animation-delay: -0.5s;
 93 | }
 94 | .sk-fading-circle .sk-circle9:before {
 95 |   animation-delay: -0.4s;
 96 | }
 97 | .sk-fading-circle .sk-circle10:before {
 98 |   animation-delay: -0.3s;
 99 | }
100 | .sk-fading-circle .sk-circle11:before {
101 |   animation-delay: -0.2s;
102 | }
103 | .sk-fading-circle .sk-circle12:before {
104 |   animation-delay: -0.1s;
105 | }
106 | 
107 | @-webkit-keyframes sk-circleFadeDelay {
108 |   0%,
109 |   39%,
110 |   100% {
111 |     opacity: 0;
112 |   }
113 |   40% {
114 |     opacity: 1;
115 |   }
116 | }
117 | 
118 | @keyframes sk-circleFadeDelay {
119 |   0%,
120 |   39%,
121 |   100% {
122 |     opacity: 0;
123 |   }
124 |   40% {
125 |     opacity: 1;
126 |   }
127 | }
128 | </style>
129 | 


--------------------------------------------------------------------------------
/src/Kamishibai.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <div class="slideMode" v-if="isFetched">
  4 |       <SlideViewer
  5 |         @prev="handleMoveToPrev"
  6 |         @next="handleMoveToNext"
  7 |         :option="option"
  8 |         :page="page"
  9 |         :pages="pages"
 10 |       />
 11 |       <SlideControl
 12 |         @prev="handleMoveToPrev"
 13 |         @next="handleMoveToNext"
 14 |         @move="handleMoveToPage"
 15 |         :option="option"
 16 |         :page="page"
 17 |         :pages="pages"
 18 |       />
 19 |     </div>
 20 |     <LoadingView class="slideMode" :option="option" v-else-if="!isErrored" />
 21 |     <ErrorView
 22 |       :errorReason="errorReason"
 23 |       class="slideMode"
 24 |       :option="option"
 25 |       v-else
 26 |     />
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script lang="ts">
 31 | import Vue from 'vue'
 32 | import { parseItem } from './utils/parser'
 33 | import LoadingView from './components/LoadingView.vue'
 34 | import ErrorView from './components/ErrorView.vue'
 35 | import SlideViewer from './components/SlideViewer.vue'
 36 | import SlideControl from './components/SlideControl.vue'
 37 | import { Item } from '@/types/item'
 38 | import { fetchItem } from './utils/http'
 39 | 
 40 | interface LocalState {
 41 |   isFetched: boolean
 42 |   isErrored: boolean
 43 |   item: Item | null
 44 |   page: number
 45 |   pages: string[]
 46 |   errorReason: string | null
 47 | }
 48 | 
 49 | export default Vue.extend({
 50 |   name: 'Kamishibai',
 51 |   props: {
 52 |     itemid: String,
 53 |     apikey: {
 54 |       type: String,
 55 |       required: false,
 56 |       default: ''
 57 |     }
 58 |   },
 59 |   data(): LocalState {
 60 |     return {
 61 |       isFetched: false,
 62 |       isErrored: false,
 63 |       item: null,
 64 |       page: 0,
 65 |       pages: [],
 66 |       errorReason: ''
 67 |     }
 68 |   },
 69 |   components: {
 70 |     SlideViewer,
 71 |     SlideControl,
 72 |     LoadingView,
 73 |     ErrorView
 74 |   },
 75 |   computed: {
 76 |     option(): { apikey: string; version: string } {
 77 |       const apikey = this.apikey
 78 |       return {
 79 |         apikey,
 80 |         version: '1.0.6'
 81 |       }
 82 |     }
 83 |   },
 84 |   methods: {
 85 |     handleMoveToPrev() {
 86 |       this.page = Math.max(0, this.page - 1)
 87 |     },
 88 |     handleMoveToNext() {
 89 |       this.page = Math.min(this.pages.length - 1, this.page + 1)
 90 |     },
 91 |     handleMoveToPage(page: number) {
 92 |       this.page = page
 93 |     }
 94 |   },
 95 |   async mounted() {
 96 |     if (!this.itemid) {
 97 |       this.isErrored = true
 98 |       this.errorReason = '記事 ID が指定されていません。'
 99 |     }
100 |     try {
101 |       const item = await fetchItem(this.itemid, { token: this.option.apikey })
102 |       this.item = item
103 |       this.pages = parseItem(item)
104 |       this.isFetched = true
105 |     } catch (e) {
106 |       this.isErrored = true
107 |     }
108 |   }
109 | })
110 | </script>
111 | 
112 | <style lang="scss">
113 | @import '../node_modules/@increments/qiita-slide-mode/src/styles/style.scss';
114 | #app {
115 |   font-family: -apple-system, Segoe UI, Helvetica Neue,
116 |     Hiragino Kaku Gothic ProN, 'メイリオ', meiryo, sans-serif;
117 | }
118 | #app .slideMode a {
119 |   color: #4aac00;
120 | }
121 | #app .slideMode .fa-link {
122 |   display: none;
123 | }
124 | #app .slideMode {
125 |   font-size: 12px;
126 |   max-width: 850px;
127 |   margin-left: auto;
128 |   margin-right: auto;
129 | }
130 | #app h3 {
131 |   border-bottom: solid 1px #e5e5e5;
132 | }
133 | </style>
134 | 


--------------------------------------------------------------------------------
/src/DevApp.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="devapp-container">
  3 |     <div class="devapp-container_content">
  4 |       <h1>
  5 |         <span>Kamishibai Viewer v1.0.0</span><br />
  6 |         <small>
  7 |           <small>
  8 |             Web Component based Qiita slide viewer built with Vue.js
  9 |           </small>
 10 |         </small>
 11 |       </h1>
 12 |     </div>
 13 | 
 14 |     <Kamishibai itemid="4ff5873776992f0511d6" />
 15 | 
 16 |     <div class="devapp-container_content">
 17 |       <h2>!! Under development !!</h2>
 18 |       <p>
 19 |         Kamishibai is a under development library.<br />
 20 |         Because breaking changes may be born, please be careful when using.
 21 |       </p>
 22 |     </div>
 23 | 
 24 |     <div class="devapp-container_content">
 25 |       <h2>About</h2>
 26 |       <p>
 27 |         This is a library for embedding slides of Qiita which is a Japanese
 28 |         technical document sharing site.<br />
 29 |         <br />
 30 |         demo:
 31 |         <a
 32 |           href="https://potato4d.github.io/kamishibai-viewer/dist/1.0.0/demo.html"
 33 |           >https://potato4d.github.io/kamishibai-viewer/dist/1.0.0/demo.html</a
 34 |         >
 35 |       </p>
 36 |     </div>
 37 | 
 38 |     <div class="devapp-container_content">
 39 |       <h2>Usage</h2>
 40 |       <p>
 41 |         <small style="color: red">
 42 |           ※ As we are planning to publish to webcomponents.org, the URL may
 43 |           change!
 44 |         </small>
 45 |       </p>
 46 |       <p>1. Load runtime on script tag</p>
 47 |       <div>
 48 |         <pre>
 49 |           <code>&lt;script src="https://unpkg.com/vue@2.5.21/dist/vue.min.js"&gt;&lt;/script&gt;</code>
 50 |           <code>&lt;script src="https://potato4d.github.io/kamishibai/dist/1.0.0/kamishibai.min.js"&gt;&lt;/script&gt;</code>
 51 |         </pre>
 52 |       </div>
 53 |       <p>2. Write custom element tag for your HTML</p>
 54 |       <div>
 55 |         <pre>
 56 |           <code>&lt;kamishibai-viewer data-item-id="4ff5873776992f0511d6"&gt;&lt;/kamishibai-viewer&gt;</code>
 57 |         </pre>
 58 |       </div>
 59 |       <p>3. Done!</p>
 60 |     </div>
 61 | 
 62 |     <div class="devapp-container_content">
 63 |       <h2>Props</h2>
 64 |       <dl>
 65 |         <dt><strong>itemid: String</strong></dt>
 66 |         <dd style="margin-top: 10px;margin-bottom: 10px;">Qiita item ID</dd>
 67 |         <dt><strong>apikey?: String</strong></dt>
 68 |         <dd style="margin-top: 10px;margin-bottom: 10px;">
 69 |           Qiita personal access token
 70 |         </dd>
 71 |       </dl>
 72 |     </div>
 73 | 
 74 |     <div class="devapp-container_content">
 75 |       <h2>LICENSE</h2>
 76 |       <p>
 77 |         MIT @ HANATANI Takuma(@potato4d)<br />
 78 |         email: mail@potato4d.me
 79 |       </p>
 80 |     </div>
 81 | 
 82 |     <div class="devapp-container_content">
 83 |       <div class="text-center">
 84 |         <small> &copy; 2018 HANATANI Takuma(@potato4d) </small>
 85 |       </div>
 86 |     </div>
 87 |   </div>
 88 | </template>
 89 | 
 90 | <script lang="ts">
 91 | import Vue from 'vue'
 92 | import Kamishibai from './Kamishibai.vue'
 93 | import { sanitizeAllTags } from '@/utils/sanitizer'
 94 | 
 95 | export default Vue.extend({
 96 |   components: {
 97 |     Kamishibai
 98 |   },
 99 |   filters: {
100 |     h(val: string) {
101 |       return sanitizeAllTags(val)
102 |     }
103 |   }
104 | })
105 | </script>
106 | 
107 | <style lang="scss" scoped>
108 | .devapp-container {
109 |   max-width: 850px;
110 |   margin: 0 auto;
111 |   width: 100vw;
112 |   height: 100vh;
113 | }
114 | 
115 | .devapp-container_content pre {
116 |   background: #f1f3f4;
117 |   padding-top: 12px;
118 |   padding-left: 0;
119 |   border-radius: 2px;
120 |   text-align: left;
121 | }
122 | 
123 | .devapp-container_content {
124 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
125 |   -webkit-font-smoothing: antialiased;
126 |   -moz-osx-font-smoothing: grayscale;
127 |   color: #2c3e50;
128 | }
129 | 
130 | .devapp-container_content h1 {
131 |   text-align: center;
132 | }
133 | .devapp-container_content small {
134 |   font-size: 0.8em;
135 | }
136 | 
137 | .text-center {
138 |   text-align: center;
139 | }
140 | </style>
141 | 


--------------------------------------------------------------------------------