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.
142 lines
3.0 KiB
142 lines
3.0 KiB
<script>
|
|
import Layout from '$/rendered/Layout.svelte';
|
|
import IconImage from '$/client/components/IconImage.svelte';
|
|
import Icon from '$/client/components/Icon.svelte';
|
|
import markdown from "$/lib/blog.js";
|
|
import Markdown from "$/client/components/Markdown.svelte";
|
|
|
|
const posts = markdown.load("rendered/posts");
|
|
|
|
|
|
markdown.render_feed("./feed_index.json", posts);
|
|
</script>
|
|
|
|
|
|
<style>
|
|
main h2 {
|
|
text-align: center;
|
|
}
|
|
|
|
main {
|
|
font-size: 1.3em;
|
|
padding: 3rem;
|
|
}
|
|
|
|
posts tile {
|
|
border: none;
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
posts tile left {
|
|
--aspect-ratio: 1/1;
|
|
--width: 200px;
|
|
--height: unset;
|
|
width: var(--width);
|
|
min-width: var(--width);
|
|
max-width: var(--width);
|
|
}
|
|
|
|
posts tile middle {
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
tags {
|
|
display: flex;
|
|
margin-top: 1rem;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
tags tag {
|
|
border-radius: 20px;
|
|
background-color: var(--value7);
|
|
color: var(--value3);
|
|
font-size: 0.8em;
|
|
padding-left: 0.3rem;
|
|
padding-right: 0.3rem;
|
|
align-self: center;
|
|
max-height: fit-content;
|
|
}
|
|
|
|
tags info {
|
|
font-size: 0.8em;
|
|
color: var(--value3);
|
|
}
|
|
|
|
posts > hr {
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
posts {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
h1.title {
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
@media only screen and (max-width: 900px) {
|
|
main {
|
|
overflow: auto;
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
posts {
|
|
max-width: 90vw;
|
|
}
|
|
}
|
|
|
|
|
|
@media only screen and (max-width: 700px) {
|
|
posts tile {
|
|
flex-direction: column;
|
|
}
|
|
|
|
posts tile left {
|
|
--aspect-ratio: unset;
|
|
--height: 200px;
|
|
--width: calc(100vw - 3rem);
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<Layout bare={ true }>
|
|
<main>
|
|
<h1 class="title">How To Make A Post</h1>
|
|
<p>Create a .md file in <code>rendered/posts/</code> and it'll show up here. Look at <code>rendered/posts/01-sample.md</code> for an example header.</p>
|
|
<posts>
|
|
{#each posts as post}
|
|
<hr>
|
|
<tile>
|
|
<left>
|
|
<a href="/blog/{ post.metadata.slug }/">
|
|
<IconImage aspect_ratio="var(--aspect-ratio)" name={ post.metadata.icon } width="var(--width)" height="var(--height)"/>
|
|
</a>
|
|
</left>
|
|
<middle>
|
|
<h4><a class="bare" href="/blog/{ post.metadata.slug }/"><Markdown content={post.metadata.title} /></a></h4>
|
|
<p>
|
|
<Markdown content={ post.metadata.summary } />
|
|
</p>
|
|
|
|
<tags>
|
|
<tag>{ post.metadata.tag }</tag>
|
|
{#if post.metadata.repost}
|
|
<info><b>Reposted</b> from
|
|
<a class="bare" href={post.metadata.repost.link}><Markdown content={post.metadata.repost.title} /></a>
|
|
</info>
|
|
{:else}
|
|
<info>Published <b>{ post.metadata.date }</b></info>
|
|
{/if}
|
|
</tags>
|
|
</middle>
|
|
</tile>
|
|
{/each}
|
|
</posts>
|
|
</main>
|
|
</Layout>
|
|
|