Fix Font Awesome icons

Not sure why they did not display properly only on mobile. Switched to new approach using Vue components. Tweak ESLint config and enable it in the build.
nguillaumin · Sep 19, 2024 · ebb2586 · ebb2586
1 parent 538d13a
commit ebb2586
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 33 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -11,5 +11,8 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 'latest'
   },
-  ignorePatterns: ['**/stsound/**']
+  ignorePatterns: ['**/stsound/**'],
+  globals: {
+    'process': true
+  }
 }
diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
@@ -37,7 +37,7 @@ jobs:
         name: libym
         path: stsound
     - run: npm ci
-    # - run: npm lint
+    - run: npm run lint
     - run: npm run scan-songs
     - run: npm run build
     - name: Upload build artifact

diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" type="image/x-icon" href="/public/favicon.ico">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
     <title>YM Jukebox</title>
     <style>
       body {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,14 +16,17 @@
     "vue": "^3.4.29"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^6.6.0",
+    "@fontsource/exo-2": "^5.1.0",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
     "@rushstack/eslint-patch": "^1.10.0",
     "@vitejs/plugin-vue": "^5.1.0",
     "@vue/eslint-config-prettier": "^9.0.0",
     "axios": "^1.7.7",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.28.0",
-    "@fontsource/exo-2": "^5.1.0",
     "moment": "^2.30.1",
     "prettier": "^3.3.0",
     "vite": "^5.4.5",

diff --git a/src/YmPlayer.vue b/src/YmPlayer.vue
@@ -165,12 +165,12 @@ function playSong() {
     <ul class="actions nav-secondary" v-show="activeTab === 'playlist'">
       <li>
         <a href="#" @click.prevent="onClickEnqueueRandom"
-          ><i class="fa fa-plus-circle" aria-hidden="true"></i> Enqueue 100 random songs</a
+          ><font-awesome-icon icon="fa-solid fa-plus-circle" /> Enqueue 100 random songs</a
         >
       </li>
       <li>
         <a href="#" @click.prevent="onClickClearPlaylist"
-          ><i class="fa fa-times" aria-hidden="true"></i> Clear</a
+          ><font-awesome-icon icon="fa-solid fa-times" /> Clear</a
         >
       </li>
     </ul>
@@ -193,7 +193,7 @@ function playSong() {
         <a href="http://leonard.oxg.free.fr/">ST-Sound library by Leonard</a>. Music is from the
         defunct <a href="http://www.brainbug.ch/stsound/">BrainBug ST-Sound archive</a> and
         <a href="http://modland.com/">Modland</a>. Sources and music files on
-        <i class="fa fa-github" aria-hidden="true"></i>
+        <font-awesome-icon icon="fa-brands fa-github" />&nbsp;
         <a href="https://github.com/nguillaumin/ym-jukebox">GitHub</a>.
       </p>
     </div>

diff --git a/src/components/PlayControls.vue b/src/components/PlayControls.vue
@@ -40,7 +40,7 @@ function onClickPlayPause() {
             @click.prevent="$emit('previous')"
             :class="{ disabled: !hasPrevious }"
           >
-            <i class="fa fa-fw fa-2x fa-step-backward" aria-hidden="true"></i>
+            <font-awesome-icon icon="fa-solid fa-step-backward" size="2x" fixed-width />
           </a>
         </li>
 
@@ -51,17 +51,17 @@ function onClickPlayPause() {
             @click.prevent="onClickPlayPause"
             :class="{ disabled: !song }"
           >
-            <i
-              class="fa fa-fw fa-4x"
-              :class="{ 'fa-play': !playing, 'fa-pause': playing }"
-              aria-hidden="true"
-            ></i>
+            <font-awesome-icon
+              :icon="playing ? 'fa-solid fa-pause' : 'fa-solid fa-play'"
+              size="4x"
+              fixed-width
+            />
           </a>
         </li>
 
         <li>
           <a href="#" title="Next" @click.prevent="$emit('next')" :class="{ disabled: !hasNext }">
-            <i class="fa fa-fw fa-2x fa-step-forward" aria-hidden="true"></i>
+            <font-awesome-icon icon="fa-solid fa-step-forward" size="2x" fixed-width />
           </a>
         </li>
       </ul>
@@ -100,7 +100,7 @@ function onClickPlayPause() {
   flex-grow: 1;
   padding-bottom: 0.5rem;
 }
-.controls a i {
+.controls a svg {
   vertical-align: middle;
 }
 

diff --git a/src/components/SongList.vue b/src/components/SongList.vue
@@ -21,8 +21,8 @@ function songPath(path) {
       :class="{ active: song?.path === currentSong?.path }"
     >
       <a href="#" title="Play" @click.prevent="$emit('play-song', song)"
-        ><i class="fa-solid fa-play fa-2x" aria-hidden="true"></i
-      ></a>
+        ><font-awesome-icon icon="fa-solid fa-play" size="3x" />
+      </a>
       <div class="name">
         {{ song.name }} <small class="duration">{{ songDuration(song.durationMs) }}</small
         ><br />
@@ -32,8 +32,8 @@ function songPath(path) {
       </div>
       <div class="actions">
         <a href="#" title="Add to playlist" @click.prevent="$emit('add-to-playlist', song)"
-          ><i class="fa fa-plus fa-2x" aria-hidden="true"></i
-        ></a>
+          ><font-awesome-icon icon="fa-solid fa-plus" size="2x"
+        /></a>
       </div>
     </div>
   </div>

diff --git a/src/components/SongPlaylist.vue b/src/components/SongPlaylist.vue
@@ -24,8 +24,8 @@ function songPath(path) {
         :class="{ active: index === playlistIndex }"
       >
         <a href="#" title="Play" @click.prevent="$emit('play-song', song)"
-          ><i class="fa fa-play fa-2x" aria-hidden="true"></i
-        ></a>
+          ><font-awesome-icon icon="fa-solid fa-play" size="3x"
+        /></a>
         <div class="name">
           {{ song.name }} <small class="duration">{{ songDuration(song.durationMs) }}</small
           ><br />
@@ -38,8 +38,8 @@ function songPath(path) {
             href="#"
             title="Remove from playlist"
             @click.prevent="$emit('remove-from-playlist', song)"
-            ><i class="fa fa-times fa-2x" aria-hidden="true"></i
-          ></a>
+            ><font-awesome-icon icon="fa-solid fa-times" size="2x"
+          /></a>
         </div>
       </div>
     </div>

diff --git a/src/main.js b/src/main.js
@@ -1,10 +1,22 @@
 import './assets/main.css'
 
 import { createApp } from 'vue'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faPlay,
+  faPlus,
+  faTimes,
+  faStepBackward,
+  faStepForward,
+  faPause,
+  faPlusCircle
+} from '@fortawesome/free-solid-svg-icons'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import YmPlayer from './YmPlayer.vue'
 
-import '@fortawesome/fontawesome-free/css/fontawesome.min.css'
 import '@fontsource/exo-2/index.css'
 
-const app = createApp(YmPlayer)
-app.mount('#ym-player')
+library.add(faPlay, faPlus, faTimes, faStepBackward, faStepForward, faPause, faPlusCircle, faGithub)
+
+createApp(YmPlayer).component('font-awesome-icon', FontAwesomeIcon).mount('#ym-player')