add permalink for copying

components/DownloadBtn.tsx

@@ -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>
   )
 }

components/FileListing.tsx

@@ -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 (

pages/_app.tsx

@@ -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) {

styles/globals.css

@@ -8,3 +8,10 @@
   @apply mx-auto;
   @apply shadow-md;
 }
+
+.markdown-body ul {
+  @apply list-disc;
+}
+.markdown-body ol {
+  @apply list-decimal;
+}