feat: add new design for website

src/utils/collections.js

@@ -1 +0,0 @@
-module.exports = {};

src/utils/filters.js

@@ -7,4 +7,9 @@ module.exports = {
   dateToISO: function (date) {
     return moment(date).format();
   },
+  sortByTitle: function (values) {
+    return values
+      .slice()
+      .sort((a, b) => a.data.title.localeCompare(b.data.title));
+  },
 };

src/utils/shortcodes.js

@@ -1,10 +1,40 @@
-const outdent = require('outdent')({ newline: ' ' });
+const outdent = require('outdent')({
+  newline: ' ',
+});
 
 module.exports = {
-  test: function () {
-    const html = outdent`
-    <div>Hello, World</div>`;
+  email: function (text, key = false) {
+    const downloadText = 'Download public key (ProtonMail/GPG)';
+    const link = outdent`
+    <a id="email" class="objuscated" href="mailto:hey (at) imhoff (dot) name">
+      ${text}
+    </a>`;
+    const keyDownload = outdent`
+    <span id="lock-box" class="about-lock-box hidden">
+      <a
+        title="${downloadText}"
+        aria-label="${downloadText}"
+        href="/downloads/publickey.hey@imhoff.name-9cb867d4ccd2c1d7d9fde82f4b649797f3e007a9.asc"
+      >
+        <svg class="about-lock-icon" aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
+          <use xlink:href="#lock"></use>
+        </svg>
+      </a></span>`;
 
-    return html;
+    return `${link} ${key ? keyDownload : ''}`;
+  },
+  map: function (mid) {
+    return outdent`
+    <iframe class="map" src="https://www.google.com/maps/d/u/0/embed?mid=${mid}" width="1000" height="500">
+    </iframe>`;
+  },
+  youtube: function (id) {
+    return outdent`
+    <div class="video-wrapper">
+      <iframe src="https://www.youtube.com/embed/${id}"
+        frameborder="0" allowfullscreen
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
+      </iframe>
+    </div>`;
   },
 };