language detection

.github/workflows/pages.yml

@@ -1,45 +0,0 @@
-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

.gitignore

@@ -1,24 +1,25 @@
-# Logs
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-logs
+
-*.log
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
 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?

.prettierrc

@@ -5,6 +5,5 @@
   "singleQuote": true,
   "trailingComma": "es5",
   "arrowParens": "avoid",
-  "quoteProps": "consistent",
+  "quoteProps": "consistent"
-  "plugins": ["prettier-plugin-organize-imports"]
 }

API.md

@@ -1,42 +0,0 @@
-<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.

Dockerfile

@@ -1,8 +1,8 @@
 # Build stage
-FROM node:lts AS build
+FROM node:lts as build
 
 ARG BYTEBIN_URL="data/"
-ENV VITE_BYTEBIN_URL="${BYTEBIN_URL}"
+ENV REACT_APP_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/dist /usr/share/nginx/html
+COPY --from=build /app/build /usr/share/nginx/html
 CMD ["nginx", "-g", "daemon off;"]
 EXPOSE 80/tcp

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](#self-hosting) 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](#host-your-own) if you like!
 
 ##### 1) In a Web Browser
 Just go to https://pastes.dev!
@@ -23,6 +23,18 @@ 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>
   
@@ -44,8 +56,8 @@ You can submit content most easily using [curl](https://curl.se/docs/manpage.htm
   ```
 </details>
 
-##### 3) From Code / Scripts
+##### 3) From Code
-Please see the [API Documentation](/API.md). :)
+Send GET/POST/PUT requests to `https://api.pastes.dev/`. More info [below](#pastesdev-api).
 
 ___
 
@@ -54,15 +66,52 @@ 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
+### Host your own
 
-The easiest way to self-host is using Docker (& Docker Compose). You can run the following commands to get started:
+It's quite simple to host your own version.
 
 ```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
 ```
 

docker-compose.yml

@@ -1,10 +1,9 @@
-services:
+version: '3.8'
 
-  # frontend service
+services:
   paste:
     image: ghcr.io/lucko/paste
 
-  # backend service
   bytebin:
     image: ghcr.io/lucko/bytebin
     volumes:
@@ -12,7 +11,6 @@ services:
     environment:
       BYTEBIN_MISC_KEYLENGTH: 5
 
-  # reverse proxy
   nginx:
     image: nginx:alpine
     command: ['nginx', '-g', 'daemon off;']

docker/reverseproxy-nginx.conf

@@ -1,8 +1,8 @@
-# nginx reverse proxy configuration for paste frontend & bytebin backend
+# nginx reverse proxy configuration for paste+bytebin
 server {
 	listen 80 default_server;
 
-	# proxy / path to paste frontend
+    # paste app
 	location / {
         proxy_set_header   Host $host;
         proxy_set_header   X-Real-IP $remote_addr;
@@ -17,7 +17,7 @@ server {
         return 404;
     }
 
-	# proxy /data path to bytebin backend
+    # proxy /data endpoint to bytebin
     location /data/ {
         proxy_set_header   Host $host;
         proxy_set_header   X-Real-IP $remote_addr;

eslint.config.js

@@ -1,28 +0,0 @@
-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 },
-      ],
-    },
-  },
-)

package.json

@@ -2,44 +2,59 @@
   "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": {
-    "@catppuccin/palette": "^1.7.1",
+    "@monaco-editor/react": "^4.6.0",
-    "@monaco-editor/react": "^4.8.0-rc.3",
     "copy-to-clipboard": "^3.3.3",
     "history": "^5.3.0",
-    "monaco-editor": "^0.55.1",
+    "local-storage": "^2.0.0",
-    "monaco-themes": "^0.4.8",
+    "monaco-themes": "^0.4.4",
     "pako": "^2.1.0",
-    "react": "^19.2.4",
+    "react": "^18.2.0",
     "react-device-detect": "^2.2.3",
-    "react-dom": "^19.2.4",
+    "react-dom": "^18.2.0",
-    "styled-components": "^6.3.11",
+    "react-scripts": "^5.0.1",
+    "styled-components": "^6.1.1",
+    "typescript": "^4.4.2",
     "whatwg-mimetype": "^3.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^10.0.1",
+    "@testing-library/jest-dom": "^5.14.1",
-    "@types/node": "^25.3.0",
+    "@testing-library/react": "^13.0.0",
-    "@types/pako": "^2.0.4",
+    "@testing-library/user-event": "^13.2.1",
-    "@types/react": "^19.2.14",
+    "@types/jest": "^27.0.1",
-    "@types/react-dom": "^19.2.3",
+    "@types/node": "^18.11.9",
+    "@types/pako": "^2.0.3",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/whatwg-mimetype": "^3.0.2",
-    "@vitejs/plugin-react-swc": "^4.2.3",
+    "monaco-editor": "^0.44.0",
-    "eslint": "^10.0.1",
+    "prettier": "^3.1.0",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "prettier-plugin-organize-imports": "^3.2.4"
-    "eslint-plugin-react-refresh": "^0.5.2",
+  },
-    "globals": "^17.3.0",
+  "scripts": {
-    "prettier": "^3.8.1",
+    "start": "react-scripts start",
-    "prettier-plugin-organize-imports": "^4.3.0",
+    "build": "react-scripts build",
-    "typescript": "~5.9.3",
+    "test": "react-scripts test",
-    "typescript-eslint": "^8.56.1",
+    "eject": "react-scripts eject",
-    "vite": "^7.3.1"
+    "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"
+    ]
   }
 }

public/index.html

@@ -11,21 +11,20 @@
     <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="https://pastes.dev/assets/logo256.png" />
+    <meta name="twitter:image" content="%PUBLIC_URL%/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="https://pastes.dev/assets/logo256.png" />
+    <meta property="og:image" content="%PUBLIC_URL%/assets/logo256.png" />
-    <meta property="og:url" content="https://pastes.dev" />
+    <meta property="og:url" content="%PUBLIC_URL%" />
 
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="shortcut icon" href="/assets/logo512.png" sizes="512x512" type="image/png">
+    <link href="%PUBLIC_URL%/assets/logo512.png" rel="shortcut icon" sizes="512x512" type="image/png">
-    <link rel="apple-touch-icon" href="/assets/logo256.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/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>

src/App.tsx

@@ -1,11 +1,8 @@
 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';
+import { Language } from './util/language';
+import { detectLanguage } from './util/detect-language';
 
 const INITIAL = Symbol();
 const LOADING = Symbol();
@@ -18,13 +15,7 @@ export default function App() {
   const [state, setState] = useState<LoadingState>(INITIAL);
   const [forcedContent, setForcedContent] = useState<string>('');
   const [actualContent, setActualContent] = useState<string>('');
-  const [contentType, setContentType] = useState<string>();
+  const [contentType, setContentType] = useState<Language>();
-  const [theme, setTheme] = usePreference<keyof Themes>(
-    'theme',
-    'dark',
-    pref => !!themes[pref]
-  );
-  const [showAbout, setShowAbout] = useState<boolean>(false);
 
   function setContent(content: string) {
     setActualContent(content);
@@ -33,15 +24,20 @@ export default function App() {
 
   useEffect(() => {
     if (pasteId && state === INITIAL) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
       setState(LOADING);
       setContent('Loading...');
 
       loadFromBytebin(pasteId).then(({ ok, content, type }) => {
         if (ok) {
           setContent(content);
-          if (type) {
+          if (type !== 'plain') {
             setContentType(type);
+          } else {
+            detectLanguage(pasteId).then(detectedLanguage => {
+              if (detectedLanguage) {
+                setContentType(detectedLanguage);
+              }
+            });
           }
         } else {
           setContent(get404Message(pasteId));
@@ -52,19 +48,13 @@ 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>
   );
 }
 
@@ -83,10 +73,10 @@ function get404Message(pasteId: string) {
 }
 
 function getPasteIdFromUrl() {
-  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;
+  if (path && /^\/[a-zA-Z0-9]+$/.test(path)) {
+    return path.substring(1);
+  } else {
+    return undefined;
+  }
 }

src/components/About.tsx

@@ -1,202 +0,0 @@
-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,21 +1,20 @@
 import { useEffect, useRef, useState } from 'react';
 import { isMobile } from 'react-device-detect';
+import { ThemeProvider } from 'styled-components';
 
 import usePreference from '../hooks/usePreference';
-import { Themes } from '../style/themes.ts';
+import themes, { Themes } from '../style/themes';
 import EditorControls from './EditorControls';
 import EditorGlobalStyle from './EditorGlobalStyle';
 import EditorTextArea from './EditorTextArea';
+import { Language } from '../util/language';
 
 export interface EditorProps {
   forcedContent: string;
   actualContent: string;
   setActualContent: (value: string) => void;
-  contentType?: string;
+  contentType?: Language;
   pasteId?: string;
-  theme: keyof Themes;
-  setTheme: (value: keyof Themes) => void;
-  setShowAbout: (value: boolean) => void;
 }
 
 export type ResetFunction = () => void;
@@ -26,29 +25,24 @@ 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 resetFunction = useRef<ResetFunction>();
 
+  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]);
@@ -62,6 +56,7 @@ export default function Editor({
 
   return (
     <>
+      <ThemeProvider theme={themes[theme]}>
         <EditorGlobalStyle />
         <EditorControls
           actualContent={actualContent}
@@ -72,21 +67,19 @@ export default function Editor({
           setReadOnly={setReadOnly}
           theme={theme}
           setTheme={setTheme}
-        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

@@ -1,11 +1,10 @@
 import copy from 'copy-to-clipboard';
 import history from 'history/browser';
-import { RefObject, useCallback, useEffect, useState } from 'react';
+import { MutableRefObject, useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import themes, { Themes } from '../style/themes';
-import { useQueryRouting } from '../util/constants';
+import { languages, unknownLanguage } from '../util/language';
-import { languages } from '../util/highlighting';
 import { saveToBytebin } from '../util/storage';
 import Button from './Button';
 import { ResetFunction } from './Editor';
@@ -13,17 +12,14 @@ import MenuButton from './MenuButton';
 
 export interface EditorControlsProps {
   actualContent: string;
-  resetFunction: RefObject<ResetFunction | null>;
+  resetFunction: MutableRefObject<ResetFunction | undefined>;
   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({
@@ -35,23 +31,15 @@ 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;
@@ -61,15 +49,9 @@ 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;
       }
@@ -122,25 +104,30 @@ export default function EditorControls({
         </Button>
         <MenuButton
           label="language"
-          value={language}
+          value={language === unknownLanguage ? '?' : language}
           setValue={setLanguage}
-          ids={languages}
+          ids={languages as unknown as Record<string, string[]>}
         />
         {readOnly && <Button onClick={unsetReadOnly}>[edit]</Button>}
       </Section>
       <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 onClick={showAbout}>[about]</Button>
+        <Button
+          className="optional"
+          as="a"
+          href="https://github.com/lucko/paste#readme"
+          target="_blank"
+          rel="noreferrer"
+        >
+          [about]
+        </Button>
       </Section>
     </Header>
   );
@@ -149,7 +136,7 @@ export default function EditorControls({
 const Header = styled.header`
   position: fixed;
   top: 0;
-  z-index: 10;
+  z-index: 2;
   width: 100%;
   height: 2em;
   color: ${props => props.theme.primary};
@@ -157,15 +144,13 @@ 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: 850px) {
+  @media (max-width: 470px) {
     .optional {
       display: none;
     }

src/components/EditorTextArea.tsx

@@ -5,74 +5,45 @@ import Editor, {
   OnMount,
 } from '@monaco-editor/react';
 import history from 'history/browser';
-import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import React, {
-import styled, { useTheme } from 'styled-components';
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import styled 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;
-  wordWrap: boolean;
+  resetFunction: MutableRefObject<ResetFunction | undefined>;
-  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,
@@ -92,8 +63,6 @@ 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,
@@ -122,16 +91,12 @@ export default function EditorTextArea({
     setEditor(editor);
     setMonaco(monaco);
 
-    resetFunctionRef.current = () => {
+    resetFunction.current = () => {
       editor.setValue('');
-      if (!readOnly) {
       editor.focus();
-      }
     };
 
-    if (!readOnly) {
     editor.focus();
-    }
   };
 
   const onChange: OnChange = useCallback(
@@ -164,7 +129,7 @@ export default function EditorTextArea({
           fontFamily: 'JetBrains Mono',
           fontSize: fontSize,
           fontLigatures: true,
-          wordWrap: wordWrap ? 'on' : 'off',
+          wordWrap: 'on',
           renderLineHighlight: 'none',
           renderValidationDecorations: 'off',
           readOnly,
@@ -281,7 +246,7 @@ function useSelectedLine(): [SelectedLine, ToggleSelectedFunction] {
 }
 
 function useLineNumberMagic(
-  editorAreaRef: RefObject<HTMLDivElement | null>,
+  editorAreaRef: React.RefObject<HTMLDivElement>,
   selected: SelectedLine,
   toggleSelected: ToggleSelectedFunction,
   forcedContent: string,
@@ -296,13 +261,13 @@ function useLineNumberMagic(
     }
 
     const handler = (click: MouseEvent) => {
-      const element = document.elementFromPoint(click.x, click.y);
+      const target = click?.target as HTMLElement;
       if (
-        element &&
+        target &&
-        element.classList.contains('line-numbers') &&
+        target.classList.contains('line-numbers') &&
-        element.textContent
+        target.textContent
       ) {
-        toggleSelected(parseInt(element.textContent), click);
+        toggleSelected(parseInt(target.textContent), click);
       }
     };
 

src/components/MenuButton.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 import Button from './Button';
 
@@ -17,31 +16,16 @@ 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 = () => setOpen(false);
+    const listener = (e: MouseEvent) => 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);
   }
 
@@ -79,35 +63,22 @@ export default function MenuButton<T extends string>({
   }
 
   return (
-    <>
+    <Button onClick={toggleOpen}>
-      <Button onClick={toggleOpen} ref={buttonRef}>
       [<span>{label}: </span>
-        {value}]
+      {value}]{open && <Menu>{items}</Menu>}
     </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;
@@ -132,7 +103,6 @@ const Menu = styled.ul`
 
   > li {
     padding: 0em 1em 0.05em 1em;
-    color: ${props => props.theme.primary};
   }
 
   > li:hover {

src/hooks/usePreference.ts

@@ -1,3 +1,4 @@
+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.
@@ -7,9 +8,8 @@ export default function usePreference<T>(
   valid: (value: T) => boolean
 ): [T, Dispatch<SetStateAction<T>>, (value: T) => boolean] {
   const [value, setValue] = useState<T>(() => {
-    const prefRaw = localStorage.getItem(id);
+    const pref = lsGet(id) as T;
-    const pref = prefRaw !== null ? (JSON.parse(prefRaw) as T) : undefined;
+    if (pref && valid(pref)) {
-    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) {
-      localStorage.removeItem(id);
+      lsRemove(id);
     } else {
-      localStorage.setItem(id, JSON.stringify(value));
+      lsSet(id, value);
     }
   }, [value, id, defaultValue]);
 

src/style/styled.d.ts

@@ -2,6 +2,5 @@ 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 {}
 }

src/style/themes.ts

@@ -1,18 +1,11 @@
 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;
@@ -20,7 +13,6 @@ export interface Theme {
   secondary: Color;
   highlight: Color;
   background: Color;
-  logo: Color;
   lightOrDark: 'light' | 'dark';
   highlightedLine: {
     color: Color;
@@ -36,10 +28,6 @@ export interface Themes {
   'monokai': Theme;
   'solarized': Theme;
   'solarized-light': Theme;
-  'latte': Theme;
-  'frappe': Theme;
-  'macchiato': Theme;
-  'mocha': Theme;
 }
 
 const themes: Themes = {
@@ -49,7 +37,6 @@ const themes: Themes = {
     secondary: '#010409', // canvas.inset
     highlight: '#161b22', // canvas.overlay
     background: '#0d1117', // canvas.default
-    logo: '#d2a8ff',
     lightOrDark: 'dark',
 
     highlightedLine: {
@@ -57,8 +44,7 @@ const themes: Themes = {
       backgroundColor: '#161b22', // canvas.overlay
     },
 
-    editor: makeMonacoTheme(
+    editor: makeMonacoTheme({
-      {
       base: 'vs-dark',
       colors: {
         primary: '#c9d1d9', // fg.default
@@ -78,13 +64,8 @@ const themes: Themes = {
         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',
@@ -92,7 +73,6 @@ const themes: Themes = {
     secondary: '#022550',
     highlight: '#36368c',
     background: '#ffffff',
-    logo: '#00a2ff',
     lightOrDark: 'light',
 
     highlightedLine: {
@@ -100,8 +80,7 @@ const themes: Themes = {
       backgroundColor: '#e0f6ff',
     },
 
-    editor: makeMonacoTheme(
+    editor: makeMonacoTheme({
-      {
       base: 'vs',
       colors: {
         primary: '#000000',
@@ -121,13 +100,8 @@ const themes: Themes = {
         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',
@@ -135,21 +109,17 @@ const themes: Themes = {
     secondary: '#383a59',
     highlight: '#44475a',
     background: '#282a36',
-    logo: '#BD93F9', // purple
     lightOrDark: 'dark',
     highlightedLine: {
       color: '#586e75',
       backgroundColor: '#44475a',
     },
-    editor: addExtraColors(dracula as editor.IStandaloneThemeData, {
+    editor: addLogColors(dracula as editor.IStandaloneThemeData, {
-      logInfo: '#50FA7B', // green
+      info: '#50FA7B', // green
-      logError: '#FF5555', // red
+      error: '#FF5555', // red
-      logWarning: '#FFB86C', // orange
+      warning: '#FFB86C', // orange
-      logDate: '#BD93F9', // purple
+      date: '#BD93F9', // purple
-      logException: '#F1FA8C', // yellow
+      exception: '#F1FA8C', // yellow
-      diffMeta: '#BD93F9', // purple
-      diffAddition: '#50FA7B', // green
-      diffDeletion: '#FF5555', // red
     }),
   },
   'monokai': {
@@ -158,21 +128,17 @@ const themes: Themes = {
     secondary: '#222218',
     highlight: '#49483E',
     background: '#272822',
-    logo: '#f92672', // red
     lightOrDark: 'dark',
     highlightedLine: {
       color: '#49483E',
       backgroundColor: '#3E3D32',
     },
-    editor: addExtraColors(monokai as editor.IStandaloneThemeData, {
+    editor: addLogColors(monokai as editor.IStandaloneThemeData, {
-      logInfo: '#a6e22e', // green
+      info: '#a6e22e', // green
-      logError: '#f92672', // red
+      error: '#f92672', // red
-      logWarning: '#fd971f', // orange
+      warning: '#fd971f', // orange
-      logDate: '#AB9DF2', // purple
+      date: '#AB9DF2', // purple
-      logException: '#F1FA8C', // yellow
+      exception: '#F1FA8C', // yellow
-      diffMeta: '#AB9DF2', // purple
-      diffAddition: '#a6e22e', // green
-      diffDeletion: '#f92672', // red
     }),
   },
   'solarized': {
@@ -181,21 +147,17 @@ 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: addExtraColors(solarizedDark as editor.IStandaloneThemeData, {
+    editor: addLogColors(solarizedDark as editor.IStandaloneThemeData, {
-      logInfo: '#268bd2', // blue
+      info: '#268bd2', // blue
-      logError: '#dc322f', // red
+      error: '#dc322f', // red
-      logWarning: '#b58900', // yellow
+      warning: '#b58900', // yellow
-      logDate: '#2aa198', // cyan
+      date: '#2aa198', // cyan
-      logException: '#859900', // green
+      exception: '#859900', // green
-      diffMeta: '#2aa198', // cyan
-      diffAddition: '#859900', // green
-      diffDeletion: '#dc322f', // red
     }),
   },
   'solarized-light': {
@@ -204,42 +166,23 @@ 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: addExtraColors(solarizedLight as editor.IStandaloneThemeData, {
+    editor: addLogColors(solarizedLight as editor.IStandaloneThemeData, {
-      logInfo: '#268bd2', // blue
+      info: '#268bd2', // blue
-      logError: '#dc322f', // red
+      error: '#dc322f', // red
-      logWarning: '#b58900', // yellow
+      warning: '#b58900', // yellow
-      logDate: '#2aa198', // cyan
+      date: '#2aa198', // cyan
-      logException: '#859900', // green
+      exception: '#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: {
@@ -255,12 +198,16 @@ interface MonacoThemeProps {
     keyword: Color;
     type: Color;
     variable: Color;
-  } & ExtraColors;
+    logInfo: Color;
+    logError: Color;
+    logWarning: Color;
+    logDate: Color;
+    logException: Color;
+  };
 }
 
 export function makeMonacoTheme(
-  props: MonacoThemeProps,
+  props: MonacoThemeProps
-  extraColors: ColorRecord
 ): editor.IStandaloneThemeData {
   const colors = Object.fromEntries(
     Object.entries(props.colors).map(([key, color]) => [
@@ -269,11 +216,6 @@ 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,
@@ -304,95 +246,37 @@ 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: { ...editorColors, ...extraColors },
+    colors: {
+      'editor.background': `#${colors.background}`,
+      'editor.foreground': `#${colors.primary}`,
+    },
   };
 }
 
-export function addExtraColors(
+interface LogColors {
+  info: Color;
+  error: Color;
+  warning: Color;
+  date: Color;
+  exception: Color;
+}
+
+export function addLogColors(
   theme: editor.IStandaloneThemeData,
-  extraColors: ExtraColors
+  logColors: LogColors
 ): editor.IStandaloneThemeData {
   const colors = Object.fromEntries(
-    Object.entries(extraColors).map(([key, color]) => [key, color.substring(1)])
+    Object.entries(logColors).map(([key, color]) => [key, color.substring(1)])
-  ) as Record<keyof ExtraColors, string>;
+  ) as Record<keyof LogColors, string>;
   theme.rules.push(
     ...[
-      { token: 'info.log', foreground: colors.logInfo },
+      { token: 'info.log', foreground: colors.info },
-      { token: 'error.log', foreground: colors.logError, fontStyle: 'bold' },
+      { token: 'error.log', foreground: colors.error, fontStyle: 'bold' },
-      { token: 'warning.log', foreground: colors.logWarning },
+      { token: 'warning.log', foreground: colors.warning },
-      { token: 'date.log', foreground: colors.logDate },
+      { token: 'date.log', foreground: colors.date },
-      { token: 'exception.log', foreground: colors.logException },
+      { token: 'exception.log', foreground: colors.exception },
-      { 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,
-  };
-}

src/util/constants.ts

@@ -1,5 +1,8 @@
 export const bytebinUrl =
-  import.meta.env.VITE_BYTEBIN_URL || 'https://api.pastes.dev/';
+  process.env.REACT_APP_BYTEBIN_URL || 'https://bytebin.lucko.me/';
+
 export const postUrl = bytebinUrl + 'post';
-export const useQueryRouting =
+
-  import.meta.env.VITE_USE_QUERY_ROUTING === 'true';
+export const languageDetectionUrl =
+  process.env.REACT_APP_LANG_DETECT_URL ||
+  'https://language-detection-service.pastes.dev/';

src/util/detect-language.ts

@@ -0,0 +1,49 @@
+import { languageDetectionUrl } from './constants';
+import { Language } from './language';
+
+interface DetectedLanguage {
+  languageId: string;
+  confidence: number;
+}
+
+export async function detectLanguage(id: string): Promise<Language | null> {
+  try {
+    const resp = await fetch(languageDetectionUrl + id);
+    if (resp.ok) {
+      const results = (await resp.json()) as DetectedLanguage[];
+      for (const { languageId, confidence } of results) {
+        if (confidence > 0.5 && lookup[languageId]) {
+          return lookup[languageId];
+        }
+      }
+    }
+  } catch (e) {}
+  return null;
+}
+
+const lookup: Record<string, Language> = {
+  ini: 'log', // the model seems to confidently guess log files as ini - log is the more likely option
+  yaml: 'yaml',
+  md: 'markdown',
+  rb: 'ruby',
+  kt: 'kotlin',
+  xml: 'xml',
+  js: 'javascript',
+  html: 'html',
+  ts: 'typescript',
+  json: 'json',
+  php: 'php',
+  py: 'python',
+  rs: 'rust',
+  sql: 'sql',
+  sh: 'shell',
+  cpp: 'cpp',
+  go: 'go',
+  scala: 'scala',
+  dockerfile: 'dockerfile',
+  java: 'java',
+  cs: 'csharp',
+  css: 'css',
+  groovy: 'java',
+};
+// missing: csv, ml, ex, pas, bat, lua, groovy, v, jl, pm, prolog, matlab, clj, f90, c, tex, coffee, ps1, hs, mm, cmake, erl, dm, dart, asm, makefile, r, swift, lisp, vba, toml, cbl

src/util/highlighting.ts

@@ -1,26 +0,0 @@
-export const languages = {
-  text: ['plain', 'log'],
-  config: ['yaml', 'json', 'xml', 'ini'],
-  code: [
-    'java',
-    'javascript',
-    'typescript',
-    'python',
-    'kotlin',
-    'scala',
-    'cpp',
-    'csharp',
-    'shell',
-    'ruby',
-    'rust',
-    'sql',
-    'go',
-    'lua',
-    'swift',
-    'c',
-  ],
-  web: ['html', 'css', 'scss', 'php', 'graphql'],
-  misc: ['diff', 'dockerfile', 'markdown', 'proto'],
-};
-
-export const languageIds = Object.values(languages).flat(1);

src/util/language.ts

@@ -0,0 +1,70 @@
+export type Language =
+  | 'plain'
+  | 'plaintext'
+  | 'log'
+  | 'yaml'
+  | 'json'
+  | 'xml'
+  | 'ini'
+  | 'java'
+  | 'javascript'
+  | 'typescript'
+  | 'python'
+  | 'kotlin'
+  | 'scala'
+  | 'cpp'
+  | 'csharp'
+  | 'shell'
+  | 'ruby'
+  | 'rust'
+  | 'sql'
+  | 'go'
+  | 'html'
+  | 'css'
+  | 'scss'
+  | 'php'
+  | 'graphql'
+  | 'dockerfile'
+  | 'markdown'
+  | 'proto';
+
+export const unknownLanguage: Language & 'plain' = 'plain';
+
+export interface Languages {
+  text: Language[];
+  config: Language[];
+  code: Language[];
+  web: Language[];
+  misc: Language[];
+}
+
+export const languages: Languages = {
+  text: ['plaintext', 'log'],
+  config: ['yaml', 'json', 'xml', 'ini'],
+  code: [
+    'java',
+    'javascript',
+    'typescript',
+    'python',
+    'kotlin',
+    'scala',
+    'cpp',
+    'csharp',
+    'shell',
+    'ruby',
+    'rust',
+    'sql',
+    'go',
+  ],
+  web: ['html', 'css', 'scss', 'php', 'graphql'],
+  misc: ['dockerfile', 'markdown', 'proto'],
+};
+
+export const languageIds: Language[] = [
+  ...Object.values(languages).flat(1),
+  unknownLanguage,
+];
+
+export function isLanguage(lang: string): lang is Language {
+  return languageIds.includes(lang as Language);
+}

src/util/languages/diff.ts

@@ -1,30 +0,0 @@
-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'],
-    ],
-  },
-};

src/util/storage.ts

@@ -1,12 +1,12 @@
 import { gzip } from 'pako';
 import MIMEType from 'whatwg-mimetype';
 import { bytebinUrl, postUrl } from './constants';
-import { languageIds } from './highlighting';
+import { isLanguage, Language } from './language';
 
 interface LoadResultSuccess {
   ok: true;
   content: string;
-  type?: string;
+  type?: Language;
 }
 
 interface LoadResultFail {
@@ -32,7 +32,6 @@ export async function loadFromBytebin(id: string): Promise<LoadResult> {
       return { ok: false };
     }
   } catch (e) {
-    console.error(e);
     return { ok: false };
   }
 }
@@ -60,18 +59,26 @@ export async function saveToBytebin(
       return json.key;
     }
   } catch (e) {
-    console.error(e);
+    console.log(e);
   }
   return null;
 }
 
-export function contentTypeToLanguage(contentType: string) {
+export function contentTypeToLanguage(
+  contentType: string
+): Language | undefined {
   const { type, subtype: subType } = new MIMEType(contentType);
   if (type === 'application' && subType === 'json') {
     return 'json';
   }
-  if (type === 'text' && languageIds.includes(subType.toLowerCase())) {
+
-    return subType.toLowerCase();
+  let subTypeLower = subType.toLowerCase();
+  if (subTypeLower.startsWith('x-')) {
+    subTypeLower = subTypeLower.substring(2);
+  }
+
+  if (type === 'text' && isLanguage(subTypeLower)) {
+    return subTypeLower;
   }
 }
 

src/vite-env.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="vite/client" />
-
-interface ImportMetaEnv {
-  readonly VITE_BYTEBIN_URL?: string;
-  readonly VITE_USE_QUERY_ROUTING?: string;
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}

tsconfig.app.json

@@ -1,26 +0,0 @@
-{
-  "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"]
-}

tsconfig.json

@@ -1,7 +1,27 @@
 {
-  "files": [],
+  "compilerOptions": {
-  "references": [
+    "target": "es5",
-    { "path": "./tsconfig.app.json" },
+    "lib": [
-    { "path": "./tsconfig.node.json" }
+      "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"
   ]
 }

tsconfig.node.json

@@ -1,24 +0,0 @@
-{
-  "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"]
-}

vite.config.ts

@@ -1,15 +0,0 @@
-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)
-      ),
-    },
-  },
-});