add prop data-audio-other

.vitepress/theme/components/SpeakWord.vue

@@ -35,6 +35,9 @@ const props = defineProps({
   audioUk: {
     type: String,
   },
+  audioOther: {
+    type: String,
+  },
   pos: {
     type: String,
   },
@@ -43,8 +46,10 @@ const props = defineProps({
 const svgUrl = (accent) => {
   if (accent === 'uk') {
     return '/images/speaker-brown.svg';
+  } else if (accent === 'us') {
+    return '/images/speaker-blue.svg';
   }
-  return '/images/speaker-blue.svg';
+  return '/images/speaker-black.svg';
 }
 
 const audioPathUS = computed(() => {
@@ -61,6 +66,13 @@ const audioPathUK = computed(() => {
   return getAudioPath(props.word, "uk")
 });
 
+const audioPathOther = computed(() => {
+  if (props.audioUk) {
+    return props.audioUk;
+  }
+  return getAudioPath(props.word, "other")
+});
+
 const audios = computed(() => {
   const ret:any = [];
   if (audioPathUS.value) {
@@ -69,6 +81,9 @@ const audios = computed(() => {
   if (audioPathUK.value) {
     ret.push({ label: 'uk', audio: audioPathUK.value});
   }
+  if (audioPathOther.value) {
+    ret.push({ label: 'other', audio: audioPathOther.value});
+  }
   return ret;
 });
 

.vitepress/theme/components/SpeakWordInlineConverter.vue

@@ -22,10 +22,14 @@ function buildPlayButton(parent, accent, url) {
   audioEl.setAttribute('controls', 'false')
   const iconEl = document.createElement('img');
   iconEl.classList.add('icon');
-  let svg = '/images/speaker-blue.svg';
+
+  let svg = '/images/speaker-black.svg';
   if (accent === 'uk') {
     svg = '/images/speaker-brown.svg';
+  } else if (accent === 'us') {
+    svg = '/images/speaker-blue.svg';
   }
+
   iconEl.setAttribute('src', svg)
   iconEl.innerText = accent.toUpperCase();
 
@@ -47,15 +51,16 @@ function convertToInlineComponent(el) {
   }
   const dataAudioUs = el.getAttribute('data-audio-us')
   const dataAudioUk = el.getAttribute('data-audio-uk')
-  console.log('inline component', dataAudioUs, dataAudioUk)
+  const dataAudioOther = el.getAttribute('data-audio-other')
+  console.log('inline component', dataAudioUs, dataAudioUk, dataAudioOther)
 
   const wrapperEl = document.createElement('div')
   wrapperEl.classList.add('speak-word-wrapper')
   const canEl = document.createElement('div')
   canEl.classList.add('speak-word')
   canEl.classList.add('inline')
 
-  if (dataAudioUk || dataAudioUs) {
+  if (dataAudioUk || dataAudioUs || dataAudioOther) {
     const ctrlEl = document.createElement('div')
     ctrlEl.classList.add('ctrl')
     const ctrlPartEl = document.createElement('div')
@@ -64,12 +69,21 @@ function convertToInlineComponent(el) {
       buildPlayButton(ctrlPartEl, 'us', dataAudioUs)
     }
     ctrlEl.append(ctrlPartEl);
+
     const ctrlPartEl2 = document.createElement('div')
     ctrlPartEl2.classList.add('ctrl-part')
     if (dataAudioUk) {
       buildPlayButton(ctrlPartEl2, 'uk', dataAudioUk)
     }
     ctrlEl.append(ctrlPartEl2);
+
+    const ctrlPartEl3 = document.createElement('div')
+    ctrlPartEl3.classList.add('ctrl-part')
+    if (dataAudioOther) {
+      buildPlayButton(ctrlPartEl3, 'other', dataAudioOther)
+    }
+    ctrlEl.append(ctrlPartEl3);
+
     canEl.append(ctrlEl)
   }
   wrapperEl.append(canEl)

.vitepress/theme/font.scss

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Sauce Code Pro';
+  src: url('/fonts/SauceCodeProNerdFontMono-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+

.vitepress/theme/style.scss

@@ -43,7 +43,9 @@
  *   in custom container, badges, etc.
  * -------------------------------------------------------------------------- */
 
- :root {
+@import url(./font.scss);
+
+:root {
   --vp-c-default-1: var(--vp-c-gray-1);
   --vp-c-default-2: var(--vp-c-gray-2);
   --vp-c-default-3: var(--vp-c-gray-3);
@@ -70,8 +72,7 @@
   --vp-c-danger-soft: var(--vp-c-red-soft);
 
   --vp-font-family-base: 'SF Pro SC','SF Pro Text','SF Pro Icons','PingFang SC','Helvetica Neue', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Helvetica, Arial, sans-serif;
-  /* --vp-font-family-mono: sans-serif, 'SauceCodePro Nerd Font Mono', 'Courier New'; */
-  --vp-font-family-mono: 'SauceCodePro Nerd Font Mono', Arial, sans-serif, 'Courier New';
+  --vp-font-family-mono: 'Sauce Code Pro', 'Source Code Pro', 'Courier New', monospace;
 
   --vp-c-text-strong: rgb(63 86 99);
   --vp-c-text-em: rgb(91, 4, 17);