Show page emoji if any (#108)

* Show page emoji if any

* Format

src/components/DocumentView/Emoji.tsx

@@ -1,13 +1,11 @@
 import { DocumentInlineEmoji } from '@gitbook/api';
 
+import { Emoji as EmojiPrimitive } from '@/components/primitives';
+
 import { InlineProps } from './Inline';
 
 export async function Emoji(props: InlineProps<DocumentInlineEmoji>) {
     const { inline } = props;
-    const { code } = inline.data;
 
-    const emojiCodepointDecimal = parseInt(code, 16);
-    const emoji = String.fromCodePoint(emojiCodepointDecimal);
-
-    return <span>{emoji}</span>;
+    return <EmojiPrimitive code={inline.data.code} />;
 }

src/components/PageBody/PageHeader.tsx

@@ -1,5 +1,6 @@
 import { RevisionPageDocument } from '@gitbook/api';
 
+import { Emoji } from '@/components/primitives';
 import { tcls } from '@/lib/tailwind';
 
 export function PageHeader(props: { page: RevisionPageDocument }) {
@@ -12,7 +13,10 @@ export function PageHeader(props: { page: RevisionPageDocument }) {
     return (
         <header className={tcls('max-w-3xl', 'mx-auto', 'mb-6', 'space-y-3')}>
             {page.layout.title ? (
-                <h1 className={tcls('text-4xl', 'font-bold')}>{page.title}</h1>
+                <h1 className={tcls('text-4xl', 'font-bold')}>
+                    {page.emoji ? <Emoji code={page.emoji} style={['mr-3']} /> : null}
+                    {page.title}
+                </h1>
             ) : null}
             {page.description && page.layout.description ? (
                 <p className={tcls('text-lg', 'text-dark-5', 'dark:text-light-5')}>

src/components/TableOfContents/PageDocumentItem.tsx

@@ -1,5 +1,6 @@
 import { RevisionPage, RevisionPageDocument, RevisionPageGroup } from '@gitbook/api';
 
+import { Emoji } from '@/components/primitives';
 import { pageHref } from '@/lib/links';
 import { getPagePath } from '@/lib/pages';
 import { ContentRefContext } from '@/lib/references';
@@ -39,7 +40,14 @@ export function PageDocumentItem(props: {
                     ) : null
                 }
             >
-                {page.title}
+                {page.emoji ? (
+                    <span className={tcls('flex', 'gap-3', 'flex-row')}>
+                        <Emoji code={page.emoji} />
+                        {page.title}
+                    </span>
+                ) : (
+                    page.title
+                )}
             </ToggleableLinkItem>
         </li>
     );

src/components/TableOfContents/PageGroupItem.tsx

@@ -1,5 +1,6 @@
 import { RevisionPage, RevisionPageDocument, RevisionPageGroup } from '@gitbook/api';
 
+import { Emoji } from '@/components/primitives';
 import { ContentRefContext } from '@/lib/references';
 import { tcls } from '@/lib/tailwind';
 
@@ -36,6 +37,7 @@ export function PageGroupItem(props: {
                     'dark:to-transparent',
                 )}
             >
+                {page.emoji ? <Emoji code={page.emoji} style={['mr-3']} /> : null}
                 {page.title}
             </div>
             {page.pages && page.pages.length ? (

src/components/TableOfContents/PageLinkItem.tsx

@@ -2,6 +2,7 @@ import IconExternal from '@geist-ui/icons/externalLink';
 import { RevisionPageLink } from '@gitbook/api';
 import Link from 'next/link';
 
+import { Emoji } from '@/components/primitives';
 import { ContentRefContext, resolveContentRef } from '@/lib/references';
 import { tcls } from '@/lib/tailwind';
 
@@ -35,6 +36,7 @@ export async function PageLinkItem(props: { page: RevisionPageLink; context: Con
                     'dark:hover:bg-light/2',
                 )}
             >
+                {page.emoji ? <Emoji code={page.emoji} /> : null}
                 {page.title}
                 <IconExternal
                     className={tcls(

src/components/primitives/Emoji.tsx

@@ -0,0 +1,13 @@
+import { ClassValue, tcls } from '@/lib/tailwind';
+
+/**
+ * Render an emoji by its UTF-8 codepoint.
+ */
+export async function Emoji(props: { code: string; style?: ClassValue }) {
+    const { code, style } = props;
+
+    const emojiCodepointDecimal = parseInt(code, 16);
+    const emoji = String.fromCodePoint(emojiCodepointDecimal);
+
+    return <span className={tcls(style)}>{emoji}</span>;
+}

src/components/primitives/index.ts

@@ -5,3 +5,4 @@ export * from './Card';
 export * from './Skeleton';
 export * from './Link';
 export * from './DateRelative';
+export * from './Emoji';