jason/qotnews
1
0
Fork 0
forked from tanner/qotnews
Code Issues Pull Requests Releases Wiki Activity

html component to do dom purify.

Browse Source
This commit is contained in:
Jason Schwarzenberger 2020-12-02 14:35:49 +13:00
parent f524ecec7b
commit 8c40124e07
4 changed files with 22 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
webapp/src/components/Article.svelte
View File

@ -1,18 +1,10 @@
<script> <script>
import DOMPurify from "dompurify";
import { onMount } from "svelte";
import StoryInfo from "../components/StoryInfo.svelte"; import StoryInfo from "../components/StoryInfo.svelte";
import Html from "../components/Html.svelte";
export let story; export let story;
let host = new URL(story.url || story.link).hostname.replace(/^www\./, ""); let host = new URL(story.url || story.link).hostname.replace(/^www\./, "");
let html;
let title;
onMount(() => {
html = DOMPurify.sanitize(story.text);
title = DOMPurify.sanitize(story.title);
});
</script> </script>
<style> <style>
@ -70,11 +62,7 @@
<article class="article"> <article class="article">
<header class="article-header"> <header class="article-header">
<h1 class="article-title"> <h1 class="article-title">
{#if !title} <Html html={story.title} />
{story.title}
{:else}
{@html title}
{/if}
</h1> </h1>
{#if story.url} {#if story.url}
<div>source: <a class="article-source" href={story.url}>{host}</a></div> <div>source: <a class="article-source" href={story.url}>{host}</a></div>
@ -85,10 +73,6 @@
</header> </header>
<section class="article-body"> <section class="article-body">
{#if !html} <Html html={story.text} />
{story.content}
{:else}
{@html html}
{/if}
</section> </section>
</article> </article>

12
webapp/src/components/Comment.svelte
View File

@ -1,8 +1,6 @@
<script> <script>
import DOMPurify from "dompurify";
import { onMount } from "svelte";
import Time from "../components/Time.svelte"; import Time from "../components/Time.svelte";
import Html from "../components/Html.svelte";
export let story; export let story;
export let comment; export let comment;
@ -11,12 +9,6 @@
let author = (comment.author || "").replace(" ", ""); let author = (comment.author || "").replace(" ", "");
let id = `${author}-${comment.date}`; let id = `${author}-${comment.date}`;
let html;
onMount(() => {
html = DOMPurify.sanitize(comment.text);
});
function toggleComments() { function toggleComments() {
showComments = !showComments; showComments = !showComments;
} }
@ -94,7 +86,7 @@
</header> </header>
<section class={showComments ? 'comment-text' : 'comment-text is-collapsed'}> <section class={showComments ? 'comment-text' : 'comment-text is-collapsed'}>
{@html html} <Html html={comment.text} />
</section> </section>
{#if !showComments} {#if !showComments}

15
webapp/src/components/Html.svelte Normal file
View File

@ -0,0 +1,15 @@
<script>
import DOMPurify from "dompurify";
import { onMount } from "svelte";
export let html;
let purify;
onMount(() => {
purify = (html) => DOMPurify.sanitize(html);
});
</script>
{#if purify}
{@html html}
{:else}{html}{/if}

14
webapp/src/components/StoryList.svelte
View File

@ -1,16 +1,10 @@
<script> <script>
import DOMPurify from "dompurify";
import { onMount } from "svelte";
import { getLogoUrl } from "../utils/logos.js"; import { getLogoUrl } from "../utils/logos.js";
import StoryInfo from "../components/StoryInfo.svelte"; import StoryInfo from "../components/StoryInfo.svelte";
import Html from "../components/Html.svelte";
export let stories; export let stories;
const host = (url) => new URL(url).hostname.replace(/^www\./, ""); const host = (url) => new URL(url).hostname.replace(/^www\./, "");
let purify;
onMount(() => {
purify = (html) => DOMPurify.sanitize(html);
});
</script> </script>
<style> <style>
@ -49,11 +43,7 @@
class="story-icon" class="story-icon"
style="height: 1rem; width: 1rem;" /> style="height: 1rem; width: 1rem;" />
<a class="story-title" rel="prefetch" href="/{story.id}"> <a class="story-title" rel="prefetch" href="/{story.id}">
{#if !purify} <Html html={story.title} />
{story.title}
{:else}
{@html purify(story.title)}
{/if}
</a> </a>
<a <a
class="story-source" class="story-source"