SquidSpirit
3cb69f6e7c
All checks were successful
Frontend CI / build (push) Successful in 1m8s
### Description
- Implement the content page
- Parse markdown formant content to html by `markdown-it`
- Use `sanitize-html` to prevent from XSS attack
- Style the html with `tailwindcss-typography`
- Fix the issue when backend parse the password to url
- Fix and make the post info list from backend always sorted by id
### Package Changes
### Rust
```toml
percent-encoding = "2.3.1"
```
### Node
```json
{
"@types/markdown-it": "^14.1.2",
"@types/sanitize-html": "^2.16.0",
"markdown-it": "^14.1.0",
"sanitize-html": "^2.17.0"
}
```
### Screenshots
|Desktop|Mobile|
|-|-|
|||
### Reference
Resolves #45
### Checklist
- [x] A milestone is set
- [x] The related issuse has been linked to this branch
Reviewed-on: #67
Co-authored-by: SquidSpirit <squid@squidspirit.com>
Co-committed-by: SquidSpirit <squid@squidspirit.com>
28 lines
893 B
Svelte
28 lines
893 B
Svelte
<script lang="ts">
|
|
import { PostBloc, PostEventType } from '$lib/post/adapter/presenter/postBloc';
|
|
import PostContentHeader from '$lib/post/framework/ui/PostContentHeader.svelte';
|
|
import { getContext, onMount } from 'svelte';
|
|
import markdownit from 'markdown-it';
|
|
import SafeHtml from '$lib/common/framework/ui/SafeHtml.svelte';
|
|
|
|
const { id }: { id: number } = $props();
|
|
|
|
const postBloc = getContext<PostBloc>(PostBloc.name);
|
|
const state = $derived($postBloc);
|
|
|
|
const md = markdownit();
|
|
const parsedContent = $derived(state.data?.content ? md.render(state.data.content) : '');
|
|
|
|
onMount(() => postBloc.dispatch({ event: PostEventType.PostLoadedEvent, id: id }));
|
|
</script>
|
|
|
|
<article class="container prose pb-10">
|
|
{#if state.data}
|
|
<PostContentHeader postInfo={state.data.info} />
|
|
<div class="max-w-3xl">
|
|
<hr />
|
|
<SafeHtml html={parsedContent} />
|
|
</div>
|
|
{/if}
|
|
</article>
|