[examples/github-backed-catalog] - improvements after issue #871 (#887)

examples/github-backed-catalog/pages/@org/[org]/[...path].tsx

@@ -1,22 +1,31 @@
-import { NextSeo } from 'next-seo';
-import { promises as fs } from 'fs';
-import path from 'path';
-import getConfig from 'next/config';
-import { getProject, GithubProject } from '../../../lib/octokit';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import Breadcrumbs from '../../../components/_shared/Breadcrumbs';
+import { NextSeo } from "next-seo";
+import { promises as fs } from "fs";
+import path from "path";
+import getConfig from "next/config";
+import { getProject, GithubProject } from "../../../lib/octokit";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import Breadcrumbs from "../../../components/_shared/Breadcrumbs";
 
 export default function ProjectPage({ project }) {
-  const repoId = `@${project.repo_config.owner}/${project.repo_config.repo}`
+  const repoId = `@${project.repo_config.owner}/${project.repo_config.repo}`;
 
   return (
     <>
-      <NextSeo title={`${repoId}${project.base_path !== '/' ? '/' + project.base_path : ''} - GitHub Datasets`} />
+      <NextSeo
+        title={`${repoId}${
+          project.base_path !== "/" ? "/" + project.base_path : ""
+        } - GitHub Datasets`}
+      />
       <main className="prose mx-auto my-8">
         <Breadcrumbs links={[{ title: repoId, href: "" }]} />
         <h1 className="mb-0 mt-16">{project.repo_config.name || repoId}</h1>
-        <p className='mb-8'><span className='font-semibold'>Repository:</span> <a target="_blank" href={project.html_url}>{project.html_url}</a></p>
+        <p className="mb-8">
+          <span className="font-semibold">Repository:</span>{" "}
+          <a target="_blank" href={project.html_url}>
+            {project.html_url}
+          </a>
+        </p>
 
         <h2 className="mb-0 mt-10">Files</h2>
         <div className="inline-block min-w-full py-2 align-middle">
@@ -54,7 +63,7 @@ export default function ProjectPage({ project }) {
 
         <hr />
 
-        <h2 className='uppercase font-black'>Readme</h2>
+        <h2 className="uppercase font-black">Readme</h2>
         <ReactMarkdown remarkPlugins={[remarkGfm]}>
           {project.readmeContent}
         </ReactMarkdown>
@@ -65,17 +74,14 @@ export default function ProjectPage({ project }) {
 
 // Generates `/posts/1` and `/posts/2`
 export async function getStaticPaths() {
-  const jsonDirectory = path.join(
-    process.cwd(),
-    'datasets.json'
-  );
-  const repos = await fs.readFile(jsonDirectory, 'utf8');
+  const jsonDirectory = path.join(process.cwd(), "datasets.json");
+  const repos = await fs.readFile(jsonDirectory, "utf8");
 
   return {
     paths: JSON.parse(repos).map((repo) => {
       const projectPath =
-        repo.readme.split('/').length > 1
-          ? repo.readme.split('/').slice(0, -1)
+        repo.readme && repo.readme.split("/").length > 1
+          ? repo.readme.split("/").slice(0, -1)
           : null;
       let path = [repo.repo];
       if (projectPath) {
@@ -92,16 +98,13 @@ export async function getStaticPaths() {
 }
 
 export async function getStaticProps({ params }) {
-  const jsonDirectory = path.join(
-    process.cwd(),
-    'datasets.json'
-  );
-  const reposFile = await fs.readFile(jsonDirectory, 'utf8');
+  const jsonDirectory = path.join(process.cwd(), "datasets.json");
+  const reposFile = await fs.readFile(jsonDirectory, "utf8");
   const repos: GithubProject[] = JSON.parse(reposFile);
   const repo = repos.find((_repo) => {
     const projectPath =
-      _repo.readme.split('/').length > 1
-        ? _repo.readme.split('/').slice(0, -1)
+      _repo.readme && _repo.readme.split("/").length > 1
+        ? _repo.readme.split("/").slice(0, -1)
         : null;
     let path = [_repo.repo];
     if (projectPath) {

examples/github-backed-catalog/pages/_app.tsx

@@ -1,6 +1,6 @@
-import { AppProps } from 'next/app';
-import Head from 'next/head';
-import './styles.css';
+import { AppProps } from "next/app";
+import Head from "next/head";
+import "./styles.css";
 
 function CustomApp({ Component, pageProps }: AppProps) {
   return (

examples/github-backed-catalog/pages/index.tsx

@@ -1,21 +1,19 @@
-import { promises as fs } from 'fs';
-import path from 'path';
-import { getProject } from '../lib/octokit';
-import getConfig from 'next/config';
-import ExternalLinkIcon from '../components/icons/ExternalLinkIcon';
-import TimeAgo from 'react-timeago';
-import Link from 'next/link';
+import { promises as fs } from "fs";
+import path from "path";
+import { getProject } from "../lib/octokit";
+import getConfig from "next/config";
+import ExternalLinkIcon from "../components/icons/ExternalLinkIcon";
+import TimeAgo from "react-timeago";
+import Link from "next/link";
+import { NextSeo } from "next-seo";
 
 export async function getStaticProps() {
-  const jsonDirectory = path.join(
-    process.cwd(),
-    '/datasets.json'
-  );
-  const repos = await fs.readFile(jsonDirectory, 'utf8');
+  const jsonDirectory = path.join(process.cwd(), "/datasets.json");
+  const repos = await fs.readFile(jsonDirectory, "utf8");
   const github_pat = getConfig().serverRuntimeConfig.github_pat;
 
   const projects = await Promise.all(
-    (JSON.parse(repos)).map(async (repo) => {
+    JSON.parse(repos).map(async (repo) => {
       const project = await getProject(repo, github_pat);
       return { ...project, repo_config: repo };
     })
@@ -29,88 +27,112 @@ export async function getStaticProps() {
 
 export function Datasets({ projects }) {
   return (
-    <div className="bg-white min-h-screen">
-      <div className="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
-        <div className='text-center'>
-          <h2 className="text-3xl font-bold leading-10 tracking-tight">
-            GitHub Datasets
-          </h2>
-          <p className="mt-3 mx-auto max-w-2xl text-base leading-7 text-gray-500">
-            Data catalog with datasets hosted on GitHub by <Link target="_blank" className='underline' href="https://portaljs.org/">🌀 PortalJS</Link>
-          </p>
-        </div>
-        <div className="mt-20">
-          <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-            <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-              <table className="min-w-full divide-y divide-gray-300">
-                <thead>
-                  <tr>
-                    <th
-                      scope="col"
-                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                    >
-                      Name
-                    </th>
-                    <th
-                      scope="col"
-                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                    >
-                      Repository
-                    </th>
-                    <th
-                      scope="col"
-                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                    >
-                      Description
-                    </th>
-                    <th
-                      scope="col"
-                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                    >
-                      Last updated
-                    </th>
-                    <th
-                      scope="col"
-                      className="relative py-3.5 pl-3 pr-4 sm:pr-0"
-                    ></th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200">
-                  {projects.map((project) => (
-                    <tr key={project.id}>
-                      <td className="whitespace-nowrap px-3 py-6 text-sm text-gray-500">
-                        {project.repo_config.name
-                          ? project.repo_config.name
-                          : project.full_name + (project.base_path === '/' ? '' : '/' + project.base_path)}
-                      </td>
-                      <td className="whitespace-nowrap px-3 py-6 text-sm group text-gray-500 hover:text-gray-900 transition-all duration-250">
-                        <a href={project.html_url} target="_blank" className='flex items-center'>@{project.full_name} <ExternalLinkIcon className='ml-1' /></a>
-                      </td>
-                      <td className="px-3 py-4 text-sm text-gray-500">
-                        {project.repo_config.description
-                          ? project.repo_config.description
-                          : project.description}
-                      </td>
-                      <td className="whitespace-nowrap px-3 py-6 text-sm text-gray-500">
-                        <TimeAgo date={new Date(project.last_updated)} />
-                      </td>
-                      <td className="relative whitespace-nowrap py-6 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
-                        <a
-                          href={`/@${project.repo_config.owner}/${project.repo_config.repo}/${project.base_path === '/' ? '' : project.base_path}`}
-                          className='border border-gray-900 text-gray-900 px-4 py-2 transition-all hover:bg-gray-900 hover:text-white'
-                        >
-                          info
-                        </a>
-                      </td>
+    <>
+      <NextSeo title="GitHub Datasets" />
+      <div className="bg-white min-h-screen">
+        <div className="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
+          <div className="text-center">
+            <h2 className="text-3xl font-bold leading-10 tracking-tight">
+              GitHub Datasets
+            </h2>
+            <p className="mt-3 mx-auto max-w-2xl text-base leading-7 text-gray-500">
+              Data catalog with datasets hosted on GitHub by{" "}
+              <Link
+                target="_blank"
+                className="underline"
+                href="https://portaljs.org/"
+              >
+                🌀 PortalJS
+              </Link>
+            </p>
+          </div>
+          <div className="mt-20">
+            <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+              <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+                <table className="min-w-full divide-y divide-gray-300">
+                  <thead>
+                    <tr>
+                      <th
+                        scope="col"
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                      >
+                        Name
+                      </th>
+                      <th
+                        scope="col"
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                      >
+                        Repository
+                      </th>
+                      <th
+                        scope="col"
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                      >
+                        Description
+                      </th>
+                      <th
+                        scope="col"
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                      >
+                        Last updated
+                      </th>
+                      <th
+                        scope="col"
+                        className="relative py-3.5 pl-3 pr-4 sm:pr-0"
+                      ></th>
                     </tr>
-                  ))}
-                </tbody>
-              </table>
+                  </thead>
+                  <tbody className="divide-y divide-gray-200">
+                    {projects.map((project) => (
+                      <tr key={project.id}>
+                        <td className="whitespace-nowrap px-3 py-6 text-sm text-gray-500">
+                          {project.repo_config.name
+                            ? project.repo_config.name
+                            : project.full_name +
+                              (project.base_path === "/"
+                                ? ""
+                                : "/" + project.base_path)}
+                        </td>
+                        <td className="whitespace-nowrap px-3 py-6 text-sm group text-gray-500 hover:text-gray-900 transition-all duration-250">
+                          <a
+                            href={project.html_url}
+                            target="_blank"
+                            className="flex items-center"
+                          >
+                            @{project.full_name}{" "}
+                            <ExternalLinkIcon className="ml-1" />
+                          </a>
+                        </td>
+                        <td className="px-3 py-4 text-sm text-gray-500">
+                          {project.repo_config.description
+                            ? project.repo_config.description
+                            : project.description}
+                        </td>
+                        <td className="whitespace-nowrap px-3 py-6 text-sm text-gray-500">
+                          <TimeAgo date={new Date(project.last_updated)} />
+                        </td>
+                        <td className="relative whitespace-nowrap py-6 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
+                          <a
+                            href={`/@${project.repo_config.owner}/${
+                              project.repo_config.repo
+                            }/${
+                              project.base_path === "/" ? "" : project.base_path
+                            }`}
+                            className="border border-gray-900 text-gray-900 px-4 py-2 transition-all hover:bg-gray-900 hover:text-white"
+                          >
+                            info
+                          </a>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }