🏵 Yet Another OneDrive Index. Powered by Cloudflare Workers. Inspired and originated greatly from heymind/OneDrive-Index-Cloudflare-Worker.
Live demo: 📁 Spencer's OneDrive Index.
Scenario | Screenshot |
---|---|
Home | |
Folder |
- New design:
spencer.css
. - File icon rendered according to file type. Emoji as folder icon when available (if the first character of the folder name is an emoji).
- Use Font Awesome icons instead of material design icons (For better design consistency).
- Use github-markdown-css for
README.md
rendering → 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 Cloudflare Workers KV storage. (We got rid of external Firebase dependencies!)
- Route lazy loading with the help of Turbolinks®.
- Supports OneDrive 21Vianet.(由世纪互联运营的 OneDrive。)
- ...
- CSS animations all the way.
- Package source code with wrangler and webpack.
- Convert all CDN assets to load with jsDelivr.
- Almost all scripts are loaded with webpack! (Other than a few libraries for rendering file previews.)
- ...
- Proxied download:
?proxied
- Downloads the file through CloudFlare Workers if (1)proxyDownload
is true inconfig/default.js
and (2) parameter is present in url. - Raw file download:
?raw
- Return direct raw file instead of rich rendered preview if parameter is present.
Both these parameters can be used side by side, meaning that ?proxied&raw
and ?raw&proxied
are both valid. Example: https://storage.spencerwoo.com/🥟%20Some%20test%20files/Previews/eb37c02438f.png?raw&proxied
.
See: New features - OneDrive-Index-Cloudflare-Worker.
Online token generation tool taken from the generous: https://heymind.github.io/tools/microsoft-graph-api-auth.
- Create a new blade app here Microsoft Azure App registrations (OneDrive normal version) or Microsoft Azure.cn App registrations (OneDrive 世纪互联版本) with:
Supported account types
set toAccounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)
. OneDrive 世纪互联用户设置为:任何组织目录(任何 Azure AD 目录 - 多租户)中的帐户
.Redirect URI (optional)
set to "Web: https://heymind.github.io/tools/microsoft-graph-api-auth".
- Get your Application (client) ID -
client_id
atOverview
panel. - Open
Certificates & secrets
panel and create a new secret calledclient_secret
. - Add permissions
offline_access, Files.Read, Files.Read.All
atAPI permissions
. - Get your
refresh_token
using https://heymind.github.io/tools/microsoft-graph-api-auth. - Create a dedicated folder for your public files inside OneDrive, for instance:
/Public
. Please don't share your root folder directly!
If you can't fetch the access_token
and/or refresh_token
on step 5, please resolve to the solution suggested in the pinned issue #13.
After all this hassle, you should have successfully acquired the following tokens and secrets:
refresh_token
client_id
client_secret
redirect_uri
: Defaults tohttps://heymind.github.io/tools/microsoft-graph-api-auth
.base
: Defaults to/Public
.
Fork the repository. Install dependencies.
We strongly recommend you install npm with a Node version manager like n or nvm, which will allow wrangler to install configuration data in a global node_modules directory in your user's home directory, without requiring that you run as root.
# Install cloudflare workers official packing and publishing tool
npm i @cloudflare/wrangler -g
# Install dependencies with npm
npm 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
: Docs - Account ID And Zone ID.
Modify 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.
Create Cloudflare Workers KV bucket named BUCKET
:
# Create KV bucket
wrangler kv:namespace create "BUCKET"
# ... or, create KV bucket with preview functions enabled
wrangler kv:namespace create "BUCKET" --preview
Modify kv_namespaces
inside wrangler.toml
:
kv_namespaces
: Your Cloudflare KV namespace, you should substitute theid
andpreview_id
values accordingly. If you don't need preview functions, you can remove thepreview_id
field.
Modify src/config/default.js
:
client_id
: Yourclient_id
from above.base
: Yourbase
path from above.
For Chinese 21Vianet OneDrive users. OneDrive 世纪互联用户:将 useOneDriveCN
设置(修改)为 true
。
Add secrets to Cloudflare Workers environment variables with wrangler
:
# Add your refresh_token and client_secret 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
You can preview the worker with wrangler
:
wrangler preview
After making sure everything is ok, you can publish your worker with:
wrangler publish
You can also create a GitHub Actions for auto publishing your worker on push
. See main.yml.
- You can (AND SHOULD) change the
intro
on the default landing page here: src/folderView.js. Write HTML directly. - You can (AND ALSO SHOULD) change the header of the site here: src/render/htmlWrapper.js.
- Your custom styles are loaded from themes/spencer.css, change that according to your customizations. You may also need to change the commit HASH at src/render/htmlWrapper.js.
- 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.
@Portfolio · @Blog · @GitHub