style fix and minor adjustments

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<HTMLInputElement>(null)
   const closeMenu = () => setMenuOpen(false)
 
   const filename = path.substring(path.lastIndexOf('/') + 1)
@@ -30,7 +32,7 @@ export default function CustomEmbedLinkMenu({
 
   return (
     <Transition appear show={menuOpen} as={Fragment}>
-      <Dialog as="div" className="fixed inset-0 z-10 overflow-y-auto" onClose={closeMenu}>
+      <Dialog as="div" className="fixed inset-0 z-10 overflow-y-auto" onClose={closeMenu} initialFocus={focusInputRef}>
         <div className="min-h-screen px-4 text-center">
           <Transition.Child
             as={Fragment}
@@ -77,15 +79,16 @@ export default function CustomEmbedLinkMenu({
                 <h4 className="py-2 text-xs font-medium uppercase tracking-wider">{t('Filename')}</h4>
                 <input
                   className="mb-2 w-full rounded border border-gray-600/10 p-1 font-mono focus:outline-none focus:ring focus:ring-blue-300 dark:bg-gray-600 dark:text-white dark:focus:ring-blue-700"
+                  ref={focusInputRef}
                   value={name}
                   onChange={e => setName(e.target.value)}
                 />
                 <h4 className="py-2 text-xs font-medium uppercase tracking-wider">{t('Default')}</h4>
-                <div className="mb-2 rounded border border-gray-400/20 bg-gray-50 p-1 font-mono dark:bg-gray-800">
+                <div className="mb-2 overflow-hidden rounded border border-gray-400/20 bg-gray-50 p-1 font-mono dark:bg-gray-800">
                   {`${getBaseUrl()}/api/raw/?path=${getReadablePath(path)}${hashedToken ? `&odpt=${hashedToken}` : ''}`}
                 </div>
                 <h4 className="py-2 text-xs font-medium uppercase tracking-wider">{t('Customised')}</h4>
-                <div className="mb-2 rounded border border-gray-400/20 bg-gray-50 p-1 font-mono dark:bg-gray-800">
+                <div className="mb-2 overflow-hidden rounded border border-gray-400/20 bg-gray-50 p-1 font-mono dark:bg-gray-800">
                   <span>{`${getBaseUrl()}/api/name/`}</span>
                   <span className="underline decoration-blue-400 decoration-wavy">{name}</span>
                   <span>{`/?path=${getReadablePath(path)}${hashedToken ? `&odpt=${hashedToken}` : ''}`}</span>

components/FourOhFour.tsx

@@ -20,7 +20,7 @@ const FourOhFour: React.FC<{ errorMsg: string }> = ({ errorMsg }) => {
         <div className="text-sm">
           <Trans>
             Press{' '}
-            <kbd className="rounded border border-opacity-20 bg-gray-100 p-1 font-mono text-xs dark:bg-gray-800">
+            <kbd className="rounded border border-gray-400/20 bg-gray-100 px-1 font-mono text-xs dark:bg-gray-800">
               F12
             </kbd>{' '}
             and open devtools for more details, or seek help at{' '}

components/Navbar.tsx

@@ -78,10 +78,10 @@ const Navbar = () => {
           >
             <div className="flex items-center space-x-2">
               <FontAwesomeIcon className="h-4 w-4" icon="search" />
-              <span className="text-sm font-medium">{t('Search ...')}</span>
+              <span className="truncate text-sm font-medium">{t('Search ...')}</span>
             </div>
 
-            <div className="flex items-center space-x-1">
+            <div className="hidden items-center space-x-1 md:flex">
               <div className="rounded-lg bg-gray-200 px-2 py-1 text-xs font-medium dark:bg-gray-700">
                 {os === 'mac' ? '⌘' : 'Ctrl'}
               </div>
@@ -123,7 +123,7 @@ const Navbar = () => {
               className="flex items-center space-x-2 p-2 hover:opacity-80 dark:text-white"
               onClick={() => setIsOpen(true)}
             >
-              <span className="text-sm font-medium">{t('Logout')}</span>
+              <span className="hidden text-sm font-medium md:inline-block">{t('Logout')}</span>
               <FontAwesomeIcon icon="sign-out-alt" />
             </button>
           )}

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
-          <img alt={alt} src={src} title={title} width={width} height={height} style={style} />
-        )
-      }
       return (
         // eslint-disable-next-line @next/next/no-img-element
         <img
           alt={alt}
-          src={`/api/?path=${parentPath}/${src}&raw=true`}
+          src={isUrlAbsolute(src as string) ? src : `/api/?path=${parentPath}/${src}&raw=true`}
           title={title}
           width={width}
           height={height}
@@ -63,11 +59,33 @@ const MarkdownPreview: FC<{
         />
       )
     },
-  }
+    // code: to render code blocks with react-syntax-highlighter
+    code({
+      className,
+      children,
+      inline,
+      ...props
+    }: {
+      className?: string | undefined
+      children: ReactNode
+      inline?: boolean
+    }) {
+      if (inline) {
+        return (
+          <code className={className} {...props}>
+            {children}
+          </code>
+        )
+      }
 
-  useEffect(() => {
-    Prism.highlightAll()
-  }, [content])
+      const match = /language-(\w+)/.exec(className || '')
+      return (
+        <SyntaxHighlighter language={match ? match[1] : 'language-text'} style={tomorrowNight} PreTag="div" {...props}>
+          {String(children).replace(/\n$/, '')}
+        </SyntaxHighlighter>
+      )
+    },
+  }
 
   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) */}
           <ReactMarkdown
             remarkPlugins={[gfm, remarkMath]}
-            rehypePlugins={[rehypeKatex, rehypeRaw as any]}
-            components={relativeImagePathRenderer}
+            rehypePlugins={[rehypeKatex, rehypeRaw]}
+            components={customRenderer}
           >
             {content}
           </ReactMarkdown>