Merge pull request #55 from royalfig/feature/headings

Feature/headings

helpers/inline-css.js

@@ -20,11 +20,13 @@ async function injectCss() {
     .replace('{{!-- critical-css --}}', `<style>${css.toString()}</style>`);
   await writeFile('./default.hbs', inlinedCss.toString());
 
-  unlink(path.join(process.cwd(), '/assets/built/critical.css'), (err) => {
-    if (err) {
-      console.log(err);
-    }
-  });
+  unlink(path.join(process.cwd(), '/assets/built/critical.css'))
+    .then(() => console.log('deleted'))
+    .catch((err) => console.log(err));
+
+  unlink(path.join(process.cwd(), '/assets/built/critical.css.map'))
+    .then(() => console.log('deleted'))
+    .catch((err) => console.log(err));
 
   console.log('🥳 Inlined critical css');
 }

home.hbs

@@ -43,7 +43,7 @@ into the {body} of the default.hbs template --}}
                 <div class="sm-main__inner-container">
                     <h2 class="sm-main__header">Featured</h2>
                         <section class="sm-grid-container">
-                            {{#foreach featured}}
+                            {{#foreach featured limit="10"}}
                                 {{> "card"}}
                             {{/foreach}}
                         </section>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "smart",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A customizable Ghost theme",
   "main": "index.js",
   "engines": {

partials/navbar.hbs

@@ -10,8 +10,32 @@
                 {{/foreach}}
             {{else}}
                 {{#post}}
-                    {{!-- TODO Put share menu here?  --}}
-                    {{#link href="#sm-main" class="sm-navbar__new-link"}}{{title}}{{/link}}
+                    <span class="sm-navbar__new-tag--text">Share</span>
+                    <a class="sm-post-share-bar__link--twitter" 
+                    href="https://twitter.com/share?url={{url absolute='true'}}&amp;text={{#if title}}{{title}}{{else}}{{name}}{{/if}}"
+                    aria-label="Share on Twitter" target="_blank" rel="noopener noreferrer">
+                    <svg>
+                        <use href="#twitter"></use>
+                    </svg>
+                </a>
+                <a class="sm-post-share-bar__link--facebook" href="http://www.facebook.com/sharer.php?u={{url absolute='true'}}"
+                    aria-label="Share on Facebook" target="_blank" rel="noopener noreferrer">
+                    <svg>
+                        <use href="#facebook"></use>
+                    </svg>
+                </a>
+                <a class="sm-post-share-bar__link--linkedin" data-tt="Share on LinkedIn"
+                    href="http://www.linkedin.com/shareArticle?mini=true&amp;url={{url absolute='true'}}"
+                    aria-label="Share on LinkedIn" target="_blank" rel="noopener noreferrer">
+                    <svg>
+                        <use href="#linkedin"></use>
+                    </svg>
+                </a>
+                <button class="sm-post-share-bar__link--copy" aria-label="Copy to clipboard">
+                    <svg>
+                        <use href="#copy"></use>
+                    </svg>
+                </button>
                 {{/post}}
             {{/is}}
         </div>

partials/share.hbs

@@ -1,25 +1,26 @@
 <aside class="sm-post-share-bar">
+    <span class="sm-navbar__new-tag--text">Share</span>
     <a class="sm-post-share-bar__link--twitter" 
         href="https://twitter.com/share?url={{url absolute='true'}}&amp;text={{#if title}}{{title}}{{else}}{{name}}{{/if}}"
-        aria-label="Share on Twitter">
+        aria-label="Share on Twitter" target="_blank" rel="noopener noreferrer">
         <svg>
             <use href="#twitter"></use>
         </svg>
     </a>
     <a class="sm-post-share-bar__link--facebook" href="http://www.facebook.com/sharer.php?u={{url absolute='true'}}"
-        aria-label="Share on Facebook">
+        aria-label="Share on Facebook" target="_blank" rel="noopener noreferrer">
         <svg>
             <use href="#facebook"></use>
         </svg>
     </a>
     <a class="sm-post-share-bar__link--linkedin" data-tt="Share on LinkedIn"
         href="http://www.linkedin.com/shareArticle?mini=true&amp;url={{url absolute='true'}}"
-        aria-label="Share on LinkedIn">
+        aria-label="Share on LinkedIn" target="_blank" rel="noopener noreferrer">
         <svg>
             <use href="#linkedin"></use>
         </svg>
     </a>
-    <button class="sm-post-share-bar__link--copy" id="sm-copy-button" aria-label="Copy to clipboard">
+    <button class="sm-post-share-bar__link--copy" aria-label="Copy to clipboard">
         <svg>
             <use href="#copy"></use>
         </svg>

post.hbs

@@ -2,10 +2,6 @@
 {{!-- The tag above means: insert everything in this file
 into the {body} of the default.hbs template --}}
 
-{{! Post Reading Progress }}
-<div class="sm-post-reading-progress"></div>
-{{! Post Reading Progress }}
-
 {{#post}}
 
 {{!-- Post Header  --}}
@@ -177,7 +173,7 @@ into the {body} of the default.hbs template --}}
                 </div>
                 {{/next_post}}
 
-                {{#get "posts" include="tags" limit="2" filter="primary_tag:-{{primary_tag.slug}}+id:-{{id}}"}}
+                {{#get "posts" include="tags" limit="2" filter="id:-{{id}}+primary_tag:-{{primary_tag.slug}}"}}
                 {{#foreach posts}}
                 <div class="sm-related-posts sm-related-posts-3-{{@number}}">
                     {{> "card"}}

src/js/app/focusTrap.js

@@ -17,9 +17,6 @@ const getNonHiddenLastEl = (el) => {
   return penultimateEl;
 };
 
-// Need to run a function that runs when modal opens and sets focus
-// Need to run a different function to handle keypresses
-
 const configureFocusableElements = (containerEl) => {
   const focusableEl = containerEl.querySelectorAll(FOCUSABLE_EL);
   focusableEl.forEach((el) => el.setAttribute('tabindex', '0'));

src/js/app/index.js

@@ -4,7 +4,6 @@ import colorMode from './colorModeToggle';
 import grid from './grid';
 import modalFn from './modal';
 import search from './search';
-import toast from './toast';
 import 'lazysizes';
 
 setTabIndex();
@@ -16,5 +15,3 @@ modalFn();
 if (typeof SEARCH_API !== 'undefined') {
   search();
 }
-
-toast();

src/js/app/setTabIndex.js

@@ -1,9 +1,4 @@
-/*
- * Remove menu nav links from the DOM
- */
-
 export default function removeNavLinks() {
   const menuNavLinks = document.querySelectorAll('#menu a');
-
   menuNavLinks.forEach((el) => el.setAttribute('tabindex', '-1'));
 }

src/js/post/copy.js

@@ -1,18 +1,20 @@
-//-------------------------------------------
-// Copy Function
-//-------------------------------------------
-const copyButton = document.getElementById('sm-copy-button');
+const toast = require('./toast');
+
+const copyButtons = document.querySelectorAll('.sm-post-share-bar__link--copy');
 
 export default function copyInit() {
-  if (copyButton) {
-    copyButton.addEventListener('click', () => {
-      const url = window.location.href;
-      const temp = document.createElement('input');
-      document.body.appendChild(temp);
-      temp.value = url;
-      temp.select();
-      document.execCommand('copy');
-      document.body.removeChild(temp);
+  if (copyButtons.length) {
+    copyButtons.forEach((el) => {
+      el.addEventListener('click', () => {
+        const url = window.location.href;
+        const temp = document.createElement('input');
+        document.body.appendChild(temp);
+        temp.value = url;
+        temp.select();
+        document.execCommand('copy');
+        document.body.removeChild(temp);
+        toast('Link copied to clipboard');
+      });
     });
   }
 }

src/js/post/index.js

@@ -2,12 +2,10 @@ import '../../scss/post.scss';
 
 import initMediumZoom from './medium_zoom';
 import fluidvids from './fluidvids';
-import shareProgressInit from './progress_and_share';
 import copyInit from './copy';
 import responsiveTableInit from './responsiveTables';
 
 initMediumZoom();
 fluidvids();
-shareProgressInit();
 copyInit();
 responsiveTableInit();

src/js/app/toast.js → src/js/post/toast.js

@@ -1,5 +1,3 @@
-const copyBtn = document.getElementById('sm-copy-button');
-
 const destroyToast = (el) => {
   el.classList.add('sm-toast__slide-out');
   setTimeout(() => {
@@ -14,7 +12,7 @@ const checkDomForToast = () => {
   }
 };
 
-const createToast = (value) => {
+module.exports = function createToast(value) {
   checkDomForToast();
   const container = document.createElement('div');
   container.classList.add('sm-toast');
@@ -27,12 +25,3 @@ const createToast = (value) => {
   document.body.append(container);
   setTimeout(destroyToast.bind(null, container), 3000);
 };
-
-export default function toast() {
-  if (copyBtn) {
-    copyBtn.addEventListener(
-      'click',
-      createToast.bind(null, 'Link copied to clipboard')
-    );
-  }
-}

src/scss/abstracts/_variables.scss

@@ -51,7 +51,7 @@ $mono: 'JetBrains Mono', 'Roboto Mono', 'IBM Plex Mono', 'Cascadia Code',
 //-------------------------------------------
 
 // Breakpoints
-$tablet: 640px;
+$tablet: 600px;
 $laptop: 1024px;
 $desktop: 1280px;
 

src/scss/components/_share.scss

@@ -19,10 +19,11 @@
   @include mixins.color-map(color, text2);
   text-align: center;
   @include mixins.color-map(background-color, surface3);
-  border-bottom: 3px solid var(--text4);
-  opacity: 0;
-  transition: transform 0.2s ease-in, opacity 0.2s;
-  transform: translate3d(0, 100%, 0);
+  border-bottom: 3px solid var(--surface4);
+
+  @media (min-width: variables.$laptop) {
+    display: none;
+  }
 
   &__link {
     width: 2.5rem;
@@ -37,6 +38,12 @@
       @include mixins.color-map(stroke, text2);
       @include mixins.transition(stroke);
     }
+
+    @media (min-width: variables.$laptop) {
+      width: 1.8rem;
+      height: 1.8rem;
+      padding: 0.36rem;
+    }
   }
 
   &__link--twitter {
@@ -88,15 +95,4 @@
       }
     }
   }
-
-  @include mixins.respond-above(variables.$laptop) {
-    top: 50%;
-    bottom: initial;
-    flex-direction: column;
-    width: initial;
-    border-bottom: none;
-    border-top-right-radius: variables.$radius;
-    border-bottom-right-radius: variables.$radius;
-    transform: translate3d(-100%, -50%, 0);
-  }
 }

src/scss/layout/_navbar.scss

@@ -54,6 +54,12 @@
     border-radius: variables.$radius;
     @include mixins.color-map(color, textInverse);
     @include mixins.color-map(background-color, secondary);
+
+    &--text {
+      @extend .sm-navbar__new-tag;
+      color: var(--text2);
+      background: none;
+    }
   }
 
   &__new-link {

src/scss/pages/_post.scss

@@ -1,21 +1,6 @@
 @use '../abstracts/variables';
 @use '../abstracts/mixins';
 @use '../components/link';
-//-------------------------------------------
-// Post Reading Progress Bar
-//-------------------------------------------
-.sm-post-reading-progress {
-  position: fixed;
-  top: 0;
-  z-index: 6;
-  width: 0;
-  max-width: 100%;
-  height: 3px;
-  @include mixins.color-map(background-color, text4);
-  border-top-right-radius: variables.$radius;
-  border-bottom-right-radius: variables.$radius;
-  transition: all 0.1s ease;
-}
 
 //-------------------------------------------
 // Post Styles