diff --git a/examples/basic-example/.eslintrc.json b/examples/basic-example/.eslintrc.json
deleted file mode 100644
index bffb357a..00000000
--- a/examples/basic-example/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "extends": "next/core-web-vitals"
-}
diff --git a/examples/basic-example/README.md b/examples/basic-example/README.md
deleted file mode 100644
index c87e0421..00000000
--- a/examples/basic-example/README.md
+++ /dev/null
@@ -1,34 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/examples/basic-example/next.config.js b/examples/basic-example/next.config.js
deleted file mode 100644
index ae887958..00000000
--- a/examples/basic-example/next.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
- reactStrictMode: true,
- swcMinify: true,
-}
-
-module.exports = nextConfig
diff --git a/examples/basic-example/pages/index.tsx b/examples/basic-example/pages/index.tsx
deleted file mode 100644
index f1407b50..00000000
--- a/examples/basic-example/pages/index.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { GetStaticProps } from 'next';
-import { promises as fs } from 'fs';
-import path from 'path';
-import parse from '../lib/markdown';
-import DRD from '../components/DRD';
-
-export const getStaticProps = async (context) => {
- const indexFile = path.join(process.cwd(), '/content/index.md');
- const readme = await fs.readFile(indexFile, 'utf8');
- let { mdxSource, frontMatter } = await parse(readme, '.mdx');
- return {
- props: {
- mdxSource,
- frontMatter,
- },
- };
-};
-
-export default function DatasetPage({ mdxSource, frontMatter }) {
- return (
-
- );
-}
diff --git a/examples/basic-example/.gitignore b/examples/learn-example/.gitignore
similarity index 100%
rename from examples/basic-example/.gitignore
rename to examples/learn-example/.gitignore
diff --git a/examples/learn-example/README.md b/examples/learn-example/README.md
new file mode 100644
index 00000000..f70ab7b7
--- /dev/null
+++ b/examples/learn-example/README.md
@@ -0,0 +1 @@
+PortalJS Learn Example - https://portaljs.org/docs
\ No newline at end of file
diff --git a/examples/basic-example/components/DRD.tsx b/examples/learn-example/components/DRD.tsx
similarity index 100%
rename from examples/basic-example/components/DRD.tsx
rename to examples/learn-example/components/DRD.tsx
diff --git a/examples/basic-example/components/DebouncedInput.tsx b/examples/learn-example/components/DebouncedInput.tsx
similarity index 100%
rename from examples/basic-example/components/DebouncedInput.tsx
rename to examples/learn-example/components/DebouncedInput.tsx
diff --git a/examples/basic-example/components/LineChart.tsx b/examples/learn-example/components/LineChart.tsx
similarity index 100%
rename from examples/basic-example/components/LineChart.tsx
rename to examples/learn-example/components/LineChart.tsx
diff --git a/examples/basic-example/components/Table.tsx b/examples/learn-example/components/Table.tsx
similarity index 100%
rename from examples/basic-example/components/Table.tsx
rename to examples/learn-example/components/Table.tsx
diff --git a/examples/basic-example/components/Vega.tsx b/examples/learn-example/components/Vega.tsx
similarity index 100%
rename from examples/basic-example/components/Vega.tsx
rename to examples/learn-example/components/Vega.tsx
diff --git a/examples/basic-example/components/VegaLite.tsx b/examples/learn-example/components/VegaLite.tsx
similarity index 100%
rename from examples/basic-example/components/VegaLite.tsx
rename to examples/learn-example/components/VegaLite.tsx
diff --git a/examples/basic-example/content/index.md b/examples/learn-example/content/index.md
similarity index 100%
rename from examples/basic-example/content/index.md
rename to examples/learn-example/content/index.md
diff --git a/examples/basic-example/lib/applyFullWidthDirective.tsx b/examples/learn-example/lib/applyFullWidthDirective.tsx
similarity index 100%
rename from examples/basic-example/lib/applyFullWidthDirective.tsx
rename to examples/learn-example/lib/applyFullWidthDirective.tsx
diff --git a/examples/basic-example/lib/loadData.tsx b/examples/learn-example/lib/loadData.tsx
similarity index 100%
rename from examples/basic-example/lib/loadData.tsx
rename to examples/learn-example/lib/loadData.tsx
diff --git a/examples/basic-example/lib/markdown.js b/examples/learn-example/lib/markdown.js
similarity index 100%
rename from examples/basic-example/lib/markdown.js
rename to examples/learn-example/lib/markdown.js
diff --git a/examples/basic-example/lib/parseCsv.ts b/examples/learn-example/lib/parseCsv.ts
similarity index 100%
rename from examples/basic-example/lib/parseCsv.ts
rename to examples/learn-example/lib/parseCsv.ts
diff --git a/examples/basic-example/package-lock.json b/examples/learn-example/package-lock.json
similarity index 100%
rename from examples/basic-example/package-lock.json
rename to examples/learn-example/package-lock.json
diff --git a/examples/basic-example/package.json b/examples/learn-example/package.json
similarity index 100%
rename from examples/basic-example/package.json
rename to examples/learn-example/package.json
diff --git a/examples/basic-example/pages/[...path].tsx b/examples/learn-example/pages/[[...path]].tsx
similarity index 83%
rename from examples/basic-example/pages/[...path].tsx
rename to examples/learn-example/pages/[[...path]].tsx
index f0b97673..2b434ea5 100644
--- a/examples/basic-example/pages/[...path].tsx
+++ b/examples/learn-example/pages/[[...path]].tsx
@@ -1,11 +1,15 @@
-import { GetStaticProps } from 'next';
import { promises as fs } from 'fs';
import path from 'path';
import parse from '../lib/markdown';
import DRD from '../components/DRD';
export const getServerSideProps = async (context) => {
- const indexFile = path.join(process.cwd(), '/content/' + context.params.path.join('/') + '/index.md');
+ let pathToFile = 'index.md';
+ if (context.params.path) {
+ pathToFile = context.params.path.join('/') + '/index.md';
+ }
+
+ const indexFile = path.join(process.cwd(), '/content/' + pathToFile);
const readme = await fs.readFile(indexFile, 'utf8');
let { mdxSource, frontMatter } = await parse(readme, '.mdx');
return {
diff --git a/examples/basic-example/pages/_app.tsx b/examples/learn-example/pages/_app.tsx
similarity index 100%
rename from examples/basic-example/pages/_app.tsx
rename to examples/learn-example/pages/_app.tsx
diff --git a/examples/basic-example/pages/_document.tsx b/examples/learn-example/pages/_document.tsx
similarity index 100%
rename from examples/basic-example/pages/_document.tsx
rename to examples/learn-example/pages/_document.tsx
diff --git a/examples/basic-example/postcss.config.js b/examples/learn-example/postcss.config.js
similarity index 100%
rename from examples/basic-example/postcss.config.js
rename to examples/learn-example/postcss.config.js
diff --git a/examples/basic-example/public/data.csv b/examples/learn-example/public/data.csv
similarity index 100%
rename from examples/basic-example/public/data.csv
rename to examples/learn-example/public/data.csv
diff --git a/examples/basic-example/public/favicon.png b/examples/learn-example/public/favicon.png
similarity index 100%
rename from examples/basic-example/public/favicon.png
rename to examples/learn-example/public/favicon.png
diff --git a/examples/basic-example/styles/globals.css b/examples/learn-example/styles/globals.css
similarity index 100%
rename from examples/basic-example/styles/globals.css
rename to examples/learn-example/styles/globals.css
diff --git a/examples/basic-example/tailwind.config.js b/examples/learn-example/tailwind.config.js
similarity index 100%
rename from examples/basic-example/tailwind.config.js
rename to examples/learn-example/tailwind.config.js
diff --git a/examples/basic-example/tsconfig.json b/examples/learn-example/tsconfig.json
similarity index 100%
rename from examples/basic-example/tsconfig.json
rename to examples/learn-example/tsconfig.json
diff --git a/site/content/assets/docs/datasets-index-page.png b/site/content/assets/docs/datasets-index-page.png
new file mode 100644
index 00000000..cee8b5d7
Binary files /dev/null and b/site/content/assets/docs/datasets-index-page.png differ
diff --git a/site/content/assets/docs/my-incredible-dataset.png b/site/content/assets/docs/my-incredible-dataset.png
new file mode 100644
index 00000000..5ab421c3
Binary files /dev/null and b/site/content/assets/docs/my-incredible-dataset.png differ
diff --git a/site/content/docs/index.md b/site/content/docs/index.md
index 37d0a5df..01ba24d2 100644
--- a/site/content/docs/index.md
+++ b/site/content/docs/index.md
@@ -50,3 +50,69 @@ Let’s try editing the starter page.
As soon as you save the file, the browser automatically updates the page with the new text:
+
+## Displaying data
+
+So far, the PortalJS app we created only has a single page displaying a dataset. Data catalogs and data portals generally showcase many different datasets.
+
+Let's explore how to add and display more datasets to our portal.
+
+### Pages in PortalJS
+
+As you have seen, in this example a dataset page is just a markdown file on disk plus a data file.
+
+To create a new data showcase page we just create a new markdown file in the `content/` folder and a new data file in the `public/` folder.
+
+Let's do that now. Create a `content/my-incredible-dataset` folder, and inside this new folder create a `index.md` file with the following content:
+
+```markdown
+# My Incredible Dataset
+
+This is my incredible dataset.
+
+## Chart
+
+
+```
+
+Now, create a file in `public/` named `my-incredible-data.csv` and put the following content inside it:
+
+```bash
+Year,Population (mi)
+1980,227
+1990,249
+2000,281
+2010,309
+2020,331
+```
+
+Note that pages are associated with a route based on their pathname, so, to see the new data page, access http://localhost:3000/my-incredible-dataset from the browser. You should see the following:
+
+
+
+> [!tip]
+> In this tutorial we opted for storing content as markdown files and data as CSV files in the app, but PortalJS can have metadata, data and content stored anywhere.
+
+### Create an index page
+
+Now, let's create an index page. First, create a new folder `content/my-awesome-dataset/` and move `content/index.md` to it. Then, create a new file `content/index.md` and put the following content inside it:
+
+```markdown
+# Welcome to my data portal!
+
+List of available datasets:
+
+- [My Awesome Dataset](/my-awesome-dataset)
+- [My Incredible Dataset](/my-incredible-dataset)
+
+```
+
+From the browser, access http://localhost:3000. You should see the following:
+
+
+