diff --git a/README.md b/README.md index f7ea7f5..fd2cf8f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@
onedrive-vercel-index -

onedrive-vercel-index

+

onedrive-vercel-index

Get started ยท What's new? ยท Sponsoring

OneDrive public directory listing, powered by Vercel and Next.js

@@ -16,7 +16,7 @@ Showcase, share, preview, and download files inside *your* OneDrive with onedrive-vercel-index - - Completely free to host ๐Ÿ’ธ -- Fast โšก and responsive ๐Ÿ’ฆ +- Super fast โšก and responsive ๐Ÿ’ฆ - Takes less than 15 minutes to setup โฑ๏ธ - Highly customisable โš’๏ธ @@ -36,7 +36,7 @@ Please go to our [discussion forum](https://github.com/spencerwooo/onedrive-verc ## Demo -Live demo at [Spencer's OneDrive](https://drive.spencerwoo.com). +Live demo at [Spencer's OneDrive](https://drive.swo.moe). ![demo](./public/demo.png) @@ -47,19 +47,19 @@ Live demo at [Spencer's OneDrive](https://drive.spencerwoo.com). ๐Ÿ‘€ File preview ๐Ÿ’  List / Grid layouts ๐ŸŽฅ Video and audio @@ -72,12 +72,12 @@ Live demo at [Spencer's OneDrive](https://drive.spencerwoo.com). ๐Ÿ“„ Office preview - ๐Ÿ“ README.md preview - ๐Ÿ“‘ Pagination + ๐Ÿ“ README.md preview + ๐Ÿ“‘ Pagination docx, pptx, xlsx, ... @@ -85,8 +85,8 @@ Live demo at [Spencer's OneDrive](https://drive.spencerwoo.com). For folders with 200 or more items - ๐Ÿ”’ Protected folders - โฌ Multi-file download + ๐Ÿ”’ Protected folders + โฌ Multi-file download ๐Ÿ”Ž Native Search diff --git a/components/CustomEmbedLinkMenu.tsx b/components/CustomEmbedLinkMenu.tsx index 850a8e2..b53fb2c 100644 --- a/components/CustomEmbedLinkMenu.tsx +++ b/components/CustomEmbedLinkMenu.tsx @@ -1,4 +1,4 @@ -import { Dispatch, Fragment, SetStateAction, useState } from 'react' +import { Dispatch, Fragment, SetStateAction, useRef, useState } from 'react' import toast from 'react-hot-toast' import { useTranslation } from 'next-i18next' import { Dialog, Transition } from '@headlessui/react' @@ -23,6 +23,8 @@ export default function CustomEmbedLinkMenu({ const hashedToken = getStoredToken(path) + // Focus on input automatically when menu modal opens + const focusInputRef = useRef(null) const closeMenu = () => setMenuOpen(false) const filename = path.substring(path.lastIndexOf('/') + 1) @@ -30,7 +32,7 @@ export default function CustomEmbedLinkMenu({ return ( - +
{t('Filename')} setName(e.target.value)} />

{t('Default')}

-
+
{`${getBaseUrl()}/api/raw/?path=${getReadablePath(path)}${hashedToken ? `&odpt=${hashedToken}` : ''}`}

{t('Customised')}

-
+
{`${getBaseUrl()}/api/name/`} {name} {`/?path=${getReadablePath(path)}${hashedToken ? `&odpt=${hashedToken}` : ''}`} diff --git a/components/FourOhFour.tsx b/components/FourOhFour.tsx index 66b7a28..4b854ef 100644 --- a/components/FourOhFour.tsx +++ b/components/FourOhFour.tsx @@ -20,7 +20,7 @@ const FourOhFour: React.FC<{ errorMsg: string }> = ({ errorMsg }) => {
Press{' '} - + F12 {' '} and open devtools for more details, or seek help at{' '} diff --git a/components/Navbar.tsx b/components/Navbar.tsx index a876939..47a796f 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -78,10 +78,10 @@ const Navbar = () => { >
- {t('Search ...')} + {t('Search ...')}
-
+
{os === 'mac' ? 'โŒ˜' : 'Ctrl'}
@@ -123,7 +123,7 @@ const Navbar = () => { className="flex items-center space-x-2 p-2 hover:opacity-80 dark:text-white" onClick={() => setIsOpen(true)} > - {t('Logout')} + {t('Logout')} )} diff --git a/components/previews/MarkdownPreview.tsx b/components/previews/MarkdownPreview.tsx index b0a5aa1..da84668 100644 --- a/components/previews/MarkdownPreview.tsx +++ b/components/previews/MarkdownPreview.tsx @@ -1,18 +1,19 @@ -import { useEffect, FC, CSSProperties } from 'react' -import Prism from 'prismjs' +import { FC, CSSProperties, ReactNode } from 'react' import ReactMarkdown from 'react-markdown' import gfm from 'remark-gfm' import remarkMath from 'remark-math' import rehypeKatex from 'rehype-katex' import rehypeRaw from 'rehype-raw' import { useTranslation } from 'next-i18next' +import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter' +import { tomorrowNight } from 'react-syntax-highlighter/dist/cjs/styles/hljs' import 'katex/dist/katex.min.css' +import useFileContent from '../../utils/fetchOnMount' import FourOhFour from '../FourOhFour' import Loading from '../Loading' import DownloadButtonGroup from '../DownloadBtnGtoup' -import useFileContent from '../../utils/fetchOnMount' import { DownloadBtnContainer, PreviewContainer } from './Containers' const MarkdownPreview: FC<{ @@ -28,8 +29,9 @@ const MarkdownPreview: FC<{ // Check if the image is relative path instead of a absolute url const isUrlAbsolute = (url: string | string[]) => url.indexOf('://') > 0 || url.indexOf('//') === 0 - // Custom renderer to render images with relative path - const relativeImagePathRenderer = { + // Custom renderer: + const customRenderer = { + // img: to render images in markdown with relative file paths img: ({ alt, src, @@ -45,17 +47,11 @@ const MarkdownPreview: FC<{ height?: string | number style?: CSSProperties }) => { - if (isUrlAbsolute(src as string)) { - return ( - // eslint-disable-next-line @next/next/no-img-element - {alt} - ) - } return ( // eslint-disable-next-line @next/next/no-img-element {alt} ) }, - } + // code: to render code blocks with react-syntax-highlighter + code({ + className, + children, + inline, + ...props + }: { + className?: string | undefined + children: ReactNode + inline?: boolean + }) { + if (inline) { + return ( + + {children} + + ) + } - useEffect(() => { - Prism.highlightAll() - }, [content]) + const match = /language-(\w+)/.exec(className || '') + return ( + + {String(children).replace(/\n$/, '')} + + ) + }, + } if (error) { return ( @@ -91,8 +109,8 @@ const MarkdownPreview: FC<{ {/* Using rehypeRaw to render HTML inside Markdown is potentially dangerous, use under safe environments. (#18) */} {content}