Merge branch 'develop' for 2.0.0 release

.github/workflows/build.yml

@@ -2,11 +2,13 @@ name: Build StreamAwesome
 
 on:
  workflow_dispatch:
+ push:
  pull_request:
   types: [opened, synchronize, reopened]
 
 jobs:
   build:
+    if: github.actor == 'sebinside' || github.actor == 'dependabot[bot]'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️

StreamAwesome/package.json

@@ -17,35 +17,37 @@
   },
   "dependencies": {
     "chroma-js": "^2.4.2",
+    "color-namer": "^1.4.0",
     "pinia": "^2.1.7",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.5"
+    "vue": "^3.4.26",
+    "vue-router": "^4.3.2"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.7.2",
-    "@tsconfig/node18": "^18.2.2",
-    "@types/chroma-js": "^2.4.3",
+    "@rushstack/eslint-patch": "^1.10.2",
+    "@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.10",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@types/node": "^18.19.31",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/test-utils": "^2.4.4",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/test-utils": "^2.4.5",
     "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.17",
-    "eslint": "^8.54.0",
-    "eslint-plugin-vue": "^9.20.1",
-    "husky": "^8.0.3",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.25.0",
+    "husky": "^9.0.11",
     "jsdom": "^24.0.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.33",
-    "prettier": "^3.1.0",
-    "prettier-plugin-tailwindcss": "^0.5.7",
-    "tailwindcss": "^3.4.1",
-    "typescript": "~5.3.2",
-    "vite": "^5.0.13",
-    "vitest": "^1.2.1",
-    "vue-tsc": "^1.8.22"
+    "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
+    "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"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,vue}": [

StreamAwesome/src/App.vue

@@ -5,7 +5,7 @@ import FontLoader from '@/components/utils/FontLoader.vue'
 
 <template>
   <FontLoader />
-  <div class="m-auto mt-10 max-w-4xl rounded-2xl bg-gray-800 p-4 text-white">
+  <main class="m-auto mt-0 max-w-4xl bg-gray-800 p-4 text-white md:mt-10 md:rounded-2xl">
     <RouterView />
-  </div>
+  </main>
 </template>

StreamAwesome/src/components/IconCanvas.vue

@@ -3,7 +3,6 @@ import type { CustomIcon } from '@/model/customIcon'
 import IconGenerator from '@/logic/generator'
 import { onMounted, ref, watch } from 'vue'
 import { useFontsStatusStore } from '@/stores/fontStatus'
-import { FontAwesomeIcon } from '@/model/fontAwesomeIcon'
 
 const fontStatusStore = useFontsStatusStore()
 const iconCanvas = ref<HTMLCanvasElement | null>(null)
@@ -33,10 +32,7 @@ function waitForRequiredInitialization(callback: () => void) {
 
 function createGenerator() {
   if (props.icon && iconCanvas.value) {
-    const iconGenerator = new IconGenerator(
-      FontAwesomeIcon.fontVersionInfo.fontFamilyBase,
-      iconCanvas.value
-    )
+    const iconGenerator = new IconGenerator(iconCanvas.value)
     iconGenerator.generateIcon(props.icon)
 
     watch(props.icon, () => {

StreamAwesome/src/components/MainSettings.vue

@@ -3,21 +3,24 @@ 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 { FontAwesomeIcon } from '@/model/fontAwesomeIcon'
 import { useIconsStore } from '@/stores/icons'
 
 const iconStore = useIconsStore()
 
 function downloadIcon() {
-  const iconGenerator = new IconGenerator(FontAwesomeIcon.fontVersionInfo.fontFamilyBase)
+  const iconGenerator = new IconGenerator()
   iconGenerator.saveIcon(iconStore.currentIcon)
 }
 </script>
 
 <template>
-  <div class="flex flex-row flex-wrap">
-    <div style="max-width: 256px" class="mr-7">
-      <IconCanvas :icon="iconStore.currentIcon" class="mb-5 mt-5" @download-icon="downloadIcon" />
+  <div class="flex flex-col md:flex-row">
+    <div class="mr-0 grid md:mr-7">
+      <IconCanvas
+        :icon="iconStore.currentIcon"
+        class="mb-5 mt-5 place-self-center md:place-self-auto"
+        @download-icon="downloadIcon"
+      />
       <IconSettings :icon="iconStore.currentIcon" @download-icon="downloadIcon" />
     </div>
     <div class="flex-grow">

StreamAwesome/src/components/browser/IconBrowser.vue

@@ -1,29 +1,43 @@
 <script setup lang="ts">
 import InputGroup from '@/components/browser/InputGroup.vue'
-import Icon from '@/components/browser/IconDisplay.vue'
+import Icon from '@/components/utils/IconDisplay.vue'
 
 import { FontAwesomeBrowser } from '@/logic/fontAwesomeBrowser'
-import { FontAwesomeIcon } from '@/model/fontAwesomeIcon'
+import type { FontAwesomeIcon } from '@/model/fontAwesomeIcon'
+import { FontAwesomeIconType } from '@/model/fontAwesomeIconType'
+import { fontAwesomeVersionInfo } from '@/model/versions'
 import { useIconsStore } from '@/stores/icons'
 import { ref, type Ref } from 'vue'
 
-let availableIcons: Ref<FontAwesomeIcon[]> = ref([])
+let availableIcons: Ref<FontAwesomeIconType[]> = ref([])
 const iconStore = useIconsStore()
 
-function selectIcon(icon: FontAwesomeIcon) {
-  iconStore.currentIcon.symbol = icon.unicode
+function selectIcon(icon: FontAwesomeIconType) {
+  iconStore.currentIcon.fontAwesomeIcon = iconTypetoFontAwesomeIcon(icon)
+}
 
-  if (icon.isBrand()) {
-    iconStore.currentIcon.fontAwesomeFontFamilySuffix = 'Brands'
-  } else {
-    iconStore.currentIcon.fontAwesomeFontFamilySuffix = FontAwesomeIcon.fontVersionInfo.fontLicense
-  }
+function iconTypetoFontAwesomeIcon(iconType: FontAwesomeIconType): FontAwesomeIcon {
+  const id = iconType.id
+  const label = iconType.label
+  const unicode = iconType.unicode
+  const isBrandsIcon = iconType.isBrand()
+
+  // Icons have the previously selected style and family, selecting an icon does not change this
+  const style = iconStore.currentIcon.fontAwesomeIcon.style
+  const family = iconStore.currentIcon.fontAwesomeIcon.family
+
+  return { id, label, unicode, isBrandsIcon, style, family }
 }
 
 async function queryIcons(query: string) {
-  const fontAwesomeBrowser = new FontAwesomeBrowser(FontAwesomeIcon.fontVersionInfo.fontVersion)
+  const fontAwesomeBrowser = new FontAwesomeBrowser(fontAwesomeVersionInfo.fontVersion)
   let icons = await fontAwesomeBrowser.getAvailableIcons(query)
-  availableIcons.value = icons.filter((icon) => icon.isFree())
+
+  if (fontAwesomeVersionInfo.fontLicense === 'Free') {
+    availableIcons.value = icons.filter((icon) => icon.isFree())
+  } else {
+    availableIcons.value = icons
+  }
 }
 
 queryIcons('video')
@@ -35,8 +49,9 @@ queryIcons('video')
       v-for="icon of availableIcons"
       @click="selectIcon(icon)"
       :key="icon.id"
-      :icon="icon"
-      class="cursor-pointer rounded bg-slate-900 p-2 text-xl"
+      :title="icon.label"
+      :fontAwesomeIcon="iconTypetoFontAwesomeIcon(icon)"
+      class="cursor-pointer rounded bg-slate-900 p-2 text-xl hover:text-blue-500 focus:text-blue-500"
     ></Icon>
   </div>
 </template>

StreamAwesome/src/components/browser/InputGroup.vue

@@ -21,11 +21,12 @@ defineEmits(['update:modelValue'])
       >{{ label }}
     </label>
     <input
+      tabindex="1"
       :id="inputId"
       type="text"
       :value="modelValue"
       @input="$emit('update:modelValue', $event.target)"
-      class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+      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>
 </template>