This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
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.
 
 
 
 
bandolier-template/rendered/pages/blog/index.svelte

157 lines
3.7 KiB

<script>
import Layout from '$/rendered/Layout.svelte';
import IconImage from '$/client/components/IconImage.svelte';
import markdown from "$/lib/blog.js";
import Markdown from "$/client/components/Markdown.svelte";
import { og_base_host, twitter_user } from "$/client/config.js";
import SEOTricks from "$/client/components/SEOTricks.svelte";
const posts = markdown.load("rendered/posts");
markdown.render_feed("./feed_index.json", posts);
let og = {
"title": "Bandolier Blog Example", // title of the article
"description": "This is an example of a blog layout.", // description for inside preview
"url": `${og_base_host}/blog/`, // 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,
}
</script>
<SEOTricks og={og} twitter={twitter} />
<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>