Release/v0.2.6

applications/about/index.vue

@@ -1,3 +1,40 @@
 <template>
-  <h1>About</h1>
+  <div class="flex flex-col">
+    <div class="flex justify-center items-center p-8">
+      <img
+        src="/Avatar.jpg"
+        alt="Ruan Aragão Illustration"
+        class="Avatar w-44 h-44"
+      />
+    </div>
+    <div class="flex flex-col text-center">
+      <h1 class="text-title text-gray-900 text-3xl font-bold">Web Desktop</h1>
+      <p class="text-gray-700 text-xl">My professional website</p>
+    </div>
+    <div class="flex flex-col mt-2">
+      <div class="flex flex-row justify-center gap-2">
+        <span class="text-gray-700 text-md font-medium">Version</span>
+        <span class="text-gray-700 text-md">{{ version }}</span>
+      </div>
+    </div>
+    <div class="flex flex-row justify-center text-center mt-2">
+      <a
+        href="https://github.com/RuanAragao/desktop-web"
+        target="_blank"
+        tabindex="0"
+        class="bg-slate-200 w-fit border border-slate-300 text-sm text-slate-700 rounded-md px-4 py-1 m-2 transition duration-500 ease select-none hover:bg-slate-300 focus:outline-none focus:shadow-outline"
+        >Mais informações...</a
+      >
+    </div>
+  </div>
 </template>
+
+<script>
+export default {
+  data() {
+    return {
+      version: '0.2.6',
+    }
+  },
+}
+</script>

applications/about/settings.ts

@@ -9,4 +9,8 @@ export default defineApplication({
   slug: 'about',
   icon: 'icon.png',
   command: "echo 'Hello World'",
+  windowSize: {
+    width: 300,
+    height: 460,
+  },
 })

components/launcher-grid.unit.spec.ts

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
-import LauncherGrid, { type App } from './launcher-grid.vue'
+import LauncherGrid from './launcher-grid.vue'
+import type { Application } from '@/types'
 
 const installedApps = [
   {
@@ -13,7 +14,7 @@ const installedApps = [
     icon: 'icon.png',
     command: "echo 'Hello World'",
   },
-] as App[]
+] as Application[]
 
 const props = {
   bootlist: installedApps,

components/launcher-grid.vue

@@ -25,6 +25,7 @@
       :key="app.pid"
       :title="app.name"
       :on-close="() => runningApps.splice(runningApps.indexOf(app), 1)"
+      :window-size="app.windowSize"
     >
       <component :is="app.app" />
     </WindowComponent>
@@ -46,6 +47,9 @@ export default {
     AppLauncher,
     WindowComponent,
     draggable,
+    installedApps: [] as Application[],
+    loadedApps: [] as Application[],
+    runningApps: [] as Application[],
   },
 
   props: {

components/window-component.vue

@@ -1,11 +1,8 @@
 <template>
-  <div
-    ref="windowRef"
-    class="window min-w-[230px] bg-white rounded-lg shadow-lg"
-  >
+  <div ref="windowRef" class="window bg-white rounded-lg shadow-lg">
     <header
       class="title-bar bg-gray-200 px-4 py-2 flex items-center justify-between rounded-t-lg"
-      @mousedown.prevent="mousedownTitleBar"
+      @mousedown.left.prevent="mousedownTitleBar"
       @touchstart.prevent="touchstartTitleBar"
     >
       <div class="title text-gray-800">{{ title }}</div>
@@ -33,7 +30,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: 'WindowComponent',
   props: {
@@ -45,6 +42,13 @@ export default {
       type: Function,
       default: () => {},
     },
+    windowSize: {
+      type: Object,
+      default: () => ({
+        width: 340,
+        height: 230,
+      }),
+    },
   },
 
   data: () => ({
@@ -58,6 +62,11 @@ export default {
     initialHeight: 0,
   }),
 
+  mounted() {
+    this.$refs.windowRef.style.width = `${this.windowSize.width}px`
+    this.$refs.windowRef.style.height = `${this.windowSize.height}px`
+  },
+
   methods: {
     // DnD
     mousedownTitleBar(event) {
@@ -158,8 +167,8 @@ export default {
     },
     maximizeWindow() {
       if (this.$refs.windowRef.style.width === '100%') {
-        this.$refs.windowRef.style.width = '340px'
-        this.$refs.windowRef.style.height = '230px'
+        this.$refs.windowRef.style.width = this.windowSize.width + 'px'
+        this.$refs.windowRef.style.height = this.windowSize.height + 'px'
         return
       }
       this.$refs.windowRef.style.left = '50%'
@@ -181,8 +190,6 @@ export default {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 340px;
-  height: 230px;
   overflow: hidden;
 }
 

nuxt.config.ts

@@ -8,6 +8,11 @@ export default defineNuxtConfig({
     '@nuxtjs/stylelint-module',
   ],
 
+  tailwindcss: {
+    exposeConfig: true,
+    viewer: true,
+  },
+
   routeRules: {
     '/**': {
       prerender: true,

package.json

@@ -2,6 +2,7 @@
   "name": "desktop-web",
   "private": true,
   "type": "commonjs",
+  "version": "0.2.6",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --host",
@@ -36,7 +37,7 @@
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-nuxt": "^4.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.1.0",
     "husky": "^8.0.0",
     "jsdom": "^23.0.1",
     "lint-staged": "^15.2.0",
@@ -53,7 +54,7 @@
     "stylelint-config-standard": "^35.0.0",
     "typescript": "^5.3.3",
     "vitest": "^1.0.4",
-    "vue": "^3.3.10",
+    "vue": "^3.3.13",
     "vue-router": "^4.2.5"
   },
   "dependencies": {