docs: add deployment instructions and logo

README.md

@@ -1,18 +1,35 @@
-# 📁 `onedrive-cf-index`
+<image align="right" src="assets/onedrive-cf-index.png" alt="onedrive-cf-index" width="125px" />
 
-> Yet Another OneDrive Index. Powered by Cloudflare Workers. Inspired and originated greatly from [heymind/OneDrive-Index-Cloudflare-Worker](https://github.com/heymind/OneDrive-Index-Cloudflare-Worker).
+<h1><code>onedrive-cf-index</code></h1>
 
-## Demo
+[![Hosted on Cloudflare Workers](https://img.shields.io/badge/Hosted%20on-CF%20Workers-f38020?logo=cloudflare&logoColor=f38020&labelColor=282d33)](https://storage.spencerwoo.com/)
+[![Deploy](https://github.com/spencerwooo/onedrive-cf-index/workflows/Deploy/badge.svg)](https://github.com/spencerwooo/onedrive-cf-index/actions?query=workflow%3ADeploy)
 
-Live demo: [📁 Spencer's OneDrive Index](https://storage.spencerwoo.com/).
+🏵 **Yet Another OneDrive Index.** Powered by Cloudflare Workers. Inspired and originated greatly from [heymind/OneDrive-Index-Cloudflare-Worker](https://github.com/heymind/OneDrive-Index-Cloudflare-Worker).
 
-|                                 Home                                 |                                Folder                                |
-| :------------------------------------------------------------------: | :------------------------------------------------------------------: |
-| ![](https://cdn.spencer.felinae98.cn/blog/2020/08/200806_153117.png) | ![](https://cdn.spencer.felinae98.cn/blog/2020/08/200806_153124.png) |
+<h2>Table of contents</h2>
 
-## Deployment
+- [Demo](#demo)
+- [Features](#features)
+  - [Improvements](#improvements)
+    - [New features](#new-features)
+    - [Under the hood](#under-the-hood)
+  - [All other features](#all-other-features)
+- [Deployment](#deployment)
+  - [Prerequisites](#prerequisites)
+    - [Get OneDrive API Tokens](#get-onedrive-api-tokens)
+    - [Get Firebase Database Tokens](#get-firebase-database-tokens)
+  - [Preparing](#preparing)
+  - [Building and publishing](#building-and-publishing)
 
-See: [How to use | OneDrive-Index-Cloudflare-Worker](https://github.com/heymind/OneDrive-Index-Cloudflare-Worker#%E5%92%8B%E7%94%A8) (for now).
+## Demo
+
+Live demo: [📁 Spencer's OneDrive Index](https://storage.spencerwoo.com/).
+
+| Scenario |                              Screenshot                              |
+| :------: | :------------------------------------------------------------------: |
+|   Home   | ![](https://cdn.spencer.felinae98.cn/blog/2020/08/200806_153117.png) |
+|  Folder  | ![](https://cdn.spencer.felinae98.cn/blog/2020/08/200806_153124.png) |
 
 ## Features
 
@@ -34,6 +51,8 @@ See: [How to use | OneDrive-Index-Cloudflare-Worker](https://github.com/heymind/
   - ...
 - Code syntax highlight in GitHub style. (With PrismJS.)
 - Image preview supports [Medium style zoom effect](https://github.com/francoischalifour/medium-zoom).
+- Token cached and refreshed with Google Firebase Realtime Database. (For those who can't afford Cloudflare Workers KV storage. 😢)
+- Route lazy loading with the help of [Turbolinks®](https://github.com/turbolinks/turbolinks). (Somewhat buggy when going from `folder` to `file preview`, but not user-experience degrading.)
 - ...
 
 #### Under the hood
@@ -46,15 +65,107 @@ See: [How to use | OneDrive-Index-Cloudflare-Worker](https://github.com/heymind/
 
 ### All other features
 
-See: [New features | OneDrive-Index-Cloudflare-Worker](https://github.com/heymind/OneDrive-Index-Cloudflare-Worker#-%E6%96%B0%E7%89%B9%E6%80%A7-v11) (for now).
+See: [New features | OneDrive-Index-Cloudflare-Worker](https://github.com/heymind/OneDrive-Index-Cloudflare-Worker#-%E6%96%B0%E7%89%B9%E6%80%A7-v11).
+
+## Deployment
+
+> Online token generation tool taken from the generous: <https://heymind.github.io/tools/microsoft-graph-api-auth>.
+
+### Prerequisites
+
+#### Get OneDrive API Tokens
+
+1. Create new blade app here: [Microsoft Azure App registrations](https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade) with:
+   1. `Supported account types` set to "Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)".
+   2. `Redirect URI (optional)` set to "Web: https://heymind.github.io/tools/microsoft-graph-api-auth".
+2. Get your Application (client) ID which is `client_id` at `Overview` panel.
+3. Open `Certificates & secrets` panel and create a new secret called `client_secret`.
+4. Add permissions `offline_access, Files.Read, Files.Read.All` at `API permissions`.
+5. Get your `refresh_token` using <https://heymind.github.io/tools/microsoft-graph-api-auth>.
+6. Create a dedicated folder for your public files inside OneDrive, for instance: `/Public`.
+
+#### Get Firebase Database Tokens
+
+1. Register new project at [Google Firebase](https://firebase.google.com/).
+2. Enable "Realtime Database" at "Develop » Database", create a key called `auth` and get the URL for your database as `firebase_url` (which should look like `https://xxx.firebaseio.com/auth.json`.).
+3. Set database rules to be: `".read": false` and `".write": false`.
+4. Get your database token `firebase_token` at "Settings » Service Accounts » Database key".
+
+After all this hassle, you should have successfully acquired the following tokens and secrets:
+
+- `refresh_token`
+- `client_id`
+- `client_secret`
+- `redirect_uri`: <https://heymind.github.io/tools/microsoft-graph-api-auth> (default)
+- `base`: `/Public` (default)
+- `firebase_url`
+- `firebase_token`
+
+### Preparing
+
+Fork the repository. Install dependencies.
+
+```sh
+# Install cloudflare workers official packing and publishing tool
+yarn global add @cloudflare/wrangler
+
+# Install dependencies with yarn
+yarn install
+
+# Login to Cloudflare with wrangler
+wrangler config
+
+# Verify wrangler status with this command
+wrangler whoami
+```
+
+Create a **DRAFT** worker at Cloudflare Workers with a cool name. Get your own Cloudflare `account_id` and `zone_id`.
+
+Modify [`wrangler.toml`](wrangler.toml):
+
+- `name`: The draft worker's name, your worker will be published at `<name>.<worker_subdomain>.workers.dev`.
+- `account_id`: Your Cloudflare Account ID.
+- `zone_id`: Your Cloudflare Zone ID.
+
+Modify [`src/config/default.js`](src/config/default.js):
+
+- `client_id`: Your `client_id` from above.
+- `base`: Your `base` path from above.
+- `firebase_url`: Your `firebase_url` from above.
+
+Add secrets to Cloudflare Workers environment variables with `wrangler`:
+
+```sh
+# Add your refresh_token, client_secret, firebase_token to Cloudflare
+wrangler secret put REFRESH_TOKEN
+# ... enter your refresh_token from above here
+
+wrangler secret put CLIENT_SECRET
+# ... enter your client_secret from above here
+
+wrangler secret put FIREBASE_TOKEN
+# ... enter your firebase_token from above here
+```
+
+### Building and publishing
+
+You can preview the worker with `wrangler`:
+
+```sh
+wrangler preview
+```
+
+After making sure everything is ok, you can publish your worker with:
 
-## Notes
+```sh
+wrangler publish
+```
 
-Currently work in progress. Not recommended to use in production.
+You can also create a GitHub Actions for auto publishing your worker on `push`. See [main.yml](.github/workflows/main.yml).
 
 ---
 
-📁 **`onedrive-cf-index`** ©Spencer Woo. Released under the MIT License.
+🏵 **`onedrive-cf-index`** ©Spencer Woo. Released under the MIT License.
 
 Authored and maintained by Spencer Woo.