v0.5.2

cletqui · Jun 26, 2024 · d1f4316 · d1f4316
1 parent 6547361
commit d1f4316
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -20,8 +20,10 @@ npm run deploy
 - [ ] Improve GUI
   - [x] add additional info about the repo
   - [ ] mimic GitHub layout
-  - [ ] set page title as `full_name`
+  - [ ] 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
 - [ ] Define unit tests
 - [ ] Fix interfaces and type definitions
 - [ ] Setup GitHub Actions

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "petithub",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "private": false,
   "description": "PetitHub - Explore obscure GitHub repositories",
   "author": {

diff --git a/public/static/style.css b/public/static/style.css
@@ -108,7 +108,6 @@ a:hover {
 }
 .layout-sidebar {
   flex: 1;
-  padding-top: 0.8rem;
   max-width: 30%;
 }
 .layout-sidebar p a {
@@ -197,11 +196,13 @@ a:hover {
 }
 .block {
   margin-bottom: 1.5rem;
-  color: var(--font-color-muted);
 }
 .block-border {
   border-bottom: max(1px, 0.0625rem) solid var(--border-color);
 }
+.muted {
+  color: var(--font-color-muted);
+}
 .button {
   display: flex;
   -webkit-appearance: button;
@@ -261,6 +262,36 @@ a:hover {
 .code-button img {
   filter: var(--svg-font-color);
 }
+.topic {
+  display: inline-block;
+  padding: 0 7px;
+  padding-right: 7px;
+  padding-left: 7px;
+  font-size: 12px;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  border-radius: 2rem;
+  padding-right: 10px;
+  padding-left: 10px;
+  margin: 0 0.125em 0.333em 0;
+  line-height: 22px;
+  background-color: var(--bg-color-topic);
+  color: var(--sidebar-hover-color);
+}
+.topic:hover {
+  text-decoration: none;
+  background-color: var(--bg-color-topic-hover);
+  color: var(--font-color);
+}
+.homepage {
+  display: flex;
+  vertical-align: middle;
+  color: var(--sidebar-hover-color);
+}
+.homepage img {
+  margin-right: 0.5rem;
+  filter: var(--svg-font-color);
+}
 .sidebar-link:hover .icon {
   filter: var(--svg-sidebar-hover-color);
 }
@@ -378,6 +409,8 @@ a:hover {
     --bg-color-hover: #292e36;
     --bg-color-rest: #21262d;
     --bg-color-muted: #161b22;
+    --bg-color-topic: #388bfd1a;
+    --bg-color-topic-hover: #1f6feb;
     --container-bg-color: #0d1117;
     --font-color: #e6edf3;
     --font-color-muted: #8d96a0;

diff --git a/src/utils/renderer.tsx b/src/utils/renderer.tsx
@@ -247,11 +247,27 @@ export const Container = ({
           </table>
         </div>
         <div class="layout-sidebar">
-          <b>{"About"}</b>
-          <p class="block">
-            {description && <div>{description}</div>}
+          <div class="block">
+            <p>
+              <b>{"About"}</b>
+            </p>
+            {description && <p>{description}</p>}
+            {topics && topics?.length > 0 && (
+              <div>
+                {topics.map((topic: any) => (
+                  <a
+                    class="topic"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href={`https://github.com/topics/${topic}`}
+                  >
+                    {topic}
+                  </a>
+                ))}
+              </div>
+            )}
             {homepage && (
-              <>
+              <p class="homepage">
                 {" "}
                 <img src="/static/icons/link.svg" alt="homepage" class="icon" />
                 <a
@@ -261,14 +277,15 @@ export const Container = ({
                 >
                   {homepage}
                 </a>
-              </>
+              </p>
             )}
-            {topics && topics?.length > 0 && <p>{JSON.stringify(topics)}</p>}
             {!description && !homepage && topics?.length === 0 && (
-              <i>{"No description, website, or topics provided."}</i>
+              <p>
+                <i>{"No description, website, or topics provided."}</i>
+              </p>
             )}
-          </p>
-          <div class="block block-border">
+          </div>
+          <div class={`block muted ${language && "block-border"}`}>
             {license && (
               <p>
                 <a