feat(localization): updated localization to more places

fluid-design-io · Nov 15, 2022 · b0d5667 · b0d5667 · vercel · Nov 15, 2022
1 parent 7b4f6d3
commit b0d5667
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 12 deletions.
diff --git a/public/locales/en/navbar.json b/public/locales/en/navbar.json
@@ -29,5 +29,9 @@
   "All rights reserved": "All rights reserved.",
   "in-progress": "In Progress",
   "Color Generator": "Color Generator",
-  "Switch": "Switch"
+  "Switch": "Switch",
+  "Menu": "Menu",
+  "Validation": "Validation",
+  "Combobox": "Combobox",
+  "Plugins": "Plugins"
 }
diff --git a/public/locales/zh/navbar.json b/public/locales/zh/navbar.json
@@ -24,11 +24,17 @@
   "switch-lanuage": "切换语言到{{name}}",
   "Language": "语言",
   "Terms": "服务条款",
+  "Contact": "联系我们",
   "About": "关于我们",
   "Privacy": "隐私条款",
   "License": "执照",
   "All rights reserved": "版权所有。",
   "in-progress": "建设中",
   "Color Generator": "颜色生成器",
-  "Switch": "开关"
+  "Switch": "开关",
+  "Menu": "菜单",
+  "Validation": "验证",
+  "Combobox": "组合框",
+  "Plugins": "插件",
+  "Dashboard": "主页",
 }
diff --git a/src/components/FluidDesign.tsx b/src/components/FluidDesign.tsx
@@ -17,6 +17,7 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 import VideoPlayer from '@/components/VideoPlayer';
 import { Card } from '@/components/framework/Card';
 import { DynamicImage } from '@/components/framework/DynamicImage';
+import UnstyledLink from '@/components/framework/UnstyledLink';
 import { getNextItem, getPrevItem } from '@/lib/arrayHelpers';
 import clsxm from '@/lib/clsxm';
 
@@ -652,11 +653,10 @@ export const FluidDesign = () => {
             web forward with a11y.
           </p>
           <Button
-            as='a'
+            as={UnstyledLink}
             className='mt-8 inline-block btn-primary'
-            href='https://fluid-design.io'
-            iconEnd={HiExternalLink}
-            label='Visit website'
+            href='/docs'
+            label='Visit Docs'
           />
           <Button
             as='a'

diff --git a/src/components/framework/Sidebar.tsx b/src/components/framework/Sidebar.tsx
@@ -7,7 +7,6 @@ import {
   Squares2X2Icon,
 } from '@heroicons/react/24/solid';
 import { i18n, useTranslation } from 'next-i18next';
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { MdMouse } from 'react-icons/md';
 
@@ -86,10 +85,13 @@ export const SidebarMenu = ({ className = '' }) => {
   const { pathname, asPath, query } = router;
   const activeTab = pathname.split('docs/')[1];
   const { t } = useTranslation();
+  const bgClassName =
+    'dark:bg-gray-900 dark:contrast-more:border-gray-200 dark:contrast-more:bg-[rgb(18,15,13)] bg-gray-50';
   return (
     <div
       className={clsxm(
-        'top-0 left-0 z-40 flex min-h-screen h-fit max-h-[100dvh] w-64 overflow-y-auto overflow-x-hidden border-r border-gray-200 bg-gray-50 pl-[calc(env(safe-area-inset-right)-1rem)] contrast-more:border-gray-600 dark:border-gray-700 dark:bg-gray-900 dark:contrast-more:border-gray-200 dark:contrast-more:bg-[rgb(18,15,13)] sm:w-56 2xl:w-64',
+        'top-0 left-0 z-40 flex h-[100vh] max-h-[100svh] w-64 overflow-y-auto overflow-x-hidden border-r border-gray-200 bg-gray-50 pl-[calc(env(safe-area-inset-right)-1rem)] contrast-more:border-gray-600 dark:border-gray-700 sm:w-56 2xl:w-64',
+        bgClassName,
         className
       )}
     >
@@ -117,7 +119,7 @@ export const SidebarMenu = ({ className = '' }) => {
         </div>
         <nav
           aria-label='Sidebar'
-          className='flex flex-1 flex-col gap-2 p-1 px-4 pb-[calc(1rem+env(safe-area-inset-bottom))]'
+          className='flex flex-1 flex-col gap-2 p-1 px-4'
         >
           {navigation.map(({ name, href, icon: ItemIcon }) => (
             <div className='rounded-md' key={`nav.${name}.${href}`}>
@@ -144,7 +146,7 @@ export const SidebarMenu = ({ className = '' }) => {
                   {activeTab === href && (
                     <span className='sr-only'>Currently selected.</span>
                   )}
-                  {t(name)}
+                  {t(name, { ns: 'navbar' })}
                 </div>
               </Button>
             </div>
@@ -158,7 +160,7 @@ export const SidebarMenu = ({ className = '' }) => {
                 className='select-none px-3 text-xs font-semibold uppercase tracking-wider text-gray-500 contrast-more:text-gray-700 dark:text-gray-400 dark:contrast-more:text-slate-100'
                 id={`${groupName}-headline`}
               >
-                {t(groupName)}
+                {t(groupName, { ns: 'navbar' })}
               </h3>
               <div
                 aria-labelledby={`${groupName}-headline`}
@@ -210,8 +212,16 @@ export const SidebarMenu = ({ className = '' }) => {
             </div>
           ))}
           <div className='flex-grow' />
+        </nav>
+        <div
+          className={clsxm(
+            'sticky bottom-0 px-4 pb-[calc(1rem+env(safe-area-inset-bottom))] w-full flex justify-center',
+            bgClassName
+          )}
+        >
           <Menu
             buttonClassName='w-full btn-clear-gray'
+            className='w-full'
             iconEnd={ChevronUpIcon}
             iconEndPosition='between'
             label={t(`Language`, { ns: 'navbar' })}
@@ -236,7 +246,7 @@ export const SidebarMenu = ({ className = '' }) => {
                 }),
             }))}
           />
-        </nav>
+        </div>
       </div>
     </div>
   );

diff --git a/src/content/docs/plugin/plugin-button.zh.mdx b/src/content/docs/plugin/plugin-button.zh.mdx
@@ -0,0 +1,122 @@
+---
+title: 'Fluid Design Docs | 按钮插件'
+description: 'Fluid Design Tailwindcss按钮插件'
+date: '2022-11-14'
+author: 'Oliver Pan'
+tags:
+  - 'fluid ui'
+  - 'react'
+  - 'framer motion'
+  - 'headless ui'
+  - 'tailwindcss'
+  - 'plugin'
+  - 'button'
+---
+
+# Button 插件
+
+一个为 Tailwindcss 提供强大按钮组件的插件。支持所有的变体、状态和视觉无障碍。
+
+## 安装
+
+```bash
+npm install @fluid-design/fluid-ui
+```
+
+## 配置
+
+```js
+// tailwind.config.js
+module.exports = {
+  plugins: [
+    require('@fluid-design/fluid-ui/src/plugin/core'),
+    require('@fluid-design/fluid-ui/src/plugin/button'),
+    // ...
+  ],
+};
+```
+
+## 使用
+
+```jsx
+<button className="btn-primary">Primary</button>
+<button className="btn-rose">Secondary</button>
+<button className="btn-light-amber-100">Tertiary</button>
+<button className="btn-outline-green-500">Outline</button>
+<button className="btn-clear-rgb(119,187,235)">Clear</button>
+```
+
+默认情况下，插件提供以下颜色：
+
+| 颜色    | 类名                                |
+| ------- | ----------------------------------- |
+| red     | `*-red` \| `*-red-<50-900>`         |
+| orange  | `*-orange` \| `*-orange-<50-900>`   |
+| amber   | `*-amber` \| `*-amber-<50-900>`     |
+| yellow  | `*-yellow` \| `*-yellow-<50-900>`   |
+| lime    | `*-lime` \| `*-lime-<50-900>`       |
+| green   | `*-green` \| `*-green-<50-900>`     |
+| emerald | `*-emerald` \| `*-emerald-<50-900>` |
+| teal    | `*-teal` \| `*-teal-<50-900>`       |
+| cyan    | `*-cyan` \| `*-cyan-<50-900>`       |
+| sky     | `*-sky` \| `*-sky-<50-900>`         |
+| blue    | `*-blue` \| `*-blue-<50-900>`       |
+| indigo  | `*-indigo` \| `*-indigo-<50-900>`   |
+| violet  | `*-violet` \| `*-violet-<50-900>`   |
+| purple  | `*-purple` \| `*-purple-<50-900>`   |
+| fuchsia | `*-fuchsia` \| `*-fuchsia-<50-900>` |
+| pink    | `*-pink` \| `*-pink-<50-900>`       |
+| rose    | `*-rose` \| `*-rose-<50-900>`       |
+| gray    | `*-gray` \| `*-gray-<50-900>`       |
+| slate   | `*-slate` \| `*-slate-<50-900>`     |
+| zinc    | `*-zinc` \| `*-zinc-<50-900>`       |
+| neutral | `*-neutral` \| `*-neutral-<50-900>` |
+| stone   | `*-stone` \| `*-stone-<50-900>`     |
+
+## 特色
+
+### 颜色
+
+该插件支持开箱即用的默认 tailwindcss 颜色。请参阅 <ExternalLink href="https://tailwindcss.com/docs/customizing-colors">Tailwindcss Colors</ExternalLink> 以了解更多细节。
+你可以使用任何有效的颜色。例如，你可以使用 `*-red` 或 `*-red-900` 来指定颜色的深度。它还支持任意颜色值。例如，你可以使用 hex、rgb 值、hsl 值等。
+
+### 变体
+
+如果提供了一个有效的颜色，该插件将自动生成悬停。
+焦点、激活和禁用状态。它还会为每个状态的按钮生成
+为每个状态的按钮生成适当的 a11y 颜色。由于这些颜色是即时生成的，你不需要担心
+运送大量的 CSS 文件。如果颜色是无效的，例如`var(--color)`，该插件将使用`filter`的
+CSS 属性来生成悬停、聚焦、激活和禁用状态。该插件
+使用最小化版本的 <ExternalLink href="https://www.npmjs.com/package/tinycolor2">tinycolor2</ExternalLink> 库来生成颜色。
+
+### 黑暗模式
+
+该插件将为上述所有状态和变体生成黑暗模式的颜色。它也可以
+也可以通过为颜色提供`dark:`前缀来手动覆盖黑暗模式按钮。
+
+### 焦点环
+
+对于每个不同的按钮类型，该插件都会生成一个焦点环，当按钮被聚焦时，该环是可见的。
+当按钮被聚焦时是可见的。焦点环是使用
+tailwindcss 的`box-shadow`工具生成。这意味着你可以通过提供 "环 "的变体来定制焦点环
+这意味着你可以通过为按钮提供 "环 "的变体来定制焦点环。
+
+### 无障碍
+
+该插件将尝试根据提供的颜色生成无障碍颜色。
+简而言之，文本颜色与背景颜色的对比度将大于 4.5:1。
+而在高对比度模式下，文本颜色与背景颜色的对比度将大于 7:1。
+
+阅读更多关于无障碍色彩对比的信息 <ExternalLink href='https://www.w3.org/TR/WCAG20-TECHS/G18.html'></ExternalLink>。
+
+## 参考资料
+
+下面是提供的`btn-*`类的完整表格，供参考。
+
+| 类型    | 类              |
+| ------- | --------------- |
+| default | `btn-*`         |
+| light   | `btn-light-*`   |
+| bold    | `btn-bold-*`    |
+| outline | `btn-outline-*` |
+| clear   | `btn-clear-*`   |