font awesome

config/common.neon

@@ -17,5 +17,6 @@ di:
 		tags: no
 
 tracy:
+	showBar: false 
 	bar:
 		- VitePanel

package.json

@@ -8,10 +8,15 @@
     "composer:update": "docker run --rm --interactive --tty --volume ${PWD}:/app --volume ${COMPOSER_HOME:-$HOME/.composer}:/tmp composer update"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.0.0",
+    "@fortawesome/fontawesome-svg-core": "^1.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.0.0",
+    "@fortawesome/vue-fontawesome": "^2.0.6",
     "@hotwired/stimulus": "^3.0.1",
     "@hotwired/turbo": "^7.1.0",
     "axios": "^0.25.0",
     "flowbite": "^1.3.3",
+    "font-awesome": "^4.7.0",
     "nette-forms": "^3.3.1",
     "vue": "^3.2.30",
     "vue-tabz": "^1.1.5"

src/scripts/components/Translation.vue

@@ -1,4 +1,5 @@
 <script>
+
 export default {
   props: ['data', 'type'],
   computed: {
@@ -11,7 +12,7 @@ export default {
       }
       return ret;
     }
-  }  
+  },
 
 }
 </script>
@@ -70,6 +71,12 @@ export default {
 <div class="overflow-hidden shadow-md sm:rounded-lg  justify-center">
     <div v-for="(t, i) in termsDataDict" :key="i" class="border-b odd:bg-white even:bg-gray-50 p-2">
     <span class="text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white">{{ i }} </span>
+    <span v-if="t[0].pronunciations" class="mx-2">
+        
+        <span class="mx-1 text-sm font-bold" 
+              v-bind:class="{ 'text-green-800': i == 0, 'text-blue-800': i == 1, 'text-red-800': i == 3 }" 
+              v-for="(p,i) in t[0].pronunciations" :key="i">[{{ p.ipa }}]<i class="fa ml-1 fa-play-circle"></i></span>  
+    </span>
         <div class="px-10">
         <span v-for="(tt, n) in t" :key="n" class="text-sm text-gray-500  dark:text-gray-400">
             {{ tt.string2 }}<span v-if="n != t.length-1">, </span>

src/scripts/main.js

@@ -4,6 +4,7 @@ import './index.css'
 import { Application, Controller } from '@hotwired/stimulus'
 import "@hotwired/turbo"
 import 'flowbite';
+import '@fortawesome/fontawesome-free/js/all.js';
 
 
 const LibStimulus = new Application(document.documentElement)

yarn.lock

@@ -174,6 +174,35 @@
     "@docsearch/css" "3.0.0-alpha.50"
     algoliasearch "^4.0.0"
 
+"@fortawesome/fontawesome-common-types@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.3.0.tgz#949995a05c0d8801be7e0a594f775f1dbaa0d893"
+  integrity sha512-CA3MAZBTxVsF6SkfkHXDerkhcQs0QPofy43eFdbWJJkZiq3SfiaH1msOkac59rQaqto5EqWnASboY1dBuKen5w==
+
+"@fortawesome/fontawesome-free@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.0.0.tgz#6f3bd8e42997c7d536a1246877ed8bcd4f005a54"
+  integrity sha512-6LB4PYBST1Rx40klypw1SmSDArjFOcfBf2LeX9Zg5EKJT2eXiyiJq+CyBYKeXyK0sXS2FsCJWSPr/luyhuvh0Q==
+
+"@fortawesome/fontawesome-svg-core@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.3.0.tgz#343fac91fa87daa630d26420bfedfba560f85885"
+  integrity sha512-UIL6crBWhjTNQcONt96ExjUnKt1D68foe3xjEensLDclqQ6YagwCRYVQdrp/hW0ALRp/5Fv/VKw+MqTUWYYvPg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.3.0"
+
+"@fortawesome/free-solid-svg-icons@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.0.0.tgz#bed4a501b631c6cfa35c09830f7cb63ffca1589d"
+  integrity sha512-o4FZ1XbndcgeWNb8Wh0y+Hgf73CjmyOQowUSaqQCtgIIdS+XliSBSOwCl330wER+I6CGYE96hT27bHBPmzX2Gg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.3.0"
+
+"@fortawesome/vue-fontawesome@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.6.tgz#87e691ed87f28f4667238573a29743f543a087f6"
+  integrity sha512-V3vT3flY15AKbUS31aZOP12awQI3aAzkr2B1KnqcHLmwrmy51DW3pwyBczKdypV8QxBZ8U68Hl2XxK2nudTxpg==
+
 "@hotwired/stimulus@^3.0.1":
   version "3.0.1"
   resolved "https://registry.npmjs.org/@hotwired/stimulus/-/stimulus-3.0.1.tgz"
@@ -747,6 +776,11 @@ follow-redirects@^1.14.7:
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz"
   integrity sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==
 
+font-awesome@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
+  integrity sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=
+
 fraction.js@^4.1.2:
   version "4.1.3"
   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.3.tgz"