feat(site,blog): add new blog post about the OpenSpending revamp

packages/components/stories/FlatUiTable.stories.ts

@@ -64,6 +64,6 @@ export const FromRawCSV: Story = {
 export const FromURL: Story = {
   name: 'Table from URL',
   args: {
-    url: 'https://ckan-dev.sse.datopian.com/datastore/dump/601c9cf0-595e-46d8-88fc-d1ab2904e2db',
+    url: 'https://storage.openspending.org/alberta-budget/__os_imported__alberta_total.csv',
   },
 };

site/content/blog/markdowndb-launch.md

@@ -0,0 +1,148 @@
+---
+title: 'Announcing MarkdownDB: an open source tool to create an SQL API to your markdown files! 🚀'
+description: MarkdownDB - an open source library to transform markdown content into sql-queryable data. Build rich markdown-powered sites easily and reliably. New dedicated website at markdowndb.com
+date: 2023-10-11
+authors: ['Ola Rubaj']
+---
+
+Hello, dear readers!
+
+We're excited to announce the official launch of MarkdownDB, an open source library to transform markdown content into sql-queryable data. Get a rich SQL API to your markdown files in seconds and build rich markdown-powered sites easily and reliably.
+
+We've also created a new dedicated website:
+
+https://markdowndb.com/
+
+## 🔍 What is MarkdownDB?
+
+MarkdownDB transforms your Markdown content into a queryable, lightweight SQLite database. Imagine being able to treat your collection of markdown files like entries in a database! Ever thought about fetching documents with specific tags or created in the past week? Or, say, pulling up all tasks across documents marked with the "⏭️" emoji? With MarkdownDB, all of this (and more) is not just possible, but a breeze.
+
+## 🌟 Features
+
+- Rich metadata extracted including frontmatter, links and more.
+- Lightweight and fast indexing 1000s of files in seconds.
+- Open source and extensible via plugin system.
+
+## 🚀 How it works
+
+### You have a folder of markdown content
+
+For example, your blog posts. Each file can have a YAML frontmatter header with metadata like title, date, tags, etc.
+
+```md
+---
+title: My first blog post
+date: 2021-01-01
+tags: [a, b, c]
+author: John Doe
+---
+
+# My first blog post
+
+This is my first blog post.
+I'm using MarkdownDB to manage my blog posts.
+```
+
+### Index the files with MarkdownDB
+
+Use the npm `mddb` package to index Markdown files into an SQLite database. This will create a `markdown.db` file in the current directory.
+
+```bash
+# npx mddb <path-to-folder-with-your-md-files>
+npx mddb ./blog
+```
+
+### Query your files with SQL...
+
+E.g. get all the files with with tag `a`.
+
+```sql
+SELECT files.*
+FROM files
+INNER JOIN file_tags ON files._id = file_tags.file
+WHERE file_tags.tag = 'a'
+```
+
+### ...or using MarkdownDB Node.js API in a framework of your choice!
+
+Use our Node API to query your data for your blog, wiki, docs, digital garden, or anything you want!
+
+E.g. here is an example of a Next.js page:
+
+```js
+// @/pages/blog/index.js
+import React from 'react';
+import clientPromise from '@/lib/mddb.mjs';
+
+export default function Blog({ blogs }) {
+  return (
+    <div>
+      <h1>Blog</h1>
+      <ul>
+        {blogs.map((blog) => (
+          <li key={blog.id}>
+            <a href={blog.url_path}>{blog.title}</a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export const getStaticProps = async () => {
+  const mddb = await clientPromise;
+  // get all files that are not marked as draft in the frontmatter
+  const blogFiles = await mddb.getFiles({
+    frontmatter: {
+      draft: false,
+    },
+  });
+
+  const blogsList = blogFiles.map(({ metadata, url_path }) => ({
+    ...metadata,
+    url_path,
+  }));
+
+  return {
+    props: {
+      blogs: blogsList,
+    },
+  };
+};
+```
+
+And the imported library with MarkdownDB database connection:
+
+```js
+// @/lib/mddb.mjs
+import { MarkdownDB } from 'mddb';
+
+const dbPath = 'markdown.db';
+
+const client = new MarkdownDB({
+  client: 'sqlite3',
+  connection: {
+    filename: dbPath,
+  },
+});
+
+const clientPromise = client.init();
+
+export default clientPromise;
+```
+
+### Build your blog, wiki, docs, digital garden, or anything you want
+
+And share it with the world!
+
+![[markdowbdb-launch-site-example.png]]
+
+👉 [Read the full tutorial](https://markdowndb.com/blog/basic-tutorial)
+
+---
+
+Find out more on our new official website: https://markdowndb.com/
+
+Check out the source on GitHub: https://github.com/datopian/markdowndb
+
+— Ola Rubaj, Developer at Datopian

site/content/blog/the-open-spending-revamp-behind-the-scenes.md

@@ -0,0 +1,34 @@
+---
+title: 'The OpenSpending Revamp: Behind the Scenes'
+date: 2023-10-13
+authors: ['Luccas Mateus', 'João Demenech']
+filetype: 'blog'
+---
+
+_This post was originally published on [the Datopian blog](http://datopian.com/blog/the-open-spending-revamp-behind-the-scenes)._
+
+In our last article, we explored [the Open Spending revamp](https://www.datopian.com/blog/the-open-spending-revamp). Now, let's dive into the tech stack that makes it tick. We'll unpack how PortalJS, Cloudflare R2, Frictionless Data Packages, and Octokit come together to power this next-level data portal. From our Javascript framework PortalJS, that shapes the user experience, to Cloudflare R2, the robust storage solution that secures the data, we'll examine how each piece of technology contributes to the bigger picture. We'll also delve into the roles of Frictionless Data Packages for metadata management and Octokit for automating dataset metadata retrieval. Read on for the inside scoop!
+
+## The Core: PortalJS
+
+At the core of the revamped OpenSpending website is [PortalJS](https://portaljs.org), a JavaScript library that's a game-changer in building powerful data portals with data visualizations. What makes it so special? Well, it's packed with reusable React components that make our lives - and yours - a whole lot easier. Take, for example, our sleek CSV previews; they're brought to life by PortalJS' [FlatUI Component](https://storybook.portaljs.org/?path=/story/components-flatuitable--from-url). It helps transform raw numbers into visuals that you can easily understand and use. Curious to know more? Check out the [official PortalJS website](https://portaljs.org).
+
+![Data visualization](/assets/blog/2023-10-13-the-open-spending-revamp-behind-the-scenes/data-visualization.png)
+
+## Metadata: Frictionless Data Packages
+
+Storing metadata might seem like a backstage operation, but it is pivotal. We chose Frictionless Data Packages, housed in the `os-data` GitHub organization as repositories, to serve this purpose. Frictionless Data Packages offer a simple but powerful format for cataloging and packaging a collection of data - in our scenario, that's primarily tabular data. These aren't merely storage bins - they align with FAIR principles, ensuring that the data is easily Findable, Accessible, Interoperable, and Reusable. This alignment positions them as an ideal solution for publishing datasets designed to be both openly accessible and highly usable. Learn more from their [official documentation](https://framework.frictionlessdata.io/).
+
+## The Link: Octokit
+
+Can you imagine having to manually gather metadata for each dataset from multiple GitHub repositories? Sounds tedious, right? That’s why we used Octokit, a GitHub API client for Node.js. This tool takes care of the heavy lifting, automating the metadata retrieval process for us. If you're intrigued by Octokit's capabilities, you can discover more in its [GitHub repository](https://github.com/octokit/octokit.js). To explore the datasets we've been working on, take a look at [OpenSpending Datasets](https://github.com/os-data).
+
+## Storage: Cloudflare R2
+
+When it comes to data storage, Cloudflare R2 emerges as our choice, defined by its blend of speed and reliability. This service empowers developers to securely store large amounts of blob data without the costly egress bandwidth fees associated with typical cloud storage services. For a comprehensive understanding of Cloudflare R2, their [blog post](https://cloudflare.net/news/news-details/2021/Cloudflare-Announces-R2-Storage-Rapid-and-Reliable-S3-Compatible-Object-Storage-Designed-for-the-Edge/default.aspx) serves as an excellent resource.
+
+## In Closing
+
+In closing, we invite you to explore the architecture and code that power this project. It's all openly accessible in our [GitHub repository](https://github.com/datopian/portaljs/tree/main/examples/openspending). Should you want to experience the end result firsthand, feel free to visit [openspending.org](https://www.openspending.org/). If you encounter any issues or have suggestions to improve the project, we welcome your contributions via our [GitHub issues page](https://github.com/datopian/portaljs/issues). For real-time assistance and to engage with our community, don't hesitate to join our [Discord Channel](https://discord.com/invite/EeyfGrGu4U). Thank you for taking the time to read about our work! We look forward to fostering a collaborative environment where knowledge is freely shared and continually enriched. ♥️
+
+![FlatUiTable Code Snippet](/assets/blog/2023-10-13-the-open-spending-revamp-behind-the-scenes/code-example.png)