diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b3c827e8ba746ffda82b03c5783d697e242474be..0050f0def95fe6a6ad3a5e112f47ae714bbb47e8 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -18,6 +18,7 @@
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.2.0",
+ "@tailwindcss/typography": "^0.5.12",
"@vitejs/plugin-vue": "^4.2.1",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"@vue/eslint-config-prettier": "^7.1.0",
@@ -1303,6 +1304,34 @@
"resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.5.tgz",
"integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw=="
},
+ "node_modules/@tailwindcss/typography": {
+ "version": "0.5.12",
+ "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.12.tgz",
+ "integrity": "sha512-CNwpBpconcP7ppxmuq3qvaCxiRWnbhANpY/ruH4L5qs2GCiVDJXde/pjj2HWPV1+Q4G9+V/etrwUYopdcjAlyg==",
+ "dev": true,
+ "dependencies": {
+ "lodash.castarray": "^4.4.0",
+ "lodash.isplainobject": "^4.0.6",
+ "lodash.merge": "^4.6.2",
+ "postcss-selector-parser": "6.0.10"
+ },
+ "peerDependencies": {
+ "tailwindcss": ">=3.0.0 || insiders"
+ }
+ },
+ "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+ "version": "6.0.10",
+ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+ "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+ "dev": true,
+ "dependencies": {
+ "cssesc": "^3.0.0",
+ "util-deprecate": "^1.0.2"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
"node_modules/@tootallnate/once": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -3315,6 +3344,18 @@
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
+ "node_modules/lodash.castarray": {
+ "version": "4.4.0",
+ "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+ "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+ "dev": true
+ },
+ "node_modules/lodash.isplainobject": {
+ "version": "4.0.6",
+ "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+ "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+ "dev": true
+ },
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 855357d56e995e3ea8badbe7d4d0a1c1ab1481ba..9df00f5bb7e7440528956b51ad35738253cae85e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,7 @@
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.2.0",
+ "@tailwindcss/typography": "^0.5.12",
"@vitejs/plugin-vue": "^4.2.1",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"@vue/eslint-config-prettier": "^7.1.0",
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index b8e5421c8ccc2f726f9b9f4b409c9a215be691a6..20f57f1bdb23c94d24267f87ccb808ef6471c951 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -44,7 +44,7 @@ export default {
</RouterLink>
</div>
<div>
- <div class="w-72">
+ <div class="w-72" v-if="currentTemplate">
<VueSelect
class="bg-white rounded-md"
:options="Object.values(TEMPLATES)"
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 9cd3a95a24fd9c42c534ac54a4c417c009c239b6..32a319509b12e65d617a5c174109987b77073a96 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -3,7 +3,16 @@ import TEMPLATES from '../templates'
import defaultFavicon from '../assets/favicon.png'
-let routes = [];
+let routes = [
+ {
+ path: '/avatar',
+ name: 'avatar',
+ component: () => import('../views/avatar/Avatar.vue'),
+ meta: {
+ title: 'Profilové obrázky'
+ }
+ }
+];
for (let [identifier, templateData] of Object.entries(TEMPLATES)) {
routes.push({
diff --git a/frontend/src/views/avatar/Avatar.vue b/frontend/src/views/avatar/Avatar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..32fa8df81bc97d772fd16a4384011ff2544e1e4a
--- /dev/null
+++ b/frontend/src/views/avatar/Avatar.vue
@@ -0,0 +1,100 @@
+<script setup>
+import { watch, ref } from 'vue'
+
+import Canvas from '../../components/canvas/Canvas.vue'
+import redraw from './canvas'
+
+import Navbar from '../../components/Navbar.vue'
+import MainContainer from '../../components/MainContainer.vue'
+import ImageInput from '../../components/inputs/ImageInput.vue'
+</script>
+
+<script>
+export default {
+ components: {
+ Canvas,
+ Navbar,
+ MainContainer,
+ ImageInput,
+ },
+ data () {
+ return {
+ mainImage: null,
+ autoRedraw: false
+ }
+ },
+ methods: {
+ async reloadCanvasProperties () {
+ const canvasProperties = {
+ mainImage: this.mainImage,
+ }
+
+ await this.$refs.canvas.redraw(canvasProperties)
+ }
+ },
+ mounted () {
+ this.$watch(
+ vm => [
+ vm.mainImage,
+ ],
+ async (value) => {
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
+ },
+ {
+ immediate: true,
+ deep: true
+ }
+ )
+ },
+}
+</script>
+
+<template>
+ <header>
+ <Navbar></Navbar>
+ </header>
+ <main>
+ <MainContainer>
+ <template v-slot:left>
+ <Canvas
+ ref="canvas"
+ :redrawFunction="redraw"
+ width="2000"
+ height="2000"
+ />
+ </template>
+
+ <template v-slot:right>
+ <div class="prose max-w-none">
+ <p>
+ Amet illo et atque et voluptates esse ad magni. Dolor omnis non ad. Qui est aut aperiam rerum atque mollitia ut. Ea aliquam nihil earum vel. Dicta odit quod aliquam molestiae porro ex error. Aut soluta et voluptatibus vel.
+ </p>
+
+ <p>
+ Quo quos est eaque ipsa esse. Laboriosam laborum est facilis. Corporis excepturi consequuntur quo dolorem omnis accusantium expedita voluptates. Ut omnis et asperiores consequatur quia voluptatum repudiandae.
+ </p>
+ </div>
+
+ <ReloadButton
+ :parentRefs="$refs"
+ @click="reloadCanvasProperties"
+ />
+ <AutoReloadCheckbox
+ v-model="autoRedraw"
+ />
+ <ImageInput
+ name="Obrázek"
+ v-model="mainImage"
+ :important="true"
+ zIndex="10"
+ />
+ </template>
+ </MainContainer>
+ </main>
+</template>
+
+<style>
+@import "vue-select/dist/vue-select.css";
+</style>
diff --git a/frontend/src/views/avatar/canvas.js b/frontend/src/views/avatar/canvas.js
new file mode 100644
index 0000000000000000000000000000000000000000..d4b80a9a01f94204995b1de648d26e9a92b164c6
--- /dev/null
+++ b/frontend/src/views/avatar/canvas.js
@@ -0,0 +1,3 @@
+const redraw = async (canvas, options) => { }
+
+export default redraw
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 76edd3b45c9f66fef1df1ef708786cf0f761507b..528e5199bce54e6056c0d3a7a99cf516e76debe5 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -7,5 +7,7 @@ module.exports = {
theme: {
extend: {},
},
- plugins: [],
+ plugins: [
+ require('@tailwindcss/typography')
+ ],
}