diff --git a/LICENSE b/LICENSE index d449d3e..b92add2 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) +Copyright (c) 2019 Alexander I. Chebykin Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 7031faa..b132af0 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,18 @@ # VueJS -Самоучитель по VueJS \ No newline at end of file +Самоучитель по VueJS + +## Установка +``` +yarn install +``` + +### Компиляция и запуск для разработки +``` +yarn run serve +``` + +### Сборка финальной версии +``` +yarn run build +``` \ No newline at end of file diff --git a/package.json b/package.json index f1f158c..1e95af9 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "lint": "vue-cli-service lint" }, "dependencies": { + "@mdi/font": "^3.6.95", "axios": "^0.19.0", "core-js": "^2.6.5", "vue": "^2.6.10", @@ -15,6 +16,7 @@ "vuetify": "^1.5.5" }, "devDependencies": { + "@fortawesome/fontawesome-free": "^5.9.0", "@vue/cli-plugin-babel": "^3.8.0", "@vue/cli-plugin-eslint": "^3.8.0", "@vue/cli-service": "^3.8.0", diff --git a/public/data/id301.html b/public/data/id301.html index 3dc8050..ab8f4e3 100644 --- a/public/data/id301.html +++ b/public/data/id301.html @@ -2,25 +2,25 @@

Создать проект можно двумя способами: из терминала или при помощи веб-интерфейса. Рассмотрим оба способа.

    -
  1. Из терминала, для этого следует выполнить команду vue create _название_проекта_
    2. -
  2. В веб-интерфейсе, запустив его командой vue ui
    3. +
  3. Из терминала, для этого следует выполнить команду vue create _название_проекта_
    4. +
  4. В веб-интерфейсе, запустив его командой vue ui

При создании проекта выберите параметры по умолчанию с установкой babel и eslint.

- Каркас приложения мы создали, можно посмотреть что получилось выполнив команду yarn serve или - npm run serve. Вдоволь налюбовавшись результатом, добавим к проекту библиотеку интерфейса - Vuetify, выполнив команду vue add vuetify. Установщик задаст вам единственный вопрос - какие + Каркас приложения мы создали, можно посмотреть что получилось выполнив команду yarn serve или + npm run serve. Вдоволь налюбовавшись результатом, добавим к проекту библиотеку интерфейса + Vuetify, выполнив команду vue add vuetify. Установщик задаст вам единственный вопрос - какие предустановки вы хотите выбрать (Choose a preset), нас устроит набо по умолчанию (default).

- запустив yarn serve сейчас, вы увидите, что внешний вид нашего приложения несколько изменился, + запустив yarn serve сейчас, вы увидите, что внешний вид нашего приложения несколько изменился, в нём появились компоненты библиотеки Vuetify. Этот вариант мы и возьмём за основу нашего приложения.

Клонирование проекта

Текущую версию проекта можно также получить с Git, для этого создайте каталог проекта, перейдите в него - и клонируйте командой git clone https://home.cainet.info:3000/cai/VueJS.git. + и клонируйте командой git clone https://home.cainet.info:3000/cai/VueJS.git.

\ No newline at end of file diff --git a/public/data/id302.html b/public/data/id302.html index 410546c..a409a0d 100644 --- a/public/data/id302.html +++ b/public/data/id302.html @@ -6,7 +6,7 @@

А ненужное - это компонент HelloWorld и все ссылки на него. Смело удаляйте файл HelloWorld.vue из каталога src/components/, а файл App.vue приведите к следующему виду: -

+ 
 <template>
     <v-app>
@@ -44,13 +44,18 @@

+

+ Наш компонент будет использовать Material Design Icons, потому начнём с того, что подключим их. Для это выполните команду yarn add @mdi/font, + а после того как пакет установится, добавьте в самое начало файла main.js строку import '@mdi/font/css/materialdesignicons.css'. Всё, теперь + можно переходить к написанию самого компонента. +

Vuetify неплохо документирован и имеет множество примеров, одним из них мы и воспользуемся при создании компонента оглавления. За основу возьмём один из примеров со страницы https://next.vuetifyjs.com/ru/components/treeview и приведём его к следующему виду: -

+ 
 <template>
     <v-card class="mx-auto">
@@ -88,7 +93,7 @@
                 <template v-slot:prepend="{ item }">
                     <v-icon
                         v-if="item.children"
-                        v-text="`mdi-${item.id === 1 ? 'home-variant' : 'folder-network'}`"
+                        v-text="`mdi-${open ? 'book-open-variant' : 'book-variant'}`"
                     >
                     </v-icon>
                 </template>
@@ -142,7 +147,7 @@
     недоразумение добавлением в блок <script></script> строки
     import TOC from './components/TOC' и чуть ниже в components: {}, строку
     TOC. В итоге App.vue должен выглядеть следующим образом:
-    

+    

         
 <template>
     <v-app>
@@ -193,15 +198,15 @@
     текста. Про двенадцатиточечную систему сеток Vutify можно прочитать тут:
     https://vuetifyjs.com/ru/framework/grid.
     Приведём блок <v-content></v-content> к следующему виду:
-    

+    

         
 <v-content>
     <v-container fluid fill-height grid-list-md>
         <v-layout row wrap full-height>
-            <v-flex sm4>
+            <v-flex sm5 md4 lg3>
                 <TOC/>
             </v-flex>
-            <v-flex sm8 v-html="text"></v-flex>
+            <v-flex sm7 md8 lg9 v-html="text"></v-flex>
         </v-layout>
     </v-container>
 </v-content>
@@ -219,7 +224,7 @@
     вылезут за пределы блока меню... Непорядок! К счастью, исправить сиё недоразумение несложно, просто добавьте в
     наш компонент (TOC.vue) блок стилей:
 
-    

+    

         
 <style>
     .v-treeview-node__content, .v-treeview-node__label {
diff --git a/public/data/id303.html b/public/data/id303.html
index 4da566a..a2ffd78 100644
--- a/public/data/id303.html
+++ b/public/data/id303.html
@@ -7,9 +7,9 @@
 

     Для начала нам понадобится Axios (
     https://yarnpkg.com/ru/package/axios), именно с его помощью мы будем загружать наши json и html файлы.
-    Установим его командой yarn add axios vue-axios, после чего добавим в main.js строки для его
+    Установим его командой yarn add axios vue-axios, после чего добавим в main.js строки для его
     подключения. Выглядеть он у вас должен следующим образом:
-    

+    

         
 import Vue from 'vue'
 import Axios from 'axios'
@@ -32,7 +32,7 @@ new Vue({
     о разделах, для этого строку items в блоке data приведём к виду items: [], после чего перейдём к
     App.vue и в секцию export добавим mounted () {}. Здесь мы в дальнейшем добавим код, исполняемый при
     запуске нашего приложения. Блок <script></script> должен выглядеть следующим образом:
-    

+    

             
 <script>
     import TOC from './components/TOC'
@@ -63,7 +63,7 @@ new Vue({
 

 

     Итак, добавим в секцию mounted код загрузки оглавления:
-    

+    

         
 mounted () {
     this.axios.get("data/toc.json")
@@ -88,7 +88,7 @@ mounted () {
     принципы работы нашего компонента. Каждый раз при выборе элемента, у компонента изменяется свойство active и
     нам надо отслеживать его изменение в App.vue. Для этого добавим в mounted файла App.vue следующий код:
 
-    

+    

         
 this.$watch(
     "$refs.TOC.active",
diff --git a/public/data/id304.html b/public/data/id304.html
index 35d0935..1705cc4 100644
--- a/public/data/id304.html
+++ b/public/data/id304.html
@@ -7,7 +7,7 @@
     https://vuetifyjs.com/ru/components/dialogs,
     немного его модифицировав:
 
-    

+    

         
 <template>
     <v-layout row justify-center>
@@ -21,7 +21,7 @@
                 <v-card-text>{{ text }}</v-card-text>
                 <v-card-actions>
                     <v-spacer></v-spacer>
-                    <v-btn color="green darken-1" flat @click="dialog = false">Ok</v-btn>
+                    <v-btn color="primary" flat @click="dialog = false">Ok</v-btn>
                 </v-card-actions>
             </v-card>
         </v-dialog>
@@ -48,7 +48,7 @@
     строку MessageDialog. Начало блока <sctipt></script> должно выглядеть следующим
     образом:
 
-    

+    

         
 <script>
     import MessageDialog from './components/MessageDialog'
@@ -68,7 +68,7 @@
     <MessageDialog ref="MessageDialog" />, после чего останется только в коде скрипта добавить
     в секции .catch каждого обращения к Axios строки вызова нашего диалога с сообщением об ошибке:
 
-    

+    

         
 .catch(error => {
     console.log(error);
@@ -87,7 +87,7 @@
     том, что оно работает, это нехорошо, давайте выводить при загрузке индикатор. Создадим компонент LoadingDialog.vue
     как всегда воспользовавшись шаблоном vuetify:
 
-    

+    

         
 <template>
     <div class="text-xs-center">
@@ -139,7 +139,7 @@
 

 

     Справились? Теперь добавим код для отображения и скрытия диалога при загрузке файла в секцию mounted:
-    

+    

         
 mounted () {
     this.$refs.LoadingDialog.dialog = true;
@@ -203,5 +203,5 @@ mounted () {
     P.S. Текст данной части можно взять тут: /data/id304.html
 

 

-    P.P.S. Финальную версию можно скомпилировать командой yarn build.
+    P.P.S. Финальную версию можно скомпилировать командой yarn build.
 

\ No newline at end of file
diff --git a/public/data/id305.html b/public/data/id305.html
new file mode 100644
index 0000000..51dde19
--- /dev/null
+++ b/public/data/id305.html
@@ -0,0 +1,190 @@
+
Цветовые схемы

+

+    Наша программа получилась такая светлая-красивая, но в темноте пользоваться ей неудобно, яркий свет от экрана слишком бьёт по глазам, предлагаю
+    перейти на тёмную сторону сделать тёмный вариант интерфейса.
+

+

+    Открывайте основной модуль нашего приложения App.vue. В блоке <script> найдите секцию data () и добавьте в неё переменную dark
+    со значением по умолчанию равным false, это будет флаг использования тёмной версии интерфейса. После этого в блоке <template> измените
+    <v-app> на <v-app :dark="dark">, этим мы свяжем наш флаг использования тёмной версии с назначением соответствующего
+    CSS-класса главному элементу программы.
+

+

+    Попробуйте изменить в data () значение переменной dark на true, ваше приложение станет тёмным. Получилось? Теперь прикрутим меню с пунктом для
+    переключения вариантов интерфейса, для этого в конец блока <v-toolbar> добавим следующий код:
+    

+        
+<v-menu bottom left>
+    <template v-slot:activator="{ on }">
+        <v-btn
+            flat
+            icon
+            v-on="on"
+        >
+            <v-icon>more_vert</v-icon>
+        </v-btn>
+    </template>
+
+    <v-list>
+        <v-list-tile>
+            <v-list-tile-action>
+                <v-switch v-model="dark" color="blue"></v-switch>
+            </v-list-tile-action>
+            <v-list-tile-title>Тёмная схема</v-list-tile-title>
+        </v-list-tile>
+    </v-list>
+</v-menu>
+        

+    

+    Теперь у нас есть переключатель темы, но при каждой повторной загрузке тема всегда включается светлая, реализуем сохранение значения флага в
+    cookies, для этого в блоке <script> добавим секцию watch с кодом, отслеживающим изменение флага dark и сохраняющим
+    его значение в localSorage:
+    

+        
+watch: {
+    dark (val) { localStorage.dark = val; }
+}
+        

+    

+

+

+    Сохранение сделали, сделаем и чтение сохранённой информации, добавив в секцию mounted строку
+    this.dark = localStorage.dark ? JSON.parse(localStorage.dark) : false;. После чего наш App.vue должен выглядеть следующим образом:
+    

+        
+<template>
+    <v-app :dark="dark">
+        <v-toolbar app>
+            <v-toolbar-title class="headline text-uppercase">
+                <span>Vue.js:</span>
+                <span class="font-weight-light">Самоучитель</span>
+            </v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-btn
+                flat
+                href="https://home.cainet.info:3000/cai/VueJS/"
+                target="_blank"
+            >
+                <span class="mr-2">Актуальная версия</span>
+            </v-btn>
+            <v-menu bottom left>
+                <template v-slot:activator="{ on }">
+                    <v-btn
+                        flat
+                        icon
+                        v-on="on"
+                    >
+                        <v-icon>more_vert</v-icon>
+                    </v-btn>
+                </template>
+
+                <v-list>
+                    <v-list-tile>
+                        <v-list-tile-action>
+                            <v-switch v-model="dark" color="blue"></v-switch>
+                        </v-list-tile-action>
+                        <v-list-tile-title>Тёмная схема</v-list-tile-title>
+                    </v-list-tile>
+                </v-list>
+            </v-menu>
+        </v-toolbar>
+
+        <v-content>
+            <v-container fluid fill-height grid-list-md>
+                <v-layout row wrap full-height>
+                    <v-flex sm4>
+                        <TOC ref="TOC" />
+                    </v-flex>
+                    <v-flex sm8 v-html="text"></v-flex>
+                </v-layout>
+            </v-container>
+        </v-content>
+        <LoadingDialog ref="LoadingDialog" />
+        <MessageDialog ref="MessageDialog" />
+    </v-app>
+</template>
+
+<script>
+    import LoadingDialog from './components/LoadingDialog'
+    import MessageDialog from './components/MessageDialog'
+    import TOC from './components/TOC'
+
+    export default {
+        name: 'App',
+
+        components: {
+            LoadingDialog,
+            MessageDialog,
+            TOC
+        },
+
+        data () {
+            return {
+                dark: false,
+                docId: 0,
+                text: ""
+            }
+        },
+
+        mounted () {
+            this.$refs.LoadingDialog.dialog = true;
+            this.dark = localStorage.dark ? JSON.parse(localStorage.dark) : false;
+
+            this.axios.get("data/start.html")
+                .then(response => {
+                    this.text = response.data;
+                    this.$refs.LoadingDialog.dialog = false;
+                })
+                .catch(error => {
+                    this.$refs.LoadingDialog.dialog = false;
+                    console.log(error);
+                    this.$refs.MessageDialog.title = "Ошибка";
+                    this.$refs.MessageDialog.text = error;
+                    this.$refs.MessageDialog.dialog = true;
+                });
+
+            this.$refs.LoadingDialog.dialog = true;
+
+            this.axios.get("data/toc.json")
+                .then(response => {
+                    this.$refs.TOC.items = response.data;
+                    this.$refs.LoadingDialog.dialog = false;
+                })
+                .catch(error => {
+                    this.$refs.LoadingDialog.dialog = false;
+                    console.log(error);
+                    this.$refs.MessageDialog.title = "Ошибка";
+                    this.$refs.MessageDialog.text = error;
+                    this.$refs.MessageDialog.dialog = true;
+                });
+
+            this.$watch(
+                "$refs.TOC.active",
+                (newVal, oldVal) => {
+                    if (newVal.length) {
+                    this.$refs.LoadingDialog.dialog = true;
+                    this.axios.get("data/id" + newVal + ".html")
+                        .then(response => {
+                            this.text = response.data;
+                            this.$refs.LoadingDialog.dialog = false;
+                        })
+                        .catch(error => {
+                            this.$refs.LoadingDialog.dialog = false;
+                            console.log(error);
+                            this.$refs.MessageDialog.title = "Ошибка";
+                            this.$refs.MessageDialog.text = error;
+                            this.$refs.MessageDialog.dialog = true;
+                        });
+                    }
+                }
+            );
+        },
+
+        watch: {
+            dark (val) { localStorage.dark = val; }
+        }
+    }
+</script>
+        

+    

+

\ No newline at end of file
diff --git a/public/data/id306.html b/public/data/id306.html
new file mode 100644
index 0000000..bdc9ffe
--- /dev/null
+++ b/public/data/id306.html
@@ -0,0 +1,230 @@
+
Кнопка возвращения

+

+    Всё у нас вроде бы красиво, но вот проматывать каждый раз страницу вверх после прочтения урока неудобно, добавим кнопку возвращения к началу страницы.
+    Для этого нам потребуется в блок <v-app></v-app> добавить код отображения самой кнопки:
+    

+        
+<v-fab-transition>
+    <v-btn
+        v-show="scrolled"
+        color="blue"
+        @click="scrollToTop"
+        dark
+        fixed
+        bottom
+        right
+        fab
+    >
+        <v-icon>keyboard_arrow_up</v-icon>
+    </v-btn>
+</v-fab-transition>
+        

+    

+

+

+    Как вы уже наверное заметили, кнопка у нас привязана к флагу отображения scrolled, это сделано для того чтобы она отображалась только когда требуется,
+    соответственно вам надо добавить данный флаг в блок data скрипта и назначить ему значение false. Сделали? Теперь добавим отслеживание прокрутки и
+    обработчик нажатия на кнопку - scrollToTop:
+    

+        
+created () {
+    window.addEventListener('scroll', this.onScroll);
+},
+
+destroyed () {
+    window.removeEventListener('scroll', this.onScroll);
+},
+
+methods: {
+    onScroll () {
+        this.scrolled = window.scrollY > 0;
+    },
+
+    scrollToTop () {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: 'smooth'
+        });
+    }
+}
+        

+    

+

+

+    App.vue должен выглядеть следующим образом:
+    

+            
+<template>
+    <v-app :dark="dark">
+        <v-toolbar app>
+            <v-toolbar-title class="headline text-uppercase">
+                <span>Vue.js:</span>
+                <span class="font-weight-light">Самоучитель</span>
+            </v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-btn
+                flat
+                href="https://home.cainet.info:3000/cai/VueJS/"
+                target="_blank"
+            >
+                <span class="mr-2">Актуальная версия</span>
+            </v-btn>
+            <v-menu bottom left>
+                <template v-slot:activator="{ on }">
+                    <v-btn
+                        flat
+                        icon
+                        v-on="on"
+                    >
+                        <v-icon>more_vert</v-icon>
+                    </v-btn>
+                </template>
+
+                <v-list>
+                    <v-list-tile>
+                        <v-list-tile-action>
+                            <v-switch v-model="dark" color="blue"></v-switch>
+                        </v-list-tile-action>
+                        <v-list-tile-title>Тёмная схема</v-list-tile-title>
+                    </v-list-tile>
+                </v-list>
+            </v-menu>
+        </v-toolbar>
+
+        <v-content>
+            <v-container fluid fill-height grid-list-md>
+                <v-layout row wrap full-height>
+                    <v-flex sm4>
+                        <TOC ref="TOC" />
+                    </v-flex>
+                    <v-flex sm8 v-html="text"></v-flex>
+                </v-layout>
+            </v-container>
+        </v-content>
+        <v-fab-transition>
+            <v-btn
+                v-show="scrolled"
+                color="blue"
+                @click="scrollToTop"
+                dark
+                fixed
+                bottom
+                right
+                fab
+            >
+                <v-icon>keyboard_arrow_up</v-icon>
+            </v-btn>
+        </v-fab-transition>
+        <LoadingDialog ref="LoadingDialog" />
+        <MessageDialog ref="MessageDialog" />
+    </v-app>
+</template>
+
+<script>
+    import LoadingDialog from './components/LoadingDialog'
+    import MessageDialog from './components/MessageDialog'
+    import TOC from './components/TOC'
+
+    export default {
+        name: 'App',
+
+        components: {
+            LoadingDialog,
+            MessageDialog,
+            TOC
+        },
+
+        data () {
+            return {
+                dark: false,
+                docId: 0,
+                scrolled: false,
+                text: ""
+            }
+        },
+
+        mounted () {
+            this.$refs.LoadingDialog.dialog = true;
+            this.dark = localStorage.dark ? JSON.parse(localStorage.dark) : false;
+
+            this.axios.get("data/start.html")
+                .then(response => {
+                    this.text = response.data;
+                    this.$refs.LoadingDialog.dialog = false;
+                })
+                .catch(error => {
+                    this.$refs.LoadingDialog.dialog = false;
+                    console.log(error);
+                    this.$refs.MessageDialog.title = "Ошибка";
+                    this.$refs.MessageDialog.text = error;
+                    this.$refs.MessageDialog.dialog = true;
+                });
+
+            this.$refs.LoadingDialog.dialog = true;
+
+            this.axios.get("data/toc.json")
+                .then(response => {
+                    this.$refs.TOC.items = response.data;
+                    this.$refs.LoadingDialog.dialog = false;
+                })
+                .catch(error => {
+                    this.$refs.LoadingDialog.dialog = false;
+                    console.log(error);
+                    this.$refs.MessageDialog.title = "Ошибка";
+                    this.$refs.MessageDialog.text = error;
+                    this.$refs.MessageDialog.dialog = true;
+                });
+
+            this.$watch(
+                "$refs.TOC.active",
+                (newVal, oldVal) => {
+                    if (newVal.length) {
+                    this.$refs.LoadingDialog.dialog = true;
+                    this.axios.get("data/id" + newVal + ".html")
+                        .then(response => {
+                            this.text = response.data;
+                            this.$refs.LoadingDialog.dialog = false;
+                        })
+                        .catch(error => {
+                            this.$refs.LoadingDialog.dialog = false;
+                            console.log(error);
+                            this.$refs.MessageDialog.title = "Ошибка";
+                            this.$refs.MessageDialog.text = error;
+                            this.$refs.MessageDialog.dialog = true;
+                        });
+                    }
+                }
+            );
+        },
+
+        watch: {
+            dark (val) { localStorage.dark = val; }
+        },
+
+        created () {
+            window.addEventListener('scroll', this.onScroll);
+        },
+
+        destroyed () {
+            window.removeEventListener('scroll', this.onScroll);
+        },
+
+        methods: {
+            onScroll () {
+                this.scrolled = window.scrollY > 0;
+            },
+
+            scrollToTop () {
+                window.scrollTo({
+                    top: 0,
+                    left: 0,
+                    behavior: 'smooth'
+                });
+            }
+        }
+    }
+</script>
+        

+    

+

\ No newline at end of file
diff --git a/public/data/id9901.html b/public/data/id9901.html
new file mode 100644
index 0000000..e2979d8
--- /dev/null
+++ b/public/data/id9901.html
@@ -0,0 +1,37 @@
+
Команды npm, yarn, vue-cli

+

+    Здесь я опишу некоторые основные команды, которые понадобятся нам во время обучения.
+
+    
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+    
Действиеnpmyarnvue-cli
Установка vue-clinpm install @vue/cli -gyarn global add @vue/cli - 
Создание проектаnpm init (только инициализация проекта)yarn init (только инициализация проекта)vue create _название_проекта_ или при помощи WebUI: vue ui
Запуск dev-сервераnpm run serveyarn serve - 
Компиляция финальной версииnpm buildyarn build - 

+

\ No newline at end of file
diff --git a/public/data/toc.json b/public/data/toc.json
index 510582e..218ea9d 100644
--- a/public/data/toc.json
+++ b/public/data/toc.json
@@ -36,6 +36,14 @@
             {
                 "id": 304,
                 "name": "Шаг 4. Добавление диалогов"
+            },
+            {
+                "id": 305,
+                "name": "Шаг 5. Цветовые схемы"
+            },
+            {
+                "id": 306,
+                "name": "Шаг 6. Кнопка возвращения"
             }
         ]
     },
diff --git a/public/img/img301.png b/public/img/img301.png
deleted file mode 100644
index 1cb9184..0000000
Binary files a/public/img/img301.png and /dev/null differ
diff --git a/src/App.vue b/src/App.vue
index 53df1a5..e9b0589 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,18 +13,52 @@
             >
                 Актуальная версия
             
+            
+                
+
+                
+                    
+                        
+                            
+                        
+                        Тёмная схема
+                    
+                
+            
         
 
         
             
                 
-                    
+                    
                         
                     
-                    
+                    
                 
             
         
+        
+            
+                keyboard_arrow_up
+            
+        
         
         
     
@@ -48,12 +82,14 @@
             return {
                 dark: false,
                 docId: 0,
+                scrolled: false,
                 text: ""
             }
         },
 
         mounted () {
             this.$refs.LoadingDialog.dialog = true;
+            this.dark = localStorage.dark ? JSON.parse(localStorage.dark) : false;
 
             this.axios.get("data/start.html")
                 .then(response => {
@@ -103,9 +139,32 @@
                     }
                 }
             );
+        },
+
+        watch: {
+            dark (val) { localStorage.dark = val; }
+        },
+
+        created () {
+            window.addEventListener('scroll', this.onScroll);
+        },
+
+        destroyed () {
+            window.removeEventListener('scroll', this.onScroll);
+        },
+
+        methods: {
+            onScroll () {
+                this.scrolled = window.scrollY > 0;
+            },
+
+            scrollToTop () {
+                window.scrollTo({
+                    top: 0,
+                    left: 0,
+                    behavior: 'smooth'
+                });
+            }
         }
     }
 
-
-
diff --git a/src/components/MessageDialog.vue b/src/components/MessageDialog.vue
index d96638e..d2fa109 100644
--- a/src/components/MessageDialog.vue
+++ b/src/components/MessageDialog.vue
@@ -10,7 +10,7 @@
                 {{ text }}
                 
                     
-                    Ok
+                    Ok
                 
             
         
diff --git a/src/components/TOC.vue b/src/components/TOC.vue
index 40c3cf8..2806242 100644
--- a/src/components/TOC.vue
+++ b/src/components/TOC.vue
@@ -31,10 +31,10 @@
                 active-class="primary--text"
                 open-on-click
             >
-