forked from tanner/qotnews
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.
50 lines
1.1 KiB
50 lines
1.1 KiB
<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>News</title> |
|
</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>
|
|
|