improve GUI

public/static/style.css

@@ -97,6 +97,9 @@ body {
     transform: rotate(360deg);
   }
 }
+.header button .icon {
+  margin: 0;
+}
 
 /* CONTAINER */
 /* Title */
@@ -346,6 +349,9 @@ a:hover {
   }
 }
 @media (max-width: 800px) {
+  html {
+    font-size: small !important;
+  }
   .layout-main-header {
     display: inline-block;
   }
@@ -355,7 +361,7 @@ a:hover {
 }
 @media (max-width: 600px) {
   html {
-    font-size: small;
+    font-size: smaller !important;
   }
   .container-layout {
     flex-direction: column-reverse;

src/components/login.tsx

@@ -7,27 +7,28 @@ import { getAuthenticatedUser } from "../utils/octokit";
 const LoginButton = () => {
   return (
     <button class="button">
-      <a href="/github/login">{"Login"}</a>
+      <img src="/static/icons/github.svg" alt="GitHub" class="icon" />
+      <a href="/github/login">{"Login with GitHub"}</a>
     </button>
   );
 };
 
 const User = async ({ user }: { user: Promise<UserResponse> }) => {
   try {
     const c = useRequestContext();
+    const { path } = c.req;
     const {
       data: { login, avatar_url },
     } = await user;
     return (
       <button class="button" onclick="logout">
-        <a href={`/github/logout?callback_url=${c.req.path}`}>
+        <a href={`/github/logout?callback_url=${path}`}>
           <img class="avatar" src={avatar_url} alt="avatar" />
           {login}
         </a>
       </button>
     );
-  } catch (error) {
-    console.error(error);
+  } catch (_) {
     return <LoginButton />;
   }
 };

src/components/repository.tsx

@@ -1,4 +1,5 @@
 import { JSX } from "hono/jsx/jsx-runtime";
+import { Suspense } from "hono/jsx";
 
 import { timeAgo } from "../utils/time";
 import { constructUrl } from "../utils/url";
@@ -8,7 +9,11 @@ export const Repository = async ({
 }: {
   repository: Promise<Repository>;
 }) => {
-  return <Container repository={await repository} />;
+  return (
+    <Suspense fallback={<div>{"prout"}</div>}>
+      <Container repository={await repository} />
+    </Suspense>
+  );
 }; // TODO handle errors like https://docs.github.com/en/rest/guides/scripting-with-the-rest-api-and-javascript?apiVersion=2022-11-28#handling-rate-limit-errors
 
 const Container = ({ repository }: { repository: Repository }): JSX.Element => {

src/index.tsx

@@ -9,7 +9,6 @@ import { handleTokens } from "./utils/tokens";
 
 import api from "./routes/api";
 import github from "./routes/github";
-import welcome from "./routes/welcome";
 import template from "./routes/template";
 import id from "./routes/id";
 
@@ -41,7 +40,6 @@ app.use("/", handleTokens);
 /* ROUTES */
 app.route("/api", api);
 app.route("/github", github);
-app.route("/welcome", welcome);
 app.route("/template", template);
 app.route("/id", id);
 

src/utils/octokit.tsx

@@ -21,7 +21,7 @@ const verifyToken = async (
   try {
     const { status } = await getRepos(octokit, "octocat", "Hello-World");
     return status === 200;
-  } catch (error) {
+  } catch (_) {
     return false;
   }
 };
@@ -100,7 +100,7 @@ const getRepositories = async (
   since: number
 ): Promise<RepositoriesResponse> => {
   try {
-    return await octokit.rest.repos.listPublic({ since }); // octokit.request("GET /repositories", { since });
+    return octokit.rest.repos.listPublic({ since }); // octokit.request("GET /repositories", { since });
   } catch (error: any) {
     throw error;
   }
@@ -120,7 +120,7 @@ export const getRepos = async (
   repo: string
 ): Promise<RepositoryResponse> => {
   try {
-    return await octokit.rest.repos.get({ owner, repo }); // octokit.request("GET /repos/{owner}/{repo}", { owner, repo });
+    return octokit.rest.repos.get({ owner, repo }); // octokit.request("GET /repos/{owner}/{repo}", { owner, repo });
   } catch (error: any) {
     throw error;
   }
@@ -231,7 +231,7 @@ export const getAuthenticatedUser = async (
   octokit: Octokit
 ): Promise<UserResponse> => {
   try {
-    return await octokit.rest.users.getAuthenticated(); // octokit.request("GET /user");
+    return octokit.rest.users.getAuthenticated(); // octokit.request("GET /user");
   } catch (error: any) {
     throw error;
   }