From 11c5b9c3707e149cce1dddfd9d10fad5f17d3f79 Mon Sep 17 00:00:00 2001 From: Tuure Date: Tue, 13 Aug 2024 00:09:30 +0300 Subject: [PATCH 1/3] feat(#102): add octicons and colors for them --- package.json | 2 ++ src/parser/parser.ts | 27 ++++++++++++++++++++------- static/colors.css | 8 ++++++++ static/markdown.css | 6 +++++- static/style.css | 5 ++--- yarn.lock | 17 +++++++++++++++++ 6 files changed, 54 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index fb463269..7e100a28 100644 --- a/package.json +++ b/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", diff --git a/src/parser/parser.ts b/src/parser/parser.ts index 5eb6b6e7..fece5e15 100644 --- a/src/parser/parser.ts +++ b/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
\n ${ - pbasename(linkPath) || '/' - }\n
`; + link = `
+ + ${backIcon}${pbasename(linkPath) || '/'} + +
`; } return `
${link}\n${content}
`; } @@ -51,15 +58,21 @@ export function renderTextFile(content: string, path: string): string { } const dirListItem = (item: Dirent, path: string) => - `
  • ${item.name}
    • `; + `
  • + + ${item.isDirectory() ? dirIcon : fileIcon}${item.name} + +
    • `; function dirUpItem(path: string): string { if (pbasename(path) == '') { return ''; // Show nothing when already at root directory } - return `
  • .. (${pbasename(pdirname(path)) || '/'})
    • `; + return `
  • + + ${dirIcon}.. + +
    • `; } export function renderDirectory(path: string): string { diff --git a/static/colors.css b/static/colors.css index ef7ea1d3..9b012ca5 100644 --- a/static/colors.css +++ b/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 * */ diff --git a/static/markdown.css b/static/markdown.css index 742867e3..8007ec05 100644 --- a/static/markdown.css +++ b/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); +} diff --git a/static/style.css b/static/style.css index e13ad262..ad66c888 100644 --- a/static/style.css +++ b/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); } diff --git a/yarn.lock b/yarn.lock index cd56f9c6..fb530fa3 100644 --- a/yarn.lock +++ b/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" From 8903b1323ead88a66ce08b926c7f6ce00dc690dd Mon Sep 17 00:00:00 2001 From: Tuure Date: Thu, 15 Aug 2024 22:52:36 +0300 Subject: [PATCH 2/3] feat(#102): align svg with text and set spacing --- static/markdown.css | 6 +++++- static/style.css | 11 +++++++++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/static/markdown.css b/static/markdown.css index 8007ec05..ee7c44c2 100644 --- a/static/markdown.css +++ b/static/markdown.css @@ -213,7 +213,11 @@ hr { margin: 24px 0; } -/* UI icons */ +/* parent directory link */ +#top-nav > a { + display: inline-flex; + align-items: center; +} .icon-back { fill: var(--icon-back); } diff --git a/static/style.css b/static/style.css index ad66c888..1f831e7e 100644 --- a/static/style.css +++ b/static/style.css @@ -17,7 +17,7 @@ body { *[class^="content-"] { max-width: 900px; margin: auto; -} +} .content-txt { max-width: 1200px; } /* -------------------------------------------------------------------------- @@ -26,7 +26,14 @@ body { ul.dir-list { padding: 0 } li[class^='dir-list-'] { list-style: none; - margin: 0.25rem 0; +} +li[class^='dir-list-'] > a { + display: inline-flex; + align-items: center; + padding: 0.05rem 0; +} +li[class^='dir-list-'] > a > svg { + margin-right: 0.3rem; } .icon-directory { fill: var(--icon-directory); } .icon-file { fill: var(--icon-file); } From c8c4a3aa4f03f095cf148c738a7455e29d05f0c6 Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Sun, 18 Aug 2024 10:23:21 +0200 Subject: [PATCH 3/3] feat(#102): color suggestions --- static/colors.css | 4 ++-- static/style.css | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/static/colors.css b/static/colors.css index 9b012ca5..d3bf14c0 100644 --- a/static/colors.css +++ b/static/colors.css @@ -15,8 +15,8 @@ --border-regular: #353535; --border-muted: #303030; - --icon-directory: #59739c; - --icon-file: #989898; + --icon-directory: var(--text-secondary); + --icon-file: var(--text-secondary); --icon-back: var(--text-secondary); --syntax-text: var(--text-primary); diff --git a/static/style.css b/static/style.css index 1f831e7e..8261c995 100644 --- a/static/style.css +++ b/static/style.css @@ -31,6 +31,10 @@ li[class^='dir-list-'] > a { display: inline-flex; align-items: center; padding: 0.05rem 0; + color: var(--text-primary); +} +li[class^='dir-list-'] > a:hover { + color: var(--text-link); } li[class^='dir-list-'] > a > svg { margin-right: 0.3rem;