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 { 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 DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }) => {
|
||||||
|
const { asPath } = useRouter()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="flex flex-wrap space-x-2 justify-center">
|
||||||
|
<Toaster />
|
||||||
<a
|
<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}
|
href={downloadUrl}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
|
@ -13,6 +20,16 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
|
||||||
<FontAwesomeIcon icon="file-download" />
|
<FontAwesomeIcon icon="file-download" />
|
||||||
<span>Download</span>
|
<span>Download</span>
|
||||||
</a>
|
</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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,6 +21,7 @@ import TextPreview from './previews/TextPreview'
|
||||||
import MarkdownPreview from './previews/MarkdownPreview'
|
import MarkdownPreview from './previews/MarkdownPreview'
|
||||||
import CodePreview from './previews/CodePreview'
|
import CodePreview from './previews/CodePreview'
|
||||||
import OfficePreview from './previews/OfficePreview'
|
import OfficePreview from './previews/OfficePreview'
|
||||||
|
import DownloadBtn from './DownloadBtn'
|
||||||
|
|
||||||
// Disabling SSR for some previews (image gallery view, and PDF view)
|
// Disabling SSR for some previews (image gallery view, and PDF view)
|
||||||
const ReactViewer = dynamic(() => import('react-viewer'), { ssr: false })
|
const ReactViewer = dynamic(() => import('react-viewer'), { ssr: false })
|
||||||
|
@ -155,7 +156,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
||||||
rotatable={false}
|
rotatable={false}
|
||||||
noClose={true}
|
noClose={true}
|
||||||
scalable={false}
|
scalable={false}
|
||||||
zoomSpeed={0.5}
|
zoomSpeed={0.2}
|
||||||
downloadable={true}
|
downloadable={true}
|
||||||
downloadInNewWindow={true}
|
downloadInNewWindow={true}
|
||||||
onMaskClick={() => {
|
onMaskClick={() => {
|
||||||
|
@ -165,6 +166,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
||||||
toolbars[0].render = <FontAwesomeIcon icon="plus" />
|
toolbars[0].render = <FontAwesomeIcon icon="plus" />
|
||||||
toolbars[1].render = <FontAwesomeIcon icon="minus" />
|
toolbars[1].render = <FontAwesomeIcon icon="minus" />
|
||||||
toolbars[2].render = <FontAwesomeIcon icon="arrow-left" />
|
toolbars[2].render = <FontAwesomeIcon icon="arrow-left" />
|
||||||
|
toolbars[3].render = <FontAwesomeIcon icon="undo" />
|
||||||
toolbars[4].render = <FontAwesomeIcon icon="arrow-right" />
|
toolbars[4].render = <FontAwesomeIcon icon="arrow-right" />
|
||||||
toolbars[9].render = <FontAwesomeIcon icon="download" />
|
toolbars[9].render = <FontAwesomeIcon icon="download" />
|
||||||
return toolbars.concat([
|
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="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 (
|
return (
|
||||||
|
|
|
@ -23,7 +23,8 @@ import {
|
||||||
faArrowLeft,
|
faArrowLeft,
|
||||||
faArrowRight,
|
faArrowRight,
|
||||||
faFileDownload,
|
faFileDownload,
|
||||||
faCopy
|
faCopy,
|
||||||
|
faUndo,
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
import { faGithub, faMarkdown } from '@fortawesome/free-brands-svg-icons'
|
import { faGithub, faMarkdown } from '@fortawesome/free-brands-svg-icons'
|
||||||
|
|
||||||
|
@ -51,7 +52,8 @@ library.add(
|
||||||
faCopy,
|
faCopy,
|
||||||
faPlus,
|
faPlus,
|
||||||
faMinus,
|
faMinus,
|
||||||
faDownload
|
faDownload,
|
||||||
|
faUndo
|
||||||
)
|
)
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }: AppProps) {
|
function MyApp({ Component, pageProps }: AppProps) {
|
||||||
|
|
|
@ -8,3 +8,10 @@
|
||||||
@apply mx-auto;
|
@apply mx-auto;
|
||||||
@apply shadow-md;
|
@apply shadow-md;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.markdown-body ul {
|
||||||
|
@apply list-disc;
|
||||||
|
}
|
||||||
|
.markdown-body ol {
|
||||||
|
@apply list-decimal;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue