add permalink for copying
This commit is contained in:
parent
c7813a7614
commit
5dfc4c4d12
|
@ -1,11 +1,18 @@
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { FunctionComponent } from 'react'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import toast, { Toaster } from 'react-hot-toast'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
import config from '../config/site.json'
|
||||
|
||||
const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }) => {
|
||||
const { asPath } = useRouter()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-wrap space-x-2 justify-center">
|
||||
<Toaster />
|
||||
<a
|
||||
className="mx-auto w-36 flex space-x-4 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600"
|
||||
className="flex-shrink-0 w-36 flex space-x-4 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 mb-2"
|
||||
href={downloadUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
|
@ -13,6 +20,16 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
|
|||
<FontAwesomeIcon icon="file-download" />
|
||||
<span>Download</span>
|
||||
</a>
|
||||
<button
|
||||
className="flex-shrink-0 w-48 flex space-x-4 items-center justify-center bg-yellow-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 mb-2"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(`${config.baseUrl}/api?path=${asPath}&raw=true`)
|
||||
toast.success('Copied direct link to clipboard.')
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon="copy" />
|
||||
<span>Copy direct link</span>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -21,6 +21,7 @@ import TextPreview from './previews/TextPreview'
|
|||
import MarkdownPreview from './previews/MarkdownPreview'
|
||||
import CodePreview from './previews/CodePreview'
|
||||
import OfficePreview from './previews/OfficePreview'
|
||||
import DownloadBtn from './DownloadBtn'
|
||||
|
||||
// Disabling SSR for some previews (image gallery view, and PDF view)
|
||||
const ReactViewer = dynamic(() => import('react-viewer'), { ssr: false })
|
||||
|
@ -155,7 +156,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
|||
rotatable={false}
|
||||
noClose={true}
|
||||
scalable={false}
|
||||
zoomSpeed={0.5}
|
||||
zoomSpeed={0.2}
|
||||
downloadable={true}
|
||||
downloadInNewWindow={true}
|
||||
onMaskClick={() => {
|
||||
|
@ -165,6 +166,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
|||
toolbars[0].render = <FontAwesomeIcon icon="plus" />
|
||||
toolbars[1].render = <FontAwesomeIcon icon="minus" />
|
||||
toolbars[2].render = <FontAwesomeIcon icon="arrow-left" />
|
||||
toolbars[3].render = <FontAwesomeIcon icon="undo" />
|
||||
toolbars[4].render = <FontAwesomeIcon icon="arrow-right" />
|
||||
toolbars[9].render = <FontAwesomeIcon icon="download" />
|
||||
return toolbars.concat([
|
||||
|
@ -243,6 +245,19 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
|||
return <div className="bg-white shadow rounded">{fileName}</div>
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="shadow bg-white rounded p-3">
|
||||
<FourOhFour
|
||||
errorMsg={`Preview for file ${resp.name} is not available, download directly with the button below.`}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<DownloadBtn downloadUrl={downloadUrl} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
@ -23,7 +23,8 @@ import {
|
|||
faArrowLeft,
|
||||
faArrowRight,
|
||||
faFileDownload,
|
||||
faCopy
|
||||
faCopy,
|
||||
faUndo,
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { faGithub, faMarkdown } from '@fortawesome/free-brands-svg-icons'
|
||||
|
||||
|
@ -51,7 +52,8 @@ library.add(
|
|||
faCopy,
|
||||
faPlus,
|
||||
faMinus,
|
||||
faDownload
|
||||
faDownload,
|
||||
faUndo
|
||||
)
|
||||
|
||||
function MyApp({ Component, pageProps }: AppProps) {
|
||||
|
|
|
@ -8,3 +8,10 @@
|
|||
@apply mx-auto;
|
||||
@apply shadow-md;
|
||||
}
|
||||
|
||||
.markdown-body ul {
|
||||
@apply list-disc;
|
||||
}
|
||||
.markdown-body ol {
|
||||
@apply list-decimal;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue