Merge pull request #226 from sebinside/develop

Merge develop for v3 release

.github/workflows/build.yml

@@ -28,5 +28,5 @@ jobs:
       - name: Install and Build 🔧
         working-directory: StreamAwesome
         run: |
-          npm install
-          npm run build
+          yarn install
+          yarn run build

.github/workflows/deploy.yml

@@ -27,8 +27,8 @@ jobs:
       - name: Install and Build 🔧
         working-directory: StreamAwesome
         run: |
-          npm install
-          npm run build
+          yarn install
+          yarn run build
 
       - name: Deploy 🚀
         uses: burnett01/[email protected]

README.md

@@ -1,7 +1,13 @@
+<p align="center">
+  <a href="https://skate702.de/StreamAwesome/"><img src = "streamawesome-logo.png"/></a><br>
+  <a href="https://skate702.de/StreamAwesome/">skate702.de/StreamAwesome</a>
+</p>
+<p>&nbsp;</p>
+
 ## Stream Awesome - Stream Deck Icon Generator using Font Awesome
 ### > Available online: https://skate702.de/StreamAwesome/
 
-Generate awesome looking Stream Deck icons like [these](https://www.instagram.com/p/CKPCM_YF16a/). Close to the [Elgato original](https://www.elgato.com/stream-deck) and of course awesome because of [Font Awesome](https://fontawesome.com/).
+Generate awesome-looking Stream Deck icons. Close to the [Elgato original](https://www.elgato.com/stream-deck) and awesome because of [Font Awesome](https://fontawesome.com/).
 
 ![image](preview.png)
 

StreamAwesome/.husky/pre-commit

@@ -1,3 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
 cd ./StreamAwesome && npx lint-staged 

StreamAwesome/package.json

@@ -12,42 +12,46 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/",
-    "prepare": "cd ../ && husky install ./StreamAwesome/.husky",
+    "prepare": "cd ../ && husky ./StreamAwesome/.husky",
     "tidy": "npm run lint && npm run format"
   },
   "dependencies": {
     "chroma-js": "^2.4.2",
     "color-namer": "^1.4.0",
     "pinia": "^2.1.7",
-    "vue": "^3.4.26",
-    "vue-router": "^4.3.2"
+    "vue": "^3.4.33",
+    "vue-router": "^4.4.0"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.10.2",
+    "@rushstack/eslint-patch": "^1.10.3",
     "@tsconfig/node18": "^18.2.4",
     "@types/chroma-js": "^2.4.4",
     "@types/color-namer": "^1.3.3",
     "@types/jsdom": "^21.1.6",
-    "@types/node": "^18.19.31",
+    "@types/node": "^18.19.33",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
-    "@vue/test-utils": "^2.4.5",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.25.0",
+    "eslint-plugin-vue": "^9.27.0",
     "husky": "^9.0.11",
-    "jsdom": "^24.0.0",
+    "jsdom": "^24.1.1",
+    "lint-staged": "^15.2.7",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.5.14",
-    "tailwindcss": "^3.4.3",
-    "typescript": "~5.4.5",
-    "vite": "^5.2.8",
-    "vitest": "^1.5.0",
-    "vue-tsc": "^2.0.14"
+    "tailwindcss": "^3.4.7",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.5",
+    "vitest": "^1.6.0",
+    "vue-tsc": "^2.0.26"
+  },
+  "resolutions": {
+    "rollup": "npm:@rollup/wasm-node"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,vue}": [

StreamAwesome/src/components/IconCanvas.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
-import type { CustomIcon } from '@/model/customIcon'
-import IconGenerator from '@/logic/generator'
+import type { CustomIcon, FontAwesomePreset } from '@/model/customIcon'
 import { onMounted, ref, watch } from 'vue'
 import { useFontsStatusStore } from '@/stores/fontStatus'
+import { getMatchingGenerator } from '@/logic/generator/generators'
 
 const fontStatusStore = useFontsStatusStore()
 const iconCanvas = ref<HTMLCanvasElement | null>(null)
-const props = defineProps({
-  icon: {
-    type: Object as () => CustomIcon
-  }
-})
+const props = defineProps<{
+  icon: CustomIcon<FontAwesomePreset>
+}>()
 
 onMounted(() => {
   waitForRequiredInitialization(createGenerator)
@@ -32,18 +30,24 @@ function waitForRequiredInitialization(callback: () => void) {
 
 function createGenerator() {
   if (props.icon && iconCanvas.value) {
-    const iconGenerator = new IconGenerator(iconCanvas.value)
-    iconGenerator.generateIcon(props.icon)
+    triggerGenerator(props.icon, iconCanvas.value)
 
     watch(props.icon, () => {
-      if (props.icon) {
-        iconGenerator.generateIcon(props.icon)
+      if (props.icon && iconCanvas.value) {
+        triggerGenerator(props.icon, iconCanvas.value)
       }
     })
   }
 }
 
-defineEmits(['downloadIcon'])
+function triggerGenerator(icon: CustomIcon<any>, canvas: HTMLCanvasElement) {
+  const iconGenerator = getMatchingGenerator(icon, canvas)
+  iconGenerator.generateIcon(icon)
+}
+
+defineEmits<{
+  downloadIcon: []
+}>()
 </script>
 
 <template>

StreamAwesome/src/components/MainSettings.vue

@@ -2,13 +2,13 @@
 import IconBrowser from '@/components/browser/IconBrowser.vue'
 import IconCanvas from '@/components/IconCanvas.vue'
 import IconSettings from '@/components/settings/IconSettings.vue'
-import IconGenerator from '@/logic/generator'
+import { getMatchingGenerator } from '@/logic/generator/generators'
 import { useIconsStore } from '@/stores/icons'
 
 const iconStore = useIconsStore()
 
 function downloadIcon() {
-  const iconGenerator = new IconGenerator()
+  const iconGenerator = getMatchingGenerator(iconStore.currentIcon)
   iconGenerator.saveIcon(iconStore.currentIcon)
 }
 </script>

StreamAwesome/src/components/browser/IconBrowser.vue

@@ -4,12 +4,12 @@ import Icon from '@/components/utils/IconDisplay.vue'
 
 import { FontAwesomeBrowser } from '@/logic/fontAwesomeBrowser'
 import type { FontAwesomeIcon } from '@/model/fontAwesomeIcon'
-import { FontAwesomeIconType } from '@/model/fontAwesomeIconType'
+import type { FontAwesomeIconType } from '@/model/fontAwesomeIconType'
 import { fontAwesomeVersionInfo } from '@/model/versions'
 import { useIconsStore } from '@/stores/icons'
-import { ref, type Ref } from 'vue'
+import { ref } from 'vue'
 
-let availableIcons: Ref<FontAwesomeIconType[]> = ref([])
+let availableIcons = ref<FontAwesomeIconType[]>([])
 const iconStore = useIconsStore()
 
 function selectIcon(icon: FontAwesomeIconType) {
@@ -43,7 +43,7 @@ async function queryIcons(query: string) {
 queryIcons('video')
 </script>
 <template>
-  <InputGroup label="Search:" inputId="iconBrowser" @input="queryIcons($event.target.value)" />
+  <InputGroup label="Search:" inputId="iconBrowser" @on-input="queryIcons" />
   <div class="mt-3 grid grid-cols-3 grid-rows-3 justify-items-stretch gap-2 text-center">
     <Icon
       v-for="icon of availableIcons"

StreamAwesome/src/components/browser/InputGroup.vue

@@ -1,18 +1,11 @@
 <script setup lang="ts">
-defineProps({
-  label: {
-    type: String
-  },
-  inputId: {
-    required: true,
-    type: String
-  },
-  modelValue: {
-    required: false,
-    default: 'video'
-  }
-})
-defineEmits(['update:modelValue'])
+defineProps<{
+  label: string
+  inputId: string
+}>()
+defineEmits<{
+  onInput: [inputValue: string]
+}>()
 </script>
 
 <template>
@@ -21,11 +14,11 @@ defineEmits(['update:modelValue'])
       >{{ label }}
     </label>
     <input
+      type="text"
+      value="video"
       tabindex="1"
       :id="inputId"
-      type="text"
-      :value="modelValue"
-      @input="$emit('update:modelValue', $event.target)"
+      @input="(event) => $emit('onInput', (event.target as HTMLInputElement).value)"
       class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
     />
   </div>