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.
 
 
 
 

164 lines
3.4 KiB

<script context="module">
import markdown from "$/lib/blog.js";
import OGPreview from "$/client/components/OGPreview.svelte";
export const getPaths = () => {
// slug has to be present here to match [slug] directory
return markdown.load("rendered/posts");
}
export const getData = post => post;
</script>
<script>
import Layout from '$/rendered/Layout.svelte';
import IconImage from "$/client/components/IconImage.svelte";
import { base_host, twitter_user } from "$/client/config.js";
export let metadata;
export let toc;
export let content;
export let slug;
let related = markdown.load("rendered/posts").slice(0, 5).map(p => p.metadata);
let og = {
"title": metadata.title, // title of the article
"description": metadata.summary, // description for inside preview
"url": `${ base_host }/blog/${ metadata.slug }/`, // URL to article
"type": "website", // not mentioned on linked in but needed
}
let twitter = {
"card": "summary", // must be summary, summary_large_image, app, player
"creator": twitter_user, // @username of content creator
"description": og.description, // max 200 chars
"site": "@lzsthw", // @username of site
"title": og.title,
}
if(metadata.image) {
og.image = `${base_host}/${metadata.image}`;
twitter.image = og.image;
}
</script>
<OGPreview og={ og } twitter={ twitter } />
<style>
content {
overflow: auto;
padding-left: 5rem;
padding-right: 5rem;
display: flex;
font-size: 1.5rem;
flex-direction: column;
}
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;
}
@media only screen and (min-width: 1285px) {
posts,
content,
hero {
width: var(--width-content);
}
}
@media only screen and (max-width: 900px) {
content {
overflow: auto;
padding-left: 0.5rem;
padding-right: 0.5rem;
display: flex;
font-size: 1.2rem;
flex-direction: column;
}
}
</style>
<Layout centered={ true } fullwidth={ true }>
<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>
<content>
{@html content}
</content>
<posts>
{#each related as post}
<post class="stacked">
<name class="layer">
<b>{post.title}</b>
</name>
<icon class="layer">
<a href="/blog/{ post.slug }/">
<IconImage name={ post.icon } pattern={ false }/>
</a>
</icon>
</post>
{/each}
<post class="stacked">
<name class="layer">
<b>See More...</b>
</name>
<icon class="layer">
<a href="/">
<IconImage name="home" pattern={ false }/>
</a>
</icon>
</post>
</posts>
</Layout>