Ghost CMS, pretty neat stuff

I've stood up a CMS several times for personal stuff..  A few I can't remember, others I can remember were CMSMS and WebGUI.  All did way more than I'd ever need, were complicated, etc.  Ghost seems to fit what I need, although I doubt I'll really use all of it.

Expect to see me tinkering with it, although I don't plan on going crazy with any templates etc, perhaps some misc changes.  Right now it's running in a podman container but has a local Nginx proxying the SSL, thus the oddball URL with 11443 in it.  Apache is currently doing some other stuff on ports 80 and 443 so I can't use those ports, so this will do.  Looks a bit odd but hey why not.

And note to self; if I do change the port I need to change the podman script to match ;)

And here's a couple of tricks/tips (otherwise known as I'll never remember this unless I write it down).  Note that I am using the default Casper theme on my site, these will very likely need adjusting for other themes and potentially as the default theme changes as well.

Tag Cards

I wanted to expose the tags on the site in a pleasing way and fortunately, the community was way ahead of me and had already documented how to do it by adding a few files into the theme which is documented at https://netlify.many-monkeys.com/adding-a-tags-page-to-ghost-blog/  However, I had to do a bit of tweaking to make this work, so this is what I came up with.

custom-tagcard.hbs

{{!< default}}
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}

{{!-- The big featured header, it uses blog cover image as a BG if available --}}
{{#post}}

{{!-- The main content area --}}
<main id="site-main" class="site-main outer" role="main">
    <div class="inner inner-page-tags">                 
         <div class="post-feed">
            {{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}
            {{#foreach tags}}
                {{!-- The tag below includes the markup for each tag - partials/tag-card.hbs --}}
                {{> "tag-card"}}
            {{/foreach}}
            {{/get}}
        </div>
    </div>
</main>
{{/post}}

partials/tag-card.hbs

<article class="post-card {{post_class}}{{#unless feature_image}} no-image{{/unless}}">
    {{#if feature_image}}
        <a class="post-card-image-link" href="{{url}}">
            <div class="post-card-image" style="background-image: url({{feature_image}})"></div>
        </a>
    {{/if}}
    <div class="post-card-content">
        <a class="post-card-content-link" href="{{url}}">
            <header class="post-card-header">
                <h2 class="post-card-title">{{name}}</h2>
            </header>
            <section class="post-card-excerpt">
                <p>{{description}}</p>
                <p>A collection of {{plural count.posts empty='posts' singular='% post' plural='% posts'}}</p>
            </section>
        </a>
    </div>
</article>

Open in new tab

I wanted to open links inside of articles in new tabs and Ghost doesn't have a built-in way to open in new tab/don't open in in tab so based on this post I came up with the following which goes in the Code Injection Site Footer (it's important it's in the footer, not the header):

<!-- Force a new tab on href's unless they have ?sametab& in them -->
<script type='text/javascript'>
  $( document ).ready(function() {
      $(".article a").attr("target","moredetail");
      $( "a[href*='?sametab&']" ).attr("target","");
  });
</script>

The first article a match is matching any link in the site by default within an article, so shouldn't mess with any site links themselves.  The second one lets me override this by adding ?sametab& onto the URL, which generally will just be ignored as URL parameters and will open in the current tab as it has no specified target.

Lightbox for Images

Based on this post about adding lightboxes for images, I added the following to my Site Footer:

<script>
      window.fluidboxGhostConfig = {
      theme: 'image-backdrop', // Options: light, dark, image-backdrop, hsla(262, 100%, 82%, 0.6)
      showCaption: true, // Sets whether to capture the caption and show it below the image when expanded
      }
</script>
<script async src="https://cdn.jsdelivr.net/gh/coreysnyder04/fluidbox-ghost-blog-plugin@0.1.0/fluidbox-ghost-blog-plugin.min.js"></script>

Google search box

Following the instructions on the Ghost site for adding search I added the following into the Code Injection settings of the site:

Code Injection, Site Header

<!-- Google search box code, copy and paste from site -->

<style>
  .gse-searchbox {
     clear: both;
     position: relative;
     z-index: 10;
     margin-top: -5em;
     float: right;
     width: 100%;
     max-width: 400px;
     color: black;
   }
 </style>

Code Injection, Site Footer

  <div class="gse-searchbox">
     <gcse:search></<gcse:search>
  </div>