feat: remove suggestedUrl and highlight page

SharzyL · SharzyL · commit f7b277275868 · 2025-05-04T16:13:40.000+08:00
diff --git a/README.md b/README.md
@@ -73,7 +73,6 @@ Error 401: incorrect passwd for basic auth
 $ curl -u admin1:this-is-passwd-1 -Fc=@/path/to/file example-pb.com
 {
   "url": "https://example-pb.com/YCDX",
-  "suggestUrl": null,
   "admin": "https://example-pb.com/YCDX:Sij23HwbMjeZwKznY3K5trG8",
   "isPrivate": false
 }
diff --git a/doc/api.md b/doc/api.md
@@ -18,8 +18,6 @@ If the paste is uploaded with a `lang` parameter, an `X-PB-Highlight-Language` h
 
 - `?a=`: optional. Set `Content-Disposition` to `attachment` if present.
 
-- `?lang=<lang>`: optional. Returns a web page with syntax highlight powered by prism.js.
-
 - `?mime=<mime>`: optional. Specify the mime-type, suppressing the effect of `<ext>`. No effect if `lang` is specified (in which case the mime-type is always `text/html`).
 
 Examples: `GET /abcd?lang=js`, `GET /abcd?mime=application/json`.
@@ -37,8 +35,6 @@ https://web.archive.org/web/20210328091143/https://mp.weixin.qq.com/s/5phCQP7i-J
 
 $ curl https://shz.al/~panty.jpg | feh -
 
-$ firefox 'https://shz.al/kf7z?lang=nix'
-
 $ curl 'https://shz.al/~panty.jpg?mime=image/png' -w '%{content_type}' -o /dev/null -sS
 image/png
 
@@ -74,7 +70,7 @@ $ curl -L https://shz.al/u/i-p-
 
 ## GET `/d/<name>`
 
-Return the web page that will decrypt the paste of name `<name>` in browser.
+Return the web page that will display the content of the paste of name `<name>`. If the paste is encrypted, a key can be appended to the URL to decrypt the paste of name `<name>` in browser.
 
 If error occurs, the worker returns status code different from `302`:
 
@@ -84,7 +80,7 @@ If error occurs, the worker returns status code different from `302`:
 Usage example:
 
 ```shell
-$ firefox https://shz.al/e/i-p-
+$ firefox https://shz.al/d/i-p-
 ```
 
 ## GET `/m/<name>`
@@ -210,7 +206,6 @@ Upload your paste. It accept parameters in form-data:
 Explanation of the fields:
 
 - `url`: String. The URL to fetch the paste. When using a customized name, it looks like `https//shz.al/~myname`.
-- `suggestedUrl`: Optional string. The URL that may carry filename or URL redirection.
 - `manageUrl`: String. The URL to update and delete the paste, which is `url` suffixed by `~` and the password.
 - `expirationSeconds`: String. The expiration seconds.
 - `expireAt`: String. An ISO String representing when the paste will expire.
diff --git a/frontend/components/UploadedPanel.tsx b/frontend/components/UploadedPanel.tsx
@@ -80,16 +80,6 @@ export function UploadedPanel({
                   <CopyWidget className={copyWidgetClassNames} getCopyContent={() => pasteResponse.manageUrl} />
                 }
               />
-              {pasteResponse.suggestedUrl && (
-                <Input
-                  {...inputProps}
-                  label={"Suggest URL"}
-                  value={pasteResponse.suggestedUrl}
-                  endContent={
-                    <CopyWidget className={copyWidgetClassNames} getCopyContent={() => pasteResponse.suggestedUrl!} />
-                  }
-                />
-              )}
               <Input {...inputProps} label={"Expiration"} value={new Date(pasteResponse.expireAt).toLocaleString()} />
             </>
           )
diff --git a/frontend/display.html b/frontend/display.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="pages/render/decrypted.tsx"></script>
+    <script type="module" src="pages/render/display.tsx"></script>
   </body>
 </html>
diff --git a/frontend/pages/DisplayPaste.tsx b/frontend/pages/DisplayPaste.tsx
@@ -22,13 +22,13 @@ function isBinaryPath(path: string) {
   return binaryExtensions.includes(path.replace(/.*\./, ""))
 }
 
-export function DecryptPaste() {
+export function DisplayPaste() {
   const [pasteFile, setPasteFile] = useState<File | undefined>(undefined)
   const [pasteContentBuffer, setPasteContentBuffer] = useState<ArrayBuffer | undefined>(undefined)
   const [pasteLang, setPasteLang] = useState<string | undefined>(undefined)
 
   const [isFileBinary, setFileBinary] = useState(false)
-  const [isDecrypted, setDecrypted] = useState(false)
+  const [isDecrypted, setDecrypted] = useState<"not encrypted" | "encrypted" | "decrypted">("not encrypted")
   const [forceShowBinary, setForceShowBinary] = useState(false)
   const showFileContent = pasteFile !== undefined && (!isFileBinary || forceShowBinary)
 
@@ -40,11 +40,12 @@ export function DecryptPaste() {
 
   const pasteStringContent = pasteContentBuffer && new TextDecoder().decode(pasteContentBuffer)
 
-  const pasteLineCount = (pasteStringContent?.match(/\n/g)?.length || 0) + 1
+  const highlightedHTML = pasteStringContent ? highlightHTML(hljs, pasteLang, pasteStringContent) : ""
+  const pasteLineCount = (highlightedHTML?.match(/\n/g)?.length || 0) + 1
 
   // uncomment the following lines for testing
   // const url = new URL("http://localhost:8787/GQbf")
-  const url = location
+  const url = new URL(location.toString())
 
   const { name, ext, filename } = parsePath(url.pathname)
 
@@ -68,22 +69,24 @@ export function DecryptPaste() {
           filenameFromDisp = filenameFromDisp.replace(/.encrypted$/, "")
         }
 
-        const lang = resp.headers.get("X-PB-Highlight-Language")
+        const lang = url.searchParams.get("lang") || resp.headers.get("X-PB-Highlight-Language")
 
         const inferredFilename = filename || (ext && name + ext) || filenameFromDisp
         const respBytes = await resp.bytes()
         const isBinary = lang === null && inferredFilename !== undefined && isBinaryPath(inferredFilename)
         setPasteLang(lang || undefined)
-        setFileBinary(isBinary)
 
-        if (scheme === null) {
+        const keyString = url.hash.slice(1)
+        if (scheme === null || keyString.length === 0) {
           setPasteFile(new File([respBytes], inferredFilename || name))
           setPasteContentBuffer(respBytes)
-        } else {
-          const keyString = url.hash.slice(1)
-          if (keyString.length === 0) {
-            showModal("Error", "No encryption key is given. You should append the key after a “#” character in the URL")
+          if (scheme) {
+            setDecrypted("encrypted")
+            setFileBinary(true)
+          } else {
+            setFileBinary(isBinary)
           }
+        } else {
           let key: CryptoKey | undefined
           try {
             key = await decodeKey(scheme, keyString)
@@ -108,7 +111,7 @@ export function DecryptPaste() {
 
           const isBinary = lang === null && inferredFilename !== undefined && isBinaryPath(inferredFilename)
           setFileBinary(isBinary)
-          setDecrypted(true)
+          setDecrypted("decrypted")
         }
       } finally {
         setIsLoading(false)
@@ -120,17 +123,6 @@ export function DecryptPaste() {
     })
   }, [])
 
-  const fileIndicator = pasteFile && (
-    <div className="text-foreground-600 mb-2 text-small">
-      {`${pasteFile?.name} (${formatSize(pasteFile.size)})` + (pasteLang ? ` (${pasteLang})` : "")}
-      {forceShowBinary && (
-        <button className="ml-2 text-primary-500" onClick={() => setForceShowBinary(false)}>
-          (Click to hide)
-        </button>
-      )}
-    </div>
-  )
-
   const binaryFileIndicator = pasteFile && (
     <div className="absolute top-[50%] left-[50%] translate-[-50%] flex flex-col items-center w-full">
       <div className="text-foreground-600 mb-2">{`${pasteFile?.name} (${formatSize(pasteFile.size)})`}</div>
@@ -159,7 +151,9 @@ export function DecryptPaste() {
             </Link>
             <span className="mx-2">{" / "}</span>
             <code>{name}</code>
-            <span className="ml-1">{isLoading ? " (Loading…)" : isDecrypted ? " (Decrypted)" : ""}</span>
+            <span className="ml-1">
+              {isDecrypted === "decrypted" ? " (Decrypted)" : isDecrypted === "encrypted" ? " (Encrypted)" : ""}
+            </span>
           </h1>
           {showFileContent && (
             <Tooltip content={`Copy to clipboard`}>
@@ -178,19 +172,33 @@ export function DecryptPaste() {
           <DarkModeToggle modeSelection={modeSelection} setModeSelection={setModeSelection} />
         </div>
         <div className="my-4">
-          <div className={`min-h-[30rem] w-full bg-default-50 rounded-lg p-3 relative ${tst}`}>
+          <div className={`w-full bg-default-100 rounded-lg p-3 relative ${tst}`}>
             {isLoading ? (
-              <CircularProgress className="absolute top-[50%] left-[50%] translate-[-50%]" />
+              <div className={"h-[10em]"}>
+                <CircularProgress
+                  className="h-[10em] absolute top-[50%] left-[50%] translate-[-50%]"
+                  label={"Loading..."}
+                />
+              </div>
             ) : (
               pasteFile && (
-                <div>
+                <div className={showFileContent ? "" : "h-[10em]"}>
                   {showFileContent ? (
                     <>
-                      {fileIndicator}
-                      <div className="font-mono whitespace-pre-wrap relative" role="article">
+                      <div className="text-foreground-600 mb-2 text-small flex flex-row gap-2">
+                        <span>{pasteFile?.name}</span>
+                        <span>{`(${formatSize(pasteFile.size)})`}</span>
+                        {forceShowBinary && (
+                          <button className="ml-2 text-primary-500" onClick={() => setForceShowBinary(false)}>
+                            (Click to hide)
+                          </button>
+                        )}
+                        {pasteLang && <span className={"grow text-right"}>{pasteLang}</span>}
+                      </div>
+                      <div className="font-mono relative" role="article">
                         <pre
                           style={{ paddingLeft: `${Math.floor(Math.log10(pasteLineCount)) + 2}em` }}
-                          dangerouslySetInnerHTML={{ __html: highlightHTML(hljs, pasteLang, pasteStringContent!) }}
+                          dangerouslySetInnerHTML={{ __html: highlightedHTML }}
                         />
                         <span
                           className={
diff --git a/frontend/pages/render/display.tsx b/frontend/pages/render/display.tsx
@@ -1,14 +1,14 @@
 import ReactDOM from "react-dom/client"
 import React from "react"
 import { HeroUIProvider } from "@heroui/react"
-import { DecryptPaste } from "../DecryptPaste.js"
+import { DisplayPaste } from "../DisplayPaste.js"
 
 const root = ReactDOM.createRoot(document.getElementById("root")!)
 
 root.render(
   <React.StrictMode>
     <HeroUIProvider>
-      <DecryptPaste />
+      <DisplayPaste />
     </HeroUIProvider>
   </React.StrictMode>,
 )
diff --git a/frontend/style.css b/frontend/style.css
@@ -10,7 +10,6 @@
     "Noto Color Emoji";
   --font-mono:
     "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --default-transition-duration: 5s;
 }
 
 .color-tst {
@@ -45,3 +44,8 @@
   color: hsl(var(--heroui-foreground));
   background-color: hsl(var(--heroui-background));
 }
+
+/* https://stackoverflow.com/questions/43492826/why-does-the-browser-not-render-a-line-break-caused-by-a-trailing-newline-charac */
+pre::after {
+  content: "\A";
+}
diff --git a/frontend/test/display.spec.tsx b/frontend/test/display.spec.tsx
@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeAll, afterEach, afterAll, vi } from "vitest"
 import { cleanup, render, screen } from "@testing-library/react"
-import { DecryptPaste } from "../pages/DecryptPaste.js"
+import { DisplayPaste } from "../pages/DisplayPaste.js"
 
 import "@testing-library/jest-dom/vitest"
 import { userEvent } from "@testing-library/user-event"
@@ -42,7 +42,7 @@ describe("decrypt page", async () => {
   it("decrypt correctly", async () => {
     vi.stubGlobal("location", new URL(`https://example.com/e/abcd#${await encodeKey(key)}`))
     global.URL.createObjectURL = () => ""
-    render(<DecryptPaste />)
+    render(<DisplayPaste />)
 
     const main = screen.getByRole("main")
     await userEvent.click(main) // meaningless click, just ensure useEffect is done
diff --git a/frontend/utils/uploader.ts b/frontend/utils/uploader.ts
@@ -45,6 +45,7 @@ export async function uploadPaste(
         onEncryptionKeyChange(key)
         return new File([ciphertext], editorState.editFilename || "")
       } else {
+        onEncryptionKeyChange(undefined)
         return new File([editorState.editContent], editorState.editFilename || "")
       }
     }
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
@@ -50,7 +50,7 @@ export default defineConfig(({ mode }) => {
       rollupOptions: {
         input: {
           index: resolve(__dirname, "index.html"),
-          decrypt: resolve(__dirname, "decrypt.html"),
+          display: resolve(__dirname, "display.html"),
         },
       },
     },
diff --git a/shared/interfaces.ts b/shared/interfaces.ts
@@ -4,7 +4,6 @@ export type PasteLocation = "KV" | "R2"
 
 export type PasteResponse = {
   url: string
-  suggestedUrl?: string
   manageUrl: string
   expirationSeconds: number
   expireAt: string
diff --git a/worker/handlers/handleRead.ts b/worker/handlers/handleRead.ts
@@ -3,7 +3,6 @@ import { getDocPage } from "../pages/docs.js"
 import { verifyAuth } from "../pages/auth.js"
 import mime from "mime"
 import { makeMarkdown } from "../pages/markdown.js"
-import { makeHighlight } from "../pages/highlight.js"
 import { getPaste, getPasteMetadata, PasteMetadata, PasteWithMetadata } from "../storage/storage.js"
 import { MetaResponse } from "../../shared/interfaces.js"
 import { parsePath } from "../../shared/parsers.js"
@@ -204,7 +203,8 @@ export async function handleGet(request: Request, env: Env, ctx: ExecutionContex
   // handle encrypted
   if (role === "d") {
     const pageUrl = url
-    pageUrl.pathname = "/decrypt.html"
+    pageUrl.search = ""
+    pageUrl.pathname = "/display.html"
     const page = decode(await (await env.ASSETS.fetch(pageUrl)).arrayBuffer()).replace(
       "{{PASTE_NAME}}",
       name + (filename ? "/" + filename : ext ? ext : ""),
@@ -218,18 +218,6 @@ export async function handleGet(request: Request, env: Env, ctx: ExecutionContex
     })
   }
 
-  // handle language highlight
-  const lang = url.searchParams.get("lang")
-  if (lang) {
-    return new Response(shouldGetPasteContent ? makeHighlight(await decodeMaybeStream(item.paste), lang) : null, {
-      headers: {
-        "Content-Type": `text/html;charset=UTF-8`,
-        ...pasteCacheHeader(env),
-        ...lastModifiedHeader(item.metadata),
-      },
-    })
-  }
-
   // handle default
   const headers: Headers = {
     "Content-Type": `${inferred_mime}`,
diff --git a/worker/handlers/handleWrite.ts b/worker/handlers/handleWrite.ts
@@ -1,5 +1,5 @@
 import { verifyAuth } from "../pages/auth.js"
-import { decode, genRandStr, isLegalUrl, WorkerError } from "../common.js"
+import { decode, genRandStr, WorkerError } from "../common.js"
 import { createPaste, getPasteMetadata, pasteNameAvailable, updatePaste } from "../storage/storage.js"
 import {
   DEFAULT_PASSWD_LEN,
@@ -15,16 +15,6 @@ import { PasteResponse } from "../../shared/interfaces.js"
 import { MaxFileSizeExceededError, MultipartParseError, parseMultipartRequest } from "@mjackson/multipart-parser"
 import { handleMPUComplete, handleMPUCreate, handleMPUCreateUpdate, handleMPUResume } from "./handleMPU.js"
 
-function suggestUrl(short: string, baseUrl: string, filename?: string, contentAsString?: string) {
-  if (filename) {
-    return `${baseUrl}/${short}/${encodeURIComponent(filename)}`
-  } else if (contentAsString && isLegalUrl(contentAsString)) {
-    return `${baseUrl}/u/${short}`
-  } else {
-    return undefined
-  }
-}
-
 type ParsedMultipartPart = {
   filename?: string
   content: ReadableStream | ArrayBuffer
@@ -212,7 +202,6 @@ export async function handlePostOrPut(
     return makeResponse(
       {
         url: accessUrl(pasteName),
-        suggestedUrl: suggestUrl(pasteName, env.DEPLOY_URL, filename, contentAsString()),
         manageUrl: manageUrl(pasteName, newPasswd),
         expirationSeconds,
         expireAt: new Date(now.getTime() + 1000 * expirationSeconds).toISOString(),
@@ -253,7 +242,6 @@ export async function handlePostOrPut(
     return makeResponse(
       {
         url: accessUrl(pasteName),
-        suggestedUrl: suggestUrl(pasteName, env.DEPLOY_URL, filename, contentAsString()),
         manageUrl: manageUrl(pasteName, password),
         expirationSeconds,
         expireAt: new Date(now.getTime() + 1000 * expirationSeconds).toISOString(),
diff --git a/worker/pages/highlight.ts b/worker/pages/highlight.ts
diff --git a/worker/test/basic.spec.ts b/worker/test/basic.spec.ts
diff --git a/worker/test/controlHeaders.spec.ts b/worker/test/controlHeaders.spec.ts
diff --git a/worker/test/roles.spec.ts b/worker/test/roles.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,6 @@ Error 401: incorrect passwd for basic auth`
`73`	`73`	`$ curl -u admin1:this-is-passwd-1 -Fc=@/path/to/file example-pb.com`
`74`	`74`	`{`
`75`	`75`	`"url": "https://example-pb.com/YCDX",`
`76`		`- "suggestUrl": null,`
`77`	`76`	`"admin": "https://example-pb.com/YCDX:Sij23HwbMjeZwKznY3K5trG8",`
`78`	`77`	`"isPrivate": false`
`79`	`78`	`}`
Original file line number	Diff line number	Diff line change
`@@ -45,6 +45,7 @@ export async function uploadPaste(`
`45`	`45`	`onEncryptionKeyChange(key)`
`46`	`46`	`return new File([ciphertext], editorState.editFilename \|\| "")`
`47`	`47`	`} else {`
	`48`	`+ onEncryptionKeyChange(undefined)`
`48`	`49`	`return new File([editorState.editContent], editorState.editFilename \|\| "")`
`49`	`50`	`}`
`50`	`51`	`}`