Merge pull request #67 from devtobi/63-add-functionality-to-detect-op…

…erating-system

feat: added feature to detect operating system and show custom icon

packages/cv-wrapper/env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="user-agent-data-types" />

packages/cv-wrapper/package.json

@@ -34,6 +34,7 @@
     "eslint-plugin-vue": "9.26.0",
     "typescript": "5.4.5",
     "unplugin-vue-components": "0.27.0",
+    "user-agent-data-types": "0.4.2",
     "vite": "5.3.1",
     "vue-tsc": "2.0.21"
   }

packages/cv-wrapper/src/App.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="app-container flex flex-column min-h-screen">
     <the-menubar />
-    <main class="flex-1"></main>
+    <main class="flex-1">
+      <span :class="operatingSystemIcon"></span>
+    </main>
     <the-footer />
   </div>
 </template>
@@ -10,6 +12,9 @@
   import TheFooter from '@/components/CvFooter.vue';
   import TheMenubar from '@/components/CvMenubar.vue';
   import { useWatchLanguage } from '@/composables/useWatchLanguage';
+  import { getOperatingSystemIcon } from '@/helpers/getOperatingSystemIcon';
+
+  const operatingSystemIcon = getOperatingSystemIcon();
 
   useWatchLanguage();
 </script>

packages/cv-wrapper/src/helpers/getOperatingSystem.ts

@@ -0,0 +1,27 @@
+import {
+  iosPlatforms,
+  macOSPlatforms,
+  OperatingSystem,
+  windowsPlatforms,
+} from '@/types/OperatingSystem';
+
+export const getOperatingSystem = () => {
+  const userAgent = window.navigator.userAgent;
+  const platform =
+    window.navigator?.userAgentData?.platform || window.navigator.platform;
+
+  switch (true) {
+    case macOSPlatforms.includes(platform):
+      return OperatingSystem.MACOS;
+    case iosPlatforms.includes(platform):
+      return OperatingSystem.IOS;
+    case windowsPlatforms.includes(platform):
+      return OperatingSystem.WINDOWS;
+    case /Android/.test(userAgent):
+      return OperatingSystem.ANDROID;
+    case /Linux/.test(platform):
+      return OperatingSystem.LINUX;
+    default:
+      return OperatingSystem.OTHER;
+  }
+};

packages/cv-wrapper/src/helpers/getOperatingSystemIcon.ts

@@ -0,0 +1,19 @@
+import { PrimeIcons } from 'primevue/api';
+
+import { getOperatingSystem } from '@/helpers/getOperatingSystem';
+import { OperatingSystem } from '@/types/OperatingSystem';
+
+export const getOperatingSystemIcon = () => {
+  const os = getOperatingSystem();
+
+  const iconMap: Record<OperatingSystem, string> = {
+    [OperatingSystem.MACOS]: PrimeIcons.APPLE,
+    [OperatingSystem.WINDOWS]: PrimeIcons.MICROSOFT,
+    [OperatingSystem.LINUX]: PrimeIcons.DESKTOP,
+    [OperatingSystem.IOS]: PrimeIcons.APPLE,
+    [OperatingSystem.ANDROID]: PrimeIcons.ANDROID,
+    [OperatingSystem.OTHER]: PrimeIcons.DESKTOP,
+  };
+
+  return iconMap[os];
+};

packages/cv-wrapper/src/types/OperatingSystem.ts

@@ -0,0 +1,18 @@
+export enum OperatingSystem {
+  MACOS,
+  WINDOWS,
+  LINUX,
+  IOS,
+  ANDROID,
+  OTHER,
+}
+
+export const macOSPlatforms = [
+  'macOS',
+  'Macintosh',
+  'MacIntel',
+  'MacPPC',
+  'Mac68K',
+];
+export const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'];
+export const iosPlatforms = ['iPhone', 'iPad', 'iPod'];