forked from tanner/qotnews
66 lines
1.4 KiB
Svelte
66 lines
1.4 KiB
Svelte
<script>
|
|
import DOMPurify from "dompurify";
|
|
import { onMount } from "svelte";
|
|
import { getLogoUrl } from "../utils/logos.js";
|
|
import StoryInfo from "../components/StoryInfo.svelte";
|
|
export let stories;
|
|
|
|
const host = (url) => new URL(url).hostname.replace(/^www\./, "");
|
|
let purify = () => "";
|
|
|
|
onMount(() => {
|
|
purify = (html) => DOMPurify.sanitize(html);
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.story-item {
|
|
margin: 0.5rem 0 0;
|
|
padding-left: 1.2em;
|
|
}
|
|
.story-icon,
|
|
.story-title {
|
|
font-size: 1.2rem;
|
|
}
|
|
.story-icon {
|
|
margin-left: -1.2rem;
|
|
}
|
|
.story-source::before {
|
|
content: "(";
|
|
}
|
|
.story-source::after {
|
|
content: ")";
|
|
}
|
|
|
|
.story-item :global(a) {
|
|
text-decoration: none;
|
|
}
|
|
.story-item :global(a:hover) {
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
|
|
{#each stories as story}
|
|
<article class="story-item">
|
|
<header class="story-header">
|
|
<img
|
|
src={getLogoUrl(story)}
|
|
alt="logo"
|
|
class="story-icon"
|
|
style="height: 1rem; width: 1rem;" />
|
|
<a
|
|
class="story-title"
|
|
rel="prefetch"
|
|
href="/{story.id}">{@html purify(story.title)}</a>
|
|
<a
|
|
class="story-source"
|
|
href={story.url || story.link}>{host(story.url || story.link)}</a>
|
|
</header>
|
|
<section class="story-info">
|
|
<StoryInfo {story} />
|
|
</section>
|
|
</article>
|
|
{/each}
|
|
|
|
<slot />
|