Make svg sprites loading

_posts/blog/2020-06-15-ive-made-rss-feed.md

@@ -37,7 +37,7 @@ I am sure you can find much more information about [_Atom_](https://en.wikipedia
 
 This blog is created with [**sapper**](https://sapper.svelte.dev/) so to generate a feed I needed to create following file structure:
 
-```
+```bash
   - src
     + components
     - routes

package-lock.json

@@ -32,9 +32,10 @@
         "prettier-plugin-svelte": "^2.2.0",
         "svelte": "^3.37.0",
         "svelte-preprocess": "^4.7.2",
+        "svgstore-cli": "^2.0.0",
         "tslib": "^2.2.0",
         "typescript": "^4.2.4",
-        "vite": "^2.2.1"
+        "vite": "^2.2.3"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -905,6 +906,12 @@
       "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
       "dev": true
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+      "dev": true
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -961,6 +968,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001214",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001214.tgz",
@@ -992,6 +1008,83 @@
         "node": ">=8"
       }
     },
+    "node_modules/cheerio": {
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-0.22.0.tgz",
+      "integrity": "sha1-qbqoYKP5tZWmuBsahocxIe06Jp4=",
+      "dev": true,
+      "dependencies": {
+        "css-select": "~1.2.0",
+        "dom-serializer": "~0.1.0",
+        "entities": "~1.1.1",
+        "htmlparser2": "^3.9.1",
+        "lodash.assignin": "^4.0.9",
+        "lodash.bind": "^4.1.4",
+        "lodash.defaults": "^4.0.1",
+        "lodash.filter": "^4.4.0",
+        "lodash.flatten": "^4.2.0",
+        "lodash.foreach": "^4.3.0",
+        "lodash.map": "^4.4.0",
+        "lodash.merge": "^4.4.0",
+        "lodash.pick": "^4.2.1",
+        "lodash.reduce": "^4.4.0",
+        "lodash.reject": "^4.4.0",
+        "lodash.some": "^4.4.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cheerio/node_modules/css-select": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
+      "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "~1.0.0",
+        "css-what": "2.1",
+        "domutils": "1.5.1",
+        "nth-check": "~1.0.1"
+      }
+    },
+    "node_modules/cheerio/node_modules/css-what": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
+      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/cheerio/node_modules/dom-serializer": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
+      "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^1.3.0",
+        "entities": "^1.1.1"
+      }
+    },
+    "node_modules/cheerio/node_modules/domutils": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
+      "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
+    "node_modules/cheerio/node_modules/nth-check": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "~1.0.0"
+      }
+    },
     "node_modules/classnames": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
@@ -1075,6 +1168,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
@@ -1129,6 +1231,62 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+      "dev": true
+    },
+    "node_modules/domhandler": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+      "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.3.719",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.719.tgz",
@@ -1155,6 +1313,12 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/entities": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
+      "dev": true
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -1815,6 +1979,20 @@
       "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
       "dev": true
     },
+    "node_modules/htmlparser2": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
+      "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^1.3.1",
+        "domhandler": "^2.3.0",
+        "domutils": "^1.5.1",
+        "entities": "^1.1.1",
+        "inherits": "^2.0.1",
+        "readable-stream": "^3.1.1"
+      }
+    },
     "node_modules/ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
@@ -1996,18 +2174,84 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash.assignin": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assignin/-/lodash.assignin-4.2.0.tgz",
+      "integrity": "sha1-uo31+4QesKPoBEIysOJjqNxqKKI=",
+      "dev": true
+    },
+    "node_modules/lodash.bind": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/lodash.bind/-/lodash.bind-4.2.1.tgz",
+      "integrity": "sha1-euMBfpOWIqwxt9fX3LGzTbFpDTU=",
+      "dev": true
+    },
     "node_modules/lodash.clonedeep": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
       "dev": true
     },
+    "node_modules/lodash.defaults": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
+      "integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=",
+      "dev": true
+    },
+    "node_modules/lodash.filter": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.filter/-/lodash.filter-4.6.0.tgz",
+      "integrity": "sha1-ZosdSYFgOuHMWm+nYBQ+SAtMSs4=",
+      "dev": true
+    },
     "node_modules/lodash.flatten": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
       "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=",
       "dev": true
     },
+    "node_modules/lodash.foreach": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
+      "integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM=",
+      "dev": true
+    },
+    "node_modules/lodash.map": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
+      "integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=",
+      "dev": true
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "node_modules/lodash.pick": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
+      "integrity": "sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=",
+      "dev": true
+    },
+    "node_modules/lodash.reduce": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
+      "integrity": "sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs=",
+      "dev": true
+    },
+    "node_modules/lodash.reject": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reject/-/lodash.reject-4.6.0.tgz",
+      "integrity": "sha1-gNZJLcFHCGS79YNTO2UfQqn1JBU=",
+      "dev": true
+    },
+    "node_modules/lodash.some": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.some/-/lodash.some-4.6.0.tgz",
+      "integrity": "sha1-G7nzFO9ri63tE7VJFpsqlF62jk0=",
+      "dev": true
+    },
     "node_modules/lodash.truncate": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
@@ -2129,6 +2373,15 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2306,6 +2559,20 @@
       "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.1.tgz",
       "integrity": "sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw=="
     },
+    "node_modules/readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/regexpp": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz",
@@ -2541,6 +2808,35 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/string-width": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
@@ -2685,6 +2981,33 @@
         }
       }
     },
+    "node_modules/svgstore": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/svgstore/-/svgstore-2.0.3.tgz",
+      "integrity": "sha512-K5GcfdH/lZbLyQv2Vi9pDAKUXBLZAn7eRoPGCzV+7gk7Fv/LOB1gLsNfevNSrcapX/q45M8x0XMct9ZjWRFImQ==",
+      "dev": true,
+      "dependencies": {
+        "cheerio": "^0.22.0",
+        "object-assign": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 0.12"
+      }
+    },
+    "node_modules/svgstore-cli": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svgstore-cli/-/svgstore-cli-2.0.0.tgz",
+      "integrity": "sha512-0rkhCaADhX/3mO+BU/aX6RnYOA6StOO2MHjQrpBZB4ua/O7yLd5QQn5fNefSB8vVwJEHUhClzwq9kb/GmNWELw==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.6",
+        "svgstore": "^2.0.3",
+        "yargs-parser": "^18.1.3"
+      },
+      "bin": {
+        "svgstore": "bin/svgstore"
+      }
+    },
     "node_modules/table": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/table/-/table-6.4.0.tgz",
@@ -2835,6 +3158,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -2842,10 +3171,11 @@
       "dev": true
     },
     "node_modules/vite": {
-      "version": "2.2.1",
+      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.2.3.tgz",
-      "integrity": "sha512-KIqK90EoJJpuqE86Y9DSkZjFNGgsyZX/4I1xENIitLRd3hgRtOlIGCJYrNnBD9/eqipz0OroAiIj9/R1JcOdFA==",
+      "integrity": "sha512-PtjyBL4GtACM+uT5q5hi2+AlMBbb6YI2b2bam6QI8ZdZt4FezseF0yZHQx0G+b3po9jIJ/GS5N9gc5Yq9Rue7g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "esbuild": "^0.9.3",
         "fsevents": "~2.3.1",
@@ -2918,6 +3248,19 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
     }
   },
   "dependencies": {
@@ -3600,6 +3943,12 @@
       "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
       "dev": true
     },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+      "dev": true
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3640,6 +3989,12 @@
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
       "dev": true
     },
+    "camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true
+    },
     "caniuse-lite": {
       "version": "1.0.30001214",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001214.tgz",
@@ -3665,6 +4020,79 @@
       "integrity": "sha512-xC5CruMhLzjPwJ5ecUxGu1uGmwJQykUhqd2QrCrYbwvsFYdRyviu6jG9+pccwDXJR/OpmOTOJ9yLFunVgQu9wg==",
       "dev": true
     },
+    "cheerio": {
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-0.22.0.tgz",
+      "integrity": "sha1-qbqoYKP5tZWmuBsahocxIe06Jp4=",
+      "dev": true,
+      "requires": {
+        "css-select": "~1.2.0",
+        "dom-serializer": "~0.1.0",
+        "entities": "~1.1.1",
+        "htmlparser2": "^3.9.1",
+        "lodash.assignin": "^4.0.9",
+        "lodash.bind": "^4.1.4",
+        "lodash.defaults": "^4.0.1",
+        "lodash.filter": "^4.4.0",
+        "lodash.flatten": "^4.2.0",
+        "lodash.foreach": "^4.3.0",
+        "lodash.map": "^4.4.0",
+        "lodash.merge": "^4.4.0",
+        "lodash.pick": "^4.2.1",
+        "lodash.reduce": "^4.4.0",
+        "lodash.reject": "^4.4.0",
+        "lodash.some": "^4.4.0"
+      },
+      "dependencies": {
+        "css-select": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
+          "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
+          "dev": true,
+          "requires": {
+            "boolbase": "~1.0.0",
+            "css-what": "2.1",
+            "domutils": "1.5.1",
+            "nth-check": "~1.0.1"
+          }
+        },
+        "css-what": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
+          "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
+          "dev": true
+        },
+        "dom-serializer": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
+          "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^1.3.0",
+            "entities": "^1.1.1"
+          }
+        },
+        "domutils": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
+          "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "0",
+            "domelementtype": "1"
+          }
+        },
+        "nth-check": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+          "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+          "dev": true,
+          "requires": {
+            "boolbase": "~1.0.0"
+          }
+        }
+      }
+    },
     "classnames": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
@@ -3733,6 +4161,12 @@
         "ms": "2.1.2"
       }
     },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "dev": true
+    },
     "deep-is": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
@@ -3777,6 +4211,55 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-serializer": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "entities": "^2.0.0"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+          "dev": true
+        },
+        "entities": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+          "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+          "dev": true
+        }
+      }
+    },
+    "domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+      "dev": true
+    },
+    "domhandler": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+      "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "1"
+      }
+    },
+    "domutils": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+      "dev": true,
+      "requires": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
     "electron-to-chromium": {
       "version": "1.3.719",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.719.tgz",
@@ -3800,6 +4283,12 @@
         "ansi-colors": "^4.1.1"
       }
     },
+    "entities": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
+      "dev": true
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -4301,6 +4790,20 @@
       "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
       "dev": true
     },
+    "htmlparser2": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
+      "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^1.3.1",
+        "domhandler": "^2.3.0",
+        "domutils": "^1.5.1",
+        "entities": "^1.1.1",
+        "inherits": "^2.0.1",
+        "readable-stream": "^3.1.1"
+      }
+    },
     "ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
@@ -4443,18 +4946,84 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "lodash.assignin": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assignin/-/lodash.assignin-4.2.0.tgz",
+      "integrity": "sha1-uo31+4QesKPoBEIysOJjqNxqKKI=",
+      "dev": true
+    },
+    "lodash.bind": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/lodash.bind/-/lodash.bind-4.2.1.tgz",
+      "integrity": "sha1-euMBfpOWIqwxt9fX3LGzTbFpDTU=",
+      "dev": true
+    },
     "lodash.clonedeep": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
       "dev": true
     },
+    "lodash.defaults": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
+      "integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=",
+      "dev": true
+    },
+    "lodash.filter": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.filter/-/lodash.filter-4.6.0.tgz",
+      "integrity": "sha1-ZosdSYFgOuHMWm+nYBQ+SAtMSs4=",
+      "dev": true
+    },
     "lodash.flatten": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
       "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=",
       "dev": true
     },
+    "lodash.foreach": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
+      "integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM=",
+      "dev": true
+    },
+    "lodash.map": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
+      "integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=",
+      "dev": true
+    },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "lodash.pick": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
+      "integrity": "sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=",
+      "dev": true
+    },
+    "lodash.reduce": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
+      "integrity": "sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs=",
+      "dev": true
+    },
+    "lodash.reject": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reject/-/lodash.reject-4.6.0.tgz",
+      "integrity": "sha1-gNZJLcFHCGS79YNTO2UfQqn1JBU=",
+      "dev": true
+    },
+    "lodash.some": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.some/-/lodash.some-4.6.0.tgz",
+      "integrity": "sha1-G7nzFO9ri63tE7VJFpsqlF62jk0=",
+      "dev": true
+    },
     "lodash.truncate": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
@@ -4546,6 +5115,12 @@
       "optional": true,
       "peer": true
     },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
+    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -4665,6 +5240,17 @@
       "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.1.tgz",
       "integrity": "sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw=="
     },
+    "readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      }
+    },
     "regexpp": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz",
@@ -4825,6 +5411,23 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+          "dev": true
+        }
+      }
+    },
     "string-width": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
@@ -4894,6 +5497,27 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "svgstore": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/svgstore/-/svgstore-2.0.3.tgz",
+      "integrity": "sha512-K5GcfdH/lZbLyQv2Vi9pDAKUXBLZAn7eRoPGCzV+7gk7Fv/LOB1gLsNfevNSrcapX/q45M8x0XMct9ZjWRFImQ==",
+      "dev": true,
+      "requires": {
+        "cheerio": "^0.22.0",
+        "object-assign": "^4.1.0"
+      }
+    },
+    "svgstore-cli": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svgstore-cli/-/svgstore-cli-2.0.0.tgz",
+      "integrity": "sha512-0rkhCaADhX/3mO+BU/aX6RnYOA6StOO2MHjQrpBZB4ua/O7yLd5QQn5fNefSB8vVwJEHUhClzwq9kb/GmNWELw==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.6",
+        "svgstore": "^2.0.3",
+        "yargs-parser": "^18.1.3"
+      }
+    },
     "table": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/table/-/table-6.4.0.tgz",
@@ -5016,6 +5640,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -5023,9 +5653,9 @@
       "dev": true
     },
     "vite": {
-      "version": "2.2.1",
+      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.2.3.tgz",
-      "integrity": "sha512-KIqK90EoJJpuqE86Y9DSkZjFNGgsyZX/4I1xENIitLRd3hgRtOlIGCJYrNnBD9/eqipz0OroAiIj9/R1JcOdFA==",
+      "integrity": "sha512-PtjyBL4GtACM+uT5q5hi2+AlMBbb6YI2b2bam6QI8ZdZt4FezseF0yZHQx0G+b3po9jIJ/GS5N9gc5Yq9Rue7g==",
       "dev": true,
       "requires": {
         "esbuild": "^0.9.3",
@@ -5075,6 +5705,16 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
+    },
+    "yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
     }
   }
 }

package.json

@@ -5,15 +5,15 @@
   "type": "module",
   "scripts": {
     "dev": "svelte-kit dev",
+    "prebuild": "npm run svgstore",
     "build": "svelte-kit build --verbose",
     "export": "svelte-kit build",
     "preview": "svelte-kit preview",
     "start": "svelte-kit start",
-    "cy:run": "cypress run",
-    "cy:open": "cypress open",
     "test": "run-p --race dev cy:run",
     "lint": "prettier --check . && eslint --ignore-path .gitignore .",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "svgstore": "svgstore -o src/svg/build/icons-sprite.svg src/svg/**.svg"
   },
   "dependencies": {
     "classnames": "^2.3.1",
@@ -40,8 +40,9 @@
     "prettier-plugin-svelte": "^2.2.0",
     "svelte": "^3.37.0",
     "svelte-preprocess": "^4.7.2",
+    "svgstore-cli": "^2.0.0",
     "tslib": "^2.2.0",
     "typescript": "^4.2.4",
-    "vite": "^2.2.1"
+    "vite": "^2.2.3"
   }
 }

src/components/Footer.svelte

@@ -1,16 +1,117 @@
 <script>
   import { format } from 'date-fns'
-  import twitterLogo from '../svg/iconfinder_Twitter_4070150.svg'
+  import type { PostContent } from 'src/routes/blog/_content'
-  import githubLogo from '../svg/iconfinder_github_2561442.svg'
+  import SvgIcon from './SvgIcon.svelte'
-  import twitchLogo from '../svg/iconfinder_twitch_306173.svg'
-  import instagramLogo from '../svg/iconfinder_38-instagram_1161953.svg'
-  import emailIcon from '../svg/iconfinder_mail_5474819.svg'
-  import rssIcon from '../svg/iconfinder_icon-social-rss_211914.svg'
-  import jsonFeedIcon from '../svg/json_feed_icon.svg'
 
-  export let latestPosts
+  export let latestPosts: PostContent[]
 </script>
 
+<footer class="site-footer navigation-theme">
+  <div class="lists">
+    <section class="site-map">
+      <ul>
+        <li>
+          <a href="/">Introduction</a>
+        </li>
+        <li>
+          <a href="/portfolio">Portfolio</a>
+          <ul>
+            <li>
+              <a href="/portfolio#personal-information">About</a>
+            </li>
+            <li>
+              <a href="/portfolio#skills">Skills</a>
+            </li>
+            <li>
+              <a href="/portfolio#work-history">Work History</a>
+            </li>
+            <li>
+              <a href="/portfolio#projects">Projects</a>
+            </li>
+            <li>
+              <a href="/portfolio#education">Education</a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </section>
+    <section class="latest-posts">
+      <h3>
+        <a href="/blog">Latest posts</a>
+      </h3>
+      <ul>
+        {#each latestPosts as post}
+          <li>
+            <a rel="prefetch" href="/blog/{post.slug}">
+              <span>{post.title}</span>
+              <span class="date">
+                - {format(new Date(post.date), 'do MMM, yyyy')}
+              </span>
+            </a>
+          </li>
+        {/each}
+      </ul>
+      <hr />
+      <section class="subscribe">
+        <a href="/feed.xml" title="RSS feed" class="rss">
+          Subscribe
+          <SvgIcon name="rss" className="svg-icon" />
+        </a>
+        <a
+          href="/feed.json"
+          title="JSON feed"
+          class="json-feed"
+          aria-label="Subscribe with JSON feed"
+        >
+          <SvgIcon name="json-feed" className="svg-icon" />
+        </a>
+      </section>
+    </section>
+    <section class="socials">
+      <h3>Contact</h3>
+      <ul class="social-links">
+        <li class="email">
+          <a href="mailto: michalvankosk@gmail.com" title="E-mail address">
+            <SvgIcon name="mail" className="svg-icon" />
+            <span>michalvankosk@gmail.com</span>
+          </a>
+        </li>
+        <li class="twitter">
+          <a href="https://twitter.com/michalvankodev" title="Twitter profile">
+            <SvgIcon name="twitter" className="svg-icon" />
+            <span>Twitter</span>
+          </a>
+        </li>
+        <li class="github">
+          <a href="https://github.com/michalvankodev" title="Github profile">
+            <SvgIcon name="github" className="svg-icon" />
+            <span>Github</span>
+          </a>
+        </li>
+        <li class="twitch">
+          <a href="https://twitch.tv/michalvankodev" title="Twitch profile">
+            <SvgIcon name="twitch" className="svg-icon" />
+            <span>Twitch</span>
+          </a>
+        </li>
+        <li class="instagram">
+          <a
+            href="https://www.instagram.com/michalvankodev/"
+            title="Instagram profile"
+          >
+            <SvgIcon name="instagram" className="svg-icon" />
+            <span>Instagram</span>
+          </a>
+        </li>
+      </ul>
+    </section>
+  </div>
+  <footer class="bottom-line">
+    <span class="no-wrap">Created by @michalvankodev</span>
+    <span class="no-wrap">&copy; 2020</span>
+  </footer>
+</footer>
+
 <style>
   h3 {
     font: inherit;
@@ -61,23 +162,22 @@
     padding: 0 0.4em;
   }
 
-  .email :global(svg path) {
+  .email :global(svg) {
     fill: #eae9be;
   }
 
-  .twitter :global(svg path) {
+  .twitter :global(svg) {
-    /* fill: rgb(29, 161, 242); */
     stroke: #eae9be;
     stroke-width: 2px;
     fill: #eae9be;
   }
 
-  .github :global(svg path) {
+  .github :global(svg) {
     stroke: #eae9be;
     stroke-width: 2px;
   }
 
-  .twitch :global(svg path),
+  .twitch :global(svg),
   .twitch :global(svg rect) {
     /* fill: rgb(169, 112, 255); */
     fill: #eae9be;
@@ -95,7 +195,7 @@
     fill: #eae9be;
   }
 
-  :global(svg) {
+  :global(.svg-icon) {
     height: 1em;
     width: 1em;
   }
@@ -155,107 +255,3 @@
     }
   }
 </style>
-
-<footer class="site-footer navigation-theme">
-  <div class="lists">
-    <section class="site-map">
-      <ul>
-        <li>
-          <a href="/">Introduction</a>
-        </li>
-        <li>
-          <a href="/portfolio">Portfolio</a>
-          <ul>
-            <li>
-              <a href="/portfolio#personal-information">About</a>
-            </li>
-            <li>
-              <a href="/portfolio#skills">Skills</a>
-            </li>
-            <li>
-              <a href="/portfolio#work-history">Work History</a>
-            </li>
-            <li>
-              <a href="/portfolio#projects">Projects</a>
-            </li>
-            <li>
-              <a href="/portfolio#education">Education</a>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </section>
-    <section class="latest-posts">
-      <h3>
-        <a href="/blog">Latest posts</a>
-      </h3>
-      <ul>
-        {#each latestPosts as post}
-          <li>
-            <a rel="prefetch" href="/blog/{post.slug}">
-              <span>{post.title}</span>
-              <span class="date">
-                - {format(new Date(post.date), 'do MMM, yyyy')}
-              </span>
-            </a>
-          </li>
-        {/each}
-      </ul>
-      <hr />
-      <section class="subscribe">
-        <a href="/feed.xml" title="RSS feed" class="rss">
-          Subscribe
-          {@html rssIcon}
-        </a>
-        <a
-          href="/feed.json"
-          title="JSON feed"
-          class="json-feed"
-          aria-label="Subscribe with JSON feed">
-          {@html jsonFeedIcon}
-        </a>
-      </section>
-    </section>
-    <section class="socials">
-      <h3>Contact</h3>
-      <ul class="social-links">
-        <li class="email">
-          <a href="mailto: michalvankosk@gmail.com" title="E-mail address">
-            {@html emailIcon}
-            <span>michalvankosk@gmail.com</span>
-          </a>
-        </li>
-        <li class="twitter">
-          <a href="https://twitter.com/michalvankodev" title="Twitter profile">
-            {@html twitterLogo}
-            <span>Twitter</span>
-          </a>
-        </li>
-        <li class="github">
-          <a href="https://github.com/michalvankodev" title="Github profile">
-            {@html githubLogo}
-            <span>Github</span>
-          </a>
-        </li>
-        <li class="twitch">
-          <a href="https://twitch.tv/michalvankodev" title="Twitch profile">
-            {@html twitchLogo}
-            <span>Twitch</span>
-          </a>
-        </li>
-        <li class="instagram">
-          <a
-            href="https://www.instagram.com/michalvankodev/"
-            title="Instagram profile">
-            {@html instagramLogo}
-            <span>Instagram</span>
-          </a>
-        </li>
-      </ul>
-    </section>
-  </div>
-  <footer class="bottom-line">
-    <span class="no-wrap">Created by @michalvankodev</span>
-    <span class="no-wrap">&copy; 2020</span>
-  </footer>
-</footer>

src/components/SvgIcon.svelte

@@ -0,0 +1,9 @@
+<script>
+  import svgSprite from '../svg/build/icons-sprite.svg'
+  export let className
+  export let name
+</script>
+
+<svg aria-hidden="true" role="img" class={className}>
+  <use xlink:href={`${svgSprite}#${name}`} />
+</svg>

src/markdown/renderer-extension.ts

@@ -1,5 +1,5 @@
 import Prism from 'prismjs'
-import loadLanguages from 'prismjs/components/index'
+import loadLanguages from 'prismjs/components/index.js'
 
 loadLanguages(['shell', 'markdown', 'json', 'yaml', 'typescript'])
 
@@ -43,10 +43,10 @@ export const renderer = {
       </figure>
     `
   },
-  code(source: string, lang: string) {
+  code(source: string, lang?: string) {
     const highlightedSource = Prism.highlight(
       source,
-      Prism.languages[lang],
+      Prism.languages[lang ?? 'shell'],
       lang
     )
     return `<pre class='language-${lang}'><code class='language-${lang}'>${highlightedSource}</code></pre>`

src/svg/github.svg

@@ -1 +1 @@
-<?xml version="1.0" ?><svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
+<?xml version="1.0" ?><svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>

src/svg/icon.svg

@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="140px" height="140px" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs/>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="icon" transform="translate(-4.000000, -14.000000)">
-            <rect id="background" fill="#8BE028" x="4" y="14" width="140" height="140"/>
-            <g id="elements" transform="translate(79.549513, 79.549513) rotate(-45.000000) translate(-79.549513, -79.549513) translate(26.049513, 20.549513)">
-                <path d="M7,64.9835977 L7,65.1904297 C15.2519531,65.1904297 17.9179687,68.4912109 17.9179687,78.4570312 L17.9179687,94.1992187 C17.9179687,110.576172 25.9794922,117.8125 44.2607422,117.8125 L49.8466797,117.8125 L49.8466797,105.942383 L46.9902344,105.942383 C36.6435547,105.942383 32.9619141,102.387695 32.9619141,92.4853516 L32.9619141,74.0136719 C32.9619141,64.4921875 28.7089844,59.2871094 20.3935547,58.5253906 L20.3935547,56.7480469 C28.9628906,55.9228516 32.9619141,51.1621094 32.9619141,41.9580078 L32.9619141,25.390625 C32.9619141,15.2978516 36.5166016,11.8066406 46.9902344,11.8066406 L49.8466797,11.8066406 L49.8466797,0 L44.2607422,0 C25.9160156,0 17.9179687,6.98242187 17.9179687,22.9785156 L17.9179687,36.6259766 C17.9179687,46.5917969 15.1884766,49.9560547 7,49.9560547 L7,50.0164023 C3.09098409,50.2736953 -9.23705556e-14,53.5258787 -9.23705556e-14,57.5 C-9.23705556e-14,61.4741213 3.09098409,64.7263047 7,64.9835977 Z" id="transmitter" fill="#497614"/>
-                <g id="dots-@-15pt" transform="translate(42.000000, 50.000000)" fill="#FFFFFF">
-                    <circle id="Oval-1" cx="7.5" cy="7.5" r="7.5"/>
-                    <circle id="Oval-2" cx="32.5" cy="7.5" r="7.5"/>
-                    <circle id="Oval-3" cx="57.5" cy="7.5" r="7.5"/>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/svg/iconfinder_343_Twitch_logo_4375116.svg

@@ -1 +0,0 @@
-<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x33_43-twitch"><g><polygon points="67.175,26.001 36.269,104.961 36.269,427.68 146.135,427.68 146.135,485.999     207.948,485.999 266.269,427.68 355.598,427.68 475.731,307.544 475.731,26.001   " style="fill:#6441A5;"/><polygon points="434.558,286.905 365.866,355.598 256.001,355.598 197.679,413.917 197.679,355.598     104.96,355.598 104.96,67.176 434.558,67.176   " style="fill:#FFFFFF;"/><rect height="120.03" style="fill:#6441A5;" width="41.174" x="324.692" y="146.134"/><rect height="120.03" style="fill:#6441A5;" width="41.177" x="214.824" y="146.134"/></g></g><g id="Layer_1"/></svg>

src/svg/iconfinder_mail_5474819.svg

@@ -1 +0,0 @@
-<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#030303;}.cls-2{fill:none;}</style></defs><title/><g data-name="Layer 2" id="Layer_2"><g data-name="Layer 4" id="Layer_4"><path class="cls-1" d="M24,6H8a5,5,0,0,0-5,5V21a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V11A5,5,0,0,0,24,6ZM8,8H24a3,3,0,0,1,2.7,1.72L16.6,17.3a1,1,0,0,1-1.2,0L5.3,9.72A3,3,0,0,1,8,8ZM24,24H8a3,3,0,0,1-3-3V12l9.2,6.9a3,3,0,0,0,3.6,0L27,12v9A3,3,0,0,1,24,24Z"/><rect class="cls-2" height="32" width="32"/></g></g></svg>

src/svg/iconfinder_twitch_tv_gaming_stream_gamer_5340289.svg

@@ -1 +0,0 @@
-<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title/><g data-name="twitch tv gaming stream gamer" id="twitch_tv_gaming_stream_gamer"><path d="M26,3H6A1,1,0,0,0,5,4V19a1,1,0,0,0,2,0V5H25V17.59L20.59,22H15a1,1,0,0,0-.71.29l-2.79,2.8V23a1,1,0,0,0-1-1H6a1,1,0,0,0,0,2H9.5v3.5a1,1,0,0,0,.62.92.84.84,0,0,0,.38.08,1,1,0,0,0,.71-.29L15.41,24H21a1,1,0,0,0,.71-.29l5-5A1,1,0,0,0,27,18V4A1,1,0,0,0,26,3Z"/><path d="M15,16V11a1,1,0,0,0-2,0v5a1,1,0,0,0,2,0Z"/><path d="M21,16V11a1,1,0,0,0-2,0v5a1,1,0,0,0,2,0Z"/></g></svg>

src/svg/json-feed.svg

@@ -11,26 +11,7 @@
    viewBox="0 0 140 140"
    height="140px"
    width="140px">
-  <sodipodi:namedview
+
-     inkscape:current-layer="icon"
-     inkscape:window-maximized="1"
-     inkscape:window-y="0"
-     inkscape:window-x="0"
-     inkscape:cy="80.375472"
-     inkscape:cx="41.171285"
-     inkscape:zoom="5.6714286"
-     showgrid="false"
-     id="namedview19"
-     inkscape:window-height="1016"
-     inkscape:window-width="1920"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0"
-     guidetolerance="10"
-     gridtolerance="10"
-     objecttolerance="10"
-     borderopacity="1"
-     bordercolor="#666666"
-     pagecolor="#ffffff" />
   <defs
      id="defs6" />
   <g

src/svg/mail.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g data-name="Layer 2" id="Layer_2"><path d="M24,6H8a5,5,0,0,0-5,5V21a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V11A5,5,0,0,0,24,6ZM8,8H24a3,3,0,0,1,2.7,1.72L16.6,17.3a1,1,0,0,1-1.2,0L5.3,9.72A3,3,0,0,1,8,8ZM24,24H8a3,3,0,0,1-3-3V12l9.2,6.9a3,3,0,0,0,3.6,0L27,12v9A3,3,0,0,1,24,24Z"/></g></svg>

src/svg/social-1_logo-github.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
-<path fill-rule="evenodd" clip-rule="evenodd" fill="#444444" d="M16,0.4c-8.8,0-16,7.2-16,16c0,7.1,4.6,13.1,10.9,15.2
-	c0.8,0.1,1.1-0.3,1.1-0.8c0-0.4,0-1.4,0-2.7c-4.5,1-5.4-2.1-5.4-2.1c-0.7-1.8-1.8-2.3-1.8-2.3c-1.5-1,0.1-1,0.1-1
-	c1.6,0.1,2.5,1.6,2.5,1.6c1.4,2.4,3.7,1.7,4.7,1.3c0.1-1,0.6-1.7,1-2.1c-3.6-0.4-7.3-1.8-7.3-7.9c0-1.7,0.6-3.2,1.6-4.3
-	c-0.2-0.4-0.7-2,0.2-4.2c0,0,1.3-0.4,4.4,1.6c1.3-0.4,2.6-0.5,4-0.5c1.4,0,2.7,0.2,4,0.5C23.1,6.6,24.4,7,24.4,7
-	c0.9,2.2,0.3,3.8,0.2,4.2c1,1.1,1.6,2.5,1.6,4.3c0,6.1-3.7,7.5-7.3,7.9c0.6,0.5,1.1,1.5,1.1,3c0,2.1,0,3.9,0,4.4
-	c0,0.4,0.3,0.9,1.1,0.8C27.4,29.5,32,23.5,32,16.4C32,7.6,24.8,0.4,16,0.4z"/>
-</svg>

src/svg/social-1_logo-instagram.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
-<path fill="#444444" d="M28.2,0H3.8C1.7,0,0,1.7,0,3.8v24.4C0,30.3,1.7,32,3.8,32h24.4c2.1,0,3.8-1.7,3.8-3.8V3.8
-	C32,1.7,30.3,0,28.2,0z M24,4h3c0.6,0,1,0.4,1,1v3c0,0.6-0.4,1-1,1h-3c-0.6,0-1-0.4-1-1V5C23,4.4,23.4,4,24,4z M16,9.9
-	c3.4,0,6.2,2.7,6.2,6.1c0,3.4-2.8,6.1-6.2,6.1c-3.4,0-6.2-2.7-6.2-6.1C9.9,12.6,12.6,9.9,16,9.9z M28,29H4c-0.6,0-1-0.4-1-1V13h4
-	c-0.5,0.8-0.7,2.1-0.7,3c0,5.4,4.4,9.7,9.7,9.7c5.4,0,9.7-4.4,9.7-9.7c0-0.9-0.1-2.3-0.8-3h4v15C29,28.6,28.6,29,28,29z"/>
-</svg>

src/svg/social-1_logo-twitter.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
-<path fill="#444444" d="M32,6.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6C25.7,3.8,24,3,22.2,3
-	c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5C10.3,10.8,5.5,8.2,2.2,4.2c-0.6,1-0.9,2.1-0.9,3.3c0,2.3,1.2,4.3,2.9,5.5
-	c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1
-	c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1C2.9,27.9,6.4,29,10.1,29c12.1,0,18.7-10,18.7-18.7
-	c0-0.3,0-0.6,0-0.8C30,8.5,31.1,7.4,32,6.1z"/>
-</svg>