Add bookclub to sidebar menu. Fix link styling

Author: edrogers

assets/static/images/bookclub-logo-1200x630.png

@@ -80,13 +80,17 @@ nav a:hover, nav a:focus{
    color: #50B990;
 }
 
-nav a::before{
+nav a::before {
    content: "";
    display: block;
    height: 0.75em;
    width: 4px;
-   background-color: #8aaad9;
+   background-color: transparent; /* Default to transparent */
    position: absolute;
    top: 0.25em;
    left: 0;
 }
+
+nav li.active a::before {
+   background-color: #8aaad9; /* Only active links get blue */
+}

assets/static/style.css

@@ -38,3 +38,11 @@ we're starting a new book.
 
 ---
 subtitle: Come Learn with MadPy
+---
+image: https://madpy.com/static/images/bookclub-logo-1200x630.png
+---
+image_height: 630
+---
+image_width: 1200
+---
+ogdescription: We're a group of folks who meet bi-weekly to talk through a book about programming or software development. This is a great way to learn about new things in the industry, fill in gaps in your knowledge, and talk with other developers.

content/bookclub/contents.lr

@@ -11,6 +11,22 @@ label = Subtitle
 type = string
 size = large
 
+[fields.image]
+label = Social Media Image
+type = url
+
+[fields.image_width]
+label = Image width
+type = string
+
+[fields.image_height]
+label = Image height
+type = string
+
+[fields.ogdescription]
+label = Social Media Description
+type = string
+
 [fields.body]
 label = Body
 type = markdown

models/page.ini

@@ -44,6 +44,7 @@ <h3 id="logo"><img src="{{ '/static/images/madpy-logo.svg'|url }}" alt="MadPy lo
                 %}><a href="{{ '/'|url }}">About</a></li>
               {% for href, title in [
                 ['/meetups', 'Events'],
+                ['/bookclub', 'Book Club'],
                 ['/sponsorship', 'Sponsorship'],
               ] %}
                 <li{% if this.is_child_of(href) %} class="active"{% endif

templates/layout.html

@@ -1,4 +1,27 @@
 {% extends "layout.html" %}
+{% block meta_image %}
+  {% if this.image is defined and this.image_width is defined and this.image_height is defined %}
+    <meta property="og:image" content="{{ this.image }}"/>
+    <meta property="og:image:width" content="{{ this.image_width }}"/>
+    <meta property="og:image:height" content="{{ this.image_height }}"/>
+  {% else %}
+    {{ super() }}
+  {% endif %}
+{% endblock %}
+{% block meta_title %}
+  {% if this.title is defined %}
+    <meta property="og:title" content="{{ this.title }}"/>
+  {% else %}
+    {{ super() }}
+  {% endif %}
+{% endblock %}
+{% block meta_description %}
+  {% if this.ogdescription is defined %}
+    <meta property="og:description" content="{{ this.ogdescription }}"/>
+  {% else %}
+    {{ super() }}
+  {% endif %}
+{% endblock %}
 {% block title %}{{ this.title }}{% endblock %}
 {% block subtitle %}{{ this.subtitle }}{% endblock %}
 {% block body %}