Table of contents
- New design:
- File icon rendered according to file type.
- Use Font Awesome icons instead of material design icons (For better design consistency).
- Use github-markdown-css for
README.mdrendering → Demo.
- Add breadcrumbs for better directory navigation.
- Support file previewing:
- Code syntax highlight in GitHub style. (With PrismJS.)
- Image preview supports Medium style zoom effect.
- 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®. (Somewhat buggy when going from
file preview, but not user-experience degrading.)
Under the hood
- CSS animations all the way.
- Package source code with wrangler and webpack.
- Convert all CDN assets to load with jsDelivr.
- No external JS scripts, all scripts are loaded with webpack! (Other than some libraries.)
All other features
Online token generation tool taken from the generous: https://heymind.github.io/tools/microsoft-graph-api-auth.
Get OneDrive API Tokens
- Create a new blade app here Microsoft Azure App registrations with:
Supported account typesset to "Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)".
Redirect URI (optional)set to "Web: https://heymind.github.io/tools/microsoft-graph-api-auth".
- Get your Application (client) ID -
Certificates & secretspanel and create a new secret called
- Add permissions
offline_access, Files.Read, Files.Read.Allat
- Get your
- Create a dedicated folder for your public files inside OneDrive, for instance:
If you can't fetch the
refresh_token on step 5, please resolve to the solution suggested in #13.
Get Firebase Database Tokens
- Register new project at Google Firebase.
- Enable "Realtime Database" at "Develop » Database", create a key called
authand get the URL for your database as
firebase_url(which should look like
- Set database rules to be:
- Get your database token
firebase_tokenat "Settings » Service Accounts » Database key".
After all this hassle, you should have successfully acquired the following tokens and secrets:
redirect_uri: Defaults to
base: Defaults to
Fork the repository. Install dependencies.
# 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
zone_id: Docs - Account ID And Zone ID.
name: The draft worker's name, your worker will be published at
account_id: Your Cloudflare Account ID.
zone_id: Your Cloudflare Zone ID.
basepath from above.
Add secrets to Cloudflare Workers environment variables with
# 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
After making sure everything is ok, you can publish your worker with:
You can also create a GitHub Actions for auto publishing your worker on
push. See main.yml.
- You can (AND SHOULD) change the
introon the default landing page here: src/folderView.js. Write HTML directly.
- Your custom styles are loaded from themes/spencer.css, change that according to your customizations.
- You can also customize Markdown CSS styles, PrismJS code highlight color schemes, etc.
onedrive-cf-index ©Spencer Woo. Released under the MIT License.
Authored and maintained by Spencer Woo.