fix editor checkboxes; add some guides content

README.md

@@ -73,7 +73,7 @@ Those 2 coexisting renderers give almost same input, but there are a few differe
 | *remark* plugins | ✅ | ❌ |
 | *rehype* plugins | ✅ | ❌ |
 | footnotes | ✅ | ❌ |
-| partial HTML bug-free | ❌ | ✅ |
+| partial HTML/ CSS inline styles bug-free | ❌ | ✅ |
 | [marked](https://marked.js.org/) | ❌ | ✅ |
 | [dompurify](https://github.com/cure53/DOMPurify) | ❌ | ✅ |
 | [highlight.js](https://highlightjs.org/) | ❌ | ✅ |

src/components/MarkdownEditor/index.js

@@ -16,11 +16,13 @@ export default function MarkdownEditor({
 		isCustomRenderer,
 		toggleCustomRenderer,
 		isEditorShown,
-		toggleEditor,
 		isRendererShown,
-		toggleRenderer,
 		editorStyles,
 		rendererStyles,
+		showRenderer,
+		showEditor,
+		hideRenderer,
+		hideEditor,
 	} = useMarkdownEditor();
 
 	const [localMarkdown, setLocalMarkdown] = useState();
@@ -41,7 +43,13 @@ export default function MarkdownEditor({
 					<input
 						type="checkbox"
 						checked={isEditorShown}
-						onChange={toggleEditor}
+						onChange={
+							isEditorShown
+								? isRendererShown
+									? hideEditor
+									: () => {}
+								: showEditor
+						}
 					/>{" "}
 					editor
 				</label>
@@ -50,7 +58,13 @@ export default function MarkdownEditor({
 					<input
 						type="checkbox"
 						checked={isRendererShown}
-						onChange={toggleRenderer}
+						onChange={
+							isRendererShown
+								? isEditorShown
+									? hideRenderer
+									: () => {}
+								: showRenderer
+						}
 					/>{" "}
 					renderer
 				</label>

src/content/about.js

@@ -90,7 +90,7 @@ Those 2 coexisting renderers give almost same input, but there are a few differe
 | *remark* plugins | ✅ | ❌ |
 | *rehype* plugins | ✅ | ❌ |
 | footnotes | ✅ | ❌ |
-| partial HTML bug-free | ❌ | ✅ |
+| partial HTML/ CSS inline styles bug-free | ❌ | ✅ |
 | [marked](https://marked.js.org/) | ❌ | ✅ |
 | [dompurify](https://github.com/cure53/DOMPurify) | ❌ | ✅ |
 | [highlight.js](https://highlightjs.org/) | ❌ | ✅ |

src/content/html-guide.js

@@ -1,12 +1,26 @@
-export const HTML_GUIDE = `<h1 align="center">How to format text using HTML tags along with inline CSS styling</h1>
+export const HTML_GUIDE = `<h1 align="center">How to format text using HTML, inline CSS & add embeds</h1>
+
+---
+
+## HTML & CSS
+
+---
 
 In addition to formatting your notes with Markdown syntax,
 you can also use HTML with optional inline CSS styling!
 
-Of course, that requires some basic knowledge of HTML & CSS,
+Of course, that requires some basic knowledge of HTML & CSS...
 but if you are really motivated to turn your note into complete web page
 full of colors, shapes, embed elements and any layout,
-than you can learn it online for free pretty fast.
+than you can learn it online for free pretty fast (*for example here: <a href="https://www.w3schools.com/html/" target="_blank">HTML Tutorial</a>, <a href="https://www.w3schools.com/css/" target="_blank">CSS Tutorial</a>*).
+
+---
+
+## External Links / New Tab
+
+---
+
+By the way, these links above are **external links, which open the new browser tab**, what is very useful sometimes & you can also achieve this using my editor & HTML (*look for the code for those links in the editor on the left*).
 
 For example:
 
@@ -18,12 +32,41 @@ For example:
 </p>
 \`\`\`
 
-## Add videos, images &... even the whole websites!
+---
+
+## Embed videos, audios &... even the whole websites!
+
+---
 
 As been mentioned, thanks to ability of using HTML in your notes,
 you can also add different embed elements to your note.
 
-For example, you can add... the whole website to your notes by adding this:
+For example, you can add:
+
+1. a **YouTube embed video** by pasting the code provided by YouTube, for example this:
+
+\`\`\`html
+<iframe width="560" height="315" src="https://www.youtube.com/embed/Rcb0Mdrhc3Y?si=JXf0pWBKgWg0NtfE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+\`\`\`
+
+& you will get this rendered:
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/Rcb0Mdrhc3Y?si=JXf0pWBKgWg0NtfE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+---
+
+2. a **SoundCloud track**:
+
+\`\`\`html
+<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/504060867&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/vadimgierko" title="Vadim Gierko" target="_blank" style="color: #cccccc; text-decoration: none;">Vadim Gierko</a> · <a href="https://soundcloud.com/vadimgierko/elevator-to-sadness-vadim-gierko" title="Elevator To Sadness" target="_blank" style="color: #cccccc; text-decoration: none;">Elevator To Sadness</a></div>
+\`\`\`
+
+to get this rendered:
+
+<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/504060867&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/vadimgierko" title="Vadim Gierko" target="_blank" style="color: #cccccc; text-decoration: none;">Vadim Gierko</a> · <a href="https://soundcloud.com/vadimgierko/elevator-to-sadness-vadim-gierko" title="Elevator To Sadness" target="_blank" style="color: #cccccc; text-decoration: none;">Elevator To Sadness</a></div>
+
+--- 
+3. ...or even the **whole website** to your notes by adding this:
 
 \`\`\`markdown
 <iframe src="https://www.vadimgierko.com" width="100%" height="500px" title="Linky Notes About Page"></iframe>
@@ -32,5 +75,4 @@ For example, you can add... the whole website to your notes by adding this:
 the result will look like this:
 
 <iframe src="https://www.vadimgierko.com" width="100%" height="500px" title="Linky Notes About Page"></iframe>
-
-`
+`;

src/layout/Navbar.js

@@ -63,7 +63,7 @@ export default function Navbar() {
 				</button>
 
 				<div
-					className={`${isNavCollapsed ? "collapse" : null} navbar-collapse`}
+					className={`${isNavCollapsed ? "collapse" : ""} navbar-collapse`}
 					id="navbarColor01"
 				>
 					<ul className="navbar-nav me-auto">