feature/style-tweaks

.eleventy.js

@@ -1,39 +1,54 @@
-const CleanCSS = require("clean-css");
+const CleanCSS = require('clean-css')
+const { getMetadata } = require('page-metadata-parser')
+const domino = require('domino')
+const fetch = require('node-fetch')
 
 module.exports = function(eleventyConfig) {
   // css minifier
-  eleventyConfig.addFilter("cssmin", function(code) {
-    return new CleanCSS({}).minify(code).styles;
-  });
+  eleventyConfig.addFilter('cssmin', function(code) {
+    return new CleanCSS({}).minify(code).styles
+  })
 
   // date prettier
-  eleventyConfig.addFilter("date", function(date) {
-    const parsedDate = new Date(date);
-    return parsedDate.toDateString();
-  });
+  eleventyConfig.addFilter('date', function(date) {
+    const parsedDate = new Date(date)
+    return parsedDate.toDateString()
+  })
 
   // dump dump
-  eleventyConfig.addFilter("logDump", function(data) {
-    console.log(data);
-  });
+  eleventyConfig.addFilter('logDump', function(data) {
+    console.log(data)
+  })
 
   // markdown parser
-  const markdownIt = require("markdown-it");
-  const markdownItPrism = require("markdown-it-prism");
+  const markdownIt = require('markdown-it')
+  const markdownItPrism = require('markdown-it-prism')
+  const customBlock = require('markdown-it-custom-block')
   const options = {
-    html: true
-  };
-  let markdownLib = markdownIt(options).use(markdownItPrism);
-  eleventyConfig.setLibrary("md", markdownLib);
+    html: true,
+    linkify: true,
+  }
+  let markdownLib = markdownIt(options).use(markdownItPrism)
+  eleventyConfig.setLibrary('md', markdownLib)
+
+  // async metadata parser
+  eleventyConfig.addNunjucksAsyncShortcode('metablock', async function(url) {
+    const response = await fetch(url)
+    const html = await response.text()
+    const doc = domino.createWindow(html).document
+    const metadata = getMetadata(doc, url)
+    return `<div class="metadata-block"><a href="${url}" alt="${metadata.title}" class="metadata-block__card" target="_blank" rel="noreferrer"><img src="${metadata.image}" alt="${metadata.title}"><div class="metadata-block__card__info"><h4>${metadata.title}</h4><p>${metadata.description}</p></div></a></div>`
+  })
 
   // config object
   return {
+    markdownTemplateEngine: 'njk',
     dir: {
-      input: "./src",
-      output: "./dist",
-      data: "./_data",
-      includes: "./_includes",
-      layouts: "./_layouts"
-    }
-  };
-};
+      input: './src',
+      output: './dist',
+      data: './_data',
+      includes: './_includes',
+      layouts: './_layouts',
+    },
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "heapsgooddev-site-v2",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -29,7 +29,8 @@
   },
   "homepage": "https://github.com/heapsgooddev/heapsgooddev-site-v2#readme",
   "dependencies": {
-    "background-image-fade-in": "^0.4.4"
+    "background-image-fade-in": "^0.4.4",
+    "node-fetch": "^2.6.0"
   },
   "devDependencies": {
     "@11ty/eleventy": "^0.10.0",
@@ -52,14 +53,17 @@
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.1",
     "cz-conventional-changelog": "^2.1.0",
+    "domino": "^2.1.4",
     "file-loader": "^2.0.0",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^4.2.3",
     "image-webpack-loader": "^4.5.0",
     "lint-staged": "^10.0.7",
     "markdown-it": "^10.0.0",
+    "markdown-it-custom-block": "^0.1.1",
     "markdown-it-prism": "^2.0.3",
     "mini-css-extract-plugin": "^0.4.4",
+    "page-metadata-parser": "^1.1.4",
     "path": "^0.12.7",
     "postcss-custom-properties": "^8.0.9",
     "postcss-loader": "^3.0.0",

src/_data/attributiondata.json

@@ -0,0 +1,11 @@
+{
+  "flaticon": {
+    "link": "https://www.flaticon.com",
+    "authors": [
+      {
+        "name": "Eucalyp",
+        "link": "https://www.flaticon.com/authors/eucalyp"
+      }
+    ]
+  }
+}

src/_data/authorsdata.json

@@ -6,18 +6,18 @@
     "linkedin": "",
     "website": ""
   },
+  "heapsgood": {
+    "firstName": "Heaps Good",
+    "lastName": "Dev",
+    "twitter": "heapsgooddev",
+    "linkedin": "",
+    "website": ""
+  },
   "scottcabot": {
     "firstName": "Scott",
     "lastName": "Cabot",
     "twitter": "iamscottcab",
     "linkedin": "",
     "website": "https://scott.cab"
-  },
-  "hgd": {
-    "firstName": "Heaps",
-    "lastName": "Good Dev",
-    "twitter": "heapsgooddev",
-    "linkedin": "",
-    "website": ""
   }
 }

src/_data/tagsdata.json

@@ -0,0 +1,3 @@
+{
+  "systemTags": ["post", "meta-post"]
+}

src/_includes/_author.njk

@@ -3,15 +3,15 @@
     <section class="author">
         <div class="author__logo__profile-pic">
             <div role="presentation" class="author__logo__profile-pic__img-preview"></div>
-            <div class="img--lazy-load" role="img" aria-label="{{ author.firstName }} profile" data-src="/author-images/{{ authorId }}.png"></div>
+            <div class="img--lazy-load" role="img" aria-label="{{ author.firstName }} profile" data-src="/author-images/{{ authorId }}.jpg"></div>
         </div>
         <div class="author__details">
-            <h4>{{ author.firstName }} {{ author.lastName }}</h4>
+            <h4 class="author__details__name">{{ author.firstName }} {{ author.lastName }}</h4>
             {% if author.twitter %}
                 <a
                     aria-label="twitter link"
                     rel="noopener"
-                    class="author__details__link external-icon--exempt"
+                    class="author__details__link"
                     href="https://twitter.com/{{ author.twitter }}"
                     target="_blank"
                 >@{{ author.twitter }}</a>

src/_includes/_card.njk

@@ -14,7 +14,7 @@
             <span class="card__meta">{{ publishDate | date }}</span>
             <ul class="card__meta">
                 {% for tag in displayTags %} 
-                    {% if tag != 'post' %}
+                    {% if tag != 'post' and tag != 'meta-post' %}
                     <li>{{ tag | trim }}</li>
                     {% endif %} 
                 {% endfor %}

src/_includes/_footer.html

@@ -22,5 +22,32 @@ <h4>heapsgooddev <span class="footer__details__version"> v{{ pkg.version }}</spa
         {% include 'icons/_redbubble.html' %}
       </a>
     </div>
+    <div class="footer__profile-legal">
+      <p>
+        <a aria-label="code of conduct link" href="/conduct">
+          Code of Conduct
+        </a>
+      </p>
+      <p>
+        <a aria-label="contact link" href="mailto:team@heapsgood.dev">
+          team@heapsgood.dev
+        </a>
+      </p>
+      <p>
+        Made with ☕️, from adelaide.
+      </p>
+      <br/>
+      <p>
+        Icons made by 
+        {% for iconAuthor in attributiondata.flaticon.authors | list %}
+          <a aria-label="freepik" href="{{ iconAuthor.link }}" rel="noopener" target="_blank">{{ iconAuthor.name }}</a> ,
+        {% endfor %}
+        from <a aria-label="freepik" href="{{ attributiondata.flaticon.link }}" rel="noopener" target="_blank">freepik.com</a>
+      </p>
+      <br/>
+      <p>
+        © 2020
+      </p>
+    </div>
   </div>
 </footer>

src/_includes/_header.html

@@ -3,13 +3,13 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <meta name="Description"
-    content="{{ description if description else "official landing page for heaps good dev - community of developers & tech peeps in adelaide" }}" />
+    content="{{ description if description else "official site for heaps good dev - community of developers & tech peeps in adelaide" }}" />
   <meta name="theme-color" content="#000000" />
   <meta property="og:title" content="{{ title if title else "heapsgood.dev" }}">
   <meta property="og:description"
-    content="{{ description if description else "official landing page for heaps good dev - community of developers & tech peeps in adelaide" }}">
+    content="{{ description if description else "official site for heaps good dev - community of developers & tech peeps in adelaide" }}">
   <meta property="og:image"
-    content="https://heapsgood.dev/{{ base_route if (base_route) and (base_route != 'home') }}{{ "-images/" if (base_route) and (base_route != 'home') }}{{ slug if slug else "heapsgooddev-social" }}.png">
+    content="https://heapsgood.dev/{{ base_route if (base_route) and (base_route != 'home') }}{{ "-images/" if (base_route) and (base_route != 'home') }}{{ slug if slug else "heapsgooddev-social" }}.jpg">
   <meta property="og:url"
     content="https://heapsgood.dev/{{ base_route if (base_route) and (base_route != 'home') }}{{ "/" if (base_route) and (base_route != 'home') }}{{ slug if slug }}{{ "/" if slug }}index.htm">
   <meta name="twitter:card" content="summary_large_image">
@@ -25,5 +25,6 @@
       src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"
     ></script>
   <![endif]-->
-  <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500|Fjalla+One&display=swap" rel="stylesheet" />
+  <link rel="preload" href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500|Fjalla+One&display=swap"  as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500|Fjalla+One&display=swap" ></noscript>
 </head>

src/_includes/_nav.html

@@ -15,17 +15,12 @@
         <li class="navbar__main-nav__link__outer">
           <a class="navbar__main-nav__link {{"active" if (base_route == "blog")}}" href="/blog">blog</a>
         </li>
-        <li class="navbar__main-nav__link__outer">
-          <a class="navbar__main-nav__link {{"active" if (base_route == "conduct")}}"
-            href="/conduct">conduct</a>
-        </li>
         <div class="navbar__main-nav__mobile-menu--shadow navbar--shadow"></div>
       </ul>
     </div>
     <div class="navbar__logo">
       <a class="navbar__logo__profile-pic" href="/" aria-label="home">
-        <div role="presentation" class="navbar__logo__profile-pic__img-preview"></div>
-        <div class="img--lazy-load" role="img" aria-label="heapsgood logo" data-src="/heapsgooddev-profile.jpg"></div>
+        {% include 'icons/_heapsgood.html' %}
       </a>
       <a aria-label="twitter link" rel="noopener" class="navbar__logo__twitter-link external-icon--exempt"
         href="https://twitter.com/heapsgooddev" target="_blank">

src/_includes/icons/_heapsgood.html

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 81" fill="none">
+    <g clip-path="url(#clip0)">
+        <path
+            d="M125.126 4.63967H136.365C138.064 4.63967 139.819 4.69538 141.629 4.80679C143.467 4.89035 145.25 5.18281 146.977 5.68417C148.732 6.18554 150.375 6.96543 151.907 8.02386C153.467 9.05443 154.832 10.5167 156.001 12.4108C157.171 14.2769 158.09 16.6445 158.759 19.5134C159.455 22.3544 159.803 25.8361 159.803 29.9584V50.6813C159.803 54.8036 159.455 58.2992 158.759 61.1681C158.09 64.037 157.171 66.4045 156.001 68.2707C154.832 70.1369 153.467 71.5992 151.907 72.6576C150.375 73.6882 148.732 74.4541 146.977 74.9555C145.25 75.4569 143.467 75.7632 141.629 75.8747C139.819 75.9582 138.064 76 136.365 76H125.126V4.63967ZM138.705 68.4378C140.654 68.4378 142.256 68.1871 143.509 67.6858C144.79 67.1844 145.793 66.307 146.517 65.0536C147.269 63.7724 147.785 62.0455 148.063 59.8729C148.342 57.6725 148.481 54.9011 148.481 51.5587V29.4152C148.481 26.0728 148.342 23.3154 148.063 21.1428C147.785 18.9424 147.269 17.2155 146.517 15.9621C145.793 14.6808 144.79 13.7895 143.509 13.2881C142.256 12.7868 140.654 12.5361 138.705 12.5361H135.947V68.4378H138.705Z"
+            fill="currentColor" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M118.588 43.7938C118.588 47.5459 115.546 50.5876 111.794 50.5876C108.042 50.5876 105 47.5459 105 43.7938C105 40.0417 108.042 37 111.794 37C115.546 37 118.588 40.0417 118.588 43.7938Z"
+            fill="#44A4EC" />
+        <path
+            d="M79.8326 76.6685C78.997 76.6685 78.0221 76.571 76.908 76.376C75.7938 76.2089 74.6379 75.8329 73.4402 75.248C72.2704 74.663 71.1145 73.8414 69.9725 72.7829C68.8305 71.6967 67.7999 70.2761 66.8808 68.5214C65.9894 66.7388 65.2653 64.5662 64.7082 62.0037C64.1511 59.4133 63.8726 56.3355 63.8726 52.7703V27.4934C63.8726 23.9003 64.1651 20.8364 64.75 18.3017C65.3349 15.7392 66.1148 13.5945 67.0897 11.8676C68.0645 10.1129 69.1787 8.72019 70.4321 7.68962C71.7133 6.65904 73.0363 5.87915 74.4012 5.34993C75.766 4.79287 77.1169 4.43077 78.4538 4.26365C79.7908 4.09653 81.0303 4.01297 82.1723 4.01297C85.069 4.01297 87.5062 4.41685 89.4838 5.22459C91.4892 6.00449 93.1047 7.09077 94.3302 8.48344C95.5836 9.84825 96.475 11.4498 97.0042 13.2881C97.5612 15.1265 97.8398 17.0762 97.8398 19.1374C97.8398 20.6693 97.7423 22.0898 97.5473 23.3989C97.3802 24.6802 97.1434 26.1007 96.8371 27.6605H88.1886V24.2763C88.1886 16.4495 86.0857 12.5361 81.8798 12.5361C80.7378 12.5361 79.749 12.7311 78.9134 13.121C78.0778 13.511 77.3815 14.1795 76.8244 15.1265C76.2673 16.0456 75.8495 17.2712 75.571 18.8031C75.3203 20.335 75.195 22.243 75.195 24.527V56.8647C75.195 59.093 75.3203 60.9453 75.571 62.4215C75.8495 63.8977 76.2534 65.0815 76.7826 65.9728C77.3397 66.8641 78.0221 67.5047 78.8298 67.8947C79.6655 68.2568 80.6542 68.4378 81.7962 68.4378C82.9939 68.4378 84.0245 68.1314 84.888 67.5186C85.7514 66.878 86.4617 66.0146 87.0187 64.9283C87.5758 63.842 87.9797 62.5608 88.2304 61.0845C88.5089 59.6083 88.6482 58.0067 88.6482 56.2798V46.9629H83.0914V39.8603H99.1767V76H91.9906L90.8207 69.2316C89.4559 71.8777 87.8822 73.7857 86.0996 74.9555C84.3448 76.0975 82.2558 76.6685 79.8326 76.6685Z"
+            fill="currentColor" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M58.5876 43.7938C58.5876 47.5459 55.5459 50.5876 51.7938 50.5876C48.0417 50.5876 45 47.5459 45 43.7938C45 40.0417 48.0417 37 51.7938 37C55.5459 37 58.5876 40.0417 58.5876 43.7938Z"
+            fill="#44A4EC" />
+        <path
+            d="M4.41437 4.63967H15.2354V34.5124H28.0619V4.63967H38.8829V76H28.0619V43.0355H15.2354V76H4.41437V4.63967Z"
+            fill="currentColor" />
+    </g>
+    <defs>
+        <clipPath id="clip0">
+            <rect width="164" height="81" fill="white" />
+        </clipPath>
+    </defs>
+</svg>

src/_layouts/blog.njk

@@ -6,28 +6,24 @@ layout: page-default
 <article class="blog-post content__inner--full-width">
     <!-- header title + image .etc -->
     <header class="blog-post__header">
-        {% if slug %}
-            <div class="blog-post__header__image">
+        <div class="blog-post__header__image">
             <div role="presentation" class="blog-post__header__image__placeholder"></div>
-            <div class="blog-post__header__image__image img--lazy-load" data-src="/blog-images/{{ slug }}.jpg"
-                role="img" aria-label="{{ title }}">
-            </div>
-            </div>
-        {% endif %}
+            <div class="blog-post__header__image__image img--lazy-load" data-src="/blog-images/{{ slug }}.jpg" role="img" aria-label="{{ title }}"></div>
+        </div>
         <h1 class="blog-post__header__title">{{ title }}</h1>
         <ul class="blog-post__header__meta">
             <li>{{ page.date | date }}</li>
             {% for tag in tags %}
-                {% if tag != 'post' %}
+                {% if tag != 'post' and tag != 'meta-post' %}
                     <li>{{ tag | trim }}</li>
                 {% endif %}
             {% endfor %}
         </ul>
+         <section class="blog-post__authors">
+            {% for author in authors %}
+                {{ authorInclude.sigBlock(author, authorsdata)}}
+            {% endfor %}
+        </section>
     </header>
     {{ content | safe }}
-    <section class="blog-post__authors">
-        {% for author in authors %}
-            {{ authorInclude.sigBlock(author, authorsdata)}}
-        {% endfor %}
-    </section>
 </article>