This is the code that runs https://bandolier.learnjsthehardway.com/ for you to review. It uses the https://git.learnjsthehardway.com/learn-javascript-the-hard-way/bandolier-template to create the documentation for the project.
https://bandolier.learnjsthehardway.com/
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.
70 lines
1.5 KiB
70 lines
1.5 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";
|
|
|
|
const posts = markdown.load("rendered/docs/howto").reverse();
|
|
</script>
|
|
|
|
|
|
<style>
|
|
main h2 {
|
|
text-align: center;
|
|
}
|
|
|
|
main {
|
|
font-size: 1.3em;
|
|
padding: 3rem;
|
|
}
|
|
|
|
tile left {
|
|
width: 200px;
|
|
min-width: 200px;
|
|
max-width: 200px;
|
|
}
|
|
|
|
posts {
|
|
display: grid;
|
|
grid-template-columns: repeat(1, 1fr);
|
|
grid-template-rows: auto;
|
|
grid-gap: 1rem;
|
|
}
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
main {
|
|
font-size: 1.3em;
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<Layout bare={ true }>
|
|
<main>
|
|
<callout class="warning">
|
|
<span>These recipes are only stubs at the moment. I'll be writing them mostly in order as I test out the rest of the documentation.</span>
|
|
</callout>
|
|
<posts>
|
|
{#each posts as post}
|
|
<tile>
|
|
<left>
|
|
<a href="/docs/howto/{ post.metadata.slug }/">
|
|
<IconImage width="100%" height="100%" name={ post.metadata.icon } pattern={ false }/>
|
|
</a>
|
|
</left>
|
|
<middle>
|
|
<h4>
|
|
<a href="/docs/howto/{ post.metadata.slug }/">
|
|
{post.metadata.title}
|
|
</a>
|
|
</h4>
|
|
<p>{ post.metadata.summary }</p>
|
|
</middle>
|
|
<right>
|
|
<a href="/docs/howto/{ post.metadata.slug }/"><Icon name="arrow-right" /></a>
|
|
</right>
|
|
</tile>
|
|
{/each}
|
|
</posts>
|
|
</main>
|
|
</Layout>
|
|
|