fetch Readme async on the client, fix relative images, add loading state

Simek · Simek · commit ca3e0063352b · 2025-11-18T22:56:12.000+01:00
diff --git a/common/styleguide.tsx b/common/styleguide.tsx
@@ -1,13 +1,18 @@
 import * as HtmlElements from '@expo/html-elements';
 import { type TextProps } from '@expo/html-elements/build/primitives/Text';
 import Link from 'next/link';
-import { type ComponentType, type PropsWithChildren, useContext, useState } from 'react';
+import {
+  type ComponentType,
+  type CSSProperties,
+  type PropsWithChildren,
+  useContext,
+  useState,
+} from 'react';
 import {
   StyleSheet,
   type TextStyle,
   View,
   useWindowDimensions,
-  type ViewStyle,
   type StyleProp,
 } from 'react-native';
 
@@ -132,7 +137,7 @@ type AProps = PropsWithChildren<{
   target?: string;
   href: string;
   hoverStyle?: StyleProp<TextStyle>;
-  containerStyle?: StyleProp<ViewStyle>;
+  containerStyle?: CSSProperties | undefined;
 }>;
 
 export function A({ href, target, children, style, hoverStyle, containerStyle, ...rest }: AProps) {
@@ -161,10 +166,10 @@ export function A({ href, target, children, style, hoverStyle, containerStyle, .
   }
 
   return (
-    <View
+    <span
       onPointerEnter={() => setIsHovered(true)}
       onPointerLeave={() => setIsHovered(false)}
-      style={containerStyle}>
+      style={{ display: 'contents', ...containerStyle }}>
       <HtmlElements.A
         {...rest}
         href={href}
@@ -174,7 +179,7 @@ export function A({ href, target, children, style, hoverStyle, containerStyle, .
         style={[linkStyles, isHovered && linkHoverStyles, style, isHovered && hoverStyle]}>
         {children}
       </HtmlElements.A>
-    </View>
+    </span>
   );
 }
 
diff --git a/components/Details/DependencyRow.tsx b/components/Details/DependencyRow.tsx
diff --git a/components/Details/PackageAuthor.tsx b/components/Details/PackageAuthor.tsx
@@ -2,16 +2,15 @@ import { useContext } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { A, Caption, colors, Label } from '~/common/styleguide';
+import CustomAppearanceContext from '~/context/CustomAppearanceContext';
 import { type NpmUser } from '~/types';
 
-import CustomAppearanceContext from '../context/CustomAppearanceContext';
-
 type Props = {
   author?: NpmUser;
   size?: 'sm' | 'md';
 };
 
-export function PackageAuthor({ author }: Props) {
+export default function PackageAuthor({ author }: Props) {
   const { isDark } = useContext(CustomAppearanceContext);
 
   if (!author) {
diff --git a/components/Details/ReadmeBox.tsx b/components/Details/ReadmeBox.tsx
@@ -0,0 +1,119 @@
+import { Md } from '@m2d/react-markdown/client';
+import { useEffect, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize from 'rehype-sanitize';
+import remarkGfm from 'remark-gfm';
+
+import { A, colors, darkColors, P } from '~/common/styleguide';
+import { ReadmeFile } from '~/components/Icons';
+import { getReadmeAssetURL } from '~/util/getReadmeAssetUrl';
+
+type Props = {
+  packageName?: string;
+  githubUrl?: string;
+  isDark?: boolean;
+  loader?: boolean;
+};
+
+export default function ReadmeBox({ packageName, githubUrl, isDark, loader }: Props) {
+  const [readmeContent, setReadmeContent] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (loader) {
+      return;
+    }
+
+    let cancelled = false;
+    void (async () => {
+      try {
+        const readmeResponse = await fetch(`https://unpkg.com/${packageName}/README.md`);
+        const readmeContent = await readmeResponse.text();
+        if (!cancelled) {
+          setReadmeContent(readmeContent);
+        }
+      } catch {
+        if (!cancelled) {
+          setReadmeContent(null);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <View
+      id="readmeMarkdownWrapper"
+      style={[
+        styles.readmeWrapper,
+        {
+          // @ts-expect-error allow color style inheritance
+          color: isDark ? colors.white : colors.black,
+          borderColor: isDark ? darkColors.border : colors.gray2,
+        },
+      ]}>
+      <View
+        style={[
+          styles.readmeHeader,
+          {
+            borderColor: isDark ? darkColors.border : colors.gray2,
+          },
+        ]}>
+        <ReadmeFile fill={isDark ? darkColors.pewter : colors.secondary} />
+        <P>Readme.md</P>
+      </View>
+      <View style={styles.readmeContainer}>
+        {readmeContent && githubUrl ? (
+          // TODO: collapse Readme content by default, expand on user interaction
+          <Md
+            components={{
+              hr: () => null,
+              div: () => null,
+              a: (props: any) => <A style={{ display: 'contents' }} {...props} />,
+              img: ({ src, alt }: any) => (
+                <img src={getReadmeAssetURL(src, githubUrl)} alt={alt ?? ''} />
+              ),
+              // TODO: skip broken/non-loading images
+              // TODO: render blockquotes in a better way, support GH themed notes
+              // TODO: render code block in a better way
+              // TODO: render tables in a better way
+            }}
+            rehypePlugins={[rehypeRaw, rehypeSanitize]}
+            remarkPlugins={[remarkGfm]}>
+            {readmeContent}
+          </Md>
+        ) : (
+          <P style={styles.loadingContent}>Loading README.md…</P>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  readmeWrapper: {
+    borderRadius: 12,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    marginBottom: 8,
+  },
+  readmeHeader: {
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderBottomWidth: 1,
+    borderStyle: 'solid',
+  },
+  readmeContainer: {
+    padding: 16,
+    paddingTop: 12,
+  },
+  loadingContent: {
+    textAlign: 'center',
+    paddingVertical: 24,
+  },
+});
diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx
@@ -528,3 +528,11 @@ export function Tools({ width = 24, height = 24, fill = colors.black }: IconProp
     </Svg>
   );
 }
+
+export function ReadmeFile({ width = 24, height = 24, fill = colors.black }: IconProps) {
+  return (
+    <Svg width={width} height={height} fill={fill} viewBox="0 0 256 256">
+      <Path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v72a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48V224a8,8,0,0,0,16,0V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM144,144H128a8,8,0,0,0-8,8v56a8,8,0,0,0,8,8h16a36,36,0,0,0,0-72Zm0,56h-8V160h8a20,20,0,0,1,0,40Zm-40-48v56a8,8,0,0,1-16,0V177.38L74.55,196.59a8,8,0,0,1-13.1,0L48,177.38V208a8,8,0,0,1-16,0V152a8,8,0,0,1,14.55-4.59L68,178.05l21.45-30.64A8,8,0,0,1,104,152Z" />
+    </Svg>
+  );
+}
diff --git a/pages/package/[...name].tsx b/pages/package/[...name].tsx
@@ -1,26 +1,24 @@
-import { Md } from '@m2d/react-markdown/client';
 import { type NextPageContext } from 'next';
+import dynamic from 'next/dynamic';
 import * as emoji from 'node-emoji';
 import { useContext } from 'react';
 import { Linkify } from 'react-easy-linkify';
 import { Platform, StyleSheet, View } from 'react-native';
-import rehypeRaw from 'rehype-raw';
-import rehypeSanitize from 'rehype-sanitize';
-import remarkGfm from 'remark-gfm';
 
 import { A, colors, darkColors, H6, Headline, Label, P, useLayout } from '~/common/styleguide';
 import { Button } from '~/components/Button';
 import { CompatibilityTags } from '~/components/CompatibilityTags';
 import ContentContainer from '~/components/ContentContainer';
-import DependencyRow from '~/components/DependencyRow';
+import DependencyRow from '~/components/Details/DependencyRow';
+import PackageAuthor from '~/components/Details/PackageAuthor';
+import ReadmeBox from '~/components/Details/ReadmeBox';
 import { MetaData } from '~/components/Library/MetaData';
 import Thumbnail from '~/components/Library/Thumbnail.web';
 import TrendingMark from '~/components/Library/TrendingMark';
 import UnmaintainedLabel from '~/components/Library/UnmaintainedLabel';
 import UpdatedAtView from '~/components/Library/UpdateAtView';
 import Navigation from '~/components/Navigation';
 import NotFoundContent from '~/components/NotFoundContent';
-import { PackageAuthor } from '~/components/PackageAuthor';
 import PageMeta from '~/components/PageMeta';
 import CustomAppearanceContext from '~/context/CustomAppearanceContext';
 import { type LibraryType, type NpmLatestRegistryData, type NpmUser } from '~/types';
@@ -35,12 +33,11 @@ type Props = {
     libraries: LibraryType[];
   };
   registryData?: NpmLatestRegistryData;
-  readmeContent?: string;
 };
 
 // TODO: async render/data fetch
 // TODO: responsive/mobile viewports
-export default function PackagePage({ apiData, registryData, packageName, readmeContent }: Props) {
+export default function PackagePage({ apiData, registryData, packageName }: Props) {
   const { isDark } = useContext(CustomAppearanceContext);
   const { isSmallScreen } = useLayout();
 
@@ -104,32 +101,11 @@ export default function PackagePage({ apiData, registryData, packageName, readme
                 </Linkify>
               </Headline>
             )}
-            {readmeContent && (
-              <View
-                id="readmeMarkdownWrapper"
-                style={[
-                  styles.readmeWrapper,
-                  {
-                    // @ts-expect-error allow color style inheritance
-                    color: isDark ? colors.white : colors.black,
-                    borderColor: isDark ? darkColors.border : colors.gray2,
-                  },
-                ]}>
-                <Md
-                  components={{
-                    hr: () => null,
-                    a: (props: any) => <A containerStyle={{ display: 'inline-flex' }} {...props} />,
-                    // TODO: decide if we want to remove images/assets, or fix relative assets links
-                    // TODO: render blockquotes in a better way, support GH themed notes
-                    // TODO: render code block in a better way
-                    // TODO: render tables in a better way
-                  }}
-                  rehypePlugins={[rehypeRaw, rehypeSanitize]}
-                  remarkPlugins={[remarkGfm]}>
-                  {readmeContent}
-                </Md>
-              </View>
-            )}
+            <ReadmeBoxWithLoading
+              packageName={packageName}
+              isDark={isDark}
+              githubUrl={library.githubUrl}
+            />
             {library.examples && library.examples.length > 0 && (
               <>
                 <H6 style={[styles.mainContentHeader, headerColorStyle]}>Code examples</H6>
@@ -255,6 +231,10 @@ export default function PackagePage({ apiData, registryData, packageName, readme
   );
 }
 
+const ReadmeBoxWithLoading = dynamic(() => import('~/components/Details/ReadmeBox'), {
+  loading: () => <ReadmeBox loader />,
+});
+
 const styles = StyleSheet.create({
   container: {
     paddingVertical: 32,
@@ -364,8 +344,10 @@ export async function getServerSideProps(ctx: NextPageContext) {
 
   if (!packageName) {
     return {
-      data: {},
-      packageName,
+      props: {
+        data: {},
+        packageName,
+      },
     };
   }
 
@@ -377,15 +359,11 @@ export async function getServerSideProps(ctx: NextPageContext) {
   const npmResponse = await fetch(`https://registry.npmjs.org/${packageName}/latest`);
   const registryData = await npmResponse.json();
 
-  const readmeResponse = await fetch(`https://unpkg.com/${packageName}/README.md`);
-  const readmeContent = await readmeResponse.text();
-
   return {
     props: {
       packageName,
       apiData,
       registryData,
-      readmeContent,
     },
   };
 }
diff --git a/util/getReadmeAssetUrl.ts b/util/getReadmeAssetUrl.ts
@@ -0,0 +1,30 @@
+export function getReadmeAssetURL(src: string, githubUrl: string) {
+  if (!src.startsWith(`http`)) {
+    const rawGitHubUrl = githubUrl
+      .replace('https://github.com', 'https://raw.githubusercontent.com')
+      .replace('/tree', '');
+    return joinPosix(rawGitHubUrl, src).replace('https:/', 'https://');
+  }
+  return src;
+}
+
+function joinPosix(...parts: string[]): string {
+  return normalizePosix(parts.filter(Boolean).join('/'));
+}
+
+function normalizePosix(path: string): string {
+  const absolute = path.startsWith('/');
+  const segments = path.split('/').filter(Boolean);
+  const out: string[] = [];
+  for (const segment of segments) {
+    if (segment === '.') {
+      continue;
+    }
+    if (segment === '..') {
+      out.pop();
+    } else {
+      out.push(segment);
+    }
+  }
+  return (absolute ? '/' : '') + out.join('/');
+}
