SharzyL · SharzyL · Apr 27, 2025 · Apr 22, 2025
diff --git a/.gitattributes b/.gitattributes
@@ -1,2 +1,3 @@
-frontend/github.css linguist-vendored
+yarn.lock -diff
+worker-configuration.d.ts -diff
 
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -19,6 +19,9 @@ jobs:
       - name: "Setup"
         run: yarn install
 
+      - name: "Build Frontend"
+        run: yarn build:frontend
+
       - name: "Test"
         run: |
           yarn prettier -c .

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -3,34 +3,53 @@ on:
   pull_request:
 
 jobs:
+  coverage-goshujin:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: goshujin
+
+      - name: "Install Node"
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: "yarn"
+
+      - name: "Coverage"
+        run: |
+          yarn install
+          yarn build:frontend || true
+          yarn test
+          yarn coverage
+
+      - name: "Upload Coverage"
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage-goshujin
+          path: coverage
+
   test:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        include:
-          - ref: ${{ github.ref }}
-            name: "head"
-          - ref: "goshujin"
-            name: "goshujin"
-
-    permissions:
-      contents: read
-      pull-requests: write
 
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: ${{ matrix.ref }}
+          ref: ${{ github.ref }}
 
       - name: "Install Node"
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "22"
           cache: "yarn"
 
       - name: "Install Deps"
         run: yarn install
 
+      - name: "Build Frontend"
+        run: yarn build:frontend
+
       - name: "Test"
         run: |
           yarn prettier -c .
@@ -43,7 +62,7 @@ jobs:
       - name: "Upload Coverage"
         uses: actions/upload-artifact@v4
         with:
-          name: coverage-${{ matrix.name }}
+          name: coverage-head
           path: coverage
 
   report-coverage:

diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 /target
-/dist
+dist
 **/*.rs.bk
 Cargo.lock
 bin/
@@ -12,3 +12,4 @@ node_modules/
 .idea
 .wrangler
 coverage
+.dev.vars*
diff --git a/.prettierrc b/.prettierrc
@@ -3,5 +3,5 @@
   "semi": false,
   "trailingComma": "all",
   "tabWidth": 2,
-  "printWidth": 80
+  "printWidth": 120
 }
diff --git a/README.md b/README.md
@@ -97,12 +97,26 @@ $ yarn -s wrangler kv key list --binding PB > kv_list.json
 
 ## Development
 
-Run a local simulator:
+Note that the frontend and worker code are built separatedly. To start a Vite development server of the frontend,
+
+```console
+$ yarn dev:frontend
+```
+
+To develop the backend worker, we must build a develop version of frontend,
+
+```console
+$ yarn build:frontend:dev
+```
+
+Then starts a local worker,
 
 ```console
 $ yarn dev
 ```
 
+The difference between `build:frontend:dev` and `build:frontend` is that the former will points the API endpoint to your deployment URL, while the later points to `http://localhost:8787`, the address of a local worker.
+
 Run tests:
 
 ```console

diff --git a/frontend/tos.md → doc/tos.md b/frontend/tos.md → doc/tos.md
diff --git a/eslint.config.js b/eslint.config.js
@@ -15,17 +15,12 @@ export default tseslint.config(
       },
     },
   },
-  globalIgnores([
-    "dist/**",
-    ".wrangler/**",
-    "coverage/**",
-    "worker-configuration.d.ts",
-  ]),
+  globalIgnores(["dist/**", ".wrangler/**", "coverage/**", "worker-configuration.d.ts"]),
   {
     rules: {
       "no-unused-vars": "off",
       "@typescript-eslint/no-unused-vars": [
-        "error",
+        "warn",
         {
           argsIgnorePattern: "^_",
           varsIgnorePattern: "^_",
@@ -34,7 +29,7 @@ export default tseslint.config(
     },
   },
   {
-    files: ["*.config.js"],
+    files: ["**/*.config.js"],
     extends: [tseslint.configs.disableTypeChecked],
   },
 )
diff --git a/frontend/github.css b/frontend/github.css
diff --git a/frontend/hero.ts b/frontend/hero.ts
@@ -0,0 +1,2 @@
+import { heroui } from "@heroui/react"
+export default heroui()
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,211 +1,13 @@
 <!doctype html>
-<head>
-  <meta charset="UTF-8" />
-  <title>Yet another pastebin</title>
-  <meta
-    name="viewport"
-    content="width=device-width, initial-scale=1, shrink-to-fit=no"
-  />
-  <link rel="icon" href="{{FAVICON}}" type="image/png" />
-  {{CSS}}
-</head>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/static/favicon-32x32.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pastebin Worker</title>
+  </head>
   <body>
-    <div class="px-3 my-5 markdown-body">
-      <h1>Yet Another Pastebin</h1>
-      <p>This is an open source pastebin deployed on Cloudflare Workers.</p>
-      <p>
-        <b>Usage</b>: paste any text here, submit, then share it with URL. (<a
-          href="{{BASE_URL}}/api"
-          >API Documentation</a
-        >)
-      </p>
-      <p>
-        <b>Warning</b>: only for temporary share (<b>max 30 days</b>). Files
-        will be deleted without notice!
-      </p>
-
-      <div id="paste-input-panel">
-        <div id="paste-header">
-          <div class="paste-header-tabs">
-            <div class="paste-tab enabled" id="paste-tab-edit">Edit paste</div>
-            <label
-              for="paste-file-upload"
-              id="paste-tab-file"
-              class="paste-tab"
-            >
-              <input type="file" placeholder="" id="paste-file-upload" />
-              <label for="paste-file-upload">Upload file</label>
-            </label>
-          </div>
-          <div></div>
-        </div>
-        <div class="paste-tab-page enabled" id="paste-edit">
-          <textarea
-            placeholder="Put your paste here"
-            id="paste-textarea"
-            name="c"
-            rows="20"
-          ></textarea>
-        </div>
-        <div class="paste-tab-page" id="paste-file-show">
-          <p id="paste-file-line">
-            <code class="file-name"></code>: <span class="file-size"></span>
-          </p>
-        </div>
-      </div>
-
-      <div id="paste-setting-panel">
-        <h2>Settings</h2>
-        <div id="paste-expiration-panel" class="paste-setting-subitem-panel">
-          <input
-            type="text"
-            step="1"
-            name="paste-expiration"
-            id="paste-expiration-input"
-            placeholder="Expiration (secs)"
-            value="7d"
-          />
-          <label class="small-label" for="paste-expiration-input"
-            >Delete your paste after a period of time (leave blank for no
-            expiry). <br />Units: s (seconds), m (minutes), h (hours), d
-            (days)</label
-          >
-        </div>
-        <div id="paste-passwd-panel" class="paste-setting-subitem-panel">
-          <input
-            type="text"
-            spellcheck="false"
-            name="paste-expiration"
-            id="paste-passwd-input"
-            placeholder="Password"
-          />
-          <label class="small-label" for="paste-passwd-input"
-            >Delete or update your paste with password. Randomly generated by
-            default.
-          </label>
-        </div>
-        <div class="label-line">
-          <input
-            type="radio"
-            name="url-type"
-            value="short"
-            id="paste-url-short-radio"
-            checked
-          />
-          <label for="paste-url-short-radio" class="radio-label"
-            >Generate a short random URL</label
-          >
-          <span class="small-label">Example: {{BASE_URL}}/BxWH</span>
-        </div>
-        <div class="label-line">
-          <input
-            type="radio"
-            name="url-type"
-            value="long"
-            id="paste-url-long-radio"
-          />
-          <label for="paste-url-long-radio" class="radio-label"
-            >Generate a long random URL</label
-          >
-          <span class="small-label"
-            >Example: {{BASE_URL}}/5HQWYNmjA4h44SmybeThXXAm</span
-          >
-        </div>
-        <div class="label-line">
-          <input
-            type="radio"
-            name="url-type"
-            value="custom"
-            id="paste-url-custom-radio"
-          />
-          <label for="paste-url-custom-radio" class="radio-label"
-            >Set by your own</label
-          >
-          <div id="paste-url-input-wrapper">
-            <span id="paste-url-input-prefix">{{BASE_URL}}/~</span>
-            <input
-              type="text"
-              id="paste-custom-url-input"
-              minlength="3"
-              name="custom-url"
-            />
-          </div>
-          <span class="small-label">Example: {{BASE_URL}}/~stocking</span>
-        </div>
-        <div class="label-line">
-          <input
-            type="radio"
-            name="url-type"
-            value="manage"
-            id="paste-url-manage-radio"
-          />
-          <label for="paste-url-manage-radio" class="radio-label"
-            >Update or delete an existing paste</label
-          >
-          <input
-            type="url"
-            spellcheck="false"
-            id="paste-manage-url-input"
-            name="manage-url"
-            value="{{BASE_URL}}"
-          />
-        </div>
-      </div>
-      <div id="paste-uploaded-panel" class="hidden">
-        <h2>Uploaded paste</h2>
-        <div class="uploaded-entry">
-          <input
-            id="uploaded-url"
-            type="text"
-            class="uploaded-table-text"
-            readonly
-          />
-          <button class="copy-button">Copy</button>
-        </div>
-        <label for="uploaded-url" class="small-label">URL</label>
-        <div class="uploaded-entry">
-          <input
-            id="uploaded-manage-url"
-            type="text"
-            class="uploaded-table-text"
-            readonly
-          />
-          <button class="copy-button">Copy</button>
-        </div>
-        <label for="uploaded-manage-url" class="small-label">Manage URL</label>
-        <div class="uploaded-entry">
-          <input
-            id="uploaded-suggested-url"
-            type="text"
-            class="uploaded-table-text"
-            readonly
-          />
-          <button class="copy-button">Copy</button>
-        </div>
-        <label for="uploaded-suggested-url" class="small-label"
-          >Suggest URL</label
-        >
-        <p id="expiration-message"></p>
-      </div>
-      <div>
-        <button id="submit-button" class="long-button px-3 py-2 my-1">
-          Upload
-        </button>
-        <button id="delete-button" class="long-button hidden px-3 py-2 my-1">
-          Delete
-        </button>
-        <span id="submit-error-msg"></span>
-      </div>
-    </div>
-    <footer class="px-3 my-2 text-center">
-      <p>
-        <a href="{{BASE_URL}}/tos" class="d-inline-block">Terms & Conditions</a>
-        /
-        <a href="{{REPO}}" class="d-inline-block">Github</a>
-      </p>
-    </footer>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    {{INDEX_JS}}
+    <div id="root"></div>
+    <script type="module" src="index.tsx"></script>
   </body>
 </html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import { heroui } from "@heroui/react"
		export default heroui()