Skip to content

Commit 7686613

Browse files
rishikanthcrishikanthc
committed
fix(bug): nested formatting in list items created extra line; nav menu icon shrinks with long names; incorrect foldername
1 parent c918f6a commit 7686613

4 files changed

Lines changed: 80 additions & 70 deletions

File tree

‎src/lib/components/FileTree.svelte‎

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
2-
import { onMount } from 'svelte';
3-
import { ChevronRight, ChevronDown, File } from 'lucide-svelte';
2+
import { onMount } from "svelte";
3+
import { ChevronRight, ChevronDown, File } from "lucide-svelte";
44
55
interface FileNode {
66
id: string;
@@ -11,19 +11,6 @@
1111
}
1212
1313
export let fileTree: FileNode[] = [];
14-
15-
/* onMount(async () => {
16-
try {
17-
const response = await fetch('/api/ls');
18-
if (!response.ok) {
19-
throw new Error('Failed to fetch file tree');
20-
}
21-
fileTree = await response.json();
22-
} catch (error) {
23-
console.error('Error fetching file tree:', error);
24-
}
25-
}); */
26-
2714
export let node: FileNode | undefined = undefined;
2815
export let isExpanded = false;
2916
@@ -39,7 +26,7 @@
3926
<div
4027
class="flex cursor-pointer items-center rounded px-2 py-1 hover:bg-carbongray-100 dark:hover:bg-carbongray-700"
4128
on:click={toggleExpand}
42-
on:keydown={(e) => e.key === 'Enter' && toggleExpand()}
29+
on:keydown={(e) => e.key === "Enter" && toggleExpand()}
4330
role="button"
4431
tabindex="0"
4532
>
@@ -50,18 +37,23 @@
5037
<ChevronRight class="mr-1 h-4 w-4 text-gray-500" />
5138
{/if}
5239
{:else}
53-
<File class="mr-1 h-4 w-4 text-gray-500" />
40+
<File class="mr-1 h-4 w-4 text-gray-500 flex-shrink-0" />
5441
{/if}
5542

56-
{#if node.url}
57-
<a href={`/${node.url}`} class="text-carbongray-800 hover:underline">{node.title}</a>
43+
{#if isFolder}
44+
<span class="font-semibold">{node.name}</span> <!-- Folder name -->
45+
{:else if node.url}
46+
<a href={`/${node.url}`} class="text-carbongray-800 hover:underline"
47+
>{node.title}</a
48+
>
5849
{:else}
5950
<span class="font-semibold">{node.title}</span>
51+
<!-- Fallback for files without URLs -->
6052
{/if}
6153
</div>
6254

6355
{#if isFolder && isExpanded}
64-
<div class="children ml-4 mt-1 dark:bg-carbongray-700">
56+
<div class="children ml-4 mt-1">
6557
{#each node.children as childNode}
6658
<svelte:self node={childNode} />
6759
{/each}

‎src/lib/components/MDsvexRenderer.svelte‎

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<!-- MDsveXContentRenderer.svelte -->
22
<script lang="ts">
3-
import { onMount, tick } from 'svelte';
4-
import { afterNavigate } from '$app/navigation';
5-
import mermaid from 'mermaid';
6-
import hljs from 'highlight.js'; // Import highlight.js
3+
import { onMount, tick } from "svelte";
4+
import { afterNavigate } from "$app/navigation";
5+
import mermaid from "mermaid";
6+
import hljs from "highlight.js"; // Import highlight.js
77
// import 'highlight.js/styles/nnfx-dark.min.css'; // Import a default style for highlight.js
8-
import 'highlight.js/styles/default.css';
8+
import "highlight.js/styles/default.css";
99
// import 'highlight.js/styles/github-dark.css';
10-
import { browser } from '$app/environment';
10+
import { browser } from "$app/environment";
1111
1212
export let content: string;
1313
@@ -17,15 +17,17 @@
1717
mermaid.initialize({ startOnLoad: false });
1818
await tick(); // Ensure DOM is updated
1919
mermaid.run({
20-
querySelector: '.mermaid' // Render all elements with the mermaid class
20+
querySelector: ".mermaid", // Render all elements with the mermaid class
2121
});
2222
};
2323
2424
const updateHighlightTheme = () => {
2525
if (browser) {
26-
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
27-
document.documentElement.classList.toggle('theme-dark', isDarkMode);
28-
document.documentElement.classList.toggle('theme-light', !isDarkMode);
26+
const isDarkMode = window.matchMedia(
27+
"(prefers-color-scheme: dark)",
28+
).matches;
29+
document.documentElement.classList.toggle("theme-dark", isDarkMode);
30+
document.documentElement.classList.toggle("theme-light", !isDarkMode);
2931
hljs.highlightAll();
3032
}
3133
};
@@ -117,48 +119,48 @@
117119
@apply flex list-none items-center py-2;
118120
}
119121
120-
:global(.task-list-item input[type='checkbox']),
121-
:global(input[type='checkbox']) {
122+
:global(.task-list-item input[type="checkbox"]),
123+
:global(input[type="checkbox"]) {
122124
@apply mr-2 h-4 w-4 cursor-pointer appearance-none border bg-white transition-all duration-200 ease-in-out;
123125
position: relative;
124126
}
125127
126-
:global(.task-list-item input[type='checkbox']:checked),
127-
:global(input[type='checkbox']:checked) {
128+
:global(.task-list-item input[type="checkbox"]:checked),
129+
:global(input[type="checkbox"]:checked) {
128130
@apply border-blue-500 bg-blue-500;
129131
}
130132
131-
:global(.task-list-item input[type='checkbox']:checked::before),
132-
:global(input[type='checkbox']:checked::before) {
133-
content: '\2713';
133+
:global(.task-list-item input[type="checkbox"]:checked::before),
134+
:global(input[type="checkbox"]:checked::before) {
135+
content: "\2713";
134136
@apply absolute text-xs font-bold text-white;
135137
top: 50%;
136138
left: 50%;
137139
transform: translate(-50%, -50%);
138140
}
139141
140-
:global(.task-list-item input[type='checkbox']:disabled),
141-
:global(input[type='checkbox']:disabled) {
142+
:global(.task-list-item input[type="checkbox"]:disabled),
143+
:global(input[type="checkbox"]:disabled) {
142144
@apply cursor-not-allowed border-carbongray-800;
143145
}
144146
145-
:global(.task-list-item input[type='checkbox']:disabled:checked),
146-
:global(input[type='checkbox']:disabled:checked) {
147+
:global(.task-list-item input[type="checkbox"]:disabled:checked),
148+
:global(input[type="checkbox"]:disabled:checked) {
147149
@apply border-carbongray-700 bg-carbongray-100 dark:bg-carbongray-600;
148150
}
149151
150-
:global(.task-list-item input[type='checkbox']:disabled:checked::before),
151-
:global(input[type='checkbox']:disabled:checked::before) {
152+
:global(.task-list-item input[type="checkbox"]:disabled:checked::before),
153+
:global(input[type="checkbox"]:disabled:checked::before) {
152154
@apply text-gray-500 dark:text-carbongray-100;
153155
}
154156
155157
:global(.task-list-item),
156-
:global(input[type='checkbox'] + *) {
158+
:global(input[type="checkbox"] + *) {
157159
@apply select-none text-lg;
158160
}
159161
160-
:global(.task-list-item input[type='checkbox']:disabled ~ *),
161-
:global(input[type='checkbox']:disabled + *) {
162+
:global(.task-list-item input[type="checkbox"]:disabled ~ *),
163+
:global(input[type="checkbox"]:disabled + *) {
162164
@apply text-gray-400;
163165
}
164166
@@ -169,8 +171,8 @@
169171
170172
/* Unordered list styles with centered dot */
171173
:global(ul > li::before) {
172-
content: '';
173-
@apply absolute left-2 top-[0.7em] h-2 w-2 rounded-full bg-carbonblue-500;
174+
content: "";
175+
@apply absolute left-2 top-[35%] h-2 w-2 rounded-full bg-carbonblue-500;
174176
}
175177
176178
/* Ordered list styles */
@@ -206,43 +208,43 @@
206208
content: none;
207209
}
208210
209-
:global(.task-list-item input[type='checkbox']) {
211+
:global(.task-list-item input[type="checkbox"]) {
210212
@apply mr-2 mt-1;
211213
}
212214
213215
/* Checkbox styles */
214-
:global(.task-list-item input[type='checkbox']),
215-
:global(input[type='checkbox']) {
216+
:global(.task-list-item input[type="checkbox"]),
217+
:global(input[type="checkbox"]) {
216218
@apply h-4 w-4 cursor-pointer appearance-none rounded border border-gray-300 bg-white transition-all duration-200 ease-in-out;
217219
position: relative;
218220
}
219221
220-
:global(.task-list-item input[type='checkbox']:checked),
221-
:global(input[type='checkbox']:checked) {
222+
:global(.task-list-item input[type="checkbox"]:checked),
223+
:global(input[type="checkbox"]:checked) {
222224
@apply border-blue-500 bg-blue-500;
223225
}
224226
225-
:global(.task-list-item input[type='checkbox']:checked::before),
226-
:global(input[type='checkbox']:checked::before) {
227-
content: '\2713';
227+
:global(.task-list-item input[type="checkbox"]:checked::before),
228+
:global(input[type="checkbox"]:checked::before) {
229+
content: "\2713";
228230
@apply absolute text-xs font-bold text-white;
229231
top: 50%;
230232
left: 50%;
231233
transform: translate(-50%, -50%);
232234
}
233235
234-
:global(.task-list-item input[type='checkbox']:disabled),
235-
:global(input[type='checkbox']:disabled) {
236+
:global(.task-list-item input[type="checkbox"]:disabled),
237+
:global(input[type="checkbox"]:disabled) {
236238
@apply cursor-not-allowed border-gray-200 bg-gray-100;
237239
}
238240
239-
:global(.task-list-item input[type='checkbox']:disabled:checked),
240-
:global(input[type='checkbox']:disabled:checked) {
241+
:global(.task-list-item input[type="checkbox"]:disabled:checked),
242+
:global(input[type="checkbox"]:disabled:checked) {
241243
@apply border-gray-300 bg-gray-300;
242244
}
243245
244-
:global(.task-list-item input[type='checkbox']:disabled:checked::before),
245-
:global(input[type='checkbox']:disabled:checked::before) {
246+
:global(.task-list-item input[type="checkbox"]:disabled:checked::before),
247+
:global(input[type="checkbox"]:disabled:checked::before) {
246248
@apply text-white;
247249
}
248250
:global(img) {
@@ -254,7 +256,7 @@
254256
}
255257
256258
:global(blockquote::before) {
257-
content: '';
259+
content: "";
258260
@apply absolute -left-8 -top-2 h-20 w-20 bg-carbongray-100 dark:bg-carbongray-600; /* Positioning, size, and color */
259261
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="M7.39762 10.3C7.39762 11.0733 7.14888 11.7 6.6514 12.18C6.15392 12.6333 5.52552 12.86 4.76621 12.86C3.84979 12.86 3.09047 12.5533 2.48825 11.94C1.91222 11.3266 1.62421 10.4467 1.62421 9.29999C1.62421 8.07332 1.96459 6.87332 2.64535 5.69999C3.35231 4.49999 4.33418 3.55332 5.59098 2.85999L6.4943 4.25999C5.81354 4.73999 5.26369 5.27332 4.84476 5.85999C4.45201 6.44666 4.19017 7.12666 4.05926 7.89999C4.29491 7.79332 4.56983 7.73999 4.88403 7.73999C5.61716 7.73999 6.21938 7.97999 6.69067 8.45999C7.16197 8.93999 7.39762 9.55333 7.39762 10.3ZM14.6242 10.3C14.6242 11.0733 14.3755 11.7 13.878 12.18C13.3805 12.6333 12.7521 12.86 11.9928 12.86C11.0764 12.86 10.3171 12.5533 9.71484 11.94C9.13881 11.3266 8.85079 10.4467 8.85079 9.29999C8.85079 8.07332 9.19117 6.87332 9.87194 5.69999C10.5789 4.49999 11.5608 3.55332 12.8176 2.85999L13.7209 4.25999C13.0401 4.73999 12.4903 5.27332 12.0713 5.85999C11.6786 6.44666 11.4168 7.12666 11.2858 7.89999C11.5215 7.79332 11.7964 7.73999 12.1106 7.73999C12.8437 7.73999 13.446 7.97999 13.9173 8.45999C14.3886 8.93999 14.6242 9.55333 14.6242 10.3Z" fill="currentColor"/></svg>');
260262
}

‎src/routes/api/ls/+server.ts‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,27 +12,42 @@ interface FileNode {
1212

1313
function buildFileTree(records: any[]): FileNode[] {
1414
const tree: FileNode[] = [];
15+
1516
records.forEach((record) => {
16-
const pathParts = record.url.split("/").filter(Boolean);
17+
const pathParts = record.url.split("/").filter(Boolean); // Split the URL into parts
1718
let currentLevel = tree;
19+
1820
pathParts.forEach((part: string, index: number) => {
1921
let existingNode = currentLevel.find((node) => node.name === part);
22+
23+
// If the node doesn't exist, create a new one
2024
if (!existingNode) {
2125
existingNode = {
22-
id: record.id,
23-
title: record.title,
24-
name: part,
25-
url: index === pathParts.length - 1 ? record.url : "",
26-
children: [],
26+
id: "", // Only set if it's a file (at the last level)
27+
title: "",
28+
name: part, // The name of the folder or file
29+
url: "", // Only set if it's a file (at the last level)
30+
children: [], // This will hold the children (for folders)
2731
};
2832
currentLevel.push(existingNode);
2933
}
34+
35+
// If it's the last part of the path (a file), assign file properties
36+
if (index === pathParts.length - 1) {
37+
existingNode.id = record.id;
38+
existingNode.title = record.title;
39+
existingNode.url = record.url;
40+
}
41+
42+
// Move to the next level in the tree
3043
currentLevel = existingNode.children;
3144
});
3245
});
46+
3347
return tree;
3448
}
3549

50+
3651
export const GET: RequestHandler = async () => {
3752
try {
3853
const pb = await getAuthenticatedPocketBase();

‎src/routes/api/upload/+server.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import rehypeCallouts from "rehype-callouts";
1919
import rehypeAutolinkHeadings from "rehype-autolink-headings";
2020
import wikiLink from "remark-wiki-link";
2121
import obsidianImagePlugin from "$lib/remark-plugins/obsidianImage";
22+
import rehypeWrapLiWithP from "$lib/rehype_plugins/wrapWithP";
2223

2324
import {
2425
POCKETBASE_ADMIN_PASSWORD,
@@ -145,7 +146,7 @@ async function compileMarkdown(fileContent: string, url: string): Promise {
145146
remarkLogImages,
146147
remarkTags,
147148
],
148-
rehypePlugins: [rehypeKatex, rehypeCallouts, rehypeAutolinkHeadings],
149+
rehypePlugins: [rehypeKatex, rehypeCallouts, rehypeAutolinkHeadings, rehypeWrapLiWithP],
149150
});
150151

151152
const frontmatter: Frontmatter = compiled.data?.fm || {};

0 commit comments

Comments
 (0)