[#777,#745,docs,blog][l]: review /doc, add blogs, add examples blog posts

site/content/docs/example-ckan.md

@@ -0,0 +1,26 @@
+---
+title: "Example: data catalog with data coming from CKAN"
+authors: ['Luccas Mateus']
+date: 2023-04-20
+---
+
+**See the repo:** https://github.com/datopian/portaljs/tree/main/examples/ckan-example
+
+This is a repo intended to serve as an example of a data catalog that get its data from a CKAN Instance.
+
+- Creating a new file inside o `examples` with `create-next-app` like so:
+```
+npx create-next-app <app-name> --example https://github.com/datopian/portaljs/tree/main/ --example-path examples/ckan-example
+```
+- Inside `<app-name>` go to the `project.json` file and replace all instances of `ckan-example` with `<app-name>`
+- Set the `DMS` env variable to the Url of the CKAN Instance Ex: `export DMS=https://demo.dev.datopian.com`
+- Run the app using:
+```
+nx serve <app-name>
+```
+Congratulations, you now have something similar to this running on `http://localhost:4200`
+![](https://media.discordapp.net/attachments/1069718983604977754/1098252297726865408/image.png?width=853&height=461)
+
+If yo go to any one of those pages by clicking on `More info` you will see something similar to this
+
+![](https://media.discordapp.net/attachments/1069718983604977754/1098252298074988595/image.png?width=853&height=461)

site/content/docs/example-data-catalog.md

@@ -0,0 +1,27 @@
+---
+title: "Example: simple data catalog"
+authors: ['Luccas Mateus']
+date: 2023-04-20
+---
+
+**See the repo:** https://github.com/datopian/portaljs/tree/main/examples/simple-example
+
+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 file inside of `examples` with `create-next-app` like so:
+```
+npx create-next-app <app-name> --example https://github.com/datopian/portaljs/tree/main/ --example-path examples/simple-example
+```
+- Inside `<app-name>` go to the `project.json` file and replace all instances of `simple-example` with `<app-name>`
+- Edit the file `datasets.json` to your liking, some examples can be found inside this [repo](https://github.com/datasets)
+- Run the app using:
+```
+nx serve <app-name>
+```
+
+Congratulations, you now have something similar to this running on `http://localhost:4200`
+![](https://i.imgur.com/JrDLycF.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/cpKMS80.png)

site/content/docs/example-frictionless-dataset.md.bkp

@@ -0,0 +1,48 @@
+---
+title: "Example: showcase for a single Frictionless dataset"
+authors: ['Luccas Mateus']
+date: 2023-04-20
+filetype: blog
+---
+
+**See the repo:** https://github.com/datopian/portaljs/tree/main/examples/dataset-frictionless
+
+This example creates a portal/showcase for a single dataset. The dataset should be a [Frictionless dataset (data package)][fd] i.e. there should be a `datapackage.json`.
+
+[fd]: https://frictionlessdata.io/data-packages/
+
+## How to use
+
+```bash
+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 or go with default my-app
+
+# then run it
+cd your-portal
+yarn #install packages
+yarn dev #start app in dev mode
+```
+
+You should see the demo portal running with the example dataset provided:
+
+<img src="/assets/examples/frictionless-dataset-demo.gif" />
+
+### Use your own dataset
+
+You can try it out with other [Frictionless datasets](https://datahub.io/search).
+
+In the directory of your portal do:
+
+```bash
+export PORTAL_DATASET_PATH=/path/to/my/dataset
+```
+
+Then restart the dev server:
+
+```
+yarn dev
+```
+
+Check the portal page and it should have updated e.g. like:
+
+![](https://i.imgur.com/KSEtNF1.png)

site/content/docs/index.md

@@ -0,0 +1,45 @@
+# 🌀 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.
+
+Built in JavaScript and React on top of the popular [Next.js](https://nextjs.com/) framework. Portal.JS 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](https://ckan.org/).
+
+## 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, Next.js).
+- 🔋 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.
+- 🧱 Extensible: quickly extend and develop/import your own React components
+- 📝 Well documented: full set of documentation plus the documentation of Next.js and Apollo.
+
+### For developers
+
+- 🏗 Build with modern, familiar frontend tech such as JavaScript and React.
+- 🚀 Next.js framework: so everything in Next.js for free: Server Side Rendering, Static Site Generation, huge number of examples and integrations, etc.
+  - Server Side Rendering (SSR) => Unlimited number of pages, SEO and more whilst still using React.
+  - Static Site Generation (SSG) => Ultra-simple deployment, great performance, great lighthouse scores and more (good for small sites)
+
+## Tutorials and guides
+
+### Examples
+
+You can check out the following examples built with Portal.js.
+
+* [Data catalog with data coming from CKAN](/docs/example-ckan)
+* [Simple data catalog](/docs/example-data-catalog)
+
+> The [`examples` directory](https://github.com/datopian/portal.js/tree/main/examples) is regularly updated with different portal examples. 
+
+
+## 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) or on our [Discord server](https://discord.gg/An7Bu5x8).
+
+