Merge pull request #1 from lukencode/upgrade-1

0.5.0 update
lukencode · Feb 7, 2021 · d351e95 · d351e95
2 parents 51cd386 + a7938b6
commit d351e95
Show file tree

Hide file tree

Showing 24 changed files with 524 additions and 379 deletions.
diff --git a/README.md b/README.md
@@ -13,8 +13,11 @@ The homepage will render any posts with the internal tag "#pinned" as cards. Tip
 ![Ghost pinned](screenshots/ghost-pinned.png)
 
 ### Membership support
-GhostSolo currently supports free membership. You must **upload the routes.yaml fille"** which will be used when people click the subscribe button in the header.
-The paid membership functionality in Ghost *should* be compatible but has not yet been tested in production.
+
+GhostSolo recommends you use the [Portal](https://ghost.org/changelog/portal/) functionality to handle membership. If membership is enabled the home page and footer will render a sign up form.
+
+You can also update routes.yaml and use the (legacy) ghost solo membership pages.GhostSolo currently supports free membership. You must **upload the routes.yaml fille"** which will be used when people click the subscribe button in the header.
+
 
 ### Menus
 The standard ghost navigation will render in the nav bar at the top of the page. Secondary navigation will render in the footer.
@@ -25,23 +28,43 @@ The site twitter and facebook (soon) links will render as buttons in the homepag
 ### Author profile
 The author profile bio and twitter will render at the end of each post.
 
+### Inline post content tag template
+GhostSolo supports an inline content version of the tag template "tag-inline-content". It will enabled a view where posts for a tag content displays in the list. I use it for short snippets on luklowrey.com but it could be useful for changelogs an other things. To enabled it you need to change th routes.yaml of your blog (see below).
+
+### Table of contents post template
+To enabled a table of contents us the Table of Contents template when writing your post. The contents will update based on headings.
+
 # Upload routes.yaml
 To enable the membership functionality you will need to upload the routes.yaml file located in GhostSolo.zip to your Ghost site (Settings > Labs > Routes).
 
 ```yaml
-routes:
-  /signup/: members\signup
-  /signin/: members\signin
-  /account/: members\account
-
 collections:
   /:
     permalink: /{slug}/
     template: index
 
+#example of using the 'tag-inline-content' template for posts tagged "note" but none other
+  /:
+    permalink: /{slug}/
+    template: index
+    filter: 'tag:-note'    
+  /notes/:
+    permalink: /{slug}/
+    template: tag-inline-content
+    filter: 'tag:note'  
+    data: tag.note
+
 taxonomies:
   tag: /tag/{slug}/
   author: /author/{slug}/
+
+
+#not recommended, use ghost Portal functionality
+routes:
+  /signup/: members\signup
+  /signin/: members\signin
+  /account/: members\account
+
 ```
 
 # Customise

diff --git a/assets/built/theme.css b/assets/built/theme.css
diff --git a/assets/built/theme.css.map b/assets/built/theme.css.map
diff --git a/assets/css/content.css b/assets/css/content.css
@@ -161,11 +161,16 @@ Images
     background-color: var(--alternate-background-colour);
     color: var(--text-colour);
     border-radius: 5px;
-    grid-column: wide-start/wide-end;
     width: 100%;
     margin: 6vmin 0 0;
 }
 
+@media (min-width: 1440px) {
+    .gh-canvas>pre {
+        grid-column: wide-start/wide-end;
+    }
+}
+
 .kg-embed-card {
     display: flex;
     flex-direction: column;
@@ -233,7 +238,7 @@ Images
     flex-wrap: wrap;
     flex-direction: row-reverse;
     color: currentColor;
-    background: rgba(255, 255, 255, 0.6);
+    background-color: var(--alternate-background-colour)!important;
     font-family: var(--bs-font-sans-serif);
     text-decoration: none;
     border-radius: 5px;
@@ -250,20 +255,18 @@ Images
 
 .kg-bookmark-title {
     font-weight: 600;
-    font-size: 1.5rem;
-    line-height: 1.3em;
+    font-size: 1.3rem;
+    line-height: 1.1em;
 }
 
 .kg-bookmark-description {
-    display: -webkit-box;
-    max-height: 45px;
+    display: flex !important;
     margin: 0.5em 0 0 0;
-    font-size: 1.4rem;
-    line-height: 1.55em;
+    font-size: 0.95rem;
     overflow: hidden;
     opacity: 0.8;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
+    align-items: stretch;
+    overflow: auto;
 }
 
 .kg-bookmark-metadata {
@@ -274,8 +277,8 @@ Images
     display: flex;
     align-items: center;
     font-weight: 500;
-    font-size: 1.3rem;
-    line-height: 1.3em;
+    font-size: 1.1rem;
+    line-height: 1.1em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/assets/css/theme.scss b/assets/css/theme.scss
@@ -92,6 +92,15 @@ a.btn-secondary-inverted:hover {
     filter: brightness(100%);
 }
 
+#search {
+    -webkit-filter: brightness(80%);
+    filter: brightness(80%);
+    &:hover {
+        -webkit-filter: brightness(100%);
+        filter: brightness(100%);
+    }
+}
+
 .text-truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -304,6 +313,25 @@ a.card.no-image:hover {
     display: none !important;
 }
 
+.toc {
+    grid-column: 5;
+    top: 80px;
+    height: 0;
+    overflow: visible !important;
+    .is-active-link {
+        color: var(--text-color)!important;
+        &::before {
+            background-color: var(--link-color) !important;
+        }
+    }
+    .toc-link {
+        color: var(--text-color-light);
+        &::before {
+            background-color: var(--alternate-background-colour);
+        }
+    }
+}
+
 
 /*  Members */
 

diff --git a/author.hbs b/author.hbs
@@ -9,11 +9,11 @@
                 <div class="d-flex flex-wrap">
                     {{#if profile_image}}
                     <img loading="lazy" src="{{img_url profile_image  size="l"}}" alt="{{name}}"
-                        class="avatar avatar-xl mr-3 d-none d-lg-block" />
+                        class="avatar avatar-xl me-3 d-none d-lg-block" />
                     {{/if}}
 
                     <div>
-                        <h1 class="font-weight-bold">{{name}}</h1>
+                        <h1 class="fw-bold">{{name}}</h1>
                         {{#if bio}}
                         <p class="lead mb-0">
                             {{bio}}
@@ -42,12 +42,12 @@
     {{#foreach posts}}
     <article class="post">
         <div class="d-flex align-items-baseline mb-2 pb-1">
-            <div class="text-secondary text-right mr-2 col-auto d-md-block d-none" style="width:120px">
+            <div class="text-secondary text-right me-2 col-auto d-md-block d-none" style="width:120px">
                 {{#if featured}}⭐{{/if}} {{date format="MMM D, YYYY"}}</div>
 
             <div class="col">
                 <a href="{{url}}" class="d-flex">
-                    <h2 class="h5 font-weight-normal mb-0">
+                    <h2 class="h5 fw-normal mb-0">
                         {{title}}
                     </h2>
                 </a>

diff --git a/custom-table-of-contents.hbs b/custom-table-of-contents.hbs
@@ -0,0 +1,110 @@
+{{!< default}}
+
+{{#post}}
+
+<article class="gh-article {{post_class}} site-content">
+
+    <header class="gh-header gh-canvas">
+        {{#primary_tag}}
+        <a href="{{url}}" class="d-inline-block py-1 mt-2 small fw-bold text-uppercase">{{name}}</a>
+        {{/primary_tag}}
+
+        <h1 class="display-5 post-title">{{title}}</h1>
+
+        {{#if custom_excerpt}}
+        <p class="lead mb-2 mt-2 text-secondary">{{custom_excerpt}}</p>
+        {{/if}}
+
+        <hr />
+
+        <div class="author d-flex">
+            {{#primary_author}}
+            <img loading="lazy" src="{{img_url profile_image  size="m"}}" alt="{{name}}" class="avatar me-2" />
+            <div>
+                <a href="{{url}}" class="d-block">{{name}}</a>
+            {{/primary_author}}
+
+                <div class="small text-secondary">
+                    <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time>
+                    <span class="d-inline-block"> - {{reading_time}}</span>  
+                </div> 
+            </div>
+        </div>
+
+        {{#if feature_image}}
+        <img class="gh-feature-image rounded" srcset="{{img_url feature_image size="s"}} 300w,
+                        {{img_url feature_image size="m"}} 600w,
+                        {{img_url feature_image size="l"}} 1000w,
+                        {{img_url feature_image size="xl"}} 2000w" sizes="(max-width: 1000px) 1000px, 2000px"
+            loading="lazy" src="{{img_url feature_image size="xl"}}" alt="{{title}}" />
+        {{/if}}
+
+    </header>
+
+    <div class="gh-content gh-canvas mt-5">
+        <div class="toc ps-lg-4 sticky-lg-top d-none d-xl-block"></div>
+        {{content}}
+    </div>
+
+    <footer class="gh-footer gh-canvas">
+
+
+        <div class=" mt-4 small d-flex flex-wrap">
+            <a class="d-flex align-items-center me-3 fw-bold"
+                href="https://twitter.com/share?text={{encode title}}&url={{encode url absolute='true'}}">
+                {{> "icons/twitter"}}
+                <span class="ps-1">Share</span>
+            </a>
+
+            <span class="d-flex align-items-center text-secondary">
+                <span class="pe-1">{{> "icons/tag"}}</span>
+                {{tags}}
+            </a>
+
+        </div>
+
+        {{#primary_author}}
+        <div class="author d-flex bg-alternative rounded p-4 mt-4">
+            <img loading="lazy" src="{{img_url profile_image  size="l"}}" alt="{{name}}"
+                class="avatar avatar-lg me-3" />
+            <div>
+                <a href="{{url}}" class="d-block fw-bold">{{name}}</a>
+
+                {{#if bio}}
+                <small class="mt-1">{{bio}}</small>
+                {{/if}}
+
+                {{#if twitter}}
+                <div class="mt-2">
+                    <a href="https://twitter.com/{{twitter}}?ref_src=twsrc%5Etfw" class="twitter-follow-button"
+                        data-size="large" data-dnt="true" data-show-count="false">Follow @{{twitter}}</a>
+                    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+                </div>
+                {{/if}}
+
+            </div>
+        </div>
+        {{/primary_author}}
+
+        <section id="comments">
+        </section>
+
+    </footer>
+
+</article>
+
+{{/post}}
+
+
+<!-- table of contents -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.10.0/tocbot.css" crossorigin="anonymous" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.10.0/tocbot.min.js" crossorigin="anonymous"></script>
+
+<script>
+    tocbot.init({
+        tocSelector: '.toc',
+        contentSelector: '.gh-content',
+        hasInnerContainers: true,
+        scrollSmoothDuration: 210
+    });
+</script>