docs: Numerous improvements to blog - author bio, breadcrumbs etc

docs/assets/styles/_blog.scss

@@ -2,6 +2,10 @@
 
 .posts-list {
     min-height: 50vh;
+    padding: $padding-16 * 1.6;
+    min-width: $body-min-width;
+    max-width: $md-breakpoint;
+    margin: auto;
 
     h2 {
         font-family: $brand-font-face;
@@ -17,22 +21,25 @@
 }
 
 .blog-post {
-    max-width: 800px;
+    max-width: $md-breakpoint;
     margin: auto;
-    padding: 0 6px;
+    padding: $padding-16 * 1.6;
 
     header {
         overflow: hidden;
+        padding-bottom: $padding-16;
         border-bottom: 1px dashed $gray-300;
         h1 {
             font-family: $brand-font-face;
             font-size: 3em;
             font-weight: 400;
             color: $brand-color;
+            margin-bottom: 12px;
         }
-        .date-author {
-            // font-size: 14px;
-            color: $gray-700;
+        @media screen and (max-width: $sm-breakpoint) {
+            h1 {
+                font-size: 2em;
+            }
         }
     }
 
@@ -47,3 +54,61 @@
         }
     }
 }
+
+.date-author {
+    display: flex;
+    align-items: center;
+
+    .avatar {
+        border-radius: 50%;
+        width: 50px;
+        height: 50px;
+    }
+    .details {
+        margin-left: 12px;
+    }
+    .name {
+        color: $gray-600;
+    }
+}
+
+.author-bio {
+    display: flex;
+    margin-top: 50px;
+    padding-top: 50px;
+    border-top: 1px dotted $gray-300;
+    .avatar {
+        border-radius: 50%;
+        width: 100px;
+        height: 100px;
+    }
+    .details {
+        margin-left: 24px;
+    }
+    .written-by {
+        font-size: $font-size-12;
+        text-transform: uppercase;
+        color: $gray-500;
+    }
+    .name {
+        font-family: $brand-font-face;
+        margin: 0 0 12px;
+    }
+    .bio {
+        color: $gray-700;
+        margin-bottom: 12px;
+    }
+    .links {
+        a {
+            margin-right: 12px;
+            opacity: 0.8;
+        }
+        a:hover {
+            opacity: 1;
+        }
+        img {
+            width: 24px;
+            height: 24px;
+        }
+    }
+}

docs/assets/styles/_markdown.scss

@@ -109,10 +109,11 @@ $block-border-radius: 4px;
 
     blockquote {
         margin: 0;
-        padding: $padding-16 $padding-16;
+        padding: $padding-16 $padding-16 * 2;
         position: relative;
-        font-size: 22px;
+        // font-size: 22px;
         color: $gray-700;
+        border-left: 2px solid $gray-300;
 
         :first-child { margin-top: 0; }
         :last-child { margin-bottom: 0; }
@@ -123,7 +124,7 @@ $block-border-radius: 4px;
             font-family: Georgia, 'Times New Roman', Times, serif;
             font-size: 48px;
             top: 0px;
-            left: -6px;
+            left: 10px;
             color: $gray-500;
         }
     }
@@ -140,4 +141,13 @@ $block-border-radius: 4px;
             background-color: $gray-100;
         }
     }
+
+    figure {
+        margin: $padding-16 0;
+        figcaption p {
+            text-align: center;
+            font-size: $font-size-12;
+            margin-top: $padding-4;
+        }
+    }
 }

docs/assets/styles/main.scss

@@ -175,7 +175,7 @@ ul.contents-list {
 
 .book-posts {
     min-width: $body-min-width;
-    max-width: $sm-breakpoint;
+    max-width: $md-breakpoint;
     padding: $padding-16;
 
     article {
@@ -210,15 +210,13 @@ ul.contents-list {
                 margin: 12px 0;
             }
         }
-        .email-link {
-            display: flex;
-            align-items: center;
-            img {
-                width: 24px;
-                height: 24px;
-                margin-right: 6px;
-            }
+
+        img.link-icon {
+            width: 24px;
+            height: 24px;
+            margin-right: 6px;
         }
+
     }
     .copyright {
         font-size: 12px;

docs/data/authors.json

@@ -0,0 +1,15 @@
+{
+  "Michael Bromley": {
+    "avatar": "/authors/michael-bromley.jpg",
+    "bio": "Michael is the creator of Vendure. He lives in Vienna, Austria.",
+    "links": {
+      "twitter": "https://twitter.com/michlbrmly",
+      "github": "https://github.com/michaelbromley"
+    }
+  },
+  "unknown": {
+    "avatar": "/authors/unknown.jpg",
+    "bio": "",
+    "links": {}
+  }
+}

docs/layouts/blog/list.html

@@ -1,5 +1,6 @@
 {{ define "main" }}
 <div class="posts-list">
+    {{ partial "breadcrumbs" . }}
     {{ $paginator := .Paginate (where .Pages "Params.hidden" "ne" true) }}
     {{ range sort .Paginator.Pages }}
     <article class="book-posts mx-auto">

docs/layouts/blog/single.html

@@ -1,14 +1,22 @@
 {{ define "main" }}
-
 <div class="blog-post">
     <header>
+
+        {{ partial "breadcrumbs" . }}
+
         <h1>{{ .Title }}</h1>
         <div class="date-author">
-            <strong>{{ .Date.Format "January 2, 2006" }}</strong> by {{ .Params.author }}
+            {{ $author := index $.Site.Data.authors .Params.author | default $.Site.Data.authors.unknown }}
+            <img alt="Author avatar" class="avatar" src='{{ $author.avatar }}'>
+            <div class="details">
+                <div class="name">{{ .Params.Author }}</div>
+                <div class="date">{{ .Date.Format "January 2, 2006" }}</div>
+            </div>
         </div>
     </header>
     <article class="markdown">
         {{- .Content -}}
     </article>
+    {{ partial "author-bio" . }}
 </div>
 {{ end }}

docs/layouts/partials/author-bio.html

@@ -0,0 +1,17 @@
+<div class="author-bio">
+    {{ $author := index $.Site.Data.authors .Params.author | default $.Site.Data.authors.unknown }}
+    <img alt="Author avatar" class="avatar" src='{{ $author.avatar }}'>
+    <div class="details">
+        <div class="written-by">Written by</div>
+        <h3 class="name">{{ .Params.Author }}</h3>
+        <div class="bio">{{ $author.bio }}</div>
+        <div class="links">
+            {{ if $author.links.twitter }}
+            <a href="{{ $author.links.twitter }}" target="_blank"><img alt="Twitter logo" src="/svg/icon-twitter.svg"></a>
+            {{ end }}
+            {{ if $author.links.github }}
+            <a href="{{ $author.links.github }}" target="_blank"><img alt="GitHub logo" src="/svg/icon-github.svg"></a>
+            {{ end }}
+        </div>
+    </div>
+</div>

docs/layouts/partials/breadcrumbs.html

@@ -1,30 +1,3 @@
-<!--
-<div role="navigation" aria-label="breadcrumbs navigation">
-    {{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
-    {{ $.Scratch.Add "path" .Site.BaseURL }}
-    {{ $.Scratch.Add "currentURL" .URL }}
-    {{ $pageNotFound := (eq (replace $.Site.BaseURL .Site.BaseURL "404.html") .URL) }}
-    <ul class="breadcrumbs">
-        {{ range $index, $element := split $url "/" }}
-        {{ $.Scratch.Add "path" $element }}
-        {{ $.Scratch.Add "path" "/" }}
-        &lt;!&ndash; Check if the current list item is the last one &ndash;&gt;
-        {{ $isLast := eq ($.Scratch.Get "path") $.Permalink }}
-
-        {{ if ne $element "" }}
-        {{ if and (not $isLast) (not $pageNotFound) }}
-        <li><a href='{{ $.Scratch.Get "path" }}'>{{ title ( replace . "-" " ") }}</a> &rsaquo;</li>
-        {{ else if $pageNotFound }}
-        <li>404</li>
-        {{ else }}
-        <li>{{ $.Title }}</li>
-        {{ end }}
-        {{ end }}
-        {{ end }}
-    </ul>
-</div>
--->
-
 <ul class="breadcrumbs">
     {{ template "breadcrumb" dict "currentPage" .Page "id" .UniqueID }}
 </ul>

docs/layouts/partials/footer.html

@@ -3,13 +3,11 @@
         <div class="flex justify-between">
             <div class="links">
                 <ul>
-                    <li><a href="./docs/">Documentation</a></li>
-                    <li><a href="./blog/">Blog</a></li>
-                    <li><a href="https://github.com/vendure-ecommerce/vendure">GitHub</a></li>
-                    <li><a href="https://www.npmjs.com/~vendure">npm</a></li>
-                    <li><a href="https://twitter.com/vendure_io">Twitter</a></li>
-                    <li><a href="https://join.slack.com/t/vendure-ecommerce/shared_invite/enQtNzA1NTcyMDY3NTg0LTMzZGQzNDczOWJiMTU2YjAyNWJlMzdmZGE3ZDY5Y2RjMGYxZWNlYTI4NmU4Y2Q1MDNlYzE4MzQ5ODcyYTdmMGU">Join us on Slack</a></li>
-                    <li><a href="mailto:contact@vendure.io" class="email-link"><img src="{{ "svg/clr-icon-email-light.svg" | relURL }}"> contact@vendure.io</a></li>
+                    <li><a href="https://github.com/vendure-ecommerce/vendure"><img class="link-icon" alt="GitHub logo" src="/svg/icon-github-inverse.svg"> GitHub</a></li>
+                    <li><a href="https://www.npmjs.com/~vendure"><img class="link-icon" alt="npm logo" src="/svg/icon-npm.svg"> npm</a></li>
+                    <li><a href="https://twitter.com/vendure_io"><img class="link-icon" alt="Twitter logo" src="/svg/icon-twitter.svg"> Twitter</a></li>
+                    <li><a href="https://join.slack.com/t/vendure-ecommerce/shared_invite/enQtNzA1NTcyMDY3NTg0LTMzZGQzNDczOWJiMTU2YjAyNWJlMzdmZGE3ZDY5Y2RjMGYxZWNlYTI4NmU4Y2Q1MDNlYzE4MzQ5ODcyYTdmMGU"><img class="link-icon" alt="Slack logo" src="/svg/icon-slack.svg"> Join us on Slack</a></li>
+                    <li><a href="mailto:contact@vendure.io" class="email-link"><img src="/svg/clr-icon-email-light.svg" class="link-icon" alt="email icon"> contact@vendure.io</a></li>
                 </ul>
             </div>
             <div class="footer-logo">

docs/static/svg/icon-github-inverse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="32" height="32" fill="currentColor"><g fill="#eee"><path fill-rule="evenodd" clip-rule="evenodd" d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"/><path d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm-.743-.55M28.93 94.535c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zm-.575-.618M31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm0 0M34.573 101.373c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm0 0M39.073 103.324c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm0 0M44.016 103.685c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm0 0M48.614 102.903c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"/></g></svg>

docs/static/svg/icon-github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="32" height="32" fill="currentColor"><g fill="#181616"><path fill-rule="evenodd" clip-rule="evenodd" d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"/><path d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm-.743-.55M28.93 94.535c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zm-.575-.618M31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm0 0M34.573 101.373c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm0 0M39.073 103.324c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm0 0M44.016 103.685c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm0 0M48.614 102.903c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"/></g></svg>

docs/static/svg/icon-npm.svg

@@ -0,0 +1 @@
+<svg id="NPM" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="32" height="32" fill="currentColor"><defs><style>.cls-npm-original-wordmark-1{fill:#cb3837;}</style></defs><title>Artboard 5</title><path id="original-wordmark" class="cls-npm-original-wordmark-1" d="M2,38.5H126V82.21H64V89.5H36.44V82.21H2ZM8.89,74.93H22.67V53.07h6.89V74.93h6.89V45.79H8.89ZM43.33,45.79V82.21H57.11V74.93H70.89V45.79Zm13.78,7.29H64V67.64H57.11Zm20.67-7.29V74.93H91.56V53.07h6.89V74.93h6.89V53.07h6.89V74.93h6.89V45.79Z"/></svg>

docs/static/svg/icon-slack.svg

@@ -0,0 +1 @@
+<svg id="slack" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="32" height="32" fill="currentColor"><defs><style>.cls-slack-original-1{fill:#80cade;}.cls-slack-original-2{fill:#db015c;}.cls-slack-original-3{fill:#e8a900;}.cls-slack-original-4{fill:#41b088;}.cls-slack-original-5{fill:#ca161a;}.cls-slack-original-6{fill:#3b1d37;}.cls-slack-original-7{fill:#69852c;}.cls-slack-original-8{fill:#118f79;}</style></defs><title>Artboard 9</title><g id="original"><path class="cls-slack-original-1" d="M12.81,67.6a10.2,10.2,0,0,1-9.94-7c-.06-.17-.1-.33-.15-.49A10.69,10.69,0,0,1,9.64,47.07L97,17.8a11.82,11.82,0,0,1,3.19-.47,10.47,10.47,0,0,1,10.21,7.14l.13.42c1.63,5.71-2.43,10.81-7.29,12.44L16.36,67a11.3,11.3,0,0,1-3.55.6Z"/><path class="cls-slack-original-2" d="M27.37,110.55a10.19,10.19,0,0,1-10-6.89c-.05-.16-.1-.32-.15-.49A10.76,10.76,0,0,1,24.16,90L111.5,60.46a11.24,11.24,0,0,1,3.47-.58A10.55,10.55,0,0,1,125.15,67l.13.44A11.05,11.05,0,0,1,124,76.28c-1.25,1.95-5.19,3.66-5.19,3.66l-87.68,30a12,12,0,0,1-3.71.63Z"/><path class="cls-slack-original-3" d="M100.08,110.74a10.72,10.72,0,0,1-10.27-7.31L60.66,16.84l-.15-.49A10.74,10.74,0,0,1,81,10l29.15,86.58.08.28a10.73,10.73,0,0,1-10.17,13.89Z"/><path class="cls-slack-original-4" d="M56.75,125.33A10.73,10.73,0,0,1,46.48,118L17.33,31.43l-.15-.48a10.72,10.72,0,0,1,6.9-13.12,10.89,10.89,0,0,1,3.34-.56,10.72,10.72,0,0,1,10.27,7.31l29.14,86.59c.05.15.1.32.15.48a10.73,10.73,0,0,1-10.23,13.68h0Z"/><path class="cls-slack-original-5" d="M85.71,91.24,106,84.29,99.39,64.56,79,71.44Z"/><path class="cls-slack-original-6" d="M42.45,106l20.32-6.95L56.08,79.2,35.73,86.08Z"/><path class="cls-slack-original-7" d="M71.24,48.26l20.33-6.94L85,21.82,64.64,28.64Z"/><path class="cls-slack-original-8" d="M28,63,48.3,56.09,41.65,36.34,21.29,43.16,28,63Z"/></g></svg>

docs/static/svg/icon-twitter.svg

@@ -0,0 +1 @@
+<svg id="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.24 102.59" width="32" height="32" fill="currentColor"><defs><style>.cls-twitter-original-1{fill:#1da1f2;}</style></defs><title>twitter-original</title><path id="original" class="cls-twitter-original-1" d="M40.58,115.3c47.64,0,73.69-39.47,73.69-73.69,0-1.12,0-2.24-.07-3.35a52.7,52.7,0,0,0,12.92-13.41,51.7,51.7,0,0,1-14.87,4.08A26,26,0,0,0,123.63,14.6a51.9,51.9,0,0,1-16.45,6.29A25.92,25.92,0,0,0,63.05,44.51,73.53,73.53,0,0,1,9.67,17.45a25.92,25.92,0,0,0,8,34.58A25.71,25.71,0,0,1,6,48.78c0,.11,0,.22,0,.33A25.91,25.91,0,0,0,26.73,74.5a25.86,25.86,0,0,1-11.7.44,25.93,25.93,0,0,0,24.2,18A52,52,0,0,1,7.06,104a52.72,52.72,0,0,1-6.18-.36,73.32,73.32,0,0,0,39.7,11.63" transform="translate(-0.88 -12.7)"/></svg>