Make your own Dev.to CMS livestream - Part 2

[swyxio]

---

source: devto
devToUrl: "https://dev.to/swyx/make-your-own-dev-to-cms-livestream-part-2-6mf"
devToReactions: 16
devToReadingTime: 2
devToPublishedAt: "2020-03-29T00:08:08.861Z"
devToViewsCount: 462

---

This is day 2 of my livecode Dev.to CMS. See Day 1 here

Source: https://github.com/sw-yx/dev-to-cms
Demo: https://dev-to-cms.now.sh

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/react-query
• Tailwind UI: https://tailwindui.com/

Video

Here is the YouTube livestream (3 hours).

Dev.To embed:

{% youtube SmpsdMZxy8I %}

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.

Catch up on the Dev.to CMS LiveStream!

• Day 1 - Setup Next.js and Tailwind UI, list posts through API routes - 90 mins
• Day 2 - setting up a Markdown Editor with Next.js, Tailwind UI, Highlight.js, React Hook Form, and React Query - 3 hours
• Quick Fix - How To Add Monaco Editor to a Next.js app - 18 mins
• Day 3 - Refactoring to Edit Existing Posts - 3 hours
• Day 4 - Polish Day! Implementing Notifications, Markdown preview, and programmatic Redirects, and Using Web Components in Next.js - 3 hours
• Instant GraphQL with OneGraph - Screenshares in Public with Sean Grove - refactoring handrolled Dev.to API access with OneGraph and GraphQL
• How and Why to Un-Reset Tailwind's CSS Reset