[topics,#13][l]: working topics section with data pulled from github.…

…com/datasets/awesome-data - fixes #13.

* index page: (crude atm) just a listing of the page with their markdown names
* topic pages: load and run through data literate processing

Loading is done via github graphql. May be some inefficiency here in that we load all the data for every page but i hope apollo helps with caching.

components/Nav.js

@@ -9,6 +9,7 @@ const navigation = [
   { name: 'About', href: '/about', current: false },
   { name: 'Excel Viewer', href: '/excel-viewer/', current: false },
   { name: 'Climate', href: '/climate-change/', current: false },
+  { name: 'Topics', href: '/topics/', current: false },
   { name: 'Github', href: 'https://github.com/datopian/data-literate', current: false },
 ]
 

pages/topics/[...id].js

@@ -0,0 +1,51 @@
+import DataLiterate from '../../components/DataLiterate'
+import parse from '../../lib/markdown.js'
+import { getTopics } from '../../utils/topicsData'
+
+export default function Topic({source, frontMatter}) {
+  return (
+    <DataLiterate source={source} frontMatter={frontMatter} />
+  )
+}
+
+export async function getStaticProps({ params }) {
+  const topics = await getTopics()
+  const filename  = params.id + '.md'
+  const topic = topics.find(t => t.name == filename)
+
+  const source = topic.object.text
+  const { mdxSource, frontMatter } = await parse(source)
+
+  // HACK: can't have date types in data we pass around as does not json serialize
+  // see e.g. https://github.com/vercel/next.js/discussions/11498
+  // you could try to disable gray-matter auto-parsing of dates - see https://github.com/jonschlinkert/gray-matter/issues/62
+  // however simplest for now is to reconvert
+  for (const [key, value] of Object.entries(frontMatter)) {
+    if (value instanceof Date) {
+      frontMatter[key] = value.toJSON()
+    }
+  }
+
+  return {
+    props: {
+      source: mdxSource,
+      frontMatter: frontMatter,
+    },
+  }
+}
+
+export async function getStaticPaths() {
+  const topics = await getTopics()
+  const paths = topics.map((topic) => {
+    return {
+      params: {
+        id: [topic.name.replace(/\.mdx?$/, '')]
+      }
+    }
+  })
+
+  return {
+    paths,
+    fallback: false
+  } 
+}

pages/topics/index.js

@@ -0,0 +1,30 @@
+import Link from 'next/link'
+
+import Layout from '../../components/Layout'
+import { getTopics } from '../../utils/topicsData'
+
+
+export default function Index({ topics }) {
+  return (
+    <Layout>
+      <h2>Topics</h2>
+      <ul>
+        {topics.map((topic) => (
+          <li>
+            <Link
+              href={`/topics/${topic.name.replace(/\.mdx?$/, '')}`}
+            >
+              <a>{topic.name}</a>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </Layout>
+  )
+}
+
+export async function getStaticProps() {
+  const topics = await getTopics()
+
+  return { props: { topics } }
+}

utils/topicsData.js

@@ -0,0 +1,37 @@
+import { gql } from '@apollo/client'
+import client from '../lib/github'
+
+export async function getTopics() {
+  // github query inspired by https://gist.github.com/MichaelCurrin/6777b91e6374cdb5662b64b8249070ea
+  const { data, loading, error } = await client.query({
+    query: gql`
+query RepoFiles($owner: String!, $name: String!) {
+  repository(owner: $owner, name: $name) {
+    object(expression: "HEAD:") {
+      ... on Tree {
+        entries {
+          name
+          type
+          mode
+          
+          object {
+            ... on Blob {
+              byteSize
+              text
+              isBinary
+            }
+          }
+        }
+      }
+    }
+  }
+}
+    `,
+    variables: {
+      "owner": "datasets",
+      "name": "awesome-data"
+    }
+  });
+
+  return data.repository.object.entries
+}