0.31.6 • Published 1 week ago

auto-cms-server

Licence

BSD-2-Clause

Version

0.31.6

Deps

Vulns

Weekly

Stars

Summary Dependency Versions

auto-cms

Auto turn any webpage into editable CMS without coding.

Features

Click with Ctrl key or Alt key to show menu
Edit from web UI
- text
- link
- image
- audio
- video
media management
- view
- upload
- delete
- see which pages are using the media
- support image
- support video / audio
Reuse html template
- For common header, footer, e.t.c.
style editing
- text alignment
- text color
- font size
- font family
SEO settings
- title
- description
- preview image
Save changes to file
Custom 404 layout (send 404.html if exists, otherwise send index.html)
Multi-language support
- convert 150+ languages with node-EasyNMT
- convert traditional Chinese / simplified Chinese with 繁化姬 API
- convert 104 languages with open-google-translator
Contact form
IFrame inlining
Auto scan 404
Auto setup .env file
Robust
- Correctly set Content-Type even when the filename of the HTML file is not ending with .html
- Support next.js image proxy url (e.g. "/_next/image?url=xxx&w=xx&q=xx")
- Auto backup edits
- View and restore from backups

Enhancement

support editing element with multiple text nodes with br
cleanup html
- remove duplicated script, style and css link caused by repeated runtime script injection
- deduplicate class names
- remove tracking scripts
- fix elements position
  - move title, meta, link from body into head

Usage

Login at /auto-cms to enable the edit menu
Navigate to any page on the site
Press Ctrl or Alt key while clicking (left or right click) to show the edit menu

Usage with installation to lock the version:

npm i -D auto-cms-server
npx auto-cms-server

Usage without installation:

npx -y auto-cms-server

API

Trailing Slash Redirect

When enabled with AUTO_CMS_TRAILING_SLASH=true (default false), a request for a directory page without a trailing slash (e.g. /about) is redirected (302) to the trailing-slash form (/about/).

This is useful when pages use relative links (e.g. href="styles.css" or fetch('i18n.json')), which the browser resolves against the current URL. Without the redirect, such links resolve one directory up when the URL has no trailing slash.

It is opt-in because relative links are ambiguous: a link meant to be relative to the parent directory (e.g. a shared rss.xml) would instead break once the page URL gains a trailing slash. Only enable it for a site after verifying that its relative links resolve correctly with the trailing slash.

Multi Language

The lang cookie is used to specify the client-preferred language. Possible values are: en, zh_cn, zh_hk, ja, ko, and ar.

A ?lang= query parameter (e.g. ?lang=zh_hk) overrides the cookie and is saved into it.

Region variants are normalized (e.g. en-US → en, zh-Hans → zh_cn).

The cookie lifetime can be set in the environment variable AUTO_CMS_LANG_COOKIE_DAYS (default 365 days).

Tip: Use an AI agent (e.g. opencode with free model like Big Pickle) to improve translation JSON files. Built-in per-text translation has no context, so "Train" in a button alone → 火車 (vehicle), but with the full page the AI knows it means 訓練 (training).

The default value can be set in the environment variable AUTO_CMS_DEFAULT_LANG.

Below is example UI and code to show and set the language:

<form id="langForm">
  Language:
  <label>
    <input type="radio" name="lang" value="en" />
    English
  </label>
  <label>
    <input type="radio" name="lang" value="zh_cn" />
    簡體中文
  </label>
  <label>
    <input type="radio" name="lang" value="zh_hk" />
    繁體中文
  </label>
  <label>
    <input type="radio" name="lang" value="ja" />
    日本語
  </label>
  <label>
    <input type="radio" name="lang" value="ko" />
    한국어
  </label>
  <label>
    <input type="radio" name="lang" value="ar" />
    عربي
  </label>
</form>
<script>
  {
    let lang = Object.fromEntries(document.cookie.split(';').map(s=>s.trim().split('='))).lang
    langForm.lang.value = lang
    langForm.lang.forEach(input => {
      input.addEventListener('change', event => {
        if (input.checked) {
          let maxAge = 365 * 24 * 60 * 60 // one year in seconds
          document.cookie = `lang=${input.value}; path=/; max-age=${maxAge}`
          location.reload()
        }
      })
    })
  }
</script>

Submit Contact Form

Method: POST
Pathname: /contact
Content-Type: application/x-www-form-urlencoded or application/json
Accept: text/html or application/json
Body Fields:
- name
- email
- tel
- company_name
- business_nature
- remark
- extra

All body fields are optional.

If you submit additional fields in the request body, they will be stored as JSON in the extra field.

If the Accept is application/json, the response will be a json object with optional error string; otherwise the response will be a html page.

The response file can be configured in the env variable SUBMIT_CONTACT_RESULT_PAGE. If it is not specified, or specified as default, a simple html page will be response as below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Submitted</title>
  </head>
  <body>
    <p>Your submission has been received.</p>
    ${error ? `
    <pre><code>${escapeHTML(error)}</code></pre>
    ` : ''}
    <p>Back to <a href="/">home page</a>.</p>
  </body>
</html>

If you want to implement custom form submission experience, you can do that with AJAX like below example:

<form method="POST" action="/contact" onsubmit="submitContact(event)">
  <h1>Contact Form</h1>
  <div class="contact-form--field">
    <label>
      Nickname: <input type="text" name="name" autocomplete="nickname" />
    </label>
  </div>
  <div class="contact-form--field">
    <label>
      Email: <input type="email" name="email" autocomplete="email" />
    </label>
  </div>
  <div>
    <input type="submit" value="Submit" />
  </div>
  <div class="contact-form--submit-result"></div>
</form>
<script>
  async function submitContact(event) {
    let form = event.target
    let result = form.querySelector('.contact-form--submit-result')
    function showResult(text) {
      result.textContent = text
    }
    try {
      let formData = new FormData(form)
      let params = new URLSearchParams(formData)
      let body = params.toString()
      event.preventDefault()
      let res = await fetch('/contact', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Accept': 'application/json',
        },
        body,
      })
      let json = await res.json()
      if (json.error) throw json.error
      showResult('Thank you. Your submission is received.')
    } catch (error) {
      showResult(String(error))
    }
  }
</script>

License

This project is licensed with BSD-2-Clause

This is free, libre, and open-source software. It comes down to four essential freedoms [ref]:

The freedom to run the program as you wish, for any purpose
The freedom to study how the program works, and change it so it does your computing as you wish
The freedom to redistribute copies so you can help others
The freedom to distribute copies of your modified versions to others

Keywords

cms content editor html nocode low-code server cli