Remove Page/Space label from BlockContentRef (#2374)

Author: BrettJephson

.vscode/settings.json

@@ -7,5 +7,10 @@
         ["style \\=([^;]*);", "\"([^\"]*)\""],
         ["style \\=([^;]*);", "\\`([^\\`]*)\\`"]
     ],
-    "tailwindCSS.classAttributes": ["class", "className", "style", ".*Style"]
+    "tailwindCSS.classAttributes": [
+        "class",
+        "className",
+        "style",
+        ".*Style"
+    ]
 }

src/components/DocumentView/BlockContentRef.tsx

@@ -1,25 +1,53 @@
 import { DocumentBlockContentRef } from '@gitbook/api';
 
+import { LogoIcon } from '@/components/icons';
 import { Card, Emoji } from '@/components/primitives';
+import { getSpaceCustomization, ignoreAPIError } from '@/lib/api';
+import { ResolvedContentRef } from '@/lib/references';
 
 import { BlockProps } from './Block';
 
 export async function BlockContentRef(props: BlockProps<DocumentBlockContentRef>) {
     const { block, context, style } = props;
-    const kind = block?.data?.ref?.kind;
 
     const resolved = await context.resolveContentRef(block.data.ref, {
         resolveAnchorText: true,
     });
+
     if (!resolved) {
         return null;
     }
 
+    const kind = block?.data?.ref?.kind;
+    if (resolved.active && kind === 'space') {
+        return <SpaceRefCard {...props} resolved={resolved} />;
+    }
+
+    return (
+        <Card
+            leadingIcon={resolved.emoji ? <Emoji code={resolved.emoji} style="text-xl" /> : null}
+            href={resolved.href}
+            title={resolved.text}
+            style={style}
+        />
+    );
+}
+
+async function SpaceRefCard(props: { resolved: ResolvedContentRef } & BlockProps<DocumentBlockContentRef>) {
+    const { context, style, resolved } = props;
+    const spaceId = context.contentRefContext?.space.id;
+
+    if (!spaceId) { return null; }
+
+    const spaceCustomization = await ignoreAPIError(getSpaceCustomization(spaceId));
+    const customFavicon = spaceCustomization?.favicon;
+    const customEmoji = customFavicon && 'emoji' in customFavicon ? customFavicon.emoji : undefined;
+    const customIcon = customFavicon && 'icon' in customFavicon ? customFavicon.icon : undefined;
+
     return (
         <Card
-            leadingIcon={resolved.emoji ? <Emoji code={resolved.emoji} /> : null}
+            leadingIcon={<LogoIcon icon={customIcon} emoji={customEmoji} alt='' sizes={[{ width: 24 }]} style={['object-contain', 'size-6']} />}
             href={resolved.href}
-            preTitle={kind}
             title={resolved.text}
             style={style}
         />

src/components/Header/HeaderLogo.tsx

@@ -8,6 +8,7 @@ import {
 } from '@gitbook/api';
 
 import { HeaderMobileMenu } from '@/components/Header/HeaderMobileMenu';
+import { LogoIcon } from '@/components/icons';
 import { Image } from '@/components/utils';
 import { absoluteHref } from '@/lib/links';
 import { tcls } from '@/lib/tailwind';
@@ -95,40 +96,11 @@ export function HeaderLogo(props: HeaderLogoProps) {
 
 function LogoFallback(props: HeaderLogoProps) {
     const { parent, space, customization } = props;
-    const customIcon = 'icon' in customization.favicon ? customization.favicon.icon : null;
-
+    const customIcon = 'icon' in customization.favicon ? customization.favicon.icon : undefined;
+    const customEmoji = 'emoji' in customization.favicon ? customization.favicon.emoji : undefined;
     return (
         <>
-            <Image
-                alt="Logo"
-                sources={
-                    customIcon
-                        ? {
-                              light: { src: customIcon.light, aspectRatio: '1' },
-                              dark: customIcon.dark
-                                  ? { src: customIcon.dark, aspectRatio: '1' }
-                                  : null,
-                          }
-                        : {
-                              light: {
-                                  src: absoluteHref('~gitbook/icon?size=medium&theme=light', true),
-                                  size: { width: 256, height: 256 },
-                              },
-                              dark: {
-                                  src: absoluteHref('~gitbook/icon?size=medium&theme=dark', true),
-                                  size: { width: 256, height: 256 },
-                              },
-                          }
-                }
-                sizes={[
-                    {
-                        width: 32,
-                    },
-                ]}
-                fetchPriority="high"
-                style={['w-8', 'h-8', 'object-contain']}
-            />
-
+            <LogoIcon icon={customIcon} emoji={customEmoji} alt='' sizes={[{ width: 32 }]} style={['object-contain', 'size-8']} fetchPriority='high'/> 
             <h1
                 className={tcls(
                     'text-pretty',

src/components/icons/LogoIcon.tsx

@@ -0,0 +1,39 @@
+import { CustomizationThemedURL } from "@gitbook/api";
+
+import { Image } from '@/components/utils';
+import { absoluteHref } from "@/lib/links";
+
+import { Emoji } from "../primitives";
+
+
+export function LogoIcon(props: { icon?: CustomizationThemedURL; emoji?: string } & Omit<React.ComponentProps<typeof Image>, 'sources'>) {
+    const { icon, emoji, alt, ...imageProps } = props;
+
+    if (emoji && !icon) {
+        return <Emoji code={emoji} style="text-xl" />;
+    }
+
+    return <Image 
+        alt={alt ?? ''}
+        sources={icon ? {
+            light: {
+                src: icon.light,
+                aspectRatio: '1',
+            },
+            dark: {
+                src: icon.dark,
+                aspectRatio: '1',
+            },
+        } : {
+            light: {
+                src: absoluteHref('~gitbook/icon?size=medium&theme=light', true),
+                size: { width: 256, height: 256 },
+            },
+            dark: {
+                src: absoluteHref('~gitbook/icon?size=medium&theme=dark', true),
+                size: { width: 256, height: 256 },
+            },
+        }}
+        {...imageProps}
+    />;
+}

src/components/icons/index.ts

@@ -1 +1,2 @@
 export * from './types';
+export * from './LogoIcon';

src/lib/references.ts

@@ -15,6 +15,7 @@ import { getBlockById, getBlockTitle } from './document';
 import { gitbookAppHref, pageHref, PageHrefContext } from './links';
 import { getPagePath, resolvePageId } from './pages';
 
+
 export interface ResolvedContentRef {
     /** Text to render in the content ref */
     text: string;
@@ -164,6 +165,7 @@ export async function resolveContentRef(
                 contentRef.space === space.id
                     ? space
                     : await ignoreAPIError(getSpace(contentRef.space));
+                    
             if (!targetSpace) {
                 return {
                     href: gitbookAppHref(`/s/${contentRef.space}`),
@@ -175,7 +177,7 @@ export async function resolveContentRef(
             return {
                 href: targetSpace.urls.published ?? targetSpace.urls.app,
                 text: targetSpace.title,
-                active: true,
+                active: true
             };
         }