Netlify CMS

Published

Table of Contents

This is a summary of the various fixes and customizations I did to make Netlify CMS work better for me.

Editing

Have to add this fix so the caret doesn't jump the the end after every edit

https://github.com/netlify/netlify-cms/issues/5092#issuecomment-1256321540

<style>
    [data-slate-editor] {
      -webkit-user-modify: read-write !important;
    }
</style>

Dev mode (not fixed yet)

Doesn’t work with SvelteKit in preview mode for some reason (it loads but doesn't let you log in), and doesn’t work in dev mode because it has to be built (SvelteKit doesn't serve html files in static in dev mode).

Mobile experience

To make it work better on mobile, CSS overrides are the easiest way. Here are a couple links that have some that other people wrote. I used the bottom one with some modifications.

https://github.com/netlify/netlify-cms/issues/441#issuecomment-619432432
https://gist.github.com/searls/7fd2c3223571a58a81006e7da66bd064

Summary

This is the whole index.html file I'm using:

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="icon" href="/favicon.png">
  <title>Content Manager</title>
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  <style>
    [data-slate-editor] {
      -webkit-user-modify: read-write !important;
    }
  </style>
</head>

<body>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
  <link href="mobile-overrides.css" rel="stylesheet" />
</body>

</html>

The full css file is a bit long to put here, so I'll just link it.

https://notes.kaideru.net/mobile-overrides.css

#coding/netlify

More posts: