diff --git a/site/content/data-literate.md b/site/content/data-literate.md deleted file mode 100644 index 3901566e..00000000 --- a/site/content/data-literate.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Data Literate Documents -author: Rufus Pollock and Friends ---- - -**What?** An experiment in simple, lightweight approach to creating, displaying and sharing datasets and data-driven stories. - -**Why?** a simple, fast, extensible way to present data(sets) and author data-driven content. I want to work with markdown for content and quickly add data in the simplest way possible e.g. dropping in links, pasting tables or adding links to the metadata. - -**How?** Technically the essence is Markdown+React (MDX) + a curated toolkit of components for data-presentation + NextJS for framework and deployment. - -Check out the [demo](/data-literate/demo). - -## Background - -I have observed two converging data-rich use cases: - -* **Data Publishing**: quickly presenting data whether a single file or a full dataset. -* **Data Stories**: creating data-driven content from the simplest of a blog post with a graph to high end there is sophisticated data journalism and visualization. - -Both of these can now be well served by a simple markdown-plus approach. Taking data publishing first. I've long been a fan of ultra-simple `README + metadata + csv` datasets. With the evolution of frontmatter we can merge the metadata into the README. However, we still need to "present" the dataset and the key thing for a dataset is the data and this is not something markdown ever supported well ... But now with MDX and the richness of the javascript ecosystem it's quite easy to enhance our markdown and build a rendering pipeleine. diff --git a/site/content/data-literate/demo.mdx b/site/content/data-literate/demo.mdx deleted file mode 100644 index 63ff21b7..00000000 --- a/site/content/data-literate/demo.mdx +++ /dev/null @@ -1,268 +0,0 @@ ---- -title: Demo ---- - -This demos and documents Data Literate features live. - -You can see the raw source of this page here: https://raw.githubusercontent.com/datopian/data-literate/main/content/demo.mdx - -## Table of Contents - -## GFM - -We can have github-flavored markdown including markdown tables, auto-linked links and checklists: - -``` -https://github.com/datopian/portaljs - -| a | b | -|---|---| -| 1 | 2 | - -* [x] one thing to do -* [ ] a second thing to do -``` - -https://github.com/datopian/portaljs - -| a | b | -|---|---| -| 1 | 2 | - -* [x] one thing to do -* [ ] a second thing to do - -## Footnotes - -``` -here is a footnote reference[^1] - -[^1]: a very interesting footnote. -``` - -here is a footnote reference[^1] - -[^1]: a very interesting footnote. - - -## Frontmatter - -Posts can have frontmatter like: - -``` ---- -title: Hello World -author: Rufus Pollock ---- -``` - -The title and description are pulled from the MDX file and processed using `gray-matter`. Additionally, links are rendered using a custom component passed to `next-mdx-remote`. - -## A Table of Contents - -You can create a table of contents by having a markdown heading named `Table of Contents`. You can see an example at the start of this post. - - -## A Table - -You can create tables ... - -``` - -``` - -
- -### Table from Raw CSV - -You can also pass raw CSV as the content ... - -``` -
-``` - -
- -### Table from a URL - -
- -``` -
-``` - -## Charts - -You can create charts using a simple syntax. - -### Line Chart - - - -``` - -``` - -NB: we have quoted years as otherwise not interpreted as dates but as integers ... - - -### Vega and Vega Lite - -You can using vega or vega-lite. Here's an example using vega-lite: - - - - -```jsx - - -``` - -#### Line Chart from URL with Tooltip - -https://vega.github.io/vega-lite/examples/interactive_multi_line_pivot_tooltip.html - - - -## Display Excel Files - -Local file ... - -``` - -``` - - - -Remote files work too (even without CORS) thanks to proxying: - -``` - -``` - - diff --git a/site/content/docs/sidebar.json b/site/content/docs/sidebar.json index 3288439f..c2649c50 100644 --- a/site/content/docs/sidebar.json +++ b/site/content/docs/sidebar.json @@ -23,5 +23,18 @@ "href": "/docs/deploying-your-portaljs-app" } ] + }, + { + "name": "Examples", + "children": [ + { + "name": "Data Catalog w/ CKAN datasets", + "href": "/docs/examples/example-ckan" + }, + { + "name": "Data Catalog w/ GitHub datasets", + "href": "/docs/examples/example-data-catalog" + } + ] } ] diff --git a/site/content/gallery.md b/site/content/gallery.md deleted file mode 100644 index d306df50..00000000 --- a/site/content/gallery.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Gallery ---- - -Come back soon! diff --git a/site/pages/blog.tsx b/site/pages/blog.tsx index 2926534a..f1dc6d79 100644 --- a/site/pages/blog.tsx +++ b/site/pages/blog.tsx @@ -1,6 +1,8 @@ import Layout from '@/components/Layout'; +import computeFields from '@/lib/computeFields'; import clientPromise from '@/lib/mddb'; import { BlogsList, SimpleLayout } from '@flowershow/core'; +import * as fs from 'fs'; export default function Blog({ blogs }) { return ( @@ -32,19 +34,29 @@ export async function getStaticProps() { blogs = [...blogs, ...docs]; - const blogsSorted = blogs.sort( + const blogsWithComputedFields = blogs.map(async (blog) => { + const source = fs.readFileSync(blog.file_path, { encoding: 'utf-8' }); + + return await computeFields({ + frontMatter: blog.metadata, + urlPath: blog.url_path, + filePath: blog.file_path, + source, + }); + }); + + const blogList = await Promise.all(blogsWithComputedFields); + + const blogsSorted = blogList.sort( (a, b) => - new Date(b.metadata.date).getTime() - new Date(a.metadata.date).getTime() + new Date(b.metadata?.date).getTime() - + new Date(a.metadata?.date).getTime() ); - // Temporary, flowershow/BlogsList expects the contentlayer fields - const blogsObjects = blogsSorted.map((b) => { - return { ...b, ...b.metadata }; - }); return { props: { - blogs: blogsObjects, + blogs: blogsSorted, }, }; }