You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
<script context="module">
|
|
|
|
export function preload() {
|
|
|
|
return this.fetch(`index.json`)
|
|
|
|
.then((r) => r.json())
|
|
|
|
.then(({ stories }) => {
|
|
|
|
return { stories };
|
|
|
|
});
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { getLogoUrl } from "../utils/logos.js";
|
|
|
|
import StoryInfo from "../components/StoryInfo.svelte";
|
|
|
|
|
|
|
|
export let stories;
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
article {
|
|
|
|
margin: 0.5rem 0;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<svelte:head>
|
|
|
|
<title>QotNews</title>
|
|
|
|
<meta property="og:title" content="QotNews" />
|
|
|
|
<meta property="og:type" content="website" />
|
|
|
|
</svelte:head>
|
|
|
|
|
|
|
|
<section>
|
|
|
|
{#each stories as story}
|
|
|
|
<!-- we're using the non-standard `rel=prefetch` attribute to
|
|
|
|
tell Sapper to load the data for the page as soon as
|
|
|
|
the user hovers over the link or taps it, instead of
|
|
|
|
waiting for the 'click' event -->
|
|
|
|
<article>
|
|
|
|
<header>
|
|
|
|
<img
|
|
|
|
src={getLogoUrl(story)}
|
|
|
|
alt="logo"
|
|
|
|
style="height: 1rem; width: 1rem;" />
|
|
|
|
<a rel="prefetch" href="/{story.id}">{story.title}</a>
|
|
|
|
(<a
|
|
|
|
href={story.url || story.link}>{new URL(story.url || story.link).hostname.replace(/^www\./, '')}</a>)
|
|
|
|
</header>
|
|
|
|
<section>
|
|
|
|
<StoryInfo {story} />
|
|
|
|
</section>
|
|
|
|
</article>
|
|
|
|
{/each}
|
|
|
|
</section>
|