[@portaljs/components][xl] - @portaljs/ckan package

+ Accompaning example using said package
+ Removed the "example" from all the examples names

examples/learn/pages/[[...path]].tsx

@@ -0,0 +1,126 @@
+import { existsSync, promises as fs } from 'fs';
+import path from 'path';
+import parse from '../lib/markdown';
+
+import DataRichDocument from '../components/DataRichDocument';
+import clientPromise from '../lib/mddb';
+
+export const getStaticPaths = async () => {
+  const contentDir = path.join(process.cwd(), '/content/');
+  const contentFolders = await fs.readdir(contentDir, 'utf8');
+  const paths = contentFolders.map((folder: string) =>
+    folder === 'index.md'
+      ? { params: { path: [] } }
+      : { params: { path: [folder] } }
+  );
+  return {
+    paths,
+    fallback: false,
+  };
+};
+
+export const getStaticProps = async (context) => {
+  let pathToFile = 'index.md';
+  if (context.params.path) {
+    pathToFile = context.params.path.join('/') + '/index.md';
+  }
+
+  let datasets = [];
+  const mddbFileExists = existsSync('markdown.db');
+  if (mddbFileExists) {
+    const mddb = await clientPromise;
+    const datasetsFiles = await mddb.getFiles({
+      extensions: ['md', 'mdx'],
+    });
+    datasets = datasetsFiles
+      .filter((dataset) => dataset.url_path !== '/')
+      .map((dataset) => ({
+        _id: dataset._id,
+        url_path: dataset.url_path,
+        file_path: dataset.file_path,
+        metadata: dataset.metadata,
+      }));
+  }
+
+  const indexFile = path.join(process.cwd(), '/content/' + pathToFile);
+  const readme = await fs.readFile(indexFile, 'utf8');
+
+  let { mdxSource, frontMatter } = await parse(readme, '.mdx', { datasets });
+
+  return {
+    props: {
+      mdxSource,
+      frontMatter: JSON.stringify(frontMatter),
+    },
+  };
+};
+
+export default function DatasetPage({ mdxSource, frontMatter }) {
+  frontMatter = JSON.parse(frontMatter);
+  return (
+    <div className="prose dark:prose-invert mx-auto py-8">
+      <header>
+        <div className="mb-6">
+          <>
+            <h1 className="mb-2">{frontMatter.title}</h1>
+            {frontMatter.author && (
+              <p className="my-0">
+                <span className="font-semibold">Author: </span>
+                <span className="my-0">{frontMatter.author}</span>
+              </p>
+            )}
+            {frontMatter.description && (
+              <p className="my-0">
+                <span className="font-semibold">Description: </span>
+                <span className="description my-0">
+                  {frontMatter.description}
+                </span>
+              </p>
+            )}
+            {frontMatter.modified && (
+              <p className="my-0">
+                <span className="font-semibold">Modified: </span>
+                <span className="description my-0">
+                  {new Date(frontMatter.modified).toLocaleDateString()}
+                </span>
+              </p>
+            )}
+            {frontMatter.files && (
+              <section className="py-6">
+                <h2 className="mt-0">Data files</h2>
+                <table className="table-auto">
+                  <thead>
+                    <tr>
+                      <th>File</th>
+                      <th>Format</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {frontMatter.files.map((f) => {
+                      const fileName = f.split('/').slice(-1);
+                      return (
+                        <tr key={`resources-list-${f}`}>
+                          <td>
+                            <a target="_blank" href={f}>
+                              {fileName}
+                            </a>
+                          </td>
+                          <td>
+                            {fileName[0].split('.').slice(-1)[0].toUpperCase()}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </section>
+            )}
+          </>
+        </div>
+      </header>
+      <main>
+        <DataRichDocument source={mdxSource} />
+      </main>
+    </div>
+  );
+}

examples/learn/pages/_app.tsx

@@ -0,0 +1,8 @@
+import '../styles/globals.css'
+import '@portaljs/components/styles.css'
+
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}

examples/learn/pages/_document.tsx

@@ -0,0 +1,19 @@
+import Document, { Html, Main, Head, NextScript } from 'next/document';
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link rel="icon" href="/favicon.png" />
+        </Head>
+        <body className='bg-white dark:bg-gray-900'>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;