knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #627 from datopian/feature/site/guide-for-single-dataset-page

Browse Source 
Guide to build a single dataset page with Portal.js
This commit is contained in:
Anuar Ustayev 2022-01-16 11:08:09 +06:00 committed by GitHub
commit 4758e92409
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
site/content/learn.md
View File

@ -68,4 +68,5 @@ Let’s check to see if it’s working. Open http://localhost:3000 from your bro
## Next steps
* Learn how to use Portal.js as a frontend for CKAN - [learn/ckan](/learn/ckan).
* Learn how to use Portal.js as a frontend for CKAN - [learn/ckan](/learn/ckan).
* Learn how to build a portal for a single frictionless dataset - [learn/single-frictionless-dataset](/learn/single-frictionless-dataset)

32
site/content/learn/single-frictionless-dataset.md Normal file
View File

@ -0,0 +1,32 @@
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