[README][m]: add a features section (with emojis!) plus start of architecture section at the bottom.
This commit is contained in:
parent
618e1532be
commit
3cc1c1dca8
37
README.md
37
README.md
@ -1,3 +1,9 @@
|
|||||||
|
<h1 style="text-align: center;">
|
||||||
|
PORTAL.js
|
||||||
|
The javascript framework for<br/>
|
||||||
|
data portals
|
||||||
|
</h1>
|
||||||
|
|
||||||
🌀 `Portal` is a framework for rapidly building rich data portal frontends using a modern frontend approach (javascript, React, SSR).
|
🌀 `Portal` is a framework for rapidly building rich data portal frontends using a modern frontend approach (javascript, React, SSR).
|
||||||
|
|
||||||
`Portal` assumes a "decoupled" approach where the frontend is a separate service from the backend and interacts with backend(s) via an API. It can be used with any backend and has out of the box support for [CKAN][]. `portal` is built in Javascript and React on top of the popular [Next.js][] framework.
|
`Portal` assumes a "decoupled" approach where the frontend is a separate service from the backend and interacts with backend(s) via an API. It can be used with any backend and has out of the box support for [CKAN][]. `portal` is built in Javascript and React on top of the popular [Next.js][] framework.
|
||||||
@ -7,6 +13,23 @@
|
|||||||
|
|
||||||
Live DEMO: https://portal.datopian1.now.sh
|
Live DEMO: https://portal.datopian1.now.sh
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
* 🗺️ 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) with a common internal API.
|
||||||
|
* 👩💻 Developer friendly: built with familiar frontend tech Javascript, React etc
|
||||||
|
* 🔋 Batteries included: Full set of portal components out of the box e.g. catalog search, dataset showcase, blog etc.
|
||||||
|
* 🎨 Easy to theme and customize: installable themes, use standard CSS and React+CSS tooling. Add new routes quickly.
|
||||||
|
* 🧱E Extensible: quickly extend and develop/import your own React components
|
||||||
|
* 📝 Well documented: full set of documentation plus the documentation of NextJS and Apollo.
|
||||||
|
|
||||||
|
### For developers
|
||||||
|
|
||||||
|
* 🏗 Build with modern, familiar frontend tech such as Javascript and React.
|
||||||
|
* 🚀 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
|
||||||
|
* 📋 Typescript support
|
||||||
|
|
||||||
## Getting Started
|
## Getting Started
|
||||||
|
|
||||||
### Setup
|
### Setup
|
||||||
@ -27,7 +50,7 @@ npm init portal-app my-data-portal
|
|||||||
|
|
||||||
## Guide
|
## Guide
|
||||||
|
|
||||||
### Styling :art:
|
### Styling 🎨
|
||||||
|
|
||||||
We use Tailwind as a CSS framework. Take a look at `/styles/index.css` to see what we're importing from Tailwind bundle. You can also configure Tailwind using `tailwind.config.js` file.
|
We use Tailwind as a CSS framework. Take a look at `/styles/index.css` to see what we're importing from Tailwind bundle. You can also configure Tailwind using `tailwind.config.js` file.
|
||||||
|
|
||||||
@ -194,7 +217,7 @@ Boot the demo portal:
|
|||||||
$ yarn dev # or npm run dev
|
$ yarn dev # or npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
Open [http://localhost:3000](http://localhost:3000) to see the home page :tada:
|
Open [http://localhost:3000](http://localhost:3000) to see the home page 🎉
|
||||||
|
|
||||||
You can start editing the page by modifying `/pages/index.tsx`. The page auto-updates as you edit the file.
|
You can start editing the page by modifying `/pages/index.tsx`. The page auto-updates as you edit the file.
|
||||||
|
|
||||||
@ -208,3 +231,13 @@ yarn test # or npm run test
|
|||||||
# turn on watching
|
# turn on watching
|
||||||
yarn test --watch
|
yarn test --watch
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Architecture
|
||||||
|
|
||||||
|
* Language: Javascript
|
||||||
|
* Framework: NextJS - https://nextjs.org/
|
||||||
|
* Data layer API: GraphQL using Apollo. So controllers access data using GraphQL “gatsby like”
|
||||||
|
|
||||||
|
### Key Pages
|
||||||
|
|
||||||
|
See https://tech.datopian.com/frontend/
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user