docs: anchor each doc title

lib/components/anchor/anchor-icon.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const AnchorIcon = () => {
+  return (
+    <svg viewBox="0 0 24 24" width="100%" height="100%" stroke="currentColor" strokeWidth="1.5"
+      strokeLinecap="round" strokeLinejoin="round" fill="none"
+      shapeRendering="geometricPrecision" style={{ color: 'currentColor' }}>
+      <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" />
+      <path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" />
+    </svg>
+  )
+}
+
+export default AnchorIcon

lib/components/anchor/index.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Link, useTheme } from 'components'
+import AnchorIcon from './anchor-icon'
+
+export interface Props {
+  pure?: boolean
+}
+
+export const virtualAnchorEncode = (text?: string) => {
+  if (!text) return undefined
+  return text.toLowerCase().replace(/ /g, '-')
+}
+
+const VirtualAnchor: React.FC<React.PropsWithChildren<Props>> = ({
+  children, pure,
+}) => {
+  const theme = useTheme()
+  const ref = useRef<HTMLAnchorElement>(null)
+  const [id, setId] = useState<string | undefined>()
+
+  useEffect(() => {
+    if (!ref.current) return
+    setId(virtualAnchorEncode(ref.current.textContent || undefined))
+  }, [ref.current])
+  
+  return (
+    <span className="parent" ref={ref}>
+      <Link pure href={`#${id}`}>{children}</Link>
+      <span className="virtual" id={id} />
+      {!pure && <span className="icon"><AnchorIcon /></span>}
+      <style jsx>{`
+        .parent {
+          position: relative;
+          color: inherit;
+        }
+        
+        .parent :global(a) {
+          color: inherit;
+        }
+        
+        .virtual {
+          position: absolute;
+          top: -30px;
+          left: 0;
+          opacity: 0;
+          pointer-events: none;
+          visibility: hidden;
+        }
+        
+        .icon {
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          overflow: hidden;
+          left: -1.5em;
+          top: 50%;
+          transform: translateY(-50%);
+          position: absolute;
+          opacity: 0;
+          visibility: hidden;
+          font-size: inherit;
+          width: .8em;
+          height: .8em;
+          margin-top: 1px;
+          color: ${theme.palette.accents_5};
+        }
+        
+        .parent:hover > .icon {
+          opacity: 1;
+          visibility: visible;
+        }
+      `}</style>
+    </span>
+  )
+}
+
+export default VirtualAnchor

lib/components/attributes/attributes-title.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Spacer, Code, useTheme } from 'components'
+import VirtualAnchor from 'lib/components/anchor'
 
 export interface AttributesTitleProps {
   alias?: string
@@ -19,7 +20,10 @@ const AttributesTitle: React.FC<React.PropsWithChildren<AttributesTitleProps>> =
 
   return (
     <>
-      <h4 className="title"><Code>{children}</Code>{getAlias(alias)}</h4>
+      <h4 className="title">
+        <Code><VirtualAnchor pure>{children}</VirtualAnchor></Code>
+        {getAlias(alias)}
+      </h4>
       <Spacer y={.6} />
   
       <style jsx>{`

lib/components/attributes/attributes.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react'
 import { Card, Link, Spacer, useTheme } from 'components'
 import AttributesTitle from './attributes-title'
+import VirtualAnchor from 'lib/components/anchor'
 
 export interface AttributesProps {
   edit: string
@@ -17,7 +18,7 @@ const Attributes: React.FC<React.PropsWithChildren<AttributesProps>> = React.mem
   return (
     <>
       <Spacer y={5} />
-      <h3>Attributes</h3>
+      <h3><VirtualAnchor>Attributes</VirtualAnchor></h3>
       <Card className="attr">
         {children}
       </Card>

lib/components/playground/title.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import VirtualAnchor from 'lib/components/anchor'
 import withDefaults from 'components/utils/with-defaults'
 
 interface Props {
@@ -22,20 +23,25 @@ const replaceCode = (desc: string) => {
   })
 }
 
-const Title: React.FC<TitleProps> = React.memo(props => {
-  
+
+const Title: React.FC<TitleProps> = React.memo(({
+  title, desc,
+}) => {
   return (
     <>
-      <h3>{props.title}</h3>
-      {props.desc && <p dangerouslySetInnerHTML={{ __html: replaceCode(props.desc) }} />}
+      <h3>
+        <VirtualAnchor>{title}</VirtualAnchor>
+      </h3>
+      {desc && <p dangerouslySetInnerHTML={{ __html: replaceCode(desc) }} />}
   
       <style jsx>{`
         h3 {
-          margin-bottom: ${props.desc ? 0 : '30px'};
+          margin-bottom: ${desc ? 0 : '30px'};
           line-height: 1;
           font-size: 1.3rem;
           margin-top: 75px;
           text-transform: capitalize;
+          position: relative;
         }
         
         h3 > p {

lib/components/sidebar/active-catalog.tsx

@@ -17,14 +17,15 @@ const ActiveCatalog: React.FC<Props> = React.memo(
         {name}
         <style jsx>{`
           span {
-            font-size: .9rem;
+            font-size: .8125rem;
             transition: all .2s ease;
-            color: ${theme.palette.accents_3};
+            color: ${theme.palette.accents_4};
             text-transform: uppercase;
+            letter-spacing: 1.3px;
           }
           
           .active {
-            color: ${theme.palette.accents_6};
+            color: ${theme.palette.foreground};
           }
         `}</style>
       </span>

lib/components/sidebar/side-item.tsx

@@ -33,7 +33,6 @@ const SideItem: React.FC<React.PropsWithChildren<SideItemProps>> = React.memo(({
             )}
             
             {side.children && <div className="children">
-              {/*<span className="line" />*/}
               {React.cloneElement(children as ReactElement, {
                 sides: side.children,
               })}
@@ -60,13 +59,13 @@ const SideItem: React.FC<React.PropsWithChildren<SideItemProps>> = React.memo(({
         .link :global(a) {
           color: ${theme.palette.accents_7};
           font-size: 1rem;
-          padding: 0 ${theme.layout.gapQuarter};
           transition: all 200ms ease;
+          font-weight: 400;
         }
         
         .link :global(a.active) {
           color: ${theme.palette.success};
-          font-weight: bold;
+          font-weight: 600;
         }
         
         .children {
@@ -74,7 +73,6 @@ const SideItem: React.FC<React.PropsWithChildren<SideItemProps>> = React.memo(({
           justify-content: center;
           align-items: flex-start;
           flex-direction: column;
-          padding-left: ${theme.layout.gapHalf};
           transition: all .2s ease-in-out;
           position: relative;
           margin-top: .5rem;