Voice Service

import { o } from '../jsx/jsx.js'
import { prerender } from '../jsx/html.js'
import SourceCode from '../components/source-code.js'
import { ResolvedPageRoute, Routes } from '../routes.js'
import { title } from '../../config.js'
import Style from '../components/style.js'
import { Locale, LocaleVariants } from '../components/locale.js'

// Calling <Component/> will transform the JSX into AST for each rendering.
// You can reuse a pre-compute AST like `let component = <Component/>`.

// If the expression is static (not depending on the render Context),
// you don't have to wrap it by a function at all.

let style = Style(/* css */ `
#home {
}

#home .cta-button {
  display: inline-block;
  padding: 0.75rem 2rem;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 1.1rem;
  transition: background-color 0.3s;
  margin-bottom: 1rem;
}

#home .cta-button:hover {
  background-color: #2980b9;
}

#home .features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

#home .feature {
  padding: 1.5rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #3498db;
}

#home .feature h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #2c3e50;
}

#home .feature p {
  margin-bottom: 0;
  font-size: 1rem;
}
`)

let content = (
  <div id="home">
    <h1>
      <Locale en="Voice Service" zh_hk="語音服務" zh_cn="语音服务" />
    </h1>

    <p>
      <Locale
        en="Convert text into speech using Google Cloud Text-to-Speech API."
        zh_hk="使用 Google Cloud 文字轉語音 API 將文字轉換為語音。"
        zh_cn="使用 Google Cloud 文字转语音 API 将文字转换为语音。"
      />
    </p>

    <h2>
      <Locale en="Features" zh_hk="功能" zh_cn="功能" />
    </h2>

    <div class="features">
      <div class="feature">
        <h3>
          <Locale en="Multiple Voices" zh_hk="多種語音" zh_cn="多种语音" />
        </h3>
        <p>
          <Locale
            en="Choose from a variety of voices across different languages and genders."
            zh_hk="從不同語言和性別的多種語音中選擇。"
            zh_cn="从不同语言和性别的多种语音中选择。"
          />
        </p>
      </div>

      <div class="feature">
        <h3>
          <Locale en="Customizable Speed" zh_hk="可調語速" zh_cn="可调语速" />
        </h3>
        <p>
          <Locale
            en="Adjust speaking rate from 0.25x to 4x to match your needs."
            zh_hk="將語速從 0.25 倍調整至 4 倍，以滿足您的需求。"
            zh_cn="将语速从 0.25 倍调整至 4 倍，以满足您的需求。"
          />
        </p>
      </div>

      <div class="feature">
        <h3>
          <Locale
            en="MP3 Audio Output"
            zh_hk="MP3 音訊輸出"
            zh_cn="MP3 音频输出"
          />
        </h3>
        <p>
          <Locale
            en="Generate MP3 audio files using Google Cloud's speech synthesis engine."
            zh_hk="使用 Google Cloud 的語音合成引擎生成 MP3 音訊檔案。"
            zh_cn="使用 Google Cloud 的语音合成引擎生成 MP3 音频文件。"
          />
        </p>
      </div>
    </div>

    <h2>
      <Locale en="Get Started" zh_hk="開始使用" zh_cn="开始使用" />
    </h2>

    <p>
      <Locale
        en="Visit the preview page to generate speech from text."
        zh_hk="造訪預覽頁面以從文字生成語音。"
        zh_cn="访问预览页面以从文字生成语音。"
      />
    </p>

    <a href="/preview" class="cta-button">
      <Locale en="Go to Preview" zh_hk="前往預覽" zh_cn="前往预览" />
    </a>

    <SourceCode page="home.tsx" />
  </div>
)

let home = (
  <>
    {style}
    {content}
  </>
)

// And it can be pre-rendered into html as well

let route: LocaleVariants<ResolvedPageRoute> = {
  en: {
    title: title('Voice Service'),
    description:
      'Text-to-speech service using Google Cloud Text-to-Speech API with multiple voices and customizable speaking rate.',
    node: prerender(home, { language: 'en' }),
  },
  zh_hk: {
    title: title('語音服務'),
    description:
      '使用 Google Cloud 文字轉語音 API 的文字轉語音服務，提供多種語音及可調整的語速。',
    node: prerender(home, { language: 'zh_hk' }),
  },
  zh_cn: {
    title: title('语音服务'),
    description:
      '使用 Google Cloud 文字转语音 API 的文字转语音服务，提供多种语音及可调整的语速。',
    node: prerender(home, { language: 'zh_cn' }),
  },
}

let routes = {
  '/': {
    menuText: <Locale en="Home" zh_hk="主頁" zh_cn="主页" />,
    resolve(context) {
      return Locale(route, context)
    },
  },
} satisfies Routes

export default { routes }