fix internal (repo) links in README, improve author rendering (#2089)

Author: Simek

components/Package/PackageAuthor.tsx

@@ -8,7 +8,7 @@ import { type NpmUser } from '~/types';
 import tw from '~/util/tailwind';
 
 type Props = {
-  author?: NpmUser;
+  author?: NpmUser | string;
   compact?: boolean;
 };
 
@@ -25,13 +25,37 @@ export default function PackageAuthor({ author, compact }: Props) {
     );
   }
 
+  if (typeof author === 'string') {
+    if (author.includes('github.com/')) {
+      const ghUsername = extractGitHubUsername(author);
+
+      return (
+        <View>
+          <A href={`https://github.com/${ghUsername}`} style={authorContainerStyle}>
+            <UserAvatar src={`https://github.com/${ghUsername}.png`} alt={`${ghUsername} avatar`} />
+            <View>
+              <Caption style={labelStyle}>{ghUsername}</Caption>
+              <span style={sublabelStyle}>
+                {author.replace(/\s*\(?https?:\/\/\S+\)?\s*/g, '').trim()}
+              </span>
+            </View>
+          </A>
+        </View>
+      );
+    }
+    return (
+      <View>
+        <Label>{author}</Label>
+      </View>
+    );
+  }
+
   const potentialHref = author.url ?? author.email;
 
   // URL
   if (potentialHref && !potentialHref.includes('@')) {
     if (potentialHref.includes('github.com/')) {
-      const [, potentialGHUsername] = potentialHref.split('github.com/');
-      const ghUsername = potentialGHUsername.replace(/[<>()]/g, '');
+      const ghUsername = extractGitHubUsername(potentialHref);
       const validName = getValidName(author.name);
 
       return (
@@ -107,3 +131,8 @@ function getValidName(potentialName: string): string {
     .join(' ');
   return cleanName.length ? cleanName : potentialName.replace(/[<>()]/g, '');
 }
+
+function extractGitHubUsername(author: string): string | null {
+  const [, potentialGHUsername] = author.split('github.com/');
+  return potentialGHUsername ? potentialGHUsername.replace(/[<>()]/g, '') : null;
+}

components/Package/ReadmeBox.tsx

@@ -102,6 +102,9 @@ export default function ReadmeBox({ packageName, githubUrl, isTemplate, loader =
               hr: () => null,
               a: (props: any) => {
                 if (props.href && !props.href.startsWith('//')) {
+                  if (!props.href.startsWith('http')) {
+                    return <A {...props} href={`${githubUrl}/blob/HEAD/${props.href}`} />;
+                  }
                   return <A {...props} />;
                 }
                 return <span>{props.children}</span>;

scenes/PackageOverviewScene.tsx

@@ -3,7 +3,7 @@ import dynamic from 'next/dynamic';
 import { useMemo } from 'react';
 import { View } from 'react-native';
 
-import { A, H6, Label, useLayout } from '~/common/styleguide';
+import { A, H6, useLayout } from '~/common/styleguide';
 import ContentContainer from '~/components/ContentContainer';
 import MetaData from '~/components/Library/MetaData';
 import TrendingMark from '~/components/Library/TrendingMark';
@@ -83,13 +83,7 @@ export default function PackageOverviewScene({
               <>
                 <H6 style={tw`text-[16px] mt-3 text-secondary`}>Author</H6>
                 <View style={tw`items-start`}>
-                  {typeof author === 'string' ? (
-                    <View>
-                      <Label>{author ?? 'Unknown'}</Label>
-                    </View>
-                  ) : (
-                    <PackageAuthor author={author} />
-                  )}
+                  <PackageAuthor author={author} />
                 </View>
               </>
             )}
@@ -142,13 +136,7 @@ export default function PackageOverviewScene({
               <>
                 <H6 style={tw`text-[16px] text-secondary`}>Author</H6>
                 <View style={tw`items-start`}>
-                  {typeof author === 'string' ? (
-                    <View>
-                      <Label>{author ?? 'Unknown'}</Label>
-                    </View>
-                  ) : (
-                    <PackageAuthor author={author} />
-                  )}
+                  <PackageAuthor author={author} />
                 </View>
               </>
             )}