{"type":"doc","content":[{"type":"heading","attrs":{"level":1,"textAlign":"left"},"content":[{"type":"text","text":"Hello there!"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"If you're reading this you are in my latest project, "},{"type":"text","marks":[{"type":"link","attrs":{"href":"http://penwin.party"}}],"text":"penwin.party"},{"type":"text","text":". Back in the day (i.e. like ~2 years ago) I wanted to make something very similar. It's an amazing feeling seeing it now in an usable state. It is a Rich Text Editor, "},{"type":"text","marks":[{"type":"italic"}],"text":"my Rich Text Editor"},{"type":"text","text":". "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"It has collaborative features (though some of them are still very much a work in progress) and it's heavily inspired by the "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/UreekaBiz/notebook"}}],"text":"Notebook "},{"type":"text","text":"project from Ureeka. It uses PostgreSQL through SupaBase under the hood though"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"It has the regular things you'd come to expect from a RTE. E.g. it has Headings (as you've seen above)"}]},{"type":"orderedList","attrs":{"start":1},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Ordered Lists"}]}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Bullet Lists, naturally"}]}]}]},{"type":"taskList","content":[{"type":"taskListItem","attrs":{"checked":false},"content":[{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"And even"}]}]},{"type":"taskListItem","attrs":{"checked":true},"content":[{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Task Lists!"}]}]}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Blockquotes"}]}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"All your favorite marks, like "},{"type":"text","marks":[{"type":"bold"}],"text":"bold"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"italic"}],"text":"italics"},{"type":"text","text":", strike, "},{"type":"text","marks":[{"type":"underline"}],"text":"underline"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"code"},{"type":"text","text":", "}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"and"}]},{"type":"paragraph","attrs":{"textAlign":"center"},"content":[{"type":"text","text":"even"}]},{"type":"paragraph","attrs":{"textAlign":"right"},"content":[{"type":"text","text":"text alignment"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Horizontal rules (aka dividers)"}]},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"center"},"content":[{"type":"text","text":"As well as images!"}]},{"type":"image","attrs":{"alt":"My cool penwin","height":"335px","src":"https://avatars.githubusercontent.com/u/57020015?v=4","textAlign":"center","title":"A bad ass penwin","width":"335px"}},{"type":"paragraph","attrs":{"textAlign":"center"}},{"type":"paragraph","attrs":{"textAlign":"justify"},"content":[{"type":"text","text":"And one of the coolest simple features, CodeBlocks for all your CodeBlock needs, featuring a "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://codemirror.net/"}}],"text":"CodeMirror"},{"type":"text","text":" integration, with support for:"}]},{"type":"codeBlock","attrs":{"language":"CSS"},"content":[{"type":"text","text":".codeBlock_container {\n position: relative;\n}\n\n.codeBlock_select {\n border: none;\n border-radius: 3px;\n cursor: pointer;\n left: 0.5em;\n outline: none;\n padding: 5px 10px;\n position: absolute;\n top: 0.5em;\n user-select: none;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"codeBlock","attrs":{"language":"HTML"},"content":[{"type":"text","text":"\n\n \n My First Web Page\n \n \n

Welcome

This is a paragraph of text.

\n $\"Example$ \n

Item 1
Item 2

\n Visit Example.com\n \n\n"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"codeBlock","attrs":{"language":"JavaScript"},"content":[{"type":"text","text":"function addNumbers(num1, num2) {\n return num1 + num2;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"codeBlock","attrs":{"language":"TypeScript"},"content":[{"type":"text","text":"// Variable declarations with type annotations\nlet greeting: string = \"Hello, TypeScript!\";\nlet age: number = 30;\nlet isActive: boolean = true;\n"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"heading","attrs":{"level":2,"textAlign":"left"},"content":[{"type":"text","text":"But why though?"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"For several reasons. "}]},{"type":"paragraph","attrs":{"textAlign":"justify"},"content":[{"type":"text","text":"Back in the day, because my ambitions were greater and I wanted to make a file-like system for my Notes. Nowadays, with a much reduced scope, because I need a personal blog. And I did not want to use a pre-existing solution knowing I can make my own, with all the specific things I like (e.g. Notebooks being sorted alphabetically but Notes being sorted by la"}]},{"type":"paragraph","attrs":{"textAlign":"justify"},"content":[{"type":"text","text":"I think Rich Text Editors are a "},{"type":"text","marks":[{"type":"bold"}],"text":"great"},{"type":"text","text":" project and I'm grateful Ureeka's "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/UreekaBiz/notebook"}}],"text":"Notebook"},{"type":"text","text":" was one of my first real world programming experiences. You get an opportunity to learn about interesting data structures that are used underneath, and you're faced with a bunch of interesting decisions when developing your own. From those that will drive users crazy (like which shortcut to use for what functionality) to those that actually require some degree of contemplation (async image uploading when you paste something, comments, links) and those that are hard (e.g. collaboration)."}]},{"type":"paragraph","attrs":{"textAlign":"justify"},"content":[{"type":"text","text":"They are also a very interesting tool. I plan to dive deeper into the philosophy of tools in other posts, so these paragraphs will be brief, but I think RTEs are an exceptional tool for communication."}]},{"type":"paragraph","attrs":{"textAlign":"justify"},"content":[{"type":"text","text":"You want to add impact to something? You got "},{"type":"text","marks":[{"type":"bold"}],"text":"bold"},{"type":"text","text":" for that."}]},{"type":"paragraph","attrs":{"textAlign":"justify"},"content":[{"type":"text","text":"You want to add nuance? "},{"type":"text","marks":[{"type":"italic"}],"text":"Italics"},{"type":"text","text":" is your friend."}]},{"type":"paragraph","attrs":{"textAlign":"justify"},"content":[{"type":"text","text":"Want to mimic internal dialogue? I've seen people use "},{"type":"text","marks":[{"type":"strikethrough"}],"text":"strike"},{"type":"text","text":" to do so."}]},{"type":"paragraph","attrs":{"textAlign":"justify"},"content":[{"type":"text","marks":[{"type":"code"}],"text":"code"},{"type":"text","text":" is useful for any scenario that requires you to reference some specific part of a system, e.g. Pull Requests and so on."}]},{"type":"paragraph","attrs":{"textAlign":"justify"},"content":[{"type":"text","marks":[{"type":"link","attrs":{"href":"https://www.google.com/"}}],"text":"Links "},{"type":"text","text":"are what makes up most of the web, which should be enough to convince you of their utility."}]},{"type":"paragraph","attrs":{"textAlign":"justify"},"content":[{"type":"text","text":"RTE's are therefore quite interesting. Any tool with an RTE or a Markdown equivalent will have the potential to be used quite effectively to communicate."}]},{"type":"paragraph","attrs":{"textAlign":"justify"},"content":[{"type":"text","text":"My intention with this tool is therefore to use it to communicate. Communicate thoughts, ideas, opinions, experiences, among other things, and keep my notes online (I've used "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://joplinapp.org/"}}],"text":"Joplin"},{"type":"text","text":" for a long time, but it's time to move on)"}]},{"type":"paragraph","attrs":{"textAlign":"justify"},"content":[{"type":"text","text":"So yeah, that's about it. I'll soon be publishing more stuff. So stay tuned for that!"}]},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"}},{"type":"paragraph","attrs":{"textAlign":"left"}}]}

What is Penwin.Party?

by Alan Rodz

20/07/2025

Love it? Hate it? Own it and say it!