Don't focus editor in readonly mode

This reverts commit 0ee58ed085.

.github/workflows/pages.yml

@@ -0,0 +1,45 @@
+name: Deploy to GitHub Pages
+
+on:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'npm'
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Build
+        run: yarn build
+        env:
+          #VITE_BYTEBIN_URL: "https://your-bytebin.example.com/"
+          VITE_USE_QUERY_ROUTING: "true" # required for github pages
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload dist folder
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

API.md

@@ -0,0 +1,42 @@
+<p align="center">
+  <img src=".github/banner.svg">
+</p>
+
+# API
+paste has a simple HTTP API which can be used to read and write pastes programmatically.
+
+> [!IMPORTANT]
+> If you are using the official instance of paste (https://pastes.dev), please note the following:
+> 
+> * You must **provide a  `User-Agent` header** to uniquely identify your application in all requests. This should include the application name and contact information, e.g. `ExampleApp (github.com/ExampleUser/ExampleApp)` or `MyExampleScript (github.com/ExampleUser)`.
+> * You must **only upload content when prompted by a user action**, e.g. a button click or command line input. Automated or scheduled uploads are not allowed.
+> * An additional **terms of service** applies. In summary:
+>   * No Illegal Use *(no illegal, harmful or unlawful content)*
+>   * No Malicious Content *(no malware, phishing, personal data without consent, etc.)*
+>   * Content Responsibility *(you are responsible for what you post)*
+>   * Moderation *(we reserve the right to remove content or block access)*
+>   * No Liability *(the service is provided "as is" without warranties)*
+>
+> Otherwise, please enjoy using the service! :)
+
+### Base URL
+The base URL for the 'official' paste instance is: `https://api.pastes.dev/`.
+
+If you are self-hosting, use the base URL of your own instance. With the default Docker Compose setup, this will be `http://localhost:8080/data/`.
+
+## Upload: `POST {BASE URL}/post`
+
+To upload content, send an HTTP `POST` request to `{BASE URL}/post`.
+
+* Include the content in the request body.
+* Specify the language with the `Content-Type: text/<language>` header
+* If using the official instance, please remember to provide a suitable `User-Agent` header as well. (see above for more details)
+* The paste "key" is returned in the `Location` header, and in the response body as a JSON object in the format `{"key": "<key>"}`.**
+
+## Read: `GET {BASE URL}/{key}`
+
+To read content, send an HTTP `GET` request to `{BASE URL}/{key}`.
+
+* Replace `{key}` with the id of the paste.
+* The content is returned in the response body.
+* The `Content-Type` header is `text/<language>`, where language is the id of the language the paste was saved with.

README.md

@@ -23,18 +23,6 @@ You can submit content most easily using [curl](https://curl.se/docs/manpage.htm
 > echo "Hello world" | curl -T - https://api.pastes.dev/post
 ```
 
-<details>
-  <summary>If curl isn't installed on your system, you can also post using <b>netcat</b>.</summary>
-  
-  ```shell
-  # Pipe in some output from any command
-  > echo "Hello world" | nc nc.pastes.dev 1337
-  
-  # Upload the contents of a file
-  > cat example.txt | nc nc.pastes.dev 1337
-  ```
-</details>
-
 <details>
   <summary>If you don't want to do so much typing, you can create a shorter <b>alias</b>.</summary>
   
@@ -56,8 +44,8 @@ You can submit content most easily using [curl](https://curl.se/docs/manpage.htm
   ```
 </details>
 
-##### 3) From Code
-Send GET/POST/PUT requests to `https://api.pastes.dev/`. More info [below](#pastesdev-api).
+##### 3) From Code / Scripts
+Please see the [API Documentation](/API.md). :)
 
 ___
 
@@ -66,28 +54,6 @@ The frontend _(this repository)_ is written using the React framework. The backe
 
 The user-interface is based on the [Monaco Editor](https://microsoft.github.io/monaco-editor/), the engine behind the popular Visual Studio Code text editor. It's quite simple; it supports syntax highlighting, automatic indentation, many supported languages, themes, zooming in/out, linking to specific lines or sections, and more!
 
-### pastes.dev
-
-I host a public instance at https://pastes.dev. Please feel free to use it to share code/configs/whatever!
-
-Please note that the following (very-non-legally worded) [terms of service](https://github.com/lucko/bytebin#public-instances) apply.   
-If you come across any content which is illegal or infringes on copyright, please [get in touch](https://lucko.me/contact) and let me know so I can remove it.
-
-Uploaded content is retained for 90 days then deleted.
-
-### pastes.dev API
-
-* To **read** content, send a HTTP `GET` request to `https://api.pastes.dev/<key>`.
-  * Replace `<key>` with the id of the paste.
-  * The content is returned in the response body.
-  * The `Content-Type` header is `text/<language>`, where language is the id of the language the paste was saved with.
-* To **upload** content, send a HTTP `POST` request to `https://api.pastes.dev/post`.
-  * Include the content in the request body.
-  * Specify the language with the `Content-Type: text/<language>` header, and please provide a `User-Agent` header too.
-  * The paste "key" is returned in the `Location` header, or in the response body as a JSON object in the format `{"key": "<key>"}`.
-
-The API is powered by the [bytebin](https://github.com/lucko/bytebin) service, so more information about how it works can be found there.
-
 ___
 
 ### Self-hosting

package.json

@@ -11,34 +11,35 @@
     "format": "prettier --write '**/*.ts' '**/*.tsx' '**/*.css'"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "@monaco-editor/react": "^4.6.0",
     "@catppuccin/palette": "^1.7.1",
+    "@monaco-editor/react": "^4.8.0-rc.3",
     "copy-to-clipboard": "^3.3.3",
     "history": "^5.3.0",
-    "monaco-editor": "^0.52.0",
-    "monaco-themes": "^0.4.4",
+    "monaco-editor": "^0.55.1",
+    "monaco-themes": "^0.4.8",
     "pako": "^2.1.0",
+    "react": "^19.2.4",
     "react-device-detect": "^2.2.3",
-    "styled-components": "^6.1.13",
+    "react-dom": "^19.2.4",
+    "styled-components": "^6.3.11",
     "whatwg-mimetype": "^3.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.17.0",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@types/pako": "^2.0.3",
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^25.3.0",
+    "@types/pako": "^2.0.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@types/whatwg-mimetype": "^3.0.2",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "globals": "^15.14.0",
-    "typescript": "~5.6.2",
-    "typescript-eslint": "^8.18.2",
-    "vite": "^6.0.5",
-    "prettier": "^3.4.2",
-    "prettier-plugin-organize-imports": "^4.1.0"
+    "@vitejs/plugin-react-swc": "^4.2.3",
+    "eslint": "^10.0.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.3.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^7.3.1"
   }
 }

src/App.tsx

@@ -1,5 +1,10 @@
 import { useEffect, useState } from 'react';
+import { ThemeProvider } from 'styled-components';
+import About from './components/About.tsx';
 import Editor from './components/Editor';
+import usePreference from './hooks/usePreference.ts';
+import themes, { Themes } from './style/themes.ts';
+import { useQueryRouting } from './util/constants';
 import { loadFromBytebin } from './util/storage';
 
 const INITIAL = Symbol();
@@ -14,6 +19,12 @@ export default function App() {
   const [forcedContent, setForcedContent] = useState<string>('');
   const [actualContent, setActualContent] = useState<string>('');
   const [contentType, setContentType] = useState<string>();
+  const [theme, setTheme] = usePreference<keyof Themes>(
+    'theme',
+    'dark',
+    pref => !!themes[pref]
+  );
+  const [showAbout, setShowAbout] = useState<boolean>(false);
 
   function setContent(content: string) {
     setActualContent(content);
@@ -22,6 +33,7 @@ export default function App() {
 
   useEffect(() => {
     if (pasteId && state === INITIAL) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setState(LOADING);
       setContent('Loading...');
 
@@ -40,13 +52,19 @@ export default function App() {
   }, [pasteId, state]);
 
   return (
+    <ThemeProvider theme={themes[theme]}>
       <Editor
         forcedContent={forcedContent}
         actualContent={actualContent}
         setActualContent={setActualContent}
         contentType={contentType}
         pasteId={pasteId}
+        theme={theme}
+        setTheme={setTheme}
+        setShowAbout={setShowAbout}
       />
+      {showAbout && <About setVisible={setShowAbout} />}
+    </ThemeProvider>
   );
 }
 
@@ -65,10 +83,10 @@ function get404Message(pasteId: string) {
 }
 
 function getPasteIdFromUrl() {
+  if (useQueryRouting) {
+    return new URLSearchParams(window.location.search).get('id') ?? undefined;
+  }
+
   const path = window.location.pathname;
-  if (path && /^\/[a-zA-Z0-9]+$/.test(path)) {
-    return path.substring(1);
-  } else {
-    return undefined;
-  }
+  return /^\/[a-zA-Z0-9]+$/.test(path) ? path.substring(1) : undefined;
 }

src/components/About.tsx

@@ -0,0 +1,202 @@
+import { useCallback, useState } from 'react';
+import styled from 'styled-components';
+import Button from './Button.tsx';
+
+const CloseButton = ({
+  setVisible,
+}: {
+  setVisible: (show: boolean) => void;
+}) => {
+  const close = useCallback(() => {
+    setVisible(false);
+  }, [setVisible]);
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: '5px',
+        right: '5px',
+      }}
+    >
+      <Button style={{ padding: '5px' }} onClick={close}>
+        [X]
+      </Button>
+    </div>
+  );
+};
+
+export default function About({
+  setVisible,
+}: {
+  setVisible: (show: boolean) => void;
+}) {
+  const official = window.location.hostname === 'pastes.dev';
+  const [showTos, setShowTos] = useState<boolean>(false);
+
+  if (showTos) {
+    return <Tos setVisible={setShowTos} />;
+  }
+
+  return (
+    <AboutPanel>
+      <CloseButton setVisible={setVisible} />
+      <BannerContainer>
+        <Banner>{'{paste}'}</Banner>
+      </BannerContainer>
+      <p>
+        <b>paste is a simple web app for writing & sharing code</b>. It's a
+        different take on conventional pastebin sites like pastebin.com or
+        hastebin.
+      </p>
+      {official && (
+        <>
+          <p>
+            <b>pastes.dev</b> is the official, publicly accessible paste
+            instance, and can be used by anyone, subject to the{' '}
+            <a
+              href="#"
+              onClick={e => {
+                setShowTos(true);
+                e.preventDefault();
+              }}
+            >
+              Terms of Service
+            </a>
+            .
+          </p>
+          <p>
+            To access pastes.dev programmatically, please use the{' '}
+            <a
+              href="https://github.com/lucko/paste/blob/master/API.md"
+              target="_blank"
+            >
+              API
+            </a>
+            . :)
+          </p>
+          <p>
+            Please{' '}
+            <b>
+              <a
+                href="#"
+                onClick={e => {
+                  setShowTos(true);
+                  e.preventDefault();
+                }}
+              >
+                report
+              </a>
+            </b>{' '}
+            illegal, malicious, or abusive content so it can be removed.
+          </p>
+        </>
+      )}
+      <p style={{ textAlign: 'center' }}>
+        <a href="https://github.com/lucko/paste" target="_blank">
+          paste
+        </a>{' '}
+        is free & open source on GitHub.
+        <br />
+        Copyright &copy; 2021-{new Date().getFullYear()}{' '}
+        <a href="https://github.com/lucko" target="_blank">
+          lucko
+        </a>{' '}
+        & other paste{' '}
+        <a
+          href="https://github.com/lucko/paste/graphs/contributors"
+          target="_blank"
+        >
+          contributors
+        </a>
+        .
+      </p>
+    </AboutPanel>
+  );
+}
+
+const Tos = ({ setVisible }: { setVisible: (show: boolean) => void }) => {
+  return (
+    <AboutPanel>
+      <CloseButton setVisible={setVisible} />
+      <h1>Terms of Service</h1>
+      <p>
+        Welcome to pastes.dev. By using this service, you agree to the following
+        terms:
+      </p>
+      <ol>
+        <li>
+          <b>No Illegal Use:</b> You may not use pastes.dev to share, store, or
+          distribute any content that is illegal, harmful, or violates any laws
+          or regulations.
+        </li>
+        <li>
+          <b>No Malicious Content:</b> Do not upload or share content intended
+          to harm others, including but not limited to malware, phishing links,
+          or personal data without consent.
+        </li>
+        <li>
+          <b>Content Responsibility:</b> You are solely responsible for the
+          content you post. We do not review content and are not liable for what
+          users choose to share.
+        </li>
+        <li>
+          <b>Moderation:</b> We reserve the right to remove any content at our
+          discretion, and to restrict or terminate access to the service for
+          abuse or violations of these terms.
+        </li>
+        <li>
+          <b>No Liability:</b> This service is provided "as is" with no
+          warranties. We do not guarantee uptime, data retention, or
+          availability.
+        </li>
+      </ol>
+      <p>
+        By using pastes.dev, you accept these terms. If you do not agree, please
+        do not use the service.
+      </p>
+      <h2>Reporting Abuse</h2>
+      <p>
+        If you encounter illegal or malicious content, please report it by email
+        to <span>report-abuse@pastes.dev</span>.
+      </p>
+    </AboutPanel>
+  );
+};
+
+const AboutPanel = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 99;
+  padding: 10px;
+  max-width: 650px;
+  max-height: 100vh;
+  overflow-y: auto;
+
+  color: ${props => props.theme.primary};
+  background-color: ${props => props.theme.secondary};
+
+  span {
+    color: ${props => props.theme.logo};
+  }
+
+  a {
+    color: ${props => props.theme.logo};
+  }
+`;
+
+const BannerContainer = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
+const Banner = styled.div`
+  background-color: ${props => props.theme.background};
+  color: ${props => props.theme.logo};
+  border-radius: 20px;
+  font-size: 70px;
+  letter-spacing: -5px;
+  padding: 10px;
+  font-weight: bold;
+`;

src/components/Editor.tsx

@@ -1,9 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
 import { isMobile } from 'react-device-detect';
-import { ThemeProvider } from 'styled-components';
 
 import usePreference from '../hooks/usePreference';
-import themes, { Themes } from '../style/themes';
+import { Themes } from '../style/themes.ts';
 import EditorControls from './EditorControls';
 import EditorGlobalStyle from './EditorGlobalStyle';
 import EditorTextArea from './EditorTextArea';
@@ -14,6 +13,9 @@ export interface EditorProps {
   setActualContent: (value: string) => void;
   contentType?: string;
   pasteId?: string;
+  theme: keyof Themes;
+  setTheme: (value: keyof Themes) => void;
+  setShowAbout: (value: boolean) => void;
 }
 
 export type ResetFunction = () => void;
@@ -24,26 +26,29 @@ export default function Editor({
   setActualContent,
   contentType,
   pasteId,
+  theme,
+  setTheme,
+  setShowAbout,
 }: EditorProps) {
   const [language, setLanguage] = useState<string>('plain');
   const [readOnly, setReadOnly] = useState<boolean>(isMobile && !!pasteId);
   const resetFunction = useRef<ResetFunction>(null);
 
-  const [theme, setTheme] = usePreference<keyof Themes>(
-    'theme',
-    'dark',
-    pref => !!themes[pref]
-  );
   const [fontSize, setFontSize, fontSizeCheck] = usePreference<number>(
     'fontsize',
     16,
     pref => pref >= 10 && pref <= 22
   );
 
-  const [wordWrap, setWordWrap] = usePreference<boolean>('wordwrap-enabled', true, (value) => true)
+  const [wordWrap, setWordWrap] = usePreference<boolean>(
+    'wordwrap',
+    true,
+    () => true
+  );
 
   useEffect(() => {
     if (contentType) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setLanguage(contentType);
     }
   }, [contentType]);
@@ -57,7 +62,6 @@ export default function Editor({
 
   return (
     <>
-      <ThemeProvider theme={themes[theme]}>
       <EditorGlobalStyle />
       <EditorControls
         actualContent={actualContent}
@@ -71,19 +75,18 @@ export default function Editor({
         wordWrap={wordWrap}
         setWordWrap={setWordWrap}
         zoom={zoom}
+        setShowAbout={setShowAbout}
       />
       <EditorTextArea
         forcedContent={forcedContent}
         actualContent={actualContent}
         setActualContent={setActualContent}
-          theme={themes[theme]}
         language={language}
         fontSize={fontSize}
         readOnly={readOnly}
         wordWrap={wordWrap}
-          resetFunction={resetFunction}
+        resetFunctionRef={resetFunction}
       />
-      </ThemeProvider>
     </>
   );
 }

src/components/EditorControls.tsx

@@ -4,6 +4,7 @@ import { RefObject, useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import themes, { Themes } from '../style/themes';
+import { useQueryRouting } from '../util/constants';
 import { languages } from '../util/highlighting';
 import { saveToBytebin } from '../util/storage';
 import Button from './Button';
@@ -19,9 +20,10 @@ export interface EditorControlsProps {
   setReadOnly: (value: boolean) => void;
   theme: keyof Themes;
   setTheme: (value: keyof Themes) => void;
-  wordWrap: boolean
+  wordWrap: boolean;
   setWordWrap: (value: boolean) => void;
   zoom: (delta: number) => void;
+  setShowAbout: (value: boolean) => void;
 }
 
 export default function EditorControls({
@@ -36,14 +38,20 @@ export default function EditorControls({
   wordWrap,
   setWordWrap,
   zoom,
+  setShowAbout,
 }: EditorControlsProps) {
   const [saving, setSaving] = useState<boolean>(false);
   const [recentlySaved, setRecentlySaved] = useState<boolean>(false);
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRecentlySaved(false);
   }, [actualContent, language]);
 
+  const showAbout = useCallback(() => {
+    setShowAbout(true);
+  }, [setShowAbout]);
+
   const save = useCallback(() => {
     if (!actualContent || recentlySaved) {
       return;
@@ -53,9 +61,15 @@ export default function EditorControls({
       setSaving(false);
       setRecentlySaved(true);
       if (pasteId) {
+        if (useQueryRouting) {
+          history.replace({
+            search: `?id=${pasteId}`,
+          });
+        } else {
           history.replace({
             pathname: pasteId,
           });
+        }
         copy(window.location.href);
         document.title = 'paste | ' + pasteId;
       }
@@ -117,22 +131,16 @@ export default function EditorControls({
       <Section>
         <Button onClick={() => zoom(1)}>[+ </Button>
         <Button onClick={() => zoom(-1)}> -]</Button>
-        <Button onClick={() => setWordWrap(!wordWrap)}>[<span className='optional'>wrap:</span>{wordWrap ? "on" : "off"}]</Button>
+        <Button onClick={() => setWordWrap(!wordWrap)}>
+          [wrap:{wordWrap ? 'on' : 'off'}]
+        </Button>
         <MenuButton
           label="theme"
           value={theme}
           setValue={setTheme}
           ids={Object.keys(themes) as (keyof Themes)[]}
         />
-        <Button
-          className="optional"
-          as="a"
-          href="https://github.com/lucko/paste#readme"
-          target="_blank"
-          rel="noreferrer"
-        >
-          [about]
-        </Button>
+        <Button onClick={showAbout}>[about]</Button>
       </Section>
     </Header>
   );
@@ -149,13 +157,15 @@ const Header = styled.header`
   display: flex;
   justify-content: space-between;
   user-select: none;
+  overflow-x: auto;
+  white-space: nowrap;
 `;
 
 const Section = styled.div`
   display: flex;
   align-items: center;
 
-  @media (max-width: 470px) {
+  @media (max-width: 850px) {
     .optional {
       display: none;
     }

src/components/EditorTextArea.tsx

@@ -5,15 +5,8 @@ import Editor, {
   OnMount,
 } from '@monaco-editor/react';
 import history from 'history/browser';
-import {
-  MutableRefObject,
-  RefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import styled from 'styled-components';
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import styled, { useTheme } from 'styled-components';
 import themes, { Theme } from '../style/themes';
 
 import type { editor } from 'monaco-editor';
@@ -58,29 +51,28 @@ export interface EditorTextAreaProps {
   forcedContent: string;
   actualContent: string;
   setActualContent: (value: string) => void;
-  theme: Theme;
   language: string;
   fontSize: number;
   readOnly: boolean;
   wordWrap: boolean;
-  resetFunction: MutableRefObject<ResetFunction | null>;
+  resetFunctionRef: RefObject<ResetFunction | null>;
 }
 
 export default function EditorTextArea({
   forcedContent,
   actualContent,
   setActualContent,
-  theme,
   language,
   fontSize,
   readOnly,
   wordWrap,
-  resetFunction,
+  resetFunctionRef,
 }: EditorTextAreaProps) {
   const [editor, setEditor] = useState<editor.IStandaloneCodeEditor>();
   const [monaco, setMonaco] = useState<Monaco>();
   const [selected, toggleSelected] = useSelectedLine();
   const editorAreaRef = useRef<HTMLDivElement>(null);
+  const theme = useTheme();
 
   useLineNumberMagic(
     editorAreaRef,
@@ -130,12 +122,16 @@ export default function EditorTextArea({
     setEditor(editor);
     setMonaco(monaco);
 
-    resetFunction.current = () => {
+    resetFunctionRef.current = () => {
       editor.setValue('');
+      if (!readOnly) {
         editor.focus();
+      }
     };
 
+    if (!readOnly) {
       editor.focus();
+    }
   };
 
   const onChange: OnChange = useCallback(

src/components/MenuButton.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 import Button from './Button';
 
@@ -16,6 +17,11 @@ export default function MenuButton<T extends string>({
   setValue,
 }: MenuButtonProps<T>) {
   const [open, setOpen] = useState<boolean>(false);
+  const [menuPosition, setMenuPosition] = useState<{
+    top: number;
+    left: number;
+  }>({ top: 0, left: 0 });
+  const buttonRef = useRef<HTMLDivElement | null>(null);
 
   // close the menu when a click is made elsewhere
   useEffect(() => {
@@ -26,6 +32,16 @@ export default function MenuButton<T extends string>({
 
   function toggleOpen(e: React.MouseEvent) {
     e.stopPropagation();
+    if (!buttonRef.current) {
+      return;
+    }
+    if (!open) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      setMenuPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+      });
+    }
     setOpen(!open);
   }
 
@@ -63,22 +79,35 @@ export default function MenuButton<T extends string>({
   }
 
   return (
-    <Button onClick={toggleOpen}>
+    <>
+      <Button onClick={toggleOpen} ref={buttonRef}>
         [<span>{label}: </span>
-      {value}]{open && <Menu>{items}</Menu>}
+        {value}]
       </Button>
+      {open &&
+        createPortal(
+          <Menu style={{ top: menuPosition.top, left: menuPosition.left }}>
+            {items}
+          </Menu>,
+          document.body
+        )}
+    </>
   );
 }
 
 const Menu = styled.ul`
   position: absolute;
-  top: 2em;
   margin: 0;
   padding: 0;
   list-style: none;
   background-color: ${props => props.theme.highlight};
   max-height: calc(100vh - 2em);
   overflow: auto;
+  z-index: 20;
+
+  > li {
+    cursor: pointer;
+  }
 
   > li.title {
     text-align: center;
@@ -103,6 +132,7 @@ const Menu = styled.ul`
 
   > li {
     padding: 0em 1em 0.05em 1em;
+    color: ${props => props.theme.primary};
   }
 
   > li:hover {

src/style/themes.ts

@@ -1,9 +1,14 @@
 import type { editor } from 'monaco-editor';
 
 import { CatppuccinFlavor, ColorFormat, flavors } from '@catppuccin/palette';
+
+// @ts-expect-error Alias import added in vite.config.ts
 import dracula from 'monaco-themes/themes/Dracula.json';
+// @ts-expect-error Alias import added in vite.config.ts
 import monokai from 'monaco-themes/themes/Monokai.json';
+// @ts-expect-error Alias import added in vite.config.ts
 import solarizedDark from 'monaco-themes/themes/Solarized-dark.json';
+// @ts-expect-error Alias import added in vite.config.ts
 import solarizedLight from 'monaco-themes/themes/Solarized-light.json';
 
 type Color = `#${string}`;
@@ -15,6 +20,7 @@ export interface Theme {
   secondary: Color;
   highlight: Color;
   background: Color;
+  logo: Color;
   lightOrDark: 'light' | 'dark';
   highlightedLine: {
     color: Color;
@@ -43,6 +49,7 @@ const themes: Themes = {
     secondary: '#010409', // canvas.inset
     highlight: '#161b22', // canvas.overlay
     background: '#0d1117', // canvas.default
+    logo: '#d2a8ff',
     lightOrDark: 'dark',
 
     highlightedLine: {
@@ -85,6 +92,7 @@ const themes: Themes = {
     secondary: '#022550',
     highlight: '#36368c',
     background: '#ffffff',
+    logo: '#00a2ff',
     lightOrDark: 'light',
 
     highlightedLine: {
@@ -127,6 +135,7 @@ const themes: Themes = {
     secondary: '#383a59',
     highlight: '#44475a',
     background: '#282a36',
+    logo: '#BD93F9', // purple
     lightOrDark: 'dark',
     highlightedLine: {
       color: '#586e75',
@@ -149,6 +158,7 @@ const themes: Themes = {
     secondary: '#222218',
     highlight: '#49483E',
     background: '#272822',
+    logo: '#f92672', // red
     lightOrDark: 'dark',
     highlightedLine: {
       color: '#49483E',
@@ -171,6 +181,7 @@ const themes: Themes = {
     secondary: '#073642', // base02
     highlight: '#002b36', // base03
     background: '#002B36', // base03
+    logo: '#dc322f', // red
     lightOrDark: 'dark',
     highlightedLine: {
       color: '#93a1a1', // base1
@@ -193,6 +204,7 @@ const themes: Themes = {
     secondary: '#eee8d5', // base2
     highlight: '#FDF6E3', // base3
     background: '#FDF6E3', // base3
+    logo: '#dc322f', // red
     lightOrDark: 'light',
     highlightedLine: {
       color: '#586e75', // base01
@@ -380,6 +392,7 @@ export function createCatppuccinTheme(flavor: CatppuccinFlavor): Theme {
       color: color(flavor.colors.rosewater),
       backgroundColor: color(flavor.colors.surface2),
     },
+    logo: color(flavor.colors.mauve),
     editor: editorTheme,
   };
 }

src/util/constants.ts

@@ -1,3 +1,5 @@
 export const bytebinUrl =
-  import.meta.env.VITE_BYTEBIN_URL || 'https://bytebin.lucko.me/';
+  import.meta.env.VITE_BYTEBIN_URL || 'https://api.pastes.dev/';
 export const postUrl = bytebinUrl + 'post';
+export const useQueryRouting =
+  import.meta.env.VITE_USE_QUERY_ROUTING === 'true';

src/util/storage.ts

@@ -31,7 +31,8 @@ export async function loadFromBytebin(id: string): Promise<LoadResult> {
     } else {
       return { ok: false };
     }
-  } catch {
+  } catch (e) {
+    console.error(e);
     return { ok: false };
   }
 }
@@ -59,7 +60,7 @@ export async function saveToBytebin(
       return json.key;
     }
   } catch (e) {
-    console.log(e);
+    console.error(e);
   }
   return null;
 }

src/vite-env.d.ts

@@ -2,6 +2,7 @@
 
 interface ImportMetaEnv {
   readonly VITE_BYTEBIN_URL?: string;
+  readonly VITE_USE_QUERY_ROUTING?: string;
 }
 
 interface ImportMeta {

vite.config.ts

@@ -1,7 +1,15 @@
 import react from '@vitejs/plugin-react-swc';
+import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'vite';
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      'monaco-themes/themes': fileURLToPath(
+        new URL('./node_modules/monaco-themes/themes', import.meta.url)
+      ),
+    },
+  },
 });