{isHomePage &&
}
diff --git a/site/content/blog/markdowndb-basics-tutorial-2023.md b/site/content/blog/markdowndb-basics-tutorial-2023.md
index f88feddf..3665da10 100644
--- a/site/content/blog/markdowndb-basics-tutorial-2023.md
+++ b/site/content/blog/markdowndb-basics-tutorial-2023.md
@@ -264,7 +264,7 @@ The above script will output the following to the terminal:
## Done!
-That's it! We've just created a simple catalog of our GitHub projects using markdown files and the MarkdownDB package. You can find the full code for this tutorial [here](https://github.com/datopian/markdowndb/tree/main/examples/basic-example).
+That's it! We've just created a simple catalog of our GitHub projects using markdown files and the MarkdownDB package. You can find the [full code for this tutorial here](https://github.com/datopian/markdowndb/tree/main/examples/basic-example).
We look forward to seeing the amazing applications you'll build with this tool!
diff --git a/site/content/config.js b/site/content/config.js
index 0265e7b8..c0ce47d3 100644
--- a/site/content/config.js
+++ b/site/content/config.js
@@ -1,7 +1,7 @@
const config = {
title: 'PortalJS - The JavaScript framework for data portals.',
description:
- 'PortalJS is a framework for rapidly building rich data portal frontends using a modern frontend approach.',
+ 'PortalJS is a JavaScript framework for rapidly building rich data portal frontends using a modern frontend approach.',
theme: {
default: 'dark',
toggleIcon: '/images/theme-button.svg',
diff --git a/site/content/docs/creating-new-datasets.md b/site/content/docs/creating-new-datasets.md
index 0828771f..e17f3913 100644
--- a/site/content/docs/creating-new-datasets.md
+++ b/site/content/docs/creating-new-datasets.md
@@ -1,6 +1,7 @@
-
-
-# Creating new datasets
+---
+title: 'Creating new datasets'
+description: 'PortalJS Tutorial II - Learn how to create new datasets on a data portal'
+---
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.
@@ -10,7 +11,7 @@ Let's explore how to add and display more datasets to our portal.
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.
+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:
@@ -19,7 +20,7 @@ Let's do that now. Create a `content/my-incredible-dataset` folder, and inside t
This is my incredible dataset.
-## Chart
+## Chart
+
> [!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.
@@ -58,12 +59,11 @@ 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:
-
+
At this point, the app has multiple datasets, and users can find and navigate to any dataset they want. In the next lesson, you are going to learn how to improve this experience with search.
diff --git a/site/content/docs/index.md b/site/content/docs/index.md
index 588d8d96..da017d91 100644
--- a/site/content/docs/index.md
+++ b/site/content/docs/index.md
@@ -1,6 +1,7 @@
-
-
-# Getting Started
+---
+title: Getting Started
+description: 'Getting started guide and tutorial about data portal-building with PortalJS'
+---
Welcome to the PortalJS documentation!
@@ -38,7 +39,7 @@ Let's check it's working and what we have! Open http://localhost:3000 from your
You should see a page like this when you access http://localhost:3000. This is the starter template page which shows the most simple data portal you could have: a simple README plus csv file.
-
+
### Editing the Page
@@ -51,7 +52,7 @@ Let’s try editing the starter page.
After refreshing the page, you should see the new text:
-
+
Congratulations! The app is up and running and you learned how to edit a page. In the next lesson, you are going to learn how to create new datasets.
diff --git a/site/content/docs/searching-datasets.md b/site/content/docs/searching-datasets.md
index 874b1d74..a672c558 100644
--- a/site/content/docs/searching-datasets.md
+++ b/site/content/docs/searching-datasets.md
@@ -26,7 +26,7 @@ This example makes use of the [markdowndb](https://github.com/datopian/markdownd
From the browser, access http://localhost:3000. You should see the following, you now have a searchable automatic list of your datasets:
-
+
To make this catalog look even better, we can change the text that is being displayed for each dataset to a title. Let's do that by adding the "title" [frontmatter field](https://daily-dev-tips.com/posts/what-exactly-is-frontmatter/) to the first dataset in the list. Change `content/my-awesome-dataset/index.md` to the following:
@@ -46,7 +46,7 @@ Built with PortalJS
Rerun `npm run mddb` and, from the browser, access http://localhost:3000. You should see the title appearing instead of the folder name:
-
+
Any frontmatter attribute that you add will automatically get indexed and be usable in the search box.
@@ -102,7 +102,7 @@ List of available datasets:
You now have a filter in your page with all possible values automatically added to it.
-
+
In the next lesson, you are going to learn how to display metadata on the dataset page.
diff --git a/site/content/docs/showing-metadata.md b/site/content/docs/showing-metadata.md
index e8ab31e0..9f846af9 100644
--- a/site/content/docs/showing-metadata.md
+++ b/site/content/docs/showing-metadata.md
@@ -4,7 +4,7 @@
If you go now to `http://localhost:3000/my-awesome-dataset`, you will see that we now have two titles on the page. That's because `title` is one of the default metadata fields supported by PortalJS.
-
+
Change the content inside `/content/my-awesome-dataset/index.md` to this.
@@ -27,7 +27,7 @@ Built with PortalJS
Once you refresh the page at `http://localhost:3000/my-awesome-dataset` you should see something like this at the top:
-
+
These are the standard metadata fields that will be shown at the top of the page if you add them.
@@ -35,6 +35,6 @@ These are the standard metadata fields that will be shown at the top of the page
- `author`, `description`, and `modified` which gets displayed below the title
- `files` that get displayed as a table with two columns: `File` which is linked directly to the file, and `Format` which show the file format.
-Feel free to experiment with these metadata fields. At this point, you might want to deploy the app, and that's what you are going to learn in the next lesson.
+Feel free to experiment with these metadata fields. At this point, you might want to deploy the app, and that's what you are going to learn in the next lesson.
diff --git a/site/content/guide/index.md b/site/content/guide/index.md
index 6bd11b3f..c41fea64 100644
--- a/site/content/guide/index.md
+++ b/site/content/guide/index.md
@@ -3,6 +3,7 @@ showToc: false
showSidebar: false
title: "Markdown-based Websites Guide"
disableTitle: true
+description: Create markdown-based websites and data portals, update it, add collaborators and discover markdown superpowers with Flowershow and PortalJS
---
diff --git a/site/content/howtos/analytics.md b/site/content/howtos/analytics.md
index 25fb35e1..d2681f64 100644
--- a/site/content/howtos/analytics.md
+++ b/site/content/howtos/analytics.md
@@ -1,4 +1,7 @@
-# How to add Google Analytics?
+---
+title: How to add Google Analytics?
+description: Learn to implement Google Analytics on PortalJS data portals
+---
>[!todo] Prerequisites
>- [Google Analytics account](https://support.google.com/analytics/answer/9304153?hl=en)
@@ -74,4 +77,4 @@ export default function MyApp({ Component, pageProps }) {
```
>[!info]
-> For more info on measuring pageviews with Google Analytics see [Google Analytics documentation](https://developers.google.com/analytics/devguides/collection/gtagjs/pages).
\ No newline at end of file
+> For more info on measuring pageviews with Google Analytics see [Google Analytics documentation](https://developers.google.com/analytics/devguides/collection/gtagjs/pages).
diff --git a/site/content/howtos/blog.md b/site/content/howtos/blog.md
index 701c404a..4b4a83a1 100644
--- a/site/content/howtos/blog.md
+++ b/site/content/howtos/blog.md
@@ -1,4 +1,7 @@
-# How to add a simple blog?
+---
+title: How to add a simple blog?
+description: How to add a simple blog on a PortalJS data portal
+---
## Setup
diff --git a/site/content/howtos/comments.md b/site/content/howtos/comments.md
index 8303f5f9..23f6d115 100644
--- a/site/content/howtos/comments.md
+++ b/site/content/howtos/comments.md
@@ -1,4 +1,7 @@
-# How to add user comments?
+---
+title: How to add user comments?
+description: Learn how to add user comments on a PortalJS data portal
+---
![[comments-example.png]]
diff --git a/site/content/howtos/drd.md b/site/content/howtos/drd.md
index 47295d57..389fe610 100644
--- a/site/content/howtos/drd.md
+++ b/site/content/howtos/drd.md
@@ -1,4 +1,7 @@
-# How to create data-rich documents with charts and tables?
+---
+title: How to create data-rich documents with charts and tables?
+description: Learn how to create a data-rich document with charts and tables on a PortalJS data portal
+---
> [!info] Prerequisites
> If you want to enrich your markdown content with charts and tables, you first need to add support for rendering markdown files in your PortalJS app. Follow [[markdown|this guide]] to learn how to do this.
@@ -15,12 +18,12 @@ Now, in order to use these components in your markdown files, we need to pass th
```tsx
// e.g. /blog/[[...slug]].tsx
-import fs from "fs";
-import { LineChart, Table, Catalog, Vega, VegaLite } from "@portaljs/components";
+import fs from 'fs';
+import { LineChart, Table, Catalog, Vega, VegaLite } from '@portaljs/components';
-import { MdxRemote } from "next-mdx-remote";
-import clientPromise from "@/lib/mddb.mjs";
-import parse from "@/lib/markdown";
+import { MdxRemote } from 'next-mdx-remote';
+import clientPromise from '@/lib/mddb.mjs';
+import parse from '@/lib/markdown';
const components = {
Table: Table,
@@ -29,37 +32,35 @@ const components = {
LineChart: LineChart,
};
-
export default function Page({ source }) {
- source = JSON.parse(source);
+ source = JSON.parse(source);
- return (
- <>
-
-
- );
+ return (
+ <>
+
+
+ );
}
// Import metadata of a file matching the static path and return its parsed source and frontmatter object
export const getStaticProps = async ({ params }) => {
- const urlPath = params?.slug ? (params.slug as string[]).join("/") : "/";
+ const urlPath = params?.slug ? (params.slug as string[]).join('/') : '/';
- const mddb = await clientPromise;
- const dbFile = await mddb.getFileByUrl(urlPath);
- const filePath = dbFile!.file_path;
- // const frontMatter = dbFile!.metadata ?? {};
+ const mddb = await clientPromise;
+ const dbFile = await mddb.getFileByUrl(urlPath);
+ const filePath = dbFile!.file_path;
+ // const frontMatter = dbFile!.metadata ?? {};
- const source = fs.readFileSync(filePath, { encoding: "utf-8" });
- const { mdxSource } = await parse(source, "mdx", {});
+ const source = fs.readFileSync(filePath, { encoding: 'utf-8' });
+ const { mdxSource } = await parse(source, 'mdx', {});
- return {
- props: {
- source: JSON.stringify(mdxSource),
- // frontMatter
- },
- };
+ return {
+ props: {
+ source: JSON.stringify(mdxSource),
+ // frontMatter
+ },
+ };
};
-
```
You can now use these components in your markdown, like so:
@@ -93,39 +94,39 @@ Example usage:
cols={[
{
key: 'id',
- name: 'ID'
+ name: 'ID',
},
{
key: 'firstName',
- name: 'First name'
+ name: 'First name',
},
{
key: 'lastName',
- name: 'Last name'
+ name: 'Last name',
},
{
key: 'age',
- name: 'Age'
- }
+ name: 'Age',
+ },
]}
data={[
{
age: 35,
firstName: 'Jon',
id: 1,
- lastName: 'Snow'
+ lastName: 'Snow',
},
{
age: 42,
firstName: 'Cersei',
id: 2,
- lastName: 'Lannister'
- }
+ lastName: 'Lannister',
+ },
]}
/>
```
->[!info]
+> [!info]
> More info on the [storybook page](https://storybook.portaljs.org/?path=/docs/components-table--docs)
### Linechart
@@ -139,31 +140,16 @@ Example usage:
```js
+/>
```
->[!info]
+> [!info]
> More info on the [storybook page](https://storybook.portaljs.org/?path=/docs/components-linechart--docs)
### Vega chart
@@ -179,30 +165,30 @@ Example usage:
table: [
{
x: 1850,
- y: -0.418
+ y: -0.418,
},
{
x: 2020,
- y: 0.923
- }
- ]
+ y: 0.923,
+ },
+ ],
}}
spec={{
$schema: 'https://vega.github.io/schema/vega-lite/v4.json',
data: {
- name: 'table'
+ name: 'table',
},
encoding: {
x: {
field: 'x',
- type: 'ordinal'
+ type: 'ordinal',
},
y: {
field: 'y',
- type: 'quantitative'
- }
+ type: 'quantitative',
+ },
},
- mark: 'bar'
+ mark: 'bar',
}}
/>
```
@@ -222,35 +208,35 @@ Example usage:
table: [
{
x: 1850,
- y: -0.418
+ y: -0.418,
},
{
x: 2020,
- y: 0.923
- }
- ]
+ y: 0.923,
+ },
+ ],
}}
spec={{
$schema: 'https://vega.github.io/schema/vega-lite/v4.json',
data: {
- name: 'table'
+ name: 'table',
},
encoding: {
x: {
field: 'x',
- type: 'ordinal'
+ type: 'ordinal',
},
y: {
field: 'y',
- type: 'quantitative'
- }
+ type: 'quantitative',
+ },
},
- mark: 'bar'
+ mark: 'bar',
}}
/>
```
->[!info]
+> [!info]
> More info on the [storybook page](https://storybook.portaljs.org/?path=/docs/components-vegalite--docs)
### Catalog
@@ -269,28 +255,21 @@ Example usage:
metadata: {
'details-of-task': 'Detect and categorise abusive language in social media data',
language: 'Albanian',
- 'level-of-annotation': [
- 'Posts'
- ],
+ 'level-of-annotation': ['Posts'],
'link-to-data': 'https://doi.org/10.6084/m9.figshare.19333298.v1',
'link-to-publication': 'https://arxiv.org/abs/2107.13592',
- medium: [
- 'Text'
- ],
+ medium: ['Text'],
'percentage-abusive': 13.2,
- platform: [
- 'Instagram',
- 'Youtube'
- ],
+ platform: ['Instagram', 'Youtube'],
reference: 'Nurce, E., Keci, J., Derczynski, L., 2021. Detecting Abusive Albanian. arXiv:2107.13592',
'size-of-dataset': 11874,
'task-description': 'Hierarchical (offensive/not; untargeted/targeted; person/group/other)',
- title: 'Detecting Abusive Albanian'
+ title: 'Detecting Abusive Albanian',
},
- url_path: 'dataset-4'
+ url_path: 'dataset-4',
},
]}
- />
+/>
```
You can also add facets that are going to act as filters for your metadata.
@@ -305,30 +284,23 @@ You can also add facets that are going to act as filters for your metadata.
metadata: {
'details-of-task': 'Detect and categorise abusive language in social media data',
language: 'Albanian',
- 'level-of-annotation': [
- 'Posts'
- ],
+ 'level-of-annotation': ['Posts'],
'link-to-data': 'https://doi.org/10.6084/m9.figshare.19333298.v1',
'link-to-publication': 'https://arxiv.org/abs/2107.13592',
- medium: [
- 'Text'
- ],
+ medium: ['Text'],
'percentage-abusive': 13.2,
- platform: [
- 'Instagram',
- 'Youtube'
- ],
+ platform: ['Instagram', 'Youtube'],
reference: 'Nurce, E., Keci, J., Derczynski, L., 2021. Detecting Abusive Albanian. arXiv:2107.13592',
'size-of-dataset': 11874,
'task-description': 'Hierarchical (offensive/not; untargeted/targeted; person/group/other)',
- title: 'Detecting Abusive Albanian'
+ title: 'Detecting Abusive Albanian',
},
- url_path: 'dataset-4'
+ url_path: 'dataset-4',
},
]}
facets={['platform', 'language']}
- />
+/>
```
-
->[!info]
+
+> [!info]
> More info on the [storybook page](https://storybook.portaljs.org/?path=/docs/components-catalog--docs)
diff --git a/site/content/howtos/index.md b/site/content/howtos/index.md
index c73760e8..58f3b721 100644
--- a/site/content/howtos/index.md
+++ b/site/content/howtos/index.md
@@ -1,5 +1,6 @@
---
title: Guides and Tutorials
+description: Learn more about how you can achieve different data portal features with PortalJS
---
- [[howtos/analytics|How to add web analytics?]]
diff --git a/site/content/howtos/markdown.md b/site/content/howtos/markdown.md
index ea295f71..b358f81e 100644
--- a/site/content/howtos/markdown.md
+++ b/site/content/howtos/markdown.md
@@ -1,4 +1,7 @@
-# How to add markdown-based content pages?
+---
+title: How to add markdown-based content pages?
+description: Learn how to add markdown-based content pages on PortalJS data portals
+---
## Add content layer to your app
diff --git a/site/content/howtos/seo.md b/site/content/howtos/seo.md
index 42d3c544..cc272160 100644
--- a/site/content/howtos/seo.md
+++ b/site/content/howtos/seo.md
@@ -1,4 +1,7 @@
-# How to customize page metadata for SEO?
+---
+title: How to customize page metadata for SEO?
+description: Learn to customize page metadata for SEO on data portals with PortalJS
+---
>[!info]
>See [`next-seo` documentation](https://github.com/garmeeh/next-seo) to learn more.
@@ -76,4 +79,4 @@ export default function Page() (
```
>[!info]
-> To learn more on per-page SEO configuration with `next-seo`, see [this docs section](https://github.com/garmeeh/next-seo#add-seo-to-page)
\ No newline at end of file
+> To learn more on per-page SEO configuration with `next-seo`, see [this docs section](https://github.com/garmeeh/next-seo#add-seo-to-page)
diff --git a/site/content/howtos/sitemap.md b/site/content/howtos/sitemap.md
index 1f63daa5..c552e78b 100644
--- a/site/content/howtos/sitemap.md
+++ b/site/content/howtos/sitemap.md
@@ -1,4 +1,7 @@
-# How to build a sitemap?
+---
+title: How to build a sitemap?
+description: Learn how to build a sitemap for a data portal with PortalJS
+---
## Setup
@@ -91,4 +94,4 @@ Add this to the scripts section in your `package.json` to regenerate the sitemap
"prebuild": "node ./scripts/sitemap.mjs",
-```
\ No newline at end of file
+```
diff --git a/site/pages/[...slug].tsx b/site/pages/[...slug].tsx
index 8f3d72f0..3a61a008 100644
--- a/site/pages/[...slug].tsx
+++ b/site/pages/[...slug].tsx
@@ -12,6 +12,7 @@ import { GetStaticProps, GetStaticPropsResult } from 'next';
import { CustomAppProps } from './_app.jsx';
import computeFields from '@/lib/computeFields';
import { getAuthorsDetails } from '@/lib/getAuthorsDetails';
+import JSONLD from '@/components/JSONLD';
export default function Page({ source, meta, sidebarTree }) {
source = JSON.parse(source);
@@ -29,14 +30,18 @@ export default function Page({ source, meta, sidebarTree }) {
}, [router.asPath]); // update table of contents on route change with next/link
return (
-
-
-
+ <>
+
+
+
+
+
);
}
diff --git a/site/pages/blog.tsx b/site/pages/blog.tsx
index 9a723cba..fee33424 100644
--- a/site/pages/blog.tsx
+++ b/site/pages/blog.tsx
@@ -3,12 +3,15 @@ import computeFields from '@/lib/computeFields';
import clientPromise from '@/lib/mddb';
import { BlogsList, SimpleLayout } from '@portaljs/core';
import * as fs from 'fs';
-import {NextSeo} from 'next-seo';
+import { NextSeo } from 'next-seo';
export default function Blog({ blogs }) {
return (
<>
-
+
@@ -50,12 +53,9 @@ export async function getStaticProps() {
const blogList = await Promise.all(blogsWithComputedFields);
const blogsSorted = blogList.sort(
- (a, b) =>
- new Date(b?.date).getTime() -
- new Date(a?.date).getTime()
+ (a, b) => new Date(b?.date).getTime() - new Date(a?.date).getTime()
);
-
return {
props: {
blogs: blogsSorted,
diff --git a/site/pages/index.tsx b/site/pages/index.tsx
index 275bc8e1..1222c57a 100644
--- a/site/pages/index.tsx
+++ b/site/pages/index.tsx
@@ -8,6 +8,7 @@ import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { collectHeadings } from '@portaljs/core';
import Head from 'next/head';
+import { LogoJsonLd } from 'next-seo';
export default function Home({ sidebarTree }) {
const router = useRouter();
@@ -24,6 +25,10 @@ export default function Home({ sidebarTree }) {
return (
<>
+