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.

90 lines
1.5 KiB

<script context="module">
import markdown from "$/lib/blog.js";
export const getPaths = () => {
// slug has to be present here to match [slug] directory
return markdown.load("rendered/docs");
}
export const getData = post => {
return post;
}
</script>
<script>
import IconImage from "$/client/components/IconImage.svelte";
export let metadata;
export let toc;
export let content;
export let slug;
</script>
<style>
hero {
width: 100%;
}
hero.icon {
display: block;
}
hero.icon:hover div {
opacity: 0.2;
}
hero cover {
font-size: 2vw;
}
posts {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
posts post {
background-color: var(--value0);
}
posts post icon:hover {
opacity: 0.1;
}
posts post name {
display: flex;
justify-content: center;
align-items: center;
color: var(--value8);
min-width: 150px;
}
page {
display: flex;
flex-direction: column;
font-size: 1.2em;
}
</style>
<page>
<hero class="main" class:icon={ !metadata.image } data-testid="home-page">
{#if metadata.image}
<img src={ metadata.image } />
{:else if metadata.icon}
<div>
<IconImage name={ metadata.icon} />
</div>
{/if}
<cover>
<h1>{ metadata.title }</h1>
{#if metadata.summary }
<span id="slogan">{ metadata.summary }</span>
{/if}
<br/>
</cover>
</hero>
{@html content}
</page>