BiB/i

EPUB Reader on your website.

Summary

You can publish EPUB books on the web, with a permalink for each book. And you can embed it in other webpages, just like YouTube videos.

Spec.

• EPUB 3+ and 2 compliant. Supports both fixed-layout and reflow books of various language.
• Made with JavaScript. Works compatibly with all major web browsers on various OS/devices.
• Open source software released under the MIT License.

Table of Contents

1. How to Setup & Read/Publish EPUB Books (for Users/Publishers)
2. How to Arrange Development Environment (for Developers)
3. License
4. Special Thanks

---

How to Setup & Read/Publish EPUB Books

BiB/i supports 3 ways to read/publish EPUB books:

• Read in browsers on your local machine.
• Publish on the web to have your books read by someone.
• Open to the public as an online EPUB viewer for visitors' local EPUBs.

In all cases,

1. Download BiB/i from GitHub release page or BiB/i website.
2. And unzip it at first.

Read in browsers on your local machine

1. Open bib/i/index.html in your browser, and
2. Drag an EPUB book and drop it into the window.
3. That's all!

Publish on the web

Demo.

You can publish both unzipped folder and zipped EPUB archive.

Using unzipped folder is recommended for the book which is heavy or contains many files. Using zipped EPUB file is recommended for the book which is light or contains less files.

Publish unzipped folders

1. Upload bib folder on your web server.
2. Unzip an EPUB book,
   1. Change the file extension from .epub to .zip (BOOKNAME.epub -> BOOKNAME.zip), and
   2. Unzip the file with some tool.
3. Upload the unzipped folder BOOKNAME into bib/bookshelf directory, and
4. Access to https://your.web.site/somewhere/bib/i/?book=BOOKNAME by your browser. (note that it has no extension)
5. Or embed code below into your blog entry or other webpages, and visit the entry.

<a href="https://your.web.site/somewhere/bib/i/?book=BOOKNAME" data-bibi="embed" data-bibi-style="[[ CSS for embeded BiB/i frame, as you like ]]">My Great Book Title</a><script src="https://your.web.site/bib/i.js"></script>

Publish zipped EPUB files

1. Upload bib folder on your web server.
2. Upload your EPUB book (ex. BOOKNAME.epub) to bib/bookshelf directory, and
3. Access to https://your.web.site/somewhere/bib/i/?book=BOOKNAME.epub by your browser.
4. Or embed code for it.

<a href="https://your.web.site/somewhere/bib/i/?book=BOOKNAME.epub" data-bibi="embed" data-bibi-style="[[ CSS for embeded BiB/i frame, as you like ]]">My Great Book Title</a><script src="https://your.web.site/bib/i.js"></script>

Open to the public as an online EPUB viewer for visitors' local EPUBs

1. Upload bib folder on your web server.
2. Navigate visitors to https://your.web.site/somewhere/bib/i.
3. Visitors can read one's local EPUBs by draging and dropping EPUBs into the window.

If you want to terminate this feature, set "no" to "accept-files" in bib/i/presets/default.js.

How to Arrange Development Environment

Requirements

• Node.js + npm
  • Installing Node.js via package manager.
  • Or Downloads

Arrangements

1. Clone this repository.
2. $ cd <the local repository>
3. $ npm install

How to Develop

1. $ npm start
   • webpack generates development version of files and start to watch changes of the files.
   • BrowserSync webserver launches and navigate your browser to http://localhost:61671/bib/i/?book=.
2. Edit source files.
   • webpack watches your modification and updates development version of the file(s) with sourcemaps.
   • BrowserSync reloads your browser(s) or inject changes of CSS.

• SCSS source file(s) of...

  • bib/i/res/styles/bibi.css are in dev-bib/i/res/styles/,
  • Styles in bib/i.js is dev-bib/i.scss.

• JavaScript source file(s) of...

  • bib/i/res/scripts/bibi.js are in dev-bib/i/res/scripts/,
  • bib/i.js is dev-bib/i.js,
  • the extensions in bib/i/extensions/ are in dev-bib/i/extensions/.

• These files are not processed by webpack:

  • Root HTML file of BiB/i: bib/i/index.html
  • Preset file in bib/i/presets/
  • Files in bib/bookshelf/ (this directory contains .gitkeep)

How to Build

• $ npm run build
  • webpack generates production version of files.

How to Make a Ditribution

• $ npm run make:distribution
  1. webpack generates production version of files.
  2. gulp generates zipped archive.

License

BiB/i (ja / en)

• Copyright © Satoru MATSUSHIMA (@satorumurmur)
• Licensed under the MIT License.

Distribution is including these open source softwares:

• Core components:
  • sML.js ... Copyright © Satoru MATSUSHIMA (Licensed under the MIT License.)
  • Material Icons ... Copyright © Material Design Authors / Google Inc. (Licensed under the Apache License version 2.0.)
  • Font Awesome Free ... Copyright © Dave Gandy (Licensed under the SIL Open Font License (OFL) 1.1.)
• Extensions:
  • JSZip ... Copyright © Stuart Knightley (Dual licensed under the MIT License or the GPLv3.)
  • JSZipUtils ... Copyright © Stuart Knightley (Dual licensed under the the MIT License or the GPLv3.)
  • JS-YAML ... Copyright © Vitaly Puzrin (Licensed under the MIT License.)
• Polyfills (for Internet Explorer):
  • classlist-polyfill ... by Yola Inc. (Released into the public domain under the Unlicense)
  • text-encoding-utf-8 ... by Erik Arvidsson (Released into the public domain under the Unlicense.)
  • IntersectionObserver polyfill ... Copyright (c) W3C (Licensed under the W3C Software and Document License.)
  • document.currentScript Polyfill ... Copyright © Adam Miller (Licensed under the MIT License.)
  • custom-event-polyfill ... Copyright © Evan Krambuhl (Licensed under the MIT License.)
  • Native Promise Only (NPO) ... Copyright © Kyle Simpson (Licensed under the MIT License.)
  • Polyfill Array.prototype.includes ... Copyright © Kevin Latusinski (Licensed under the MIT License.)
  • String.prototype.padStart ... Copyright © Khaled Al-Ansari (Licensed under the MIT License.)
  • url-polyfill ... Copyright © Valentin Richard (Licensed under the MIT License.)

Special Thanks

• KITAITI Makoto
• Shunsuke ITO