Custom configurations

There are two config files: config/api.config.js and config/site.config.js.

config/api.config.js - is used to define your API endpoints and tokens. OneDrive international users don't have to change anything.
config/site.config.js - is used for customising the website, such as the folder to share, the title, used Google fonts, site icons, contact info, etc.

Configuring custom API settings

Only make changes here if you think you have to.

If you are not the admin of your OneDrive account (which may happen to OneDrive business, educational or E5 subscription accounts), you may need to define your own clientId and obfuscatedClientSecret. More on this here Using your own client id and secret.
If you are a OneDrive 世纪互联 user, you should change authApi and driveApi (which you should have already done so in Getting started - Modify API settings).

Customising your website

A couple of configurations are extracted for you to customise your site, these customisations live in config/site.config.js.

`userPrincipalName`

You have already defined this in Getting started for the OAuth process.

icon - is the website icon to the left of the title inside the navigation bar. It should be placed under the /public directory of your GitHub project (not your OneDrive folder!), and referenced here by its relative path to /public.

For example, if your onedrive-vercel-index's GitHub project's /public directory holds:

.
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── icons
│   └── 64.png
└── ...

And say you want to use 64.png as your website's icon, then you should change icon in site.config.js to /icons/64.png, and you should be good to go. The favicons of your website should also be placed here under /public directly, you can use favicon.io to generate favicons with your image, and replace the favicons set in the main project.

`title` - Site title

The name of your website. Present alongside your icon.

`baseDirectory`

The folder that you are to share publicly with onedrive-vercel-index. You should have already defined this.

`maxItems`

maxItems - represents the maximum number of items that one directory lists, pagination supported. This is limited up to 200 items by the upstream OneDrive API.

➡️

Try pagination here: https://drive.swo.moe/🥟 Some test files/Imagenette.

`googleFont` - Custom font family

We use Google Font natively for font customisations.

googleFontSans - the sans serif font used in onedrive-vercel-index.
googleFontMono - the monospace font used in onedrive-vercel-index.
googleFontLinks - an array of links for referencing the google font assets.

You can check and generate the required links and names at fonts.google.com.

`footer`

The footer component of your website. You can write HTML here, but you need to escape double quotes - changing " to \". You can write anything here, and if you like badges, generate some with shields.io 😃

`protectedRoutes`

This is where you specify the folders that are password protected. It is an array of paths pointing to all the directories in which you have .password set. More on this in Password protected folders.

`email`

email - is optional, and can be removed should you wish - by only leaving a "" here.

- "email": "mailto:[email protected]",
+ "email": "",

However, I suggest adding some form of contact for your website.

`links`

links - is an array of { "name": "xxx", "link": "xxx" }. In the latest update, all brand icons inside Font Awesome is supported and the icon to render is based on the name you provide. See the demo screen recording below.

💦

The additional links in the demo video are generated automatically by GitHub Copilot and may not be my personal account.

For a full list of supported brand icons, visit: Brand Icons | Font Awesome.

`datetimeFormat`

datetimeFormat - is a day.js-style datetime format string to format datetimes in the app. Detailed specification can be found in day.js Docs.

The default value is ISO 8601 full datetime without timezone and replacing character T with space, which looks like 2006-01-02 15:04:05. Here are some other provided day.js format strings if you do not want to refer to its documentation and build them on your own:

new Date().toLocaleString('en-US'): M/D/YYYY, h:mm:ss A, which looks like 1/2/2006, 3:04:05 PM.
new Date().toLocaleString('en-GB'): DD/MM/YYYY, HH:mm:ss, which looks like 2/1/2006, 15:04:05.
new Date().toLocaleString('zh-cn') replacing 上/下午 with A/PM: YYYY/M/D A h:mm:ss, which looks like 2006/1/2 PM 3:04:05.

Getting started

Cache