feat(#102): add octicons and colors for them

package.json

@@ -11,6 +11,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@primer/octicons": "^19.11.0",
     "@viz-js/viz": "^3.7.0",
     "ansi_up": "^6.0.2",
     "axios": "^1.7.2",
@@ -45,6 +46,7 @@
     "@types/express": "^4.17.21",
     "@types/markdown-it": "^14.1.1",
     "@types/node": "^20.14.10",
+    "@types/primer__octicons": "^19.6.3",
     "@types/tmp": "^0.2.6",
     "@types/uuid": "^10.0.0",
     "@types/ws": "^8.5.10",

src/parser/parser.ts

@@ -6,6 +6,11 @@ import config from '../config.js';
 import renderNotebook from './ipynb.js';
 import renderMarkdown from './markdown.js';
 import { globSync } from 'glob';
+import octicons from '@primer/octicons';
+
+const dirIcon = octicons['file-directory-fill'].toSVG({ class: 'icon-directory' });
+const fileIcon = octicons['file'].toSVG({ class: 'icon-file' });
+const backIcon = octicons['chevron-left'].toSVG({ class: 'icon-back' });
 
 export type Renderer = (content: string) => string;
 
@@ -14,9 +19,11 @@ const pathHeading: Renderer = (path: string) => `# \`${path.replace(homedir(), '
 function wrap(contentType: string, content: string, linkPath?: string): string {
     let link = '';
     if (linkPath) {
-        link = `\n<div id="top-nav">\n<a id="top-nav-up" href="${pathToURL(linkPath)}"> ${
-            pbasename(linkPath) || '/'
-        }</a>\n</div>`;
+        link = `<div id="top-nav">
+                    <a id="top-nav-up" href="${pathToURL(linkPath)}">
+                        ${backIcon}${pbasename(linkPath) || '/'}
+                    </a>
+                </div>`;
     }
     return `<div class="content-${contentType}">${link}\n${content}</div>`;
 }
@@ -51,15 +58,21 @@ export function renderTextFile(content: string, path: string): string {
 }
 
 const dirListItem = (item: Dirent, path: string) =>
-    `<li class="dir-list-${item.isDirectory() ? 'directory' : 'file'}" name="${item.name}"><a href="${pathToURL(
-        pjoin(path, item.name),
-    )}">${item.name}</a></li>`;
+    `<li class="dir-list-${item.isDirectory() ? 'directory' : 'file'}" name="${item.name}">
+        <a href="${pathToURL(pjoin(path, item.name))}">
+            ${item.isDirectory() ? dirIcon : fileIcon}${item.name}
+        </a>
+    </li>`;
 
 function dirUpItem(path: string): string {
     if (pbasename(path) == '') {
         return ''; // Show nothing when already at root directory
     }
-    return `<li class="dir-list-directory"><a href="${pathToURL(pdirname(path))}">.. (${pbasename(pdirname(path)) || '/'})</a></li>`;
+    return `<li class="dir-list-directory">
+                <a href="${pathToURL(pdirname(path))}">
+                    ${dirIcon}..
+                </a>
+            </li>`;
 }
 
 export function renderDirectory(path: string): string {

static/colors.css

@@ -15,6 +15,10 @@
     --border-regular: #353535;
     --border-muted: #303030;
 
+    --icon-directory: #59739c;
+    --icon-file: #989898;
+    --icon-back: var(--text-secondary);
+
     --syntax-text: var(--text-primary);
     --syntax-keyword: #aed7ff;
     --syntax-entity: #aeafff;
@@ -61,6 +65,10 @@
         --border-regular: #d0d7de;
         --border-muted: #d8dee4;
 
+        --icon-directory: #54aeff;
+        --icon-file: #636c76;
+        --icon-back: var(--text-secondary);
+
         /* source for light mode syntax theme:
          * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css
          * */

static/markdown.css

@@ -36,7 +36,6 @@ h3:hover a.header-anchor, h4:hover a.header-anchor,
 h5:hover a.header-anchor, h6:hover a.header-anchor {
     opacity: 1;
 }
-a#top-nav-up:before { content: '◂'}
 
 /* --------------------------------------------------------------------------
  * TABLES ------------------------------------------------------------------- */
@@ -213,3 +212,8 @@ hr {
     border-top: 0.25em solid var(--border-regular);
     margin: 24px 0;
 }
+
+/* UI icons */
+.icon-back {
+    fill: var(--icon-back);
+}

static/style.css

@@ -28,6 +28,5 @@ li[class^='dir-list-'] {
     list-style: none;
     margin: 0.25rem 0;
 }
-li[class^='dir-list-']:before { margin-right: 0.5rem; }
-li.dir-list-directory:before { content: '📁' }
-li.dir-list-file:before { content: '📄' }
+.icon-directory { fill: var(--icon-directory); }
+.icon-file { fill: var(--icon-file); }

yarn.lock

@@ -190,6 +190,13 @@
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
   integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
 
+"@primer/octicons@^19.11.0":
+  version "19.11.0"
+  resolved "https://registry.yarnpkg.com/@primer/octicons/-/octicons-19.11.0.tgz#1266bfbfd9c1d4083a235487b9792b0882a805c9"
+  integrity sha512-dJfi3I7zF4JyqHyHpxaUliUa//w4AmTYAo0i5KgKbz92ZQ0IizRU1rlW+eVdYk5nitAebpUX7gnKceZBDGW3XQ==
+  dependencies:
+    object-assign "^4.1.1"
+
 "@tsconfig/node10@^1.0.7":
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.9.tgz#df4907fc07a886922637b15e02d4cebc4c0021b2"
@@ -316,6 +323,11 @@
   dependencies:
     undici-types "~5.26.4"
 
+"@types/primer__octicons@^19.6.3":
+  version "19.6.3"
+  resolved "https://registry.yarnpkg.com/@types/primer__octicons/-/primer__octicons-19.6.3.tgz#6ea5c10da79361ef6eb6b698c6396cd4053ee107"
+  integrity sha512-lvDS7/5uZLCnG/h3W5fzMjLsMKAlu2Y4nF615U6FtwMarwCD76l9TvkD8nn0g0fIb2gg81/NsRa2LFvksvukRQ==
+
 "@types/qs@*":
   version "6.9.7"
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
@@ -2004,6 +2016,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
 object-inspect@^1.9.0:
   version "1.12.3"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"