[monorepo][m] - simplify examples

examples/ckan-example/.eslintrc.json

@@ -1,6 +1,5 @@
 {
   "extends": [
-    "plugin:@nrwl/nx/react-typescript",
     "next",
     "next/core-web-vitals",
     "../../.eslintrc.json"

examples/ckan-example/README.md

@@ -1,17 +1,46 @@
 This is a repo intended to serve as an example of a data catalog that get its data from a CKAN Instance.
 
-- Creating a new file inside o `examples` with `create-next-app` like so:
 ```
-npx create-next-app <app-name> --example https://github.com/datopian/portaljs/tree/main/ --example-path examples/ckan-example
+npx create-next-app <app-name> --example https://github.com/datopian/portaljs/tree/main/examples/ckan-example
+cd <app-name>
 ```
-- Inside `<app-name>` go to the `project.json` file and replace all instances of `ckan-example` with `<app-name>`
+
-- Set the `DMS` env variable to the Url of the CKAN Instance Ex: `export DMS=https://demo.dev.datopian.com`
+- 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:
+
 ```
-nx serve <app-name>
+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-example/next.config.js

@@ -1,9 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { withNx } = require('@nrwl/next/plugins/with-nx');
-
-/**
- * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
- **/
 const nextConfig = {
   publicRuntimeConfig: {
     DMS: process.env.DMS ? process.env.DMS : '',
@@ -18,11 +12,6 @@ const nextConfig = {
       ],
     };
   },
-  nx: {
-    // Set this to true if you would like to use SVGR
-    // See: https://github.com/gregberge/svgr
-    svgr: false,
-  },
 };
 
-module.exports = withNx(nextConfig);
+module.exports = nextConfig;

examples/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",
+    "@types/node": "18.16.0",
+    "@types/react": "18.0.38",
+    "@types/react-dom": "18.0.11",
+    "eslint": "8.39.0",
+    "eslint-config-next": "13.3.1",
+    "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",
+    "typescript": "5.0.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.23",
+    "tailwindcss": "^3.3.1"
+  }
+}

examples/ckan-example/postcss.config.js

@@ -1,15 +1,6 @@
-const { join } = require('path');
-
-// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
-// option from your application's configuration (i.e. project.json).
-//
-// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
-
 module.exports = {
   plugins: {
-    tailwindcss: {
+    tailwindcss: {},
-      config: join(__dirname, 'tailwind.config.js'),
-    },
     autoprefixer: {},
   },
-};
+}

examples/ckan-example/tailwind.config.js

@@ -1,17 +1,15 @@
-const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');
-const { join } = require('path');
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    join(
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-      __dirname,
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-      '{src,pages,components}/**/*!(*.stories|*.spec).{ts,tsx,html}'
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    ),
-    ...createGlobPatternsForDependencies(__dirname),
   ],
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
-};
+    require('@tailwindcss/typography')
+  ],
+}
+

examples/ckan-example/tsconfig.json

@@ -1,23 +1,20 @@
 {
-  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "jsx": "preserve",
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
-    "esModuleInterop": true,
+    "skipLibCheck": true,
-    "allowSyntheticDefaultImports": true,
     "strict": false,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "incremental": true,
+    "jsx": "preserve",
-    "types": ["jest", "node"]
+    "incremental": true
   },
-  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "next-env.d.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": [
+  "exclude": ["node_modules"]
-    "node_modules",
-    "jest.config.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.ts"
-  ]
 }

examples/simple-example/README.md

@@ -3,7 +3,7 @@ This is a repo intended to serve as a simple example of a data catalog that get
 - Creating a new project with `create-next-app` like so:
 
 ```
-npx create-next-app <app-name> --example https://github.com/datopian/portaljs/tree/main/ --example-path examples/simple-example
+npx create-next-app <app-name> --example https://github.com/datopian/portaljs/tree/main/examples/simple-example
 cd <app-name>
 ```
 
@@ -25,6 +25,12 @@ Congratulations, you now have something similar to this running on `http://local
 If yo go to any one of those pages by clicking on `More info` you will see something similar to this
 ![](https://i.imgur.com/AoJd4O0.png)
 
+## 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%2Fsimple-example)
+
+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.
+
 
 ## Structure of `datasets.json`
 
@@ -52,3 +58,18 @@ You can also add
 
 - A `description` which is useful if you have more than one dataset for each repo, if not provided we are just going to use the repo description
 - A `Name` which is useful if you want to give your dataset a nice name, if not provided we are going to use the junction of the `owner` the `repo` + the path of the README, in the exaple above it will be `fivethirtyeight/data/nba-raptor`
+
+## 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
+```
+

package.json

@@ -4,63 +4,7 @@
   "license": "MIT",
   "scripts": {},
   "private": true,
-  "dependencies": {
+  "dependencies": {},
-    "@apollo/client": "^3.7.11",
-    "@apollo/react-hooks": "^4.0.0",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@flowershow/core": "^0.4.9",
-    "@flowershow/markdowndb": "^0.1.0",
-    "@flowershow/remark-callouts": "^1.0.0",
-    "@flowershow/remark-embed": "^1.0.0",
-    "@flowershow/remark-wiki-link": "^1.0.1",
-    "@headlessui/react": "^1.7.13",
-    "@heroicons/react": "^2.0.17",
-    "@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",
-    "apollo-link": "^1.2.14",
-    "apollo-link-rest": "^0.9.0",
-    "filesize": "^10.0.7",
-    "gray-matter": "^4.0.3",
-    "html-react-parser": "^3.0.15",
-    "markdown-it": "^13.0.1",
-    "next": "^13.2.1",
-    "next-mdx-remote": "^4.4.1",
-    "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",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-markdown": "^8.0.7",
-    "react-next-github-btn": "^1.2.1",
-    "react-plotly.js": "^2.6.0",
-    "react-plotlyjs": "^0.4.4",
-    "react-vega": "^7.6.0",
-    "rehype-autolink-headings": "^6.1.1",
-    "rehype-katex": "^6.0.2",
-    "rehype-prism-plus": "^1.5.1",
-    "rehype-slug": "^5.1.0",
-    "remark-footnotes": "^4.0.1",
-    "remark-gfm": "^3.0.1",
-    "remark-math": "^5.1.1",
-    "remark-slug": "^7.0.1",
-    "remark-smartypants": "^2.0.0",
-    "remark-toc": "^8.0.1",
-    "slugify": "^1.6.6",
-    "timeago.js": "^4.0.2",
-    "tslib": "^2.3.0",
-    "vega": "^5.24.0",
-    "xlsx": "^0.18.5"
-  },
   "devDependencies": {
     "@babel/preset-react": "^7.14.5",
     "@nrwl/cypress": "15.9.2",
@@ -84,7 +28,6 @@
     "@types/react-dom": "18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.36.1",
     "@typescript-eslint/parser": "^5.36.1",
-    "autoprefixer": "10.4.13",
     "babel-jest": "^29.4.1",
     "cypress": "^12.2.0",
     "eslint": "~8.15.0",
@@ -98,11 +41,9 @@
     "jest": "^29.4.1",
     "jest-environment-jsdom": "^29.4.1",
     "nx": "15.9.2",
-    "postcss": "8.4.21",
     "prettier": "^2.6.2",
     "react-test-renderer": "18.2.0",
     "swc-loader": "0.1.15",
-    "tailwindcss": "3.2.7",
     "ts-jest": "^29.0.5",
     "ts-node": "10.9.1",
     "typescript": "~4.9.5"