Merge pull request #120 from datacamp/bb/fix-readme-not-available

ben-brooker · web-flow · commit ad4f388c90e2 · 2022-07-11T15:36:17.000+01:00
[CT-3782] chore: replace readme not available message
diff --git a/components/PackageReadMePlaceholder.tsx b/components/PackageReadMePlaceholder.tsx
@@ -0,0 +1,51 @@
+import Html from './Html';
+
+type Props = {
+      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,18 @@ export default function PackageVersionPage({
                 </Link>
               </div>
             )}
+            {
+            metadata.readmemd 
+            ?
             <PackageReadme readme={metadata.readmemd} />
+            :
+            <PackageReadMePlaceholder
+                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
