chore: improving homepage styling (#268)

* chore: improving homepage styling More pleasant stylization and ease of generating your trophies * fix: (no-inferrable-types) inferrable types are not allowed Update error_page.ts * Update error_page.ts
ryo-ma · May 15, 2024 · f85b88a · f85b88a
1 parent bc4e735
commit f85b88a
Show file tree

Hide file tree

Showing 2 changed files with 135 additions and 7 deletions.
diff --git a/api/index.ts b/api/index.ts
@@ -64,9 +64,41 @@ async function app(req: Request): Promise<Response> {
   if (username === null) {
     const [base] = req.url.split("?");
     const error = new Error400(
-      `<h2>"username" is a required query parameter</h2>
-<p>The URL should look like <code>${base}?username=USERNAME</code>, where
-<code>USERNAME</code> is <em>your GitHub username.</em>`,
+      `<section>
+      <div>
+        <h2>"username" is a required query parameter</h2>
+        <p>The URL should look like
+        <div>
+          <p id="base-show">${base}?username=USERNAME</p>
+          <button>Copy Base Url</button>
+          <span id="temporary-span"></span>
+        </div>where
+        <code>USERNAME</code> is <em>your GitHub username.</em>
+      </div>
+      <div>
+        <h2>You can use this form: </h2>
+        <p>Enter your username and click get trophies</p>
+        <form action="https://github-profile-trophy.vercel.app/" method="get">
+          <label for="username">GitHub Username</label>
+          <input type="text" name="username" id="username" placeholder="Ex. mojombo" required>
+          <button type="submit">Get Trophy&apos;s</button>
+        </form>
+      </div>
+      <script>
+        const base = "https://github-profile-trophy.vercel.app/";
+        const button = document.querySelector("button");
+        const input = document.querySelector("input");
+        const temporarySpan = document.querySelector("#temporary-span");
+
+        button.addEventListener("click", () => {
+          navigator.clipboard.writeText(document.querySelector("#base-show").textContent);
+          temporarySpan.textContent = "Copied!";
+          setTimeout(() => {
+            temporarySpan.textContent = "";
+          }, 1500);
+        });
+      </script>
+    </section>`,
     );
     return new Response(
       error.render(),

diff --git a/src/error_page.ts b/src/error_page.ts
@@ -2,10 +2,106 @@ abstract class BaseError {
   readonly status!: number;
   readonly message!: string;
   constructor(readonly content?: string) {}
-  render(): string {
-    return `<!DOCTYPE html><html><body><h1>${this.status} - ${this.message}</h1>${
-      this.content ?? ""
-    }</body></html>`;
+  render() {
+    const page = this.renderPage();
+    return page;
+  }
+
+  private renderPage() {
+    const htmlPage = `<!DOCTYPE html>
+    <html lang="en"><head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>GitHub Profile Trophy</title>
+      <meta name="description" content="🏆 Add dynamically generated GitHub Stat Trophies on your readme">
+      <style>
+        body {
+          font-family: Arial, sans-serif;
+          margin: 0;
+          padding: 0;
+          background-color: #f4f4f4;
+        }
+        h1,
+        h2 {
+          color: #333;
+        }
+        p {
+          color: #666;
+        }
+        section {
+          width: 80%;
+          margin: 0 auto;
+          padding: 20px;
+        }
+        div {
+          background-color: #fff;
+          border-radius: 5px;
+          padding: 20px;
+          margin-bottom: 20px;
+          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+        }
+        form {
+          display: flex;
+          flex-direction: column;
+        }
+        label {
+          margin-bottom: 10px;
+        }
+        input {
+          padding: 12px;
+          margin-bottom: 20px;
+          border-radius: 5px;
+          border: 1px solid #ddd;
+        }
+        button {
+          padding: 10px 20px;
+          background-color: #333;
+          color: #fff;
+          border: none;
+          border-radius: 5px;
+          cursor: pointer;
+        }
+        #base-show {
+          font-size: 14px;
+          color: #333;
+          background-color: #f4f4f4;
+          padding: 10px;
+          border-radius: 5px;
+          text-align: center;
+          margin: 10px 0;
+        }
+        button:hover {
+          background-color: #444;
+        }
+        @media (max-width: 768px) {
+          #base-show {
+            font-size: 14;
+          }
+        }
+        @media (max-width: 480px) {
+          #base-show {
+            font-size: 8;
+          }
+        }
+        @media (min-width: 768px) {
+          section {
+            width: 60%;
+          }
+        }
+        @media (min-width: 1024px) {
+          section {
+            width: 50%;
+          }
+        }
+      </style>
+    </head>
+    <body>
+      <h1 style="text-align: center;">${this.status} - ${this.message}</h1>
+      <p style="text-align: center;">${this.content ?? ""}</p>
+    </body>
+    </html>`;
+
+    return htmlPage;
   }
 }