knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[site,seo][s]: alt images, description and titles fixes for multiple pages

Browse Source
This commit is contained in:
João Demenech
2023-07-20 18:30:54 -03:00
parent d198130038
commit 03c27df800
12 changed files with 122 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
site/content/howtos/analytics.md
View File

@@ -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).
> For more info on measuring pageviews with Google Analytics see [Google Analytics documentation](https://developers.google.com/analytics/devguides/collection/gtagjs/pages).

5
site/content/howtos/blog.md
View File

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

5
site/content/howtos/comments.md
View File

@@ -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]]

182
site/content/howtos/drd.md
View File

@@ -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 (
<>
<MdxRemote source={source} components={components} />
</>
);
return (
<>
<MdxRemote source={source} components={components} />
</>
);
}
// 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
<LineChart
data={[
[
'1850',
-0.41765878
],
[
'1851',
-0.2333498
],
[
'1852',
-0.22939907
],
[
'1853',
-0.27035445
],
[
'1854',
-0.29163003
]
['1850', -0.41765878],
['1851', -0.2333498],
['1852', -0.22939907],
['1853', -0.27035445],
['1854', -0.29163003],
]}
/>
/>
```
>[!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)

5
site/content/howtos/markdown.md
View File

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

7
site/content/howtos/seo.md
View File

@@ -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)
> 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)

7
site/content/howtos/sitemap.md
View File

@@ -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",
```
```