mud.bearblog.dev

here are some simple bearblog snippets that i use. you can customize it to your liking with the help of the official embedded list doc.

in addition to the codes below, i also use: heart upvote (no count)!

list view

with meta_description and a small icon using the meta_image. example below.

  • filter

    html+js button filter.

  • bush

    new garden, new bush tutorial.

    bush
  • swords

    current update of swords from 2013.

    swords

goes in post or page:

<section class="list">{{ posts|image:True|description:True }}</section>

goes in theme:

.list {
  ul.embedded.blog-posts li {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
  }

  ul.embedded.blog-posts img {
    order: 0;
    width: 32px;
    height: 32px;
    object-fit: cover;
    clip-path: inset(10% 10% 10% 10%);
  }

  ul.embedded.blog-posts li a {
    order: 2;
    display: inline;
    padding: 0;
    white-space: normal;
    gap: 5px;
  }

  ul.embedded.blog-posts p {
    order: 3;
    margin: 0 2px 0 0;
    padding-left: 5px;
  }
}

displays each post with their meta_image and meta_description in a wrapping grid. example.

goes in post or page:

<center><section class="gallery">
  {{ posts|image:True|description:True }}
</section></center>

goes in theme:

.gallery {
  ul.embedded.blog-posts {
    display: inline-table;
    border-collapse: separate;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  ul.embedded.blog-posts li {
    display: inline-block;
    width: 125px;
    vertical-align: top;
    overflow: hidden;
  }

  ul.embedded.blog-posts img {
    width: 125px;
    height: 100px;
    object-fit: cover;
    clip-path: inset(10% 0% 10% 0%);
  }

  ul.embedded.blog-posts li a {
    display: block;
    white-space: normal;
  }
}

tagged pages

this can also be used without tags if you just want a post list with a most recent sidebar. you can increase the number of recent posts. example.

goes in post or page:

<table>
  <tr>
    <td valign="top">
      <b>tagged: TAG</b>
      {{ posts|tag:TAG }}
    </td>
    <td style="width:150px;" valign="top">
      <b>most recent entry</b>
      <section class="recent">{{ posts|tag:questionnaire|limit:1|description:True|image:True }}</section>
    </td>
  </tr>
</table>

goes in theme:

.recent {
  img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    clip-path: inset(10% 0% 10% 0%);
  }
  
  ul.embedded.blog-posts li {
    display: block;
    width: 150px;
  }
  
  ul.embedded.blog-posts li a {
    display: block;
    white-space: normal;
  }
}