From 43f666022aac7681f9855beb579a011e0d42d18a Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Sun, 20 Jun 2021 22:09:53 +0200 Subject: [PATCH] [site/docs][s]: merge installation.md into index.md as no need to separate (and tidy a bit). --- docs/markdowns/docs/index.md | 113 +++++++++++++++++++++++++++- docs/markdowns/docs/installation.md | 99 ------------------------ 2 files changed, 110 insertions(+), 102 deletions(-) delete mode 100644 docs/markdowns/docs/installation.md diff --git a/docs/markdowns/docs/index.md b/docs/markdowns/docs/index.md index c0c2c455..ef930dcd 100644 --- a/docs/markdowns/docs/index.md +++ b/docs/markdowns/docs/index.md @@ -1,6 +1,4 @@ -

🌀 Portal.JS -> The JavaScript framework for data portals -

+# 🌀 Portal.JS: The JavaScript framework for data portals 🌀 `portal.js` is a framework for rapidly building rich data portal frontends using a modern frontend approach. `portal.js` can be used to present a single dataset or build a full-scale data catalog/portal. @@ -22,4 +20,113 @@ - 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 +## Installation and setup + +Before installation, ensure your system satisfies the following requirements: + +- Node.js 10.13 or later +- Nextjs 10.0.3 +- MacOS, Windows (including WSL), and Linux are supported + +> Note: We also recommend instead of npm using `yarn` instead of `npm`. +> +Portal.js is built with React on top of Nextjs framework, so for a quick setup, you can bootstrap a Nextjs app and install portal.js as demonstrated in the code below: + +```bash= +## Create a react app +npx create-next-app +# or +yarn create next-app +``` +After the installation is complete, follow the instructions to start the development server. Try editing pages/index.js and see the result on your browser. + +> For more information on how to use create-next-app, you can review the [create-next-app](https://nextjs.org/docs/api-reference/create-next-app) documentation. + +Once you have Nextjs created, you can install portal.js: + +```bash= +yarn add https://github.com/datopian/portal.js.git +``` + +You're now ready to use portal.js in your next app. To test portal.js, open your `index.js` file in the pages folder. By default you should have some autogenerated code in the `index.js` file: + + +Which outputs a page with the following content: + +![](https://i.imgur.com/GVh0P6p.png) + +Now, we are going to do some clean up and add a table component. In the `index.js` file, import a [Table]() component from portal as shown below: + +```javascript +import Head from 'next/head' +import { Table } from 'portal' //import Table component +import styles from '../styles/Home.module.css' + +export default function Home() { + + const columns = [ + { field: 'id', headerName: 'ID' }, + { field: 'firstName', headerName: 'First name' }, + { field: 'lastName', headerName: 'Last name' }, + { field: 'age', headerName: 'Age' } + ]; + + const rows = [ + { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 }, + { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 }, + { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 }, + { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 }, + { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 }, + { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 }, + { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 }, + ]; + + return ( +
+ + Create Portal App + + + +

+ Welcome to Portal.JS +

+ + {/* Use table component */} + + + + ) +} +``` + +Now, your page should look like the following: + +![](https://i.imgur.com/n0vSjY4.png) + +> **Note**: You can learn more about individual portal components, as well as their prop types in the [components reference](/docs/components). + + +## Next Steps + +You can check out the following examples built with Portal.js. + +* [A portal for a single Frictionless dataset](#Build-a-single-Frictionless-dataset-portal) +* [A portal with a CKAN backend](#Build-a-CKAN-powered-dataset-portal) + +> The [`examples` directory](https://github.com/datopian/portal.js/tree/main/examples) is regularly updated with different portal examples. + +You can also look at the full list of the available components that are provided by Portal.JS in [Components](/docs/components). + + +## Reference Information + +* [Full list of the available components that are provided by Portal.JS](/docs/components) +* [Reference](/docs/references) + + +## Getting Help + +If you have questions about anything related to Portal.js, you're always welcome to ask our community on [GitHub Discussions](https://github.com/datopian/portal.js/discussions). + diff --git a/docs/markdowns/docs/installation.md b/docs/markdowns/docs/installation.md deleted file mode 100644 index b47b0195..00000000 --- a/docs/markdowns/docs/installation.md +++ /dev/null @@ -1,99 +0,0 @@ -# Installation and setup - -Before installation, ensure your system satisfies the following requirements: - -- Node.js 10.13 or later -- Nextjs 10.0.3 -- MacOS, Windows (including WSL), and Linux are supported - -> Note: We also recommend instead of npm using `yarn` instead of `npm`. -> -Portal.js is built with React on top of Nextjs framework, so for a quick setup, you can bootstrap a Nextjs app and install portal.js as demonstrated in the code below: - -```bash= -## Create a react app -npx create-next-app -# or -yarn create next-app -``` -After the installation is complete, follow the instructions to start the development server. Try editing pages/index.js and see the result on your browser. - -> For more information on how to use create-next-app, you can review the [create-next-app](https://nextjs.org/docs/api-reference/create-next-app) documentation. - -Once you have Nextjs created, you can install portal.js: - -```bash= -yarn add https://github.com/datopian/portal.js.git -``` - -You're now ready to use portal.js in your next app. To test portal.js, open your `index.js` file in the pages folder. By default you should have some autogenerated code in the `index.js` file: - - -Which outputs a page with the following content: - -![](https://i.imgur.com/GVh0P6p.png) - -Now, we are going to do some clean up and add a table component. In the `index.js` file, import a [Table]() component from portal as shown below: - -```javascript -import Head from 'next/head' -import { Table } from 'portal' //import Table component -import styles from '../styles/Home.module.css' - -export default function Home() { - - const columns = [ - { field: 'id', headerName: 'ID' }, - { field: 'firstName', headerName: 'First name' }, - { field: 'lastName', headerName: 'Last name' }, - { field: 'age', headerName: 'Age' } - ]; - - const rows = [ - { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 }, - { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 }, - { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 }, - { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 }, - { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 }, - { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 }, - { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 }, - ]; - - return ( -
- - Create Portal App - - - -

- Welcome to Portal.JS -

- - {/* Use table component */} -
- - - ) -} -``` - -Now, your page should look like the following: - -![](https://i.imgur.com/n0vSjY4.png) - -> **Note**: You can learn more about individual portal components, as well as their prop types in the [components reference](#Component-List). - -___ - -# Getting Started - -If you're new to Portal.js we recommend that you start with the step-by-step guide below. You can also check out the following examples of projects built with portal.js. - -* [A portal for a single Frictionless dataset](#Build-a-single-Frictionless-dataset-portal) -* [A portal with a CKAN backend](#Build-a-CKAN-powered-dataset-portal) - -> The [`examples` directory](https://github.com/datopian/portal.js/tree/main/examples) is regularly updated with different portal examples. - -If you have questions about anything related to Portal.js, you're always welcome to ask our community on [GitHub Discussions](https://github.com/datopian/portal.js/discussions). -___ \ No newline at end of file