When I was building a website for my girlfriend's charm hobby project, I wanted to build one of those.. geocities type sites, and let her add the text she wanted to. So, I started using Sanity with a Svelte frontend.
I then proceeded to slap a bunch of Rich Text / Portable Text everywhere to give it that "DIY" kind of setup, and it worked like a charm (pun intended). Here's how one of the pages looked like:
All I had to do was give my girlfriend the freedom to just add whatever markdown she wanted and it starting resembling what you would have seen in those older websites.. where people were limited to using GIFs, images and etc to express their creativity which I really admire!
I find it amazing how, sometimes limitations can actually garner more creativity just because it forces you to make do with what you have. Which also reminded me of this one project I stumbled upon randomly back then: https://bearblog.dev/ - where simplicity is a big priority and it does it really well while still being flexible to the point where you can have variance in your pages
Although Sanity was able to give my girlfriend a pretty good editor experience, integrating with Svelte Kit always felt second class and I felt like I could create an alternative that would have first class support for Svelte Kit and that could be self-hosted!
Which leads us into today:
617 commits later, 9 months of on and off development.. I've gone and added a Rich Text editor within Aphex in preparation of a V1 release. Powered by TipTap and PortableText - check out the docs here: https://docs.getaphex.com/schemas/block
The reason for following this route instead of creating a different format, was because I wanted to utilise this package: https://github.com/portabletext/svelte-portabletext which I have used before - and PLENTY of people have used to render their portable text for Sanity. So the data that is returned from the local API can just be passed into the PortableText component like this!
<PortableText
{value}
components={{
types: {
image: BlogImage,
callout: BlogCallout,
codeBlock: BlogCodeBlock
},
block: {
h1: BlogHeading,
h2: BlogHeading,
h3: BlogHeading,
h4: BlogHeading,
h5: BlogHeading,
h6: BlogHeading,
blockquote: BlogBlockquote
},
marks: {
link: BlogLinkMark
}
}}
onMissingComponent={false}
/>With this at a somewhat stable state, the next focus will be on Visual Editing! Exciting!