plugin-bookshelves (A README Experience)

A plugin for Micro.blog that creates a page displaying multiple bookshelves.

`

`

Once installed, the generated page will be found at [SCHEME]://[HOSTNAME]/bookshelf/.

If you leave the parameters untouched, the plugin generates a section for every bookshelf with headers displaying the less-than-stellar bookshelf key.

You can take these silly, lowercase, spaceless values and use them as keys for descriptions within a JSON object kinda like…

{
  "currentlyreading": "*Books I am somewhat in the process of reading*",
  "finishedreading": "*Books I've managed to get myself to read*",
  "wanttoread": "*Books that gaze at me judingly from beneath the television, where they currently live, for having yet to crack their spine (f$&kers).*",
  "didwanttoread": "*Books whose gaze of judgement I've kinda become okay with as my interest in reading them has waned.*"
}

Notice the descriptions will be markdownified so you can include markdown.

So copy that JSON, head to the plugin parameters, and paste it in kinda like…

Then, instead of listing all of your bookshelves, the plugin will list only the bookshelves included in the JSON object … and in place of those headers the plugin will generate a paragraph introducing your bookshelf with the specified description, kinda like…

You can play around with the pixel width used in cover image requests. If you do, there is something you should know:

when you load the plugin parameter page, any previously set JSON object will be mangled, so you will want to keep it copied somewhere else and paste that little f$&ker back into the parameter field EVERY time you feel like actually hitting that button to update settings.

The page template lives at layouts/bookshelf/single.html.

{{ define "main" }}
<section id="wrapper">
<article class="h-entry post">
<section class="e-content post-body">

&#123;&#123; with site.Params.bookshelves_data_json }}
  &#123;&#123; with transform.Unmarshal . }}
    &#123;&#123; range $bookshelf, $description := . }}
    
<p class="bookshelf-description">&#123;&#123; $description | markdownify }}</p>
<div class="bookshelf-books">
      &#123;&#123; range index site.Data.bookshelves $bookshelf }}

&#123;&#123; partial "book.html" . }}

      &#123;&#123; end }}
</div>

    &#123;&#123; end }}
  &#123;&#123; end }}

&#123;&#123; else }}
  
 &#123;&#123; range $bookshelf_key, $bookshelf := site.Data.bookshelves }}
 
<h1 class="bookshelf-key">&#123;&#123; $bookshelf_key }}</h1>
<div class="bookshelf-books">
  &#123;&#123; range $bookshelf }}
  
&#123;&#123; partial "book.html" . }}  
  
  &#123;&#123; end }}
</div>

 &#123;&#123; end }}

&#123;&#123; end }}

</section>
</article>
</section>

&#123;&#123; end }}

The partial it uses for each book lives at layouts/partials/book.html. It may be useful elsewhere if you feed it a book from a bookshelf.

{{ $cover_width := 100 }}
{{ with site.Params.bookshelves_cover_width }}
{{ $cover_width = . | int }}
{{ end }}
<div class="bookshelf-book">
  <a 
    class="bookshelf-book-link" 
    href="https://micro.blog/books/&#123;&#123; .isbn }}">
    <img 
      class="bookshelf-book-cover"
      src="https://micro.blog/photos/&#123;&#123; $cover_width }}x/&#123;&#123; .cover_url }}"
      align="left" />
  </a>
  <div>
  <span class="bookshelf-book-title">&#123;&#123; .title }}</span>
&#123;&#123; with .author }}
  <br /><span class="bookshelf-book-author">by {{.}}</span>
&#123;&#123; end }}
  </div>
 </div>

The HTML elements are all appropriately classed for custom CSS, etc., etc. The stylesheet it uses lives at static/assets/css/bookshelf.css.

div.bookshelf-books {
  margin: 50px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

div.bookshelf-book {
  display: flex;
  align-items: center;
  gap: 20px;
}

The file living at content/bookshelf.md specifies the front matter for the page.

{
  "title": "Bookshelf",
  "description": "Book collections",
  "type": "bookshelf",
  "menu": {
    "main": {
      "name": "Bookshelf",
      "title": "Bookshelf",
      "identifier": "bookshelf",
      "url": "/bookshelf/",
      "weight": 115
    }
  }
}

Leave the type alone (as that is what points it to layouts/bookshelf/single.html). You can play with the title and description values. These set the values I would expect your theme to draw from when constructing the page <head>. The menu creates a menu item to include the page in your navigation. Leave the url alone (this is how the link’s target is derived). You can play around with the other values. You can adjust the value of weight to slide the menu item up or down your list of navigation items. You can remove the menu entry entirely if you do not want the page to show up in your navigation menu.