diff --git a/datahub-cloud/Add sidebar navigation.md b/datahub-cloud/Add sidebar navigation.md
new file mode 100644
index 0000000..5b163f7
--- /dev/null
+++ b/datahub-cloud/Add sidebar navigation.md
@@ -0,0 +1,21 @@
+---
+title: "Add sidebar navigation"
+---
+
+
+
A well-structured sidebar can significantly enhance the usability and navigability of your documentation or data site. With Datahub Cloud, you can easily implement sidebar navigation to help users quickly find and access the content they need. This section will guide you through the steps to add and customize a sidebar for your site.
+
+
With Datahub Cloud, you can easily add various visual and data-rich components to your datasets or data stories, making them more engaging and insightful. This section will guide you through the process of incorporating charts, graphs, and other visual elements to bring your data to life.
+
+
My Musings & Memories
🧘♀️🏄♀️🏔️
+
Welcome to my personal corner of the web, where I'll be sharing my thoughts, travel experiences, coding projects, and much more!
+
See my blog
+
+
My Musings & Memories 🧘♀️🏄♀️🏔️
+
Welcome to my personal corner of the web, where I'll be sharing my thoughts, travel experiences, coding projects, and much more!
+
See my blog
+
`
+
+**Example:**
+
+```md
+---
+---
+
+---
+```
+
+**Renders as:**
+
+---
+
+---
+
+---
+
+### Headings
+
+Markdown headings will be converted to HTML ``-`` tags.
+
+**Example:**
+
+```md
+# Heading 1
+
+...
+
+###### Heading 6
+```
+
+**Renders as:**
+All the headings on this page 🙂.
+
+### Emphasis
+
+**I'm Bold!** is done using `**I'm Bold!**`
+**I'm Bold!** is done using `__I'm Bold!__`
+
+*I'm Italic!* is done using `*I'm Italic!*`
+*I'm Italic!* is done using `_I'm Italic!_`
+
+### Fenced code blocks with code highlighting
+
+Code blocks created with backtics will be parsed as `pre` tags with support for code highlighting in respective languages and copy/paste button included on hover.
+
+**Javascript example:**
+
+```javascript {2}
+const ExampleCode = () => {
+ return
....
;
+};
+```
+
+**Python example:**
+
+```python {3}
+class Example:
+ def code(self,test):
+ return 'Code highlighter'
+```
+
+**Bash example:**
+
+```bash
+git commit && git push
+```
+
+### Blockquotes
+
+**Example:**
+
+```md
+> Roses are red, violets are blue.
+```
+
+**Renders as:**
+
+> Roses are red, violets are blue.
+
+### Lists
+
+**Example:**
+
+```md
+- one
+- two
+
+1. one
+2. two
+ - one
+ - two
+```
+
+**Renders as:**
+
+- one
+- two
+
+1. one
+2. two
+ - one
+ - two
+
+### Inline code
+
+**Example:**
+
+```md
+Here is some code: `print("hello world!")`
+```
+
+**Renders as:**
+
+Here is some code: `print("hello world!")`
+
+### Links
+
+**Example:**
+
+```md
+[Link to roadmap](/docs/roadmap)
+```
+
+**Renders as:**
+
+[Link to roadmap](/docs/roadmap)
+
+### Images
+
+**Example:**
+
+```md
+
+```
+
+**Renders as:**
+
+
+
+> [!NOTE]
+> 🔍 To learn more about the Markdown syntax refer to the [CommonMark specification](https://spec.commonmark.org/0.30/).
+
+---
+
+## GitHub Flavored Markdown (GFM) extensions
+
+### Tables
+
+**Example:**
+
+```md
+| Left | Center | Right |
+| :--- | :----: | ----: |
+| 1 | 2 | 3 |
+```
+
+**Renders as:**
+
+| Left | Center | Right |
+| :--- | :----: | ----: |
+| 1 | 2 | 3 |
+
+### Task lists
+
+**Example:**
+
+```md
+- [x] one thing to do
+- [ ] a second thing to do
+ - [ ] another thing to do!
+```
+
+**Renders as:**
+
+- [x] one thing to do
+- [ ] a second thing to do
+ - [ ] another thing to do!
+
+### Strikethrough
+
+~~I'm CrossedOut!~~ is done using `~~I'm CrossedOut!~~`
+
+### Autolinks
+
+**Example:**
+
+```md
+Check out Flowershow at https://flowershow.app!
+```
+
+**Renders as:**
+
+Check out Flowershow at https://flowershow.app!
+
+> [!NOTE]
+> 🔍 To learn more about the GitHub Flavored Markdown syntax refer to the [GFM specification](https://github.github.com/gfm/).
+
+---
+
+## Other extensions
+
+### Obisidian internal links (Wiki links)
+
+Wiki links are hyperlinks that give one-click access to other pages on the site. These are usually denoted with double square brackets `[[some_page]]` and Obsidian would generate the reference to that page automatically.
+
+Flowershow will convert internal links to HTML `a` tags, with their `href` attributes pointing to the location referenced by original internal links.
+
+**Internal link types**
+
+- Link to a page, e.g. `[[/docs/blog]]`, which renders as [[/docs/blog]]
+- Link to a page with a custom name, e.g. `[[/docs/blog|Blog support]]`, which renders as [[/docs/blog|Blog support]]
+- Link to a specific heading within a given page `[[/docs/blog#Blog author frontmatter fields]]`, which renders as [[/docs/blog#Blog author frontmatter fields]]
+- Link to a specific heading within a given page with a custom name, e.g. `[[/docs/blog#Blog author frontmatter fields|Some alias]]` which renders as [[/docs/blog#Blog author frontmatter fields|Some alias]]
+- Link to an image file with supported image formats - png, jpg and jpeg, eg. `![[/assets/images/park.png]]` which renders as:
+ ![[park.png]]
+- 🚧 Link to a specific block (paragraph) within a given page, e.g. `[[/docs/blog#f93ba0]]`
+
+> [!note]
+> Note, that Flowershow will also handle Obsidian wiki links with "shortest path when possible" setting.
+
+### Footnotes
+
+**Example:**
+
+```md
+Roses are red... [^1]
+
+[^1]: ...violets are blue.
+```
+
+Roses are red... [^1]
+
+[^1]: ...violets are blue.
+
+### Math
+
+**Example:**
+
+```md
+$$\begin{vmatrix}a & b\\ c & d \end{vmatrix}=ad-bc$$
+```
+
+**Renders as:**
+
+$$\begin{vmatrix}a & b\\ c & d \end{vmatrix}=ad-bc$$
+
+### Dashes/Ellipse
+
+Two '-' will convert to ndash. Three '-' will convert to mdash. Three '.' with or without spacing will convert to ellipse.
+
+**Example:**
+
+```md
+--ndash
+---mdash
+...ellipse
+. . .another ellipse
+```
+
+**Renders as:**\
+–ndash\
+—mdash\
+...ellipse\
+...another ellipse
+
+### PDF embedding
+
+**Example:**
+
+```md
+![[sample.pdf]]
+```
+
+**Renders as:**
+![[sample.pdf]]
+
+## Callouts
+
+**Example:**
+
+```md
+> [!info] This is cool!
+> Here's a callout block.
+> It supports **markdown** and [[Internal link|wikilinks]].
+```
+
+**Renders as:**
+
+> [!info] This is cool!
+> Here's a callout block.
+> It supports **markdown** and [[docs/index|wikilinks]].
+
+### Supported Types:
+
+Flowershow supports 13 different Obsidian callout types (with aliases) like note, abstract, todo, or tip. See this [Obsidian docs page](https://help.obsidian.md/How+to/Use+callouts) to learn more about different callout types.
+
+- note
+- tip (alias: hint, important)
+- warning (alias: caution, attention)
+- abstract (alias: summary, tldr)
+- info
+- todo
+- success (alias: check, done)
+- question (alias: help, faq)
+- failure (alias: fail, missing)
+- danger (alias: error)
+- bug
+- example
+- quote (alias: cite)
+
+### 🚧 Text highlighting
+
+==I'm Highlighted!== is done using `==I'm Highlighted!==`
+
+### 🚧 Excalidraw sketches support
+
+Displaying embedded [Excalidraw](https://excalidraw.com/) sketches.
+
+**Example:**
+
+```md
+![[customizability-vs-upgradeability-efficient-frontier-2022-06-26]]
+```
+
+**Renders as:**
+![[customizability-vs-upgradeability-efficient-frontier-2022-06-26]]
+
+### 🚧 Comments
+
+**Example:**
+
+```md
+Here is some inline comments: %%You can't see this text%%
+
+Here is a block comment:
+%%
+It can span
+multiple lines
+%%
+```
+
+**Renders as:**
+
+Here is some inline comments: %%You can't see this text%%
+
+Here is a block comment:
+%%
+It can span
+multiple lines
+%%
diff --git a/datahub-cloud/Publish data-rich stories.md b/datahub-cloud/Publish data-rich stories.md
new file mode 100644
index 0000000..fae6d8a
--- /dev/null
+++ b/datahub-cloud/Publish data-rich stories.md
@@ -0,0 +1,402 @@
+---
+title: Publish data-rich stories with DataHub Cloud
+---
+
+In this tutorial, we are going to cover the basics of creating and publishing data-rich documents.
+
+### But wait, what is a data-rich story?
+
+A data-rich story is a document in which the writer can easily mix formatted text content with data visualizations. This means that you don't have to code nor embed your charts and tables, those can be added to the document with a very simple syntax, passing inline-data or simply referencing your data files. What you end up with is a plain text, human-readable document which is simple to edit and looks awesome when rendered in DataHub!
+
+### What does this syntax look like?
+
+The structure and text formatting of the documents are created with markdown (take a look at [this guide](https://www.datopian.com/playbook/markdown) to learn more about markdown). But it's not simply markdown, it's markdown on steroids: writers are capable of easily adding tables of content, mathematical formulas, data visualizations and more!
+
+
+
+And guess what? What you are reading right now is a data-rich document powered by DataHub, that's why we can do this:
+
+
+
+Awesome, right? Even more awesome is that this chart is created by simply having the following snippet in this document:
+
+```
+
+```
+
+You can check out the full source of the data rich document you are reading [here](https://github.com/datahubio/tutorial).
+
+More on how to create charts and tables later, but now, this must be coming from somewhere, right?
+
+### What is a DataHub project?
+
+A DataHub project is simply a GitHub repo with a README and, potentially, data files. That's right: you can take advantage of everything that GitHub offers in terms of revisioning, changes history and so on and transform your repo into a data rich document.
+
+Imagine how cool it would be to store your reports, datasets and analysis in this format. Now, let's learn how to actually do it.
+
+
+## Steps
+
+### Create a GitHub repo
+
+First, create a repo under your organisation or user in GitHub. DataHub currently does not support private repos, so make sure this new repo is public.
+
+### Push a `README.md` file to the repo
+
+Now, let's start with creating a `README.md` file. In this file, feel free to use anything that markdown has to offer. For this tutorial, we are going to use the following basic structure:
+
+```markdown
+# Data-rich story
+
+## Table
+
+## Chart
+```
+
+### Add a table
+
+Let's add a table to the `README.md` file. Under the `## Table` header in your file, add the following snippet:
+
+```mdx
+
+```
+
+Here's what it's going to look like:
+
+
+
+### Add a chart
+
+Now, let's add a graph to the README file. To keep it simple, we are going to use the LineChart component in this tutorial. Add the following snippet to your README file under the `## Chart` header:
+
+```mdx
+
+```
+
+This is what it will look like when rendered:
+
+
+
+### Final document
+
+At this point, your document should look like this:
+
+```markdown
+# Data-rich story
+
+## Table
+
+
+
+## Chart
+
+
+```
+
+We now have a README file ready to be published with DataHub Cloud!
+
+### Optional steps
+
+You can add as many markdown files to your GitHub repository as you like, and you can freely nest them in subdirectories. You can also enhance your content with other data visualisation components and markdown features.
+
+
+
+
+
+
+### Publish with DataHub
+
+1. Sign in to https://cloud.datahub.io/
+2. Click on "Create new site".
+3. Select your GitHub user/organisation.
+4. Select the repository you've just created and the branch you want to build your site off of.
+5. Click on "Create Site".
+6. Done! Now visit your site by clicking on the URL at the top of the site settings page.
+
+[👀 See an example data-rich document rendered with DataHub](https://datahub.io/@Daniellappv/datarich-demo-newest/posts/story1)
+
+___
+
+Cool, isn't it? Get in contact with us and let us know what you think! [Join our Discord](https://discord.gg/URNSkepK7z)
diff --git a/datahub-cloud/README.md b/datahub-cloud/README.md
new file mode 100644
index 0000000..262713a
--- /dev/null
+++ b/datahub-cloud/README.md
@@ -0,0 +1,98 @@
+---
+title: ➡ Documentation
+---
+
+
+
Datahub Cloud is your stupidly simple and fast tool for turning your data stories or datasets on GitHub into a published, shareable site. It converts raw data and Markdown files into beautifully presented, interactive sites.
+