♻️ assets folder, refactor ts paths, icon in h1

Author: haliphax

src/app/app.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import RealmClient from "@/lib/realm";
 import { onMounted, provide } from "vue";
 import GlobalMenu from "./components/global-menu.vue";
+import RealmClient from "./lib/realm";
 
 // make sure we're logged into realm
 const realm = await RealmClient.create();

src/app/components/discord-avatar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { RealmUser } from "@/lib/realm";
+import { RealmUser } from "@/app/lib/realm";
 
 defineProps<{
 	user: RealmUser;
@@ -9,8 +9,6 @@ defineProps<{
 
 <template>
 	<img
-		:height="size"
 		:src="`https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.jpg?size=${size}`"
-		:width="size"
 	/>
 </template>

src/app/components/global-menu.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import router from "@/router";
+import router from "@/app/router";
 import { Ref, ref } from "vue";
 
 const details: Ref<HTMLDetailsElement | undefined> = ref();

src/app/router.ts

@@ -1,5 +1,5 @@
-import { loading } from "@/lib/global";
 import { createRouter, createWebHashHistory } from "vue-router";
+import { loading } from "./lib/global";
 import Logout from "./views/logout.vue";
 import Main from "./views/main.vue";
 

src/app/views/logout.vue

@@ -1,14 +1,11 @@
 <script lang="ts" setup>
-import DiscordClient from "@/lib/discord";
-import { doneLoading } from "@/lib/global";
-import RealmClient from "@/lib/realm";
+import { doneLoading } from "@/app/lib/global";
+import RealmClient from "@/app/lib/realm";
 import { inject, onMounted } from "vue";
 
-const discord: DiscordClient = inject("discordClient")!;
 const realm: RealmClient = inject("realmClient")!;
 
 await realm.logout();
-await discord.logout();
 
 onMounted(() => doneLoading());
 </script>

src/app/views/main.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import DiscordAvatar from "@/components/discord-avatar.vue";
-import { doneLoading } from "@/lib/global";
-import RealmClient from "@/lib/realm";
+import DiscordAvatar from "@/app/components/discord-avatar.vue";
+import { doneLoading } from "@/app/lib/global";
+import RealmClient from "@/app/lib/realm";
 import { inject, onMounted } from "vue";
 
 const realm: RealmClient = inject("realmClient")!;
@@ -13,13 +13,16 @@ onMounted(() => doneLoading());
 </script>
 
 <template>
-	<h1>Realm TTRPG</h1>
+	<h1>
+		<img src="@/assets/favicon.gif" class="dib" />
+		Realm TTRPG
+	</h1>
 	<p>
 		You are logged in as
 		<DiscordAvatar
-			class="am di mr-xxs"
+			class="am dib mr-xxs x-av"
 			:user="realm.user"
-			:size="32"
+			:size="128"
 		></DiscordAvatar>
 		<strong>{{ realm.user.name }}</strong
 		>.
@@ -32,3 +35,15 @@ onMounted(() => doneLoading());
 		</select>
 	</p>
 </template>
+
+<style lang="css" scoped>
+h1 img {
+	height: 0.75em;
+	width: 0.75em;
+}
+
+.x-av {
+	height: 1.2em;
+	width: 1.2em;
+}
+</style>

src/favicon.gif renamed to src/assets/favicon.gif

@@ -4,7 +4,7 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width,initial-scale=1" />
 		<title>Realm TTRPG</title>
-		<link rel="icon" href="favicon.gif" />
+		<link rel="icon" href="assets/favicon.gif" />
 		<meta
 			property="og:description"
 			name="description"

src/index.html

@@ -16,7 +16,7 @@ export default defineConfig({
 	plugins: [vue()],
 	resolve: {
 		alias: {
-			"@": resolve(__dirname, "app"),
+			"@": resolve(__dirname),
 		},
 	},
 	server: {

src/vite.config.ts

@@ -7,7 +7,7 @@
 		"experimentalDecorators": true,
 		"lib": ["ES6", "DOM", "DOM.Iterable"],
 		"paths": {
-			"@/*": ["./src/app/*"]
+			"@/*": ["./src/*"]
 		},
 		"module": "ESNext",
 		"moduleResolution": "Node",