How to use the netlify-cms.registerWidget function in netlify-cms

To help you get started, we’ve selected a few netlify-cms examples, based on popular ways it is used in public projects.

github ekoeryanto / netlify-cms-widgets / demo / widgets / app.js View on Github external
import CMS from 'netlify-cms';
import NetlifyCMSWidgetColor from 'netlify-cms-widget-color';
import NetlifyCMSWidgetFontawesome from 'netlify-cms-widget-fontawesome';
import NetlifyCMSWidgetMaterialIcons from 'netlify-cms-widget-material-icons';
import NetlifyCMSWidgetNativeColor from 'netlify-cms-widget-native-color';

CMS.registerWidget('color', NetlifyCMSWidgetColor.Control);

CMS.registerWidget(
  'fontawesome-solid',
  NetlifyCMSWidgetFontawesome.Solid,
  NetlifyCMSWidgetFontawesome.Preview,
);
CMS.registerWidget(
  'fontawesome-regular',
  NetlifyCMSWidgetFontawesome.Regular,
  NetlifyCMSWidgetFontawesome.Preview,
);
CMS.registerWidget(
  'fontawesome-brands',
  NetlifyCMSWidgetFontawesome.Brands,
  NetlifyCMSWidgetFontawesome.Preview,
);

// CMS.registerPreviewStyle('https://fonts.googleapis.com/css?family=Material+Icons');
github ekoeryanto / netlify-cms-widgets / demo / widgets / app.js View on Github external
NetlifyCMSWidgetFontawesome.Solid,
  NetlifyCMSWidgetFontawesome.Preview,
);
CMS.registerWidget(
  'fontawesome-regular',
  NetlifyCMSWidgetFontawesome.Regular,
  NetlifyCMSWidgetFontawesome.Preview,
);
CMS.registerWidget(
  'fontawesome-brands',
  NetlifyCMSWidgetFontawesome.Brands,
  NetlifyCMSWidgetFontawesome.Preview,
);

// CMS.registerPreviewStyle('https://fonts.googleapis.com/css?family=Material+Icons');
CMS.registerWidget(
  'material-icons',
  NetlifyCMSWidgetMaterialIcons.Control,
  NetlifyCMSWidgetMaterialIcons.Preview,
);

CMS.registerWidget('native-color', NetlifyCMSWidgetNativeColor.Control);
github ekoeryanto / netlify-cms-widgets / demo / widgets / app.js View on Github external
NetlifyCMSWidgetFontawesome.Preview,
);
CMS.registerWidget(
  'fontawesome-brands',
  NetlifyCMSWidgetFontawesome.Brands,
  NetlifyCMSWidgetFontawesome.Preview,
);

// CMS.registerPreviewStyle('https://fonts.googleapis.com/css?family=Material+Icons');
CMS.registerWidget(
  'material-icons',
  NetlifyCMSWidgetMaterialIcons.Control,
  NetlifyCMSWidgetMaterialIcons.Preview,
);

CMS.registerWidget('native-color', NetlifyCMSWidgetNativeColor.Control);
github hennessyevan / netlify-cms-widget-youtube / dev / index.js View on Github external
fields: [
						{
							name: "youtube_widget",
							label: "Youtube",
							widget: "youtube",
							extraInfo: true,
							APIkey: "AIzaSyB1-hj06noPkeA7RHv07Hex3E53M87RMJE"
						}
					]
				}
			]
		}
	]
};

CMS.registerWidget("youtube", youtubeControl, youtubePreview);

init({ config });
github netlify / netlify-cms-widget-starter / dev / index.js View on Github external
media_folder: 'assets',
  collections: [{
    name: 'test',
    label: 'Test',
    files: [{
      file: 'test.yml',
      name: 'test',
      label: 'Test',
      fields: [
        { name: 'test_widget', label: 'Test Widget', widget: 'test'},
      ],
    }],
  }],
}

CMS.registerWidget('test', Control, Preview)

init({ config })
github ekoeryanto / netlify-cms-widgets / examples / src / module.js View on Github external
import CMS, { init } from 'netlify-cms'
import NetlifyCMSWidgetColor from 'netlify-cms-widget-color'
import NetlifyCMSWidgetNativeColor from 'netlify-cms-widget-native-color'
import * as NetlifyCMSWidgetMaterialIcons from 'netlify-cms-widget-material-icons'
import * as NetlifyCMSWidgetFontawesome from 'netlify-cms-widget-fontawesome'

CMS.registerWidget('color', NetlifyCMSWidgetColor)

CMS.registerWidget('native-color', NetlifyCMSWidgetNativeColor)

CMS.registerWidget('material-icons', NetlifyCMSWidgetMaterialIcons.Control, NetlifyCMSWidgetMaterialIcons.Preview)
CMS.registerPreviewStyle('https://fonts.googleapis.com/css?family=Material+Icons')

CMS.registerWidget('fontawesome-solid', NetlifyCMSWidgetFontawesome.Solid, NetlifyCMSWidgetFontawesome.Preview)
CMS.registerWidget('fontawesome-regular', NetlifyCMSWidgetFontawesome.Regular, NetlifyCMSWidgetFontawesome.Preview)
CMS.registerWidget('fontawesome-brands', NetlifyCMSWidgetFontawesome.Brands, NetlifyCMSWidgetFontawesome.Preview)

init({ config })
github karolis-sh / gatsby-mdx / packages / netlify-cms-widget-mdx / dev / index.js View on Github external
},
  media_folder: 'assets',
  collections: [
    {
      name: 'post',
      label: 'Posts',
      label_singular: 'Post',
      folder: '_posts',
      extension: 'mdx',
      format: 'frontmatter',
      fields: [{ name: 'title', label: 'Title' }, { name: 'body', label: 'Body', widget: 'mdx' }],
    },
  ],
};

CMS.registerWidget(
  'mdx',
  MdxControl,
  setupPreview({
    components: {
      h1: ({ children, ...props }) => (
        <h1 style={{ color: 'tomato' }} {...props}>
          {children}
        </h1>
      ),
    },
    scope: {
      Layout: props => (
        <div
          style={{ padding: '10px', border: '1px solid green', borderRadius: '5px' }}
          {...props}
        />
github QardsJs / qards / src / cms / cms.ts View on Github external
...config,
		collections: [
			settingsCollection,
			authorsCollection,
			categoriesCollection,
			postsCollection,
		],
	},
});

//	load stylesheets
CMS.registerPreviewStyle(typography.toString(), {raw: true});
CMS.registerPreviewStyle(appStyles.toString(), {raw: true});

//	register widgets
CMS.registerWidget('color', ColorWidget.Control);

//	register editor components
CMS.registerEditorComponent(Code);
CMS.registerEditorComponent(Audio);
CMS.registerEditorComponent(Video);
CMS.registerEditorComponent(Image);
CMS.registerEditorComponent(Reveal);
CMS.registerEditorComponent(Calout);
CMS.registerEditorComponent(Divider);
CMS.registerEditorComponent(Gallery);
CMS.registerEditorComponent(Reference);
CMS.registerEditorComponent(Countdown);
CMS.registerEditorComponent(SectionHeading);

//	register previews
CMS.registerPreviewTemplate('posts', PostsPreview);
github Benaiah / netlify-cms-presentations-example / src / cms / cms.js View on Github external
import CMS from "netlify-cms";

import { SlidesControl, SlidesPreview } from "./Slides";

CMS.registerWidget("slides", SlidesControl, SlidesPreview);
github uploadcare / uploadcare-netlifycms / src / Widget / index.js View on Github external
export function register() {
  CMS.registerWidget('uploadcare', Control, Preview)
}

netlify-cms

An extensible, open source, Git-based, React CMS for static sites.

MIT
Latest version published 6 months ago

Package Health Score

79 / 100
Full package analysis