From 15b60f60b5d4f3c4035460f25807c5f5f2f19578 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Tue, 30 Mar 2021 18:05:55 +0200
Subject: [PATCH] migrate to Tailwind JIT + views + router/ build fix

ref #23
---
 package.json                           | 83 +++++++++++++-------------
 src/App.vue                            |  5 +-
 src/main.js                            | 21 +++++--
 src/router.js                          | 26 --------
 src/routes.js                          | 16 +++++
 src/{components => }/simple.css        |  0
 src/tailwind.css                       |  3 +
 src/{components => views}/Home.vue     |  3 +-
 src/{components => views}/Imprint.vue  |  2 +-
 src/{components => views}/Privacy.vue  |  2 +-
 src/{components => views}/Profile.vue  |  9 +--
 src/{components => views}/Register.vue |  4 +-
 vite.config.js                         | 17 +++---
 13 files changed, 99 insertions(+), 92 deletions(-)
 delete mode 100644 src/router.js
 create mode 100644 src/routes.js
 rename src/{components => }/simple.css (100%)
 create mode 100644 src/tailwind.css
 rename src/{components => views}/Home.vue (94%)
 rename src/{components => views}/Imprint.vue (96%)
 rename src/{components => views}/Privacy.vue (96%)
 rename src/{components => views}/Profile.vue (96%)
 rename src/{components => views}/Register.vue (99%)

diff --git a/package.json b/package.json
index cfc925f..c5f8596 100644
--- a/package.json
+++ b/package.json
@@ -1,42 +1,45 @@
 {
-  "name": "@odit/lfk-selfservice",
-  "version": "0.1.2",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "release": "release-it --only-version"
-  },
-  "dependencies": {
-    "marked": "^2.0.1",
-    "redaxios": "^0.4.1",
-    "toastify-js": "^1.10.0",
-    "validator": "^13.5.2",
-    "vue": "^3.0.5",
-    "vue-i18n": "^9.0.0",
-    "vue-router": "4",
-    "vue-toastification": "^2.0.0-rc.1"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^1.1.5",
-    "@vue/compiler-sfc": "^3.0.7",
-    "autoprefixer": "^10.2.5",
-    "postcss": "^8.2.8",
-    "release-it": "^14.5.0",
-    "tailwindcss": "^2.0.4",
-    "vite": "^2.1.3",
-    "vite-plugin-windicss": "^0.10.2"
-  },
-  "release-it": {
-    "git": {
-      "commit": true,
-      "requireCleanWorkingDir": false,
-      "commitMessage": "🚀Bumped version to v${version}",
-      "requireBranch": "dev",
-      "push": false,
-      "tag": false
-    },
-    "npm": {
-      "publish": false
-    }
-  }
+	"name": "@odit/lfk-selfservice",
+	"version": "0.1.2",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"release": "release-it --only-version"
+	},
+	"dependencies": {
+		"marked": "2.0.1",
+		"redaxios": "0.4.1",
+		"toastify-js": "1.10.0",
+		"validator": "13.5.2",
+		"vue-i18n": "9.0.0",
+		"vue-toastification": "2.0.0-rc.1",
+		"vue": "3.0.9",
+		"vue-router": "4.0.5"
+	},
+	"devDependencies": {
+		"@tailwindcss/jit": "0.1.17",
+		"@tailwindcss/aspect-ratio": "0.2.0",
+		"@tailwindcss/forms": "0.3.2",
+		"@tailwindcss/line-clamp": "0.2.0",
+		"@tailwindcss/typography": "0.4.0",
+		"@vitejs/plugin-vue": "1.2.0",
+		"@vue/compiler-sfc": "3.0.9",
+		"autoprefixer": "10.2.5",
+		"tailwindcss": "2.0.4",
+		"release-it": "14.5.0",
+		"vite": "2.1.3"
+	},
+	"release-it": {
+		"git": {
+			"commit": true,
+			"requireCleanWorkingDir": false,
+			"commitMessage": "🚀Bumped version to v${version}",
+			"requireBranch": "dev",
+			"push": false,
+			"tag": false
+		},
+		"npm": {
+			"publish": false
+		}
+	}
 }
diff --git a/src/App.vue b/src/App.vue
index 65b217d..cc5bdf4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,9 @@
 <template>
-  <router-view></router-view>
+  <main>
+    <router-view></router-view>
+  </main>
 </template>
 
 <script setup>
-console.log(config.baseurl_selfservice);
 config.baseurl_selfservice = (config.baseurl_selfservice || "/selfservice");
 </script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 1c2e097..792b9b6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,10 +1,21 @@
 import { createApp } from 'vue';
-import App from './App.vue';
-import Toast from 'vue-toastification';
-import 'windi.css';
+import './tailwind.css';
 import 'toastify-js/src/toastify.css';
 import 'vue-toastification/dist/index.css';
-import { router } from './router';
+import App from './App.vue';
+import { routes } from './routes.js';
+import { createRouter, createWebHistory } from 'vue-router';
 import { i18n } from './language';
+import Toast from 'vue-toastification';
 
-createApp(App).use(Toast).use(i18n).use(router).mount('#app');
+const app = createApp(App);
+
+const router = createRouter({
+	history: createWebHistory(),
+	routes
+});
+
+app.use(router);
+app.use(i18n);
+app.use(Toast);
+app.mount('#app');
diff --git a/src/router.js b/src/router.js
deleted file mode 100644
index c3a6634..0000000
--- a/src/router.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { createWebHistory, createRouter } from 'vue-router';
-// ------------
-const EnvError = import('./components/EnvError.vue');
-const Home = import('./components/Home.vue');
-const Imprint = import('./components/Imprint.vue');
-const Privacy = import('./components/Privacy.vue');
-const Register = () => import('./components/Register.vue');
-const Profile = () => import('./components/Profile.vue');
-//
-let routes = [ { path: '/:pathMatch(.*)*', component: EnvError } ];
-if (typeof config !== 'undefined') {
-	if (config.baseurl && config.documentserver_key) {
-		routes = [
-			{ path: '/', component: Home },
-			{ path: '/imprint', component: Imprint },
-			{ path: '/privacy', component: Privacy },
-			{ path: '/register', component: Register },
-			{ path: '/register/:token', component: Register, props: true },
-			{ path: '/profile/:token', component: Profile, props: true }
-		];
-	}
-}
-export const router = createRouter({
-	history: createWebHistory(),
-	routes
-});
diff --git a/src/routes.js b/src/routes.js
new file mode 100644
index 0000000..815464f
--- /dev/null
+++ b/src/routes.js
@@ -0,0 +1,16 @@
+import EnvError from './components/EnvError.vue';
+import Home from './views/Home.vue';
+import Imprint from './views/Imprint.vue';
+import Privacy from './views/Privacy.vue';
+import Register from './views/Register.vue';
+import Profile from './views/Profile.vue';
+
+/** @type {import('vue-router').RouterOptions['routes']} */
+export const routes = [
+	{ path: '/', component: Home },
+	{ path: '/imprint', component: Imprint },
+	{ path: '/privacy', component: Privacy },
+	{ path: '/register', component: Register },
+	{ path: '/register/:token', component: Register, props: true },
+	{ path: '/profile/:token', component: Profile, props: true }
+];
diff --git a/src/components/simple.css b/src/simple.css
similarity index 100%
rename from src/components/simple.css
rename to src/simple.css
diff --git a/src/tailwind.css b/src/tailwind.css
new file mode 100644
index 0000000..a31e444
--- /dev/null
+++ b/src/tailwind.css
@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
diff --git a/src/components/Home.vue b/src/views/Home.vue
similarity index 94%
rename from src/components/Home.vue
rename to src/views/Home.vue
index 6dbccfa..e1af9d0 100644
--- a/src/components/Home.vue
+++ b/src/views/Home.vue
@@ -25,6 +25,5 @@
 </template>
 
 <script setup>
-import LoginForm from "./LoginForm.vue";
-import Footer from "./Footer.vue";
+import Footer from "@/components/Footer.vue";
 </script>
\ No newline at end of file
diff --git a/src/components/Imprint.vue b/src/views/Imprint.vue
similarity index 96%
rename from src/components/Imprint.vue
rename to src/views/Imprint.vue
index 8fa9046..588b493 100644
--- a/src/components/Imprint.vue
+++ b/src/views/Imprint.vue
@@ -10,7 +10,7 @@
     </div>
   </section>
 </template>
-<style src="./simple.css">
+<style src="../simple.css">
 </style>
 <script>
 import marked from "marked";
diff --git a/src/components/Privacy.vue b/src/views/Privacy.vue
similarity index 96%
rename from src/components/Privacy.vue
rename to src/views/Privacy.vue
index 94394c8..3694ff1 100644
--- a/src/components/Privacy.vue
+++ b/src/views/Privacy.vue
@@ -10,7 +10,7 @@
     </div>
   </section>
 </template>
-<style src="./simple.css">
+<style src="../simple.css">
 </style>
 <script>
 import marked from "marked";
diff --git a/src/components/Profile.vue b/src/views/Profile.vue
similarity index 96%
rename from src/components/Profile.vue
rename to src/views/Profile.vue
index fc7c8f1..63bbb1e 100644
--- a/src/components/Profile.vue
+++ b/src/views/Profile.vue
@@ -165,13 +165,10 @@
 </template>
 
 <script setup>
-import { ref, reactive } from "vue";
+import { reactive } from "vue";
 import { useToast } from "vue-toastification";
 import axios from "redaxios";
-// import isEmail from 'validator/es/lib/isEmail';
-// import isMobilePhone from 'validator/es/lib/isMobilePhone';
-// import isPostalCode from 'validator/es/lib/isPostalCode';
-// 
+
 const state = reactive({
   phone: "",
   email: "",
@@ -187,7 +184,7 @@ const props = defineProps({
   token: String
 })
 const accesstoken = atob(props.token);
-axios.get(`${config.baseurl}api/runners/me/${accesstoken}`)
+axios.get(`${config.baseurl_selfservice}/api/runners/me/${accesstoken}`)
   .then(({ data }) => {
     state.phone = data.phone;
     state.email = data.email;
diff --git a/src/components/Register.vue b/src/views/Register.vue
similarity index 99%
rename from src/components/Register.vue
rename to src/views/Register.vue
index 09f1ab8..68a275c 100644
--- a/src/components/Register.vue
+++ b/src/views/Register.vue
@@ -261,7 +261,7 @@ import isEmail from 'validator/es/lib/isEmail';
 import isMobilePhone from 'validator/es/lib/isMobilePhone';
 import isPostalCode from 'validator/es/lib/isPostalCode';
 import { useToast } from "vue-toastification";
-import { router } from '../router';
+// import { router } from '../router';
 import { i18n } from '../language';
 
 const props = defineProps({
@@ -328,7 +328,7 @@ function login() {
       axios.post(url, postdata)
         .then(({ data }) => {
           const token = btoa(data.token);
-          router.push(`${config.baseurl_selfservice}/profile/${token}`);
+          // router.push(`${config.baseurl_selfservice}/profile/${token}`);
         })
         .catch((error) => {
           console.log(error);
diff --git a/vite.config.js b/vite.config.js
index 2b81b64..d3340f4 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,9 +1,12 @@
+import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
-import WindiCSS from 'vite-plugin-windicss';
+import path from 'path';
 
-/**
- * @type {import('vite').UserConfig}
- */
-export default {
-	plugins: [ vue(), WindiCSS() ]
-};
+export default defineConfig({
+	plugins: [ vue() ],
+	resolve: {
+		alias: {
+			'@': path.resolve(__dirname, '/src')
+		}
+	}
+});