bandolier-template/rendered/pages/blog/index.svelte

<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>