Rewrite about page with Vue

package-lock.json

@@ -1641,15 +1641,6 @@
       "integrity": "sha512-5Hlm13BJVAioCHpImtFqNOF2H3ieTOHd0fmFGMxOJ9jgeFqeAwsv3u5P5cR7CSeFrkgHsT19DgFJkHV0/Mcd8g==",
       "dev": true
     },
-    "backbone": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/backbone/-/backbone-1.3.3.tgz",
-      "integrity": "sha1-TMgOp8sWMaxHSInOQPL4vGg7KZk=",
-      "dev": true,
-      "requires": {
-        "underscore": ">=1.8.3"
-      }
-    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -5785,12 +5776,6 @@
         "is-object": "^1.0.1"
       }
     },
-    "jquery": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
-      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==",
-      "dev": true
-    },
     "js-base64": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.0.tgz",

package.json

@@ -8,9 +8,7 @@
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.6.1",
-    "backbone": "^1.3.3",
     "css-loader": "^0.28.11",
-    "jquery": "^3.3.1",
     "node-sass": "^4.9.0",
     "predictor": "git+https://github.com/anwinged/predictor.git",
     "prettier": "^1.12.1",

source/_assets/about_me/about.vue

@@ -0,0 +1,71 @@
+<template>
+    <section class="app">
+        <p class="note">{{ fact }}</p>
+        <button @click.prevent="next" class="button-next">Узнать чуть лучше</button>
+    </section>
+</template>
+
+<script>
+import _ from 'underscore';
+import Metrika from '../common/metrika';
+
+const NOTES = [
+    'Люблю фильм "Три идиота".',
+    'Люблю кататься на велосипеде.',
+    'Люблю читать фантастические книги.',
+    'Люблю шоколад.',
+    'На день рождения ко мне можно прийти без подарка.',
+    'Не люблю пьяных людей.',
+    'Предпочитаю ходить в кино на 2D-сеансы.',
+    'Проехал на велосипеде 200 километров за день.',
+    'Работаю программистом.',
+    'Хотел бы побывать в горах.',
+];
+
+export default {
+    data() {
+        return {
+            notes: NOTES,
+            shown: [],
+            fact: '',
+        };
+    },
+    mounted() {
+        this.pick();
+    },
+    methods: {
+        next() {
+            this.pick();
+            Metrika.hit(location.href);
+        },
+        pick() {
+            let available = _.difference(this.notes, this.shown);
+            if (_.size(available) === 0) {
+                available = this.notes;
+                this.shown = [];
+            }
+            const fact = _.sample(available);
+            this.shown.push(fact);
+            this.fact = fact;
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@import '../components/button';
+.app {
+    text-align: center;
+}
+
+.note {
+    display: block;
+    font-size: 160%;
+    margin: 2em auto;
+    min-height: 3em;
+}
+
+.button-next {
+    @extend %button;
+}
+</style>

source/_assets/about_me/index.js

@@ -1,61 +1,7 @@
-import $ from 'jquery';
+import Vue from 'vue';
-import _ from 'underscore';
+import About from './about.vue';
-import Backbone from 'backbone';
-import Metrika from '../common/metrika';
-import './style.scss';
 
-const PageView = Backbone.View.extend({
+new Vue({
-    notes: [
+    el: '#app',
-        'Люблю фильм "Три идиота".',
+    render: h => h(About),
-        'Люблю кататься на велосипеде.',
-        'Люблю читать фантастические книги.',
-        'Люблю шоколад.',
-        'На день рождения ко мне можно прийти без подарка.',
-        'Не люблю пьяных людей.',
-        'Предпочитаю ходить в кино на 2D-сеансы.',
-        'Проехал на велосипеде 200 километров за день.',
-        'Работаю программистом.',
-        'Хотел бы побывать в горах.',
-    ],
-
-    shown: [],
-
-    events: {
-        'click #know-better': 'onClickKnowBetter',
-    },
-
-    initialize() {
-        this.render();
-    },
-
-    render() {
-        this.showRandomFact();
-        return this;
-    },
-
-    pickRandomFact() {
-        let available = _.difference(this.notes, this.shown);
-        if (_.size(available) === 0) {
-            available = this.notes;
-            this.shown = [];
-        }
-
-        const phrase = _.sample(available);
-        this.shown.push(phrase);
-
-        return phrase;
-    },
-
-    showRandomFact() {
-        const fact = this.pickRandomFact();
-        this.$('#about-me-note').text(fact);
-    },
-
-    onClickKnowBetter(evt) {
-        evt.preventDefault();
-        this.showRandomFact();
-        Metrika.hit(location.href);
-    },
 });
-
-new PageView({ el: $('.js-about-me') });

source/_assets/about_me/style.scss

@@ -1,31 +0,0 @@
-.about-me {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &__content {
-        margin-top: 4em;
-    }
-
-    &__note {
-        text-align: center;
-        font-size: 160%;
-        max-width: 400px;
-        min-height: 3em;
-    }
-
-    &__links {
-        padding: 0;
-        margin-top: 2.5em;
-        list-style: none;
-        text-align: center;
-    }
-
-    &__link {
-        display: inline-block;
-    }
-
-    &__link + &__link {
-        margin-left: 1em;
-    }
-}

source/_assets/components/button.scss

@@ -1,12 +1,20 @@
 @import '../vars';
 
+$button-border-radius: 0.5em;
+$button-background-color: #405480;
+
 %button {
     display: inline-block;
     color: #fff;
-    background-color: #405480;
+    background-color: $button-background-color;
     padding: 0.6em 1.2em;
     border: none;
     font-size: 100%;
     font-family: inherit;
     border-radius: $button-border-radius;
+    cursor: pointer;
+
+    &:hover {
+        background-color: darken($button-background-color, 10%);
+    }
 }

source/_assets/predictor/demo.vue

@@ -80,7 +80,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../vars.scss';
 @import '../components/button';
 
 .app {

source/_assets/vars.scss

@@ -9,5 +9,3 @@ $preferred-width: 700px;
 $first-media-step: $preferred-width - 1px;
 
 $mobile-margin: 0.8em;
-
-$button-border-radius: 0.5em;

source/about/me.html.twig

@@ -9,16 +9,6 @@ title: Обо мне
 
 {% block content %}
 
-  <section class="about-me js-about-me">
+  <div id="app"></div>
-    <div class="about-me__content">
-
-      <p class="about-me__note" id="about-me-note"></p>
-
-      <p class="about-me__links">
-        <a id="know-better" href="#">Узнать чуть лучше</a>
-      </p>
-
-    </div>
-  </section>
 
 {% endblock %}