[example][m] - changed styling and added octokit

examples/simple-example/datasets.json

@@ -3,5 +3,5 @@
   { "owner": "datasets", "repo": "investor-flow-of-funds-us"},
   { "owner": "datasets", "repo": "browser-stats"},
   { "owner": "datasets", "repo": "glacier-mass-balance"},
-  { "owner": "datasets", "repo": "bonds-yields-us-10y"}
+  { "owner": "datasets", "repo": "bond-yields-us-10y"}
 ]

examples/simple-example/lib/project.ts

@@ -1,5 +1,6 @@
 import * as crypto from "crypto";
 import axios from "axios";
+import { Octokit } from "octokit"
 
 export default class Project {
   id: string;
@@ -8,6 +9,7 @@ export default class Project {
   github_repo: string;
   readme: string;
   metadata: any;
+  repo_metadata: any;
 
   constructor(owner: string, name: string) {
     this.name = name;
@@ -22,6 +24,7 @@ export default class Project {
   }
 
   initFromGitHub = async () => {
+    const octokit = new Octokit()
     //  TODO: what if the repo doesn't exist?
     await this.getFileContent("README.md")
       .then((content) => (this.readme = content))
@@ -30,6 +33,9 @@ export default class Project {
     await this.getFileContent("datapackage.json")
       .then((content) => (this.metadata = content))
       .catch((e) => (this.metadata = {}));
+
+    const github_metadata = await octokit.rest.repos.get({ owner: this.owner, repo: this.name })
+    this.repo_metadata = github_metadata.data ? github_metadata.data : null
   };
 
   getFileContent = (path, branch = "main") => {

examples/simple-example/next.config.js

@@ -5,16 +5,22 @@ const { withNx } = require('@nrwl/next/plugins/with-nx');
  * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
-   async rewrites() {
+  async rewrites() {
     return {
       beforeFiles: [
         {
-          source: "/@:org/:project/:file(.+\\..+$)",
+          source: "/@org/:org/:project/:file(\.\+\\\.\.\+\$)",
           destination:
-            "/api/proxy?url=https://raw.githubusercontent.com/:org/:project/main/:file",
-        },       {
-          source: "/@:org/:project*",
-          destination: "/@org/:org/:project*",
+            '/api/proxy?url=https://raw.githubusercontent.com/:org/:project/main/:file',
+        },
+        {
+          source: "/@:org/:project/:file(\.\+\\\.\.\+\$)",
+          destination:
+            '/api/proxy?url=https://raw.githubusercontent.com/:org/:project/main/:file',
+        },
+        {
+          source: '/@:org/:project*',
+          destination: '/@org/:org/:project*',
         },
       ],
     };

examples/simple-example/pages/@org/[org]/[project]/[...slug].tsx

@@ -0,0 +1,44 @@
+import DRD from "../../../components/drd/DRD";
+import MDLayout from "../../../components/MDLayout";
+import parse from "../../../lib/markdown";
+import Project from "../../../lib/project";
+import { NextSeo } from "next-seo";
+
+export default function ProjectFile({ mdxSource, frontMatter, project }) {
+  return (
+    <>
+      <NextSeo title={`DataHub - @${project.owner}/${project.name}`} />
+      <MDLayout layout={frontMatter.layout} {...frontMatter}>
+        <DRD source={mdxSource} />
+      </MDLayout>
+    </>
+  );
+}
+
+export async function getServerSideProps({ params }) {
+  const { org: orgName, project: projectName, slug } = params;
+
+  const project = await Project.getFromGitHub(orgName, projectName);
+
+  let content = null;
+
+  try {
+    content = await project.getFileContent(slug.join("/") + ".md");
+  } catch (e) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const { mdxSource, frontMatter } = await parse(content, ".mdx");
+
+  return {
+    props: {
+      mdxSource,
+      frontMatter,
+      project: project.serialize(),
+      slug: slug || [],
+    },
+  };
+}
+

examples/simple-example/pages/@org/[org]/[project]/index.tsx

@@ -1,9 +1,9 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 
-import DRD from '../../../components/drd/DRD';
-import parse from '../../../lib/markdown';
-import Project from '../../../lib/project';
+import DRD from '../../../../components/drd/DRD';
+import parse from '../../../../lib/markdown';
+import Project from '../../../../lib/project';
 import { NextSeo } from 'next-seo';
 import MDLayout from 'examples/simple-example/components/MDLayout';
 import { promises as fs } from 'fs';

examples/simple-example/pages/api/proxy.ts

@@ -1,6 +1,7 @@
 import axios from "axios";
 
 export default function handler(req, res) {
+  console.log(req.query.url)
   if (!req.query.url) {
     res.status(200).send({
       error: true,

examples/simple-example/pages/index.tsx

@@ -14,7 +14,6 @@ export async function getStaticProps() {
   const projects = await Promise.all(
     JSON.parse(repos).map(async (repo) => {
       const project = await Project.getFromGitHub(repo.owner, repo.repo);
-      console.log(project);
 
       //  Defaults to README
       const content = project.readme ? project.readme : '';
@@ -40,26 +39,29 @@ export async function getStaticProps() {
   };
 }
 
+const formatter = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
+  timeZone: 'UTC',
+});
+
 export function Datasets({ projects }) {
   console.log(projects);
   return (
     <div className="bg-white">
       <div className="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
-        <h2 className="text-2xl font-bold leading-10 tracking-tight text-gray-900">
-          Luccas Datasets
+        <h2 className="text-2xl font-bold leading-10 tracking-tight text-indigo-500">
+          My Datasets
         </h2>
         <p className="mt-6 max-w-2xl text-base leading-7 text-gray-600">
-          Here is a list of all my datasets for easy access and sharing, if you
-          have any questions{' '}
-          <a
-            href="#"
-            className="font-semibold text-indigo-600 hover:text-indigo-500"
-          >
-            sending me an email
-          </a>{' '}
-          and i’ll get back to you as soon as we can.
+          Here is a list of all my datasets for easy access and sharing
         </p>
         <div className="mt-20">
+          {/*
           <dl className="space-y-16 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-16 sm:space-y-0 lg:grid-cols-3 lg:gap-x-10">
             {projects.map((project) => (
               <div>
@@ -82,7 +84,66 @@ export function Datasets({ projects }) {
                 </dd>
               </div>
             ))}
-          </dl>
+          </dl> */}
+          <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"
+                    >
+                      Dataset name
+                    </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>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        <a href={project.project.repo_metadata.html_url}>
+                          {project.project.owner}/{project.project.name}
+                        </a>
+                      </td>
+                      <td className="px-3 py-4 text-sm text-gray-500">
+                        {project.project.repo_metadata.description}
+                      </td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        {formatter.format(
+                          new Date(project.project.repo_metadata.updated_at)
+                        )}
+                      </td>
+                      <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
+                        <a
+                          href={`/@${project.project.owner}/${project.project.name}`}
+                          className="text-indigo-600 hover:text-indigo-900"
+                        >
+                          More info
+                        </a>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
         </div>
       </div>
     </div>

package.json

@@ -19,6 +19,7 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.11.16",
     "@mui/x-data-grid": "^6.1.0",
+    "@opentelemetry/api": "^1.4.0",
     "@tailwindcss/typography": "^0.5.9",
     "@tanstack/react-table": "^8.8.5",
     "apollo-cache-inmemory": "^1.6.6",
@@ -33,6 +34,7 @@
     "next-seo": "^6.0.0",
     "next-translate": "^2.0.5",
     "nock": "^13.3.0",
+    "octokit": "^2.0.14",
     "papaparse": "^5.4.1",
     "plotly.js-basic-dist": "^2.20.0",
     "prop-types": "^15.8.1",