Don't focus editor in readonly mode

Rollback whatwg-mimetype dep version
Upgrade dependencies
2026-04-02 20:08:42 +01:00 · 2026-02-26 21:50:44 +00:00 · 2026-02-23 20:34:19 +00:00 · 2025-08-27 22:03:38 +01:00 · 2025-08-27 21:55:46 +01:00 · 2025-08-25 10:25:22 +01:00
33 changed files with 2117 additions and 9375 deletions
--- a/.github/workflows/pages.yml
+++ b/.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
--- a/.gitignore
+++ b/.gitignore
@@ -1,25 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*

+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.prettierrc
+++ b/.prettierrc
@@ -5,5 +5,6 @@
  "singleQuote": true,
  "trailingComma": "es5",
  "arrowParens": "avoid",
-  "quoteProps": "consistent"
+  "quoteProps": "consistent",
+  "plugins": ["prettier-plugin-organize-imports"]
 }
--- a/API.md
+++ b/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.
--- a/6
+++ b/6
@@ -1,8 +1,8 @@
 # Build stage
-FROM node:lts as build
+FROM node:lts AS build

 ARG BYTEBIN_URL="data/"
-ENV REACT_APP_BYTEBIN_URL="${BYTEBIN_URL}"
+ENV VITE_BYTEBIN_URL="${BYTEBIN_URL}"

 WORKDIR /app
 COPY package.json yarn.lock ./
@@ -13,6 +13,6 @@ RUN yarn build
 # Run stage
 FROM nginx:alpine
 COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
-COPY --from=build /app/build /usr/share/nginx/html
+COPY --from=build /app/dist /usr/share/nginx/html
 CMD ["nginx", "-g", "daemon off;"]
 EXPOSE 80/tcp
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@

 **paste is a simple web app for writing & sharing code.** It's my own take on conventional pastebin sites like _pastebin.com_ or _hastebin_.

-Anyone can use paste! The official/public instance can be accessed using the endpoints listed below, but you can also [host your own](#host-your-own) if you like!
+Anyone can use paste! The official/public instance can be accessed using the endpoints listed below, but you can also [host your own](#self-hosting) if you like!

 ##### 1) In a Web Browser
 Just go to https://pastes.dev!
@@ -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,52 +54,15 @@ 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.
-
 ___

-### Host your own
+### Self-hosting

-It's quite simple to host your own version.
+The easiest way to self-host is using Docker (& Docker Compose). You can run the following commands to get started:

 ```bash
 git clone https://github.com/lucko/paste
 cd paste
-yarn install
-
-# Outputs html/css/js files to /build
-yarn build
-
-# Start a webserver for testing/development
-yarn start
-```
-
-You can then follow the [create-react-app deployment documentation](https://create-react-app.dev/docs/deployment/) for how to host the build output. I personally recommend deploying to the cloud using a service like Netlify instead of hosting on your own webserver.
-
-If you really want to self-host (including the bytebin data storage part), I suggest using Docker:
-
-```bash
-git clone https://github.com/lucko/paste
 docker compose up -d
 ```

--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,9 +1,10 @@
-version: '3.8'
-
 services:
+
+  # frontend service
  paste:
    image: ghcr.io/lucko/paste

+  # backend service
  bytebin:
    image: ghcr.io/lucko/bytebin
    volumes:
@@ -11,6 +12,7 @@ services:
    environment:
      BYTEBIN_MISC_KEYLENGTH: 5

+  # reverse proxy
  nginx:
    image: nginx:alpine
    command: ['nginx', '-g', 'daemon off;']
--- a/docker/reverseproxy-nginx.conf
+++ b/docker/reverseproxy-nginx.conf
@@ -1,29 +1,29 @@
-# nginx reverse proxy configuration for paste+bytebin
+# nginx reverse proxy configuration for paste frontend & bytebin backend
 server {
 	listen 80 default_server;

-    # paste app
+	# proxy / path to paste frontend
 	location / {
-        proxy_set_header   Host $host;
-        proxy_set_header   X-Real-IP $remote_addr;
-        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header   X-Forwarded-Host $server_name;
+		proxy_set_header Host $host;
+		proxy_set_header X-Real-IP $remote_addr;
+		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+		proxy_set_header X-Forwarded-Host $server_name;

-        proxy_pass         http://paste;
-    }
+		proxy_pass http://paste;
+	}

-    # disable bytebin frontend
-    location = /data/ {
-        return 404;
-    }
+	# disable bytebin frontend
+	location = /data/ {
+		return 404;
+	}

-    # proxy /data endpoint to bytebin
-    location /data/ {
-        proxy_set_header   Host $host;
-        proxy_set_header   X-Real-IP $remote_addr;
-        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header   X-Forwarded-Host $server_name;
+	# proxy /data path to bytebin backend
+	location /data/ {
+		proxy_set_header Host $host;
+		proxy_set_header X-Real-IP $remote_addr;
+		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+		proxy_set_header X-Forwarded-Host $server_name;

-        proxy_pass         http://bytebin:8080/;
-    }
+		proxy_pass http://bytebin:8080/;
+	}
 }
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
--- a/public/index.html
+++ b/public/index.html
@@ -11,20 +11,21 @@
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="pastes" />
    <meta name="twitter:description" content="a simple pastebin." />
-    <meta name="twitter:image" content="%PUBLIC_URL%/assets/logo256.png" />
+    <meta name="twitter:image" content="https://pastes.dev/assets/logo256.png" />

    <meta property="og:title" content="pastes" />
    <meta property="og:description" content="a simple pastebin." />
    <meta property="og:type" content="product" />
-    <meta property="og:image" content="%PUBLIC_URL%/assets/logo256.png" />
-    <meta property="og:url" content="%PUBLIC_URL%" />
+    <meta property="og:image" content="https://pastes.dev/assets/logo256.png" />
+    <meta property="og:url" content="https://pastes.dev" />

-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link href="%PUBLIC_URL%/assets/logo512.png" rel="shortcut icon" sizes="512x512" type="image/png">
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/assets/logo256.png" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="shortcut icon" href="/assets/logo512.png" sizes="512x512" type="image/png">
+    <link rel="apple-touch-icon" href="/assets/logo256.png" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@@ -2,59 +2,44 @@
  "name": "paste",
  "version": "0.1.0",
  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "format": "prettier --write '**/*.ts' '**/*.tsx' '**/*.css'"
+  },
  "dependencies": {
-    "@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",
-    "local-storage": "^2.0.0",
-    "monaco-themes": "^0.4.4",
+    "monaco-editor": "^0.55.1",
+    "monaco-themes": "^0.4.8",
    "pako": "^2.1.0",
-    "react": "^18.2.0",
+    "react": "^19.2.4",
    "react-device-detect": "^2.2.3",
-    "react-dom": "^18.2.0",
-    "react-scripts": "^5.0.1",
-    "styled-components": "^6.1.1",
-    "typescript": "^4.4.2",
+    "react-dom": "^19.2.4",
+    "styled-components": "^6.3.11",
    "whatwg-mimetype": "^3.0.0"
  },
  "devDependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^18.11.9",
-    "@types/pako": "^2.0.3",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@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",
-    "monaco-editor": "^0.44.0",
-    "prettier": "^3.1.0",
-    "prettier-plugin-organize-imports": "^3.2.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "format": "prettier --write '**/*.ts' '**/*.tsx' '**/*.css'",
-    "compile": "tsc"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "@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"
  }
 }
--- a/src/App.tsx
+++ b/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 (
-    <Editor
-      forcedContent={forcedContent}
-      actualContent={actualContent}
-      setActualContent={setActualContent}
-      contentType={contentType}
-      pasteId={pasteId}
-    />
+    <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() {
-  const path = window.location.pathname;
-  if (path && /^\/[a-zA-Z0-9]+$/.test(path)) {
-    return path.substring(1);
-  } else {
-    return undefined;
+  if (useQueryRouting) {
+    return new URLSearchParams(window.location.search).get('id') ?? undefined;
  }
+
+  const path = window.location.pathname;
+  return /^\/[a-zA-Z0-9]+$/.test(path) ? path.substring(1) : undefined;
 }
--- a/src/components/About.tsx
+++ b/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;
+`;
--- a/src/components/Editor.tsx
+++ b/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,24 +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>();
+  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',
+    true,
+    () => true
+  );
+
  useEffect(() => {
    if (contentType) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
      setLanguage(contentType);
    }
  }, [contentType]);
@@ -55,30 +62,31 @@ export default function Editor({

  return (
    <>
-      <ThemeProvider theme={themes[theme]}>
-        <EditorGlobalStyle />
-        <EditorControls
-          actualContent={actualContent}
-          resetFunction={resetFunction}
-          language={language}
-          setLanguage={setLanguage}
-          readOnly={readOnly}
-          setReadOnly={setReadOnly}
-          theme={theme}
-          setTheme={setTheme}
-          zoom={zoom}
-        />
-        <EditorTextArea
-          forcedContent={forcedContent}
-          actualContent={actualContent}
-          setActualContent={setActualContent}
-          theme={themes[theme]}
-          language={language}
-          fontSize={fontSize}
-          readOnly={readOnly}
-          resetFunction={resetFunction}
-        />
-      </ThemeProvider>
+      <EditorGlobalStyle />
+      <EditorControls
+        actualContent={actualContent}
+        resetFunction={resetFunction}
+        language={language}
+        setLanguage={setLanguage}
+        readOnly={readOnly}
+        setReadOnly={setReadOnly}
+        theme={theme}
+        setTheme={setTheme}
+        wordWrap={wordWrap}
+        setWordWrap={setWordWrap}
+        zoom={zoom}
+        setShowAbout={setShowAbout}
+      />
+      <EditorTextArea
+        forcedContent={forcedContent}
+        actualContent={actualContent}
+        setActualContent={setActualContent}
+        language={language}
+        fontSize={fontSize}
+        readOnly={readOnly}
+        wordWrap={wordWrap}
+        resetFunctionRef={resetFunction}
+      />
    </>
  );
 }
--- a/src/components/EditorControls.tsx
+++ b/src/components/EditorControls.tsx
@@ -1,9 +1,10 @@
 import copy from 'copy-to-clipboard';
 import history from 'history/browser';
-import { MutableRefObject, useCallback, useEffect, useState } from 'react';
+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';
@@ -12,14 +13,17 @@ import MenuButton from './MenuButton';

 export interface EditorControlsProps {
  actualContent: string;
-  resetFunction: MutableRefObject<ResetFunction | undefined>;
+  resetFunction: RefObject<ResetFunction | null>;
  language: string;
  setLanguage: (value: string) => void;
  readOnly: boolean;
  setReadOnly: (value: boolean) => void;
  theme: keyof Themes;
  setTheme: (value: keyof Themes) => void;
+  wordWrap: boolean;
+  setWordWrap: (value: boolean) => void;
  zoom: (delta: number) => void;
+  setShowAbout: (value: boolean) => void;
 }

 export default function EditorControls({
@@ -31,15 +35,23 @@ export default function EditorControls({
  setReadOnly,
  theme,
  setTheme,
+  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;
@@ -49,9 +61,15 @@ export default function EditorControls({
      setSaving(false);
      setRecentlySaved(true);
      if (pasteId) {
-        history.replace({
-          pathname: pasteId,
-        });
+        if (useQueryRouting) {
+          history.replace({
+            search: `?id=${pasteId}`,
+          });
+        } else {
+          history.replace({
+            pathname: pasteId,
+          });
+        }
        copy(window.location.href);
        document.title = 'paste | ' + pasteId;
      }
@@ -113,21 +131,16 @@ export default function EditorControls({
      <Section>
        <Button onClick={() => zoom(1)}>[+ </Button>
        <Button onClick={() => zoom(-1)}> -]</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>
  );
@@ -136,7 +149,7 @@ export default function EditorControls({
 const Header = styled.header`
  position: fixed;
  top: 0;
-  z-index: 2;
+  z-index: 10;
  width: 100%;
  height: 2em;
  color: ${props => props.theme.primary};
@@ -144,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;
    }
--- a/src/components/EditorTextArea.tsx
+++ b/src/components/EditorTextArea.tsx
@@ -5,45 +5,74 @@ import Editor, {
  OnMount,
 } from '@monaco-editor/react';
 import history from 'history/browser';
-import React, {
-  MutableRefObject,
-  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';
+import { diffLanguage } from '../util/languages/diff';
+import { logLanguage } from '../util/languages/log';
 import { ResetFunction } from './Editor';
-import { logLanguage } from '../util/log-language';
+
+import { loader } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
+
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+self.MonacoEnvironment = {
+  getWorker(_: string, label: string): Promise<Worker> | Worker {
+    switch (label) {
+      case 'json':
+        return new jsonWorker();
+      case 'css':
+      case 'scss':
+      case 'less':
+        return new cssWorker();
+      case 'html':
+      case 'handlebars':
+      case 'razor':
+        return new htmlWorker();
+      case 'typescript':
+      case 'javascript':
+        return new tsWorker();
+      default:
+        return new editorWorker();
+    }
+  },
+};
+
+loader.config({ monaco });

 export interface EditorTextAreaProps {
  forcedContent: string;
  actualContent: string;
  setActualContent: (value: string) => void;
-  theme: Theme;
  language: string;
  fontSize: number;
  readOnly: boolean;
-  resetFunction: MutableRefObject<ResetFunction | undefined>;
+  wordWrap: boolean;
+  resetFunctionRef: RefObject<ResetFunction | null>;
 }

 export default function EditorTextArea({
  forcedContent,
  actualContent,
  setActualContent,
-  theme,
  language,
  fontSize,
  readOnly,
-  resetFunction,
+  wordWrap,
+  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,
@@ -63,6 +92,8 @@ export default function EditorTextArea({

    monaco.languages.register({ id: 'log' });
    monaco.languages.setMonarchTokensProvider('log', logLanguage);
+    monaco.languages.register({ id: 'diff' });
+    monaco.languages.setMonarchTokensProvider('diff', diffLanguage);

    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
      noSemanticValidation: true,
@@ -91,12 +122,16 @@ export default function EditorTextArea({
    setEditor(editor);
    setMonaco(monaco);

-    resetFunction.current = () => {
+    resetFunctionRef.current = () => {
      editor.setValue('');
-      editor.focus();
+      if (!readOnly) {
+        editor.focus();
+      }
    };

-    editor.focus();
+    if (!readOnly) {
+      editor.focus();
+    }
  };

  const onChange: OnChange = useCallback(
@@ -129,7 +164,7 @@ export default function EditorTextArea({
          fontFamily: 'JetBrains Mono',
          fontSize: fontSize,
          fontLigatures: true,
-          wordWrap: 'on',
+          wordWrap: wordWrap ? 'on' : 'off',
          renderLineHighlight: 'none',
          renderValidationDecorations: 'off',
          readOnly,
@@ -246,7 +281,7 @@ function useSelectedLine(): [SelectedLine, ToggleSelectedFunction] {
 }

 function useLineNumberMagic(
-  editorAreaRef: React.RefObject<HTMLDivElement>,
+  editorAreaRef: RefObject<HTMLDivElement | null>,
  selected: SelectedLine,
  toggleSelected: ToggleSelectedFunction,
  forcedContent: string,
@@ -261,13 +296,13 @@ function useLineNumberMagic(
    }

    const handler = (click: MouseEvent) => {
-      const target = click?.target as HTMLElement;
+      const element = document.elementFromPoint(click.x, click.y);
      if (
-        target &&
-        target.classList.contains('line-numbers') &&
-        target.textContent
+        element &&
+        element.classList.contains('line-numbers') &&
+        element.textContent
      ) {
-        toggleSelected(parseInt(target.textContent), click);
+        toggleSelected(parseInt(element.textContent), click);
      }
    };

--- a/src/components/MenuButton.tsx
+++ b/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,16 +17,31 @@ 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(() => {
-    const listener = (e: MouseEvent) => setOpen(false);
+    const listener = () => setOpen(false);
    window.addEventListener('click', listener);
    return () => window.removeEventListener('click', listener);
  }, [setOpen]);

  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}>
-      [<span>{label}: </span>
-      {value}]{open && <Menu>{items}</Menu>}
-    </Button>
+    <>
+      <Button onClick={toggleOpen} ref={buttonRef}>
+        [<span>{label}: </span>
+        {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 {
--- a/src/hooks/usePreference.ts
+++ b/src/hooks/usePreference.ts
@@ -1,4 +1,3 @@
-import { get as lsGet, remove as lsRemove, set as lsSet } from 'local-storage';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';

 // hook used to load "preference" settings from local storage, or fall back to a default value.
@@ -8,8 +7,9 @@ export default function usePreference<T>(
  valid: (value: T) => boolean
 ): [T, Dispatch<SetStateAction<T>>, (value: T) => boolean] {
  const [value, setValue] = useState<T>(() => {
-    const pref = lsGet(id) as T;
-    if (pref && valid(pref)) {
+    const prefRaw = localStorage.getItem(id);
+    const pref = prefRaw !== null ? (JSON.parse(prefRaw) as T) : undefined;
+    if (pref !== null && pref !== undefined && valid(pref)) {
      return pref;
    } else {
      return defaultValue;
@@ -18,9 +18,9 @@ export default function usePreference<T>(

  useEffect(() => {
    if (value === defaultValue) {
-      lsRemove(id);
+      localStorage.removeItem(id);
    } else {
-      lsSet(id, value);
+      localStorage.setItem(id, JSON.stringify(value));
    }
  }, [value, id, defaultValue]);

--- a/src/index.tsx
+++ b/src/index.tsx
--- a/src/style/styled.d.ts
+++ b/src/style/styled.d.ts
@@ -2,5 +2,6 @@ import 'styled-components';
 import { Theme } from './themes';

 declare module 'styled-components' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
  export interface DefaultTheme extends Theme {}
 }
--- a/src/style/themes.ts
+++ b/src/style/themes.ts
@@ -1,11 +1,18 @@
 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}`;
+type ColorRecord = Record<string, Color>;

 export interface Theme {
  id: string;
@@ -13,6 +20,7 @@ export interface Theme {
  secondary: Color;
  highlight: Color;
  background: Color;
+  logo: Color;
  lightOrDark: 'light' | 'dark';
  highlightedLine: {
    color: Color;
@@ -28,6 +36,10 @@ export interface Themes {
  'monokai': Theme;
  'solarized': Theme;
  'solarized-light': Theme;
+  'latte': Theme;
+  'frappe': Theme;
+  'macchiato': Theme;
+  'mocha': Theme;
 }

 const themes: Themes = {
@@ -37,6 +49,7 @@ const themes: Themes = {
    secondary: '#010409', // canvas.inset
    highlight: '#161b22', // canvas.overlay
    background: '#0d1117', // canvas.default
+    logo: '#d2a8ff',
    lightOrDark: 'dark',

    highlightedLine: {
@@ -44,28 +57,34 @@ const themes: Themes = {
      backgroundColor: '#161b22', // canvas.overlay
    },

-    editor: makeMonacoTheme({
-      base: 'vs-dark',
-      colors: {
-        primary: '#c9d1d9', // fg.default
-        background: '#0d1117', // canvas.default
-        comment: '#8b949e',
-        delimiter: '#d2a8ff',
-        annotation: '#a5d6ff',
-        constant: '#ff7b72',
-        number: '#f2cc60',
-        string: '#79c0ff',
-        operator: '#ff7b72',
-        keyword: '#ff7b72',
-        type: '#ffa657',
-        variable: '#ffa657',
-        logInfo: '#3fb950', // green.3
-        logError: '#f85149', // red.4
-        logWarning: '#d29922', // yellow.3
-        logDate: '#33B3AE', // teal.3
-        logException: '#f8e3a1', // yellow.0
+    editor: makeMonacoTheme(
+      {
+        base: 'vs-dark',
+        colors: {
+          primary: '#c9d1d9', // fg.default
+          background: '#0d1117', // canvas.default
+          comment: '#8b949e',
+          delimiter: '#d2a8ff',
+          annotation: '#a5d6ff',
+          constant: '#ff7b72',
+          number: '#f2cc60',
+          string: '#79c0ff',
+          operator: '#ff7b72',
+          keyword: '#ff7b72',
+          type: '#ffa657',
+          variable: '#ffa657',
+          logInfo: '#3fb950', // green.3
+          logError: '#f85149', // red.4
+          logWarning: '#d29922', // yellow.3
+          logDate: '#33B3AE', // teal.3
+          logException: '#f8e3a1', // yellow.0
+          diffMeta: '#33B3AE', // teal.3
+          diffAddition: '#3fb950', // green.3
+          diffDeletion: '#f85149', // red.4
+        },
      },
-    }),
+      {}
+    ),
  },
  'light': {
    id: 'light',
@@ -73,6 +92,7 @@ const themes: Themes = {
    secondary: '#022550',
    highlight: '#36368c',
    background: '#ffffff',
+    logo: '#00a2ff',
    lightOrDark: 'light',

    highlightedLine: {
@@ -80,28 +100,34 @@ const themes: Themes = {
      backgroundColor: '#e0f6ff',
    },

-    editor: makeMonacoTheme({
-      base: 'vs',
-      colors: {
-        primary: '#000000',
-        background: '#ffffff',
-        comment: '#708090',
-        delimiter: '#999999',
-        annotation: '#999999',
-        constant: '#990055',
-        number: '#990055',
-        string: '#669900',
-        operator: '#9a6e3a',
-        keyword: '#0077aa',
-        type: '#DD4A68',
-        variable: '#ee9900',
-        logInfo: '#2da44e', // green.4
-        logError: '#cf222e', // red.5
-        logWarning: '#d4a72c', // yellow.3
-        logDate: '#136061', // teal.6
-        logException: '#7d4e00', // yellow.6
+    editor: makeMonacoTheme(
+      {
+        base: 'vs',
+        colors: {
+          primary: '#000000',
+          background: '#ffffff',
+          comment: '#708090',
+          delimiter: '#999999',
+          annotation: '#999999',
+          constant: '#990055',
+          number: '#990055',
+          string: '#669900',
+          operator: '#9a6e3a',
+          keyword: '#0077aa',
+          type: '#DD4A68',
+          variable: '#ee9900',
+          logInfo: '#2da44e', // green.4
+          logError: '#cf222e', // red.5
+          logWarning: '#d4a72c', // yellow.3
+          logDate: '#136061', // teal.6
+          logException: '#7d4e00', // yellow.6
+          diffMeta: '#136061', // teal.6
+          diffAddition: '#2da44e', // green.4
+          diffDeletion: '#cf222e', // red.5
+        },
      },
-    }),
+      {}
+    ),
  },
  'dracula': {
    id: 'dracula',
@@ -109,17 +135,21 @@ const themes: Themes = {
    secondary: '#383a59',
    highlight: '#44475a',
    background: '#282a36',
+    logo: '#BD93F9', // purple
    lightOrDark: 'dark',
    highlightedLine: {
      color: '#586e75',
      backgroundColor: '#44475a',
    },
-    editor: addLogColors(dracula as editor.IStandaloneThemeData, {
-      info: '#50FA7B', // green
-      error: '#FF5555', // red
-      warning: '#FFB86C', // orange
-      date: '#BD93F9', // purple
-      exception: '#F1FA8C', // yellow
+    editor: addExtraColors(dracula as editor.IStandaloneThemeData, {
+      logInfo: '#50FA7B', // green
+      logError: '#FF5555', // red
+      logWarning: '#FFB86C', // orange
+      logDate: '#BD93F9', // purple
+      logException: '#F1FA8C', // yellow
+      diffMeta: '#BD93F9', // purple
+      diffAddition: '#50FA7B', // green
+      diffDeletion: '#FF5555', // red
    }),
  },
  'monokai': {
@@ -128,17 +158,21 @@ const themes: Themes = {
    secondary: '#222218',
    highlight: '#49483E',
    background: '#272822',
+    logo: '#f92672', // red
    lightOrDark: 'dark',
    highlightedLine: {
      color: '#49483E',
      backgroundColor: '#3E3D32',
    },
-    editor: addLogColors(monokai as editor.IStandaloneThemeData, {
-      info: '#a6e22e', // green
-      error: '#f92672', // red
-      warning: '#fd971f', // orange
-      date: '#AB9DF2', // purple
-      exception: '#F1FA8C', // yellow
+    editor: addExtraColors(monokai as editor.IStandaloneThemeData, {
+      logInfo: '#a6e22e', // green
+      logError: '#f92672', // red
+      logWarning: '#fd971f', // orange
+      logDate: '#AB9DF2', // purple
+      logException: '#F1FA8C', // yellow
+      diffMeta: '#AB9DF2', // purple
+      diffAddition: '#a6e22e', // green
+      diffDeletion: '#f92672', // red
    }),
  },
  'solarized': {
@@ -147,17 +181,21 @@ const themes: Themes = {
    secondary: '#073642', // base02
    highlight: '#002b36', // base03
    background: '#002B36', // base03
+    logo: '#dc322f', // red
    lightOrDark: 'dark',
    highlightedLine: {
      color: '#93a1a1', // base1
      backgroundColor: '#073642', // base02
    },
-    editor: addLogColors(solarizedDark as editor.IStandaloneThemeData, {
-      info: '#268bd2', // blue
-      error: '#dc322f', // red
-      warning: '#b58900', // yellow
-      date: '#2aa198', // cyan
-      exception: '#859900', // green
+    editor: addExtraColors(solarizedDark as editor.IStandaloneThemeData, {
+      logInfo: '#268bd2', // blue
+      logError: '#dc322f', // red
+      logWarning: '#b58900', // yellow
+      logDate: '#2aa198', // cyan
+      logException: '#859900', // green
+      diffMeta: '#2aa198', // cyan
+      diffAddition: '#859900', // green
+      diffDeletion: '#dc322f', // red
    }),
  },
  'solarized-light': {
@@ -166,23 +204,42 @@ const themes: Themes = {
    secondary: '#eee8d5', // base2
    highlight: '#FDF6E3', // base3
    background: '#FDF6E3', // base3
+    logo: '#dc322f', // red
    lightOrDark: 'light',
    highlightedLine: {
      color: '#586e75', // base01
      backgroundColor: '#eee8d5', // base2
    },
-    editor: addLogColors(solarizedLight as editor.IStandaloneThemeData, {
-      info: '#268bd2', // blue
-      error: '#dc322f', // red
-      warning: '#b58900', // yellow
-      date: '#2aa198', // cyan
-      exception: '#859900', // green
+    editor: addExtraColors(solarizedLight as editor.IStandaloneThemeData, {
+      logInfo: '#268bd2', // blue
+      logError: '#dc322f', // red
+      logWarning: '#b58900', // yellow
+      logDate: '#2aa198', // cyan
+      logException: '#859900', // green
+      diffMeta: '#2aa198', // cyan
+      diffAddition: '#859900', // green
+      diffDeletion: '#dc322f', // red
    }),
  },
+  'latte': createCatppuccinTheme(flavors.latte),
+  'frappe': createCatppuccinTheme(flavors.frappe),
+  'macchiato': createCatppuccinTheme(flavors.macchiato),
+  'mocha': createCatppuccinTheme(flavors.mocha),
 };

 export default themes;

+interface ExtraColors {
+  logInfo: Color;
+  logError: Color;
+  logWarning: Color;
+  logDate: Color;
+  logException: Color;
+  diffMeta: Color;
+  diffAddition: Color;
+  diffDeletion: Color;
+}
+
 interface MonacoThemeProps {
  base: 'vs' | 'vs-dark';
  colors: {
@@ -198,16 +255,12 @@ interface MonacoThemeProps {
    keyword: Color;
    type: Color;
    variable: Color;
-    logInfo: Color;
-    logError: Color;
-    logWarning: Color;
-    logDate: Color;
-    logException: Color;
-  };
+  } & ExtraColors;
 }

 export function makeMonacoTheme(
-  props: MonacoThemeProps
+  props: MonacoThemeProps,
+  extraColors: ColorRecord
 ): editor.IStandaloneThemeData {
  const colors = Object.fromEntries(
    Object.entries(props.colors).map(([key, color]) => [
@@ -216,6 +269,11 @@ export function makeMonacoTheme(
    ])
  ) as Record<keyof MonacoThemeProps['colors'], string>;

+  const editorColors: ColorRecord = {
+    'editor.background': `#${colors.background}`,
+    'editor.foreground': `#${colors.primary}`,
+  };
+
  return {
    base: props.base,
    inherit: true,
@@ -246,37 +304,95 @@ export function makeMonacoTheme(
      { token: 'warning.log', foreground: colors.logWarning },
      { token: 'date.log', foreground: colors.logDate },
      { token: 'exception.log', foreground: colors.logException },
+      { token: 'meta.diff', foreground: colors.diffMeta },
+      { token: 'addition.diff', foreground: colors.diffAddition },
+      { token: 'deletion.diff', foreground: colors.diffDeletion },
    ],
-    colors: {
-      'editor.background': `#${colors.background}`,
-      'editor.foreground': `#${colors.primary}`,
-    },
+    colors: { ...editorColors, ...extraColors },
  };
 }

-interface LogColors {
-  info: Color;
-  error: Color;
-  warning: Color;
-  date: Color;
-  exception: Color;
-}
-
-export function addLogColors(
+export function addExtraColors(
  theme: editor.IStandaloneThemeData,
-  logColors: LogColors
+  extraColors: ExtraColors
 ): editor.IStandaloneThemeData {
  const colors = Object.fromEntries(
-    Object.entries(logColors).map(([key, color]) => [key, color.substring(1)])
-  ) as Record<keyof LogColors, string>;
+    Object.entries(extraColors).map(([key, color]) => [key, color.substring(1)])
+  ) as Record<keyof ExtraColors, string>;
  theme.rules.push(
    ...[
-      { token: 'info.log', foreground: colors.info },
-      { token: 'error.log', foreground: colors.error, fontStyle: 'bold' },
-      { token: 'warning.log', foreground: colors.warning },
-      { token: 'date.log', foreground: colors.date },
-      { token: 'exception.log', foreground: colors.exception },
+      { token: 'info.log', foreground: colors.logInfo },
+      { token: 'error.log', foreground: colors.logError, fontStyle: 'bold' },
+      { token: 'warning.log', foreground: colors.logWarning },
+      { token: 'date.log', foreground: colors.logDate },
+      { token: 'exception.log', foreground: colors.logException },
+      { token: 'meta.diff', foreground: colors.diffMeta },
+      { token: 'addition.diff', foreground: colors.diffAddition },
+      { token: 'deletion.diff', foreground: colors.diffDeletion },
    ]
  );
  return theme;
 }
+
+export function createCatppuccinTheme(flavor: CatppuccinFlavor): Theme {
+  const color = (color: ColorFormat) => color.hex as Color;
+  const nameToId: Record<string, string> = {
+    [flavors.latte.name]: 'latte',
+    [flavors.frappe.name]: 'frappe',
+    [flavors.macchiato.name]: 'macchiato',
+    [flavors.mocha.name]: 'mocha',
+  };
+
+  const editorTheme = makeMonacoTheme(
+    {
+      base: flavor.dark ? 'vs-dark' : 'vs',
+      colors: {
+        // Monaco
+        primary: color(flavor.colors.text),
+        background: color(flavor.colors.mantle),
+        string: color(flavor.colors.green),
+        comment: color(flavor.colors.overlay2),
+        delimiter: color(flavor.colors.overlay2),
+        annotation: color(flavor.colors.yellow),
+        constant: color(flavor.colors.peach),
+        number: color(flavor.colors.peach),
+        operator: color(flavor.colors.sky),
+        keyword: color(flavor.colors.mauve),
+        type: color(flavor.colors.yellow),
+        variable: color(flavor.colors.text),
+
+        // Log Files
+        logDate: color(flavor.colors.mauve),
+        logInfo: color(flavor.colors.green),
+        logWarning: color(flavor.colors.yellow),
+        logError: color(flavor.colors.red),
+        logException: color(flavor.colors.yellow),
+
+        // Diff Files
+        diffMeta: color(flavor.colors.sky),
+        diffAddition: color(flavor.colors.green),
+        diffDeletion: color(flavor.colors.red),
+      },
+    },
+    {
+      'editorBracketHighlight.foreground1': color(flavor.colors.overlay2),
+      'editorBracketHighlight.foreground2': color(flavor.colors.overlay2),
+      'editorBracketHighlight.foreground3': color(flavor.colors.overlay2),
+    }
+  );
+
+  return {
+    id: nameToId[flavor.name],
+    lightOrDark: flavor.dark ? 'dark' : 'light',
+    primary: color(flavor.colors.text),
+    secondary: color(flavor.colors.base),
+    highlight: color(flavor.colors.surface0),
+    background: color(flavor.colors.mantle),
+    highlightedLine: {
+      color: color(flavor.colors.rosewater),
+      backgroundColor: color(flavor.colors.surface2),
+    },
+    logo: color(flavor.colors.mauve),
+    editor: editorTheme,
+  };
+}
--- a/src/util/constants.ts
+++ b/src/util/constants.ts
@@ -1,4 +1,5 @@
 export const bytebinUrl =
-  process.env.REACT_APP_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';
--- a/src/util/highlighting.ts
+++ b/src/util/highlighting.ts
@@ -15,9 +15,12 @@ export const languages = {
    'rust',
    'sql',
    'go',
+    'lua',
+    'swift',
+    'c',
  ],
  web: ['html', 'css', 'scss', 'php', 'graphql'],
-  misc: ['dockerfile', 'markdown', 'proto'],
+  misc: ['diff', 'dockerfile', 'markdown', 'proto'],
 };

 export const languageIds = Object.values(languages).flat(1);
--- a/src/util/languages/diff.ts
+++ b/src/util/languages/diff.ts
@@ -0,0 +1,30 @@
+import { languages } from 'monaco-editor';
+
+export const diffLanguage: languages.IMonarchLanguage = {
+  defaultToken: '',
+  tokenizer: {
+    root: [
+      // Meta lines (e.g., @@ -1,2 +3,4 @@)
+      [/@@@ +-\d+,\d+ +\+\d+,\d+ +@@@/, 'meta'],
+      [/^\*\*\* +\d+,\d+ +\*\*\*\*$/, 'meta'],
+      [/^--- +\d+,\d+ +----$/, 'meta'],
+
+      // Comments
+      [/Index: .*/, 'comment'],
+      [/^index.*/, 'comment'],
+      [/={3,}/, 'comment'],
+      [/^-{3}.*/, 'comment'],
+      [/^\*{3} .*/, 'comment'],
+      [/^\+{3}.*/, 'comment'],
+      [/^diff --git.*/, 'comment'],
+      [/^\*{15}$/, 'comment'],
+
+      // Additions
+      [/^\+.*/, 'addition'],
+      [/^!.*/, 'addition'],
+
+      // Deletions
+      [/^-.*/, 'deletion'],
+    ],
+  },
+};
--- a/src/util/languages/log.ts
+++ b/src/util/languages/log.ts
--- a/src/util/storage.ts
+++ b/src/util/storage.ts
@@ -32,6 +32,7 @@ export async function loadFromBytebin(id: string): Promise<LoadResult> {
      return { ok: false };
    }
  } 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;
 }
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_BYTEBIN_URL?: string;
+  readonly VITE_USE_QUERY_ROUTING?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,27 +1,7 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src/*.ts",
-    "src/*.tsx"
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
  ]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +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)
+      ),
+    },
+  },
+});
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Luck	58c41719bc	Don't focus editor in readonly mode	2026-04-02 20:08:42 +01:00
Luck	60e4cbc4ed	Rollback whatwg-mimetype dep version	2026-02-26 21:50:44 +00:00
Luck	8a4e72603c	Upgrade dependencies	2026-02-23 20:34:19 +00:00
Luck	92e51b63be	Update about hostname check	2025-08-27 22:03:38 +01:00
Luck	226b309df1	Update readme	2025-08-27 21:55:46 +01:00
Luck	366013f44d	Update default API URL	2025-08-25 10:25:22 +01:00
Ahmed Waleed	335c418c54	Add option for query id routing (#31 )	2025-06-29 10:47:24 +01:00
Luck	7dc3edb5fd	Revert "Add GitHub pages action" This reverts commit `0ee58ed085`.	2025-06-21 22:03:35 +01:00
Luck	69208e06c1	Make about modal scrollable	2025-06-21 21:45:44 +01:00
Luck	0ee58ed085	Add GitHub pages action	2025-06-21 19:04:39 +01:00
Luck	86e380a5f6	Hide about modal by default	2025-06-20 08:38:03 +01:00
Luck	791fa3e469	Add custom about page and TOS	2025-06-20 08:35:23 +01:00
Isaac - The456	24025642f4	Add option to wrap text (#20 )	2025-03-15 13:36:29 +00:00
Luck	0d7cd64eef	Update self-hosting instructions	2025-02-23 15:18:45 +00:00
Luck	5b2ca9bd19	Convert to Vite project	2025-01-05 12:02:59 +00:00
mudkip	b31aea56e4	Add Catppuccin theme (#17 )	2025-01-05 10:58:31 +00:00
Luck	6bf06ab651	Upgrade dependencies	2024-12-08 22:11:46 +00:00
Matouš Kučera	8936a95ef9	Unified and context diff syntax highlighting (#26 )	2024-11-26 23:29:27 +00:00
Duro	60c15956b8	Add lua highlighting (#21 )	2024-09-22 08:13:05 +01:00
dvelo	542b0fbde9	Add C and Swift as valid languages (#23 )	2024-09-22 08:12:10 +01:00
Luck	fb40855a9a	update dependencies	2024-08-24 11:33:15 +01:00