Home

Awesome

Bibi

EPUB Reader on your website.

Summary

You can publish EPUB books on the web, with full-featured viewer running on web browser. And you can embed it in other webpages (like YouTube videos).

Spec.

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
  5. Supported by

How to Setup & Read/Publish EPUB Books

Bibi supports 3 ways to read/publish EPUB books:

In all cases,

  1. Download Bibi from GitHub release page or Bibi website.
  2. And unzip it at first.

Are you an user of BiB/i older than v1.0.0?

The folder structure and default public URL has changed in Bibi v1.0.0. But don't worry. You still can use not only the new style URL but also the same old style URL as before.

If you already published books on the web with BiB/i which version is older than v1.0.0, and want to update Bibi to v1.0.0 or newer, but do not want to change the public URLs of the books,

Read in browsers on your local machine

  1. Open bibi/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 and contains less files.

In both ways, at first, upload bibi and 'bibi-bookshelf' folders to the same directory on your web server. bibi contains all programs of Bibi, and 'bibi-bookshelf' is for the storage of the books you upload. You can use different directory for the bookshelf instead of 'bibi-bookshelf' by editing "bookshelf" option in 'bibi/presets/default.js'.

Publish unzipped folders

  1. Upload bibi and 'bibi-bookshelf' folders to the same directory 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 bibi-bookshelf directory, and
  4. Access to https://your.web.site/somewhere/bibi/?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/bibi/?book=BOOKNAME" data-bibi="embed" data-bibi-style="[[ CSS for embeded Bibi frame, as you like ]]">[[ Title of the Book ]]</a><script src="https://your.web.site/somewhere/bibi/and/jo.js"></script>

Publish zipped EPUB files

  1. Upload bibi and 'bibi-bookshelf' folders to the same directory on your web server.
  2. Upload your EPUB book (ex. BOOKNAME.epub) to bibi-bookshelf directory, and
  3. Access to https://your.web.site/somewhere/bibi/?book=BOOKNAME.epub by your browser.
  4. Or embed code below into your blog entry or other webpages, and visit the entry.
<a href="https://your.web.site/somewhere/bibi/?book=BOOKNAME.epub" data-bibi="embed" data-bibi-style="[[ CSS for embeded Bibi frame, as you like ]]">[[ Title of the Book ]]</a><script src="https://your.web.site/somewhere/bibi/and/jo.js"></script>

Use as an online EPUB viewer

  1. Upload bibi folder on your web server.
  2. Navigate visitors to https://your.web.site/somewhere/bibi/.
  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 bibi/presets/default.js.

How to Arrange Development Environment

Requirements

Arrangements

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

How to Develop

  1. $ npm start
    1. webpack generates development version of Bibi to __dist folder, and start to watch changes of the files in __src folder.
    2. BrowserSync webserver launches and navigate your browser to http://localhost:61671/bibi/?book=.
  2. Edit source files.
    1. If you modify source files in __src folder, development version of the file(s) are updated in __dist folder automaticaly.
    2. BrowserSync reloads your browser(s) or inject changes of CSS.

Files in __dist folder generated with npm start are development version. Please don't forget to run npm run build and build production version before you upload.

DistributionSource
__dist/bibi/*.html__src/bibi/*.html
__dist/bibi/and/jo.js__src/bibi/and/jo.js + __src/bibi/and/jo.scss
__dist/bibi/extensions/**__src/bibi/extensions/**
__dist/bibi/presets/*.js__src/bibi/presets/*.js
__dist/bibi/resources/scripts/bibi.js__src/bibi/resources/scripts/*.js + __src/bibi/resources/scripts/bibi.book.scss
__dist/bibi/resources/styles/bibi.css__src/bibi/resources/styles/*.scss
__dist/bibi/wardrobe/**/*.cssRead documents in __src/bibi/wardrobe/README-DRESS_ja (Sorry..., currently README is Japanese only)

Files in the Distribution column of the table are overwritten with the files updated by npm start or npm run build. If you want to modify them, please edit files in the Source column instead of editing these files in __dist directly.

How to Build

How to Make a Ditribution Package

License

Bibi (ja / en)

Bibi is including and powered by these open source softwares:

Special Thanks

Thanks to the contributors and the users around the world!

Supported by

Media Do Co.,Ltd

Lunascape