bmveee / dev-to-cms

dev-to-cms

Dev.To CMS

This is a small CMS for dev.to authors. personal use for now but may open up for others to use in future.

Deployed to: https://dev-to-cms.now.sh/

based on

• https://github.com/sw-yx/smaller-safer-serverless-starter
• https://docs.dev.to/api/

Technologies used

• Next.js
• Tailwind CSS
• Preact
• Monaco Editor
• Formik (replacing React Hook Form)
• React Query: https://github.com/tannerlinsley/react-query
• Tailwind UI: https://tailwindui.com/

Specs

• give a DEV API key
• list blogposts
• edit blogposts
• Clone existing post
• create a new post
  • mark document dirty and prompt before leaving
  • if dirty, save to local state and restore!
  • when focused on editor, autoscroll up nicely
  • keyboard shortcuts for toggling states
  • Redirect to edit after posting
  • Markdown preview with toggles
    • resize nicely
      • https://stackoverflow.com/questions/47017753/monaco-editor-dynamically-resizable
      • microsoft/monaco-editor#28
      • microsoft/monaco-editor#71
      • microsoft/monaco-editor#103
      • microsoft/monaco-editor#543
  • Async status -> nicer UX when clicking submit
    • Disable submit button
    • show spinner while inflight - web component!! https://github.com/craigjennings11/wc-spinners/
    • Show error! - using notifications as a hook!
• integrate Oauth flow from Ben Halpern
• Monaco Editor

We will not offer deleting blogposts but can unpublish.

Todos:

• sticky header?
• combobox for tags and series?
• image upload?

Livestreams

• 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