From c7ff451dfa7c20ba6d9b616eabf57d73eddf813e Mon Sep 17 00:00:00 2001
From: clover caruso <git@paperclover.net>
Date: Fri, 27 Mar 2026 01:18:43 -0700
Subject: [PATCH] fix: make homepage and file viewer work better on w3m

resolves #92
---
 src/file-viewer/backend.tsx      |  3 ++-
 src/file-viewer/views/lofi.css   |  1 -
 src/file-viewer/views/lofi.marko | 31 ++++++++++++++---------------
 src/pages/index.css              | 17 ++++++++++++++++
 src/pages/index.marko            | 34 +++++++++++++++++++-------------
 src/q+a/tags/question.marko      |  2 +-
 6 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/src/file-viewer/backend.tsx b/src/file-viewer/backend.tsx
index 5a39a7ebe9f32845e099eb8799f648fdd707b840..cb84e7d1109156182990b797a24385fcb4d7ace6 100644
--- a/src/file-viewer/backend.tsx
+++ b/src/file-viewer/backend.tsx
@@ -11,7 +11,7 @@ app.post("/file/cotyledon", async (c) => {
 
 app.get("/file/*", async (c, next) => {
   const ua = c.req.header("User-Agent")?.toLowerCase() ?? "";
-  const lofi = ua.includes("msie") || false;
+  const lofi = ua.includes("msie") || ua.startsWith('w3m/') || false;
 
   let rawFilePath = c.req.path.slice(5) || "/";
 
@@ -19,6 +19,7 @@ app.get("/file/*", async (c, next) => {
   if (
     !rawFilePath.endsWith("thumbnail.jpeg") && (
       (!ua.startsWith("mozilla/") &&
+        !ua.startsWith("w3m/") &&
         // these two are for AirPlay
         !ua.includes("airplay") &&
         !ua.includes("applecoremedia")) ||
diff --git a/src/file-viewer/views/lofi.css b/src/file-viewer/views/lofi.css
index d82b27d10ad30cdd3485ffbc1853b4ed2ccde93c..3837ee0df30b8a1098623321516d35a44bfc94ff 100644
--- a/src/file-viewer/views/lofi.css
+++ b/src/file-viewer/views/lofi.css
@@ -38,6 +38,5 @@ li a:hover {
   opacity: 0.5;
 }
 .meta {
-  margin-left: 1em;
   opacity: 0.75;
 }
diff --git a/src/file-viewer/views/lofi.marko b/src/file-viewer/views/lofi.marko
index 98eb4afa3390f3a051c3194b83e16efe4a7e6dc2..7e33443fc8f19acfae6c013028eecdcf35af2755 100644
--- a/src/file-viewer/views/lofi.marko
+++ b/src/file-viewer/views/lofi.marko
@@ -22,9 +22,8 @@ export { meta, theme } from "./clofi.tsx";
   )/>
   <li class={ dir }>
     <a href=`/file${escapeUri(file.path)}` >
-      <code>${formatDate(file.date)}</>${" "}
-      ${file.basenameWithoutExt}<span class="ext">${file.extension}</>${dir ? '/' : ''}
-      <if=meta><span class='meta'>(${meta})</></>
+      <code>${formatDate(file.date)}</>${" "}<span>${file.basenameWithoutExt}</span><if=file.extension><span class="ext">${file.extension}</></><if=dir>/</>
+      <if=meta><span class='meta'>&nbsp;&nbsp;&nbsp;(${meta})</></>
     </a>
   </li>
 </define>
@@ -43,19 +42,19 @@ export { meta, theme } from "./clofi.tsx";
       <for|item| of=files><ListItem=item /></>
     </ul>
   </>
-  <if=!hasCotyledonCookie>
-    <br><br><br><br><br><br>
-    <p style={ opacity: 0.3 }>
-      would you like to
-      <a
-        href="/file/cotyledon"
-        style={
-          color: 'white',
-          'text-decoration': 'underline',
-        }
-      >dive deeper?</a>
-    </p>
-  </>
+  // <if=!hasCotyledonCookie>
+  //   <br><br><br><br><br><br>
+  //   <p style={ opacity: 0.3 }>
+  //     would you like to
+  //     <a
+  //       href="/file/cotyledon"
+  //       style={
+  //         color: 'white',
+  //         'text-decoration': 'underline',
+  //       }
+  //     >dive deeper?</a>
+  //   </p>
+  // </>
 </><else>
   <ul>
     <li><a href=`/file${escapeUri(path.posix.dirname(fullPath))}`>[up one...]</a></li>
diff --git a/src/pages/index.css b/src/pages/index.css
index bd1994a8235c8cc4aa772fa4ad748c2c10339405..7335387e27b45704ed1d6824f5ae7545956ca302 100644
--- a/src/pages/index.css
+++ b/src/pages/index.css
@@ -23,6 +23,23 @@ h2 {
 p, h2 {
   margin: 0.75rem 0rem;
 }
+.section-list {
+  margin: 0.75rem 0;
+  padding: 0;
+  list-style: none;
+}
+.section-list li + li {
+  margin-top: 0.75rem;
+}
+.link-list {
+  margin: 0.75rem 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  gap: 1.5rem;
+  position: relative;
+  z-index: 2;
+}
 hr {
   width: 100%;
   border: 1px solid #000b;
diff --git a/src/pages/index.marko b/src/pages/index.marko
index 5a94c0d7e97f8f13940f02cb83542f9226fb68d2..e4d226671de0cbfe6bbdf83baae8da4005166a24 100644
--- a/src/pages/index.marko
+++ b/src/pages/index.marko
@@ -21,22 +21,28 @@ export const meta = {
       this site contains my art.
     </p>
     <h2>posts</h2>
-    <p>video collab: <a href="/history-of-japan-reanimated">history of japan reanimated</a> (2026-02-02)</p>
-    <p style='display:flex'><span style='flex:0 0 max-content'>blog:&nbsp;</span><span style='flex: 1 0 0px'><a href="/blog/webdev/one-year-next-app-router">One Year with Next.js App Router — why we're moving on</a> (2025-10-21)</span></p>
-    <p>song: <a href="/in-the-summer">in the summer</a> (2025-08-08)</p>
-    <p>song: <a href="/waterfalls">waterfalls</a> (2025-01-01)</p>
+    <ul class="section-list">
+      <li>video collab: <a href="/history-of-japan-reanimated">history of japan reanimated</a> (2026-02-02)</li>
+      <li>blog: <a href="/blog/webdev/one-year-next-app-router">One Year with Next.js App Router — why we're moving on</a> (2025-10-21)</li>
+      <li>song: <a href="/in-the-summer">in the summer</a> (2025-08-08)</li>
+      <li>song: <a href="/waterfalls">waterfalls</a> (2025-01-01)</li>
+    </ul>
     <h2>things</h2>
-    <p><a href="/q+a">questions and answers</a></p>
-    <p><a href="/log">recent activity</a></p>
-    <p><a href="/file">file browser</a></p>
-    <p><a href="https://git.paperclover.net/clo">code forge</a></p>
-    <p><a href="/subscribe">mailing list</a></p>
+    <ul class="section-list">
+      <li><a href="/q+a">questions and answers</a></li>
+      <li><a href="/log">recent activity</a></li>
+      <li><a href="/file">file browser</a></li>
+      <li><a href="https://git.paperclover.net/clo">code forge</a></li>
+      <li><a href="/subscribe">mailing list</a></li>
+    </ul>
     <h2>links</h2>
-    <div style="display:flex;gap:1.5rem;position:relative;z-index:2">
-      <a href="mailto:hello@paperclover.net">email me</a>
-      <a href="/rss.xml">rss</a>
-      <a href="https://ko-fi.com/paper_clover">donate</a>
-    </div>
+    <nav>
+      <ul class="link-list">
+        <li><a href="mailto:hello@paperclover.net">email me</a></li>
+        <li><a href="/rss.xml">rss</a></li>
+        <li><a href="https://ko-fi.com/paper_clover">donate</a></li>
+      </ul>
+    </nav>
     <h1>paper clover</h1>
   </div>
 </main>
diff --git a/src/q+a/tags/question.marko b/src/q+a/tags/question.marko
index f13103def87b300b801c9db9e5b26f2b313aa0ef..12bf3e22e0bcee7c8fb4fa7aac9545e6337251be 100644
--- a/src/q+a/tags/question.marko
+++ b/src/q+a/tags/question.marko
@@ -26,7 +26,7 @@ export const transitionDate = 1735639200000;
   <a>
     <time
       datetime=formatQuestionISOTimestamp(date)
-    >${formatQuestionTimestamp(date)}</time>
+    >${formatQuestionTimestamp(date)}</time><br />
   </a>
 
   $!{markdown.renderMarkdown(question.text)}
-- 
2.54.0