Add vuejs and port all contents to it

.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

.dockerignore

@@ -0,0 +1,3 @@
+docker/
+.editorconfig
+README.md

.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/typescript/recommended",
+    "plugin:prettier/recommended",
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
+};

.gitignore

@@ -1,4 +1,23 @@
-node_modules/
+.DS_Store
+node_modules
+/dist
 
-build/*
+
-!build/robots.txt
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,3 +1,25 @@
 # Personal Website
-This the repository for Daniel's personal website.
+This is the repository for Daniel's personal website.
 
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};

build/robots.txt

@@ -1,2 +0,0 @@
-User-agent: *
-Allow: /

docker-compose.yml

@@ -1,23 +1,12 @@
 version: '3.8'
 
 services:
-    nginx:
+    vue:
-        image: daniel-website/nginx:dev
+        image: daniel-website/vue:dev
         build:
-            context: ./docker/nginx
+            context: ./docker/vue
         ports:
-            - 127.0.0.1:8080:80
+            - 127.0.0.1:8080:8080
         volumes:
-            - ./build:/var/www/html
+            - ./:/code
-    webpack:
-        image: daniel-website/webpack:dev
-        build:
-            context: ./docker/webpack
-        volumes:
-            - ./src:/code/src
-            - ./build:/code/build
-            - ./node_modules:/code/node_modules
-            - ./package.json:/code/package.json
-            - ./package-lock.json:/code/package-lock.json
-            - ./webpack.config.js:/code/webpack.config.js
         tty: true

docker/vue/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:16
+
+ARG VUE_CLI_VERSION=5.0.4
+
+COPY entrypoint.sh /entrypoint.sh
+ENTRYPOINT ["/entrypoint.sh"]
+
+USER node
+WORKDIR /code
+
+RUN yarn global add @vue/cli@${VUE_CLI_VERSION}
+
+CMD ["yarn", "serve"]

docker/vue/entrypoint.sh

@@ -1,6 +1,6 @@
 #!/bin/sh
 set -e
 
-npm i
+yarn
 
 exec "$@"

docker/webpack/Dockerfile

@@ -1,9 +0,0 @@
-FROM node:18
-
-COPY entrypoint.sh /entrypoint.sh
-ENTRYPOINT ["/entrypoint.sh"]
-
-USER node
-WORKDIR /code
-
-CMD ["npm", "run", "build:watch"]

package.json

@@ -2,37 +2,35 @@
     "private": true,
     "name": "personal-site",
     "version": "1.0.0",
-    "description": "This the repository for Daniel's personal website.",
+    "description": "This is the repository for Daniel's personal website.",
     "scripts": {
-        "build": "webpack --mode=production",
+        "serve": "vue-cli-service serve",
-        "build:dev": "webpack --mode=development",
+        "build": "vue-cli-service build",
-        "build:watch": "webpack --mode=development --watch",
+        "lint": "vue-cli-service lint"
-        "start:dev": "webpack-dev-server --mode=development"
     },
-    "repository": {
+    "dependencies": {
-        "type": "git",
+        "core-js": "^3.8.3",
-        "url": "ssh://git@git.chaoticlogic.us:2302/daniel/personal-website.git"
+        "vue": "^3.2.13",
+        "vue-class-component": "^8.0.0-0",
+        "vue-router": "^4.0.3"
     },
-    "keywords": [
-        "portfolio",
-        "website"
-    ],
-    "author": "Daniel \"Daniel_I_Am\" de Cloet",
     "devDependencies": {
         "@fortawesome/fontawesome-free": "^6.1.1",
-        "css-loader": "^6.7.1",
+        "@typescript-eslint/eslint-plugin": "^5.4.0",
-        "dart-sass": "^1.25.0",
+        "@typescript-eslint/parser": "^5.4.0",
-        "file-loader": "^6.2.0",
+        "@vue/cli-plugin-babel": "~5.0.0",
-        "html-webpack-plugin": "^5.5.0",
+        "@vue/cli-plugin-eslint": "~5.0.0",
-        "luxon": "^2.4.0",
+        "@vue/cli-plugin-router": "~5.0.0",
-        "mini-css-extract-plugin": "^2.6.0",
+        "@vue/cli-plugin-typescript": "~5.0.0",
-        "pug": "^2.0.4",
+        "@vue/cli-service": "~5.0.0",
-        "pug-loader": "^2.4.0",
+        "@vue/eslint-config-typescript": "^9.1.0",
-        "sass": "^1.52.1",
+        "eslint": "^7.32.0",
-        "sass-loader": "^13.0.0",
+        "eslint-config-prettier": "^8.3.0",
-        "style-loader": "^3.3.1",
+        "eslint-plugin-prettier": "^4.0.0",
-        "webpack": "^5.72.1",
+        "eslint-plugin-vue": "^8.0.3",
-        "webpack-cli": "^4.9.2",
+        "prettier": "^2.4.1",
-        "webpack-dev-server": "^4.9.0"
+        "sass": "^1.32.7",
+        "sass-loader": "^12.0.0",
+        "typescript": "~4.5.5"
     }
 }

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/404.pug

@@ -1,10 +0,0 @@
-doctype html
-html(lang="en")
-  head
-    title Error
-    style.
-      html { color-scheme: light dark; }
-      body { width: 35em; margin: 0 auto; font-family: Tahoma, Verdana, Arial, sans-serif; }
-  body
-    h1 An error occurred
-    p Sorry, the page you are looking does not exist.

src/50x.pug

@@ -1,13 +0,0 @@
-doctype html
-html(lang="en")
-  head
-    title Error
-    style.
-      html { color-scheme: light dark; }
-      body { width: 35em; margin: 0 auto; font-family: Tahoma, Verdana, Arial, sans-serif; }
-  body
-    h1 An error occurred
-    p Sorry, the page you are looking for is currently unavailable.<br>Please try again later.
-    p If you are the system administrator of this resource then you should check the error log for details.
-    p
-      em Faithfully yours, nginx.

src/App.vue

@@ -0,0 +1,33 @@
+<template>
+    <PageHeader />
+    <div class="container">
+        <div class="split-content">
+            <main>
+                <router-view />
+            </main>
+            <aside>
+                <tag-list />
+            </aside>
+        </div>
+    </div>
+    <div class="container">
+        <page-footer />
+    </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+import PageHeader from "@/components/header/PageHeader.vue";
+import PageFooter from "@/components/footer/PageFooter.vue";
+import TagList from "@/components/tags/TagList.vue";
+
+@Options({
+    components: {
+        PageHeader,
+        PageFooter,
+        TagList,
+    },
+})
+export default class App extends Vue {}
+</script>

src/components/ArrowImage.vue

@@ -0,0 +1,16 @@
+<template>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    >
+        <line x1="5" y1="12" x2="19" y2="12"></line>
+        <polyline points="12 5 19 12 12 19"></polyline>
+    </svg>
+</template>

src/components/footer/PageFooter.vue

@@ -0,0 +1,34 @@
+<template>
+    <footer>
+        <div class="credits">
+            <p>Designed and developed by Daniel de Cloet.</p>
+            <p>
+                Built with
+                <a target="_blank" href="https://vuejs.org">Vue.js</a>. Iconset
+                provided by
+                <a target="_blank" href="https://fontawesome.com/"
+                    >Font Awesome</a
+                >. View the
+                <a
+                    target="_blank"
+                    href="https://git.chaoticlogic.us/daniel/personal-website/"
+                    >source code</a
+                >.
+            </p>
+        </div>
+        <social-links />
+    </footer>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+import SocialLinks from "./SocialLinks.vue";
+
+@Options({
+    components: {
+        SocialLinks,
+    },
+})
+export default class PageFooter extends Vue {}
+</script>

src/components/footer/SocialLinks.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="social-links">
+        <ul>
+            <li>
+                <a href="https://github.com/Daniel-I-Am"
+                    ><i class="fa-brands fa-github"></i
+                ></a>
+            </li>
+            <li>
+                <a href="https://git.chaoticlogic.us/daniel/"
+                    ><i class="fa-brands fa-gitlab"></i
+                ></a>
+            </li>
+            <li>
+                <a href="https://www.linkedin.com/in/daniel-de-cloet-11254a182/"
+                    ><i class="fa-brands fa-linkedin"></i
+                ></a>
+            </li>
+        </ul>
+    </div>
+</template>

src/components/header/HeaderBrand.vue

@@ -0,0 +1,39 @@
+<template>
+    <router-link :to="{ name: 'home' }" class="brand">
+        <img
+            src="//via.placeholder.com/256"
+            alt="Brand Logo"
+            class="brand-logo"
+        />
+        <span class="brand-name">Daniel de Cloet</span>
+    </router-link>
+</template>
+
+<style lang="scss" scoped>
+@import "@/style/variables";
+
+.brand {
+    display: flex;
+    text-decoration: none;
+    color: $text-color;
+    user-select: none;
+
+    .brand-logo {
+        width: auto;
+        height: $brand-height;
+    }
+
+    .brand-name {
+        line-height: $brand-height;
+        vertical-align: middle;
+        font-size: 28px;
+
+        margin-left: 2rem;
+
+        @media (max-width: $sm) {
+            font-size: 20px;
+            margin-left: 1rem;
+        }
+    }
+}
+</style>

src/components/header/HeaderHero.vue

@@ -0,0 +1,46 @@
+<template>
+    <section class="hero">
+        <h1>I'm Daniel, junior software engineer</h1>
+        <p>
+            I am a student pursuing a Bachelor's in Computer Science, with a
+            software engineering specialization. <br />
+            I have a love for discovering new technologies and inventing unique
+            solutions to complex problems.
+        </p>
+    </section>
+</template>
+
+<style lang="scss" scoped>
+@import "@/style/variables";
+
+section.hero {
+    max-width: 60%;
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+
+    @media (max-width: $lg) {
+        max-width: 75%;
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+
+    @media (max-width: $md) {
+        max-width: 100%;
+        margin-top: 1rem;
+    }
+
+    h1 {
+        color: $primary;
+        font-size: 2.5rem;
+
+        @media (max-width: $md) {
+            font-size: 1.5rem;
+        }
+    }
+
+    p {
+        font-size: 14px;
+        line-height: 2;
+    }
+}
+</style>

src/components/header/HeaderNavigation.vue

@@ -0,0 +1,54 @@
+<template>
+    <nav class="site-nav">
+        <ul class="nav-items">
+            <li class="nav-item">
+                <router-link :to="{ name: 'snippets' }">Snippets</router-link>
+            </li>
+        </ul>
+    </nav>
+</template>
+
+<style lang="scss" scoped>
+@import "@/style/variables";
+
+.site-nav {
+    flex-grow: 1;
+    max-width: 250px;
+
+    .nav-items {
+        display: flex;
+        justify-content: space-between;
+        list-style: none;
+        padding: 0;
+
+        .nav-item {
+            text-align: center;
+
+            a {
+                text-decoration: none;
+                font-size: 1.1rem;
+                color: $text-color;
+
+                &:hover {
+                    color: darken($text-color, 15%);
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: $md) {
+    .site-nav {
+        flex-grow: unset;
+        max-width: unset;
+
+        .nav-items {
+            justify-content: unset;
+
+            .nav-item {
+                flex-basis: 100%;
+            }
+        }
+    }
+}
+</style>

src/components/header/HeaderWave.vue

@@ -0,0 +1,14 @@
+<template>
+    <div class="wave">
+        <svg
+            preserveAspectRatio="none"
+            width="1440"
+            height="74"
+            viewBox="0 0 1440 74"
+        >
+            <path
+                d="M456.464 0.0433865C277.158 -1.70575 0 50.0141 0 50.0141V74H1440V50.0141C1440 50.0141 1320.4 31.1925 1243.09 27.0276C1099.33 19.2816 1019.08 53.1981 875.138 50.0141C710.527 46.3727 621.108 1.64949 456.464 0.0433865Z"
+            ></path>
+        </svg>
+    </div>
+</template>

src/components/header/PageHeader.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="home-header">
+        <div class="container">
+            <header>
+                <header-brand />
+                <header-navigation />
+            </header>
+            <header-hero />
+        </div>
+        <header-wave />
+    </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+import HeaderBrand from "./HeaderBrand.vue";
+import HeaderHero from "./HeaderHero.vue";
+import HeaderNavigation from "./HeaderNavigation.vue";
+import HeaderWave from "./HeaderWave.vue";
+
+@Options({
+    components: {
+        HeaderBrand,
+        HeaderHero,
+        HeaderNavigation,
+        HeaderWave,
+    },
+})
+export default class PageHeader extends Vue {}
+</script>

src/components/snippets/SnippetList.vue

@@ -0,0 +1,35 @@
+<template>
+    <section class="snippet-list">
+        <div class="header">
+            <h3>Latest snippets</h3>
+            <div class="all-snippets">
+                <router-link :to="{ name: 'snippets' }">
+                    All snippets
+                </router-link>
+            </div>
+        </div>
+        <div class="list">
+            <ul class="snippet-items">
+                <snippet-list-element />
+            </ul>
+        </div>
+    </section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+import SnippetListElement from "./SnippetListElement.vue";
+
+@Options({
+    components: {
+        SnippetListElement,
+    },
+})
+export default class SnippetList extends Vue {}
+</script>
+
+<style lang="scss">
+@import "@/style/variables";
+@import "@/style/snippet";
+</style>

src/components/snippets/SnippetListElement.vue

@@ -0,0 +1,15 @@
+<template>
+    <li class="snippet-item">
+        <img
+            src="//via.placeholder.com/128"
+            alt="Snippet Topic"
+            class="snippet-image"
+        />
+        <div class="snippet-text">
+            <h4 class="snippet-title">Title</h4>
+            <span class="snippet-date" title="pretty date">
+                relative date
+            </span>
+        </div>
+    </li>
+</template>

src/components/tags/TagList.vue

@@ -0,0 +1,24 @@
+<template>
+    <section class="snippet-common-tags">
+        <h3>Common tags</h3>
+        <ul class="common-tags">
+            <li>
+                <arrow-image />
+                <a href="javascript:void(0)">Some tag</a>
+            </li>
+        </ul>
+    </section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+import ArrowImage from "@/components/ArrowImage.vue";
+
+@Options({
+    components: {
+        ArrowImage,
+    },
+})
+export default class TagList extends Vue {}
+</script>

src/index.pug

@@ -1,18 +0,0 @@
-extends templates/homepage.pug
-
-block main
-  section.snippet-recent
-    .header
-      h3 Latest Snippets
-      .all-snippets
-        a(href="/snippets") All Snippets
-    .list
-      div(insert-data='insertRecentSnippets(this, 5)')
-
-block aside
-  section.snippet-common-tags
-    h3 Common tags
-    ul.common-tags
-      li
-        include partials/arrow.pug
-        a.link(href="javascript:void(0)") Some tag

src/js/app.js

@@ -1,26 +0,0 @@
-const { DateTime } = require('luxon');
-
-require('../sass/main.scss');
-
-window.insertRecentSnippets = (element, amount = 5) => {
-    const snippetTemplate = require('../partials/recent-snippet.pug');
-    const snippets = require('../data/snippets.json');
-    snippets.forEach(snippet => {
-        if (snippet.timeAdded) {
-            const date = DateTime.fromSeconds(snippet.timeAdded);
-            snippet.timeAddedPretty = date.toLocaleString(DateTime.DATETIME_FULL);
-            snippet.timeAddedRelative = date.toRelative({
-                base: DateTime.now(),
-            });
-        }
-    });
-
-    element.outerHTML = snippetTemplate({ snippets });
-}
-
-window.addEventListener('load', () => {
-    document.querySelectorAll('div[insert-data]').forEach(e => {
-        const f = new Function(e.attributes.getNamedItem('insert-data').nodeValue).bind(e);
-        f();
-    });
-});

src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+
+import "./style/main.scss";
+
+createApp(App).use(router).mount("#app");

src/partials/arrow.pug

@@ -1,2 +0,0 @@
-span.arrow
-  | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>

src/partials/footer.pug

@@ -1,25 +0,0 @@
-footer
-  .credits
-    p Designed and developed by Daniel de Cloet.
-    p
-      | Built with
-      |
-      a(href="https://vuejs.org", target='_blank') Vue.js
-      | . Iconset provided by
-      |
-      a(href='https://fontawesome.com/', target='_blank') Font Awesome
-      | . View the
-      |
-      a(href="https://git.chaoticlogic.us/daniel/personal-website/", target='_blank') source code
-      | .
-  .social-links
-    ul
-      li
-        a(href="https://github.com/Daniel-I-Am", target='_blank')
-          i.fa-brands.fa-github
-      li
-        a(href="https://git.chaoticlogic.us/daniel/", target='_blank')
-          i.fa-brands.fa-gitlab
-      li
-        a(href="https://www.linkedin.com/in/daniel-de-cloet-11254a182/", target='_blank')
-          i.fa-brands.fa-linkedin

src/partials/header-wave.pug

@@ -1,2 +0,0 @@
-.wave
-  | <svg preserveAspectRatio="none" width="1440" height="74" viewBox="0 0 1440 74"><path d="M456.464 0.0433865C277.158 -1.70575 0 50.0141 0 50.0141V74H1440V50.0141C1440 50.0141 1320.4 31.1925 1243.09 27.0276C1099.33 19.2816 1019.08 53.1981 875.138 50.0141C710.527 46.3727 621.108 1.64949 456.464 0.0433865Z"></path></svg>

src/partials/header.pug

@@ -1,8 +0,0 @@
-header
-  a.router-link-active.router-link-exact-active.brand(href='/')
-    img.brand-logo(src="//via.placeholder.com/256", alt="Brand Logo")
-    span.brand-name Daniel de Cloet
-  nav.site-nav
-    ul.nav-items
-      li.nav-item
-        a(href="/snippets") Snippets

src/partials/hero.pug

@@ -1,4 +0,0 @@
-section.hero
-  h1 I'm Daniel, junior software engineer
-  p.
-    I am a student pursuing a Bachelor's in Computer Science, with a software engineering specialization. <br> I have a love for discovering new technologies and inventing unique solutions to complex problems.

src/partials/recent-snippet.pug

@@ -1,7 +0,0 @@
-ul.snippet-items
-  each snippet in snippets
-    li.snippet-item
-      img.snippet-image(src="//via.placeholder.com/128", alt="Snippet Topic")
-      .snippet-text
-        h4.snippet-title=snippet.title
-        span.snippet-date(title=snippet.timeAddedPretty)=snippet.timeAddedRelative

src/router/index.ts

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
+import HomeView from "../views/HomeView.vue";
+import SnippetsView from "../views/SnippetsView.vue";
+
+const routes: Array<RouteRecordRaw> = [
+    {
+        path: "/",
+        name: "home",
+        component: HomeView,
+    },
+    {
+        path: "/snippets",
+        name: "snippets",
+        component: SnippetsView,
+    },
+];
+
+const router = createRouter({
+    history: createWebHistory(process.env.BASE_URL),
+    routes,
+});
+
+export default router;

src/sass/_header.scss

@@ -1,78 +0,0 @@
-$brand-height: 64px;
-
-header {
-  display: flex;
-  justify-content: space-between;
-
-  .brand {
-    display: flex;
-    text-decoration: none;
-    color: $text-color;
-    user-select: none;
-
-    .brand-logo {
-      width: auto;
-      height: $brand-height;
-    }
-
-    .brand-name {
-      line-height: $brand-height;
-      vertical-align: middle;
-      font-size: 28px;
-
-      margin-left: 2rem;
-
-      @media (max-width: $sm) {
-        font-size: 20px;
-        margin-left: 1rem;
-      }
-    }
-  }
-
-  .site-nav {
-    flex-grow: 1;
-    max-width: 250px;
-
-    .nav-items {
-      display: flex;
-      justify-content: space-between;
-      list-style: none;
-      padding: 0;
-
-      .nav-item {
-        text-align: center;
-
-        a {
-          text-decoration: none;
-          font-size: 1.1rem;
-          color: $text-color;
-
-          &:hover {
-            color: darken($text-color, 15%);
-          }
-        }
-      }
-    }
-  }
-
-  @media (max-width: $md) {
-    flex-direction: column;
-
-    .site-nav {
-      flex-grow: unset;
-      max-width: unset;
-
-      .nav-items {
-        justify-content: unset;
-
-        .nav-item {
-          flex-basis: 100%;
-        }
-      }
-    }
-  }
-}
-
-#app > .header {
-  margin-bottom: 1rem;
-}

src/sass/_hero.scss

@@ -1,30 +0,0 @@
-section.hero {
-  max-width: 60%;
-  margin-top: 4rem;
-  margin-bottom: 4rem;
-
-  @media (max-width: $lg) {
-    max-width: 75%;
-    margin-top: 2rem;
-    margin-bottom: 2rem;
-  }
-
-  @media (max-width: $md) {
-    max-width: 100%;
-    margin-top: 1rem;
-  }
-
-  h1 {
-    color: $primary;
-    font-size: 2.5rem;
-
-    @media (max-width: $md) {
-      font-size: 1.5rem;
-    }
-  }
-
-  p {
-    font-size: 14px;
-    line-height: 2;
-  }
-}

src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/snippets.pug

@@ -1 +0,0 @@
-extends templates/page.pug

src/style/_header.scss

@@ -0,0 +1,12 @@
+header {
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: $md) {
+    flex-direction: column;
+  }
+}
+
+#app > .header {
+  margin-bottom: 1rem;
+}

src/style/_snippet.scss

@@ -1,6 +1,6 @@
 $snippet-image-size: 24px;
 
-section.snippet-recent {
+section.snippet-list {
   .header {
     display: flex;
     justify-content: space-between;
@@ -21,7 +21,7 @@ section.snippet-recent {
   }
 }
 
-section.snippet-recent,
+section.snippet-list,
 section.snippet {
   .list {
     .snippet-items {
@@ -89,8 +89,8 @@ section.snippet {
   }
 }
 
-section.snippet-popular {
+section.snippet-common-tags {
-  .popular-items {
+  .common-tags {
     list-style: none;
     padding: 0;
 

src/style/_variables.scss

@@ -30,3 +30,6 @@ $md: 768px;
 $lg: 992px;
 $xl: 1200px;
 $xxl: 1400px;
+
+// Header
+$brand-height: 64px;

src/style/main.scss

@@ -12,8 +12,6 @@
 
 // Component specific styling
 @import "header";
-@import "hero";
-@import "snippet";
 @import "footer";
 @import "home";
 @import "pagination";

src/templates/homepage.pug

@@ -1,4 +0,0 @@
-extends page.pug
-
-block variables
-  - var isHome = true;

src/templates/page.pug

@@ -1 +0,0 @@
-extends skeleton.pug

src/templates/skeleton.pug

@@ -1,26 +0,0 @@
-block variables
-
-doctype html
-html(lang='en')
-  head
-    meta(charset='UTF-8')
-    meta(http-equiv='X-UA-Compatible', content='IE=edge')
-    meta(name='viewport', content='width=device-width, initial-scale=1.0')
-    title Portfolio - Daniel de Cloet
-  body.page-home
-    #app
-      .home-header
-        .container
-          include ../partials/header.pug
-          - if (isHome)
-            include ../partials/hero.pug
-        - if (isHome)
-          include ../partials/header-wave.pug
-      .container
-        .split-content
-          main
-            block main
-          aside
-            block aside
-      .container
-        include ../partials/footer.pug

src/views/HomeView.vue

@@ -0,0 +1,16 @@
+<template>
+    <snippet-list />
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+import SnippetList from "@/components/snippets/SnippetList.vue";
+
+@Options({
+    components: {
+        SnippetList,
+    },
+})
+export default class HomeView extends Vue {}
+</script>

src/views/SnippetsView.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="about">
+        <h1>This is an about page</h1>
+    </div>
+</template>

tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

vue.config.js

@@ -0,0 +1,4 @@
+const { defineConfig } = require("@vue/cli-service");
+module.exports = defineConfig({
+  transpileDependencies: true,
+});

webpack.config.js

@@ -1,75 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-function getPugHtmlPluginEntries(basepath) {
-    const pugTemplateFiles = fs.readdirSync(basepath)
-        .filter(file => path.extname(file).toLowerCase() === '.pug');
-
-    return pugTemplateFiles.map(pugFileName => new HtmlWebpackPlugin({
-        inject: true,
-        hash: false,
-        filename: `${path.parse(pugFileName).name}.html`,
-        template: path.join(basepath, pugFileName),
-    }));
-}
-
-module.exports = (env, argv) => {
-    const isDevelopment = argv.mode === 'development';
-
-    return {
-        entry: {
-            app: './src/js/app.js',
-        },
-        output: {
-            path: path.resolve(__dirname, 'build'),
-            filename: "[name].bundle.js",
-        },
-        devServer: {
-            port: 3000,
-        },
-        plugins: [
-            ...getPugHtmlPluginEntries('./src'),
-            new MiniCssExtractPlugin({
-                filename: isDevelopment ? '[name].css' : '[name].[hash].css',
-                chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css',
-            }),
-        ],
-        module: {
-            rules: [
-                {
-                    test: /\.pug$/,
-                    use: ["pug-loader"],
-                },
-                {
-                    test: /\.scss$/,
-                    use: [
-                        isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader,
-                        "css-loader",
-                        {
-                            loader: "sass-loader",
-                            options: {
-                                sourceMap: isDevelopment,
-                            },
-                        },
-                    ],
-                },
-                {
-                    test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
-                    use: [
-                        {
-                            loader: 'file-loader',
-                            options: {
-                                outputPath: 'fonts',
-                            },
-                        }
-                    ],
-                }
-            ],
-        },
-        resolve: {
-            extensions: ['.js', '.scss'],
-        },
-    };
-}