Init

.eslintrc.js

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

.gitignore

@@ -0,0 +1,291 @@
+
+# Created by https://www.toptal.com/developers/gitignore/api/vue,node,macos,windows,linux,vscode,intellij+all
+# Edit at https://www.toptal.com/developers/gitignore?templates=vue,node,macos,windows,linux,vscode,intellij+all
+
+### Intellij+all ###
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/artifacts
+# .idea/compiler.xml
+# .idea/jarRepositories.xml
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
+
+### Intellij+all Patch ###
+# Ignores the whole .idea folder and all .iml files
+# See https://github.com/joeblau/gitignore.io/issues/186 and https://github.com/joeblau/gitignore.io/issues/360
+
+.idea/
+
+# Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-249601023
+
+*.iml
+modules.xml
+.idea/misc.xml
+*.ipr
+
+# Sonarlint plugin
+.idea/sonarlint
+
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+.env*.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+### vscode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+*.code-workspace
+
+### Vue ###
+# gitignore template for Vue.js projects
+#
+# Recommended template: Node.gitignore
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# End of https://www.toptal.com/developers/gitignore/api/vue,node,macos,windows,linux,vscode,intellij+all

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 lstoeferle
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,79 @@
+<h1 align="center">Vite ⚡ - Vue 2 starter template</h1>
+
+<p align="center">
+  Create a Vue 2 application bundled by the lightning fast build tool <a href="https://github.com/vitejs/vite">Vite</a>
+</p>
+
+<p align="center">
+ <a href="https://vite-vue2-starter.netlify.app"> ✨ Live Demo</a>
+</p>
+
+# 🔥 Features
+
+* ⚡️ [Vite 2](https://github.com/vitejs/vite), [Vue 2](https://github.com/vuejs/vue) and [Composition-API](https://github.com/vuejs/composition-api)
+* 🚦 [Vue-Router](https://github.com/vuejs/vue-router)
+* 🎨 [Windi CSS](https://github.com/windicss/vite-plugin-windicss) - on-demand Tailwind CSS with speed and dark mode
+* 📦 [Components auto importing](https://github.com/antfu/unplugin-vue-components)
+* 😃 [Icons as Vue components](https://github.com/antfu/unplugin-icons) - powered by [Iconify](https://github.com/iconify/iconify)
+* 🧰 [VueUse](https://github.com/vueuse/vueuse) - collection of essential Vue Composition Utilities
+* 🔍 ESLint + Prettier
+* 🦾 Typescript
+
+# 📦 Vite plugins
+
+* [`vite-plugin-vue2`](https://github.com/underfin/vite-plugin-vue2) -
+  Vue 2 support for Vite
+* [`vite-plugin-windicss`](https://github.com/windicss/vite-plugin-windicss) -
+  WindiCSS/TailwindCSS for Vite
+* [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) -
+  On demand components auto importing for Vite
+* [`unplugin-icons`](https://github.com/antfu/unplugin-icons) -
+  Access thousands of icons as Vue components in Vite
+
+# 🚀 Getting started
+
+## GitHub Template
+
+[Create a repo from this template on GitHub](https://github.com/lstoeferle/vite-vue2-windicss-starter/generate)
+
+When you use this template, try follow the checklist to update your info properly
+
+- [ ] Rename `name` field in `package.json`
+- [ ] Change the author name in `LICENSE`
+- [ ] Change the app name in `.env`
+- [ ] Change the favicon in `public`
+- [ ] Clean up the README(s) and remove routes
+
+## Clone
+
+If you prefer to do it manually with a cleaner git history
+
+```bash
+npx degit lstoeferle/vite-vue2-windicss-starter my-vite-vue2-app
+cd my-vite-vue2-app
+yarn install
+```
+
+# Usage
+
+## Development
+
+Just run and visit [http://localhost:8080](http://localhost:8080)
+
+```bash
+yarn dev
+```
+
+## Build
+
+To build the App, run
+
+```bash
+yarn build
+```
+
+And you will see the generated files in `dist`, which are ready to be served.
+
+# Why
+
+Vue 3 is awesome, but we should not forget about supporting Vue 2 ♥️

index.html

@@ -0,0 +1,17 @@
+<!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">
+      <link rel="icon" href="/favicon.ico">
+      <title>Example</title>
+  </head>
+  <body class="dark:bg-gray-800">
+    <noscript>
+        <strong>We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      </noscript>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,37 @@
+{
+  "private": true,
+  "scripts": {
+    "postinstall": "husky install",
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint './src/**/*.{js,ts,tsx,vue,md}'",
+    "lint:fix": "eslint './src/**/*.{js,ts,tsx,vue,md}' --fix"
+  },
+  "dependencies": {
+    "@vue/composition-api": "^1.2.4",
+    "@vueuse/core": "^6.5.3",
+    "core-js": "^3.18.3",
+    "vue": "^2.6.14",
+    "vue-demi": "^0.11.4",
+    "vue-router": "^3.5.2"
+  },
+  "devDependencies": {
+    "@iconify/json": "^1.1.415",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^8.0.0",
+    "eslint": "^8.0.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^7.19.1",
+    "husky": "^7.0.2",
+    "prettier": "2.2.1",
+    "typescript": "^4.4.4",
+    "unplugin-icons": "^0.12.16",
+    "unplugin-vue-components": "^0.15.6",
+    "vite": "^2.6.7",
+    "vite-plugin-vue2": "^1.9.0",
+    "vite-plugin-windicss": "^1.4.11",
+    "vue-template-compiler": "^2.6.14"
+  }
+}

src/App.vue

@@ -0,0 +1,8 @@
+<template>
+  <div id="app">
+    <Navbar />
+    <main>
+      <RouterView />
+    </main>
+  </div>
+</template>

src/assets/vite-logo.svg

@@ -0,0 +1,15 @@
+<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
+<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/vue-logo.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>

src/components/Feature.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    class="flex flex-col h-full p-8 bg-gray-100 rounded-lg items dark:bg-gray-700"
+  >
+    <Heading2>
+      {{ title }}
+    </Heading2>
+
+    <div class="flex flex-col flex-grow">
+      <p class="flex-grow text-base leading-relaxed dark:text-gray-300">
+        {{ text }}
+      </p>
+      <a
+        :href="url"
+        target="_blank"
+        class="inline-flex items-center mt-3 text-green-500"
+      >
+        Learn More
+        <MdiArrowRight class="ml-1" />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue-demi";
+
+export default defineComponent({
+  name: "Feature",
+  props: {
+    title: { type: String, required: true },
+    text: { type: String, required: true },
+    url: { type: String, required: true },
+  },
+});
+</script>

src/components/Features.vue

@@ -0,0 +1,47 @@
+<template>
+  <section class="container px-5 py-12 mx-auto text-gray-600 body-font">
+    <div class="flex flex-col w-full mb-8 text-center">
+      <Heading1> Installed Vite plugins 📦 </Heading1>
+      <p class="dark:text-gray-300">
+        You can even find more awesome Vite plugins
+        <a
+          href="https://github.com/vitejs/awesome-vite"
+          target="_blank"
+          class="text-green-500"
+        >
+          here
+        </a>
+      </p>
+    </div>
+    <div class="flex flex-wrap -m-2">
+      <div class="w-full p-2 md:w-1/2 lg:w-1/4">
+        <Feature
+          title="vite-plugin-vue2"
+          text="Vue 2 support for Vite"
+          url="https://github.com/underfin/vite-plugin-vue2"
+        />
+      </div>
+      <div class="w-full p-2 md:w-1/2 lg:w-1/4">
+        <Feature
+          title="vite-plugin-windicss"
+          text="Windi CSS for Vite"
+          url="https://github.com/windicss/vite-plugin-windicss"
+        />
+      </div>
+      <div class="w-full p-2 md:w-1/2 lg:w-1/4">
+        <Feature
+          title="unplugin-components"
+          text="On demand components auto importing for Vite"
+          url="https://github.com/antfu/unplugin-vue-components"
+        />
+      </div>
+      <div class="w-full p-2 md:w-1/2 lg:w-1/4">
+        <Feature
+          title="unplugin-icons"
+          text="Access thousands of icons as Vue components in Vite"
+          url="https://github.com/antfu/unplugin-icons"
+        />
+      </div>
+    </div>
+  </section>
+</template>

src/components/Footer.vue

@@ -0,0 +1,15 @@
+<template>
+<!-- Footer -->
+<footer class="footer bg-white relative pt-1 border-b-2 border-blue-700">
+
+        <div class="mt-16 bg-gray-700 border-t-2 border-gray-300 flex flex-col items-center">
+            <div class="sm:w-2/3 text-center py-6">
+                <p class="text-sm text-blue-700 font-bold mb-2">
+                    © 2021 by Jaro
+                </p>
+            </div>
+        </div>
+</footer>
+
+<!-- ./Footer -->
+</template>

src/components/Hero.vue

@@ -0,0 +1,58 @@
+<template>
+  <section
+    class="container flex flex-col items-center px-5 py-12 mx-auto text-gray-600 body-font md:flex-row"
+  >
+    <div class=" mb-10">
+      <img
+        class="w-800px h-600px border-gray-500 border-5 rounded-3xl object-cover object-center rounded"
+        alt="Main camera" 
+        src="@/assets/mvsr-logo.png"
+      />
+    </div>
+    <div
+      class="flex flex-col items-center text-center lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 md:items-start md:text-left"
+    >
+      <Heading1>Preview</Heading1>
+      <p class="mb-8 leading-relaxed dark:text-gray-300">
+        Zobrazuje snimku kazdych x sekund z {{ previewUrl }}
+      </p>
+      <img
+        class="w-400px h-300px mb-8 border-gray-500 border-5 rounded-3xl object-cover object-center rounded"
+        alt="Main camera" 
+        src="@/assets/mvsr-logo.png"
+      />
+      <p class="mb-8">
+	 Ovládanie dverí
+      </p>
+      <div class="flex justify-center">
+        <a href="https://vuejs.org/v2/guide/" target="_blank">
+          <ButtonPrimary> Otvor </ButtonPrimary>
+        </a>
+
+        <RouterLink :to="{ name: 'About' }">
+          <ButtonSecondary> Zatvor </ButtonSecondary>
+        </RouterLink>
+          <ButtonTerciary> Podrž </ButtonTerciary>
+
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue-demi";
+import { routes } from "@/router";
+import { useDark, useToggle } from "@vueuse/core";
+
+export default defineComponent({
+  setup: (_, ctx) => {
+    // Import config from .evn
+    const appName = import.meta.env.VITE_APP_NAME;
+    const urlMjpeg = import.meta.env.VITE_APP_ESP32_MJPEG;
+    const previewUrl = import.meta.env.VITE_APP_ESP32_PREVIEW;
+
+
+    return { appName, urlMjpeg, previewUrl };
+  },
+});
+</script>

src/components/Navbar.vue

@@ -0,0 +1,77 @@
+<template>
+  <header class="text-gray-600 sticky top-0 z-50 bg-green-600 body-font">
+    <div
+      class="container flex flex-col flex-wrap items-center p-3 mx-auto md:flex-row"
+    >
+      <RouterLink
+        :to="{ name: 'Home' }"
+        class="flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0"
+      >
+        <img alt="MVSR logo" src="@/assets/mvsr-logo.png" width="60px" />
+        <span class="ml-3 text-xl dark:text-white">
+          {{ appName }} {{ ipAddr }}
+        </span>
+      </RouterLink>
+      <nav
+        class="flex flex-wrap items-center justify-center text-base md:ml-auto"
+      >
+        <RouterLink
+          v-for="(route, index) in routes"
+          :key="index"
+          class="mr-5 font-semibold cursor-pointer"
+          :class="{
+            'text-green-500 hover:green-500 dark:text-green-500 dark:hover:text-green-500 underline':
+              route.name === currentRoute,
+            'hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200':
+              route.name != currentRoute,
+          }"
+          :to="{ name: route.name }"
+        >
+          {{ route.name }}
+        </RouterLink>
+        <RouterLink
+          class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white"
+          to="/aliens"
+        >
+          <MdiAlien />
+        </RouterLink>
+        <a
+          href="https://github.com/lstoeferle/vite-vue2-windicss-starter"
+          target="_blank"
+          class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white"
+        >
+          <MdiGithub />
+        </a>
+        <button
+          @click="toggle"
+          class="flex items-center justify-center w-9 h-9 focus:outline-none"
+        >
+          <MdiWhiteBalanceSunny class="text-yellow-500" v-if="isDark" />
+          <MdiMoonWaningCrescent class="text-gray-800" v-else />
+        </button>
+      </nav>
+    </div>
+  </header>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue-demi";
+import { routes } from "@/router";
+import { useDark, useToggle } from "@vueuse/core";
+
+export default defineComponent({
+  setup: (_, ctx) => {
+    // Import config from .evn
+    const appName = import.meta.env.VITE_APP_NAME;
+    const ipAddr = import.meta.env.ESP32_IP;
+
+    const availableRoutes = routes.filter((route) => route.name != "NotFound");
+    const currentRoute = computed(() => ctx.root.$route.name);
+
+    const isDark = useDark();
+    const toggle = useToggle(isDark);
+
+    return { appName, ipAddr, routes: availableRoutes, currentRoute, toggle, isDark };
+  },
+});
+</script>

src/components/shared/ButtonPrimary.vue

@@ -0,0 +1,7 @@
+<template>
+  <button
+    class="inline-flex px-6 py-2 text-lg text-white bg-green-500 border-0 rounded focus:outline-none hover:bg-green-400"
+  >
+    <slot />
+  </button>
+</template>

src/components/shared/ButtonSecondary.vue

@@ -0,0 +1,7 @@
+<template>
+  <button
+    class="inline-flex px-6 py-2 ml-4 text-lg text-gray-700 bg-gray-200 border-0 rounded focus:outline-none hover:bg-gray-100"
+  >
+    <slot />
+  </button>
+</template>

src/components/shared/ButtonTerciary.vue

@@ -0,0 +1,7 @@
+<template>
+  <button
+    class="inline-flex px-6 py-2 ml-4 text-lg text-gray-700 bg-gray-200 border-0 rounded focus:outline-none hover:bg-gray-100"
+  >
+    <slot />
+  </button>
+</template>

src/components/shared/Heading1.vue

@@ -0,0 +1,7 @@
+<template>
+  <h1
+    class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white"
+  >
+    <slot />
+  </h1>
+</template>

src/components/shared/Heading2.vue

@@ -0,0 +1,7 @@
+<template>
+  <h2
+    class="text-lg font-medium text-gray-900 sm:text-xl title-font dark:text-white"
+  >
+    <slot />
+  </h2>
+</template>

src/main.ts

@@ -0,0 +1,16 @@
+import Vue from "vue";
+import App from "@/App.vue";
+import { createApp, h } from "vue-demi";
+
+import "windi.css";
+import router from "@/router";
+
+Vue.config.productionTip = false;
+Vue.config.devtools = true;
+
+const app = createApp({
+  router,
+  render: () => h(App),
+});
+
+app.mount("#app");

src/router/index.ts

@@ -0,0 +1,37 @@
+import Vue from "vue";
+import VueRouter, { RouteConfig } from "vue-router";
+import Home from "@/views/Home.vue";
+import About from "@/views/About.vue";
+import NotFound from "@/views/NotFound.vue";
+
+Vue.use(VueRouter);
+
+export const routes: RouteConfig[] = [
+  {
+    path: "/",
+    name: "Domov",
+    component: Home,
+  },
+  {
+    path: "/about",
+    name: "O projekte",
+    // NOTE: you can also apply meta information
+    // meta: {authRequired: false }
+    component: About,
+    // NOTE: you can also lazy-load the component
+    // component: () => import("@/views/About.vue")
+  },
+  {
+    path: "/:path(.*)",
+    name: "NotFound",
+    component: NotFound,
+  },
+];
+
+const router = new VueRouter({
+  base: "/",
+  mode: "history",
+  routes,
+});
+
+export default router;

src/shims-tsx.d.ts

@@ -0,0 +1,17 @@
+import Vue, { VNode } from "vue";
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+
+  interface ImportMeta {
+    env: Record<any, string>;
+  }
+}

src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module "*.vue" {
+  import Vue from "vue";
+  export default Vue;
+}

src/views/About.vue

@@ -0,0 +1,26 @@
+<template>
+  <section class="text-gray-600 body-font">
+    <div
+      class="container flex flex-col items-center justify-center px-5 py-24 mx-auto"
+    >
+      <div class="w-full text-center lg:w-2/3">
+        <Heading1> O projekte: Vite ⚡ - Vue 2 Oku Kamera na otvaranie dveri </Heading1>
+        <p class="mb-8 leading-relaxed dark:text-gray-300">
+       		Projekt je zalozeny na ESP32-CAM a VUE JS 
+        </p>
+        <div class="flex justify-center">
+          <a
+            href="https://github.com/lstoeferle/vite-vue2-windicss-starter"
+            target="_blank"
+          >
+            <button
+              class="inline-flex items-center px-6 py-2 text-lg text-white bg-black border-0 rounded focus:outline-none hover:bg-gray-900"
+            >
+              <MdiGithub /> &nbsp;GitHub
+            </button>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

src/views/Home.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <Hero />
+    <Footer />
+  </div>
+</template>

src/views/NotFound.vue

@@ -0,0 +1,26 @@
+<template>
+  <section class="text-gray-600 body-font">
+    <div
+      class="container flex flex-col items-center justify-center px-5 py-24 mx-auto"
+    >
+      <img
+        class="object-cover object-center w-5/6 mb-10 rounded lg:w-2/6 md:w-3/6"
+        alt="hero"
+        src="@/assets/not-found.svg"
+      />
+      <div class="w-full text-center lg:w-2/3">
+        <Heading1 class="text-red-500 dark:text-red-500"
+          >404 NOT FOUND</Heading1
+        >
+        <p class="mb-8 leading-relaxed dark:text-gray-300">
+          Oops, looks like you got kidnapped by aliens.
+        </p>
+        <div class="flex justify-center">
+          <RouterLink :to="{ name: 'Home' }">
+            <ButtonPrimary> Bring me back Home </ButtonPrimary>
+          </RouterLink>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

tailwind.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  darkMode: "class", // or 'media'
+  theme: {},
+  variants: {},
+  plugins: [],
+};

tsconfig.json

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

vite.config.js

@@ -0,0 +1,39 @@
+import path from "path";
+import { defineConfig } from "vite";
+import { createVuePlugin } from "vite-plugin-vue2";
+import WindiCSS from "vite-plugin-windicss";
+import Components from "unplugin-vue-components/vite";
+import Icons from "unplugin-icons/vite";
+import IconsResolver from "unplugin-icons/resolver";
+
+const config = defineConfig({
+  resolve: {
+    alias: {
+      "@": `${path.resolve(__dirname, "src")}`,
+    },
+    dedupe: ["vue-demi"],
+  },
+
+  build: {
+    minify: true,
+  },
+
+  plugins: [
+    createVuePlugin(),
+    WindiCSS(),
+    Components({
+      resolvers: [
+        IconsResolver({
+          componentPrefix: "",
+        }),
+      ],
+    }),
+    Icons(),
+  ],
+
+  server: {
+    port: 8080,
+  },
+});
+
+export default config;