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

Merge pull request #849 from datopian/tutorial-part-4

Browse Source 
[learn-example][m] - add extra metadata fields
This commit is contained in:
João Demenech 2023-05-04 22:31:52 -03:00 committed by GitHub
commit e52e789314
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 297 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

262
examples/learn-example/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

16
examples/learn-example/package.json
View File

@ -19,6 +19,7 @@
"@flowershow/remark-wiki-link": "^1.1.2",
"@heroicons/react": "^2.0.17",
"@opentelemetry/api": "^1.4.0",
"@portaljs/components": "^0.1.0",
"@tanstack/react-table": "^8.8.5",
"flexsearch": "0.7.21",
"gray-matter": "^4.0.3",
@ -39,19 +40,18 @@
"remark-math": "^5.1.1",
"remark-smartypants": "^2.0.0",
"remark-toc": "^8.0.1",
"typescript": "5.0.4",
"@portaljs/components": "^0.1.0"
"typescript": "5.0.4"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.9",
"@types/flexsearch": "^0.7.3",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.23",
"tailwindcss": "^3.3.1",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"@types/node": "18.16.0",
"@types/react": "18.2.0",
"@types/react-dom": "18.2.0"
"@types/react-dom": "18.2.0",
"autoprefixer": "^10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"postcss": "^8.4.23",
"tailwindcss": "^3.3.1"
}
}

60
examples/learn-example/pages/[[...path]].tsx
View File

@ -50,25 +50,71 @@ export const getStaticProps = async (context) => {
return {
props: {
mdxSource,
frontMatter,
frontMatter: JSON.stringify(frontMatter),
},
};
};
export default function DatasetPage({ mdxSource, frontMatter }) {
frontMatter = JSON.parse(frontMatter);
return (
<div className="prose dark:prose-invert mx-auto">
<div className="prose dark:prose-invert mx-auto py-8">
<header>
<div className="mb-6">
<>
<h1>{frontMatter.title}</h1>
<h1 className="mb-2">{frontMatter.title}</h1>
{frontMatter.author && (
<div className="-mt-6">
<p className="opacity-60 pl-1">{frontMatter.author}</p>
</div>
<p className="my-0">
<span className="font-semibold">Author: </span>
<span className="my-0">{frontMatter.author}</span>
</p>
)}
{frontMatter.description && (
<p className="description">{frontMatter.description}</p>
<p className="my-0">
<span className="font-semibold">Description: </span>
<span className="description my-0">
{frontMatter.description}
</span>
</p>
)}
{frontMatter.modified && (
<p className="my-0">
<span className="font-semibold">Modified: </span>
<span className="description my-0">
{new Date(frontMatter.modified).toLocaleDateString()}
</span>
</p>
)}
{frontMatter.files && (
<section className="py-6">
<h2 className="mt-0">Data files</h2>
<table className="table-auto">
<thead>
<tr>
<th>File</th>
<th>Format</th>
</tr>
</thead>
<tbody>
{frontMatter.files.map((f) => {
const fileName = f.split('/').slice(-1);
console.log(fileName);
return (
<tr key={`resources-list-${f}`}>
<td>
<a target="_blank" href={f}>
{fileName}
</a>
</td>
<td>
{fileName[0].split('.').slice(-1)[0].toUpperCase()}
</td>
</tr>
);
})}
</tbody>
</table>
</section>
)}
</>
</div>