authorgravatar for git@paperclover.netclover caruso <git@paperclover.net> 2026-03-27 01:18:43-07:00
committergravatar for git@paperclover.netclover caruso <git@paperclover.net> 2026-03-27 02:28:07-07:00
logc7ff451dfa7c20ba6d9b616eabf57d73eddf813e
tree0aa642d70e5c8f4764c6c0e85cfa79d605157738
parentb67239a5bef3dde78310721e6ff408a8e1faf902
signature Signed by SSH key SHA256:xbd+BjjhyBfwk7GVoURf9Yx0gzDerHbvYv7SddNWmAs

fix: make homepage and file viewer work better on w3m

resolves #92

6 files changed, 55 insertions(+), 33 deletions(-)

src/file-viewer/backend.tsx+2-1
...@@ -11,7 +11,7 @@ app.post("/file/cotyledon", async (c) => {...@@ -11,7 +11,7 @@ app.post("/file/cotyledon", async (c) => {
1111
12app.get("/file/*", async (c, next) => {12app.get("/file/*", async (c, next) => {
13 const ua = c.req.header("User-Agent")?.toLowerCase() ?? "";13 const ua = c.req.header("User-Agent")?.toLowerCase() ?? "";
14 const lofi = ua.includes("msie") || false;14 const lofi = ua.includes("msie") || ua.startsWith('w3m/') || false;
1515
16 let rawFilePath = c.req.path.slice(5) || "/";16 let rawFilePath = c.req.path.slice(5) || "/";
1717
...@@ -19,6 +19,7 @@ app.get("/file/*", async (c, next) => {...@@ -19,6 +19,7 @@ app.get("/file/*", async (c, next) => {
19 if (19 if (
20 !rawFilePath.endsWith("thumbnail.jpeg") && (20 !rawFilePath.endsWith("thumbnail.jpeg") && (
21 (!ua.startsWith("mozilla/") &&21 (!ua.startsWith("mozilla/") &&
22 !ua.startsWith("w3m/") &&
22 // these two are for AirPlay23 // these two are for AirPlay
23 !ua.includes("airplay") &&24 !ua.includes("airplay") &&
24 !ua.includes("applecoremedia")) ||25 !ua.includes("applecoremedia")) ||
src/file-viewer/views/lofi.css-1
...@@ -38,6 +38,5 @@ li a:hover {...@@ -38,6 +38,5 @@ li a:hover {
38 opacity: 0.5;38 opacity: 0.5;
39}39}
40.meta {40.meta {
41 margin-left: 1em;
42 opacity: 0.75;41 opacity: 0.75;
43}42}
src/file-viewer/views/lofi.marko+15-16
...@@ -22,9 +22,8 @@ export { meta, theme } from "./clofi.tsx";...@@ -22,9 +22,8 @@ export { meta, theme } from "./clofi.tsx";
22 )/>22 )/>
23 <li class={ dir }>23 <li class={ dir }>
24 <a href=`/file${escapeUri(file.path)}` >24 <a href=`/file${escapeUri(file.path)}` >
25 <code>${formatDate(file.date)}</>${" "}25 <code>${formatDate(file.date)}</>${" "}<span>${file.basenameWithoutExt}</span><if=file.extension><span class="ext">${file.extension}</></><if=dir>/</>
26 ${file.basenameWithoutExt}<span class="ext">${file.extension}</>${dir ? '/' : ''}26 <if=meta><span class='meta'>&nbsp;&nbsp;&nbsp;(${meta})</></>
27 <if=meta><span class='meta'>(${meta})</></>
28 </a>27 </a>
29 </li>28 </li>
30</define>29</define>
...@@ -43,19 +42,19 @@ export { meta, theme } from "./clofi.tsx";...@@ -43,19 +42,19 @@ export { meta, theme } from "./clofi.tsx";
43 <for|item| of=files><ListItem=item /></>42 <for|item| of=files><ListItem=item /></>
44 </ul>43 </ul>
45 </>44 </>
46 <if=!hasCotyledonCookie>45 // <if=!hasCotyledonCookie>
47 <br><br><br><br><br><br>46 // <br><br><br><br><br><br>
48 <p style={ opacity: 0.3 }>47 // <p style={ opacity: 0.3 }>
49 would you like to48 // would you like to
50 <a49 // <a
51 href="/file/cotyledon"50 // href="/file/cotyledon"
52 style={51 // style={
53 color: 'white',52 // color: 'white',
54 'text-decoration': 'underline',53 // 'text-decoration': 'underline',
55 }54 // }
56 >dive deeper?</a>55 // >dive deeper?</a>
57 </p>56 // </p>
58 </>57 // </>
59</><else>58</><else>
60 <ul>59 <ul>
61 <li><a href=`/file${escapeUri(path.posix.dirname(fullPath))}`>[up one...]</a></li>60 <li><a href=`/file${escapeUri(path.posix.dirname(fullPath))}`>[up one...]</a></li>
src/pages/index.css+17
...@@ -23,6 +23,23 @@ h2 {...@@ -23,6 +23,23 @@ h2 {
23p, h2 {23p, h2 {
24 margin: 0.75rem 0rem;24 margin: 0.75rem 0rem;
25}25}
26.section-list {
27 margin: 0.75rem 0;
28 padding: 0;
29 list-style: none;
30}
31.section-list li + li {
32 margin-top: 0.75rem;
33}
34.link-list {
35 margin: 0.75rem 0;
36 padding: 0;
37 list-style: none;
38 display: flex;
39 gap: 1.5rem;
40 position: relative;
41 z-index: 2;
42}
26hr {43hr {
27 width: 100%;44 width: 100%;
28 border: 1px solid #000b;45 border: 1px solid #000b;
src/pages/index.marko+20-14
...@@ -21,22 +21,28 @@ export const meta = {...@@ -21,22 +21,28 @@ export const meta = {
21 this site contains my art.21 this site contains my art.
22 </p>22 </p>
23 <h2>posts</h2>23 <h2>posts</h2>
24 <p>video collab: <a href="/history-of-japan-reanimated">history of japan reanimated</a> (2026-02-02)</p>24 <ul class="section-list">
25 <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>25 <li>video collab: <a href="/history-of-japan-reanimated">history of japan reanimated</a> (2026-02-02)</li>
26 <p>song: <a href="/in-the-summer">in the summer</a> (2025-08-08)</p>26 <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>
27 <p>song: <a href="/waterfalls">waterfalls</a> (2025-01-01)</p>27 <li>song: <a href="/in-the-summer">in the summer</a> (2025-08-08)</li>
28 <li>song: <a href="/waterfalls">waterfalls</a> (2025-01-01)</li>
29 </ul>
28 <h2>things</h2>30 <h2>things</h2>
29 <p><a href="/q+a">questions and answers</a></p>31 <ul class="section-list">
30 <p><a href="/log">recent activity</a></p>32 <li><a href="/q+a">questions and answers</a></li>
31 <p><a href="/file">file browser</a></p>33 <li><a href="/log">recent activity</a></li>
32 <p><a href="https://git.paperclover.net/clo">code forge</a></p>34 <li><a href="/file">file browser</a></li>
33 <p><a href="/subscribe">mailing list</a></p>35 <li><a href="https://git.paperclover.net/clo">code forge</a></li>
36 <li><a href="/subscribe">mailing list</a></li>
37 </ul>
34 <h2>links</h2>38 <h2>links</h2>
35 <div style="display:flex;gap:1.5rem;position:relative;z-index:2">39 <nav>
36 <a href="mailto:hello@paperclover.net">email me</a>40 <ul class="link-list">
37 <a href="/rss.xml">rss</a>41 <li><a href="mailto:hello@paperclover.net">email me</a></li>
38 <a href="https://ko-fi.com/paper_clover">donate</a>42 <li><a href="/rss.xml">rss</a></li>
39 </div>43 <li><a href="https://ko-fi.com/paper_clover">donate</a></li>
44 </ul>
45 </nav>
40 <h1>paper clover</h1>46 <h1>paper clover</h1>
41 </div>47 </div>
42</main>48</main>
src/q+a/tags/question.marko+1-1
...@@ -26,7 +26,7 @@ export const transitionDate = 1735639200000;...@@ -26,7 +26,7 @@ export const transitionDate = 1735639200000;
26 <a>26 <a>
27 <time27 <time
28 datetime=formatQuestionISOTimestamp(date)28 datetime=formatQuestionISOTimestamp(date)
29 >${formatQuestionTimestamp(date)}</time>29 >${formatQuestionTimestamp(date)}</time><br />
30 </a>30 </a>
3131
32 $!{markdown.renderMarkdown(question.text)}32 $!{markdown.renderMarkdown(question.text)}