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 ( -
-
-
- <> -

{frontMatter.title}

- {frontMatter.author && ( -
-

{frontMatter.author}

-
- )} - {frontMatter.description && ( -

{frontMatter.description}

- )} - -
-
-
- -
-
- ); -} 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: + + +