v0.6.0

README.md

@@ -19,11 +19,13 @@ npm run deploy
 - [ ] Change the document title dynamically (with nested `Suspense`)
 - [ ] Improve GUI
   - [x] add additional info about the repo
-  - [ ] mimic GitHub layout
+  - [x] implement dark/light themes
+  - [x] mimic GitHub layout
   - [ ] set page title as `full_name` & use GitHub link in header like GitHub page
   - [ ] cache svg imports
-  - [ ] add reload button
-  - [ ] fix header hidden on small screens
+  - [x] add reload button
+  - [x] fix header hidden on small screens
+  - [ ] add colors for languages
 - [ ] Define unit tests
 - [ ] Fix interfaces and type definitions
 - [ ] Setup GitHub Actions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "petithub",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "private": false,
   "description": "PetitHub - Explore obscure GitHub repositories",
   "author": {
@@ -30,15 +30,15 @@
     "deploy": "$npm_execpath run build && wrangler pages deploy"
   },
   "dependencies": {
-    "hono": "^4.4.7",
+    "hono": "^4.4.9",
     "octokit": "^4.0.2"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240620.0",
     "@hono/vite-cloudflare-pages": "^0.4.1",
     "@hono/vite-dev-server": "^0.12.2",
-    "vite": "^5.3.1",
+    "vite": "^5.3.2",
     "vitest": "^1.6.0",
-    "wrangler": "^3.61.0"
+    "wrangler": "^3.62.0"
   }
 }

public/static/script.js

@@ -7,3 +7,7 @@ const maxIdCookie = getCookie("max_id");
 if (!maxIdCookie) {
   fetch("/id");
 }
+
+const refresh = () => {
+  window.location.reload();
+};

public/static/style.css

@@ -9,18 +9,21 @@ body {
 }
 body {
   display: flex;
-  flex-direction: column;
+  flex-flow: row wrap;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
   background-color: var(--bg-color);
   color: var(--font-color-default);
 }
 .container-wrapper {
   display: flex;
-  flex: 1;
+  flex: 1 0 auto;
+  box-sizing: border-box;
   justify-content: center;
   align-items: center;
   width: 100%;
+  min-height: calc(100vh - 12rem);
 }
 .container {
   width: 80%;
@@ -34,15 +37,62 @@ body {
 
 /* HEADER */
 .header {
-  display: block;
+  display: flex;
+  flex: 0 0 auto;
+  min-width: 100%;
+  min-height: 2rem;
+  box-sizing: border-box;
   margin-left: auto;
   margin-right: auto;
+  -moz-box-orient: horizontal;
+  -moz-box-direction: normal;
+  flex-direction: row;
+  -moz-box-align: center;
+  align-items: center;
+  -moz-box-pack: justify;
+  justify-content: space-between;
+}
+.header a {
+  display: flex;
+  -moz-box-orient: horizontal;
+  -moz-box-direction: normal;
+  flex-direction: row;
+}
+.header .icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: 0 1rem;
+  cursor: pointer;
+  filter: var(--svg-icon-color);
 }
-.title {
+.header .title {
   font-size: 2rem;
   font-weight: 600;
   color: var(--font-color-default);
   margin-bottom: 20px;
+  display: flex;
+  -moz-box-orient: horizontal;
+  -moz-box-direction: normal;
+  flex-direction: row;
+  -moz-box-align: center;
+  align-items: center;
+}
+.header .refresh {
+  -moz-box-align: center;
+  -moz-box-pack: end;
+  animation: 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 refresh;
+  transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.header .refresh:hover {
+  transform: rotate(90deg);
+}
+@keyframes refresh {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 /* CONTAINER */
@@ -314,9 +364,11 @@ a:hover {
 
 /* FOOTER */
 .footer {
+  flex: 0 0 auto;
   width: 100%;
   text-align: center;
   padding: 0.5rem 0;
+  min-height: 1rem;
   margin-top: 1rem;
   font-size: 0.875rem;
   color: var(--font-color-default);

src/utils/renderer.tsx

@@ -191,7 +191,7 @@ export const Container = ({
                   <td class="label-column">
                     <img
                       src="/static/icons/create.svg"
-                      alt="license"
+                      alt="create"
                       class="icon small-icon"
                     />
                     {"creation"}
@@ -210,7 +210,7 @@ export const Container = ({
                   <td class="label-column">
                     <img
                       src="/static/icons/update.svg"
-                      alt="license"
+                      alt="update"
                       class="icon small-icon"
                     />
                     {"update"}
@@ -229,7 +229,7 @@ export const Container = ({
                   <td class="label-column">
                     <img
                       src="/static/icons/push.svg"
-                      alt="license"
+                      alt="push"
                       class="icon small-icon"
                     />
                     {"push"}
@@ -399,7 +399,24 @@ export const renderer = jsxRenderer(
         </head>
         <body>
           <header class="header">
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://github.com/"
+              title="GitHub"
+            >
+              <img
+                src="/static/icons/github.svg"
+                alt="GitHub"
+                class="icon github-icon"
+              />
+            </a>
             <h1 class="title">{"PetitHub"}</h1>
+            <img
+              class="icon refresh"
+              src="/static/icons/refresh.svg"
+              onclick="window.location.reload()"
+            />
           </header>
           <div class="container-wrapper">{children}</div>
           <footer class="footer">