continue migration: make website working

assets/index.js

@@ -0,0 +1,5 @@
+import './js';
+import './styles.scss';
+import './noscript.scss';
+import './vue';
+

assets/js/index.js

@@ -0,0 +1,14 @@
+import Vue from 'vue';
+import Buefy from 'buefy';
+
+Vue.use(Buefy);
+
+window.addEventListener('load', () => {
+    var app = new Vue({
+      el: '#app',
+      delimiters: [ '[[', ']]' ],
+    })
+});
+
+
+

assets/noscript.scss

@@ -0,0 +1,6 @@
+
+/**[noscript="hidden"] {
+    display: none;
+}*/
+
+

assets/styles.scss

@@ -0,0 +1,75 @@
+@charset "utf-8";
+@import "~bulma/sass/utilities/_all.sass";
+
+$body-background-color: $light;
+
+@import "~bulma/bulma";
+
+.navbar {
+    margin-bottom: 1em;
+}
+
+.navbar.has-shadow {
+    box-shadow: 0em 0.05em 0.5em rgba(0,0,0,0.1);
+}
+
+/*
+
+
+.navbar-brand img {
+    min-height: 6em;
+}
+
+.navbar-menu .navbar-item:not(:last-child) {
+    border-right: 1px $grey solid;
+}
+*/
+
+
+/** page **/
+.page {
+    & > .cover {
+        float: right;
+        max-width: 45%;
+    }
+
+    & > .header {
+        margin-bottom: 1.5em;
+    }
+
+    .headline {
+        font-size: 1.4em;
+        padding: 0.2em 0em;
+    }
+
+    p {
+        padding: 0.4em 0em;
+    }
+}
+
+
+.cover {
+    margin: 1em 0em;
+    border: 0.2em black solid;
+}
+
+.small-cover {
+    width: 10em;
+}
+
+aside {
+    .small-cover {
+        width: 4em;
+    }
+
+    .media .subtitle {
+        font-size: 1em;
+    }
+
+    .media .content {
+        display: none;
+    }
+}
+
+
+

assets/vue/deck.vue

@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <a-tabs class="tabs" @select="value = $event.value;">
+            <template v-slot:default><slot name="tabs" :value="value"/></template>
+        </a-tabs>
+
+        <slot :value="value"></slot>
+    </div>
+</template>
+
+
+<script>
+import Tabs from './tabs.vue';
+
+export default {
+    props: ['default'],
+
+    data() {
+        return {
+            value: this.default,
+        }
+    },
+
+    components: {
+        'a-tabs': Tabs,
+    }
+}
+</script>

assets/vue/index.js

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+
+import Tab from './tab.vue';
+import Tabs from './tabs.vue';
+
+Vue.component('a-tab', Tab);
+Vue.component('a-tabs', Tabs);
+
+export {Tab, Tabs};
+
+

assets/vue/tab.vue

@@ -0,0 +1,31 @@
+<template>
+    <li @click.prevent="onclick"
+        :class="{'is-active': $parent.value == value}">
+        <slot></slot>
+    </li>
+</template>
+
+<script>
+export default {
+    props: {
+        value: { default: undefined },
+    },
+
+    methods: {
+        select() {
+            this.$parent.selectTab(this);
+        },
+
+        onclick(event) {
+            this.select();
+            /*if(event.target.href != document.location)
+                window.history.pushState(
+                    { url: event.target.href },
+                    event.target.innerText + ' - ' + document.title,
+                    event.target.href
+                ) */
+        }
+    }
+}
+</script>
+

assets/vue/tabs.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <div class="tabs is-centered">
+            <ul><slot name="tabs" :value="value" /></ul>
+        </div>
+
+        <slot :value="value"/>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        default: { default: null },
+    },
+
+    data() {
+        return {
+            value: this.default,
+        }
+    },
+
+    computed: {
+        tab() {
+            const vnode = this.$slots.default && this.$slots.default.find(
+                elm => elm.child && elm.child.value == this.value
+            );
+            return vnode && vnode.child;
+        }
+    },
+
+    methods: {
+        selectTab(tab) {
+            const value = tab.value;
+            if(this.value === value)
+                return;
+
+            this.value = value;
+            this.$emit('select', {target: this, value: value, tab: tab});
+        },
+    },
+}
+</script>
+
+