Add option for query id routing (#31)

Author: iiAhmedYT

.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

src/App.tsx

@@ -5,6 +5,7 @@ import Editor from './components/Editor';
 import usePreference from './hooks/usePreference.ts';
 import themes, { Themes } from './style/themes.ts';
 import { loadFromBytebin } from './util/storage';
+import { useQueryRouting } from './util/constants';
 
 const INITIAL = Symbol();
 const LOADING = Symbol();
@@ -81,10 +82,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;
 }

src/components/EditorControls.tsx

@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import themes, { Themes } from '../style/themes';
 import { languages } from '../util/highlighting';
 import { saveToBytebin } from '../util/storage';
+import { useQueryRouting } from '../util/constants';
 import Button from './Button';
 import { ResetFunction } from './Editor';
 import MenuButton from './MenuButton';
@@ -59,9 +60,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;
       }

src/util/constants.ts

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

src/vite-env.d.ts

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