[@portaljs/ckan][xl] - add ckan package and example using it

examples/ckan-ssg/ckan-example/.env

@@ -0,0 +1 @@
+DMS=https://demo.dev.datopian.com

examples/ckan-ssg/ckan-example/.eslintrc.json

@@ -0,0 +1,33 @@
+{
+  "extends": [
+    "next",
+    "next/core-web-vitals",
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": ["!**/*", ".next/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@next/next/no-html-link-for-pages": [
+          "error",
+          "examples/ckan-example/pages"
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ],
+  "rules": {
+    "@next/next/no-html-link-for-pages": "off"
+  },
+  "env": {
+    "jest": true
+  }
+}

examples/ckan-ssg/ckan-example/README.md

@@ -0,0 +1,46 @@
+This is a repo intended to serve as an example of a data catalog that get its data from a CKAN Instance.
+
+```
+npx create-next-app <app-name> --example https://github.com/datopian/portaljs/tree/main/examples/ckan-example
+cd <app-name>
+```
+
+- This project uses CKAN as a backend, so you need to point the project to the CKAN Url desired, you can do so by setting up the `DMS` env variable in your terminal or adding a `.env` file with the following content:
+
+```
+DMS=<ckan url>
+```
+
+- Run the app using:
+
+```
+npm run dev
+```
+
+Congratulations, you now have something similar to this running on `http://localhost:4200`
+![](https://media.discordapp.net/attachments/1069718983604977754/1098252297726865408/image.png?width=853&height=461)
+If yo go to any one of those pages by clicking on `More info` you will see something similar to this
+![](https://media.discordapp.net/attachments/1069718983604977754/1098252298074988595/image.png?width=853&height=461)
+
+## Deployment
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdatopian%2Fportaljs%2Ftree%2Fmain%2Fexamples%2Fckan-example&env=DMS&envDescription=URL%20For%20the%20CKAN%20Backend%20Ex%3A%20https%3A%2F%2Fdemo.dev.datopian.com)
+
+By clicking on this button, you will be redirected to a page which will allow you to clone the content into your own github/gitlab/bitbucket account and automatically deploy everything.
+
+
+
+## Extra commands
+
+You can also build the project for production with
+
+```
+npm run build
+```
+
+And run using the production build like so:
+
+```
+npm run start
+```
+

examples/ckan-ssg/ckan-example/index.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module '*.svg' {
+  const content: any;
+  export const ReactComponent: any;
+  export default content;
+}

examples/ckan-ssg/ckan-example/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'ckan-example',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/next/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/examples/ckan-example',
+};

examples/ckan-ssg/ckan-example/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/ckan-ssg/ckan-example/next.config.js

@@ -0,0 +1,17 @@
+const nextConfig = {
+  publicRuntimeConfig: {
+    DMS: process.env.DMS ? process.env.DMS : '',
+  },
+  async rewrites() {
+    return {
+      beforeFiles: [
+        {
+          source: '/@:org/:project*',
+          destination: '/@org/:org/:project*',
+        },
+      ],
+    };
+  },
+};
+
+module.exports = nextConfig;

examples/ckan-ssg/ckan-example/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.0.17",
+    "next": "13.3.1",
+    "next-seo": "^6.0.0",
+    "octokit": "^2.0.14",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-markdown": "^8.0.7",
+    "remark-gfm": "^3.0.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.23",
+    "tailwindcss": "^3.3.1",
+    "eslint": "8.39.0",
+    "eslint-config-next": "13.3.1",
+    "typescript": "5.0.4",
+    "@types/node": "18.16.0",
+    "@types/react": "18.0.38",
+    "@types/react-dom": "18.0.11"
+  }
+}

examples/ckan-ssg/ckan-example/pages/@org/[org]/[dataset]/index.tsx

@@ -0,0 +1,188 @@
+import { GetServerSideProps } from 'next';
+import getConfig from 'next/config';
+import React from 'react';
+import {
+  CalendarIcon,
+  CloudArrowUpIcon,
+  FolderOpenIcon,
+  LockClosedIcon,
+  MapPinIcon,
+  PaperClipIcon,
+  ServerIcon,
+  UserIcon,
+} from '@heroicons/react/20/solid';
+
+const dms = getConfig().publicRuntimeConfig.DMS;
+
+const formatter = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
+  timeZone: 'UTC',
+});
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const { dataset } = context.query;
+  const response = await fetch(
+    `${dms}/api/3/action/package_show?id=${dataset}`
+  );
+  const _dataset = await response.json();
+  return {
+    props: {
+      dataset: _dataset.result,
+    },
+  };
+};
+
+const positions = [
+  {
+    id: 1,
+    title: 'Back End Developer',
+    type: 'Full-time',
+    location: 'Remote',
+    department: 'Engineering',
+    closeDate: '2020-01-07',
+    closeDateFull: 'January 7, 2020',
+  },
+  {
+    id: 2,
+    title: 'Front End Developer',
+    type: 'Full-time',
+    location: 'Remote',
+    department: 'Engineering',
+    closeDate: '2020-01-07',
+    closeDateFull: 'January 7, 2020',
+  },
+  {
+    id: 3,
+    title: 'User Interface Designer',
+    type: 'Full-time',
+    location: 'Remote',
+    department: 'Design',
+    closeDate: '2020-01-14',
+    closeDateFull: 'January 14, 2020',
+  },
+];
+
+export default function DatasetPage({ dataset }) {
+  return (
+    <div className="overflow-hidden bg-white py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
+          <div className="lg:pr-8 lg:pt-4">
+            <div className="lg:max-w-lg">
+              <h2 className="text-base font-semibold leading-7 text-indigo-600">
+                {dataset.organization.title
+                  ? dataset.organization.title
+                  : dataset.organization.name}
+              </h2>
+              <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+                {dataset.title ? dataset.title : dataset.name}
+              </p>
+              <p className="mt-6 leading-8 text-gray-600">
+                {dataset.notes ? dataset.notes : 'No description'}
+              </p>
+              <div className="mt-6 border-t border-gray-100">
+                <dl className="divide-y divide-gray-100">
+                  {dataset.tags.length > 0 && (
+                    <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                      <dt className="text-sm font-medium leading-6 text-gray-900">
+                        Tags
+                      </dt>
+                      <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                        {dataset.tags.map((tag) => tag.display_name).join(', ')}
+                      </dd>
+                    </div>
+                  )}
+                  {dataset.url && (
+                    <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                      <dt className="text-sm font-medium leading-6 text-gray-900">
+                        Url
+                      </dt>
+                      <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                        {dataset.url}
+                      </dd>
+                    </div>
+                  )}
+                  <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                    <dt className="text-sm font-medium leading-6 text-gray-900">
+                      Created
+                    </dt>
+                    <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                      {formatter.format(new Date(dataset.metadata_created))}
+                    </dd>
+                  </div>
+                  <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                    <dt className="text-sm font-medium leading-6 text-gray-900">
+                      Modified
+                    </dt>
+                    <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                      {formatter.format(new Date(dataset.metadata_modified))}
+                    </dd>
+                  </div>
+                </dl>
+              </div>
+            </div>
+          </div>
+          <div className="lg:pr-8 lg:pt-4">
+            <h2 className="text-base font-semibold leading-7 text-indigo-600">
+              Resources
+            </h2>
+            <div className="overflow-hidden bg-white shadow sm:rounded-md mt-2">
+              <ul role="list" className="divide-y divide-gray-200">
+                {dataset.resources.map((resource) => (
+                  <li key={resource.id}>
+                    <a href={resource.url} className="block hover:bg-gray-50">
+                      <div className="px-4 py-4 sm:px-6">
+                        <div className="flex items-center justify-between">
+                          <p className="truncate text-sm font-medium text-indigo-600">
+                            {resource.name}
+                          </p>
+                          {resource.datastore_active && (
+                            <div className="ml-2 flex flex-shrink-0">
+                              <p className="inline-flex rounded-full bg-green-100 px-2 text-xs font-semibold leading-5 text-green-800">
+                                Datastore active
+                              </p>
+                            </div>
+                          )}
+                        </div>
+                        <div className="mt-2 sm:flex sm:justify-between">
+                          <div className="sm:flex">
+                            <p className="flex items-center text-sm text-gray-500">
+                              <FolderOpenIcon
+                                className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
+                                aria-hidden="true"
+                              />
+                              {resource.format}
+                            </p>
+                          </div>
+                          <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
+                            <CalendarIcon
+                              className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
+                              aria-hidden="true"
+                            />
+                            <p>
+                              Last modified:{' '}
+                              <time dateTime={resource.metadata_modified}>
+                                {formatter.format(
+                                  new Date(resource.metadata_modified)
+                                )}
+                              </time>
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

examples/ckan-ssg/ckan-example/pages/_app.tsx

@@ -0,0 +1,18 @@
+import { AppProps } from 'next/app';
+import Head from 'next/head';
+import './styles.css'
+
+function CustomApp({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <Head>
+        <title>Welcome to ckan-example!</title>
+      </Head>
+      <main className="app">
+        <Component {...pageProps} />
+      </main>
+    </>
+  );
+}
+
+export default CustomApp;

examples/ckan-ssg/ckan-example/pages/index.tsx

@@ -0,0 +1,114 @@
+import getConfig from 'next/config';
+import styles from './index.module.css';
+
+const dms = getConfig().publicRuntimeConfig.DMS
+
+const formatter = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
+  timeZone: 'UTC',
+});
+
+
+export async function getServerSideProps() {
+  const response = await fetch(`${dms}/api/3/action/package_search`)
+  const datasets = await response.json()
+  const datasetsWithDetails = await Promise.all(datasets.result.results.map(async (dataset) => {
+    const response = await fetch(`${dms}/api/3/action/package_show?id=` + dataset.name)
+    const json = await response.json()
+    return json.result
+  }))
+
+  return {
+    props: {
+      datasets: datasetsWithDetails
+    }
+  }
+}
+
+export function Index({ datasets }) {
+  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-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, they
+          are all available in the following{' '}
+          <a
+            href="#"
+            className="font-semibold text-indigo-600 hover:text-indigo-500"
+          >
+            CKAN Instance
+          </a>
+        </p>
+        <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"
+                    >
+                      Title
+                    </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">
+                  {datasets.map((dataset) => (
+                    <tr>
+                      <td className="px-3 py-4 text-sm text-gray-500">
+                          {dataset.title}
+                      </td>
+                      <td className="px-3 py-4 text-sm text-gray-500">
+                        {dataset.notes}
+                      </td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        {formatter.format(
+                          new Date(dataset.metadata_modified)
+                        )}
+                      </td>
+                      <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
+                        <a
+                          href={`/@${dataset.organization.name}/${dataset.name}`}
+                          className="text-indigo-600 hover:text-indigo-900"
+                        >
+                          More info
+                        </a>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Index;

examples/ckan-ssg/ckan-example/pages/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/ckan-ssg/ckan-example/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

examples/ckan-ssg/ckan-example/project.json

@@ -0,0 +1,69 @@
+{
+  "name": "ckan-example",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "examples/ckan-example",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/next:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "root": "examples/ckan-example",
+        "outputPath": "dist/examples/ckan-example"
+      },
+      "configurations": {
+        "development": {
+          "outputPath": "examples/ckan-example"
+        },
+        "production": {}
+      }
+    },
+    "serve": {
+      "executor": "@nrwl/next:server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "ckan-example:build",
+        "dev": true
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "ckan-example:build:development",
+          "dev": true
+        },
+        "production": {
+          "buildTarget": "ckan-example:build:production",
+          "dev": false
+        }
+      }
+    },
+    "export": {
+      "executor": "@nrwl/next:export",
+      "options": {
+        "buildTarget": "ckan-example:build:production"
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "examples/ckan-example/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["examples/ckan-example/**/*.{ts,tsx,js,jsx}"]
+      }
+    }
+  },
+  "tags": []
+}

examples/ckan-ssg/ckan-example/specs/index.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Index from '../pages/index';
+
+describe('Index', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Index />);
+    expect(baseElement).toBeTruthy();
+  });
+});

examples/ckan-ssg/ckan-example/tailwind.config.js

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/typography')
+  ],
+}
+

examples/ckan-ssg/ckan-example/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

examples/ckan-ssg/ckan-example/tsconfig.spec.json

@@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"],
+    "jsx": "react"
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}