feat: fix i18n missing keys and merge upstream/main (#24615)

Signed-off-by: -LAN- <laipz8200@outlook.com>
Signed-off-by: kenwoodjw <blackxin55+@gmail.com>
Signed-off-by: Yongtao Huang <yongtaoh2022@gmail.com>
Signed-off-by: yihong0618 <zouzou0208@gmail.com>
Signed-off-by: zhanluxianshen <zhanluxianshen@163.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: GuanMu <ballmanjq@gmail.com>
Co-authored-by: Davide Delbianco <davide.delbianco@outlook.com>
Co-authored-by: NeatGuyCoding <15627489+NeatGuyCoding@users.noreply.github.com>
Co-authored-by: kenwoodjw <blackxin55+@gmail.com>
Co-authored-by: Yongtao Huang <yongtaoh2022@gmail.com>
Co-authored-by: Yongtao Huang <99629139+hyongtao-db@users.noreply.github.com>
Co-authored-by: Qiang Lee <18018968632@163.com>
Co-authored-by: 李强04 <liqiang04@gaotu.cn>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Asuka Minato <i@asukaminato.eu.org>
Co-authored-by: Matri Qi <matrixdom@126.com>
Co-authored-by: huayaoyue6 <huayaoyue@163.com>
Co-authored-by: Bowen Liang <liangbowen@gf.com.cn>
Co-authored-by: znn <jubinkumarsoni@gmail.com>
Co-authored-by: crazywoola <427733928@qq.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: yihong <zouzou0208@gmail.com>
Co-authored-by: Muke Wang <shaodwaaron@gmail.com>
Co-authored-by: wangmuke <wangmuke@kingsware.cn>
Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Co-authored-by: quicksand <quicksandzn@gmail.com>
Co-authored-by: 非法操作 <hjlarry@163.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: Eric Guo <eric.guocz@gmail.com>
Co-authored-by: Zhedong Cen <cenzhedong2@126.com>
Co-authored-by: jiangbo721 <jiangbo721@163.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: hjlarry <25834719+hjlarry@users.noreply.github.com>
Co-authored-by: lxsummer <35754229+lxjustdoit@users.noreply.github.com>
Co-authored-by: 湛露先生 <zhanluxianshen@163.com>
Co-authored-by: Guangdong Liu <liugddx@gmail.com>
Co-authored-by: QuantumGhost <obelisk.reg+git@gmail.com>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Yessenia-d <yessenia.contact@gmail.com>
Co-authored-by: huangzhuo1949 <167434202+huangzhuo1949@users.noreply.github.com>
Co-authored-by: huangzhuo <huangzhuo1@xiaomi.com>
Co-authored-by: 17hz <0x149527@gmail.com>
Co-authored-by: Amy <1530140574@qq.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Nite Knite <nkCoding@gmail.com>
Co-authored-by: Yeuoly <45712896+Yeuoly@users.noreply.github.com>
Co-authored-by: Petrus Han <petrus.hanks@gmail.com>
Co-authored-by: iamjoel <2120155+iamjoel@users.noreply.github.com>
Co-authored-by: Kalo Chin <frog.beepers.0n@icloud.com>
Co-authored-by: Ujjwal Maurya <ujjwalsbx@gmail.com>
Co-authored-by: Maries <xh001x@hotmail.com>

web/app/components/develop/code.tsx

@@ -7,10 +7,11 @@ import {
   useRef,
   useState,
 } from 'react'
-import { Tab, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
 import { Tag } from './tag'
 import classNames from '@/utils/classnames'
 import { writeTextToClipboard } from '@/utils/clipboard'
+import type { PropsWithChildren, ReactElement, ReactNode } from 'react'
 
 const languageNames = {
   js: 'JavaScript',
@@ -28,11 +29,6 @@ type IChildrenProps = {
   [key: string]: any
 }
 
-function getPanelTitle({ className }: { className: string }) {
-  const language = className.split('-')[1]
-  return languageNames[language] ?? 'Code'
-}
-
 function ClipboardIcon(props: any) {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
@@ -66,7 +62,7 @@ function CopyButton({ code }: { code: string }) {
     <button
       type="button"
       className={classNames(
-        'group/button absolute right-4 top-3.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
+        'group/button absolute right-4 top-1.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
         copied
           ? 'bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20'
           : 'hover:bg-white/7.5 dark:bg-white/2.5 bg-white/5 dark:hover:bg-white/5',
@@ -100,7 +96,7 @@ function CopyButton({ code }: { code: string }) {
   )
 }
 
-function CodePanelHeader({ tag, label }: { tag: string; label: string }) {
+function CodePanelHeader({ tag, label }: { tag?: string; label?: string }) {
   if (!tag && !label)
     return null
 
@@ -121,38 +117,55 @@ function CodePanelHeader({ tag, label }: { tag: string; label: string }) {
   )
 }
 
-type ICodePanelProps = {
-  children: React.ReactNode
+type CodeExample = {
+  title?: string
   tag?: string
-  code?: string
-  label?: string
-  targetCode?: string
+  code: string
 }
-function CodePanel({ tag, label, code, children, targetCode }: ICodePanelProps) {
-  const child = Children.only(children)
+
+type ICodePanelProps = {
+  children?: React.ReactNode
+  tag?: string
+  label?: string
+  code?: string
+  title?: string
+  targetCode?: CodeExample
+}
+
+function CodePanel({ tag, label, children, targetCode }: ICodePanelProps) {
+  const child = Children.toArray(children)[0] as ReactElement<any>
 
   return (
     <div className="dark:bg-white/2.5 group">
       <CodePanelHeader
-        tag={child.props.tag ?? tag}
-        label={child.props.label ?? label}
+        tag={tag}
+        label={label}
       />
       <div className="relative">
         {/* <pre className="p-4 overflow-x-auto text-xs text-white">{children}</pre> */}
         {/* <CopyButton code={child.props.code ?? code} /> */}
         {/* <CopyButton code={child.props.children.props.children} /> */}
-        <pre className="overflow-x-auto p-4 text-xs text-white">{targetCode || children}</pre>
-        <CopyButton code={targetCode || child.props.children.props.children} />
+        <pre className="overflow-x-auto p-4 text-xs text-white">
+          {targetCode?.code ? (
+            <code>{targetCode?.code}</code>
+          ) : (
+            child
+          )}
+        </pre>
+        <CopyButton code={targetCode?.code ?? child.props.children.props.children} />
       </div>
     </div>
   )
 }
 
-function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) {
-  const hasTabs = Children.count(children) > 1
+type CodeGroupHeaderProps = {
+  title?: string
+  tabTitles?: string[]
+  selectedIndex?: number
+}
 
-  if (!title && !hasTabs)
-    return null
+function CodeGroupHeader({ title, tabTitles, selectedIndex }: CodeGroupHeaderProps) {
+  const hasTabs = (tabTitles?.length ?? 0) > 1
 
   return (
     <div className="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent">
@@ -163,16 +176,17 @@ function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) {
       )}
       {hasTabs && (
         <TabList className="-mb-px flex gap-4 text-xs font-medium">
-          {Children.map(children, (child, childIndex) => (
+          {tabTitles!.map((tabTitle, tabIndex) => (
             <Tab
+              key={tabIndex}
               className={classNames(
                 'border-b py-3 transition focus:[&:not(:focus-visible)]:outline-none',
-                childIndex === selectedIndex
+                tabIndex === selectedIndex
                   ? 'border-emerald-500 text-emerald-400'
                   : 'border-transparent text-zinc-400 hover:text-zinc-300',
               )}
             >
-              {getPanelTitle(child.props.children.props)}
+              {tabTitle}
             </Tab>
           ))}
         </TabList>
@@ -181,26 +195,25 @@ function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) {
   )
 }
 
-type ICodeGroupPanelsProps = {
-  children: React.ReactNode
+type ICodeGroupPanelsProps = PropsWithChildren<{
+  targetCode?: CodeExample[]
   [key: string]: any
-}
-function CodeGroupPanels({ children, targetCode, ...props }: ICodeGroupPanelsProps) {
-  const hasTabs = Children.count(children) > 1
+}>
 
-  if (hasTabs) {
+function CodeGroupPanels({ children, targetCode, ...props }: ICodeGroupPanelsProps) {
+  if ((targetCode?.length ?? 0) > 1) {
     return (
       <TabPanels>
-        {Children.map(children, child => (
+        {targetCode!.map(code => (
           <TabPanel>
-            <CodePanel {...props}>{child}</CodePanel>
+            <CodePanel {...props} targetCode={code} />
           </TabPanel>
         ))}
       </TabPanels>
     )
   }
 
-  return <CodePanel {...props} targetCode={targetCode}>{children}</CodePanel>
+  return <CodePanel {...props} targetCode={targetCode?.[0]}>{children}</CodePanel>
 }
 
 function usePreventLayoutShift() {
@@ -231,10 +244,10 @@ function usePreventLayoutShift() {
 function useTabGroupProps(availableLanguages: string[]) {
   const [preferredLanguages, addPreferredLanguage] = useState<any>([])
   const [selectedIndex, setSelectedIndex] = useState(0)
-  const activeLanguage = [...availableLanguages].sort(
+  const activeLanguage = [...(availableLanguages || [])].sort(
     (a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a),
   )[0]
-  const languageIndex = availableLanguages.indexOf(activeLanguage)
+  const languageIndex = availableLanguages?.indexOf(activeLanguage) || 0
   const newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex
   if (newSelectedIndex !== selectedIndex)
     setSelectedIndex(newSelectedIndex)
@@ -255,16 +268,26 @@ function useTabGroupProps(availableLanguages: string[]) {
 
 const CodeGroupContext = createContext(false)
 
-export function CodeGroup({ children, title, inputs, targetCode, ...props }: IChildrenProps) {
-  const languages = Children.map(children, child =>
-    getPanelTitle(child.props.children.props),
-  )
-  const tabGroupProps = useTabGroupProps(languages)
-  const hasTabs = Children.count(children) > 1
-  const Container = hasTabs ? Tab.Group : 'div'
+type CodeGroupProps = PropsWithChildren<{
+  /** Code example(s) to display */
+  targetCode?: string | CodeExample[]
+  /** Example block title */
+  title?: string
+  /** HTTP method tag, e.g. GET, POST */
+  tag?: string
+  /** API path */
+  label?: string
+}>
+
+export function CodeGroup({ children, title, targetCode, ...props }: CodeGroupProps) {
+  const examples = typeof targetCode === 'string' ? [{ code: targetCode }] as CodeExample[] : targetCode
+  const tabTitles = examples?.map(({ title }) => title || 'Code') || []
+  const tabGroupProps = useTabGroupProps(tabTitles)
+  const hasTabs = tabTitles.length > 1
+  const Container = hasTabs ? TabGroup : 'div'
   const containerProps = hasTabs ? tabGroupProps : {}
   const headerProps = hasTabs
-    ? { selectedIndex: tabGroupProps.selectedIndex }
+    ? { selectedIndex: tabGroupProps.selectedIndex, tabTitles }
     : {}
 
   return (
@@ -273,25 +296,19 @@ export function CodeGroup({ children, title, inputs, targetCode, ...props }: ICh
         {...containerProps}
         className="not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
       >
-        <CodeGroupHeader title={title} {...headerProps}>
-          {children}
-        </CodeGroupHeader>
-        <CodeGroupPanels {...props} targetCode={targetCode}>{children}</CodeGroupPanels>
+        <CodeGroupHeader title={title} {...headerProps} />
+        <CodeGroupPanels {...props} targetCode={examples}>{children}</CodeGroupPanels>
       </Container>
     </CodeGroupContext.Provider>
   )
 }
 
 type IChildProps = {
-  children: string
+  children: ReactNode
   [key: string]: any
 }
+
 export function Code({ children, ...props }: IChildProps) {
-  const isGrouped = useContext(CodeGroupContext)
-
-  if (isGrouped)
-    return <code {...props} dangerouslySetInnerHTML={{ __html: children }} />
-
   return <code {...props}>{children}</code>
 }
 
@@ -303,3 +320,7 @@ export function Pre({ children, ...props }: IChildrenProps) {
 
   return <CodeGroup {...props}>{children}</CodeGroup>
 }
+
+export function Embed({ value, ...props }: IChildrenProps) {
+  return <span {...props}>{value}</span>
+}