Revert "[website,#778][xs]: learn page removed"

This reverts commit 65e2a8be4c904785080c33a74d377ce8983aeaf3.
This commit is contained in:
deme 2023-04-21 14:55:33 -03:00
parent b0e80c610f
commit 110360ccae
2 changed files with 96 additions and 0 deletions

View File

@ -18,6 +18,7 @@ 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" },

95
site/content/learn.md Normal file
View File

@ -0,0 +1,95 @@
# 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, lets make sure that your development environment is ready.
* If you dont have Node.js installed, [install it from here](https://nodejs.org/en/). Youll need Node.js version 10.13 or later.
* Youll 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 youd 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. Lets cd into it:
```
cd portaljs-dataset
```
Then, run the following command:
```
npm run dev
```
This starts your Portal.js apps "development server" (more on this later) on port 3000.
Lets check to see if its 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).