Add aliases to functions (#216)

src/ui/screens/Docs/Doc/TypeDoc/Function/Alias/index.tsx

@@ -0,0 +1,14 @@
+import { FunctionComponent, h } from 'preact'
+import * as styles from './styles.css'
+
+interface Props {
+  alias: string
+}
+
+export const Alias: FunctionComponent<Props> = ({
+  alias
+}) => (
+  <div class={styles.alias}>
+    This function is available as alias <code>{alias}</code>.
+  </div>
+)

src/ui/screens/Docs/Doc/TypeDoc/Function/Alias/styles.css.ts

@@ -0,0 +1,25 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+
+export const alias = style({
+  marginTop: '0.5rem',
+  fontSize: '14px',
+  color: '#7c6973',
+
+  '@media': {
+    '(prefers-color-scheme: dark)': {
+      color: '#9b838f',
+    },
+  },
+})
+
+globalStyle(`${alias} code`, {
+  border: '1px solid #5844521a',
+  background: '#fffefd',
+
+  '@media': {
+    '(prefers-color-scheme: dark)': {
+      borderColor: '#2c1622',
+      background: '#12000a',
+    },
+  },
+})

src/ui/screens/Docs/Doc/TypeDoc/Function/index.tsx

@@ -4,6 +4,7 @@ import {
   findFnDescription,
   findFnExamples,
   findSummary,
+  findFnTag,
 } from '@date-fns/docs/utils'
 import { FunctionComponent, h } from 'preact'
 import { useMemo } from 'preact/hooks'
@@ -25,6 +26,7 @@ import {
   pageTypeId,
   pageTypeIdHighlightMatch,
 } from '~/utils/docs'
+import { Alias } from './Alias'
 import { FP } from './FP'
 import { Signatures } from './Signatures'
 
@@ -44,6 +46,7 @@ export const TypeDocFunction: FunctionComponent<TypeDocFunctionProps> = ({
     [fn]
   )
   const { usage, usageTabs } = useMemo(() => generateUsage(doc.name), [doc])
+  const alias = useMemo(() => fn && findFnTag(fn, '@alias'), [fn]);
   const signatures = fn && fn.signatures
   const examples = useMemo(
     () => fn && findFnExamples(fn).map(extractCodeFromTagString),
@@ -71,6 +74,8 @@ export const TypeDocFunction: FunctionComponent<TypeDocFunctionProps> = ({
         hasOptions={fnHasOptions(fn)}
       />
 
+      {alias && (<Alias alias={alias} />)}
+
       {signatures && <Signatures name={doc.name} signatures={signatures} />}
 
       {!signatures && examples && <DocExamples examples={examples} />}