Skip to content

fix: Documentation site screenshots #248

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 23, 2023
Merged

fix: Documentation site screenshots #248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fad21eb
Test change
matthewlipski Jun 19, 2023
63ee50a
Test change
matthewlipski Jun 19, 2023
c6b9162
Fixed screenshots in built env
matthewlipski Jun 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/website/docs/docs/block-types.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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**

Expand All @@ -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**

Expand All @@ -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**

Expand All @@ -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**

Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/docs/blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/docs/formatting-toolbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
7 changes: 4 additions & 3 deletions packages/website/docs/docs/side-menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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="isDark ? '../public/img/screenshots/side_menu_dark.png' : '../public/img/screenshots/side_menu.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

Expand Down
4 changes: 1 addition & 3 deletions packages/website/docs/docs/slash-menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down