chore: replace readme not available message

ben-brooker · ben-brooker · commit fb7010446465 · 2022-07-05T15:17:06.000+01:00
diff --git a/components/PackageReadMePlaceholder.tsx b/components/PackageReadMePlaceholder.tsx
@@ -0,0 +1,53 @@
+import Html from './Html';
+
+type Props = {
+    data: {
+        packageName: string,
+        version: string,
+        title: string,
+        description: string
+    }
+}
+
+export default function PackageReadMePlaceholder({data}: Props) {
+  const {
+    packageName,
+    version,
+    title,
+    description
+  } = data;
+
+  return (
+    <div
+    >
+      <div className="max-w-screen-lg mt-8 md:mt-12">
+        <div className="mt-2 prose-sm prose sm:prose max-w-none sm:max-w-none">
+          <header>
+            <h1>
+              <Html>{`${packageName} (version ${version})`}</Html>
+            </h1>
+          </header>
+          {
+            title 
+            &&
+            (
+            <section>
+                <h2 className="text-xl text-gray-500">{title}</h2>
+            </section>
+            )
+          }
+          {
+            description 
+            && 
+            (
+            <section>
+              <h2>Description</h2>
+              <Html>{description}</Html>
+            </section>
+            )
+          }
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/packages/[package]/versions/[version].tsx b/pages/packages/[package]/versions/[version].tsx
@@ -5,6 +5,7 @@ import Link from 'next/link';
 import Layout from '../../../../components/Layout';
 import PackageFunctionList from '../../../../components/PackageFunctionList';
 import PackageReadme from '../../../../components/PackageReadme';
+import PackageReadMePlaceholder from '../../../../components/PackageReadMePlaceholder';
 import PackageSidebar from '../../../../components/PackageSidebar';
 import { getMonthlyDownloads } from '../../../../lib/downloads';
 import {
@@ -112,7 +113,20 @@ export default function PackageVersionPage({
                 </Link>
               </div>
             )}
+            {
+            metadata.readmemd 
+            ?
             <PackageReadme readme={metadata.readmemd} />
+            :
+            <PackageReadMePlaceholder
+              data={{
+                packageName: metadata.package_name,
+                version: metadata.version,
+                title: metadata.title,
+                description: metadata.description
+              }}
+              />
+            }
           </div>
           <div className="w-full pt-8 border-t lg:border-t-0 lg:w-1/3 lg:pt-0 lg:pl-8 lg:border-l">
             <PackageSidebar
