POC frontend setup w/ static data.

frontend/blog-init.js

@@ -0,0 +1,17 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import { routes } from "@/routes.js";
+
+import Home from "@/home";
+
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+  routes: routes
+});
+
+new Vue({
+  router,
+  components: { Home },
+  template: "<Home/>",
+}).$mount("#app");

frontend/components/PostPreview.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <h2>{{ post.title }}</h2>
+    <p><span>{{ post.date }}</span> by <span>{{ post.author }}</span></p>
+
+    <img v-if="post.thumbnail" :src="post.thumbnail" />
+
+    <div class="preview">
+      <p>{{ post.description }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    post: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+h2 {
+  font-size: 2rem;
+}
+
+img {
+  width: 100%;
+}
+
+p, span {
+  font-family: monospace;
+}
+</style>

frontend/home.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="container">
+    <h1>Kevin's lab</h1>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      message: "Home"
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "styles/global.scss";
+
+body {
+  background-color: #f7f4ec;
+  color: #342519;
+}
+</style>
+
+<style lang="scss" scoped>
+.container {
+  margin: 2rem;
+}
+
+h1 {
+  font-size: 3rem;
+  text-transform: uppercase;
+}
+</style>

frontend/pages/LandingPage.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <post-preview v-for="post in posts" :post="post"></post-preview>
+  </div>
+</template>
+
+<script>
+import PostPreview from "@/components/PostPreview";
+
+export default {
+  components: { PostPreview },
+  data() {
+    return {
+      posts: [{
+        title: "Welcome to Kevin's lab!",
+        date: new Date(),
+        author: "Kevin",
+        description: "Welcome to the technical ramblings that go on in my brain. I will post information about my homelab, projects I undergo and tutorials as I find similar blogs on the internet very inspiring and informational; I can only hope that the same comes across here."
+      },
+      {
+        title: "Building (another) NAS.",
+        date: new Date(),
+        author: "Kevin",
+        thumbnail: "https://blog.monstermuffin.org/wp-content/uploads/2020/09/DSC05655-1024x683.jpg",
+        description: `Building Another NAS.
+A lot has changed in my life over the last 6 months or so, moving out of my flat and quitting my job to travel the world only to have 2020 suck all meaning out of every fibre of my being making me yearn for the eventuality of Earth being obliterated into inexistence, but until that time my storage as of late left much to be desired.
+
+I have been reminded, daily, by my Macbook that my last backup was almost 1 year ago and on top of this the storage I use at home is nearing it’s capacity as well as being degraded. I’ve been overlooking these things for quite some time but I have finally decided to remedy the situation.
+
+Join me on my newest endeavour to build a new NAS, or don’t of course.`
+      }]
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/media-queries.scss';
+@import '@/styles/variables.scss';
+
+section {
+  width: 90vw;
+  margin: 0 auto;
+}
+</style>

frontend/pages/PostPage.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <h2>{{ post.title }}</h2>
+
+    <article>
+      <p>{{ post.date }} by {{ post.author }}</p>
+
+      <img :src="post.thumbnail" />
+      <p v-html="post.description"></p>
+    </article>
+  </div>
+</template>
+
+<script>
+import { humanReadableDate } from "@/utils";
+
+export default {
+  data() {
+    return {
+      post: {
+        title: "Building (another) NAS.",
+        date: humanReadableDate(new Date()),
+        author: "Kevin",
+        thumbnail: "https://blog.monstermuffin.org/wp-content/uploads/2020/09/DSC05655-1024x683.jpg",
+        description: `<p>Building Another NAS.
+A lot has changed in my life over the last 6 months or so, moving out of my flat and quitting my job to travel the world only to have 2020 suck all meaning out of every fibre of my being making me yearn for the eventuality of Earth being obliterated into inexistence, but until that time my storage as of late left much to be desired.</p>
+
+<p>I have been reminded, daily, by my Macbook that my last backup was almost 1 year ago and on top of this the storage I use at home is nearing it’s capacity as well as being degraded. I’ve been overlooking these things for quite some time but I have finally decided to remedy the situation.</p>
+
+<p>Join me on my newest endeavour to build a new NAS, or don’t of course.</p>` 
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+h2 {
+  font-size: 3rem;
+  text-align: center;
+  margin-top: 4rem;
+}
+
+article {
+  margin: 0 auto;
+  width: 80vw;
+
+  font-size: 1.2rem;
+}
+
+img {
+  width: 100%;
+}
+</style>

frontend/routes.js

@@ -0,0 +1,15 @@
+import LandingPage from '@/pages/LandingPage';
+import PostPage from '@/pages/PostPage';
+
+const routes = [
+  {
+    path: "/",
+    component: LandingPage 
+  },
+  {
+    path: "/post/:id",
+    component: PostPage
+  }
+]
+
+export { routes };

frontend/styles/global.scss

@@ -0,0 +1,36 @@
+
+@font-face {
+  font-family: Moderat;
+  font-weight: normal;
+  font-style: normal;
+  src: url(/public/assets/fonts/Moderat-Regular.eot);
+  src: url(/public/assets/fonts/Moderat-Regular.eot?#iefix) format("embedded-opentype"), url(/public/assets/fonts/Moderat-Regular.woff2) format("woff2");
+}
+
+@font-face {
+  font-family: Moderat;
+  font-weight: 700;
+  font-style: normal;
+  src: url(/public/assets/fonts/Moderat-Bold.eot);
+  src: url(/public/assets/fonts/Moderat-Bold.eot?#iefix) format("embedded-opentype"),
+       url(/public/assets/fonts/Moderat-Bold.woff2) format("woff2"),
+       url(/public/assets/fonts/Moderat-Bold.woff) format("woff");
+}
+
+body {
+  font-family: Moderat, Helvetica Neue;
+  margin: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+input,
+textarea {
+  border-radius: 0;
+  box-shadow: none;
+  -webkit-appearance: none;
+  font-size: 1.1rem;
+  border: 1px solid rgba(#333333, 0.3);
+}

frontend/styles/media-queries.scss

@@ -0,0 +1,28 @@
+$mobile-width: 768px;
+$tablet-max: 1200px;
+$desktop-max: 2004px;
+
+
+@mixin mobile {
+  @media (max-width: #{$mobile-width}) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (min-width: #{$mobile-width + 1px}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: #{$tablet-max + 1px}) {
+    @content;
+  }
+}
+
+@mixin widescreen {
+  @media (min-width: #{$desktop-max + 1px}){
+    @content;
+  }
+}

frontend/styles/variables.scss

@@ -0,0 +1,2 @@
+
+$color-primary: #6ec800;

frontend/templates/Index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Kevin' lab</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content=""
+    />
+    <meta name="keywords" content="" />
+    <meta name="author" content="Kevin Midbøe" />
+
+    <meta
+      name="description"
+      content=""
+    />
+
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <script src="/public/analytics.js" async></script>
+  </body>
+</html>
+
+<style>
+</style>

frontend/utils.js

@@ -0,0 +1,11 @@
+
+const humanReadableDate = (date) => {
+  const day = date.getDate();
+  const month = date.toLocaleString('default', { month: 'long' });
+  const year = date.getFullYear();
+  return `${ day } ${ month }, ${ year }`;
+}
+
+export {
+  humanReadableDate
+}