user KV storage & use redaxios instead of axios

README.md

@@ -1,3 +1,23 @@
+Forked onedrive-vercel-index and renamed to onedrive-cf-index-ng
+
+Changes:
+- Migrate to Web Api to adapt to edge runtime (Use `path-browserify` and `redaxios`)
+- Use KV to replace Redis
+- Remove i18n (requires `fs` which is not compatible with Cloudflare Workers)
+- pnpm update & a few packages update
+- IT WORKS on Cloudflare Pages now!
+
+TODO:
+- Cache headers and some todos left in API code
+- Remove redundant configs 
+- Polish Webui and fix small problems
+- Dockerfile for local deploy
+- More tests
+
+Below is the original README
+---
+
+
 <div align="center">
   <img src="./public/header.png" alt="onedrive-vercel-index" />
   <h3><a href="https://drive.swo.moe">onedrive-vercel-index</a></h3>

package.json

@@ -16,12 +16,10 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@haverstack/axios-fetch-adapter": "^0.8.0",
     "@headlessui/react": "^1.7.8",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@vercel/analytics": "^1.0.1",
     "awesome-debounce-promise": "^2.1.0",
-    "axios": "^1.2.6",
     "cors": "^2.8.5",
     "crypto-js": "^4.1.1",
     "csstype": "^3.1.1",

src/components/Auth.tsx

@@ -23,7 +23,7 @@ const Auth: FC<{ redirect: string }> = ({ redirect }) => {
 
       <p className="text-sm font-medium text-gray-500">
         {'This route (the folder itself and the files inside) is password protected. ' +
-         'If you know the password, please enter it below.'}
+          'If you know the password, please enter it below.'}
       </p>
 
       <div className="flex items-center space-x-2">

src/components/CustomEmbedLinkMenu.tsx

@@ -16,7 +16,7 @@ function LinkContainer({ title, value }: { title: string; value: string }) {
         <div className="opacity-80">{value}</div>
         <button
           onClick={() => clipboard.copy(value)}
-          className="absolute top-[0.2rem] right-[0.2rem] w-8 rounded border border-gray-400/40 bg-gray-100 py-1.5 opacity-0 transition-all duration-100 hover:bg-gray-200 group-hover:opacity-100 dark:bg-gray-850 dark:hover:bg-gray-700"
+          className="absolute right-[0.2rem] top-[0.2rem] w-8 rounded border border-gray-400/40 bg-gray-100 py-1.5 opacity-0 transition-all duration-100 hover:bg-gray-200 group-hover:opacity-100 dark:bg-gray-850 dark:hover:bg-gray-700"
         >
           {clipboard.copied ? <FontAwesomeIcon icon="check" /> : <FontAwesomeIcon icon="copy" />}
         </button>

src/components/DownloadBtnGtoup.tsx

@@ -48,7 +48,7 @@ export const DownloadButton = ({
 }) => {
   return (
     <button
-      className={`flex items-center space-x-2 rounded-lg border bg-white py-2 px-4 text-sm font-medium text-gray-900 hover:bg-gray-100/10 focus:z-10 focus:ring-2 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-900 ${btnStyleMap(
+      className={`flex items-center space-x-2 rounded-lg border bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100/10 focus:z-10 focus:ring-2 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-900 ${btnStyleMap(
         btnColor
       )}`}
       title={btnTitle}

src/components/FileListing.tsx

@@ -281,9 +281,7 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
       const files = (async function* () {
         for await (const { meta: c, path: p, isFolder, error } of traverseFolder(path)) {
           if (error) {
-            toast.error(
-              `Failed to download folder ${p}: ${error.status} ${error.message} Skipped it to continue.`
-            )
+            toast.error(`Failed to download folder ${p}: ${error.status} ${error.message} Skipped it to continue.`)
             continue
           }
           const hashedTokenForPath = getStoredToken(p)
@@ -342,9 +340,7 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
           <div className="rounded-b bg-white dark:bg-gray-900 dark:text-gray-100">
             <div className="border-b border-gray-200 p-3 text-center font-mono text-sm text-gray-400 dark:border-gray-700">
               {`- showing ${size} page(s) ` +
-                (isLoadingMore
-                  ? `of ${folderChildren.length} file(s) -`
-                  : `of ${folderChildren.length} file(s) -`)}
+                (isLoadingMore ? `of ${folderChildren.length} file(s) -` : `of ${folderChildren.length} file(s) -`)}
             </div>
             <button
               className={`flex w-full items-center justify-center space-x-2 p-3 disabled:cursor-not-allowed ${

src/components/FolderGridLayout.tsx

@@ -116,7 +116,7 @@ const FolderGridLayout = ({
             key={c.id}
             className="group relative overflow-hidden rounded transition-all duration-100 hover:bg-gray-100 dark:hover:bg-gray-850"
           >
-            <div className="absolute top-0 right-0 z-10 m-1 rounded bg-white/50 py-0.5 opacity-0 transition-all duration-100 group-hover:opacity-100 dark:bg-gray-900/50">
+            <div className="absolute right-0 top-0 z-10 m-1 rounded bg-white/50 py-0.5 opacity-0 transition-all duration-100 group-hover:opacity-100 dark:bg-gray-900/50">
               {c.folder ? (
                 <div>
                   <span
@@ -173,7 +173,7 @@ const FolderGridLayout = ({
             <div
               className={`${
                 selected[c.id] ? 'opacity-100' : 'opacity-0'
-              } absolute top-0 left-0 z-10 m-1 rounded bg-white/50 py-0.5 group-hover:opacity-100 dark:bg-gray-900/50`}
+              } absolute left-0 top-0 z-10 m-1 rounded bg-white/50 py-0.5 group-hover:opacity-100 dark:bg-gray-900/50`}
             >
               {!c.folder && !(c.name === '.password') && (
                 <Checkbox

src/components/Loading.tsx

@@ -1,7 +1,7 @@
 const Loading: React.FC<{ loadingText: string }> = ({ loadingText }) => {
   return (
     <div className="flex items-center justify-center space-x-1 rounded py-32 dark:text-white">
-      <LoadingIcon className="mr-3 -ml-1 h-5 w-5 animate-spin" />
+      <LoadingIcon className="-ml-1 mr-3 h-5 w-5 animate-spin" />
       <div>{loadingText}</div>
     </div>
   )

src/components/Navbar.tsx

@@ -93,11 +93,7 @@ const Navbar = () => {
                 className="flex items-center space-x-2 hover:opacity-80 dark:text-white"
               >
                 <FontAwesomeIcon icon={['fab', l.name.toLowerCase() as IconName]} />
-                <span className="hidden text-sm font-medium md:inline-block">
-                  {
-                    l.name
-                  }
-                </span>
+                <span className="hidden text-sm font-medium md:inline-block">{l.name}</span>
               </a>
             ))}
 

src/components/SearchModal.tsx

@@ -1,4 +1,4 @@
-import axios from 'axios'
+import axios from 'redaxios'
 import useSWR, { SWRResponse } from 'swr'
 import { Dispatch, Fragment, SetStateAction, useState } from 'react'
 import AwesomeDebouncePromise from 'awesome-debounce-promise'
@@ -129,12 +129,7 @@ function SearchResultItemLoadRemote({ result }: { result: OdSearchResult[number]
   }
   if (!data) {
     return (
-      <SearchResultItemTemplate
-        driveItem={result}
-        driveItemPath={''}
-        itemDescription={'Loading ...'}
-        disabled={true}
-      />
+      <SearchResultItemTemplate driveItem={result} driveItemPath={''} itemDescription={'Loading ...'} disabled={true} />
     )
   }
 
@@ -233,9 +228,7 @@ export default function SearchModal({
                   </div>
                 )}
                 {results.error && (
-                  <div className="px-4 py-12 text-center text-sm font-medium">
-                    {`Error: ${results.error.message}`}
-                  </div>
+                  <div className="px-4 py-12 text-center text-sm font-medium">{`Error: ${results.error.message}`}</div>
                 )}
                 {results.result && (
                   <>

src/components/SwitchLayout.tsx

@@ -19,11 +19,7 @@ const SwitchLayout = () => {
         <Listbox.Button className="relative w-full cursor-pointer rounded pl-4">
           <span className="pointer-events-none flex items-center">
             <FontAwesomeIcon className="mr-2 h-3 w-3" icon={preferredLayout.icon} />
-            <span>
-              {
-                preferredLayout.name
-              }
-            </span>
+            <span>{preferredLayout.name}</span>
           </span>
           <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
             <FontAwesomeIcon className="h-3 w-3" icon="chevron-down" />
@@ -51,9 +47,7 @@ const SwitchLayout = () => {
               >
                 <FontAwesomeIcon className="mr-2 h-3 w-3" icon={layout.icon} />
                 <span className={layout.name === preferredLayout.name ? 'font-medium' : 'font-normal'}>
-                  {
-                    layout.name
-                  }
+                  {layout.name}
                 </span>
                 {layout.name === preferredLayout.name && (
                   <span className="absolute inset-y-0 right-3 flex items-center">

src/components/previews/DefaultPreview.tsx

@@ -16,7 +16,7 @@ const DefaultPreview: FC<{ file: OdFileObject }> = ({ file }) => {
         <div className="items-center px-5 py-4 md:flex md:space-x-8">
           <div className="rounded-lg border border-gray-900/10 px-8 py-20 text-center dark:border-gray-500/30">
             <FontAwesomeIcon icon={getFileIcon(file.name, { video: Boolean(file.video) })} />
-            <div className="mt-6 text-sm font-medium line-clamp-3 md:w-28">{file.name}</div>
+            <div className="mt-6 line-clamp-3 text-sm font-medium md:w-28">{file.name}</div>
           </div>
 
           <div className="flex flex-col space-y-2 py-4 md:flex-1">
@@ -40,26 +40,26 @@ const DefaultPreview: FC<{ file: OdFileObject }> = ({ file }) => {
               <table className="block w-full overflow-scroll whitespace-nowrap text-sm md:table">
                 <tbody>
                   <tr className="border-y bg-white dark:border-gray-700 dark:bg-gray-900">
-                    <td className="bg-gray-50 py-1 px-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
+                    <td className="bg-gray-50 px-3 py-1 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
                       Quick XOR
                     </td>
-                    <td className="whitespace-nowrap py-1 px-3 font-mono text-gray-500 dark:text-gray-400">
+                    <td className="whitespace-nowrap px-3 py-1 font-mono text-gray-500 dark:text-gray-400">
                       {file.file.hashes?.quickXorHash ?? 'Unavailable'}
                     </td>
                   </tr>
                   <tr className="border-y bg-white dark:border-gray-700 dark:bg-gray-900">
-                    <td className="bg-gray-50 py-1 px-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
+                    <td className="bg-gray-50 px-3 py-1 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
                       SHA1
                     </td>
-                    <td className="whitespace-nowrap py-1 px-3 font-mono text-gray-500 dark:text-gray-400">
+                    <td className="whitespace-nowrap px-3 py-1 font-mono text-gray-500 dark:text-gray-400">
                       {file.file.hashes?.sha1Hash ?? 'Unavailable'}
                     </td>
                   </tr>
                   <tr className="border-y bg-white dark:border-gray-700 dark:bg-gray-900">
-                    <td className="bg-gray-50 py-1 px-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
+                    <td className="bg-gray-50 px-3 py-1 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
                       SHA256
                     </td>
-                    <td className="whitespace-nowrap py-1 px-3 font-mono text-gray-500 dark:text-gray-400">
+                    <td className="whitespace-nowrap px-3 py-1 font-mono text-gray-500 dark:text-gray-400">
                       {file.file.hashes?.sha256Hash ?? 'Unavailable'}
                     </td>
                   </tr>

src/components/previews/VideoPreview.tsx

@@ -3,7 +3,7 @@ import type { OdFileObject } from '../../types'
 import { FC, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 
-import axios from 'axios'
+import axios from 'redaxios'
 import toast from 'react-hot-toast'
 import Plyr from 'plyr-react'
 import { useAsync } from 'react-async-hook'

src/pages/_app.tsx

@@ -2,7 +2,7 @@ import '@fortawesome/fontawesome-svg-core/styles.css'
 
 import '../styles/globals.css'
 import '../styles/markdown-github.css'
-import { Analytics } from '@vercel/analytics/react';
+import { Analytics } from '@vercel/analytics/react'
 
 // Require had to be used to prevent SSR failure in Next.js
 // Related discussion: https://github.com/FortAwesome/Font-Awesome/issues/19348