From fad21eb7d75be30804ab4db7aabbdc7ba5083ae9 Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Mon, 19 Jun 2023 13:13:45 +0200
Subject: [PATCH 1/3] Test change

---
 packages/website/docs/docs/side-menu.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/website/docs/docs/side-menu.md b/packages/website/docs/docs/side-menu.md
index 0fef39f46c..243bc8bc67 100644
--- a/packages/website/docs/docs/side-menu.md
+++ b/packages/website/docs/docs/side-menu.md
@@ -16,7 +16,9 @@ const { isDark } = useData();
 
 The Block Side Menu appears whenever you hover over a block, and is used to drag & drop the block as well as add new ones below it.
 
+<ClientOnly>
 <img style="max-width:500px" :src="isDark ? '../public/img/screenshots/side_menu_dark.png' : '../public/img/screenshots/side_menu.png'" alt="image">
+</ClientOnly>
 
 You can also click the drag handle in the Block Side Menu (`⠿`) to open the Drag Handle Menu.
 

From 63ee50a406441fbe281c94a4ad6ef9722b3a9eb5 Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Mon, 19 Jun 2023 13:17:13 +0200
Subject: [PATCH 2/3] Test change

---
 packages/website/docs/docs/side-menu.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/website/docs/docs/side-menu.md b/packages/website/docs/docs/side-menu.md
index 243bc8bc67..abad88d3e7 100644
--- a/packages/website/docs/docs/side-menu.md
+++ b/packages/website/docs/docs/side-menu.md
@@ -16,9 +16,7 @@ const { isDark } = useData();
 
 The Block Side Menu appears whenever you hover over a block, and is used to drag & drop the block as well as add new ones below it.
 
-<ClientOnly>
-<img style="max-width:500px" :src="isDark ? '../public/img/screenshots/side_menu_dark.png' : '../public/img/screenshots/side_menu.png'" alt="image">
-</ClientOnly>
+<img style="max-width:500px" :src="'../public/img/screenshots/side_menu_dark.png'" alt="image">
 
 You can also click the drag handle in the Block Side Menu (`⠿`) to open the Drag Handle Menu.
 

From c6b91625ef2845aa0a6e0dacecebac03d13dfd91 Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Mon, 19 Jun 2023 13:47:07 +0200
Subject: [PATCH 3/3] Fixed screenshots in built env

---
 packages/website/docs/docs/block-types.md        | 8 ++++----
 packages/website/docs/docs/blocks.md             | 2 +-
 packages/website/docs/docs/formatting-toolbar.md | 2 +-
 packages/website/docs/docs/side-menu.md          | 7 ++++---
 packages/website/docs/docs/slash-menu.md         | 4 +---
 5 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/website/docs/docs/block-types.md b/packages/website/docs/docs/block-types.md
index e405533cdc..ebd4271375 100644
--- a/packages/website/docs/docs/block-types.md
+++ b/packages/website/docs/docs/block-types.md
@@ -24,7 +24,7 @@ BlockNote includes a number of built-in block types, each with their own set of
 
 **Appearance**
 
-<img :src="isDark ? '../public/img/screenshots/paragraph_type_dark.png' : '../public/img/screenshots/paragraph_type.png'" alt="image" style="height: 29px">
+<img :src="isDark ? '/img/screenshots/paragraph_type_dark.png' : '/img/screenshots/paragraph_type.png'" alt="image" style="height: 29px">
 
 **Type & Props**
 
@@ -42,7 +42,7 @@ type ParagraphBlock = {
 
 **Appearance**
 
-<img :src="isDark ? '../public/img/screenshots/heading_type_dark.png' : '../public/img/screenshots/heading_type.png'" alt="image" style="height: 77px">
+<img :src="isDark ? '/img/screenshots/heading_type_dark.png' : '/img/screenshots/heading_type.png'" alt="image" style="height: 77px">
 
 **Type & Props**
 
@@ -64,7 +64,7 @@ type HeadingBlock = {
 
 **Appearance**
 
-<img :src="isDark ? '../public/img/screenshots/bullet_list_item_type_dark.png' : '../public/img/screenshots/bullet_list_item_type.png'" alt="image" style="height: 29px">
+<img :src="isDark ? '/img/screenshots/bullet_list_item_type_dark.png' : '/img/screenshots/bullet_list_item_type.png'" alt="image" style="height: 29px">
 
 **Type & Props**
 
@@ -82,7 +82,7 @@ type BulletListItemBlock = {
 
 **Appearance**
 
-<img :src="isDark ? '../public/img/screenshots/numbered_list_item_type_dark.png' : '../public/img/screenshots/numbered_list_item_type.png'" alt="image" style="height: 29px">
+<img :src="isDark ? '/img/screenshots/numbered_list_item_type_dark.png' : '/img/screenshots/numbered_list_item_type.png'" alt="image" style="height: 29px">
 
 **Type & Props**
 
diff --git a/packages/website/docs/docs/blocks.md b/packages/website/docs/docs/blocks.md
index d4f12e3510..361df43aa5 100644
--- a/packages/website/docs/docs/blocks.md
+++ b/packages/website/docs/docs/blocks.md
@@ -45,7 +45,7 @@ function App() {
 
 So, BlockNote is centered around the idea of blocks. A block - like a heading, paragraph, or list item - contains a piece of content and optionally nested blocks:
 
-<img :src="isDark ? '../public/img/screenshots/block_structure_dark.png' : '../public/img/screenshots/block_structure.png'" alt="image" style="width: 100%">
+<img :src="isDark ? '/img/screenshots/block_structure_dark.png' : '/img/screenshots/block_structure.png'" alt="image" style="width: 100%">
 
 In code, the `Block` type is used to describe any given block in the editor:
 
diff --git a/packages/website/docs/docs/formatting-toolbar.md b/packages/website/docs/docs/formatting-toolbar.md
index 1d7fac7c99..881ba087f1 100644
--- a/packages/website/docs/docs/formatting-toolbar.md
+++ b/packages/website/docs/docs/formatting-toolbar.md
@@ -16,7 +16,7 @@ const { isDark } = useData();
 
 The Formatting Toolbar appears whenever you highlight text in the editor, and is mainly used for styling.
 
-<img style="max-width:600px" :src="isDark ? '../public/img/screenshots/formatting_toolbar_dark.png' : '../public/img/screenshots/formatting_toolbar.png'" alt="image">
+<img style="max-width:600px" :src="isDark ? '/img/screenshots/formatting_toolbar_dark.png' : '/img/screenshots/formatting_toolbar.png'" alt="image">
 
 ## Custom Formatting Toolbar
 
diff --git a/packages/website/docs/docs/side-menu.md b/packages/website/docs/docs/side-menu.md
index abad88d3e7..d6d2733a66 100644
--- a/packages/website/docs/docs/side-menu.md
+++ b/packages/website/docs/docs/side-menu.md
@@ -7,7 +7,8 @@ path: /docs/side-menu
 
 <script setup>
 import { useData } from 'vitepress';
-import { getTheme, getStyles } from "./demoUtils";
+import { getTheme, getStyles } from "./demoUtils"; 
+import {ref} from "vue"; 
 
 const { isDark } = useData();
 </script>
@@ -16,11 +17,11 @@ const { isDark } = useData();
 
 The Block Side Menu appears whenever you hover over a block, and is used to drag & drop the block as well as add new ones below it.
 
-<img style="max-width:500px" :src="'../public/img/screenshots/side_menu_dark.png'" alt="image">
+<img style="max-width:500px" :src="isDark ? '/img/screenshots/side_menu_dark.png' : '/img/screenshots/side_menu.png'" alt="image">
 
 You can also click the drag handle in the Block Side Menu (`⠿`) to open the Drag Handle Menu.
 
-<img style="max-width:250px" :src="isDark ? '../public/img/screenshots/drag_handle_menu_dark.png' : '../public/img/screenshots/drag_handle_menu.png'" alt="image">
+<img style="max-width:250px" :src="isDark ? '/img/screenshots/drag_handle_menu_dark.png' : '/img/screenshots/drag_handle_menu.png'" alt="image">
 
 ## Custom Drag Handle Menu
 
diff --git a/packages/website/docs/docs/slash-menu.md b/packages/website/docs/docs/slash-menu.md
index dc30f3fd1d..272e6c1458 100644
--- a/packages/website/docs/docs/slash-menu.md
+++ b/packages/website/docs/docs/slash-menu.md
@@ -16,9 +16,7 @@ const { isDark } = useData();
 
 The Slash Menu is the list of commands which shows up whenever you type the "/" (slash) character, or when you click the "+" button in the [Side Menu](/docs/side-menu):
 
-<!-- ![../public/img/screenshots/slash_menu.png]() -->
-
-<img style="max-width:400px" :src="isDark ? '../public/img/screenshots/slash_menu_dark.png' : '../public/img/screenshots/slash_menu.png'" alt="image">
+<img style="max-width:400px" :src="isDark ? '/img/screenshots/slash_menu_dark.png' : '/img/screenshots/slash_menu.png'" alt="image">
 
 ## Slash Menu Items