evanferrao
/
onedrive-vercel-index
mirror of https://github.com/evanferrao/onedrive-vercel-index.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

remove all shadows

This commit is contained in:
spencerwooo 2021-12-17 14:35:24 +08:00
parent 476f24164d
commit a27cc18951
No known key found for this signature in database
GPG Key ID: 24CD550268849CA0
12 changed files with 25 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -10,12 +10,8 @@
---
> 🩺 *Under quarantine.* PR, issue response, and development is **temporarily on hold.**
## Features
🚧 **_This is currently a work in progress._**
- [x] File preview (PDF, EPUB, markdown, code, plain text, ...)
- [x] Image preview in gallery mode
- [x] Video and audio preview (mp4, mp3, ...)
@ -25,7 +21,7 @@
- [x] Dark mode
- [x] Protected routes (password protection and authentication) through `.password` files
- [x] Pagination for folders with more than 200 items
- [ ] Documentation for deployment and FAQs
- [x] In browser folder download and multiple file download
## Discussion

14
components/FileListing.tsx
View File

@ -179,14 +179,14 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
if (error) {
return (
<div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<div className="dark:bg-gray-900 p-3 bg-white rounded">
{error.message.includes('401') ? <Auth redirect={path} /> : <FourOhFour errorMsg={error.message} />}
</div>
)
}
if (!data) {
return (
<div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<div className="dark:bg-gray-900 p-3 bg-white rounded">
<Loading loadingText="Loading ..." />
</div>
)
@ -334,7 +334,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
}
return (
<div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded shadow">
<div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded">
<div className="dark:border-gray-700 grid items-center grid-cols-12 px-3 space-x-2 border-b border-gray-200">
<div className="md:col-span-6 col-span-12 font-bold">Name</div>
<div className="md:block hidden col-span-3 font-bold">Last Modified</div>
@ -551,7 +551,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
switch (extensions[fileExtension]) {
case preview.image:
return (
<div className="w-full p-3 bg-white rounded shadow">
<div className="w-full p-3 bg-white rounded">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img className="mx-auto" src={downloadUrl} alt={fileName} />
</div>
@ -582,13 +582,13 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
return <EPUBPreview file={file} />
default:
return <div className="dark:bg-gray-900 bg-white rounded shadow">{fileName}</div>
return <div className="dark:bg-gray-900 bg-white rounded">{fileName}</div>
}
}
return (
<>
<div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<div className="dark:bg-gray-900 p-3 bg-white rounded">
<FourOhFour
errorMsg={`Preview for file ${fileName} is not available, download directly with the button below.`}
/>
@ -601,7 +601,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
}
return (
<div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<div className="dark:bg-gray-900 p-3 bg-white rounded">
<FourOhFour errorMsg={`Cannot preview ${path}`} />
</div>
)

5
components/Navbar.tsx
View File

@ -1,5 +1,4 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { IconName } from '@fortawesome/fontawesome-svg-core'
import { Dialog, Transition } from '@headlessui/react'
import toast, { Toaster } from 'react-hot-toast'
@ -41,7 +40,7 @@ const Navbar = () => {
}
return (
<div className="text-left p-1 bg-white dark:bg-gray-900 sticky top-0 bg-opacity-80 backdrop-blur-md shadow-sm z-[100]">
<div className="text-left p-1 bg-white dark:bg-gray-900 sticky top-0 bg-opacity-80 border-b border-gray-900/10 backdrop-blur-md z-[100]">
<div className="flex items-center justify-between w-full max-w-5xl mx-auto">
<Toaster />
@ -116,7 +115,7 @@ const Navbar = () => {
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<div className="dark:bg-gray-900 inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white rounded shadow-lg">
<div className="dark:bg-gray-900 inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white rounded-lg">
<Dialog.Title className="dark:text-gray-100 text-lg font-bold text-gray-900">
Clear all tokens?
</Dialog.Title>

2
components/previews/AudioPreview.tsx
View File

@ -16,7 +16,7 @@ export const AudioPreview: FunctionComponent<{ file: any }> = ({ file }) => {
return (
<>
<div className="dark:bg-gray-900 dark:text-white w-full p-3 bg-white rounded shadow">
<div className="dark:bg-gray-900 dark:text-white w-full p-3 bg-white rounded">
<div className="md:flex-row md:space-x-4 flex flex-col space-y-4">
<div className="dark:bg-gray-700 h-72 md:w-40 md:h-36 flex items-center justify-center w-full transition-all duration-75 bg-gray-100 rounded">
{playerStatus === PlayerState.Loading ? (

6
components/previews/CodePreview.tsx
View File

@ -18,14 +18,14 @@ const CodePreview: FunctionComponent<{ file: any }> = ({ file }) => {
if (error) {
return (
<div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<div className="dark:bg-gray-900 p-3 bg-white rounded">
<FourOhFour errorMsg={error.message} />
</div>
)
}
if (!data) {
return (
<div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<div className="dark:bg-gray-900 p-3 bg-white rounded">
<Loading loadingText="Loading file content..." />
</div>
)
@ -33,7 +33,7 @@ const CodePreview: FunctionComponent<{ file: any }> = ({ file }) => {
return (
<>
<div className="markdown-body p-3 bg-gray-900 rounded shadow">
<div className="markdown-body p-3 bg-gray-900 rounded">
<pre className={`language-${getExtension(file.name)}`}>
<code>{data}</code>
</pre>

2
components/previews/EPUBPreview.tsx
View File

@ -34,7 +34,7 @@ const EPUBPreview: FunctionComponent<{file: any}> = ({ file }) => {
return (
<>
<div
className="dark:bg-gray-900 md:p-3 no-scrollbar flex flex-col w-full overflow-scroll bg-white rounded shadow"
className="dark:bg-gray-900 md:p-3 no-scrollbar flex flex-col w-full overflow-scroll bg-white rounded"
style={{ maxHeight: '90vh' }}
>
<div className="no-scrollbar flex-1 w-full overflow-scroll" ref={epubContainer} style={{ minHeight: '70vh' }}>

2
components/previews/MarkdownPreview.tsx
View File

@ -85,7 +85,7 @@ const MarkdownPreview: FunctionComponent<{ file: any; path: string; standalone?:
<div
className={
standalone
? 'markdown-body shadow bg-white dark:bg-gray-900 rounded p-3 dark:text-white'
? 'markdown-body bg-white dark:bg-gray-900 rounded p-3 dark:text-white'
: 'markdown-body p-3 dark:text-white'
}
>

2
components/previews/OfficePreview.tsx
View File

@ -13,7 +13,7 @@ const OfficePreview: FunctionComponent<{ file: any }> = ({ file }) => {
return (
<>
<div className="overflow-scroll shadow" ref={docContainer} style={{ maxHeight: '90vh' }}>
<div className="overflow-scroll" ref={docContainer} style={{ maxHeight: '90vh' }}>
<Preview url={encodeURIComponent(file['@microsoft.graph.downloadUrl'])} width={docContainerWidth.toString()} height="800" />
</div>
<div className="mt-4">

2
components/previews/PDFPreview.tsx
View File

@ -26,7 +26,7 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
return (
<>
<div
className="dark:bg-gray-900 md:p-3 no-scrollbar flex flex-col w-full overflow-scroll bg-white rounded shadow"
className="dark:bg-gray-900 md:p-3 no-scrollbar flex flex-col w-full overflow-scroll bg-white rounded"
style={{ maxHeight: '90vh' }}
>
<div className="no-scrollbar flex-1 w-full overflow-scroll" ref={pdfContainter} style={{ maxHeight: '80vh' }}>

6
components/previews/TextPreview.tsx
View File

@ -9,14 +9,14 @@ const TextPreview: FunctionComponent<{ file: any }> = ({ file }) => {
const { data, error } = useStaleSWR(file['@microsoft.graph.downloadUrl'])
if (error) {
return (
<div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<div className="dark:bg-gray-900 p-3 bg-white rounded">
<FourOhFour errorMsg={error.message} />
</div>
)
}
if (!data) {
return (
<div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<div className="dark:bg-gray-900 p-3 bg-white rounded">
<Loading loadingText="Loading file content..." />
</div>
)
@ -24,7 +24,7 @@ const TextPreview: FunctionComponent<{ file: any }> = ({ file }) => {
return (
<>
<div className="dark:bg-gray-900 dark:text-gray-100 p-3 bg-white rounded shadow">
<div className="dark:bg-gray-900 dark:text-gray-100 p-3 bg-white rounded">
<pre className="md:p-3 p-0 overflow-scroll">{data}</pre>
</div>
<div className="mt-4">

2
components/previews/VideoPreview.tsx
View File

@ -14,7 +14,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
return (
<>
<div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<div className="dark:bg-gray-900 p-3 bg-white rounded">
<div className="relative" style={{ paddingTop: '56.25%' }}>
<ReactPlayer
className="absolute top-0 left-0 w-full h-full"

6
config/site.json
View File

@ -2,12 +2,12 @@
"icon": "/icons/128.png",
"title": "Spencer's OneDrive Index",
"maxItems": 100,
"googleFont": "Rubik",
"googleFont": "Inter",
"googleFontWeights": [
"400",
"600"
"700"
],
"footer": "Powered by <a class=\"hover:underline\" href=\"https://github.com/spencerwooo/onedrive-vercel-index\" target=\"_blank\" rel=\"noopener noreferrer\">onedrive-vercel-index</a>. Made with ❤ by SpencerWoo.",
"footer": "Powered by <a class=\"hover:border-b-2\" href=\"https://github.com/spencerwooo/onedrive-vercel-index\" target=\"_blank\" rel=\"noopener noreferrer\">onedrive-vercel-index</a>. Made with ❤ by SpencerWoo.",
"protectedRoutes": [
"/🌞 Private folder/u-need-a-password",
"/🥟 Some test files/Protected route"