Writing my own Dev.to CMS with Next.js + Preact + TypeScript + Tailwind UI - Part 2 [Livestream]
Time to integrate Monaco Editor and create posts in our CMS!
For the 1st half, it was pretty easy going. I was mostly pulling components off of Tailwind UI and assembling an editor!
For the 2nd half, I mainly faced issues with trying to integrate Monaco and then Prism.js. Finally landed on Highlight.js.
Things covered
Syntax Highlighted Editors (Monaco, Prism.js, finally Highlight.js)
React Hook Form: https://react-hook-form.com/
React Query: https://github.com/tannerlinsley/reac...
Tailwind UI: https://tailwindui.com/
Source: https://github.com/sw-yx/dev-to-cms
Demo: https://dev-to-cms.now.sh
[Day 1 - Setup Next.js and Tailwind UI, list posts through API routes](https://dev.to/swyx/make-your-own-dev...) - 90 mins
[Day 2 - setting up a Markdown Editor with Next.js, Tailwind UI, Highlight.js, React Hook Form, and React Query](https://dev.to/swyx/make-your-own-dev...) - 3 hours
Quick Fix - [How To Add Monaco Editor to a Next.js app](https://dev.to/swyx/how-to-add-monaco...) - 18 mins
[Day 3 - Refactoring to Edit Existing Posts](https://dev.to/swyx/make-your-own-dev...) - 3 hours
[Day 4 - Polish Day! Implementing Notifications, Markdown preview, and programmatic Redirects, and Using Web Components in Next.js](https://dev.to/swyx/make-your-own-dev...) - 3 hours