Use Phosphor Icons

13 files changed, 70 insertions, 6 deletions

diff --git a/cgithub/src/index.ts b/cgithub/src/index.ts
index 393c5ec..43d4cfa 100644
--- a/cgithub/src/index.ts
+++ b/cgithub/src/index.ts
@@ -13,6 +13,10 @@ const eta = new Eta({ views: path.join(__dirname, "..", "views") });
 
 app.use("/static/*", serveStatic({ root: path.join(__dirname, "..") }));
 
+app.get("/", async (c) => {
+  return c.html(await eta.renderAsync("home.eta", {}));
+});
+
 app.get("/:owner/:repo", async (c) => {
   const { owner, repo } = c.req.param();
   const data = await getGitHubRepo(owner, repo);
diff --git a/cgithub/static/icons/eye.svg b/cgithub/static/icons/eye.svg
new file mode 100644
index 0000000..f6f8230
--- /dev/null
+++ b/cgithub/static/icons/eye.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"/></svg>
\ No newline at end of file
diff --git a/cgithub/static/icons/file.svg b/cgithub/static/icons/file.svg
new file mode 100644
index 0000000..f2e7629
--- /dev/null
+++ b/cgithub/static/icons/file.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Z"/></svg>
\ No newline at end of file
diff --git a/cgithub/static/icons/folder-simple.svg b/cgithub/static/icons/folder-simple.svg
new file mode 100644
index 0000000..36acab2
--- /dev/null
+++ b/cgithub/static/icons/folder-simple.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M216,72H130.67L102.93,51.2a16.12,16.12,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V200a16,16,0,0,0,16,16H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72Zm0,128H40V64H93.33L123.2,86.4A8,8,0,0,0,128,88h88Z"/></svg>
\ No newline at end of file
diff --git a/cgithub/static/icons/git-branch.svg b/cgithub/static/icons/git-branch.svg
new file mode 100644
index 0000000..4b442e2
--- /dev/null
+++ b/cgithub/static/icons/git-branch.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M232,64a32,32,0,1,0-40,31v17a8,8,0,0,1-8,8H96a23.84,23.84,0,0,0-8,1.38V95a32,32,0,1,0-16,0v66a32,32,0,1,0,16,0V144a8,8,0,0,1,8-8h88a24,24,0,0,0,24-24V95A32.06,32.06,0,0,0,232,64ZM64,64A16,16,0,1,1,80,80,16,16,0,0,1,64,64ZM96,192a16,16,0,1,1-16-16A16,16,0,0,1,96,192ZM200,80a16,16,0,1,1,16-16A16,16,0,0,1,200,80Z"/></svg>
\ No newline at end of file
diff --git a/cgithub/static/icons/git-fork.svg b/cgithub/static/icons/git-fork.svg
new file mode 100644
index 0000000..ca318b2
--- /dev/null
+++ b/cgithub/static/icons/git-fork.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M224,64a32,32,0,1,0-40,31v17a8,8,0,0,1-8,8H80a8,8,0,0,1-8-8V95a32,32,0,1,0-16,0v17a24,24,0,0,0,24,24h40v25a32,32,0,1,0,16,0V136h40a24,24,0,0,0,24-24V95A32.06,32.06,0,0,0,224,64ZM48,64A16,16,0,1,1,64,80,16,16,0,0,1,48,64Zm96,128a16,16,0,1,1-16-16A16,16,0,0,1,144,192ZM192,80a16,16,0,1,1,16-16A16,16,0,0,1,192,80Z"/></svg>
\ No newline at end of file
diff --git a/cgithub/static/icons/link.svg b/cgithub/static/icons/link.svg
new file mode 100644
index 0000000..25ffe17
--- /dev/null
+++ b/cgithub/static/icons/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z"/></svg>
\ No newline at end of file
diff --git a/cgithub/static/icons/star.svg b/cgithub/static/icons/star.svg
new file mode 100644
index 0000000..4e640f4
--- /dev/null
+++ b/cgithub/static/icons/star.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z"/></svg>
\ No newline at end of file
diff --git a/cgithub/static/style.css b/cgithub/static/style.css
index bd36dce..e552787 100644
--- a/cgithub/static/style.css
+++ b/cgithub/static/style.css
@@ -4,6 +4,11 @@ body {
   font-family: Helvetica, Arial, sans-serif;
 }
 
+.icon {
+  height: 1lh;
+  vertical-align: text-bottom;
+}
+
 pre.blob {
   margin: 1rem 0;
   padding: 1rem;
diff --git a/cgithub/views/_tree.eta b/cgithub/views/_tree.eta
index ac7b2b1..2549bb8 100644
--- a/cgithub/views/_tree.eta
+++ b/cgithub/views/_tree.eta
@@ -2,10 +2,11 @@
   <% for (const item of it.items) { %>
     <tr>
       <td>
-        <span class="icon"><%= item.contentType === 'directory' ? '📁' : '📄' %></span>
         <% if (item.contentType === 'directory') { %>
+          <img src="/static/icons/folder-simple.svg" alt="tree" class="icon">
           <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= item.path %>"><%= item.name %></a>
         <% } else { %>
+          <img src="/static/icons/file.svg" alt="blob" class="icon">
           <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/blob/<%= it.branch %>/<%= item.path %>"><%= item.name %></a>
         <% } %>
       </td>
diff --git a/cgithub/views/home.eta b/cgithub/views/home.eta
new file mode 100644
index 0000000..adb71f2
--- /dev/null
+++ b/cgithub/views/home.eta
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>cgithub</title>
+  <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+  <header>
+    <h1>cgithub</h1>
+    <p>Lightweight GitHub alternative frontend</p>
+  </header>
+
+  <main>
+    <p>Browse any GitHub repository by navigating to <code>/:owner/:repo</code></p>
+  </main>
+
+  <h2>Credits</h2>
+  <p>Icons by <a href="https://phosphoricons.com">Phosphor Icons</a></p>
+  <details>
+    <summary>Phosphor Icons License (MIT)</summary>
+    <pre>
+MIT License
+
+Copyright (c) 2023 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+    </pre>
+  </details>
+</body>
+</html>
diff --git a/cgithub/views/layout.eta b/cgithub/views/layout.eta
index 8e5d9d9..982f8c0 100644
--- a/cgithub/views/layout.eta
+++ b/cgithub/views/layout.eta
@@ -8,7 +8,7 @@
 <body>
   <header>
     <h1><%= it.repo.owner %>/<%= it.repo.name %></h1>
-    <div>branch: <%= it.branch %></div>
+    <div><img src="/static/icons/git-branch.svg" alt="branch" class="icon"> <%= it.branch %></div>
     <% if (it.path) { %>
       <div>
         path: <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">root</a><%
diff --git a/cgithub/views/repo.eta b/cgithub/views/repo.eta
index 0b345df..4338708 100644
--- a/cgithub/views/repo.eta
+++ b/cgithub/views/repo.eta
@@ -6,16 +6,16 @@
       <div class="description"><%= it.info.description %></div>
     <% } %>
     <% if (it.info.website) { %>
-      <div><a href="<%= it.info.website %>" rel="noopener noreferrer"><%= it.info.website %></a></div>
+      <div><img src="/static/icons/link.svg" alt="" class="icon"> <a href="<%= it.info.website %>" rel="noopener noreferrer"><%= it.info.website %></a></div>
     <% } %>
     <% if (it.info.stars) { %>
-      <span>★ <%= it.info.stars %></span>
+      <span><img src="/static/icons/star.svg" alt="stars" class="icon"> <%= it.info.stars %></span>
     <% } %>
     <% if (it.info.watchers) { %>
-      <span>👁 <%= it.info.watchers %></span>
+      <span><img src="/static/icons/eye.svg" alt="watchers" class="icon"> <%= it.info.watchers %></span>
     <% } %>
     <% if (it.info.forks) { %>
-      <span>🔀 <%= it.info.forks %></span>
+      <span><img src="/static/icons/git-fork.svg" alt="forks" class="icon"> <%= it.info.forks %></span>
     <% } %>
   </div>
 <% } %>