Merge pull request #82 from Tweekism/issue/81-consider-unhiding-back-…

…button Up button revamp
jannis-baum · Jul 29, 2024 · e15b5b4 · e15b5b4
2 parents ba76b52 + 5a27356
commit e15b5b4
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 18 deletions.
diff --git a/src/parser/parser.ts b/src/parser/parser.ts
@@ -1,6 +1,6 @@
 import { Dirent } from 'fs';
 import { homedir } from 'os';
-import { join as pjoin } from 'path';
+import { join as pjoin, dirname as pdirname, basename as pbasename } from 'path';
 import { pathToURL } from '../utils/path.js';
 import config from './config.js';
 import renderNotebook from './ipynb.js';
@@ -10,8 +10,16 @@ import { globSync } from 'glob';
 export type Renderer = (content: string) => string;
 
 const pathHeading: Renderer = (path: string) => `# \`${path.replace(homedir(), '~')}\``;
-const wrap = (contentType: string, content: string) =>
-    `<div class="content-${contentType}">${content}</div>`;
+
+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>`;
+    }
+    return `<div class="content-${contentType}">${link}\n${content}</div>`;
+}
 
 function textRenderer(
     fileEnding: string | undefined,
@@ -32,17 +40,25 @@ export function renderTextFile(content: string, path: string): string {
         return wrap(
             'txt',
             renderMarkdown(`${pathHeading(path!)}\n\n\`\`\`${fileEnding}\n${content}\n\`\`\``),
+            pdirname(path),
         );
     }
     const { render, contentType } = renderInformation;
-    return wrap(contentType, render(content));
+    return wrap(contentType, render(content), pdirname(path));
 }
 
 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>`;
 
+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>`;
+}
+
 export function renderDirectory(path: string): string {
     const list = globSync('*', {
         cwd: path,
@@ -57,6 +73,8 @@ export function renderDirectory(path: string): string {
         .join('\n');
     return wrap(
         'directory',
-        renderMarkdown(`${pathHeading(path)}\n\n<ul class="dir-list">\n${list}\n</ul>`),
+        renderMarkdown(
+            `${pathHeading(path)}\n\n<ul class="dir-list">\n${dirUpItem(path)}\n${list}\n</ul>`,
+        ),
     );
 }
diff --git a/src/routes/viewer.ts b/src/routes/viewer.ts
@@ -1,12 +1,12 @@
 import { lstatSync, readFileSync } from 'fs';
-import { dirname as pdirname, join as pjoin } from 'path';
+import { join as pjoin } from 'path';
 import { homedir } from 'os';
 
 import { Request, Response, Router } from 'express';
 
 import { messageClientsAt } from '../app.js';
 import config from '../parser/config.js';
-import { absPath, pathToURL, pcomponents, pmime, preferredPath } from '../utils/path.js';
+import { absPath, pcomponents, pmime, preferredPath } from '../utils/path.js';
 import { renderDirectory, renderTextFile } from '../parser/parser.js';
 
 export const router = Router();
@@ -76,7 +76,6 @@ router.get(/.*/, async (req: Request, res: Response) => {
                 <link rel="stylesheet" type="text/css" href="/static/katex/katex.css">
                 ${config.styles ? `<style type="text/css">${config.styles}</style>` : ''}
             <body>
-                <a id="parent-dir" href="${pathToURL(pdirname(path))}">↩</a>
                 <div id="body-content">
                     ${body}
                 </div>

diff --git a/static/style.css b/static/style.css
@@ -61,16 +61,7 @@ h3:hover a.header-anchor, h4:hover a.header-anchor,
 h5:hover a.header-anchor, h6:hover a.header-anchor {
     opacity: 1;
 }
-a#parent-dir {
-    position: fixed;
-    height: 3rem; width: 3rem;
-    line-height: 3rem; text-align: center;
-    background-color: #333;
-    border-radius: 9999px;
-    left: 2rem; top: 2rem;
-    opacity: 0;
-}
-a#parent-dir:hover { opacity: 1; }
+a#top-nav-up:before { content: '◂'}
 
 /* --------------------------------------------------------------------------
  * TABLES ------------------------------------------------------------------- */