forked from
juprodh.bsky.social/lichen.wiki
🌿 Collaborative wiki on ATProto
Add scrolling for long notes/sidebars
+37
-9
+28
src/server/db/seed.ts
+28
src/server/db/seed.ts
···
99
99
);
100
100
}
101
101
102
+
// Bulk filler notes so the sidebar overflows and the main pane scrolls.
103
+
// Useful for visually testing the app-shell layout locally.
104
+
const longBody = Array.from(
105
+
{ length: 60 },
106
+
(_, i) =>
107
+
`## Section ${i + 1}\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n`,
108
+
).join("\n");
109
+
110
+
for (let i = 1; i <= 40; i++) {
111
+
const slug = `filler-note-${String(i).padStart(2, "0")}`;
112
+
const tid = generateTid();
113
+
const atUri = `at://${mockDid}/wiki.lichen.note/${tid}`;
114
+
db.run(
115
+
"INSERT INTO notes (slug, wiki_slug, title, did, at_uri) VALUES (?, ?, ?, ?, ?)",
116
+
[slug, "test", `Filler note ${i}`, mockDid, atUri],
117
+
);
118
+
// Make a few notes very long so the main pane scrolls.
119
+
const content =
120
+
i % 5 === 0
121
+
? `# Filler note ${i} (long)\n\n${longBody}`
122
+
: `# Filler note ${i}\n\nShort placeholder content for sidebar overflow testing.\n`;
123
+
db.run(
124
+
`INSERT INTO current_note (note_at_uri, content, latest_revision_uri, updated_at)
125
+
VALUES (?, ?, ?, datetime('now'))`,
126
+
[atUri, content, `${atUri}/rev/1`],
127
+
);
128
+
}
129
+
102
130
db.run("COMMIT");
103
131
} catch (err) {
104
132
db.run("ROLLBACK");
+1
-1
src/views/edit-note.ts
+1
-1
src/views/edit-note.ts
···
15
15
const msg = t(locale);
16
16
17
17
return layout(
18
-
`${msg.wiki.edit} ${noteTitle} — ${wikiName}`,
18
+
`${msg.wiki.edit} ${noteTitle}`,
19
19
`
20
20
<form method="POST" action="/wiki/${wikiSlug}/${noteSlug}/edit" class="flex flex-col gap-4 md:h-[calc(100vh-8rem)] md:overflow-hidden">
21
21
<div class="shrink-0">
+8
-8
src/views/layout.ts
+8
-8
src/views/layout.ts
···
98
98
${exportDropdown}
99
99
</div>`;
100
100
101
-
return `<div class="w-full max-w-6xl mx-auto px-6 py-8 flex flex-col md:flex-row md:flex-1 gap-8">
102
-
<aside class="order-2 md:order-first w-full md:w-44 md:shrink-0 md:sticky md:top-0 md:max-h-screen md:py-4 flex flex-col">
101
+
return `<div class="w-full max-w-6xl mx-auto px-6 py-8 flex flex-col md:flex-row md:flex-1 md:min-h-0 gap-8">
102
+
<aside class="order-2 md:order-first w-full md:w-44 md:shrink-0 md:h-full md:py-4 flex flex-col">
103
103
<div class="shrink-0">
104
104
${options.bookmarkHtml ? `<div class="mb-3">${options.bookmarkHtml}</div>` : ""}
105
105
${renderSearchButton(locale)}
···
112
112
</nav>
113
113
${adminLinks}
114
114
</aside>
115
-
<main class="order-1 md:order-last flex-1 min-w-0 flex justify-center"><div class="w-full max-w-3xl">${body}</div></main>
115
+
<main class="order-1 md:order-last flex-1 min-w-0 md:overflow-y-auto flex justify-center"><div class="w-full max-w-3xl">${body}</div></main>
116
116
</div>`;
117
117
}
118
118
···
188
188
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
189
189
${extraScripts}
190
190
</head>
191
-
<body class="${THEME.bgPage} ${THEME.textPrimary} min-h-screen flex flex-col">
192
-
<nav class="${THEME.bgSurface} border-b ${THEME.borderDefault}">
191
+
<body class="${THEME.bgPage} ${THEME.textPrimary} min-h-screen md:h-screen md:overflow-hidden flex flex-col">
192
+
<nav class="shrink-0 ${THEME.bgSurface} border-b ${THEME.borderDefault}">
193
193
<div class="max-w-6xl mx-auto px-6 py-3 flex items-center justify-between gap-4">
194
194
<div class="flex items-center gap-2 min-w-0">
195
195
<a href="/" class="flex items-center gap-2 shrink-0"><img src="/public/logo.svg" alt="" width="22" height="22" class="shrink-0"/><span class="text-lg font-semibold ${THEME.accentText}">Lichen</span></a>
···
242
242
if (link) document.getElementById('search-modal').close();
243
243
});
244
244
</script>
245
-
<div class="flex-1 flex flex-col">
245
+
<div class="flex-1 md:min-h-0 flex flex-col">
246
246
${options?.pageTitle ? `<div class="text-center py-6 border-b ${THEME.borderSubtle}"><h1 class="text-3xl font-bold ${THEME.textPrimary}">${escapeHtml(options.pageTitle)}</h1></div>` : ""}
247
-
${options?.sidebarNotes ? renderWithSidebar(body, options) : `<main class="w-full max-w-6xl mx-auto px-6 py-8">${body}</main>`}
247
+
${options?.sidebarNotes ? renderWithSidebar(body, options) : `<main class="w-full max-w-6xl mx-auto px-6 py-8 md:flex-1 md:min-h-0 md:overflow-y-auto">${body}</main>`}
248
248
</div>
249
-
<footer class="border-t ${THEME.borderSubtle} py-6 text-center text-xs ${THEME.textMuted}">
249
+
<footer class="shrink-0 border-t ${THEME.borderSubtle} py-6 text-center text-xs ${THEME.textMuted}">
250
250
<a href="https://atproto.com" target="_blank" rel="noopener noreferrer" class="hover:underline">${msg.home.builtOnAtproto}</a>
251
251
<span class="mx-2">·</span>
252
252
<a href="https://tangled.org/juprodh.bsky.social/lichen.wiki" target="_blank" rel="noopener noreferrer" class="hover:underline">${msg.home.sourceCode}</a>