Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Up button revamp #82

Merged
merged 5 commits into from
Jul 29, 2024
Merged

Up button revamp #82

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e0e371c
feat(#81): add up navigation to the directory renderer
Tweekism Jul 27, 2024
1f19f5a
feat(#81): add up navigation to content renderers
Tweekism Jul 28, 2024
420640b
feat(#81): move navigation to top and inside <div> for custom .css
Tweekism Jul 28, 2024
dd1e205
feat(#81): remove old up/back button
Tweekism Jul 28, 2024
5a27356
feat(#81): minor fixes from review feedback
Tweekism Jul 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 23 additions & 5 deletions src/parser/parser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 (typeof linkPath !== 'undefined') {
link = `\n<div id="top-nav">\n<a href="${pathToURL(linkPath)}">◂ ${
pbasename(linkPath) || '/'
}</a>\n</div>`;
}
return `<div class="content-${contentType}">${link}\n${content}</div>`;
}

function textRenderer(
fileEnding: string | undefined,
Expand All @@ -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,
Expand All @@ -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>`,
),
);
}
5 changes: 2 additions & 3 deletions src/routes/viewer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down Expand Up @@ -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>
Expand Down
10 changes: 0 additions & 10 deletions static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,16 +61,6 @@ 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; }

/* --------------------------------------------------------------------------
* TABLES ------------------------------------------------------------------- */
Expand Down