d4rekanguok / netlify-cms-widgets Goto Github PK

A collection of custom widgets for netlify-cms

Home Page: https://custom-widgets.netlify.com

License: MIT License

JavaScript 28.60% TypeScript 71.20% CSS 0.20%

netlify-cms netlify-cms-widgets custom-widgets widgets cms

netlify-cms-widgets's Introduction

Hi! If you are here for the file relation widget, NetlifyCMS now supported this feature out of the box. Docs is a bit spare, feel free to open an issue if you get stuck (a) using this new feature or (b) migrating away from ncw-file-relation.

NetlifyCMS Custom Widgets

A collection of custom widgets for netlify-cms

⚠ Unstable: Under active development

What's inside

npm package	description	docs
@ncwidgets/id	Generate a unique ID for new entries in a folder collection
@ncwidgets/file-relation	Dropdown select widget for a field inside a file collection (the default relation widget only works for folder collections)	docs
@ncwidgets/reorder	Drag & drop to order entries in a folder collection	docs
@ncwidgets/netlify-cms	Custom netlify-cms build with file-relation & id built in	see here

How to use

import cms from 'netlify-cms-app'
import { Widget as IdWidget } from '@ncwidgets/id'
import { Widget as ReorderWidget } from '@ncwidgets/reorder'
import { Widget as FileRelationWidget } from '@ncwidgets/file-relation'

cms.registerWidget(IdWidget)
cms.registerWidget(ReorderWidget)
cms.registerWidget(FileRelationWidget)

cms.init()

Drop-in

@ncwidgets/netlify-cms is a drop-in replacement* for netlify-cms, but includes file-relation & id widget.

- <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
+ <script src="https://unpkg.com/@ncwidgets/netlify-cms@^0.7.0/dist/netlify-cms.js"></script>

*Note that @ncwidgets/netlify-cms is not a fork. Since we only register additional custom widgets, it's very easy to keep the build up-to-date. It's also currently not a complete drop-in replacement — deprecated dist/cms.js and cms.css are not included.

With Gatsby

Easiest way is to use the official netlify cms plugin. Please follow the instruction here.

npm i gatsby-plugin-netlify-cms netlify-cms-app

Configure gatsby-plugin-netlify-cms:

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-netlify-cms`,
      options: {
        manualInit: true,
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },
  ]
}

Then, install the widgets you need

npm i @ncwidgets/id

And register them

// src/cms/cms.js

import cms from 'netlify-cms-app'
import { Widget as IdWidget } from '@ncwidgets/id'

cms.registerWidget(IdWidget)
cms.init()

With Hugo

Please see this example demo: https://github.com/d4rekanguok/ncwidgets-hugo-example

Contribute

Has an idea for a widget? Please feel free to send over a PR, or open an issue with the idea tag.

Build

This is a monorepo with yarn workspace & lerna.

# Setup
yarn
yarn bootstrap

# Launch the playground with 
# all the custom widgets at localhost:
yarn playground:dev

# Build widgets
yarn build

netlify-cms-widgets's People

Contributors

Stargazers

Watchers

Forkers

gurkodil peteluffman mrogers-5s truthtaicom okdistribute magomimmo fverloop alcas1 cheuksing duahau13 henrikwirth devcustrom some-forks

netlify-cms-widgets's Issues

hidden option for ncw-id widget

When using the ncw-id widget to generate an unique id for a folder or file collection entry, generally speaking the CMS user is not interested in viewing that field in the UI. It could be useful to have an option to mark that field as hidden: true for such use case. I would also say that the default should be true as well.

File Location Widget is broken

It looks like loadEntry, a method this widget relies on, is currently not working as expected in the latest version of netlify-cms-app.

Re-order widget – i18n ?

Hi!

The re-order widget is stuck on perpetual loading for me, and I'm not sure why. I'm using the id widget to create the id for reference. I have an i18n setup using Hugo and I've only tried the widget on my local host using git-gateway.

Is the re-order widget compatible with i18n features and/or git-gateway?

I tried out the re-order widget as a workaround for the beta i18n features not supporting i18n: duplicate in lists. It's a bit annoying to add and update each item with duplicate content manually for three languages. So, I created a folder collection instead to reference the items within a page template, but then realized that my client still needs to be able to re-order the items. So this widget would be a great solution!

Thanks!

Form builder widget

I'm needing this right now. A client want to be able to edit their form setups, which they have a few of. Would be neat to build a widget that spit out a form structure.

It only needs to be very basic:

Support a default set of input: string, text, boolean, select, upload, number
Each input needs required / readonly
Input hint
Input size: 1, 1/2, 1/3, 1/4

Advanced:

input group
logic (show additional input based on value of another input)
i18n
user can register custom input types

For very simple form we can actually just use netlify-cms's list widget, but it's fairly clumsy UI-wise (difficult to add, every fields looks huge).

S3 media library

Is it possible to use id widget as js deliver sript?

I am trying to include id widget as a js deliver script, but I get exports is not defined in the console.

Here is my code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Content Manager</title>
        <!-- Include the script that enables Netlify Identity on this page. -->
        <!-- <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script> -->
    </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>
         <script src="https://cdn.jsdelivr.net/npm/@ncwidgets/[email protected]/dist/index.min.js"></script> 

        <script type="text/javascript">
            CMS.registerWidget(Widget)
        </script>
    </body>
</html>

Data table widget

It'll be a custom list widget, could probably wrap around another react table library, or write a very simple one.

Adding widget script hides existing relations in CMS

Following the README, I added <script src="https://unpkg.com/@ncwidgets/netlify-cms@^0.7.0/dist/netlify-cms.js"></script>, instead of <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>.

However when I went to the CMS, the values I had previously populated in relation widgets were missing. (Although saving entries with ncw-id fields did not remove the relations in the .md files). The little tags in the CMS UI were simply not there any more. When I removed the ncw-id script and widget, and adding back the original script, the relation tags came back in the UI.

(file-relation) Support simple list (string only)

Just a addendum, in my case results.data[fieldName] its returning a array of strings. So was necessary make changes in the options map here in my code.

Originally posted by @kauly in #12 (comment)

Inline widget

Hey @jonaseltes, let's continue our conversation from decaporg/decap-cms#800 here to avoid unnecessary notifications for people there!

I thought supporting inline widget would be a no-brainer, just add a umd target and be done with it. But then I quickly realized that I would be bundling another copy of React + Immutable, on top of the ones that come with netlify-cms.

If I understand correctly, to avoid duplicating React, we'd need to use the createClass & h functions provided globally by netlify-cms instead of creating class & write JSX directly with React. Swapping the pragma is no problem with babel, but we'd need a custom plugin for createClass. That leaves us with a duplicate of Immutable, but we might be able to treeshake it off so the final bundle size is not so terrible.

I want to do this, but it could be quite a bit of effort. In the mean time, if you're open to setting up a bundler, it'd be fairly easy & I can offer some help! Otherwise, I think the easiest thing to do is to copy the code over, modify them manually to use createClass & h, then inline another copy of immutable. I could offer you some help there as well.

unselect an item from a parent optional field

Say you define a ncw-file-relation which is optional. If I'm not wrong, after you select an item, you can only change the selected item with another and there is no way to unselect it to leave the field blank.

file-relation update

If users want to reference a list widget in the same entry, use the new entry option instead of loadEntry.
Support nested field for target & id fields

Last updated widget

Fork the date time widget & make it optionally auto update every publish

[netlify-cms] Add ncw-reorder

Hi, great project, looking forward to using it! Also, your i18n widget will be super helpful, too!

Is the unpkg script ready for use with ncw-reorder? Currently getting "No control for widget 'ncw-reorder'." when trying to use it. Should I use the import script and manually register the widget instead?

Thanks so much!

 - name: settings
   label: Settings
   delete: false
   folder: _data/settings
   create: true
   fields: 
     - label: Section Order
       name: order
       widget: ncw-reorder
       collection: sections 
       editor:
          preview: true
       create: false
       id_field: id
       display_template: '{{id}} | {{title}}'
       fields:
         - { label: "Id", name: "id", widget: "string" }

 - name: sections
    label: Map Sections
    folder: _data/sections
    editor: 
      preview: false
    create: true
    slug: "{{slug}}"
    extension: 'json'
    fields: 
      - label: Identifer
        name: id 
        widget: string
      - label: Title
        name: title

...etc

Using `Publish and create new` doesn't create a new ID

When saving a document using the Publish and create new button, the ID generator doesn't get populated with a new generated ID. It's empty, and read-only.

Display_fields accept one field only

It seems to me that even if the option display_fields has plural form, it works with one field only. Moreover, it would be great, when you have more fields in a file collections, to be able via display_fileds to display to the user more than one field value.

Am I wrong?

Thanks so much for your life-saver file-relation 👍

File location for relation widget

I'm currently trying to use the relation widget with a file in Gatsby.

Right now I have a folder at src/content/ with a couple of json files that I use as settings for my page, I added a new one for the relation widget, but I can't get the relation widget to load this options from the file.

this is my CMS.js file

import CMS from 'netlify-cms-app'

import BlogPostPreview from './preview-templates/BlogPostPreview'

import { Widget as FileRelationWidget } from '@ncwidgets/file-relation'
import { Widget as IdWidget } from '@ncwidgets/id'

const loadData = async (dataPath) => {
  const data = await fetch(dataPath)
    .then(data => data.json())
    .catch(err => console.error(err))

  window.repoFiles = data
}

loadData('src/content/authors.json');

CMS.registerWidget(IdWidget)
CMS.registerWidget(FileRelationWidget)

CMS.registerPreviewStyle('style/styles.scss');

CMS.registerPreviewTemplate('blog', BlogPostPreview)

The error in the console says
Uncaught (in promise) TypeError: Cannot read property 'entry' of undefined at Control.<anonymous> (control.js:62) at Generator.next (<anonymous>) at fulfilled (control.js:4)

It seems this line isn't getting the options from the file

netlify-cms-widgets/packages/widget-file-relation/src/control.tsx

Line 27 in 7cd27d7

const results = await loadEntry(collection, file)

this is my config in the config.yml file

collections:
  - name: "configurations"
    label: "Configurations"
    editor:
      preview: false
    files:
      - file: "src/content/authors.json"
        label: "Authors"
        name: "authors"
        fields:
          - {label: "Authors", name: "authors", widget: list, fields: [
              {label: "Name", name: "name", widget: string},
              {label: "Slug", name: "slug", widget: string},
              {label: "ID", name: "id", widget: ncw-id, prefix: author}
            ]}
  - name: "blog"
    label: "Blog"
    folder: "src/pages/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "blog-post"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Author", name: "author", widget: ncw-file-relation, collection: configurations, file: "src/content/authors.json", target_field: authors, id_field: id, display_fields: name }
      - {label: "Publish Date", name: "date", widget: "datetime", format: "L", dateFormat: "MM/DD/YYYY"}
      - {label: "Categories", name: "categories", widget: "select", multiple: true, options: [
          {label: "News & Announcements", value: "news-announcements"},
          {label: "Software", value: "software"},
          {label: "Use Cases", value: "use-cases"},
          {label: "Features & Updates", value: "features-updates"},
        ]}
      - {label: "Body", name: "body", widget: "markdown"}

It's necesary to move my authors.json to the static folder? (same folder as config.yml file)

Duplicating an item doesn't generate new ID

Hi there, thanks for creating these widgets, I think NetlifyCMS is lacking behind with lots of things for sure.

I am using the ID Widget to generate unique IDs for collection items. Now the issue I am running into is that once I duplicate one of the items it copies the ID field too. Since it is supposed to be the unique identifier obviously this causes issues.

2 options i see:

Is there a way to add a regenerate directly once someone duplicates an item?
Is there a way to add a Regenerate Button next to the ID field to do this manually?

I'd be happy to help with a PR, but I since I never wrote a Widget I am not well aware of the possibilities.

[reorder] general improvement

export a HOC so user can define their own card UI & preview
handle the case where display fields are out of date // @gurkodil is taking care of this! 💪
better looking loading state
allow item in control to take subfield, i.e ~~fieldDisplay: ['object.field', 'name']~~ display_template: '{{title}} {{categories[0]}}'
allow users to format fieldDisplay with a template, i.e {{year}}.{{month}}.{{date}} | {{name}}
handle the case where the targeted folder collection is empty
- It should ideally also display a link user can click to create a new entry in that collection
add options to filter entries by field(s)
- ~~Is there a way to set this up via CMS.registerWidget instead of config.yml?~~ data config in config.yml, component config in cms.js
add a sortBy button in UI. User can select between asc & desc
allow user to limit the max-height of the control