diff --git a/www/public/js/params.js b/www/public/js/params.js index 518658c..c466e18 100644 --- a/www/public/js/params.js +++ b/www/public/js/params.js @@ -31,11 +31,10 @@ document.documentElement.dataset.has = has; has = has.toLowerCase(); document.addEventListener('DOMContentLoaded', function() { - document.querySelectorAll('section[data-section] pre').forEach(function(pre) { - var lines = pre.innerHTML.split('\n'); - pre.innerHTML = lines.filter(function(line) { - return !line.trim() || line.toLowerCase().indexOf(has) !== -1; - }).join('\n'); + document.querySelectorAll('section[data-section] .entry').forEach(function(entry) { + if (entry.textContent.toLowerCase().indexOf(has) === -1) { + entry.style.display = 'none'; + } }); document.querySelectorAll('.guestbook-entry').forEach(function(entry) { if (entry.textContent.toLowerCase().indexOf(has) === -1) { diff --git a/www/src/lib/format.ts b/www/src/lib/format.ts index 9628159..eb3b83e 100644 --- a/www/src/lib/format.ts +++ b/www/src/lib/format.ts @@ -35,7 +35,7 @@ export function formatListItem( const pinnedBadge = options?.pinned ? ' [pinned]' : ''; const suffix = options?.suffix ? ` ${options.suffix}` : ''; const prefix = options?.prefix ?? ''; - return `${prefix}${formatDate(date)} ${title}${pinnedBadge}${suffix}`; + return `${prefix}${formatDate(date)}${title}${pinnedBadge}${suffix}`; } interface Sortable { diff --git a/www/src/pages/index.astro b/www/src/pages/index.astro index 7971199..26a62d1 100644 --- a/www/src/pages/index.astro +++ b/www/src/pages/index.astro @@ -16,13 +16,6 @@ const bookmarks = bookmarksCollection .sort((a, b) => b.data.date.getTime() - a.data.date.getTime()); const txtFiles = getTxtFiles(); -const txtMaxNameLen = Math.max(...txtFiles.map(f => f.name.replace(/\.txt$/, '').length)); - -const visibleLabels = [...sortedCategories.filter(c => c !== DEFAULT_CATEGORY), ...Object.values(SECTIONS)]; -const labelWidth = Math.max(...visibleLabels.map(l => l.length)); -const labelPrefix = (label: string, href: string) => - `${' '.repeat(labelWidth - label.length)}${label} `; -const blankPrefix = ' '.repeat(labelWidth + 2); let guestbookEntries: GuestbookEntry[] = []; try { @@ -43,33 +36,38 @@ const urls = [ const isDefault = category === DEFAULT_CATEGORY; return (
-
 formatListItem(post.dates.created, `/${getSlug(post.id)}`, post.data.title, { pinned: post.data.pinned, prefix: (!isDefault && i === 0) ? labelPrefix(category, `?just=${category}`) : blankPrefix })).join('\n')} />
+{!isDefault && {category}}
+

+  `${formatListItem(post.dates.created, `/${getSlug(post.id)}`, post.data.title, { pinned: post.data.pinned })}`
+).join('')} />
); })}
-
 {
+{SECTIONS.plaintext}
+
 {
   const name = f.name.replace(/\.txt$/, '');
-  const pad = ' '.repeat(txtMaxNameLen - name.length);
-  const suffix = f.description ? `${pad} (${f.description})` : undefined;
-  return formatListItem(f.date, `/${f.name}`, name, { pinned: f.pinned, suffix, prefix: i === 0 ? labelPrefix(SECTIONS.plaintext, `?just=${SECTIONS.plaintext}`) : blankPrefix });
-}).join('\n')} />
+  return `${formatListItem(f.date, `/${f.name}`, name, { pinned: f.pinned })}`;
+}).join('')} />
-
 formatListItem(b.data.date, b.data.url, b.data.title, { prefix: i === 0 ? labelPrefix(SECTIONS.bookmarks, `?just=${SECTIONS.bookmarks}`) : blankPrefix })).join('\n')} />
+{SECTIONS.bookmarks}
+

+  `${formatListItem(b.data.date, b.data.url, b.data.title)}`
+).join('')} />
-
{ - const prefix = i === 0 ? labelPrefix(SECTIONS.guestbook, `?just=${SECTIONS.guestbook}`) : blankPrefix; +{SECTIONS.guestbook} +
{ const safeName = escapeHtml(e.name); const safeMessage = escapeHtml(e.message.replace(/\n/g, ' ')); const nameHtml = e.url ? `${safeName}` : `${safeName}`; - return `${prefix}${formatDate(e.createdAt)} ${nameHtml} ${safeMessage}`; + return `${formatDate(e.createdAt)} ${nameHtml} ${safeMessage}`; }).join('')} />
-
+
diff --git a/www/src/styles/global.css b/www/src/styles/global.css index 070f590..4332b9c 100644 --- a/www/src/styles/global.css +++ b/www/src/styles/global.css @@ -1,6 +1,6 @@ body { box-sizing: border-box; - max-width: 38rem; + max-width: 48rem; margin: 0 auto; padding: 1rem; text-align: justify; @@ -102,6 +102,25 @@ section pre { margin: 0; } +.entry-list { + columns: 2 24ch; + column-gap: 3ch; + font-family: monospace; + margin: 0; +} + +.entry { + display: grid; + grid-template-columns: 10ch 1fr; + break-inside: avoid; +} + +.entry-content { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + .guestbook-entries { font-family: monospace; white-space: pre; @@ -109,7 +128,7 @@ section pre { .guestbook-entry { display: grid; - grid-template-columns: var(--meta-width) 1fr; + grid-template-columns: 10ch 1fr; } .guestbook-entry > span:last-child { @@ -118,12 +137,19 @@ section pre { .guestbook-form { margin-top: 0.5rem; + margin-left: 10ch; font-family: monospace; } html[data-compact] .list-meta { display: none; } +html[data-compact] .entry { + display: block; +} +html[data-compact] .entry-list { + columns: 1; +} html[data-compact] .guestbook-entry { display: block; }