wip - avatar generator

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",

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",

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)"

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({

frontend/src/views/avatar/Avatar.vue

+<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>

frontend/src/views/avatar/canvas.js

+const redraw = async (canvas, options) => { }
+
+export default redraw

frontend/tailwind.config.js

@@ -7,5 +7,7 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/typography')
+  ],
 }