diff --git a/package-lock.json b/package-lock.json index 2bdc8d7..f30ebca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "squalk", "version": "0.0.1", "dependencies": { + "@djot/djot": "^0.3.2", "@nostr/gadgets": "npm:@jsr/nostr__gadgets@^0.1.8", "@nostr/tools": "npm:@jsr/nostr__tools@^2.23.3" }, @@ -37,6 +38,18 @@ "vite": "^8.0.7" } }, + "node_modules/@djot/djot": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@djot/djot/-/djot-0.3.2.tgz", + "integrity": "sha512-joMKR24B8rxueyFiJbpZAqEiypjvOyzTxzkhyr0q5mM/sUBaOD3unna/9IxtOotFugViyYlkIRaiXg3xM//zxg==", + "license": "MIT", + "bin": { + "djot": "lib/cli.js" + }, + "engines": { + "node": ">=17.0.0" + } + }, "node_modules/@emnapi/core": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz", diff --git a/package.json b/package.json index 0cfce2a..7ae9eea 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "vite": "^8.0.7" }, "dependencies": { + "@djot/djot": "^0.3.2", "@nostr/gadgets": "npm:@jsr/nostr__gadgets@^0.1.8", "@nostr/tools": "npm:@jsr/nostr__tools@^2.23.3" } diff --git a/src/lib/components/PostContent.svelte b/src/lib/components/PostContent.svelte index 4b6e6e8..960a451 100644 --- a/src/lib/components/PostContent.svelte +++ b/src/lib/components/PostContent.svelte @@ -1,6 +1,15 @@ {#snippet renderInlines(inlines: Inline[])} - {#each inlines as inline} + {#each inlines as inline (inline)} {#if inline.type === "link"} {inline.label} + {:else if inline.type === "strong"} + {@render renderInlines(inline.children)} + {:else if inline.type === "em"} + {@render renderInlines(inline.children)} + {:else if inline.type === "del"} + {@render renderInlines(inline.children)} + {:else if inline.type === "code"} + {inline.value} + {:else if inline.type === "br"} +
+ {:else if inline.type === "image"} + {inline.alt} {:else}{inline.value}{/if} {/each} {/snippet} +{#snippet renderListItem(item: ListItem, tight: boolean)} +
  • + {#if item.checked !== null} + + {/if} + {#each item.blocks as b (b)} + {#if tight && b.type === "para"} + {@render renderInlines(b.inlines)} + {:else} + {@render renderBlocks([b])} + {/if} + {/each} +
  • +{/snippet} + {#snippet renderBlocks(blocks: Block[])} - {#each blocks as block} + {#each blocks as block (block)} {#if block.type === "image"} @@ -409,16 +674,72 @@ > {@render renderBlocks(block.blocks)} + {:else if block.type === "heading"} + {@const tag = `h${Math.min(block.level + 2, 6)}`} + + {@render renderInlines(block.inlines)} + + {:else if block.type === "code"} +
    {block.value}
    + {:else if block.type === "hr"} +
    + {:else if block.type === "list"} + {#if block.ordered} +
      + {#each block.items as item (item)} + {@render renderListItem(item, block.tight)} + {/each} +
    + {:else} + + {/if} + {:else if block.type === "table"} + {@const headRows = block.rows.filter((r) => r.head)} + {@const bodyRows = block.rows.filter((r) => !r.head)} +
    + + {#if headRows.length} + + {#each headRows as row (row)} + + {#each row.cells as cell (cell)} + + {/each} + + {/each} + + {/if} + + {#each bodyRows as row (row)} + + {#each row.cells as cell (cell)} + + {/each} + + {/each} + +
    {@render renderInlines(cell.inlines)}
    {@render renderInlines(cell.inlines)}
    +
    {:else} -

    {@render renderInlines(block.inlines)}

    +

    {@render renderInlines(block.inlines)}

    {/if} {/each} {/snippet}
    - {#each paragraphs as blocks} - {@render renderBlocks(blocks)} - {/each} + {@render renderBlocks(blocks)}