From 7039564187340c13b55b028b7fec82a600fadebb Mon Sep 17 00:00:00 2001 From: deme Date: Fri, 21 Apr 2023 14:44:53 -0300 Subject: [PATCH 1/4] [#781,blog][s]: /blog will now list files in content/docs when filetype is equal to 'blog' --- site/pages/blog.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/site/pages/blog.tsx b/site/pages/blog.tsx index ed375f7c..2926534a 100644 --- a/site/pages/blog.tsx +++ b/site/pages/blog.tsx @@ -21,6 +21,17 @@ export async function getStaticProps() { extensions: ['md', 'mdx'], }); + // Temporary, while MarkdownDB doesn't support filetypes + // Merges docs that have the "blog" filetype + let docs = await mddb.getFiles({ + folder: 'docs', + extensions: ['md', 'mdx'], + }); + + docs = docs.filter((doc) => doc.metadata.filetype === 'blog'); + + blogs = [...blogs, ...docs]; + const blogsSorted = blogs.sort( (a, b) => new Date(b.metadata.date).getTime() - new Date(a.metadata.date).getTime() From 23a0420fcbf2ead8bedd8efe3901428e6949b904 Mon Sep 17 00:00:00 2001 From: deme Date: Fri, 21 Apr 2023 14:49:11 -0300 Subject: [PATCH 2/4] [website,#778][xs]: learn page removed --- site/content/config.js | 1 - site/content/learn.md | 95 ------------------------------------------ 2 files changed, 96 deletions(-) delete mode 100644 site/content/learn.md diff --git a/site/content/config.js b/site/content/config.js index 26109ef5..09ab5486 100644 --- a/site/content/config.js +++ b/site/content/config.js @@ -18,7 +18,6 @@ const config = { navLinks: [ { name: "Docs", href: "/docs" }, { name: "Components", href: "/docs/components" }, - { name: "Learn", href: "/learn" }, { name: "Blog", href: "/blog" }, // { name: "Gallery", href: "/gallery" }, // { name: "Data Literate", href: "/data-literate" }, diff --git a/site/content/learn.md b/site/content/learn.md deleted file mode 100644 index 217adc5d..00000000 --- a/site/content/learn.md +++ /dev/null @@ -1,95 +0,0 @@ -# Getting Started - -It's no secret that creating data portals and data-driven applications can be quite complex nowadays. Fortunately, there are some projects available which simplify things and help you build platforms faster. - -[CKAN](https://ckan.org/), [Jupyter](https://jupyter.org/) and other tools are very good examples of that. - -Even still, there's a high learning curve before you can build a proper application. That's because you need to learn about Python, templating, data loading and so on. If you'd like to integrate content or rich visualizations things are even more complex. - -**So, we need something simple but customizable.** - -Think about how apps are created as a frontend developer. You create some files, write some code, load some data and then simply deploy it. We don't have to worry about Docker, Kubernetes, data storage, Postgres etc. - -That's exactly what we do with Portal.js. Built in pure Javascript and React on top of the awesome Next.js framework. Here are some the cool features Portal.js brings to the table: - -- 🗺️ Unified sites: present data and content in one seamless site, pulling datasets from a DMS (e.g. CKAN) and content from a CMS (e.g. wordpress) -- 👩‍💻 Developer friendly: built with familiar frontend tech Javascript, React etc -- 🔋 Batteries included: Full set of presentation and portal components out of the box e.g. data tables, graphs, maps plus catalog search, dataset showcase, blog etc. -- 🎨 Easy to theme and customize: installable themes, use standard CSS and React+CSS tooling. Add new routes quickly. -- 🧱 Extensible: quickly extend and develop/import your own React components -- 📝 Well documented: full set of documentation plus the documentation of NextJS and Apollo. -- 🚀 Built on NextJS framework: so everything in NextJS for free React, SSR, static site generation, huge number of examples and integrations etc. - - SSR => unlimited number of pages, SEO etc whilst still using React. - - Static Site Generation (SSG) (good for small sites) => ultra-simple deployment, great performance and lighthouse scores etc - -Sounds great, right? Let's give it a try. - -> This tutorial assumes basic knowledge of JavaScript, React and Nextjs. If you are not familiar with React or Nextjs, it is advisable to learn them first. We provide some links below to get you started: -> -> * [Learn NextJS](https://nextjs.org/docs/getting-started) -> * [Getting started with React](https://reactjs.org/docs/getting-started.html#learn-react) - -## Create a Portal.JS app - -### Setup - -First, let’s make sure that your development environment is ready. - -* If you don’t have Node.js installed, [install it from here](https://nodejs.org/en/). You’ll need Node.js version 10.13 or later. -* You’ll be using your own text editor and terminal app for this tutorial. - -If you are on Windows, we recommend downloading Git for Windows and use Git Bash that comes with it, which supports the UNIX-specific commands in this tutorial. Windows Subsystem for Linux (WSL) is another option. - -### Create a Portal.js App - -To create a Portal.js app, open your terminal, cd into the directory you’d like to create the app in, and run the following command: - -``` -npx create-next-app portaljs-dataset --use-npm --example "https://github.com/datopian/portal.js/tree/main/examples/default" -``` - -### Run the development server - -You now have a new directory called portaljs-dataset. Let’s cd into it: - -``` -cd portaljs-dataset -``` - -Then, run the following command: - -``` -npm run dev -``` - -This starts your Portal.js app’s "development server" (more on this later) on port 3000. - -Let’s check to see if it’s working. Open http://localhost:3000 from your browser and you should see the following page: - -![Portal.js screen](/portaljs-screen.png) - -### Edit the page - -Portal.js app is a Next.js/React.js based project. To edit the page follow these steps: - -1. Open the project in your text editor. -2. Go to `/pages/index.js` file. -3. Find the `h2` tag with text that says **"Yay, the portal is open 🌀"** and change it to **"Hello World!"**. -4. Save the file. - -Once you've changed the file and saved it, the page on `localhost:3000` should update: - -![Portal.js screen update](/portaljs-screen-update.png) - -We won't dive into details of how to edit the pages as our focus is presenting data. To learn more about how to use Next.js and/or React, please visit the following sites: - -* [Learn NextJS](https://nextjs.org/docs/getting-started) -* [Getting started with React](https://reactjs.org/docs/getting-started.html#learn-react) - -## Next steps - -* [Presenting a dataset]() -* [Putting your portal online]() - * Deploy to GitHub Pages - [learn/deploy-to-gh-pages](/learn/deploy-to-gh-pages). -* Learn how to build a portal for a single frictionless dataset - [learn/single-frictionless-dataset](/learn/single-frictionless-dataset). -* Learn how to use Portal.js as a frontend for CKAN - [learn/ckan](/learn/ckan). \ No newline at end of file From 22b916ea376f8ef7c5447483e07621bb95de4e31 Mon Sep 17 00:00:00 2001 From: deme Date: Fri, 21 Apr 2023 14:50:03 -0300 Subject: [PATCH 3/4] [website,#778][xs]: remove learn content folder --- site/content/learn/ckan.md | 218 --------------- site/content/learn/deploy-to-gh-pages.md | 251 ------------------ .../learn/single-frictionless-dataset.md | 32 --- 3 files changed, 501 deletions(-) delete mode 100644 site/content/learn/ckan.md delete mode 100644 site/content/learn/deploy-to-gh-pages.md delete mode 100644 site/content/learn/single-frictionless-dataset.md diff --git a/site/content/learn/ckan.md b/site/content/learn/ckan.md deleted file mode 100644 index 39df75ac..00000000 --- a/site/content/learn/ckan.md +++ /dev/null @@ -1,218 +0,0 @@ -Live DEMOs: - -- https://catalog-portal-js.vercel.app -- https://ckan-enterprise-frontend.vercel.app/ - -## Create a Portal app for CKAN - -To create a Portal app, run the following command in your terminal: - -```console -npx create-next-app -e https://github.com/datopian/portal.js/tree/main/examples/ckan -``` - -> NB: Under the hood, this uses the tool called create-next-app, which bootstraps an app for you based on our CKAN example. - -## Guide - -### Styling 🎨 - -We use Tailwind as a CSS framework. Take a look at `/styles/globals.css` to see what we're importing from Tailwind bundle. You can also configure Tailwind using `tailwind.config.js` file. - -Have a look at Next.js support of CSS and ways of writing CSS: - -https://nextjs.org/docs/basic-features/built-in-css-support - -### Backend - -So far the app is running with mocked data behind. You can connect CMS and DMS backends easily via environment variables: - -```console -$ export DMS=http://ckan:5000 -$ export CMS=http://myblog.wordpress.com -``` - -> Note that we don't yet have implementations for the following CKAN features: -> -> - Activities -> - Auth -> - Groups -> - Facets - -### Routes - -These are the default routes set up in the "starter" app. - -- Home `/` -- Search `/search` -- Dataset `/@org/dataset` -- Resource `/@org/dataset/r/resource` -- Organization `/@org` -- Collection (aka group in CKAN) (?) - suggest to merge into org -- Static pages, eg, `/about` etc. from CMS or can do it without external CMS, e.g., in Next.js. - -### New Routes - -You can create new routes in `/pages` directory where each file is associated with a route based on its name. We suggest using [Next.JS docs][] for more detailed information. - -[next.js docs]: https://nextjs.org/docs/basic-features/pages - -### Data fetching - -We use Apollo client which allows us to query data with GraphQL. We have setup CKAN API for the demo (it uses demo.ckan.org as DMS): - -http://portal.datopian1.now.sh/ - -Note that we don't have Apollo Server but we connect CKAN API using [`apollo-link-rest`](https://www.apollographql.com/docs/link/links/rest/) module. You can see how it works in [lib/apolloClient.ts](https://github.com/datopian/portal/blob/master/lib/apolloClient.ts) and then have a look at [pages/\_app.tsx](https://github.com/datopian/portal/blob/master/pages/_app.tsx). - -For development/debugging purposes, we suggest installing the Chrome extension - https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm. - -### I18n configuration - -Portal.js is configured by default to support both `English` and `French` subpath for language translation. But for subsequent users, this following steps can be used to configure i18n for other languages; - -1. Update `next.config.js`, to add more languages to the i18n locales - -```js -i18n: { - locales: ['en', 'fr', 'nl-NL'], // add more language to the list - defaultLocale: 'en', // set the default language to use -}, -``` - -2. Create a folder for the language in `locales` --> `locales/en-Us` - -3. In the language folder, different namespace files (json) can be created for each translation. For the `index.js` use-case, I named it `common.json` - -```json -// locales/en/common.json -{ - "title" : "Portal js in English", -} - -// locales/fr/common.json -{ - "title" : "Portal js in French", -} -``` - -4. To use on pages using Server-side Props. - -```js -import { loadNamespaces } from './_app'; -import useTranslation from 'next-translate/useTranslation'; - -const Home: React.FC = ()=> { - const { t } = useTranslation(); - return ( -
{t(`common:title`)}
// we use common and title base on the common.json data - ); -}; - -export const getServerSideProps: GetServerSideProps = async ({ locale }) => { - ........ ........ - return { - props : { - _ns: await loadNamespaces(['common'], locale), - } - }; -}; - -``` - -5. Go to the browser and view the changes using language subpath like this `http://localhost:3000` and `http://localhost:3000/fr`. **Note** The subpath also activate chrome language Translator - -### Pre-fetch data in the server-side - -When visiting a dataset page, you may want to fetch the dataset metadata in the server-side. To do so, you can use `getServerSideProps` function from NextJS: - -```javascript -import { GetServerSideProps } from 'next'; -import { initializeApollo } from '../lib/apolloClient'; -import gql from 'graphql-tag'; - -const QUERY = gql` - query dataset($id: String) { - dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") { - result - } - } -`; - -... - -export const getServerSideProps: GetServerSideProps = async (context) => { - const apolloClient = initializeApollo(); - - await apolloClient.query({ - query: QUERY, - variables: { - id: 'my-dataset' - }, - }); - - return { - props: { - initialApolloState: apolloClient.cache.extract(), - }, - }; -}; -``` - -This would fetch the data from DMS and save it in the Apollo cache so that we can query it again from the components. - -### Access data from a component - -Consider situation when rendering a component for org info on the dataset page. We already have pre-fetched dataset metadata that includes `organization` property with attributes such as `name`, `title` etc. We can now query only organization part for our `Org` component: - -```javascript -import { useQuery } from '@apollo/react-hooks'; -import gql from 'graphql-tag'; - -export const GET_ORG_QUERY = gql` - query dataset($id: String) { - dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") { - result { - organization { - name - title - image_url - } - } - } - } -`; - -export default function Org({ variables }) { - const { loading, error, data } = useQuery( - GET_ORG_QUERY, - { - variables: { id: 'my-dataset' } - } - ); - - ... - - const { organization } = data.dataset.result; - - return ( - <> - {organization ? ( - <> - - - {organization.title || organization.name} - - - ) : ( - '' - )} - - ); -} -``` diff --git a/site/content/learn/deploy-to-gh-pages.md b/site/content/learn/deploy-to-gh-pages.md deleted file mode 100644 index 36a6319c..00000000 --- a/site/content/learn/deploy-to-gh-pages.md +++ /dev/null @@ -1,251 +0,0 @@ -# Deploying data on Github using Portal.js and Github pages ---- -**Use Case:** ---- -You have some data in a Github repo and you'd like to deploy it online using "portal" so that it is easy for others to view, explore and use. ---- -Here we show how you can use portal.js plus github actions to deploy your dataset in minutes and keep it updated as you make changes. - -The example focuses on the case of a [Frictionless dataset][fd] but it works for any dataset type supported by portal.js. - -We provide three options on how to do this and recommend using the first one unless you really want to get hands on: - -* Deploying datasets automatically by setting up a github actions script. -* Deploying datasets from a local bash script with portal code commits -* Deploying datasets from a local bash script without portal code commits - -[fd]: https://frictionlessdata.io/data-packages/ - -## Deploy datasets automatically by setting up a github actions script - -The github actions below will automatically build and deploy a single page, Frictionless dataset to `gh-pages` branch. Follow the steps below to achieve this: - -1. Create a secret so we can automatically commit to gh-pages branch (see below) -2. Set up the github action to build portal to your dataset and deploy it (see below) -3. Wait for your page to build and then setup github pages (see below) -4. View the results: visit `https:///github.io//` - -### Step 1 - -In the dataset repository you want to deploy, create a github secret with the name `PORTAL_REPO_NAME` and the value should be the name of the repository. - -See steps on creating a secret [here](https://docs.github.com/en/actions/reference/encrypted-secrets) - - - -### Step 2 - -In the dataset repository you want deploy create a `.github/workflow` directory and add a `main.yml` file with the following content (you can also view/download this [action file here](scripts/actions/single-dataset-ssg.yml): - -```bash -name: github pages - -on: - push: - branches: - - master - - main - -jobs: - run: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - name: Setup Node - uses: actions/setup-node@v2.1.2 - with: - node-version: '12.x' - - - name: Build datasets - env: - PORTAL_REPO_NAME: ${{ secrets.PORTAL_REPO_NAME }} - run: | - curl https://raw.githubusercontent.com/datopian/portal.js/main/site/public/scripts/single-dataset-no-commit.sh > portal.sh - git config --local user.email "$(git log --format='%ae' HEAD^!)" - git config --local user.name "$(git log --format='%an' HEAD^!)" - source ./portal.sh - -``` - -Then, commit and push your code. - -```bash -git add . -git commit -m "Build dataset page" -git push -``` - -### Step 3 - -Wait for a while as your page builds, and once you see the green check mark, navigate to your repository's github `pages` in settings, set the `source` to `gh-pages` and folder to `/root`: - - - - -## Deploy single dataset without commiting portal.js code - -Users who want to deploy datasets from a local bash script without saving/commiting the portal.js code, can use the script shown below. - -Using this script means you do not have access to the portal.js code used to generate the dataset page, and as such cannot modify/extend it. - -This script creates and commit only the build/output files to the gh-pages branch. Follow the steps below to achieve this. - -### Step 1 - -Clone/Pull the dataset repository you want deploy. For example: - -```bash -git clone https://github.com/datasets/finance-vix -cd finance-vix -``` - -### Step 2 - -In a terminal, export an env variable with the name of your dataset github repo. For example if deploying https://github.com/datasets/finance-vix, then export the name as: - -```bash -export PORTAL_REPO_NAME=finance-vix -``` - -### Step 3 - -In the dataset repository's root folder, create a file called `portal.sh` and paste the following [content](/scripts/single-dataset-no-commit.sh): - -```bash -#!/bin/bash -git checkout -b gh-pages -git rm -r --cached . -rm -rf portal -mkdir -p portal -npx create-next-app portal -e https://github.com/datopian/portal.js/tree/main/examples/dataset-frictionless -mkdir portal/public/dataset - -cp -a ./data portal/public/dataset -cp -a ./datapackage.json portal/public/dataset -cp -a ./README.md portal/public/dataset - -PORTAL_DATASET_PATH=$PWD"/portal/public/dataset" -export PORTAL_DATASET_PATH - -cd portal -assetPrefix='"/'$PORTAL_REPO_NAME'/"' -basePath='"/'$PORTAL_REPO_NAME'"' -echo 'module.exports = {assetPrefix:' ${assetPrefix}', basePath: '${basePath}' }' > next.config.js ## This ensures css and public folder works -yarn export - -cd .. -cp -R -a portal/out/* ./ -touch .nojekyll -git add $PWD'/_next' $PWD'/index.html' $PWD'/dataset' $PWD'/404.html' $PWD'/.nojekyll' $PWD'/favicon.ico' -git commit -m "Build new dataset page" -git push origin gh-pages -``` - -### Step 4 - -Run the bash script in a terminal with: - -```bash -source portal.sh -``` - -> Note: Use `source` instead of `bash` so that the script can work well with environment variables. - -### Step 5 - -Go to your repository's github `pages` in setting and set the Branch to gh-pages and folder to root: - - - -### Step 6 - -Open your deployed site at `https:///github.io/` - - -## Deploy single dataset with portal commit - -Users who want access to the portal.js code used for generating the dataset page can use the script shown in the following section. - -This script creates and commits the portal.js code to the root branch and also adds an automated script to deploy to gh-page. Follow the steps below to use this script. - -### Step 1 - -Create a Github Personal Access Token (PAT). See steps [here](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token) - -### Step 2 - -In the dataset repository you want to deploy, create a github secret with the name `PORTAL_NEXT_TOKEN`. The value should be the PAT created in step 1. See steps on creating a secret [here](https://docs.github.com/en/actions/reference/encrypted-secrets) - -> Note: Without the PAT and the secret configured, the automatic build will fail. - -### Step 3 - -Clone/Pull the dataset repository you want deploy. For example: - -```bash -git clone https://github.com/datasets/finance-vix -cd finance-vix -``` - -### Step 4 - -In your computer's terminal/command prompt, export an environment variable with the name of your dataset's github repo. - -For example if you want to deploy the dataset at https://github.com/datasets/finance-vix, then export the name using the command: - -```bash -export PORTAL_REPO_NAME=finance-vix -``` - -### Step 5 - -Create a file called `portal.sh` and paste the following [content](/scripts/single-dataset-commit.sh): - -```bash -#!/bin/bash -rm -rf portal -mkdir -p portal -npx create-next-app portal -e https://github.com/datopian/portal.js/tree/main/examples/dataset-frictionless -mkdir portal/public/dataset - -cp -a ./data portal/public/dataset -cp -a ./datapackage.json portal/public/dataset -cp -a ./README.md portal/public/dataset - -PORTAL_DATASET_PATH=$PWD"/portal/public/dataset" -export PORTAL_DATASET_PATH - -mkdir -p .github && mkdir -p .github/workflows && touch .github/workflows/main.yml -curl https://raw.githubusercontent.com/datopian/portal.js/main/site/public/scripts/gh-page-builder-action.yml > .github/workflows/main.yml - -cd portal -assetPrefix='"/'$PORTAL_REPO_NAME'/"' -basePath='"/'$PORTAL_REPO_NAME'"' -echo 'module.exports = {assetPrefix:' ${assetPrefix}', basePath: '${basePath}' }' > next.config.js ## This ensures css and public folder works - -cd .. -git add . -git commit -m "Add dataset build feature" -git push -echo "Portal generated, please push your code to github" -``` - -### Step 6 - -Run the bash script with: - -```bash -source portal.sh -``` - -> Note: Use `source` instead of `bash` so that the script can work well with environment variables. - -### Step 7 - -Go to your repository's github `pages` in setting and set the Branch to gh-pages and folder to root: - - - -### Step 8 - -Open your deployed site at `https:///github.io/` diff --git a/site/content/learn/single-frictionless-dataset.md b/site/content/learn/single-frictionless-dataset.md deleted file mode 100644 index dc623f95..00000000 --- a/site/content/learn/single-frictionless-dataset.md +++ /dev/null @@ -1,32 +0,0 @@ -Live Demo: -- https://portal-js.vercel.app/ - -## Create a single frictionless dataset portal - -The dataset should be a frictionless dataset i.e. it should have a [datapackage.json](https://specs.frictionlessdata.io/data-package/) - - -Create a frictionless dataset portal app from the default template by executing the following command in your terminal: -``` -$ npx create-next-app -e https://github.com/datopian/portal.js/tree/main/examples/dataset-frictionless -``` -> Choose a name for your portal when prompted e.g. your-portal - -Next, connect the frictionless dataset to `your-portal` by declaring the path to the directory level that contains the `datapackage.json` via an environment variable by executing the following command in your terminal: -``` -$ cd your-portal -$ export PORTAL_DATASET_PATH=path/to/your/dataset -``` -In `your-portal` directory, run the command below in your terminal to start the portal: -``` -$ yarn dev -``` -Open the page in your browser via the localhost url(usually http://localhost:3000) returned in the terminal to see your frictionless dataset portal. - -### Styling 🎨 - -We use Tailwind as a CSS framework. Take a look at `/styles/tailwind.css` to see what we're importing from Tailwind bundle. You can also configure Tailwind using `tailwind.config.js` file. - -Have a look at Next.js support of CSS and ways of writing CSS: - -https://nextjs.org/docs/basic-features/built-in-css-support From 2fe5cafc4016e7496986b8a987a8f2d13006748b Mon Sep 17 00:00:00 2001 From: deme Date: Fri, 21 Apr 2023 14:52:50 -0300 Subject: [PATCH 4/4] [website,#778][s]: remove components page and references to it --- README.md | 1 - site/content/config.js | 2 +- site/content/docs/components.md | 589 -------------------------------- site/content/docs/index.md | 5 - 4 files changed, 1 insertion(+), 596 deletions(-) delete mode 100644 site/content/docs/components.md diff --git a/README.md b/README.md index 8e95ba41..b40659ac 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,6 @@ Access the Portal.JS documentation at: https://portaljs.org/docs -- [Components](https://portaljs.org/docs/components) - [Examples](https://portaljs.org/docs#examples) # Community diff --git a/site/content/config.js b/site/content/config.js index 09ab5486..cae55547 100644 --- a/site/content/config.js +++ b/site/content/config.js @@ -17,7 +17,7 @@ const config = { }, navLinks: [ { name: "Docs", href: "/docs" }, - { name: "Components", href: "/docs/components" }, + // { name: "Components", href: "/docs/components" }, { name: "Blog", href: "/blog" }, // { name: "Gallery", href: "/gallery" }, // { name: "Data Literate", href: "/data-literate" }, diff --git a/site/content/docs/components.md b/site/content/docs/components.md deleted file mode 100644 index ba142e7a..00000000 --- a/site/content/docs/components.md +++ /dev/null @@ -1,589 +0,0 @@ -# Components Reference - -Portal.js supports many components that can help you build amazing data portals similar to [this](https://catalog-portal-js.vercel.app/) and [this](https://portal-js.vercel.app/). - -In this section, we'll cover all supported components in depth, and help you understand their use as well as the expected properties. - -Components are grouped under the following sections: -* [UI](https://github.com/datopian/portal.js/tree/main/src/components/ui): Components like Nav bar, Footer, e.t.c -* [Dataset](https://github.com/datopian/portal.js/tree/main/src/components/dataset): Components used for displaying a Frictionless dataset and resources -* [Search](https://github.com/datopian/portal.js/tree/main/src/components/search): Components used for building a search interface for datasets -* [Blog](https://github.com/datopian/portal.js/tree/main/src/components/blog): Components for building a simple blog for datasets -* [Views](https://github.com/datopian/portal.js/tree/main/src/components/views): Components like charts, tables, maps for generating data views -* [Misc](https://github.com/datopian/portal.js/tree/main/src/components/misc): Miscellaneos components like errors, custom links, etc used for extra design. - -### UI Components - -In the UI we group all components that can be used for building generic page sections. These are components for building sections like the Navigation bar, Footer, Side pane, Recent datasets, e.t.c. - -#### [Nav Component](https://github.com/datopian/portal.js/blob/main/src/components/ui/Nav.js) - -To build a navigation bar, you can use the `Nav` component as demonstrated below: - -```javascript -import { Nav } from 'portal' - -export default function Home(){ - - const navMenu = [{ title: 'Blog', path: '/blog' }, - { title: 'Search', path: '/search' }] - - return ( - <> -