README render tweaks, code cleanup, more TODOs

Author: Simek

bun.lock

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { A, Caption, colors, Label } from '~/common/styleguide';
 import { type NpmUser } from '~/types';
@@ -33,21 +33,15 @@ export function PackageAuthor({ author }: Props) {
           <A
             href={`https://github.com/${ghUsername}`}
             target="_blank"
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              gap: 12,
-              alignItems: 'center',
-              backgroundColor: 'transparent',
-            }}
+            style={styles.link}
             hoverStyle={isDark && { color: colors.primaryDark }}>
             <img
               src={`https://github.com/${ghUsername}.png`}
-              style={{ width: 32, height: 32, borderRadius: '100%' }}
+              style={styles.avatar}
               alt={`${ghUsername} avatar`}
             />
             <View>
-              <Caption style={{ lineHeight: 16, color: 'inherit' }}>{ghUsername}</Caption>
+              <Caption style={styles.secondLine}>{ghUsername}</Caption>
               <Label style={{ color: 'inherit' }}>{validName}</Label>
             </View>
           </A>
@@ -78,3 +72,22 @@ function getValidName(potentialName: string): string {
     .join(' ');
   return cleanName.length ? cleanName : potentialName.replace(/[<>()]/g, '');
 }
+
+const styles = StyleSheet.create({
+  link: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 12,
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+  },
+  secondLine: {
+    lineHeight: 16,
+    color: 'inherit',
+  },
+  avatar: {
+    width: 32,
+    height: 32,
+    borderRadius: '100%',
+  },
+});

components/PackageAuthor.tsx

@@ -41,6 +41,7 @@
     "react-native-web": "^0.21.2",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
     "use-debounce": "^10.0.6"
   },
   "devDependencies": {

package.json

@@ -6,6 +6,7 @@ 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';
@@ -29,21 +30,23 @@ import { getExampleDescription } from '~/util/strings';
 import urlWithQuery from '~/util/urlWithQuery';
 
 type Props = {
+  packageName: string;
   apiData: {
     libraries: LibraryType[];
   };
-  registryData: NpmLatestRegistryData;
-  packageName: string;
+  registryData?: NpmLatestRegistryData;
   readmeContent?: string;
 };
 
+// TODO: async render/data fetch
+// TODO: responsive/mobile viewports
 export default function PackagePage({ apiData, registryData, packageName, readmeContent }: Props) {
   const { isDark } = useContext(CustomAppearanceContext);
   const { isSmallScreen } = useLayout();
 
   const library = apiData.libraries.find(lib => lib.npmPkg === packageName);
 
-  if (!library) {
+  if (!library || !registryData) {
     return (
       <>
         <Navigation />
@@ -62,7 +65,6 @@ export default function PackagePage({ apiData, registryData, packageName, readme
     );
   }
 
-  const { description } = library.github;
   const { author, maintainers, dependencies, devDependencies, peerDependencies, engines } =
     registryData;
 
@@ -92,13 +94,13 @@ export default function PackagePage({ apiData, registryData, packageName, readme
               <UpdatedAtView library={library} />
             </View>
             <CompatibilityTags library={library} />
-            {description && description.length && (
+            {library.github.description && library.github.description.length && (
               <Headline style={styles.description}>
                 <Linkify
                   options={{
                     linkWrapper: props => <A {...props}>{props.children}</A>,
                   }}>
-                  {emoji.emojify(description)}
+                  {emoji.emojify(library.github.description)}
                 </Linkify>
               </Headline>
             )}
@@ -118,10 +120,12 @@ export default function PackagePage({ apiData, registryData, packageName, readme
                     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 code block in a better way
                     // 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]}>
+                  rehypePlugins={[rehypeRaw, rehypeSanitize]}
+                  remarkPlugins={[remarkGfm]}>
                   {readmeContent}
                 </Md>
               </View>
@@ -166,7 +170,7 @@ export default function PackagePage({ apiData, registryData, packageName, readme
               </>
             )}
             <H6 style={[styles.mainContentHeader, headerColorStyle]}>Additional information</H6>
-            <View style={{ gap: 6 }}>
+            <View style={styles.rowSpacing}>
               <MetaData library={library} secondary skipExamples />
             </View>
             {library.images && library.images.length ? (
@@ -187,7 +191,7 @@ export default function PackagePage({ apiData, registryData, packageName, readme
             <H6 style={[styles.mainContentHeader, headerColorStyle]}>Popularity</H6>
             <TrendingMark library={library} />
             <H6 style={[styles.contentHeader, headerColorStyle]}>Package analysis</H6>
-            <View style={{ gap: 4 }}>
+            <View style={styles.rowSpacing}>
               <A
                 href={`https://bundlephobia.com/package/${library.npmPkg}`}
                 target="_blank"
@@ -350,6 +354,9 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderStyle: 'solid',
   },
+  rowSpacing: {
+    gap: 6,
+  },
 });
 
 export async function getServerSideProps(ctx: NextPageContext) {

pages/package/[...name].tsx

@@ -242,7 +242,40 @@ select {
     word-break: break-word;
   }
 
+  pre {
+    background-color: var(--select-background);
+    border-radius: 8px;
+    padding: 10px 14px;
+    color: #fff;
+    margin-bottom: 0;
+    line-height: 1.4;
+
+    &:last-child {
+      margin-bottom: 12px;
+    }
+  }
+
   img {
     max-width: 100%;
   }
+
+  blockquote {
+    margin-inline-start: 1rem;
+  }
+
+  ul, ol {
+    padding-inline-start: 1rem;
+    margin-bottom: 0;
+  }
+
+  table {
+    margin-top: 8px;
+    border-collapse: collapse;
+    width: fit-content;
+  }
+
+  td, th {
+    border: 1px solid var(--select-border);
+    padding: 3px 6px;
+  }
 }