Merge pull request #64 from unix/chinese

docs: reduce the weight of component name in chinese title

lib/components/sidebar/active-link.tsx

@@ -1,25 +1,74 @@
-import React, { Children } from 'react'
+import React, { useMemo } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { useTheme } from 'components'
 
 export interface Props {
   onAcitve?: Function
   href: string
+  text: string
 }
 
-const ActiveLink: React.FC<React.PropsWithChildren<Props>> = React.memo(
+const ActiveLink: React.FC<Props> = React.memo(({
-  ({ children, href }) => {
+  href, text,
-    const { pathname } = useRouter()
+}) => {
-    const isActive = pathname === href
+  const theme = useTheme()
-    const child = Children.only(children)
+  const { pathname } = useRouter()
+  const [title, subtitle] = useMemo(() => {
+    if (!/[\u4E00-\u9FA5]/.test(text)) return [text, null]
+    if (/zeit|ui|ZEIT|UI/.test(text)) return [text, null]
+    return [
+      text.replace(/[^\u4E00-\u9FA5]/g, ''),
+      text.replace(/[^a-zA-Z]/g, ''),
+    ]
+  }, [text])
+  const isActive = pathname === href
 
-    return (
+  return (
+    <div className="link">
       <Link href={href}>
-        {React.cloneElement(child as React.ReactElement, {
+        <a className={isActive ? 'active' : ''}>
-          className: isActive ? 'active' : null,
+          {title}{subtitle && <span>&nbsp;{subtitle}</span>}
-        })}
+        </a>
       </Link>
-    )
+      <style jsx>{`
-  })
+        .link {
+          width: 100%;
+          color: ${theme.palette.accents_5};
+          display: flex;
+          height: 2.25rem;
+          align-items: center;
+          justify-content: flex-start;
+          cursor: pointer;
+          text-transform: capitalize;
+        }
+        
+        a {
+          color: ${theme.palette.accents_7};
+          font-size: 1rem;
+          transition: all 200ms ease;
+          font-weight: 400;
+          display: inline-flex;
+          align-items: baseline;
+        }
+        
+        a.active {
+          color: ${theme.palette.success};
+          font-weight: 600;
+        }
+        
+        a.active span {
+          color: ${theme.palette.successLight};
+        }
+        
+        span {
+          font-size: .75rem;
+          color: ${theme.palette.accents_4};
+          font-weight: 400;
+        }
+      `}</style>
+    </div>
+  )
+})
 
 export default ActiveLink

lib/components/sidebar/side-item.tsx

@@ -24,14 +24,8 @@ const SideItem: React.FC<React.PropsWithChildren<SideItemProps>> = React.memo(({
       {sides.map((side, index) => {
         return (
           <div key={`${side.localeName || side.name}-${index}`} className="item">
-            {!side.url && <ActiveCatalog name={side.name}
+            {!side.url && <ActiveCatalog name={side.name} localeName={side.localeName} />}
-              localeName={side.localeName}
+            {side.url && <ActiveLink href={side.url} text={side.name} />}
-              key={side.localeName || side.name} />}
-            {side.url && (
-              <div className="link">
-                <ActiveLink href={side.url}><a>{side.name}</a></ActiveLink>
-              </div>
-            )}
             
             {side.children && <div className="children">
               {React.cloneElement(children as ReactElement, {
@@ -46,29 +40,6 @@ const SideItem: React.FC<React.PropsWithChildren<SideItemProps>> = React.memo(({
           width: 100%;
         }
         
-        .link {
-          width: 100%;
-          color: ${theme.palette.accents_5};
-          display: flex;
-          height: 2.25rem;
-          align-items: center;
-          justify-content: flex-start;
-          cursor: pointer;
-          text-transform: capitalize;
-        }
-
-        .link :global(a) {
-          color: ${theme.palette.accents_7};
-          font-size: 1rem;
-          transition: all 200ms ease;
-          font-weight: 400;
-        }
-        
-        .link :global(a.active) {
-          color: ${theme.palette.success};
-          font-weight: 600;
-        }
-        
         .children {
           display: flex;
           justify-content: center;