From 3f350f8fcd9908756da6567c7ec9cca3d23ee3fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Demenech?= Date: Tue, 9 May 2023 19:19:36 -0300 Subject: [PATCH] [#810, github-backed example][xl]: improve looks, improve README, rename from simple-example to github-backed (#864) --- .../.eslintrc.json | 0 examples/github-backed-catalog/README.md | 102 +++++ .../components/_shared/Breadcrumbs.tsx | 20 + .../components/icons/ExternalLinkIcon.tsx | 3 + .../components/icons/HomeIcon.tsx | 3 + .../datasets.json | 0 .../index.d.ts | 0 .../lib/octokit.ts | 0 .../next-env.d.ts | 0 .../next.config.js | 0 .../package-lock.json | 9 + .../package.json | 1 + .../pages/@org/[org]/[...path].tsx | 20 +- .../pages/_app.tsx | 2 +- .../pages/index.tsx | 46 +- .../github-backed-catalog/pages/styles.css | 80 ++++ .../postcss.config.js | 0 .../public/.gitkeep | 0 .../tailwind.config.js | 0 .../tsconfig.json | 0 examples/simple-example/README.md | 75 ---- examples/simple-example/pages/styles.css | 403 ------------------ site/content/docs/examples/example-ckan.md | 2 +- ...ta-catalog.md => github-backed-catalog.md} | 10 +- 24 files changed, 258 insertions(+), 518 deletions(-) rename examples/{simple-example => github-backed-catalog}/.eslintrc.json (100%) create mode 100644 examples/github-backed-catalog/README.md create mode 100644 examples/github-backed-catalog/components/_shared/Breadcrumbs.tsx create mode 100644 examples/github-backed-catalog/components/icons/ExternalLinkIcon.tsx create mode 100644 examples/github-backed-catalog/components/icons/HomeIcon.tsx rename examples/{simple-example => github-backed-catalog}/datasets.json (100%) rename examples/{simple-example => github-backed-catalog}/index.d.ts (100%) rename examples/{simple-example => github-backed-catalog}/lib/octokit.ts (100%) rename examples/{simple-example => github-backed-catalog}/next-env.d.ts (100%) rename examples/{simple-example => github-backed-catalog}/next.config.js (100%) rename examples/{simple-example => github-backed-catalog}/package-lock.json (99%) rename examples/{simple-example => github-backed-catalog}/package.json (95%) rename examples/{simple-example => github-backed-catalog}/pages/@org/[org]/[...path].tsx (83%) rename examples/{simple-example => github-backed-catalog}/pages/_app.tsx (86%) rename examples/{simple-example => github-backed-catalog}/pages/index.tsx (71%) create mode 100644 examples/github-backed-catalog/pages/styles.css rename examples/{simple-example => github-backed-catalog}/postcss.config.js (100%) rename examples/{simple-example => github-backed-catalog}/public/.gitkeep (100%) rename examples/{simple-example => github-backed-catalog}/tailwind.config.js (100%) rename examples/{simple-example => github-backed-catalog}/tsconfig.json (100%) delete mode 100644 examples/simple-example/README.md delete mode 100644 examples/simple-example/pages/styles.css rename site/content/docs/examples/{example-data-catalog.md => github-backed-catalog.md} (88%) diff --git a/examples/simple-example/.eslintrc.json b/examples/github-backed-catalog/.eslintrc.json similarity index 100% rename from examples/simple-example/.eslintrc.json rename to examples/github-backed-catalog/.eslintrc.json diff --git a/examples/github-backed-catalog/README.md b/examples/github-backed-catalog/README.md new file mode 100644 index 00000000..6c67e1ae --- /dev/null +++ b/examples/github-backed-catalog/README.md @@ -0,0 +1,102 @@ +# A data catalog with data on GitHub + +This example showcases a simple data catalog that get its data from a list of GitHub repos that serve as datasets. + +A `datasets.json` file is used to specify which datasets are going to be part of the data catalog. + +The application contains an index page, which lists all the datasets specified in the `datasets.json` file, and users can see more information about each dataset, such as the list of data files in it and the README, by clicking the "info" button on the list. + +You can read more about it on the [Data catalog with data on GitHub](https://portaljs.org/docs/examples/github-backed-catalog) blog post. + +## Demo + +https://example.portaljs.org/ + +## Deploy your own + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdatopian%2Fportaljs%2Ftree%2Fmain%2Fexamples%2Fgithub-backed-catalog) + +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. + +## How to use + +### Install + +Execute `create-next-app` to bootstrap the example: + +``` +npx create-next-app --example https://github.com/datopian/portaljs/tree/main/examples/github-backed-catalog +cd +``` + +### Set environment variables + +This project uses the GitHub API, which for anonymous users will cap at 50 requests per hour, so you might want to get a [Personal Access Token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) and add it to a `.env` file inside the folder like so + +``` +GITHUB_PAT= +``` + +### Change datasets + +You can change the datasets that will be displayed in the data catalog by editing the file `datasets.json`. Some examples can be found inside [this repo](https://github.com/datasets). + +### Run in development mode + +Run the app using: + +``` +npm run dev +``` + +Open http://localhost:3000 from your browser. You should see something similar to this: + +![](https://i.imgur.com/jAljJ9C.png) + +If click on the `info` button for a dataset you will see a page similar to this: + +![](https://i.imgur.com/AoJd4O0.png) + +## Notes + +### Structure of `datasets.json` + +The `datasets.json` file is simply a list of datasets, below you can see a minimal example of a dataset: + +```json +{ + "owner": "fivethirtyeight", + "repo": "data", + "branch": "master", + "files": ["nba-raptor/historical_RAPTOR_by_player.csv", "nba-raptor/historical_RAPTOR_by_team.csv"], + "readme": "nba-raptor/README.md" +} +``` + +It has: + +- A `owner` which is going to be the github repo owner +- A `repo` which is going to be the github repo name +- A `branch` which is going to be the branch to which we need to get the files and the readme +- A list of `files` which is going to be a list of paths with files that you want to show to the world +- A `readme` which is going to be the path to your data description, it can also be a subpath eg: `example/README.md` + +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 the production build with: + +``` +npm run start +``` + diff --git a/examples/github-backed-catalog/components/_shared/Breadcrumbs.tsx b/examples/github-backed-catalog/components/_shared/Breadcrumbs.tsx new file mode 100644 index 00000000..8d903fe7 --- /dev/null +++ b/examples/github-backed-catalog/components/_shared/Breadcrumbs.tsx @@ -0,0 +1,20 @@ +import Link from "next/link"; +import HomeIcon from "../icons/HomeIcon"; + +export default function Breadcrumbs({ links }: { links: { title: string, href?: string, target?: string }[] }) { + const current = links.at(-1); + + return
+ + + {/* {links.length > 1 && links.slice(0, -1).map((link) => { + return <> + / + {link.title} + + })} */} + + / + {current.title} +
+} \ No newline at end of file diff --git a/examples/github-backed-catalog/components/icons/ExternalLinkIcon.tsx b/examples/github-backed-catalog/components/icons/ExternalLinkIcon.tsx new file mode 100644 index 00000000..8437b7f0 --- /dev/null +++ b/examples/github-backed-catalog/components/icons/ExternalLinkIcon.tsx @@ -0,0 +1,3 @@ +export default function ExternalLinkIcon({ className = "" }) { + return
+} \ No newline at end of file diff --git a/examples/github-backed-catalog/components/icons/HomeIcon.tsx b/examples/github-backed-catalog/components/icons/HomeIcon.tsx new file mode 100644 index 00000000..f99c396b --- /dev/null +++ b/examples/github-backed-catalog/components/icons/HomeIcon.tsx @@ -0,0 +1,3 @@ +export default function HomeIcon({ className = "" }) { + return
+} \ No newline at end of file diff --git a/examples/simple-example/datasets.json b/examples/github-backed-catalog/datasets.json similarity index 100% rename from examples/simple-example/datasets.json rename to examples/github-backed-catalog/datasets.json diff --git a/examples/simple-example/index.d.ts b/examples/github-backed-catalog/index.d.ts similarity index 100% rename from examples/simple-example/index.d.ts rename to examples/github-backed-catalog/index.d.ts diff --git a/examples/simple-example/lib/octokit.ts b/examples/github-backed-catalog/lib/octokit.ts similarity index 100% rename from examples/simple-example/lib/octokit.ts rename to examples/github-backed-catalog/lib/octokit.ts diff --git a/examples/simple-example/next-env.d.ts b/examples/github-backed-catalog/next-env.d.ts similarity index 100% rename from examples/simple-example/next-env.d.ts rename to examples/github-backed-catalog/next-env.d.ts diff --git a/examples/simple-example/next.config.js b/examples/github-backed-catalog/next.config.js similarity index 100% rename from examples/simple-example/next.config.js rename to examples/github-backed-catalog/next.config.js diff --git a/examples/simple-example/package-lock.json b/examples/github-backed-catalog/package-lock.json similarity index 99% rename from examples/simple-example/package-lock.json rename to examples/github-backed-catalog/package-lock.json index 73ec3d81..c353dadd 100644 --- a/examples/simple-example/package-lock.json +++ b/examples/github-backed-catalog/package-lock.json @@ -19,6 +19,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-markdown": "^8.0.7", + "react-timeago": "^7.1.0", "remark-gfm": "^3.0.1", "typescript": "5.0.4" }, @@ -4797,6 +4798,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, + "node_modules/react-timeago": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/react-timeago/-/react-timeago-7.1.0.tgz", + "integrity": "sha512-rouF7MiEm55fH791Y8cg+VobIJgx8gtNJ+gjr86R4ZqO1WKPkXiXjdT/lRzrvEkUzsxT1exHqV2V+Zdi114H3A==", + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/examples/simple-example/package.json b/examples/github-backed-catalog/package.json similarity index 95% rename from examples/simple-example/package.json rename to examples/github-backed-catalog/package.json index c50cd8e9..3b2097cd 100644 --- a/examples/simple-example/package.json +++ b/examples/github-backed-catalog/package.json @@ -20,6 +20,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-markdown": "^8.0.7", + "react-timeago": "^7.1.0", "remark-gfm": "^3.0.1", "typescript": "5.0.4" }, diff --git a/examples/simple-example/pages/@org/[org]/[...path].tsx b/examples/github-backed-catalog/pages/@org/[org]/[...path].tsx similarity index 83% rename from examples/simple-example/pages/@org/[org]/[...path].tsx rename to examples/github-backed-catalog/pages/@org/[org]/[...path].tsx index c35815ce..e29a9bc6 100644 --- a/examples/simple-example/pages/@org/[org]/[...path].tsx +++ b/examples/github-backed-catalog/pages/@org/[org]/[...path].tsx @@ -1,6 +1,3 @@ -import Head from 'next/head'; -import { useRouter } from 'next/router'; - import { NextSeo } from 'next-seo'; import { promises as fs } from 'fs'; import path from 'path'; @@ -8,15 +5,20 @@ import getConfig from 'next/config'; import { getProject, GithubProject } from '../../../lib/octokit'; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; -import Link from 'next/link'; +import Breadcrumbs from '../../../components/_shared/Breadcrumbs'; export default function ProjectPage({ project }) { + const repoId = `@${project.repo_config.owner}/${project.repo_config.repo}` + return ( <> - +
- Back to homepage -

Data

+ +

{project.repo_config.name || repoId}

+

Repository: {project.html_url}

+ +

Files

@@ -50,7 +52,9 @@ export default function ProjectPage({ project }) {
-

Readme

+
+ +

Readme

{project.readmeContent} diff --git a/examples/simple-example/pages/_app.tsx b/examples/github-backed-catalog/pages/_app.tsx similarity index 86% rename from examples/simple-example/pages/_app.tsx rename to examples/github-backed-catalog/pages/_app.tsx index e0bf2912..b14578b1 100644 --- a/examples/simple-example/pages/_app.tsx +++ b/examples/github-backed-catalog/pages/_app.tsx @@ -6,7 +6,7 @@ function CustomApp({ Component, pageProps }: AppProps) { return ( <> - Welcome to simple-example! + GitHub Datasets
diff --git a/examples/simple-example/pages/index.tsx b/examples/github-backed-catalog/pages/index.tsx similarity index 71% rename from examples/simple-example/pages/index.tsx rename to examples/github-backed-catalog/pages/index.tsx index 2517196f..796edefe 100644 --- a/examples/simple-example/pages/index.tsx +++ b/examples/github-backed-catalog/pages/index.tsx @@ -2,6 +2,9 @@ import { promises as fs } from 'fs'; import path from 'path'; import { getProject } from '../lib/octokit'; import getConfig from 'next/config'; +import ExternalLinkIcon from '../components/icons/ExternalLinkIcon'; +import TimeAgo from 'react-timeago'; +import Link from 'next/link'; export async function getStaticProps() { const jsonDirectory = path.join( @@ -24,26 +27,18 @@ 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 }) { return ( -
+
-

- My Datasets -

-

- Here is a list of all my datasets for easy access and sharing -

+
+

+ GitHub Datasets +

+

+ Data catalog with datasets hosted on GitHub by 🌀 PortalJS +

+
@@ -60,7 +55,7 @@ export function Datasets({ projects }) { scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900" > - Repo + Repository {projects.map((project) => ( - + {project.repo_config.name ? project.repo_config.name : project.full_name + (project.base_path === '/' ? '' : '/' + project.base_path)} - - {project.full_name} + + @{project.full_name} {project.repo_config.description ? project.repo_config.description : project.description} - - {formatter.format(new Date(project.last_updated))} + + - + - More info + info diff --git a/examples/github-backed-catalog/pages/styles.css b/examples/github-backed-catalog/pages/styles.css new file mode 100644 index 00000000..2003edb6 --- /dev/null +++ b/examples/github-backed-catalog/pages/styles.css @@ -0,0 +1,80 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; +html { + -webkit-text-size-adjust: 100%; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, + Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + line-height: 1.5; + tab-size: 4; + scroll-behavior: smooth; +} +body { + font-family: inherit; + line-height: inherit; + margin: 0; +} +h1, +h2, +p, +pre { + margin: 0; +} +*, +::before, +::after { + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: currentColor; +} +h1, +h2 { + font-size: inherit; + font-weight: inherit; +} +a { + color: inherit; + text-decoration: inherit; +} +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + Liberation Mono, Courier New, monospace; +} +svg { + display: block; + vertical-align: middle; + shape-rendering: auto; + text-rendering: optimizeLegibility; +} +pre { + background-color: rgba(55, 65, 81, 1); + border-radius: 0.25rem; + color: rgba(229, 231, 235, 1); + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + Liberation Mono, Courier New, monospace; + overflow: scroll; + padding: 0.5rem 0.75rem; +} + +.shadow { + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} +.rounded { + border-radius: 1.5rem; +} +.wrapper { + width: 100%; +} +.container { + margin-left: auto; + margin-right: auto; + max-width: 768px; + padding-bottom: 3rem; + padding-left: 1rem; + padding-right: 1rem; + color: rgba(55, 65, 81, 1); + width: 100%; +} diff --git a/examples/simple-example/postcss.config.js b/examples/github-backed-catalog/postcss.config.js similarity index 100% rename from examples/simple-example/postcss.config.js rename to examples/github-backed-catalog/postcss.config.js diff --git a/examples/simple-example/public/.gitkeep b/examples/github-backed-catalog/public/.gitkeep similarity index 100% rename from examples/simple-example/public/.gitkeep rename to examples/github-backed-catalog/public/.gitkeep diff --git a/examples/simple-example/tailwind.config.js b/examples/github-backed-catalog/tailwind.config.js similarity index 100% rename from examples/simple-example/tailwind.config.js rename to examples/github-backed-catalog/tailwind.config.js diff --git a/examples/simple-example/tsconfig.json b/examples/github-backed-catalog/tsconfig.json similarity index 100% rename from examples/simple-example/tsconfig.json rename to examples/github-backed-catalog/tsconfig.json diff --git a/examples/simple-example/README.md b/examples/simple-example/README.md deleted file mode 100644 index 4ba3addf..00000000 --- a/examples/simple-example/README.md +++ /dev/null @@ -1,75 +0,0 @@ -This is a repo intended to serve as a simple example of a data catalog that get its data from a series of github repos, you can init an example just like this one by. - -- Creating a new project with `create-next-app` like so: - -``` -npx create-next-app --example https://github.com/datopian/portaljs/tree/main/examples/simple-example -cd -``` - -- This project uses the github api, which for anonymous users will cap at 50 requests per hour, so you might want to get a [Personal Access Token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) and add it to a `.env` file inside the folder like so - -``` -GITHUB_PAT= -``` - -- Edit the file `datasets.json` to your liking, some examples can be found inside this [repo](https://github.com/datasets) -- Run the app using: - -``` -npm run dev -``` - -Congratulations, you now have something similar to this running on `http://localhost:3000` -![](https://i.imgur.com/jAljJ9C.png) -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` - -The `datasets.json` file is simply a list of datasets, below you can see a minimal example of a dataset - -```json -{ - "owner": "fivethirtyeight", - "repo": "data", - "branch": "master", - "files": ["nba-raptor/historical_RAPTOR_by_player.csv", "nba-raptor/historical_RAPTOR_by_team.csv"], - "readme": "nba-raptor/README.md" -} -``` - -It has - -- A `owner` which is going to be the github repo owner -- A `repo` which is going to be the github repo name -- A `branch` which is going to be the branch to which we need to get the files and the readme -- A list of `files` which is going to be a list of paths with files that you want to show to the world -- A `readme` which is going to be the path to your data description, it can also be a subpath eg: `example/README.md` - -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 -``` - diff --git a/examples/simple-example/pages/styles.css b/examples/simple-example/pages/styles.css deleted file mode 100644 index f2e5d174..00000000 --- a/examples/simple-example/pages/styles.css +++ /dev/null @@ -1,403 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; -html { - -webkit-text-size-adjust: 100%; - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, - Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, - Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; - line-height: 1.5; - tab-size: 4; - scroll-behavior: smooth; -} -body { - font-family: inherit; - line-height: inherit; - margin: 0; -} -h1, -h2, -p, -pre { - margin: 0; -} -*, -::before, -::after { - box-sizing: border-box; - border-width: 0; - border-style: solid; - border-color: currentColor; -} -h1, -h2 { - font-size: inherit; - font-weight: inherit; -} -a { - color: inherit; - text-decoration: inherit; -} -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, - Liberation Mono, Courier New, monospace; -} -svg { - display: block; - vertical-align: middle; - shape-rendering: auto; - text-rendering: optimizeLegibility; -} -pre { - background-color: rgba(55, 65, 81, 1); - border-radius: 0.25rem; - color: rgba(229, 231, 235, 1); - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, - Liberation Mono, Courier New, monospace; - overflow: scroll; - padding: 0.5rem 0.75rem; -} - -.shadow { - box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), - 0 4px 6px -2px rgba(0, 0, 0, 0.05); -} -.rounded { - border-radius: 1.5rem; -} -.wrapper { - width: 100%; -} -.container { - margin-left: auto; - margin-right: auto; - max-width: 768px; - padding-bottom: 3rem; - padding-left: 1rem; - padding-right: 1rem; - color: rgba(55, 65, 81, 1); - width: 100%; -} -#welcome { - margin-top: 2.5rem; -} -#welcome h1 { - font-size: 3rem; - font-weight: 500; - letter-spacing: -0.025em; - line-height: 1; -} -#welcome span { - display: block; - font-size: 1.875rem; - font-weight: 300; - line-height: 2.25rem; - margin-bottom: 0.5rem; -} -#hero { - align-items: center; - background-color: hsla(214, 62%, 21%, 1); - border: none; - box-sizing: border-box; - color: rgba(55, 65, 81, 1); - display: grid; - grid-template-columns: 1fr; - margin-top: 3.5rem; -} -#hero .text-container { - color: rgba(255, 255, 255, 1); - padding: 3rem 2rem; -} -#hero .text-container h2 { - font-size: 1.5rem; - line-height: 2rem; - position: relative; -} -#hero .text-container h2 svg { - color: hsla(162, 47%, 50%, 1); - height: 2rem; - left: -0.25rem; - position: absolute; - top: 0; - width: 2rem; -} -#hero .text-container h2 span { - margin-left: 2.5rem; -} -#hero .text-container a { - background-color: rgba(255, 255, 255, 1); - border-radius: 0.75rem; - color: rgba(55, 65, 81, 1); - display: inline-block; - margin-top: 1.5rem; - padding: 1rem 2rem; - text-decoration: inherit; -} -#hero .logo-container { - display: none; - justify-content: center; - padding-left: 2rem; - padding-right: 2rem; -} -#hero .logo-container svg { - color: rgba(255, 255, 255, 1); - width: 66.666667%; -} -#middle-content { - align-items: flex-start; - display: grid; - gap: 4rem; - grid-template-columns: 1fr; - margin-top: 3.5rem; -} -#learning-materials { - padding: 2.5rem 2rem; -} -#learning-materials h2 { - font-weight: 500; - font-size: 1.25rem; - letter-spacing: -0.025em; - line-height: 1.75rem; - padding-left: 1rem; - padding-right: 1rem; -} -.list-item-link { - align-items: center; - border-radius: 0.75rem; - display: flex; - margin-top: 1rem; - padding: 1rem; - transition-property: background-color, border-color, color, fill, stroke, - opacity, box-shadow, transform, filter, backdrop-filter, - -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; - width: 100%; -} -.list-item-link svg:first-child { - margin-right: 1rem; - height: 1.5rem; - transition-property: background-color, border-color, color, fill, stroke, - opacity, box-shadow, transform, filter, backdrop-filter, - -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; - width: 1.5rem; -} -.list-item-link > span { - flex-grow: 1; - font-weight: 400; - transition-property: background-color, border-color, color, fill, stroke, - opacity, box-shadow, transform, filter, backdrop-filter, - -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} -.list-item-link > span > span { - color: rgba(107, 114, 128, 1); - display: block; - flex-grow: 1; - font-size: 0.75rem; - font-weight: 300; - line-height: 1rem; - transition-property: background-color, border-color, color, fill, stroke, - opacity, box-shadow, transform, filter, backdrop-filter, - -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} -.list-item-link svg:last-child { - height: 1rem; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; - width: 1rem; -} -.list-item-link:hover { - color: rgba(255, 255, 255, 1); - background-color: hsla(162, 47%, 50%, 1); -} -.list-item-link:hover > span { -} -.list-item-link:hover > span > span { - color: rgba(243, 244, 246, 1); -} -.list-item-link:hover svg:last-child { - transform: translateX(0.25rem); -} -#other-links { -} -.button-pill { - padding: 1.5rem 2rem; - transition-duration: 300ms; - transition-property: background-color, border-color, color, fill, stroke, - opacity, box-shadow, transform, filter, backdrop-filter, - -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - align-items: center; - display: flex; -} -.button-pill svg { - transition-property: background-color, border-color, color, fill, stroke, - opacity, box-shadow, transform, filter, backdrop-filter, - -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; - flex-shrink: 0; - width: 3rem; -} -.button-pill > span { - letter-spacing: -0.025em; - font-weight: 400; - font-size: 1.125rem; - line-height: 1.75rem; - padding-left: 1rem; - padding-right: 1rem; -} -.button-pill span span { - display: block; - font-size: 0.875rem; - font-weight: 300; - line-height: 1.25rem; -} -.button-pill:hover svg, -.button-pill:hover { - color: rgba(255, 255, 255, 1) !important; -} -#nx-console:hover { - background-color: rgba(0, 122, 204, 1); -} -#nx-console svg { - color: rgba(0, 122, 204, 1); -} -#nx-repo:hover { - background-color: rgba(24, 23, 23, 1); -} -#nx-repo svg { - color: rgba(24, 23, 23, 1); -} -#nx-cloud { - margin-bottom: 2rem; - margin-top: 2rem; - padding: 2.5rem 2rem; -} -#nx-cloud > div { - align-items: center; - display: flex; -} -#nx-cloud > div svg { - border-radius: 0.375rem; - flex-shrink: 0; - width: 3rem; -} -#nx-cloud > div h2 { - font-size: 1.125rem; - font-weight: 400; - letter-spacing: -0.025em; - line-height: 1.75rem; - padding-left: 1rem; - padding-right: 1rem; -} -#nx-cloud > div h2 span { - display: block; - font-size: 0.875rem; - font-weight: 300; - line-height: 1.25rem; -} -#nx-cloud p { - font-size: 1rem; - line-height: 1.5rem; - margin-top: 1rem; -} -#nx-cloud pre { - margin-top: 1rem; -} -#nx-cloud a { - color: rgba(107, 114, 128, 1); - display: block; - font-size: 0.875rem; - line-height: 1.25rem; - margin-top: 1.5rem; - text-align: right; -} -#nx-cloud a:hover { - text-decoration: underline; -} -#commands { - padding: 2.5rem 2rem; - margin-top: 3.5rem; -} -#commands h2 { - font-size: 1.25rem; - font-weight: 400; - letter-spacing: -0.025em; - line-height: 1.75rem; - padding-left: 1rem; - padding-right: 1rem; -} -#commands p { - font-size: 1rem; - font-weight: 300; - line-height: 1.5rem; - margin-top: 1rem; - padding-left: 1rem; - padding-right: 1rem; -} -details { - align-items: center; - display: flex; - margin-top: 1rem; - padding-left: 1rem; - padding-right: 1rem; - width: 100%; -} -details pre > span { - color: rgba(181, 181, 181, 1); - display: block; -} -summary { - border-radius: 0.5rem; - display: flex; - font-weight: 400; - padding: 0.5rem; - cursor: pointer; - transition-property: background-color, border-color, color, fill, stroke, - opacity, box-shadow, transform, filter, backdrop-filter, - -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} -summary:hover { - background-color: rgba(243, 244, 246, 1); -} -summary svg { - height: 1.5rem; - margin-right: 1rem; - width: 1.5rem; -} -#love { - color: rgba(107, 114, 128, 1); - font-size: 0.875rem; - line-height: 1.25rem; - margin-top: 3.5rem; - opacity: 0.6; - text-align: center; -} -#love svg { - color: rgba(252, 165, 165, 1); - width: 1.25rem; - height: 1.25rem; - display: inline; - margin-top: -0.25rem; -} -@media screen and (min-width: 768px) { - #hero { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - #hero .logo-container { - display: flex; - } - #middle-content { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } -} diff --git a/site/content/docs/examples/example-ckan.md b/site/content/docs/examples/example-ckan.md index dababf8b..0822c8a5 100644 --- a/site/content/docs/examples/example-ckan.md +++ b/site/content/docs/examples/example-ckan.md @@ -1,5 +1,5 @@ --- -title: "Example: Data catalog with data coming from CKAN" +title: "Example: Data catalog with data on CKAN" authors: ['Luccas Mateus'] date: 2023-04-20 filetype: blog diff --git a/site/content/docs/examples/example-data-catalog.md b/site/content/docs/examples/github-backed-catalog.md similarity index 88% rename from site/content/docs/examples/example-data-catalog.md rename to site/content/docs/examples/github-backed-catalog.md index b5b3017a..de09da3a 100644 --- a/site/content/docs/examples/example-data-catalog.md +++ b/site/content/docs/examples/github-backed-catalog.md @@ -1,11 +1,11 @@ --- -title: "Example: Simple data catalog" +title: "Example: Data catalog with data on GitHub" authors: ['Luccas Mateus'] date: 2023-04-20 filetype: blog --- -The simple-example added to PortalJS is intended to provide users with an easy way to set up a data catalog that can be used to display and share data stores stored in GitHub repositories. With this example, users can quickly set up a web-based portal that allows them to showcase their data and make it accessible to others, all this being done thru the configuration of a simple `datasets.json` file. +The github-backed example added to PortalJS is intended to provide users with an easy way to set up a data catalog that can be used to display and share data stored in GitHub repositories. With this example, users can quickly set up a web-based portal that allows them to showcase their data and make it accessible to others, all this being done thru the configuration of a simple `datasets.json` file. ## Demo @@ -25,7 +25,7 @@ Below are some screenshots: - Create a new app with `create-next-app`: ``` -npx create-next-app --example https://github.com/datopian/portaljs/tree/main/examples/simple-example +npx create-next-app --example https://github.com/datopian/portaljs/tree/main/examples/github-backed-catalog cd ``` @@ -46,7 +46,7 @@ Congratulations, you now have something similar to this running on `http://local ## 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) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdatopian%2Fportaljs%2Ftree%2Fmain%2Fexamples%2Fgithub-backed-catalog) 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. @@ -94,5 +94,5 @@ npm run start ## Links -- [Repo](https://github.com/datopian/portaljs/tree/main/examples/simple-example) +- [Repo](https://github.com/datopian/portaljs/tree/main/examples/github-backed-catalog) - [Live Demo](https://example.portaljs.org)