configurable footer, baseurl from window.location

components/DownloadBtn.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import toast, { Toaster } from 'react-hot-toast'
 import { useRouter } from 'next/router'
 
-import config from '../config/site.json'
+import { getBaseUrl } from '../utils/tools'
 
 const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }) => {
   const { asPath } = useRouter()
@@ -23,7 +23,7 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
       <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`)
+          navigator.clipboard.writeText(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
           toast.success('Copied direct link to clipboard.')
         }}
       >

components/FileListing.tsx

@@ -11,9 +11,9 @@ import useSWR from 'swr'
 import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 
-import config from '../config/site.json'
 import { getExtension, getFileIcon, hasKey } from '../utils/getFileIcon'
 import { extensions, preview } from '../utils/getPreviewType'
+import { getBaseUrl } from '../utils/tools'
 import { VideoPreview } from './previews/VideoPreview'
 import { AudioPreview } from './previews/AudioPreview'
 import Loading from './Loading'
@@ -198,7 +198,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
                   render: <FontAwesomeIcon icon="copy" />,
                   onClick: i => {
                     navigator.clipboard.writeText(
-                      i.alt ? `${config.baseUrl}/api?path=${encodeURIComponent(path + '/' + i.alt)}&raw=true` : ''
+                      i.alt ? `${getBaseUrl()}/api?path=${encodeURIComponent(path + '/' + i.alt)}&raw=true` : ''
                     )
                     toast.success('Copied image permanent link to clipboard.')
                   },

components/Footer.tsx

@@ -1,5 +1,13 @@
+import config from '../config/site.json'
+
+const createFooterMarkup = () => {
+  return {
+    __html: config.footer,
+  }
+}
+
 const Footer = () => {
-  return <div className="p-4 text-sm text-gray-400">Powered by onedrive-vercel-index. Made with ❤ by SpencerWoo.</div>
+  return <div className="p-4 text-sm text-gray-400" dangerouslySetInnerHTML={createFooterMarkup()}></div>
 }
 
 export default Footer

config/site.json

@@ -1,4 +1,4 @@
 {
-  "baseUrl": "https://onedrive-vercel-index.vercel.app",
-  "title": "Spencer's OneDrive Index"
+  "title": "Spencer's OneDrive Index",
+  "footer": "Powered by <a href=\"https://github.com/spencerwooo/onedrive-vercel-index\" target=\"_blank\" rel=\"noopener noreferrer\">onedrive-vercel-index</a>. Made with ❤ by SpencerWoo."
 }

utils/tools.ts

@@ -0,0 +1,6 @@
+export const getBaseUrl = () => {
+  if (typeof window !== 'undefined') {
+    return window.location.origin
+  }
+  return ''
+}