From 0e4ba13065f69f0ea5816d883cd0fda2edaa1db1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samy=20Pess=C3=A9?= <samypesse@gmail.com>
Date: Sat, 20 Jan 2024 23:41:28 +0100
Subject: [PATCH] Show page emoji if any (#108)

* Show page emoji if any

* Format
---
 src/components/DocumentView/Emoji.tsx               |  8 +++-----
 src/components/PageBody/PageHeader.tsx              |  6 +++++-
 src/components/TableOfContents/PageDocumentItem.tsx | 10 +++++++++-
 src/components/TableOfContents/PageGroupItem.tsx    |  2 ++
 src/components/TableOfContents/PageLinkItem.tsx     |  2 ++
 src/components/primitives/Emoji.tsx                 | 13 +++++++++++++
 src/components/primitives/index.ts                  |  1 +
 7 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 src/components/primitives/Emoji.tsx

diff --git a/src/components/DocumentView/Emoji.tsx b/src/components/DocumentView/Emoji.tsx
index cfa0e576b..c7059317a 100644
--- a/src/components/DocumentView/Emoji.tsx
+++ b/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} />;
 }
diff --git a/src/components/PageBody/PageHeader.tsx b/src/components/PageBody/PageHeader.tsx
index 184abd379..ba599f8e2 100644
--- a/src/components/PageBody/PageHeader.tsx
+++ b/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')}>
diff --git a/src/components/TableOfContents/PageDocumentItem.tsx b/src/components/TableOfContents/PageDocumentItem.tsx
index 84bf32226..9a487308b 100644
--- a/src/components/TableOfContents/PageDocumentItem.tsx
+++ b/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>
     );
diff --git a/src/components/TableOfContents/PageGroupItem.tsx b/src/components/TableOfContents/PageGroupItem.tsx
index 3feffbe5b..0b69cabdf 100644
--- a/src/components/TableOfContents/PageGroupItem.tsx
+++ b/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 ? (
diff --git a/src/components/TableOfContents/PageLinkItem.tsx b/src/components/TableOfContents/PageLinkItem.tsx
index fe69864dc..671baab55 100644
--- a/src/components/TableOfContents/PageLinkItem.tsx
+++ b/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(
diff --git a/src/components/primitives/Emoji.tsx b/src/components/primitives/Emoji.tsx
new file mode 100644
index 000000000..6abcaf52f
--- /dev/null
+++ b/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>;
+}
diff --git a/src/components/primitives/index.ts b/src/components/primitives/index.ts
index 2c280aaeb..8e14154d1 100644
--- a/src/components/primitives/index.ts
+++ b/src/components/primitives/index.ts
@@ -5,3 +5,4 @@ export * from './Card';
 export * from './Skeleton';
 export * from './Link';
 export * from './DateRelative';
+export * from './Emoji';