fix: correct http return and invalid styling (ryo-ma#269)

* fix: correct http return and invalid styling Page responded with incorrect http return message. * fix: correct http return and invalid styling Update error_page.ts
hinkyle · May 22, 2024 · a50a8b7 · a50a8b7
1 parent f85b88a
commit a50a8b7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/api/index.ts b/api/index.ts
@@ -80,7 +80,7 @@ async function app(req: Request): Promise<Response> {
         <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>
+          <input type="text" name="username" id="username" placeholder="Ex. gabriel-logan" required>
           <button type="submit">Get Trophy&apos;s</button>
         </form>
       </div>
@@ -117,7 +117,7 @@ async function app(req: Request): Promise<Response> {
     const userResponseInfo = await client.requestUserInfo(username);
     if (userResponseInfo instanceof ServiceError) {
       return new Response(
-        ErrorPage({ error: userInfo, username }).render(),
+        ErrorPage({ error: userResponseInfo, username }).render(),
         {
           status: userResponseInfo.code,
           headers: new Headers({ "Content-Type": "text" }),

diff --git a/src/error_page.ts b/src/error_page.ts
@@ -28,6 +28,14 @@ abstract class BaseError {
         p {
           color: #666;
         }
+        #back-link {
+          display: flex;
+          justify-content: center;
+          text-decoration: none;
+        }
+        #back-link:hover {
+          text-decoration: underline;
+        }
         section {
           width: 80%;
           margin: 0 auto;
@@ -62,7 +70,7 @@ abstract class BaseError {
           cursor: pointer;
         }
         #base-show {
-          font-size: 14px;
+          font-size: 16px;
           color: #333;
           background-color: #f4f4f4;
           padding: 10px;
@@ -75,12 +83,12 @@ abstract class BaseError {
         }
         @media (max-width: 768px) {
           #base-show {
-            font-size: 14;
+            font-size: 14px;
           }
         }
         @media (max-width: 480px) {
           #base-show {
-            font-size: 8;
+            font-size: 8px;
           }
         }
         @media (min-width: 768px) {
@@ -98,6 +106,10 @@ abstract class BaseError {
     <body>
       <h1 style="text-align: center;">${this.status} - ${this.message}</h1>
       <p style="text-align: center;">${this.content ?? ""}</p>
+      ${
+      this.content &&
+      '<a id="back-link" href="https://github-profile-trophy.vercel.app/">Go back</a>'
+    }
     </body>
     </html>`;