Init

.gitattributes

@@ -0,0 +1,6 @@
+.gitattributes export-ignore
+.gitignore export-ignore
+.github export-ignore
+.travis.yml export-ignore
+tests/ export-ignore
+*.sh eol=lf

.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+.idea
+.docker
+vendor
+node_modules
+www/assets
+www/manifest.json

.htaccess

@@ -0,0 +1 @@
+Require all denied

app/Bootstrap.php

@@ -0,0 +1,33 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App;
+
+use Nette\Bootstrap\Configurator;
+
+
+class Bootstrap
+{
+	public static function boot(): Configurator
+	{
+		$configurator = new Configurator;
+		$appDir = dirname(__DIR__);
+
+		$configurator->setDebugMode($_SERVER['HTTP_HOST'] === 'localhost');
+		$configurator->enableTracy($appDir . '/log');
+
+		$configurator->setTimeZone('Europe/Prague');
+		$configurator->setTempDirectory($appDir . '/temp');
+
+		$configurator->createRobotLoader()
+			->addDirectory(__DIR__)
+			->register();
+
+		$configurator->addConfig($appDir . '/config/common.neon');
+		$configurator->addConfig($appDir . '/config/services.neon');
+		$configurator->addConfig($appDir . '/config/local.neon');
+
+		return $configurator;
+	}
+}

app/Latte/AssetFilter.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Latte;
+
+use Nette\Utils\JsonException;
+use Vite;
+
+class AssetFilter
+{
+    public function __construct(
+        private Vite $vite,
+    ) {}
+
+    /**
+     * @throws JsonException
+     */
+    public function __invoke(string $path): string
+    {
+        return $this->vite->getAsset($path);
+    }
+}

app/Presenters/BasePresenter.php

@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Presenters;
+
+use Nette;
+use Vite;
+
+
+/**
+ * Base presenter for all application presenters.
+ */
+abstract class BasePresenter extends Nette\Application\UI\Presenter
+{
+    public function __construct(
+        private Vite $vite,
+    ) {}
+
+    public function beforeRender(): void
+    {
+        $this->template->vite = $this->vite;
+    }
+}

app/Presenters/Error4xxPresenter.php

@@ -0,0 +1,27 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Presenters;
+
+use Nette;
+
+
+final class Error4xxPresenter extends Nette\Application\UI\Presenter
+{
+	public function startup(): void
+	{
+		parent::startup();
+		if (!$this->getRequest()->isMethod(Nette\Application\Request::FORWARD)) {
+			$this->error();
+		}
+	}
+
+
+	public function renderDefault(Nette\Application\BadRequestException $exception): void
+	{
+		// load template 403.latte or 404.latte or ... 4xx.latte
+		$file = __DIR__ . "/templates/Error/{$exception->getCode()}.latte";
+		$this->template->setFile(is_file($file) ? $file : __DIR__ . '/templates/Error/4xx.latte');
+	}
+}

app/Presenters/ErrorPresenter.php

@@ -0,0 +1,43 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Presenters;
+
+use Nette;
+use Nette\Application\Responses;
+use Nette\Http;
+use Tracy\ILogger;
+
+
+final class ErrorPresenter implements Nette\Application\IPresenter
+{
+	use Nette\SmartObject;
+
+	/** @var ILogger */
+	private $logger;
+
+
+	public function __construct(ILogger $logger)
+	{
+		$this->logger = $logger;
+	}
+
+
+	public function run(Nette\Application\Request $request): Nette\Application\Response
+	{
+		$exception = $request->getParameter('exception');
+
+		if ($exception instanceof Nette\Application\BadRequestException) {
+			[$module, , $sep] = Nette\Application\Helpers::splitName($request->getPresenterName());
+			return new Responses\ForwardResponse($request->setPresenterName($module . $sep . 'Error4xx'));
+		}
+
+		$this->logger->log($exception, ILogger::EXCEPTION);
+		return new Responses\CallbackResponse(function (Http\IRequest $httpRequest, Http\IResponse $httpResponse): void {
+			if (preg_match('#^text/html(?:;|$)#', (string) $httpResponse->getHeader('Content-Type'))) {
+				require __DIR__ . '/templates/Error/500.phtml';
+			}
+		});
+	}
+}

app/Presenters/HomepagePresenter.php

@@ -0,0 +1,12 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Presenters;
+
+use Nette;
+
+
+final class HomepagePresenter extends BasePresenter
+{
+}

app/Presenters/templates/@layout.latte

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width">
+
+	<title>{ifset title}{include title|stripHtml} | {/ifset}Nette Web</title>
+
+	{if $vite->isEnabled()}
+		<script type="module" src="{='@vite/client'|asset}"></script>
+	{else}
+		{foreach $vite->getCssAssets('src/scripts/main.js') as $path}
+			<link rel="stylesheet" href="{$path}">
+		{/foreach}
+	{/if}
+
+	<script src="{='src/scripts/main.js'|asset}" type="module"></script>
+</head>
+
+<body data-controller="body" class="bg-blue-100">
+	<div n:foreach="$flashes as $flash" n:class="flash, $flash->type">{$flash->message}</div>
+
+
+	{include content}
+
+	{block scripts}
+	{/block}
+</body>
+</html>

app/Presenters/templates/Error/403.latte

@@ -0,0 +1,7 @@
+{block content}
+<h1 n:block=title>Access Denied</h1>
+
+<p>You do not have permission to view this page. Please try contact the web
+site administrator if you believe you should be able to view this page.</p>
+
+<p><small>error 403</small></p>

app/Presenters/templates/Error/404.latte

@@ -0,0 +1,8 @@
+{block content}
+<h1 n:block=title>Page Not Found</h1>
+
+<p>The page you requested could not be found. It is possible that the address is
+incorrect, or that the page no longer exists. Please use a search engine to find
+what you are looking for.</p>
+
+<p><small>error 404</small></p>

app/Presenters/templates/Error/405.latte

@@ -0,0 +1,6 @@
+{block content}
+<h1 n:block=title>Method Not Allowed</h1>
+
+<p>The requested method is not allowed for the URL.</p>
+
+<p><small>error 405</small></p>

app/Presenters/templates/Error/410.latte

@@ -0,0 +1,6 @@
+{block content}
+<h1 n:block=title>Page Not Found</h1>
+
+<p>The page you requested has been taken off the site. We apologize for the inconvenience.</p>
+
+<p><small>error 410</small></p>

app/Presenters/templates/Error/4xx.latte

@@ -0,0 +1,4 @@
+{block content}
+<h1 n:block=title>Oops...</h1>
+
+<p>Your browser sent a request that this server could not understand or process.</p>

app/Presenters/templates/Error/500.phtml

@@ -0,0 +1,27 @@
+<!DOCTYPE html><!-- "' --></textarea></script></style></pre></xmp></a></audio></button></canvas></datalist></details></dialog></iframe></listing></meter></noembed></noframes></noscript></optgroup></option></progress></rp></select></table></template></title></video>
+<meta charset="utf-8">
+<meta name="robots" content="noindex">
+<title>Server Error</title>
+
+<style>
+	#nette-error { all: initial; position: absolute; top: 0; left: 0; right: 0; height: 70vh; min-height: 400px; display: flex; align-items: center; justify-content: center; z-index: 1000 }
+	#nette-error div { all: initial; max-width: 550px; background: white; color: #333; display: block }
+	#nette-error h1 { all: initial; font: bold 50px/1.1 sans-serif; display: block; margin: 40px }
+	#nette-error p { all: initial; font: 20px/1.4 sans-serif; margin: 40px; display: block }
+	#nette-error small { color: gray }
+</style>
+
+<div id=nette-error>
+	<div>
+		<h1>Server Error</h1>
+
+		<p>We're sorry! The server encountered an internal error and
+		was unable to complete your request. Please try again later.</p>
+
+		<p><small>error 500</small></p>
+	</div>
+</div>
+
+<script>
+	document.body.insertBefore(document.getElementById('nette-error'), document.body.firstChild);
+</script>

app/Presenters/templates/Error/503.phtml

@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+header('HTTP/1.1 503 Service Unavailable');
+header('Retry-After: 300'); // 5 minutes in seconds
+
+?>
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="robots" content="noindex">
+<meta name="generator" content="Nette Framework">
+
+<style>
+	body { color: #333; background: white; width: 500px; margin: 100px auto }
+	h1 { font: bold 47px/1.5 sans-serif; margin: .6em 0 }
+	p { font: 21px/1.5 Georgia,serif; margin: 1.5em 0 }
+</style>
+
+<title>Site is temporarily down for maintenance</title>
+
+<h1>We're Sorry</h1>
+
+<p>The site is temporarily down for maintenance. Please try again in a few minutes.</p>

app/Presenters/templates/Homepage/default.latte

@@ -0,0 +1,5 @@
+{* This is the welcome page, you can delete it *}
+
+{block content}
+	<div id="app">
+	</div>

app/Router/RouterFactory.php

@@ -0,0 +1,21 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Router;
+
+use Nette;
+use Nette\Application\Routers\RouteList;
+
+
+final class RouterFactory
+{
+	use Nette\StaticClass;
+
+	public static function createRouter(): RouteList
+	{
+		$router = new RouteList;
+		$router->addRoute('<presenter>/<action>[/<id>]', 'Homepage:default');
+		return $router;
+	}
+}

app/Services/Vite.php

@@ -0,0 +1,91 @@
+<?php
+
+use Nette\Utils\FileSystem;
+use Nette\Utils\Html;
+use Nette\Utils\Json;
+use Nette\Http\Request;
+
+
+class Vite
+{
+    public function __construct(
+        private string $viteServer,
+        private string $manifestFile,
+        private bool $productionMode,
+        private Request $httpRequest,
+    ){}
+
+    /**
+     * @throws \Nette\Utils\JsonException
+     */
+    public function getAsset(string $entrypoint): string
+    {
+        $asset = '';
+        $baseUrl = '/';
+
+        if (!$this->isEnabled()) {
+            if (file_exists($this->manifestFile)) {
+                $manifest = Json::decode(FileSystem::read($this->manifestFile), Json::FORCE_ARRAY);
+                $asset = $manifest[$entrypoint]['file'];
+            } else {
+                trigger_error('Missing manifest file: ' . $this->manifestFile, E_USER_WARNING);
+            }
+
+        } else {
+            $baseUrl = $this->viteServer . '/';
+            $asset = $entrypoint;
+        }
+
+        return $baseUrl . $asset;
+    }
+
+    /**
+     * @throws \Nette\Utils\JsonException
+     */
+    public function getCssAssets(string $entrypoint): array
+    {
+        $assets = [];
+
+        if (!$this->isEnabled()) {
+            if (file_exists($this->manifestFile)) {
+                $manifest = Json::decode(FileSystem::read($this->manifestFile), Json::FORCE_ARRAY);
+                $assets = $manifest[$entrypoint]['css'] ?? [];
+            } else {
+                trigger_error('Missing manifest file: ' . $this->manifestFile, E_USER_WARNING);
+            }
+
+        }
+
+        return $assets;
+    }
+
+    public function isEnabled(): bool
+    {
+        if (!$this->productionMode && $this->httpRequest->getCookie('netteVite') === 'true') {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    /**
+     * @throws \Nette\Utils\JsonException
+     */
+    public function printTags(string $entrypoint): void
+    {
+        $scripts = [$this->getAsset($entrypoint)];
+        $styles = $this->getCssAssets($entrypoint);
+
+        if ($this->isEnabled()) {
+            echo Html::el('script')->type('module')->src($this->viteServer . '/' . '@vite/client');
+        }
+
+        foreach ($styles as $path) {
+            echo Html::el('link')->rel('stylesheet')->href($path);
+        }
+
+        foreach ($scripts as $path) {
+            echo Html::el('script')->type('module')->src($path);
+        }
+    }
+}

app/Tracy/Vite/Vite.html

@@ -0,0 +1,49 @@
+<span title="Toggle Vite" data-action="netteVite">
+    <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>
+</span>
+<style>
+  #tracy-debug [data-action="netteVite"] {
+    cursor: pointer;
+    padding: 0 .4em;
+    margin: 0 -.4em;
+    display: block;
+  }
+
+  #tracy-debug [data-action="netteVite"]:hover {
+    background: #c3c1b8;
+  }
+</style>
+<script>
+  function getCookie(n, a = `; ${document.cookie}`.match(`;\\s*${n}=([^;]+)`)) {
+    return a ? JSON.parse(a[1]) : false;
+  }
+
+  const element = document.querySelector('#tracy-debug [data-action="netteVite"]')
+
+  console.log(getCookie('netteVite'))
+
+  if (!getCookie('netteVite')) {
+    element.style.opacity = '40%'
+  }
+
+  element.addEventListener('click', () => {
+    document.cookie = getCookie('netteVite') ? 'netteVite=false; path=/;' : 'netteVite=true; path=/;'
+
+    getCookie('netteVite') ? (element.style.opacity = '') : (element.style.opacity = '40%')
+    document.location.reload()
+  })
+</script>

app/Tracy/Vite/Vite.php

@@ -0,0 +1,14 @@
+<?php
+
+class VitePanel implements Tracy\IBarPanel
+{
+    public function getTab()
+    {
+        return file_get_contents(__DIR__ . '/Vite.html');
+    }
+
+    public function getPanel()
+    {
+        return '';
+    }
+}

bin/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

composer.json

@@ -0,0 +1,39 @@
+{
+	"name": "nette/web-project",
+	"description": "Nette: Standard Web Project",
+	"keywords": ["nette"],
+	"type": "project",
+	"license": ["MIT", "BSD-3-Clause", "GPL-2.0", "GPL-3.0"],
+	"require": {
+		"php": ">= 8.0",
+		"nette/application": "^3.1",
+		"nette/bootstrap": "^3.1",
+		"nette/caching": "^3.1",
+		"nette/database": "^3.1",
+		"nette/di": "^3.0",
+		"nette/finder": "^2.5",
+		"nette/forms": "^3.1",
+		"nette/http": "^3.1",
+		"nette/mail": "^3.1",
+		"nette/robot-loader": "^3.3",
+		"nette/security": "^3.1",
+		"nette/utils": "^3.2",
+		"latte/latte": "^2.9",
+		"tracy/tracy": "^2.8"
+	},
+	"require-dev": {
+		"nette/tester": "^2.3",
+		"symfony/thanks": "^1"
+	},
+	"autoload": {
+		"psr-4": {
+			"App\\": "app"
+		}
+	},
+	"minimum-stability": "stable",
+	"config": {
+		"allow-plugins": {
+			"symfony/thanks": true
+		}
+	}
+}

config/common.neon

@@ -0,0 +1,21 @@
+parameters:
+
+
+application:
+	errorPresenter: Error
+	mapping:
+		*: [App, Modules\*, Presenters\*Presenter]
+
+
+session:
+	expiration: 14 days
+
+
+di:
+	export:
+		parameters: no
+		tags: no
+
+tracy:
+	bar:
+		- VitePanel

config/local.neon

@@ -0,0 +1,7 @@
+parameters:
+
+
+database:
+	dsn: 'mysql:host=db;dbname=root'
+	user: root
+	password: root

config/services.neon

@@ -0,0 +1,6 @@
+services:
+        - App\Router\RouterFactory::createRouter
+        - Vite(http://localhost:3000, %wwwDir%/manifest.json, not(%debugMode%))
+        nette.latteFactory:
+            setup:
+                - addFilter(asset, App\Latte\AssetFilter())

docker-compose.yml

@@ -0,0 +1,29 @@
+version: '3.4'
+
+services:
+  web:
+    image: josefjebavy/debian-apache-php8.0-nette
+    working_dir: /var/www/html
+    volumes:
+      - .:/var/www/html
+    ports:
+      - 80:80
+      - 443:443
+  db:
+    image: mariadb:10.6
+    environment:
+      MYSQL_ROOT_PASSWORD: root
+      MYSQL_DATABASE: root
+    volumes:
+      - .docker/mysql:/var/lib/mysql
+
+#  adminer:
+#    image: adminer
+#    ports:
+#      - 8080:8080
+#
+#  composer:
+#    image: composer
+#    command: [ "composer", "install" ]
+#    volumes:
+#      - .:/app

log/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

nodesource_setup.sh

@@ -0,0 +1,360 @@
+#!/bin/bash
+
+# Discussion, issues and change requests at:
+#   https://github.com/nodesource/distributions
+#
+# Script to install the NodeSource Node.js 16.x repo onto a
+# Debian or Ubuntu system.
+#
+# Run as root or insert `sudo -E` before `bash`:
+#
+# curl -sL https://deb.nodesource.com/setup_16.x | bash -
+#   or
+# wget -qO- https://deb.nodesource.com/setup_16.x | bash -
+#
+# CONTRIBUTIONS TO THIS SCRIPT
+#
+# This script is built from a template in
+# https://github.com/nodesource/distributions/tree/master/deb/src
+# please don't submit pull requests against the built scripts.
+#
+
+
+export DEBIAN_FRONTEND=noninteractive
+SCRSUFFIX="_16.x"
+NODENAME="Node.js 16.x"
+NODEREPO="node_16.x"
+NODEPKG="nodejs"
+
+print_status() {
+    echo
+    echo "## $1"
+    echo
+}
+
+if test -t 1; then # if terminal
+    ncolors=$(which tput > /dev/null && tput colors) # supports color
+    if test -n "$ncolors" && test $ncolors -ge 8; then
+        termcols=$(tput cols)
+        bold="$(tput bold)"
+        underline="$(tput smul)"
+        standout="$(tput smso)"
+        normal="$(tput sgr0)"
+        black="$(tput setaf 0)"
+        red="$(tput setaf 1)"
+        green="$(tput setaf 2)"
+        yellow="$(tput setaf 3)"
+        blue="$(tput setaf 4)"
+        magenta="$(tput setaf 5)"
+        cyan="$(tput setaf 6)"
+        white="$(tput setaf 7)"
+    fi
+fi
+
+print_bold() {
+    title="$1"
+    text="$2"
+
+    echo
+    echo "${red}================================================================================${normal}"
+    echo "${red}================================================================================${normal}"
+    echo
+    echo -e "  ${bold}${yellow}${title}${normal}"
+    echo
+    echo -en "  ${text}"
+    echo
+    echo "${red}================================================================================${normal}"
+    echo "${red}================================================================================${normal}"
+}
+
+bail() {
+    echo 'Error executing command, exiting'
+    exit 1
+}
+
+exec_cmd_nobail() {
+    echo "+ $1"
+    bash -c "$1"
+}
+
+exec_cmd() {
+    exec_cmd_nobail "$1" || bail
+}
+
+node_deprecation_warning() {
+    if [[ "X${NODENAME}" == "Xio.js 1.x" ||
+          "X${NODENAME}" == "Xio.js 2.x" ||
+          "X${NODENAME}" == "Xio.js 3.x" ||
+          "X${NODENAME}" == "XNode.js 0.10" ||
+          "X${NODENAME}" == "XNode.js 0.12" ||
+          "X${NODENAME}" == "XNode.js 4.x LTS Argon" ||
+          "X${NODENAME}" == "XNode.js 5.x" ||
+          "X${NODENAME}" == "XNode.js 6.x LTS Boron" ||
+          "X${NODENAME}" == "XNode.js 7.x" ||
+          "X${NODENAME}" == "XNode.js 8.x LTS Carbon" ||
+          "X${NODENAME}" == "XNode.js 9.x" ||
+          "X${NODENAME}" == "XNode.js 10.x" ||
+          "X${NODENAME}" == "XNode.js 11.x" ||
+          "X${NODENAME}" == "XNode.js 13.x" ||
+          "X${NODENAME}" == "XNode.js 15.x" ]]; then
+
+        print_bold \
+"                            DEPRECATION WARNING                            " "\
+${bold}${NODENAME} is no longer actively supported!${normal}
+
+  ${bold}You will not receive security or critical stability updates${normal} for this version.
+
+  You should migrate to a supported version of Node.js as soon as possible.
+  Use the installation script that corresponds to the version of Node.js you
+  wish to install. e.g.
+
+   * ${green}https://deb.nodesource.com/setup_12.x — Node.js 12 LTS \"Erbium\"${normal}
+   * ${green}https://deb.nodesource.com/setup_14.x — Node.js 14 LTS \"Fermium\"${normal} (recommended)
+   * ${green}https://deb.nodesource.com/setup_16.x — Node.js 16 \"Gallium\"${normal}
+   * ${green}https://deb.nodesource.com/setup_17.x — Node.js 17 \"Seventeen\"${normal} (current)
+
+  Please see ${bold}https://github.com/nodejs/Release${normal} for details about which
+  version may be appropriate for you.
+
+  The ${bold}NodeSource${normal} Node.js distributions repository contains
+  information both about supported versions of Node.js and supported Linux
+  distributions. To learn more about usage, see the repository:
+    ${bold}https://github.com/nodesource/distributions${normal}
+"
+        echo
+        echo "Continuing in 20 seconds ..."
+        echo
+        sleep 20
+    fi
+}
+
+script_deprecation_warning() {
+    if [ "X${SCRSUFFIX}" == "X" ]; then
+        print_bold \
+"                         SCRIPT DEPRECATION WARNING                         " "\
+This script, located at ${bold}https://deb.nodesource.com/setup${normal}, used to
+  install Node.js 0.10, is deprecated and will eventually be made inactive.
+
+  You should use the script that corresponds to the version of Node.js you
+  wish to install. e.g.
+
+   * ${green}https://deb.nodesource.com/setup_12.x — Node.js 12 LTS \"Erbium\"${normal}
+   * ${green}https://deb.nodesource.com/setup_14.x — Node.js 14 LTS \"Fermium\"${normal} (recommended)
+   * ${green}https://deb.nodesource.com/setup_16.x — Node.js 16 \"Gallium\"${normal}
+   * ${green}https://deb.nodesource.com/setup_17.x — Node.js 17 \"Seventeen\"${normal} (current)
+
+  Please see ${bold}https://github.com/nodejs/Release${normal} for details about which
+  version may be appropriate for you.
+
+  The ${bold}NodeSource${normal} Node.js Linux distributions GitHub repository contains
+  information about which versions of Node.js and which Linux distributions
+  are supported and how to use the install scripts.
+    ${bold}https://github.com/nodesource/distributions${normal}
+"
+
+        echo
+        echo "Continuing in 20 seconds (press Ctrl-C to abort) ..."
+        echo
+        sleep 20
+    fi
+}
+
+setup() {
+
+script_deprecation_warning
+node_deprecation_warning
+
+print_status "Installing the NodeSource ${NODENAME} repo..."
+
+if $(uname -m | grep -Eq ^armv6); then
+    print_status "You appear to be running on ARMv6 hardware. Unfortunately this is not currently supported by the NodeSource Linux distributions. Please use the 'linux-armv6l' binary tarballs available directly from nodejs.org for Node.js 4 and later."
+    exit 1
+fi
+
+PRE_INSTALL_PKGS=""
+
+# Check that HTTPS transport is available to APT
+# (Check snaked from: https://get.docker.io/ubuntu/)
+
+if [ ! -e /usr/lib/apt/methods/https ]; then
+    PRE_INSTALL_PKGS="${PRE_INSTALL_PKGS} apt-transport-https"
+fi
+
+if [ ! -x /usr/bin/lsb_release ]; then
+    PRE_INSTALL_PKGS="${PRE_INSTALL_PKGS} lsb-release"
+fi
+
+if [ ! -x /usr/bin/curl ] && [ ! -x /usr/bin/wget ]; then
+    PRE_INSTALL_PKGS="${PRE_INSTALL_PKGS} curl"
+fi
+
+# Used by apt-key to add new keys
+
+if [ ! -x /usr/bin/gpg ]; then
+    PRE_INSTALL_PKGS="${PRE_INSTALL_PKGS} gnupg"
+fi
+
+# Populating Cache
+print_status "Populating apt-get cache..."
+exec_cmd 'apt-get update'
+
+if [ "X${PRE_INSTALL_PKGS}" != "X" ]; then
+    print_status "Installing packages required for setup:${PRE_INSTALL_PKGS}..."
+    # This next command needs to be redirected to /dev/null or the script will bork
+    # in some environments
+    exec_cmd "apt-get install -y${PRE_INSTALL_PKGS} > /dev/null 2>&1"
+fi
+
+IS_PRERELEASE=$(lsb_release -d | grep 'Ubuntu .*development' >& /dev/null; echo $?)
+if [[ $IS_PRERELEASE -eq 0 ]]; then
+    print_status "Your distribution, identified as \"$(lsb_release -d -s)\", is a pre-release version of Ubuntu. NodeSource does not maintain official support for Ubuntu versions until they are formally released. You can try using the manual installation instructions available at https://github.com/nodesource/distributions and use the latest supported Ubuntu version name as the distribution identifier, although this is not guaranteed to work."
+    exit 1
+fi
+
+DISTRO=$(lsb_release -c -s)
+
+check_alt() {
+    if [ "X${DISTRO}" == "X${2}" ]; then
+        echo
+        echo "## You seem to be using ${1} version ${DISTRO}."
+        echo "## This maps to ${3} \"${4}\"... Adjusting for you..."
+        DISTRO="${4}"
+    fi
+}
+
+check_alt "SolydXK"       "solydxk-9" "Debian" "stretch"
+check_alt "Kali"          "sana"     "Debian" "jessie"
+check_alt "Kali"          "kali-rolling" "Debian" "bullseye"
+check_alt "Sparky Linux"  "Tyche"    "Debian" "stretch"
+check_alt "Sparky Linux"  "Nibiru"   "Debian" "buster"
+check_alt "Sparky Linux"  "Po-Tolo"   "Debian" "bullseye"
+check_alt "MX Linux 17"   "Horizon"  "Debian" "stretch"
+check_alt "MX Linux 18"   "Continuum" "Debian" "stretch"
+check_alt "MX Linux 19"   "patito feo" "Debian" "buster"
+check_alt "MX Linux 21"   "wildflower" "Debian" "bullseye"
+check_alt "Linux Mint"    "maya"     "Ubuntu" "precise"
+check_alt "Linux Mint"    "qiana"    "Ubuntu" "trusty"
+check_alt "Linux Mint"    "rafaela"  "Ubuntu" "trusty"
+check_alt "Linux Mint"    "rebecca"  "Ubuntu" "trusty"
+check_alt "Linux Mint"    "rosa"     "Ubuntu" "trusty"
+check_alt "Linux Mint"    "sarah"    "Ubuntu" "xenial"
+check_alt "Linux Mint"    "serena"   "Ubuntu" "xenial"
+check_alt "Linux Mint"    "sonya"    "Ubuntu" "xenial"
+check_alt "Linux Mint"    "sylvia"   "Ubuntu" "xenial"
+check_alt "Linux Mint"    "tara"     "Ubuntu" "bionic"
+check_alt "Linux Mint"    "tessa"    "Ubuntu" "bionic"
+check_alt "Linux Mint"    "tina"     "Ubuntu" "bionic"
+check_alt "Linux Mint"    "tricia"   "Ubuntu" "bionic"
+check_alt "Linux Mint"    "ulyana"   "Ubuntu" "focal"
+check_alt "Linux Mint"    "ulyssa"   "Ubuntu" "focal"
+check_alt "Linux Mint"    "uma"      "Ubuntu" "focal"
+check_alt "Linux Mint"    "una"      "Ubuntu" "focal"
+check_alt "LMDE"          "betsy"    "Debian" "jessie"
+check_alt "LMDE"          "cindy"    "Debian" "stretch"
+check_alt "LMDE"          "debbie"   "Debian" "buster"
+check_alt "elementaryOS"  "luna"     "Ubuntu" "precise"
+check_alt "elementaryOS"  "freya"    "Ubuntu" "trusty"
+check_alt "elementaryOS"  "loki"     "Ubuntu" "xenial"
+check_alt "elementaryOS"  "juno"     "Ubuntu" "bionic"
+check_alt "elementaryOS"  "hera"     "Ubuntu" "bionic"
+check_alt "elementaryOS"  "odin"     "Ubuntu" "focal"
+check_alt "elementaryOS"  "jolnir"   "Ubuntu" "focal"
+check_alt "Trisquel"      "toutatis" "Ubuntu" "precise"
+check_alt "Trisquel"      "belenos"  "Ubuntu" "trusty"
+check_alt "Trisquel"      "flidas"   "Ubuntu" "xenial"
+check_alt "Trisquel"      "etiona"   "Ubuntu" "bionic"
+check_alt "Uruk GNU/Linux" "lugalbanda" "Ubuntu" "xenial"
+check_alt "BOSS"          "anokha"   "Debian" "wheezy"
+check_alt "BOSS"          "anoop"    "Debian" "jessie"
+check_alt "BOSS"          "drishti"  "Debian" "stretch"
+check_alt "BOSS"          "unnati"   "Debian" "buster"
+check_alt "bunsenlabs"    "bunsen-hydrogen" "Debian" "jessie"
+check_alt "bunsenlabs"    "helium"   "Debian" "stretch"
+check_alt "bunsenlabs"    "lithium"  "Debian" "buster"
+check_alt "Tanglu"        "chromodoris" "Debian" "jessie"
+check_alt "PureOS"        "green"    "Debian" "sid"
+check_alt "PureOS"        "amber"    "Debian" "buster"
+check_alt "PureOS"        "byzantium" "Debian" "bullseye"
+check_alt "Devuan"        "jessie"   "Debian" "jessie"
+check_alt "Devuan"        "ascii"    "Debian" "stretch"
+check_alt "Devuan"        "beowulf"  "Debian" "buster"
+check_alt "Devuan"        "chimaera"  "Debian" "bullseye"
+check_alt "Devuan"        "ceres"    "Debian" "sid"
+check_alt "Deepin"        "panda"    "Debian" "sid"
+check_alt "Deepin"        "unstable" "Debian" "sid"
+check_alt "Deepin"        "stable"   "Debian" "buster"
+check_alt "Pardus"        "onyedi"   "Debian" "stretch"
+check_alt "Liquid Lemur"  "lemur-3"  "Debian" "stretch"
+check_alt "Astra Linux"   "orel"     "Debian" "stretch"
+check_alt "Ubilinux"      "dolcetto" "Debian" "stretch"
+
+if [ "X${DISTRO}" == "Xdebian" ]; then
+  print_status "Unknown Debian-based distribution, checking /etc/debian_version..."
+  NEWDISTRO=$([ -e /etc/debian_version ] && cut -d/ -f1 < /etc/debian_version)
+  if [ "X${NEWDISTRO}" == "X" ]; then
+    print_status "Could not determine distribution from /etc/debian_version..."
+  else
+    DISTRO=$NEWDISTRO
+    print_status "Found \"${DISTRO}\" in /etc/debian_version..."
+  fi
+fi
+
+print_status "Confirming \"${DISTRO}\" is supported..."
+
+if [ -x /usr/bin/curl ]; then
+    exec_cmd_nobail "curl -sLf -o /dev/null 'https://deb.nodesource.com/${NODEREPO}/dists/${DISTRO}/Release'"
+    RC=$?
+else
+    exec_cmd_nobail "wget -qO /dev/null -o /dev/null 'https://deb.nodesource.com/${NODEREPO}/dists/${DISTRO}/Release'"
+    RC=$?
+fi
+
+if [[ $RC != 0 ]]; then
+    print_status "Your distribution, identified as \"${DISTRO}\", is not currently supported, please contact NodeSource at https://github.com/nodesource/distributions/issues if you think this is incorrect or would like your distribution to be considered for support"
+    exit 1
+fi
+
+if [ -f "/etc/apt/sources.list.d/chris-lea-node_js-$DISTRO.list" ]; then
+    print_status 'Removing Launchpad PPA Repository for NodeJS...'
+
+    exec_cmd_nobail 'add-apt-repository -y -r ppa:chris-lea/node.js'
+    exec_cmd "rm -f /etc/apt/sources.list.d/chris-lea-node_js-${DISTRO}.list"
+fi
+
+print_status 'Adding the NodeSource signing key to your keyring...'
+keyring='/usr/share/keyrings'
+node_key_url="https://deb.nodesource.com/gpgkey/nodesource.gpg.key"
+local_node_key="$keyring/nodesource.gpg"
+
+if [ -x /usr/bin/curl ]; then
+    exec_cmd "curl -s $node_key_url | gpg --dearmor | tee $local_node_key >/dev/null"
+else
+    exec_cmd "wget -q -O - $node_key_url | gpg --dearmor | tee $local_node_key >/dev/null"
+fi
+
+print_status "Creating apt sources list file for the NodeSource ${NODENAME} repo..."
+
+exec_cmd "echo 'deb [signed-by=$local_node_key] https://deb.nodesource.com/${NODEREPO} ${DISTRO} main' > /etc/apt/sources.list.d/nodesource.list"
+exec_cmd "echo 'deb-src [signed-by=$local_node_key] https://deb.nodesource.com/${NODEREPO} ${DISTRO} main' >> /etc/apt/sources.list.d/nodesource.list"
+
+print_status 'Running `apt-get update` for you...'
+
+exec_cmd 'apt-get update'
+
+yarn_site='https://dl.yarnpkg.com/debian'
+yarn_key_url="$yarn_site/pubkey.gpg"
+local_yarn_key="$keyring/yarnkey.gpg"
+
+print_status """Run \`${bold}sudo apt-get install -y ${NODEPKG}${normal}\` to install ${NODENAME} and npm
+## You may also need development tools to build native addons:
+     sudo apt-get install gcc g++ make
+## To install the Yarn package manager, run:
+     curl -sL $yarn_key_url | gpg --dearmor | sudo tee $local_yarn_key >/dev/null
+     echo \"deb [signed-by=$local_yarn_key] $yarn_site stable main\" | sudo tee /etc/apt/sources.list.d/yarn.list
+     sudo apt-get update && sudo apt-get install yarn
+"""
+
+}
+
+## Defer setup until we have the complete script
+setup

package.json

@@ -0,0 +1,33 @@
+{
+  "scripts": {
+    "postinstall": "chmod 777 temp && chmod 777 log",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "composer:install": "docker run --rm --interactive --tty --volume ${PWD}:/app --volume ${COMPOSER_HOME:-$HOME/.composer}:/tmp composer install",
+    "composer:update": "docker run --rm --interactive --tty --volume ${PWD}:/app --volume ${COMPOSER_HOME:-$HOME/.composer}:/tmp composer update"
+  },
+  "dependencies": {
+    "@hotwired/stimulus": "^3.0.1",
+    "@hotwired/turbo": "^7.1.0",
+    "axios": "^0.25.0",
+    "flowbite": "^1.3.3",
+    "nette-forms": "^3.3.1",
+    "vue": "^3.2.30",
+    "vue-tabz": "^1.1.5"
+  },
+  "devDependencies": {
+    "@rollup/plugin-dynamic-import-vars": "^1.4.2",
+    "@tailwindcss/custom-forms": "^0.2.1",
+    "@vitejs/plugin-vue": "^2.2.0",
+    "@vue/compiler-sfc": "^3.2.30",
+    "autoprefixer": "^10.4.2",
+    "postcss": "^8.4.5",
+    "postcss-custom-media": "^8.0.0",
+    "postcss-custom-selectors": "^6.0.0",
+    "postcss-import": "^14.0.2",
+    "postcss-nesting": "^10.1.2",
+    "tailwindcss": "^3.0.15",
+    "vite": "^2.7.13"
+  }
+}

readme.md

@@ -0,0 +1,94 @@
+Nette Vite
+=================
+
+This is a simple, skeleton application using the [Nette](https://nette.org). This is meant to
+be used as a starting point for your new projects.
+
+[Nette](https://nette.org) is a popular tool for PHP web development.
+It is designed to be the most usable and friendliest as possible. It focuses
+on security and performance and is definitely one of the safest PHP frameworks.
+
+If you like Nette, **[please make a donation now](https://nette.org/donate)**.
+
+In addition, this skeleton provides complete solution for fast, compelling applications with a minimal amount of effort.
+
+* [Vite](https://vitejs.dev/) - next generation frontend tooling 
+* [Tailwind 3+](https://tailwindcss.com/) - a utility-first CSS framework packed with classes
+* [Stimulus 3+](https://stimulus.hotwired.dev/) - designed to augment your HTML with just enough behavior to make it shine
+* [Turbo 7+](https://turbo.hotwired.dev/) - accelerates links and form submissions by negating the need for full page reloads
+
+Requirements
+------------
+
+- PHP 8.0
+- Node.js LTS
+- Docker
+
+
+Local Setup
+------------
+
+The best way to install Web Project locally is using Docker. If you don't have Docker yet,
+download it following [the instructions](https://www.docker.com/products/docker-desktop). 
+
+Use following commands:
+    
+    mkdir nette-vite && cd nette-vite
+	git clone --depth 1 https://github.com/evromalarkey/nette-vite.git . && npm i
+
+That downloads the project from Github, installs `package.json` dependencies. After that you can serve your project from localhost
+
+	docker compose up
+    npm run dev
+
+Then visit `http://localhost` in your browser to see the welcome page.
+
+JS and CSS files are served via Vite, directly from sources. Any file changes reloads the browsers for fast local development.
+
+> On Windows it's recommended to use **WSL2** to run everything (Docker, Node.js via nvm), it's the best approach. Otherwise, some docker scripts inside package.json would work only in PowerShell. 
+
+> When correct Node.js version is set in **PhpStorm** (WSL2 on Windows), you can use build-in npm to install dependencies or run scripts via GUI.
+
+
+Production Setup
+----------------
+
+Make directories `temp/` and `log/` writable.
+
+For Apache or Nginx, setup a virtual host to point to the `www/` directory of the project and you
+should be ready to go.
+
+**It is CRITICAL that whole `app/`, `config/`, `log/` and `temp/` directories are not accessible directly
+via a web browser. See [security warning](https://nette.org/security-warning).**
+
+Vite
+----------------
+There are few possible ways how to load assets with Vite in your latte templates.
+
+Option 1 - print all `<script>` and `<link>` tags automatically, with this you have to include css in `.js`
+```latte
+{$vite->printTags('src/scripts/main.js')}
+```
+
+Option 2 - same as first option, but you have more control over your HTML
+```latte
+{if $vite->isEnabled()}
+    <script type="module" src="{='@vite/client'|asset}"></script>
+{else}
+    {foreach $vite->getCssAssets('src/scripts/main.js') as $path}
+        <link rel="stylesheet" href="{$path}">
+    {/foreach}
+{/if}
+
+<script src="{='src/scripts/main.js'|asset}" type="module"></script>
+```
+
+Option 3 - most basic, but currently not possible for production, due Vite drawback - [vitejs/vite#6595](https://github.com/vitejs/vite/issues/6595)
+```latte
+{if $vite->isEnabled()}
+    <script type="module" src="{='@vite/client'|asset}"></script>
+{/if}
+
+<script src="{='src/scripts/main.js'|asset}" type="module"></script>
+<link rel="stylesheet" href="{='src/styles/main.css'|asset}">
+```

src/scripts/App.vue

@@ -0,0 +1,70 @@
+<template>
+
+<nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800">
+  <div class="container flex flex-wrap justify-between items-center mx-auto">
+  <a href="#" class="flex">
+    <svg class="mr-3 h-10" viewBox="0 0 52 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.87695 53H28.7791C41.5357 53 51.877 42.7025 51.877 30H24.9748C12.2182 30 1.87695 40.2975 1.87695 53Z" fill="#76A9FA"/><path d="M0.000409561 32.1646L0.000409561 66.4111C12.8618 66.4111 23.2881 55.9849 23.2881 43.1235L23.2881 8.87689C10.9966 8.98066 1.39567 19.5573 0.000409561 32.1646Z" fill="#A4CAFE"/><path d="M50.877 5H23.9748C11.2182 5 0.876953 15.2975 0.876953 28H27.7791C40.5357 28 50.877 17.7025 50.877 5Z" fill="#1C64F2"/></svg>
+      <span class="self-center text-lg font-semibold whitespace-nowrap dark:text-white">Slovník</span>
+  </a>
+  <div class="flex md:order-2">
+      <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Get started</button>
+      <button data-collapse-toggle="mobile-menu-4" type="button" class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-4" aria-expanded="false">
+      <span class="sr-only">Open main menu</span>
+      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
+      <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </button>
+  </div>
+  
+  <div class="hidden justify-between items-center w-full md:flex md:w-auto md:order-1" id="mobile-menu-4">
+    <ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
+          <vue-tabz
+                    :data="['Jednoduchý', 'Výslovnosť', 'Písmená' ]"
+                    @clickedTab="tabsHandler"
+                />
+    </ul>
+  </div>
+  </div>
+</nav>
+
+
+     
+           <left-dict :data="trData"></left-dict>
+     
+
+    
+</template>
+
+<script setup>
+import vueTabz from './components/vue-tabz.vue'
+import logoUrl from './assets/logo.png'
+import trData from './components/Translatios'
+import LeftDict from './components/LeftDict.vue'
+import SearchFrom from './components/SearchForm.vue'
+import SearchForm from './components/SearchForm.vue'
+
+console.log(trData);
+console.log(logoUrl);
+</script>
+
+<script>
+export default {
+  components: { LeftDict, SearchForm },
+  name: 'vue-tabz',
+  data() {
+    return {
+      currentIndex: 0,
+      currentTab: '',
+    };
+  },
+  methods: {
+    tabsHandler(data) {
+      this.currentIndex = data.index;
+      this.currentTab = data.tab;
+      console.log(data.index);
+      console.log(data.tab);
+    },
+  },
+};
+
+</script>
+

src/scripts/components/HelloWorld.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Documentation
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+</style>

src/scripts/components/LeftDict.vue

@@ -0,0 +1,29 @@
+<script>
+export default {
+  props: ['data']
+}
+</script>
+
+<template>
+<div class="min-h-screen flex flex-row bg-gray-100 ">
+  <div class="bg-white overflow-hidden flex flex-col w-full px-4 py-8  border-b lg:border-r lg:h-screen lg:w-64">
+    <div class="flex items-center justify-center h-20 shadow-md">
+      <h1 class="text-3xl uppercase text-indigo-500">Preklad</h1>
+    </div>
+    <ul class="flex flex-col py-4">
+      <li v-for="(t, i) in data.translations" :key="i"> 
+        <a href="#" class="flex flex-row items-center h-12 transform hover:translate-x-2 transition-transform ease-in duration-200 text-gray-500 hover:text-gray-800">
+          <span class="inline-flex items-center justify-center h-12 w-12 text-lg text-gray-400"><i class="bx bx-home"></i></span>
+          <span class="text-sm font-medium">{{ t.lang }}</span>
+        </a>
+      </li>
+      
+    </ul>
+  </div>
+   <main role="main" class="w-full h-full flex-grow p-3 overflow-auto">
+        Content...<!-- content area -->
+  </main>
+</div>
+
+
+</template>

src/scripts/components/SearchForm.vue

@@ -0,0 +1,31 @@
+<script>
+export default {
+  props: ['data']
+}
+</script>
+
+<template>
+<div class="w-full max-w-xs">
+  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+   <div class="grid grid-cols-3 gap-3">
+    <div class="mb-4">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
+        Slovo
+      </label>
+      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="term" type="text" placeholder="slovo">
+    </div>
+    <div class="mb-6">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
+        Slovnik
+      </label>
+      <input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline">
+    </div>
+    <div class="mt-7">
+      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
+        Hľadaj
+      </button>
+    </div>
+   </div>
+  </form>
+</div>
+</template>

src/scripts/components/Translatios.js

@@ -0,0 +1,4 @@
+export default {
+   translations: 
+      {"1":{"slug":"anglicko-slovensky","lang":"Anglicko-Slovenský","t":{}},"2":{"slug":"slovensko-anglicky","lang":"Slovensko-Anglický","t":{}},"3":{"slug":"holandsko-cesky","lang":"Holandsko-Český","t":{}},"4":{"slug":"cesko-holandsky","lang":"Česko-Holandský","t":{}},"5":{"slug":"francuzsko-slovensky","lang":"Francúzsko-Slovenský","t":{}},"6":{"slug":"slovensko-francuzsky","lang":"Slovensko-Francúzsky","t":{}},"7":{"slug":"nemecko-slovensky","lang":"Nemecko-Slovenský","t":{}},"8":{"slug":"slovensko-nemecky","lang":"Slovensko-Nemecký","t":{}},"9":{"slug":"taliansko-slovensky","lang":"Taliansko-Slovenský","t":{}},"10":{"slug":"slovensko-taliansky","lang":"Slovensko-Taliansky","t":{}},"11":{"slug":"latinsko-cesky","lang":"Latinsko-Český","t":{}},"12":{"slug":"cesko-latinsky","lang":"Česko-Latinský","t":{}},"13":{"slug":"madarsko-slovensky","lang":"Maďarsko-Slovenský","t":{}},"14":{"slug":"slovensko-madarsky","lang":"Slovensko-Maďarský","t":{}},"15":{"slug":"polsko-cesky","lang":"Poľsko-Český","t":{}},"16":{"slug":"cesko-polsky","lang":"Česko-Poľský","t":{}},"17":{"slug":"portugalsko-cesky","lang":"Portugalsko-Český","t":{}},"18":{"slug":"cesko-portugalsky","lang":"Česko-Portugalský","t":{}},"19":{"slug":"rusko-slovensky","lang":"Rusko-Slovenský","t":{}},"20":{"slug":"slovensko-rusky","lang":"Slovensko-Ruský","t":{}},"21":{"slug":"slovensko-slovensky","lang":"Slovensko-Slovenský","t":{}},"22":{"slug":"slovensko-slovensky","lang":"Slovensko-Slovenský","t":{}},"23":{"slug":"spanielsko-slovensky","lang":"Španielsko-Slovenský","t":{}},"24":{"slug":"slovensko-spanielsky","lang":"Slovensko-Španielsky","t":{}},"25":{"slug":"svedsko-cesky","lang":"Švédsko-Český","t":{}},"26":{"slug":"cesko-svedsky","lang":"Česko-Švédsky","t":{}}},
+}

src/scripts/components/vue-tabz.vue

@@ -0,0 +1,58 @@
+<template>
+<li v-for="(tabData, i) in data"
+   :key="tabData"
+   @click="changeIndex(i)"
+>
+  <a v-if="currentIndex === i" href="#" class="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white"> {{ tabData }} </a>
+  <a v-else href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"> {{ tabData }} </a>
+</li>	
+</template>
+
+<script>
+export default {
+  name: 'vue-tabz',
+   emits: ["clickedTab"],
+  data() {
+    return {
+      currentIndex: 0,
+    };
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    mainColor: {
+      type: String,
+      default: "",
+    },
+    maxWidth: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    cssVars() {
+      return {
+        "--main-color": `#${this.mainColor.replace('#', '')}`,
+        "--max-width": `${parseInt(this.maxWidth, 10)}px`,
+      };
+    },
+  },
+  methods: {
+    /**
+     * Change current index based on tab index
+     *
+     * @param {Number} index tab index
+     * @return void
+     */
+    changeIndex(index) {
+      this.currentIndex = index;
+      this.$emit("clickedTab", {
+        index,
+        tab: this.data[index],
+      });
+    },
+  },
+};
+</script>

src/scripts/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/scripts/main.js

@@ -0,0 +1,20 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './index.css'
+import { Application, Controller } from '@hotwired/stimulus'
+import "@hotwired/turbo"
+import 'flowbite';
+
+
+const LibStimulus = new Application(document.documentElement)
+
+LibStimulus.start()
+
+LibStimulus.register('body', class extends Controller {
+  connect() {
+    console.log('Hello stimulus')
+  }
+})
+
+createApp(App).mount('#app')
+

src/styles/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  content: [
+    './src/**/*.js',
+    './src/**/*.vue',
+    './app/**/*.latte'
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/custom-forms'),
+    require('flowbite/plugin')
+  ],
+}

temp/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

vite.config.js

@@ -0,0 +1,51 @@
+import FastGlob from 'fast-glob'
+import { resolve } from 'path';
+
+import tailwindcss from 'tailwindcss'
+import tailwindcssNesting from 'tailwindcss/nesting/index.js'
+import autoprefixer from 'autoprefixer'
+import postcssImport from 'postcss-import';
+import postcssNesting from 'postcss-nesting';
+import postcssCustomMedia from 'postcss-custom-media';
+import dynamicImportVars from '@rollup/plugin-dynamic-import-vars';
+import vue from '@vitejs/plugin-vue';
+
+const reload = {
+    name: 'reload',
+    handleHotUpdate({ file, server }) {
+        if (!file.includes('temp') && file.endsWith(".php") || file.endsWith(".latte")) {
+            server.ws.send({
+                type: 'full-reload',
+                path: '*',
+            });
+        }
+    }
+}
+
+export default {
+    plugins: [reload, vue()],
+    css: {
+        postcss: {
+            plugins: [postcssImport, tailwindcssNesting(postcssNesting), postcssCustomMedia, tailwindcss, autoprefixer]
+        }
+    },
+    server: {
+        watch: {
+            usePolling: true
+        },
+        hmr: {
+            host: 'localhost'
+        }
+    },
+    build: {
+        manifest: true,
+        outDir: "www",
+        emptyOutDir: false,
+        rollupOptions: {
+            input: FastGlob.sync(['./src/scripts/*.js', './src/styles/*.css']).map(entry => resolve(process.cwd(), entry)),
+             plugins: [
+                 vue()
+                 ],
+        }
+    }
+}

www/.htaccess

@@ -0,0 +1,32 @@
+# Apache configuration file (see https://httpd.apache.org/docs/current/mod/quickreference.html)
+Require all granted
+
+# disable directory listing
+<IfModule mod_autoindex.c>
+	Options -Indexes
+</IfModule>
+
+# enable cool URL
+<IfModule mod_rewrite.c>
+	RewriteEngine On
+	# RewriteBase /
+
+	# use HTTPS
+	# RewriteCond %{HTTPS} !on
+	# RewriteRule .? https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
+
+	# prevents files starting with dot to be viewed by browser
+	RewriteRule /\.|^\.(?!well-known/) - [F]
+
+	# front controller
+	RewriteCond %{REQUEST_FILENAME} !-f
+	RewriteCond %{REQUEST_FILENAME} !-d
+	RewriteRule !\.(pdf|js|mjs|ico|gif|jpg|jpeg|png|webp|svg|css|rar|zip|7z|tar\.gz|map|eot|ttf|otf|woff|woff2)$ index.php [L]
+</IfModule>
+
+# enable gzip compression
+<IfModule mod_deflate.c>
+	<IfModule mod_filter.c>
+		AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/json application/xml image/svg+xml
+	</IfModule>
+</IfModule>

www/index.php

@@ -0,0 +1,10 @@
+<?php
+
+declare(strict_types=1);
+
+require __DIR__ . '/../vendor/autoload.php';
+
+$configurator = App\Bootstrap::boot();
+$container = $configurator->createContainer();
+$application = $container->getByType(Nette\Application\Application::class);
+$application->run();