Package: add 1000-hours repo in workspace (#337)

* add 1000-hours repo in workspace

* update README

1000-hours/.vitepress/theme/components/SpeakWord.scss

@@ -0,0 +1,66 @@
+.speak-word {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-top: 1px solid #d87676;
+  padding: 8px 0;
+  .ctrl {
+    display: flex;
+    align-items: center;
+  }
+  .ctrl-part {
+    display: flex;
+    align-items: center;
+  }
+  .ctrl .divider {
+    width: 1px;
+    height: 24px;
+    background-color: rgba(0, 0, 0, 0.1);
+    margin: 0 16px 0 6px;
+  }
+  .accent-label {
+    margin-right: 4px;
+    opacity: 0.7;
+    text-transform: uppercase;
+    font-size: 16px;
+  }
+  .word {
+    font-size: 16px;
+    font-weight: bold;
+    color: #af4c4c;
+  }
+  audio {
+    display: none;
+  }
+  .spacer {
+    flex-grow: 1;
+  }
+  .pos {
+    opacity: 0.7;
+    font-size: 16px;
+  }
+
+  .play-button {
+    border: none;
+    border-radius: 4rem;
+    padding: 0;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 28px;
+    cursor: pointer;
+    height: 28px;
+    width: 48px;
+    display: flex;
+    align-items: center;
+    .icon {
+      cursor: pointer;
+      opacity: 0.7;
+      height: 14px;
+      width: 14px;
+    }
+  }
+}
+.speak-word:last-child {
+  border-bottom: 1px solid #d87676;
+}

1000-hours/.vitepress/theme/components/SpeakWord.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="speak-word">
+    <div class="word" >
+      {{ props.word }}
+    </div>
+    <div v-if="pos" class="pos">
+      {{ props.pos }}
+    </div>
+    <div class="spacer"></div>
+    <div class="ctrl">
+      <div class="ctrl-part" :class="item.label" v-for="item, ix in audios" :key="`audio-${ix}`">
+        <div v-if="ix !== 0" class="divider"></div>
+        <button class="play-button" :class="item.label" @click="playAudio(item.label)">
+          <span class="accent-label">{{ item.label }}</span>
+          <img :src="svgUrl(item.label)" class="icon" alt="sound" />
+        </button>
+        <audio class="audio" :class="item.label" :src="item.audio" controls="false" ></audio>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { getAudioPath } from "../data";
+const props = defineProps({
+  word: {
+    type: String,
+    required: true,
+  },
+  audioUs: {
+    type: String,
+  },
+  audioUk: {
+    type: String,
+  },
+  audioOther: {
+    type: String,
+  },
+  pos: {
+    type: String,
+  },
+});
+
+const svgUrl = (accent) => {
+  if (accent === 'uk') {
+    return '/images/speaker-brown.svg';
+  } else if (accent === 'us') {
+    return '/images/speaker-blue.svg';
+  }
+  return '/images/speaker-black.svg';
+}
+
+const audioPathUS = computed(() => {
+  if (props.audioUs) {
+    return props.audioUs;
+  }
+  return getAudioPath(props.word, "us")
+});
+
+const audioPathUK = computed(() => {
+  if (props.audioUk) {
+    return props.audioUk;
+  }
+  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) {
+    ret.push({ label: 'us', audio: audioPathUS.value});
+  }
+  if (audioPathUK.value) {
+    ret.push({ label: 'uk', audio: audioPathUK.value});
+  }
+  if (audioPathOther.value) {
+    ret.push({ label: 'other', audio: audioPathOther.value});
+  }
+  return ret;
+});
+
+function playAudio(accent) {
+  const audioEl:any = document.querySelector(`audio.${accent}`);
+  audioEl.play();
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import url(./SpeakWord.scss);
+</style>

1000-hours/.vitepress/theme/components/SpeakWordInlineConverter.vue

@@ -0,0 +1,142 @@
+<script setup>
+import { onMounted, watch } from "vue";
+import { useRouter } from 'vitepress';
+const router = useRouter();
+
+watch(() => router.route.data.relativePath, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    setTimeout(() => {
+      buildSpeakWordInline();
+      console.log("route changed", newVal, oldVal);
+    }, 200);
+  }
+}, { immediate: true });
+
+function buildPlayButton(parent, accent, url) {
+  const labelEl = document.createElement('span');
+  labelEl.classList.add('accent-label');
+  labelEl.innerText = accent.toUpperCase();
+  const audioEl = document.createElement('audio');
+  audioEl.classList.add('audio')
+  audioEl.setAttribute('src', url)
+  audioEl.setAttribute('controls', 'false')
+  const iconEl = document.createElement('img');
+  iconEl.classList.add('icon');
+
+  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();
+
+  const btnEl = document.createElement('button')
+  btnEl.classList.add('play-button')
+  btnEl.classList.add(accent);
+  btnEl.addEventListener('click', () => {
+    audioEl.play();
+  })
+  // btnEl.append(labelEl)
+  btnEl.append(iconEl)
+  btnEl.append(audioEl)
+  parent.append(btnEl)
+}
+
+function convertToInlineComponent(el) {
+  if (el.getAttribute('data-converted')) {
+    return;
+  }
+  const dataAudioUs = el.getAttribute('data-audio-us')
+  const dataAudioUk = el.getAttribute('data-audio-uk')
+  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 || dataAudioOther) {
+    const ctrlEl = document.createElement('div')
+    ctrlEl.classList.add('ctrl')
+    const ctrlPartEl = document.createElement('div')
+    ctrlPartEl.classList.add('ctrl-part')
+    if (dataAudioUs) {
+      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)
+  // insert at el's side
+  el.insertAdjacentElement('afterend', wrapperEl)
+  el.style.display = 'none'
+  el.setAttribute('data-converted', 'true')
+}
+
+function buildSpeakWordInline() {
+  const inlinePlayerEls = document.querySelectorAll('.speak-word-inline')
+  for (let i = 0; i < inlinePlayerEls.length; i += 1) {
+    convertToInlineComponent(inlinePlayerEls[i]);
+  }
+}
+
+</script>
+
+<template>
+
+</template>
+
+<style lang="scss">
+@import url(./SpeakWord.scss);
+.speak-word-wrapper {
+  display: inline-block;
+  margin: 0px;
+  vertical-align: middle;
+}
+.speak-word.inline {
+  border: none;
+  display: flex;
+  padding: 0;
+  .word {
+    display: inline-block;
+  }
+  .ctrl-part {
+    .play-button {
+      display: flex;
+      width: 24px;
+      height: 24px;
+      align-items: center;
+      justify-content: center;
+      .icon {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    .accent-label {
+      font-size: 14px;
+      display: inline-block;
+      color: white;
+    }
+  }
+}
+</style>

1000-hours/.vitepress/theme/components/icons/PlayCircleOutline.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20m0-8"/></svg>
+</template>
+
+<script>
+export default {
+  name: 'PlayCircleOutline'
+}
+</script>

1000-hours/.vitepress/theme/components/icons/index.ts

@@ -0,0 +1,5 @@
+import PlayCircleOutline from './PlayCircleOutline.vue'
+
+export {
+  PlayCircleOutline
+}

1000-hours/.vitepress/theme/data/index.js

@@ -0,0 +1,13 @@
+function getAudioPath(word, accent) {
+  word = word.toLowerCase();
+  accent = accent || 'us';
+  const item = mapping[word];
+  if (item && item[accent] && item[accent].length !== 0) {
+    return `/vendor/audios/${item[accent][0]}`
+  }
+  return '';
+}
+
+export {
+  getAudioPath
+}

1000-hours/.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;
+}
+

1000-hours/.vitepress/theme/index.ts

@@ -0,0 +1,21 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from 'vue'
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import SpeakWord from './components/SpeakWord.vue'
+import MyLayout from './layouts/index.vue'
+import './style.scss'
+
+export default {
+  extends: DefaultTheme,
+  Layout: MyLayout,
+  // Layout: () => {
+  //   return h(DefaultTheme.Layout, null, {
+  //     // https://vitepress.dev/guide/extending-default-theme#layout-slots
+  //   })
+  // },
+  enhanceApp({ app, router, siteData }) {
+    // ...
+    app.component('SpeakWord', SpeakWord)
+  }
+} satisfies Theme

1000-hours/.vitepress/theme/layouts/index.vue

@@ -0,0 +1,52 @@
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+import SpeakWordInlineConverter from '../components/SpeakWordInlineConverter.vue'
+
+const { Layout } = DefaultTheme
+
+</script>
+
+<template>
+  <Layout>
+    <template #doc-after>
+      <ClientOnly>
+        <SpeakWordInlineConverter />
+      </ClientOnly>
+    </template>
+  </Layout>
+</template>
+
+<style lang="scss">
+@import url(../components/SpeakWord.scss);
+.speak-word-wrapper {
+  display: inline-block;
+  margin: 0px;
+  vertical-align: middle;
+}
+.speak-word.inline {
+  border: none;
+  display: flex;
+  padding: 0;
+  .word {
+    display: inline-block;
+  }
+  .ctrl-part {
+    .play-button {
+      display: flex;
+      width: 24px;
+      height: 24px;
+      align-items: center;
+      justify-content: center;
+      .icon {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    .accent-label {
+      font-size: 14px;
+      display: inline-block;
+      color: white;
+    }
+  }
+}
+</style>

1000-hours/.vitepress/theme/style.scss

@@ -0,0 +1,198 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+@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);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --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: '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);
+
+}
+
+.dark {
+  --vp-c-text-strong: rgb(138, 183, 209);
+  --vp-c-text-em: rgb(187, 121, 131);
+}
+
+
+body {
+  font-size: 16px;
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #bd34fe 30%,
+    #41d1ff
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #bd34fe 50%,
+    #47caff 50%
+  );
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+
+
+.vp-doc {
+
+  p img, p video {
+    margin: 0 auto;
+  }
+
+  blockquote > p{
+    font-size: 16px;
+  }
+
+  .custom-block {
+    font-size: 16px;
+  }
+
+  strong, b {
+    color: var(--vp-c-text-strong);
+    font-weight: bold;
+  }
+
+  em, i {
+    color: var(--vp-c-text-em);
+  }
+
+  svg {
+    font-family: --vp-font-family-mono;
+  }
+
+  mjx-container {
+    display: inline-block;
+    margin: auto 1px -4px;
+  }
+
+
+  sup {
+    vertical-align: top;
+    position: relative;
+    top: -0.5em;
+  }
+}