diff --git a/package.json b/package.json index 55ea480..99658c9 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@tailwindcss/forms": "^0.5.7", "@tailwindcss/typography": "^0.5.10", "asciidoctor": "^3.0.4", + "he": "^1.2.0", "markdown-it": "^14.0.0", "markdown-it-plain-text": "^0.3.0", "marked": "^11.1.1", @@ -31,6 +32,7 @@ "devDependencies": { "@sveltejs/adapter-auto": "^3.1.1", "@sveltejs/kit": "^2.4.3", + "@types/he": "^1.2.3", "@types/markdown-it": "^13.0.7", "@types/node": "^22.5.4", "@types/showdown": "^2.0.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 72c7433..34c8075 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,6 +29,9 @@ importers: asciidoctor: specifier: ^3.0.4 version: 3.0.4(chokidar@3.6.0) + he: + specifier: ^1.2.0 + version: 1.2.0 markdown-it: specifier: ^14.0.0 version: 14.1.0 @@ -57,6 +60,9 @@ importers: '@sveltejs/kit': specifier: ^2.4.3 version: 2.5.25(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.2(@types/node@22.5.4)))(svelte@4.2.19)(vite@5.4.2(@types/node@22.5.4)) + '@types/he': + specifier: ^1.2.3 + version: 1.2.3 '@types/markdown-it': specifier: ^13.0.7 version: 13.0.9 @@ -572,6 +578,9 @@ packages: '@types/estree@1.0.5': resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} + '@types/he@1.2.3': + resolution: {integrity: sha512-q67/qwlxblDzEDvzHhVkwc1gzVWxaNxeyHUBF4xElrvjL11O+Ytze+1fGpBHlr/H9myiBUaUXNnNPmBHxxfAcA==} + '@types/linkify-it@3.0.5': resolution: {integrity: sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==} @@ -1208,6 +1217,10 @@ packages: resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} engines: {node: '>= 0.4'} + he@1.2.0: + resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==} + hasBin: true + htmlparser2@9.1.0: resolution: {integrity: sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==} @@ -2614,6 +2627,8 @@ snapshots: '@types/estree@1.0.5': {} + '@types/he@1.2.3': {} + '@types/linkify-it@3.0.5': {} '@types/markdown-it@13.0.9': @@ -3329,6 +3344,8 @@ snapshots: dependencies: function-bind: 1.1.2 + he@1.2.0: {} + htmlparser2@9.1.0: dependencies: domelementtype: 2.3.0 diff --git a/src/app.css b/src/app.css index 38d0653..0fbbe43 100644 --- a/src/app.css +++ b/src/app.css @@ -48,8 +48,16 @@ } /* Content */ - div.note-leather { - @apply bg-primary-0 dark:bg-primary-1000 text-gray-800 dark:text-gray-300 hover:bg-primary-100 dark:hover:bg-primary-800 p-2 rounded; + div.note-leather, + p.note-leather, + section.note-leather { + @apply bg-primary-0 dark:bg-primary-1000 text-gray-800 dark:text-gray-300 p-2 rounded; + } + + div.note-leather:hover:not(:has(.note-leather:hover)), + p.note-leather:hover:not(:has(.note-leather:hover)), + section.note-leather:hover:not(:has(.note-leather:hover)) { + @apply hover:bg-primary-100 dark:hover:bg-primary-800 ; } /* Heading */ diff --git a/src/lib/articleParser.ts b/src/lib/articleParser.ts deleted file mode 100644 index 375d3a6..0000000 --- a/src/lib/articleParser.ts +++ /dev/null @@ -1,36 +0,0 @@ -import MarkdownIt from 'markdown-it'; -import LinkToArticle from '$components/LinkToArticle.svelte'; -import plainText from 'markdown-it-plain-text'; - -const md = new MarkdownIt(); -const mdTxt = new MarkdownIt().use(plainText); - -export function parse(markdown: string) { - let parsedMarkdown = md.render(markdown); - - parsedMarkdown = parsedMarkdown.replace(/\[\[(.*?)\]\]/g, (match: any, content: any) => { - const container = document.createElement('span'); - - const linkToArticle = new LinkToArticle({ - target: container, - props: { - content: content - } - }); - - return container.outerHTML; - }); - - return parsedMarkdown; -} - -export function parsePlainText(markdown: string) { - mdTxt.render(markdown); - - /* @ts-ignore */ // markdown-it-plain-text doesnt have typescript support?? - let parsedText = mdTxt.plainText.replace(/\[\[(.*?)\]\]/g, (match: any, content: any) => { - return content; - }); - - return parsedText; -} diff --git a/src/lib/components/Preview.svelte b/src/lib/components/Preview.svelte index 0b804d2..2072aff 100644 --- a/src/lib/components/Preview.svelte +++ b/src/lib/components/Preview.svelte @@ -1,6 +1,6 @@ -
+
{#if depth < 4} {title} - {#each orderedChildren as id} + {#each orderedChildren as id, index} {#if childIndices.includes(id)} {:else if (childZettels.includes(id))} - {@html parser.getHtmlContent(id)} +

+ {@html parser.getContent(id)} +

{/if} {/each} {:else} - {@html parser.getHtmlContent(rootIndexId)} +

+ {@html parser.getContent(rootIndexId)} +

{/if} -
\ No newline at end of file + \ No newline at end of file diff --git a/src/lib/parser.ts b/src/lib/parser.ts index 4fca9bd..3e710f2 100644 --- a/src/lib/parser.ts +++ b/src/lib/parser.ts @@ -9,6 +9,7 @@ import asciidoctor, { Section, type ProcessorOptions } from 'asciidoctor'; +import he from 'he'; interface IndexMetadata { authors?: string[]; @@ -146,7 +147,8 @@ export default class Pharos { */ getIndexTitle(id: string): string | undefined { const section = this.nodes.get(id) as Section; - return section.getTitle(); + const title = section.getTitle() ?? ''; + return he.decode(title); } /** @@ -173,10 +175,20 @@ export default class Pharos { } /** - * @returns The converted content of the node with the given ID. + * @returns The content of the node with the given ID. The presentation of the returned content + * varies by the node's context. + * @remarks By default, the content is returned as HTML produced by the + * Asciidoctor converter. However, other formats are returned for specific contexts: + * - Paragraph: The content is returned as a plain string. */ - getHtmlContent(id: string): string { - const block = this.nodes.get(id) as Block; + getContent(id: string): string { + const block = this.nodes.get(id) as AbstractBlock; + + switch (block.getContext()) { + case 'paragraph': + return block.getContent() ?? ''; + } + return block.convert(); } diff --git a/src/routes/new/edit/+page.svelte b/src/routes/new/edit/+page.svelte index 0d672ba..2c3c26d 100644 --- a/src/routes/new/edit/+page.svelte +++ b/src/routes/new/edit/+page.svelte @@ -1,5 +1,5 @@