}
);
};
diff --git a/core/src/components/MediaLibrary/MediaLibraryModal.tsx b/core/src/components/MediaLibrary/MediaLibraryModal.tsx
index a0001de1..e5ee6e46 100644
--- a/core/src/components/MediaLibrary/MediaLibraryModal.tsx
+++ b/core/src/components/MediaLibrary/MediaLibraryModal.tsx
@@ -1,14 +1,12 @@
-import { styled } from '@mui/material/styles';
import CloseIcon from '@mui/icons-material/Close';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import Fab from '@mui/material/Fab';
+import { styled } from '@mui/material/styles';
import isEmpty from 'lodash/isEmpty';
import React from 'react';
import { translate } from 'react-polyglot';
-import { transientOptions } from '../../lib';
-import { colors, colorsRaw } from '../../components/UI/styles';
import EmptyMessage from './EmptyMessage';
import MediaLibraryCardGrid from './MediaLibraryCardGrid';
import MediaLibraryTop from './MediaLibraryTop';
@@ -37,60 +35,41 @@ const cardMargin = `10px`;
*/
const cardOutsideWidth = `300px`;
-interface StyledModalProps {
- $isPrivate: boolean;
-}
+const StyledModal = styled(Dialog)`
+ .MuiDialog-paper {
+ display: flex;
+ flex-direction: column;
+ overflow: visible;
+ height: 80%;
+ width: calc(${cardOutsideWidth} + 20px);
+ max-width: calc(${cardOutsideWidth} + 20px);
-const StyledModal = styled(
- Dialog,
- transientOptions,
-)(
- ({ $isPrivate }) => `
- .MuiDialog-paper {
- display: flex;
- flex-direction: column;
- overflow: visible;
- height: 80%;
- width: calc(${cardOutsideWidth} + 20px);
- max-width: calc(${cardOutsideWidth} + 20px);
- ${$isPrivate ? `background-color: ${colorsRaw.grayDark};` : ''}
-
- @media (min-width: 800px) {
- width: calc(${cardOutsideWidth} * 2 + 20px);
- max-width: calc(${cardOutsideWidth} * 2 + 20px);
- }
-
- @media (min-width: 1120px) {
- width: calc(${cardOutsideWidth} * 3 + 20px);
- max-width: calc(${cardOutsideWidth} * 3 + 20px);
- }
-
- @media (min-width: 1440px) {
- width: calc(${cardOutsideWidth} * 4 + 20px);
- max-width: calc(${cardOutsideWidth} * 4 + 20px);
- }
-
- @media (min-width: 1760px) {
- width: calc(${cardOutsideWidth} * 5 + 20px);
- max-width: calc(${cardOutsideWidth} * 5 + 20px);
- }
-
- @media (min-width: 2080px) {
- width: calc(${cardOutsideWidth} * 6 + 20px);
- max-width: calc(${cardOutsideWidth} * 6 + 20px);
- }
-
- h1 {
- ${$isPrivate && `color: ${colors.textFieldBorder};`}
- }
-
- button:disabled,
- label[disabled] {
- ${$isPrivate ? 'background-color: rgba(217, 217, 217, 0.15);' : ''}
- }
+ @media (min-width: 800px) {
+ width: calc(${cardOutsideWidth} * 2 + 20px);
+ max-width: calc(${cardOutsideWidth} * 2 + 20px);
}
- `,
-);
+
+ @media (min-width: 1120px) {
+ width: calc(${cardOutsideWidth} * 3 + 20px);
+ max-width: calc(${cardOutsideWidth} * 3 + 20px);
+ }
+
+ @media (min-width: 1440px) {
+ width: calc(${cardOutsideWidth} * 4 + 20px);
+ max-width: calc(${cardOutsideWidth} * 4 + 20px);
+ }
+
+ @media (min-width: 1760px) {
+ width: calc(${cardOutsideWidth} * 5 + 20px);
+ max-width: calc(${cardOutsideWidth} * 5 + 20px);
+ }
+
+ @media (min-width: 2080px) {
+ width: calc(${cardOutsideWidth} * 6 + 20px);
+ max-width: calc(${cardOutsideWidth} * 6 + 20px);
+ }
+ }
+`;
interface MediaLibraryModalProps {
isVisible?: boolean;
@@ -104,7 +83,6 @@ interface MediaLibraryModalProps {
isDeleting?: boolean;
hasNextPage?: boolean;
isPaginating?: boolean;
- privateUpload?: boolean;
query?: string;
selectedFile?: MediaFile;
handleFilter: (files: MediaFile[]) => MediaFile[];
@@ -136,7 +114,6 @@ const MediaLibraryModal = ({
isDeleting,
hasNextPage,
isPaginating,
- privateUpload = false,
query,
selectedFile,
handleFilter,
@@ -175,14 +152,13 @@ const MediaLibraryModal = ({
const hasSelection = hasMedia && !isEmpty(selectedFile);
return (
-
+
- {!shouldShowEmptyMessage ? null : (
-
- )}
+ {!shouldShowEmptyMessage ? null : }
diff --git a/core/src/components/MediaLibrary/MediaLibraryTop.tsx b/core/src/components/MediaLibrary/MediaLibraryTop.tsx
index a4c8e722..f5312683 100644
--- a/core/src/components/MediaLibrary/MediaLibraryTop.tsx
+++ b/core/src/components/MediaLibrary/MediaLibraryTop.tsx
@@ -29,7 +29,6 @@ const StyledDialogTitle = styled(DialogTitle)`
export interface MediaLibraryTopProps {
onClose: () => void;
- privateUpload?: boolean;
forImage?: boolean;
onDownload: () => void;
onUpload: (event: ChangeEvent | DragEvent) => void;
@@ -62,7 +61,6 @@ const MediaLibraryTop = ({
isPersisting,
isDeleting,
selectedFile,
- privateUpload,
}: TranslatedProps) => {
const shouldShowButtonLoader = isPersisting || isDeleting;
const uploadEnabled = !shouldShowButtonLoader;
@@ -80,11 +78,9 @@ const MediaLibraryTop = ({
return (
- {`${privateUpload ? t('mediaLibrary.mediaLibraryModal.private') : ''}${
- forImage
- ? t('mediaLibrary.mediaLibraryModal.images')
- : t('mediaLibrary.mediaLibraryModal.mediaAssets')
- }`}
+ {forImage
+ ? t('mediaLibrary.mediaLibraryModal.images')
+ : t('mediaLibrary.mediaLibraryModal.mediaAssets')}
-
\ No newline at end of file
diff --git a/core/src/components/page/Page.tsx b/core/src/components/page/Page.tsx
index 1f522509..ea69ad8c 100644
--- a/core/src/components/page/Page.tsx
+++ b/core/src/components/page/Page.tsx
@@ -4,23 +4,19 @@ import { translate } from 'react-polyglot';
import { connect } from 'react-redux';
import { useParams } from 'react-router-dom';
-import { lengths } from '../../components/UI/styles';
import { getAdditionalLink } from '../../lib/registry';
+import MainView from '../App/MainView';
import Sidebar from '../Collection/Sidebar';
import type { ComponentType } from 'react';
import type { ConnectedProps } from 'react-redux';
import type { RootState } from '../../store';
-const StylePage = styled('div')`
- margin: ${lengths.pageMargin};
-`;
-
const StyledPageContent = styled('div')`
width: 100%;
display: flex;
+ flex-direction: column;
align-items: center;
- justify-content: center;
`;
const Page = ({ collections, isSearchEnabled, searchTerm, filterTerm }: PageProps) => {
@@ -51,7 +47,7 @@ const Page = ({ collections, isSearchEnabled, searchTerm, filterTerm }: PageProp
}, [Content]);
return (
-
+
{pageContent}
-
+
);
};
diff --git a/core/src/constants/configSchema.tsx b/core/src/constants/configSchema.tsx
index bef62ea4..a2baf9f5 100644
--- a/core/src/constants/configSchema.tsx
+++ b/core/src/constants/configSchema.tsx
@@ -202,8 +202,6 @@ function getConfigSchema() {
label_singular: { type: 'string' },
description: { type: 'string' },
file: { type: 'string' },
- preview_path: { type: 'string' },
- preview_path_date_field: { type: 'string' },
editor: {
type: 'object',
properties: {
@@ -220,8 +218,6 @@ function getConfigSchema() {
summary: { type: 'string' },
slug: { type: 'string' },
path: { type: 'string' },
- preview_path: { type: 'string' },
- preview_path_date_field: { type: 'string' },
create: { type: 'boolean' },
publish: { type: 'boolean' },
hide: { type: 'boolean' },
diff --git a/core/src/extensions.ts b/core/src/extensions.ts
index 8ce3c12a..21680915 100644
--- a/core/src/extensions.ts
+++ b/core/src/extensions.ts
@@ -1,5 +1,4 @@
import {
- AzureBackend,
BitbucketBackend,
GitGatewayBackend,
GitHubBackend,
@@ -30,7 +29,6 @@ import {
export function addExtensions() {
// Register all the things
registerBackend('git-gateway', GitGatewayBackend);
- registerBackend('azure', AzureBackend);
registerBackend('github', GitHubBackend);
registerBackend('gitlab', GitLabBackend);
registerBackend('bitbucket', BitbucketBackend);
diff --git a/core/src/index.ts b/core/src/index.ts
index d81d7ad4..a4f3b05a 100644
--- a/core/src/index.ts
+++ b/core/src/index.ts
@@ -18,6 +18,10 @@ export const CMS = {
if (typeof window !== 'undefined') {
window.CMS = CMS;
window.createClass = window.createClass || createReactClass;
+ window.useState = window.useState || React.useState;
+ window.useMemo = window.useMemo || React.useMemo;
+ window.useEffect = window.useEffect || React.useEffect;
+ window.useCallback = window.useCallback || React.useCallback;
window.h = window.h || React.createElement;
}
diff --git a/core/src/integrations/index.ts b/core/src/integrations/index.ts
index c1abebfd..1a75d96e 100644
--- a/core/src/integrations/index.ts
+++ b/core/src/integrations/index.ts
@@ -1,28 +1,19 @@
import Algolia from './providers/algolia/implementation';
-import AssetStore from './providers/assetStore/implementation';
-import type {
- AlgoliaConfig,
- AssetStoreConfig,
- MediaIntegrationProvider,
- SearchIntegrationProvider,
-} from '../interface';
+import type { AlgoliaConfig, SearchIntegrationProvider } from '../interface';
interface IntegrationsConfig {
providers?: {
algolia?: AlgoliaConfig;
- assetStore?: AssetStoreConfig;
};
}
interface Integrations {
algolia?: Algolia;
- assetStore?: AssetStore;
}
export function resolveIntegrations(
config: IntegrationsConfig | undefined,
- getToken: () => Promise,
) {
const integrationInstances: Integrations = {};
@@ -30,10 +21,6 @@ export function resolveIntegrations(
integrationInstances.algolia = new Algolia(config.providers.algolia);
}
- if (config?.providers?.['assetStore']) {
- integrationInstances['assetStore'] = new AssetStore(config.providers['assetStore'], getToken);
- }
-
return integrationInstances;
}
@@ -42,32 +29,13 @@ export const getSearchIntegrationProvider = (function () {
return (
config: IntegrationsConfig | undefined,
- getToken: () => Promise,
provider: SearchIntegrationProvider,
) => {
if (provider in (config?.providers ?? {}))
if (integrations) {
return integrations[provider];
} else {
- integrations = resolveIntegrations(config, getToken);
- return integrations[provider];
- }
- };
-})();
-
-export const getMediaIntegrationProvider = (function () {
- let integrations: Integrations = {};
-
- return (
- config: IntegrationsConfig | undefined,
- getToken: () => Promise,
- provider: MediaIntegrationProvider,
- ) => {
- if (provider in (config?.providers ?? {}))
- if (integrations) {
- return integrations[provider];
- } else {
- integrations = resolveIntegrations(config, getToken);
+ integrations = resolveIntegrations(config);
return integrations[provider];
}
};
diff --git a/core/src/integrations/providers/assetStore/implementation.ts b/core/src/integrations/providers/assetStore/implementation.ts
deleted file mode 100644
index 98ef8fa5..00000000
--- a/core/src/integrations/providers/assetStore/implementation.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-import pickBy from 'lodash/pickBy';
-import trimEnd from 'lodash/trimEnd';
-
-import { unsentRequest } from '../../../lib/util';
-import { addParams } from '../../../lib/urlHelper';
-
-import type { AssetStoreConfig } from '../../../interface';
-
-const { fetchWithTimeout: fetch } = unsentRequest;
-
-interface AssetStoreResponse {
- id: string;
- name: string;
- size: number;
- url: string;
-}
-
-export default class AssetStore {
- private shouldConfirmUpload: boolean;
- private getSignedFormURL: string;
- private getToken: () => Promise;
-
- constructor(config: AssetStoreConfig, getToken: () => Promise) {
- if (config.getSignedFormURL == null) {
- throw 'The AssetStore integration needs the getSignedFormURL in the integration configuration.';
- }
- this.getToken = getToken;
-
- this.shouldConfirmUpload = config.shouldConfirmUpload ?? false;
- this.getSignedFormURL = trimEnd(config.getSignedFormURL, '/');
- }
-
- parseJsonResponse(response: Response) {
- return response.json().then(json => {
- if (!response.ok) {
- return Promise.reject(json);
- }
-
- return json;
- });
- }
-
- urlFor(path: string, optionParams: Record = {}) {
- const params = [];
- for (const key in optionParams) {
- params.push(`${key}=${encodeURIComponent(optionParams[key])}`);
- }
- if (params.length) {
- path += `?${params.join('&')}`;
- }
- return path;
- }
-
- requestHeaders(headers = {}) {
- return {
- ...headers,
- };
- }
-
- confirmRequest(assetID: string) {
- this.getToken().then(token =>
- this.request(`${this.getSignedFormURL}/${assetID}`, {
- method: 'PUT',
- headers: {
- 'Content-Type': 'application/json',
- Authorization: `Bearer ${token}`,
- },
- body: JSON.stringify({ state: 'uploaded' }),
- }),
- );
- }
-
- async request(
- path: string,
- options: RequestInit & {
- params?: Record;
- },
- ) {
- const headers = this.requestHeaders(options.headers || {});
- const url = this.urlFor(path, options.params);
- const response = await fetch(url, { ...options, headers });
- const contentType = response.headers.get('Content-Type');
- const isJson = contentType && contentType.match(/json/);
- const content = isJson ? await this.parseJsonResponse(response) : response.text();
- return content;
- }
-
- async retrieve(query: string, page: number, privateUpload: boolean) {
- const params = pickBy(
- { search: query, page: `${page}`, filter: privateUpload ? 'private' : 'public' },
- val => !!val,
- );
- const url = addParams(this.getSignedFormURL, params);
- const token = await this.getToken();
- const headers = {
- 'Content-Type': 'application/json',
- Authorization: `Bearer ${token}`,
- };
- const response: AssetStoreResponse[] = await this.request(url, { headers });
- const files = response.map(({ id, name, size, url }) => {
- return { id, name, size, displayURL: url, url, path: url };
- });
- return files;
- }
-
- delete(assetID: string) {
- const url = `${this.getSignedFormURL}/${assetID}`;
- return this.getToken().then(token =>
- this.request(url, {
- method: 'DELETE',
- headers: {
- 'Content-Type': 'application/json',
- Authorization: `Bearer ${token}`,
- },
- }),
- );
- }
-
- async upload(file: File, privateUpload = false) {
- const fileData: {
- name: string;
- size: number;
- content_type?: string;
- visibility?: 'private';
- } = {
- name: file.name,
- size: file.size,
- };
- if (file.type) {
- fileData.content_type = file.type;
- }
-
- if (privateUpload) {
- fileData.visibility = 'private';
- }
-
- try {
- const token = await this.getToken();
- const response = await this.request(this.getSignedFormURL, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- Authorization: `Bearer ${token}`,
- },
- body: JSON.stringify(fileData),
- });
- const formURL = response.form.url;
- const formFields = response.form.fields;
- const { id, name, size, url } = response.asset;
-
- const formData = new FormData();
- Object.keys(formFields).forEach(key => formData.append(key, formFields[key]));
- formData.append('file', file, file.name);
-
- await this.request(formURL, { method: 'POST', body: formData });
-
- if (this.shouldConfirmUpload) {
- await this.confirmRequest(id);
- }
-
- const asset = { id, name, size, displayURL: url, url, path: url };
- return { success: true, asset };
- } catch (error) {
- console.error(error);
- throw error;
- }
- }
-}
diff --git a/core/src/interface.ts b/core/src/interface.ts
index 25071da8..961628c9 100644
--- a/core/src/interface.ts
+++ b/core/src/interface.ts
@@ -4,7 +4,7 @@ import type {
} from '@toast-ui/editor/types/editor';
import type { ToolbarItemOptions as MarkdownToolbarItemOptions } from '@toast-ui/editor/types/ui';
import type { PropertiesSchema } from 'ajv/dist/types/json-schema';
-import type { ComponentType, ReactNode } from 'react';
+import type { FunctionComponent, ComponentType, ReactNode } from 'react';
import type { t, TranslateProps as ReactPolyglotTranslateProps } from 'react-polyglot';
import type { MediaFile as BackendMediaFile } from './backend';
import type { EditorControlProps } from './components/Editor/EditorControlPane/EditorControl';
@@ -15,12 +15,6 @@ import type Cursor from './lib/util/Cursor';
import type AssetProxy from './valueObjects/AssetProxy';
import type { MediaHolder } from './widgets/markdown/hooks/useMedia';
-export interface SlugConfig {
- encoding: string;
- clean_accents: boolean;
- sanitize_replacement: string;
-}
-
export interface Pages {
[collection: string]: { isFetching?: boolean; page?: number; ids: string[] };
}
@@ -68,6 +62,7 @@ export type ValueOrNestedValue =
| number
| boolean
| string[]
+ | (string | number)[]
| null
| undefined
| ObjectValue
@@ -176,8 +171,6 @@ export interface Collection {
isFetching?: boolean;
media_folder?: string;
public_folder?: string;
- preview_path?: string;
- preview_path_date_field?: string;
summary?: string;
filter?: FilterRule;
type: 'file_based_collection' | 'folder_based_collection';
@@ -224,15 +217,11 @@ export interface DisplayURLState {
err?: Error;
}
-export type Hook = string | boolean;
-
export type TranslatedProps = T & ReactPolyglotTranslateProps;
export type GetAssetFunction = (path: string, field?: Field) => Promise;
export interface WidgetControlProps {
- clearFieldErrors: EditorControlProps['clearFieldErrors'];
- clearSearch: EditorControlProps['clearSearch'];
collection: Collection;
config: Config;
entry: Entry;
@@ -242,11 +231,9 @@ export interface WidgetControlProps {
forList: boolean;
getAsset: GetAssetFunction;
isDisabled: boolean;
- isFetching: boolean;
isFieldDuplicate: EditorControlProps['isFieldDuplicate'];
isFieldHidden: EditorControlProps['isFieldHidden'];
label: string;
- loadEntry: EditorControlProps['loadEntry'];
locale: string | undefined;
mediaPaths: Record;
onChange: (value: T | null | undefined) => void;
@@ -268,7 +255,6 @@ export interface WidgetPreviewProps {
entry: Entry;
field: RenderedField;
getAsset: GetAssetFunction;
- resolveWidget: (name: string) => Widget;
value: T | undefined | null;
}
@@ -305,7 +291,6 @@ export interface WidgetOptions {
validator?: Widget['validator'];
getValidValue?: Widget['getValidValue'];
schema?: Widget['schema'];
- allowMapValue?: boolean;
}
export interface Widget {
@@ -314,7 +299,6 @@ export interface Widget {
validator: FieldValidationMethod;
getValidValue: (value: T | undefined | null) => T | undefined | null;
schema?: PropertiesSchema;
- allowMapValue?: boolean;
}
export interface WidgetParam {
@@ -367,8 +351,6 @@ export interface BackendEntry {
assets: AssetProxy[];
}
-export type DeleteOptions = {};
-
export interface Credentials {
token: string | {};
refresh_token?: string;
@@ -446,7 +428,7 @@ export interface LocalePhrasesRoot {
}
export type LocalePhrases = string | { [property: string]: LocalePhrases };
-export type CustomIcon = () => JSX.Element;
+export type CustomIcon = FunctionComponent;
export type WidgetValueSerializer = {
serialize: (value: ValueOrNestedValue) => ValueOrNestedValue;
@@ -473,33 +455,10 @@ export interface MediaLibraryInternalOptions {
export type MediaLibrary = MediaLibraryExternalLibrary | MediaLibraryInternalOptions;
-export type BackendType =
- | 'azure'
- | 'git-gateway'
- | 'github'
- | 'gitlab'
- | 'bitbucket'
- | 'test-repo'
- | 'proxy';
+export type BackendType = 'git-gateway' | 'github' | 'gitlab' | 'bitbucket' | 'test-repo' | 'proxy';
export type MapWidgetType = 'Point' | 'LineString' | 'Polygon';
-export type MarkdownWidgetButton =
- | 'bold'
- | 'italic'
- | 'code'
- | 'link'
- | 'heading-one'
- | 'heading-two'
- | 'heading-three'
- | 'heading-four'
- | 'heading-five'
- | 'heading-six'
- | 'quote'
- | 'code-block'
- | 'bulleted-list'
- | 'numbered-list';
-
export interface SelectWidgetOptionObject {
label: string;
value: string;
@@ -567,12 +526,10 @@ export interface FileOrImageField extends BaseField {
media_library?: MediaLibrary;
media_folder?: string;
public_folder?: string;
- private?: boolean;
}
export interface ObjectField extends BaseField {
widget: 'object';
- default?: ObjectValue;
collapsed?: boolean;
summary?: string;
@@ -626,9 +583,9 @@ export interface NumberField extends BaseField {
export interface SelectField extends BaseField {
widget: 'select';
- default?: string | string[];
+ default?: string | number | (string | number)[];
- options: string[] | SelectWidgetOptionObject[];
+ options: (string | number)[] | SelectWidgetOptionObject[];
multiple?: boolean;
min?: number;
max?: number;
@@ -708,12 +665,9 @@ export interface SortableFields {
export interface Backend {
name: BackendType;
- auth_scope?: AuthScope;
repo?: string;
branch?: string;
api_root?: string;
- api_version?: string;
- tenant_id?: string;
site_domain?: string;
base_url?: string;
auth_endpoint?: string;
@@ -725,6 +679,7 @@ export interface Backend {
use_large_media_transforms_in_media_library?: boolean;
identity_url?: string;
gateway_url?: string;
+ auth_scope?: AuthScope;
commit_messages?: {
create?: string;
update?: string;
@@ -784,23 +739,27 @@ export interface EventData {
author: { login: string | undefined; name: string };
}
+export type EventListenerOptions = Record;
+
+export type EventListenerHandler = (
+ data: EventData,
+ options: EventListenerOptions,
+) => Promise;
+
export interface EventListener {
name: AllowedEvent;
- handler: (
- data: EventData,
- options: Record,
- ) => Promise;
+ handler: EventListenerHandler;
}
-export type EventListenerOptions = Record;
+export interface AdditionalLinkOptions {
+ iconName?: string;
+}
export interface AdditionalLink {
id: string;
title: string;
- data: string | (() => JSX.Element);
- options?: {
- iconName?: string;
- };
+ data: string | FunctionComponent;
+ options?: AdditionalLinkOptions;
}
export interface AuthenticationPageProps {
@@ -816,11 +775,9 @@ export interface AuthenticationPageProps {
export type Integration = {
collections?: '*' | string[];
-} & (AlgoliaIntegration | AssetStoreIntegration);
+} & AlgoliaIntegration;
-export type IntegrationProvider = Integration['provider'];
export type SearchIntegrationProvider = 'algolia';
-export type MediaIntegrationProvider = 'assetStore';
export interface AlgoliaIntegration extends AlgoliaConfig {
provider: 'algolia';
@@ -833,16 +790,6 @@ export interface AlgoliaConfig {
indexPrefix?: string;
}
-export interface AssetStoreIntegration extends AssetStoreConfig {
- provider: 'assetStore';
-}
-
-export interface AssetStoreConfig {
- hooks: ['assetStore'];
- shouldConfirmUpload?: boolean;
- getSignedFormURL: string;
-}
-
export interface SearchResponse {
entries: Entry[];
pagination: number;
diff --git a/core/src/lib/registry.ts b/core/src/lib/registry.ts
index 73135e5c..ea0f4fd2 100644
--- a/core/src/lib/registry.ts
+++ b/core/src/lib/registry.ts
@@ -171,7 +171,6 @@ export function registerWidget(
validator = () => false,
getValidValue = (value: T | undefined | null) => value,
schema,
- allowMapValue,
} = {},
} = name;
if (registry.widgets[widgetName]) {
@@ -189,7 +188,6 @@ export function registerWidget(
validator: validator as Widget['validator'],
getValidValue: getValidValue as Widget['getValidValue'],
schema,
- allowMapValue,
};
} else {
console.error('`registerWidget` failed, called with incorrect arguments.');
@@ -360,6 +358,7 @@ export function getAdditionalLinks(): Record {
}
export function getAdditionalLink(id: string): AdditionalLink | undefined {
+ console.log('additionalLinks', registry.additionalLinks);
return registry.additionalLinks[id];
}
diff --git a/core/src/locales/bg/index.ts b/core/src/locales/bg/index.ts
index 0c89cf63..8fb2980d 100644
--- a/core/src/locales/bg/index.ts
+++ b/core/src/locales/bg/index.ts
@@ -5,7 +5,6 @@ const bg: LocalePhrasesRoot = {
login: 'Вход',
loggingIn: 'Влизане...',
loginWithNetlifyIdentity: 'Вход с Netlify Identity',
- loginWithAzure: 'Вход с Azure',
loginWithBitbucket: 'Вход с Bitbucket',
loginWithGitHub: 'Вход с GitHub',
loginWithGitLab: 'Вход с GitLab',
@@ -208,7 +207,6 @@ const bg: LocalePhrasesRoot = {
noResults: 'Няма резултати.',
noAssetsFound: 'Няма намерени ресурси.',
noImagesFound: 'Няма намерени изображения.',
- private: 'Частен ',
images: 'Изображения',
mediaAssets: 'Медийни ресурси',
search: 'Търсене...',
diff --git a/core/src/locales/ca/index.ts b/core/src/locales/ca/index.ts
index 74fccc61..650d1ba1 100644
--- a/core/src/locales/ca/index.ts
+++ b/core/src/locales/ca/index.ts
@@ -206,7 +206,6 @@ const ca: LocalePhrasesRoot = {
noResults: 'Sense resultats.',
noAssetsFound: 'Arxius no trobats.',
noImagesFound: 'Imatges no trobades.',
- private: 'Privat',
images: 'Imatges',
mediaAssets: 'Arxius multimèdia',
search: 'Buscar...',
diff --git a/core/src/locales/cs/index.ts b/core/src/locales/cs/index.ts
index 7f85918a..a50326e9 100644
--- a/core/src/locales/cs/index.ts
+++ b/core/src/locales/cs/index.ts
@@ -5,7 +5,6 @@ const cs: LocalePhrasesRoot = {
login: 'Přihlásit',
loggingIn: 'Přihlašování…',
loginWithNetlifyIdentity: 'Přihlásit pomocí Netlify Identity',
- loginWithAzure: 'Přihlásit pomocí Azure',
loginWithBitbucket: 'Přihlásit pomocí Bitbucket',
loginWithGitHub: 'Přihlásit pomocí GitHub',
loginWithGitLab: 'Přihlásit pomocí GitLab',
@@ -206,7 +205,6 @@ const cs: LocalePhrasesRoot = {
noResults: 'Nic nenalezeno.',
noAssetsFound: 'Média nenalezena.',
noImagesFound: 'Obrázky nenalezeny.',
- private: 'Soukromé ',
images: 'Obrázky',
mediaAssets: 'Média',
search: 'Hledat…',
diff --git a/core/src/locales/da/index.ts b/core/src/locales/da/index.ts
index 8677535c..d7934946 100644
--- a/core/src/locales/da/index.ts
+++ b/core/src/locales/da/index.ts
@@ -5,7 +5,6 @@ const da: LocalePhrasesRoot = {
login: 'Log ind',
loggingIn: 'Logger ind...',
loginWithNetlifyIdentity: 'Log ind med Netlify Identity',
- loginWithAzure: 'Log ing med Azure',
loginWithBitbucket: 'Log ind med Bitbucket',
loginWithGitHub: 'Log ind med GitHub',
loginWithGitLab: 'Log ind med GitLab',
@@ -192,7 +191,6 @@ const da: LocalePhrasesRoot = {
noResults: 'Ingen resultater.',
noAssetsFound: 'Ingen elementer fundet.',
noImagesFound: 'Ingen billeder fundet.',
- private: 'Privat ',
images: 'Billeder',
mediaAssets: 'Medie elementer',
search: 'Søg...',
diff --git a/core/src/locales/de/index.ts b/core/src/locales/de/index.ts
index 660721bb..582d9f6e 100644
--- a/core/src/locales/de/index.ts
+++ b/core/src/locales/de/index.ts
@@ -5,7 +5,6 @@ const de: LocalePhrasesRoot = {
login: 'Login',
loggingIn: 'Sie werden eingeloggt...',
loginWithNetlifyIdentity: 'Mit Netlify Identity einloggen',
- loginWithAzure: 'Mit Azure einloggen',
loginWithBitbucket: 'Mit Bitbucket einloggen',
loginWithGitHub: 'Mit GitHub einloggen',
loginWithGitLab: 'Mit GitLab einloggen',
@@ -220,7 +219,6 @@ const de: LocalePhrasesRoot = {
noResults: 'Keine Egebnisse.',
noAssetsFound: 'Keine Medien gefunden.',
noImagesFound: 'Keine Bilder gefunden.',
- private: 'Privat ',
images: 'Bilder',
mediaAssets: 'Medien',
search: 'Suchen...',
diff --git a/core/src/locales/en/index.ts b/core/src/locales/en/index.ts
index 01115c39..a0d0547e 100644
--- a/core/src/locales/en/index.ts
+++ b/core/src/locales/en/index.ts
@@ -5,7 +5,6 @@ const en: LocalePhrasesRoot = {
login: 'Login',
loggingIn: 'Logging in...',
loginWithNetlifyIdentity: 'Login with Netlify Identity',
- loginWithAzure: 'Login with Azure',
loginWithBitbucket: 'Login with Bitbucket',
loginWithGitHub: 'Login with GitHub',
loginWithGitLab: 'Login with GitLab',
@@ -240,7 +239,6 @@ const en: LocalePhrasesRoot = {
noResults: 'No results.',
noAssetsFound: 'No assets found.',
noImagesFound: 'No images found.',
- private: 'Private ',
images: 'Images',
mediaAssets: 'Media assets',
search: 'Search...',
diff --git a/core/src/locales/es/index.ts b/core/src/locales/es/index.ts
index d96e834a..a94819f2 100644
--- a/core/src/locales/es/index.ts
+++ b/core/src/locales/es/index.ts
@@ -170,7 +170,6 @@ const es: LocalePhrasesRoot = {
noResults: 'Sin resultados.',
noAssetsFound: 'Archivos no encontrados.',
noImagesFound: 'Imágenes no encontradas.',
- private: 'Privado ',
images: 'Imágenes',
mediaAssets: 'Archivos multimedia',
search: 'Buscar...',
diff --git a/core/src/locales/fr/index.ts b/core/src/locales/fr/index.ts
index 58cfef35..62575767 100644
--- a/core/src/locales/fr/index.ts
+++ b/core/src/locales/fr/index.ts
@@ -5,7 +5,6 @@ const fr: LocalePhrasesRoot = {
login: 'Se connecter',
loggingIn: 'Connexion en cours...',
loginWithNetlifyIdentity: 'Se connecter avec Netlify Identity',
- loginWithAzure: 'Se connecter avec Azure',
loginWithBitbucket: 'Se connecter avec Bitbucket',
loginWithGitHub: 'Se connecter avec GitHub',
loginWithGitLab: 'Se connecter avec GitLab',
@@ -216,7 +215,6 @@ const fr: LocalePhrasesRoot = {
noResults: 'Aucun résultat.',
noAssetsFound: 'Aucune ressource trouvée.',
noImagesFound: 'Aucune image trouvée.',
- private: 'Privé ',
images: 'Images',
mediaAssets: 'Ressources',
search: 'Recherche...',
diff --git a/core/src/locales/gr/index.ts b/core/src/locales/gr/index.ts
index debafb11..55902b8e 100644
--- a/core/src/locales/gr/index.ts
+++ b/core/src/locales/gr/index.ts
@@ -149,7 +149,6 @@ const gr: LocalePhrasesRoot = {
noResults: 'Χωρίς αποτελέσματα.',
noAssetsFound: 'Δεν βρέθηκαν αρχεία.',
noImagesFound: 'Δεν βρέθηκαν εικόνες.',
- private: 'Ιδιωτικό',
images: 'Εικόνες',
mediaAssets: 'Αρχεία πολυμέσων',
search: 'Αναζήτηση...',
diff --git a/core/src/locales/he/index.ts b/core/src/locales/he/index.ts
index d5c2eaee..9aa3299d 100644
--- a/core/src/locales/he/index.ts
+++ b/core/src/locales/he/index.ts
@@ -5,7 +5,6 @@ const he: LocalePhrasesRoot = {
login: 'התחברות',
loggingIn: 'התחברות...',
loginWithNetlifyIdentity: 'התחברות עם Netlify Identity',
- loginWithAzure: 'התחברות עם Azure',
loginWithBitbucket: 'התחברות עם Bitbucket',
loginWithGitHub: 'התחברות עם GitHub',
loginWithGitLab: 'התחברות עם GitLab',
@@ -216,7 +215,6 @@ const he: LocalePhrasesRoot = {
noResults: 'לא נמצאו תוצאות.',
noAssetsFound: 'לא נמצאו קבצים.',
noImagesFound: 'לא נמצאו תמונות.',
- private: 'פרטי ',
images: 'תמונות',
mediaAssets: 'קבצי מדיה',
search: 'חיפוש...',
diff --git a/core/src/locales/hr/index.ts b/core/src/locales/hr/index.ts
index 3f6cd4f8..45e75e53 100644
--- a/core/src/locales/hr/index.ts
+++ b/core/src/locales/hr/index.ts
@@ -5,7 +5,6 @@ const hr: LocalePhrasesRoot = {
login: 'Prijava',
loggingIn: 'Prijava u tijeku...',
loginWithNetlifyIdentity: 'Prijava sa Netlify računom',
- loginWithAzure: 'Prijava za Azure računom',
loginWithBitbucket: 'Prijava sa Bitbucket računom',
loginWithGitHub: 'Prijava sa GitHub računom',
loginWithGitLab: 'Prijava sa GitLab računom',
@@ -195,7 +194,6 @@ const hr: LocalePhrasesRoot = {
noResults: 'Nema rezultata.',
noAssetsFound: 'Sredstva nisu pronađena.',
noImagesFound: 'Slike nisu pronađene.',
- private: 'Privatno ',
images: 'Slike',
mediaAssets: 'Medijska sredstva',
search: 'Pretraži...',
diff --git a/core/src/locales/hu/index.ts b/core/src/locales/hu/index.ts
index 091af09e..41df0651 100644
--- a/core/src/locales/hu/index.ts
+++ b/core/src/locales/hu/index.ts
@@ -135,7 +135,6 @@ const hu: LocalePhrasesRoot = {
noResults: 'Nincs találat.',
noAssetsFound: 'Nem található tartalom.',
noImagesFound: 'Nem található kép.',
- private: 'Privát ',
images: 'Képek',
mediaAssets: 'Média tartalmak',
search: 'Keresés...',
diff --git a/core/src/locales/it/index.ts b/core/src/locales/it/index.ts
index 70a31e16..8fd7db0a 100644
--- a/core/src/locales/it/index.ts
+++ b/core/src/locales/it/index.ts
@@ -146,7 +146,6 @@ const it: LocalePhrasesRoot = {
noResults: 'Nessun risultato.',
noAssetsFound: 'Nessun assets trovato.',
noImagesFound: 'Nessuna immagine trovata.',
- private: 'Privato ',
images: 'Immagini',
mediaAssets: 'Media assets',
search: 'Cerca...',
diff --git a/core/src/locales/ja/index.ts b/core/src/locales/ja/index.ts
index 96637a21..30eb91fd 100644
--- a/core/src/locales/ja/index.ts
+++ b/core/src/locales/ja/index.ts
@@ -5,7 +5,6 @@ const ja: LocalePhrasesRoot = {
login: 'ログイン',
loggingIn: 'ログインしています...',
loginWithNetlifyIdentity: 'Netlify Identity でログインする',
- loginWithAzure: 'Azure でログインする',
loginWithBitbucket: 'Bitbucket でログインする',
loginWithGitHub: 'GitHub でログインする',
loginWithGitLab: 'GitLab でログインする',
@@ -213,7 +212,6 @@ const ja: LocalePhrasesRoot = {
noResults: 'データがありません。',
noAssetsFound: 'データがありません。',
noImagesFound: 'データがありません。',
- private: 'プライベート',
images: '画像',
mediaAssets: 'メディア',
search: '検索',
diff --git a/core/src/locales/ko/index.ts b/core/src/locales/ko/index.ts
index 843164f0..b6377d73 100644
--- a/core/src/locales/ko/index.ts
+++ b/core/src/locales/ko/index.ts
@@ -177,7 +177,6 @@ const ko: LocalePhrasesRoot = {
noResults: '일치 항목 없음.',
noAssetsFound: '발견된 에셋 없음.',
noImagesFound: '발견된 이미지 없음.',
- private: '개인 ',
images: '이미지',
mediaAssets: '미디어 에셋',
search: '검색...',
diff --git a/core/src/locales/lt/index.ts b/core/src/locales/lt/index.ts
index 5d131bf6..ad6dbc9e 100644
--- a/core/src/locales/lt/index.ts
+++ b/core/src/locales/lt/index.ts
@@ -5,7 +5,6 @@ const lt: LocalePhrasesRoot = {
login: 'Prisijungti',
loggingIn: 'Prisijungiama...',
loginWithNetlifyIdentity: 'Prisijungti su Netlify Identity',
- loginWithAzure: 'Prisijungti su Azure',
loginWithBitbucket: 'Prisijungti su Bitbucket',
loginWithGitHub: 'Prisijungti su GitHub',
loginWithGitLab: 'Prisijungti su GitLab',
@@ -197,7 +196,6 @@ const lt: LocalePhrasesRoot = {
noResults: 'Nėra rezultatų.',
noAssetsFound: 'Turinio nerasta.',
noImagesFound: 'Vaizdų nerasta.',
- private: 'Privatu ',
images: 'Vaizdai',
mediaAssets: 'Medijos turinys',
search: 'Paieška...',
diff --git a/core/src/locales/nb_no/index.ts b/core/src/locales/nb_no/index.ts
index 18468203..8a2351df 100644
--- a/core/src/locales/nb_no/index.ts
+++ b/core/src/locales/nb_no/index.ts
@@ -166,7 +166,6 @@ const nb_no: LocalePhrasesRoot = {
noResults: 'Ingen resultater.',
noAssetsFound: 'Ingen elementer funnet.',
noImagesFound: 'Ingen bilder funnet.',
- private: 'Privat ',
images: 'Bilder',
mediaAssets: 'Mediebibliotek',
search: 'Søk...',
diff --git a/core/src/locales/nl/index.ts b/core/src/locales/nl/index.ts
index 19f10d06..a83344fb 100644
--- a/core/src/locales/nl/index.ts
+++ b/core/src/locales/nl/index.ts
@@ -5,7 +5,6 @@ const nl: LocalePhrasesRoot = {
login: 'Inloggen',
loggingIn: 'Inloggen...',
loginWithNetlifyIdentity: 'Inloggen met Netlify Identity',
- loginWithAzure: 'Inloggen met Azure',
loginWithBitbucket: 'Inloggen met Bitbucket',
loginWithGitHub: 'Inloggen met GitHub',
loginWithGitLab: 'Inloggen met GitLab',
@@ -212,7 +211,6 @@ const nl: LocalePhrasesRoot = {
noResults: 'Geen resultaten.',
noAssetsFound: 'Geen media gevonden.',
noImagesFound: 'Geen afbeeldingen gevonden.',
- private: 'Privé',
images: 'Afbeeldingen',
mediaAssets: 'Media',
search: 'Zoeken...',
diff --git a/core/src/locales/nn_no/index.ts b/core/src/locales/nn_no/index.ts
index 242233a7..5f8ee45a 100644
--- a/core/src/locales/nn_no/index.ts
+++ b/core/src/locales/nn_no/index.ts
@@ -167,7 +167,6 @@ const nn_no: LocalePhrasesRoot = {
noResults: 'Ingen resultat.',
noAssetsFound: 'Ingen elementer funne.',
noImagesFound: 'Ingen bilete funne.',
- private: 'Privat ',
images: 'Bileter',
mediaAssets: 'Mediebibliotek',
search: 'Søk...',
diff --git a/core/src/locales/pl/index.ts b/core/src/locales/pl/index.ts
index 34124dbc..57dace61 100644
--- a/core/src/locales/pl/index.ts
+++ b/core/src/locales/pl/index.ts
@@ -5,7 +5,6 @@ const pl: LocalePhrasesRoot = {
login: 'Zaloguj się',
loggingIn: 'Logowanie...',
loginWithNetlifyIdentity: 'Zaloguj przez konto Netlify',
- loginWithAzure: 'Zaloguj przez konto Azure',
loginWithBitbucket: 'Zaloguj przez Bitbucket',
loginWithGitHub: 'Zaloguj przez GitHub',
loginWithGitLab: 'Zaloguj przez GitLab',
@@ -217,7 +216,6 @@ const pl: LocalePhrasesRoot = {
noResults: 'Brak wyników.',
noAssetsFound: 'Nie znaleziono żadnych zasobów.',
noImagesFound: 'Nie znaleziono żadnych obrazów.',
- private: 'Prywatne ',
images: 'Obrazy',
mediaAssets: 'Zasoby multimedialne',
search: 'Szukaj...',
diff --git a/core/src/locales/pt/index.ts b/core/src/locales/pt/index.ts
index 1165be0e..f0770438 100644
--- a/core/src/locales/pt/index.ts
+++ b/core/src/locales/pt/index.ts
@@ -5,7 +5,6 @@ const pt: LocalePhrasesRoot = {
login: 'Entrar',
loggingIn: 'Entrando...',
loginWithNetlifyIdentity: 'Entrar com o Netlify Identity',
- loginWithAzure: 'Entrar com o Azure',
loginWithBitbucket: 'Entrar com o Bitbucket',
loginWithGitHub: 'Entrar com o GitHub',
loginWithGitLab: 'Entrar com o GitLab',
@@ -219,7 +218,6 @@ const pt: LocalePhrasesRoot = {
noResults: 'Nenhum resultado.',
noAssetsFound: 'Nenhum recurso encontrado.',
noImagesFound: 'Nenhuma imagem encontrada.',
- private: 'Privado ',
images: 'Imagens',
mediaAssets: 'Recursos de mídia',
search: 'Pesquisar...',
diff --git a/core/src/locales/ro/index.ts b/core/src/locales/ro/index.ts
index be79667b..41910bde 100644
--- a/core/src/locales/ro/index.ts
+++ b/core/src/locales/ro/index.ts
@@ -5,7 +5,6 @@ const ro: LocalePhrasesRoot = {
login: 'Autentifică-te',
loggingIn: 'Te autentificăm...',
loginWithNetlifyIdentity: 'Autentifică-te cu Netlify Identity',
- loginWithAzure: 'Autentifică-te cu Azure',
loginWithBitbucket: 'Autentifică-te cu Bitbucket',
loginWithGitHub: 'Autentifică-te cu GitHub',
loginWithGitLab: 'Autentifică-te cu GitLab',
@@ -211,7 +210,6 @@ const ro: LocalePhrasesRoot = {
noResults: 'Nu sunt rezultate.',
noAssetsFound: 'Nu s-au găsit fișiere.',
noImagesFound: 'Nu s-au găsit imagini.',
- private: 'Privat ',
images: 'Imagini',
mediaAssets: 'Fișiere media',
search: 'Caută...',
diff --git a/core/src/locales/ru/index.ts b/core/src/locales/ru/index.ts
index 987d8aaa..9f972a59 100644
--- a/core/src/locales/ru/index.ts
+++ b/core/src/locales/ru/index.ts
@@ -5,7 +5,6 @@ const ru: LocalePhrasesRoot = {
login: 'Войти',
loggingIn: 'Вхожу...',
loginWithNetlifyIdentity: 'Войти через Netlify Identity',
- loginWithAzure: 'Войти через Azure',
loginWithBitbucket: 'Войти через Bitbucket',
loginWithGitHub: 'Войти через GitHub',
loginWithGitLab: 'Войти через GitLab',
@@ -207,7 +206,6 @@ const ru: LocalePhrasesRoot = {
noResults: 'Нет результатов.',
noAssetsFound: 'Ресурсы не найдены.',
noImagesFound: 'Изображения не найдены.',
- private: 'Приватные ',
images: 'Изображения',
mediaAssets: 'Медиаресурсы',
search: 'Идёт поиск…',
diff --git a/core/src/locales/sv/index.ts b/core/src/locales/sv/index.ts
index 29b6d7c2..87d50df8 100644
--- a/core/src/locales/sv/index.ts
+++ b/core/src/locales/sv/index.ts
@@ -5,7 +5,6 @@ const sv: LocalePhrasesRoot = {
login: 'Logga in',
loggingIn: 'Loggar in...',
loginWithNetlifyIdentity: 'Logga in med Netlify Identity',
- loginWithAzure: 'Logga in med Azure',
loginWithBitbucket: 'Logga in med Bitbucket',
loginWithGitHub: 'Logga in med GitHub',
loginWithGitLab: 'Logga in med GitLab',
@@ -211,7 +210,6 @@ const sv: LocalePhrasesRoot = {
noResults: 'Inga resultat.',
noAssetsFound: 'Hittade inga mediaobjekt.',
noImagesFound: 'Hittade inga bilder.',
- private: 'Privat ',
images: 'Bilder',
mediaAssets: 'Mediaobjekt',
search: 'Sök...',
diff --git a/core/src/locales/th/index.ts b/core/src/locales/th/index.ts
index cb6394b9..99564c1c 100644
--- a/core/src/locales/th/index.ts
+++ b/core/src/locales/th/index.ts
@@ -178,7 +178,6 @@ const th: LocalePhrasesRoot = {
noResults: 'ไม่มีผลลัพธ์',
noAssetsFound: 'ไม่พบข้อมูล',
noImagesFound: 'ไม่พบรูปภาพ',
- private: 'ส่วนตัว ',
images: 'รูปภาพ',
mediaAssets: 'ข้อมูลมีเดีย',
search: 'ค้นหา...',
diff --git a/core/src/locales/tr/index.ts b/core/src/locales/tr/index.ts
index b2a5347a..6d43c06e 100644
--- a/core/src/locales/tr/index.ts
+++ b/core/src/locales/tr/index.ts
@@ -5,7 +5,6 @@ const tr: LocalePhrasesRoot = {
login: 'Giriş',
loggingIn: 'Giriş yapılıyor..',
loginWithNetlifyIdentity: 'Netlify Identity ile Giriş',
- loginWithAzure: 'Azure ile Giriş',
loginWithBitbucket: 'Bitbucket ile Giriş',
loginWithGitHub: 'GitHub ile Giriş',
loginWithGitLab: 'GitLab ile Giriş',
@@ -223,7 +222,6 @@ const tr: LocalePhrasesRoot = {
noResults: 'Sonuç yok.',
noAssetsFound: 'Hiçbir dosya bulunamadı.',
noImagesFound: 'Resim bulunamadı.',
- private: 'Özel ',
images: 'Görseller',
mediaAssets: 'Medya dosyaları',
search: 'Ara...',
diff --git a/core/src/locales/uk/index.ts b/core/src/locales/uk/index.ts
index 68ae75c3..274ddf99 100644
--- a/core/src/locales/uk/index.ts
+++ b/core/src/locales/uk/index.ts
@@ -125,7 +125,6 @@ const uk: LocalePhrasesRoot = {
noResults: 'Результати відсутні.',
noAssetsFound: 'Матеріали відсутні.',
noImagesFound: 'Зображення відсутні.',
- private: 'Private ',
images: 'Зображення',
mediaAssets: 'Медіа матеріали',
search: 'Пошук...',
diff --git a/core/src/locales/vi/index.ts b/core/src/locales/vi/index.ts
index b02841fb..7d234ca8 100644
--- a/core/src/locales/vi/index.ts
+++ b/core/src/locales/vi/index.ts
@@ -175,7 +175,6 @@ const vi: LocalePhrasesRoot = {
noResults: 'Không có kết quả.',
noAssetsFound: 'Không tìm thấy tập tin nào.',
noImagesFound: 'Không tìm thấy hình nào.',
- private: 'Riêng tư ',
images: 'Hình ảnh',
mediaAssets: 'Tập tin',
search: 'Tìm kiếm...',
diff --git a/core/src/locales/zh_Hans/index.ts b/core/src/locales/zh_Hans/index.ts
index 1722bfd2..a0e09cf5 100644
--- a/core/src/locales/zh_Hans/index.ts
+++ b/core/src/locales/zh_Hans/index.ts
@@ -5,7 +5,6 @@ const zh_Hans: LocalePhrasesRoot = {
login: '登录',
loggingIn: '正在登录...',
loginWithNetlifyIdentity: '使用 Netlify Identity 登录',
- loginWithAzure: '使用 Azure 登录',
loginWithBitbucket: '使用 Bitbucket 登录',
loginWithGitHub: '使用 GitHub 登录',
loginWithGitLab: '使用 GitLab 登录',
@@ -207,7 +206,6 @@ const zh_Hans: LocalePhrasesRoot = {
noResults: '暂无结果',
noAssetsFound: '未找到资源',
noImagesFound: '未找到图片',
- private: '私有',
images: '图片',
mediaAssets: '媒体资源',
search: '搜索...',
diff --git a/core/src/locales/zh_Hant/index.ts b/core/src/locales/zh_Hant/index.ts
index 50cad6ed..177f0384 100644
--- a/core/src/locales/zh_Hant/index.ts
+++ b/core/src/locales/zh_Hant/index.ts
@@ -185,7 +185,6 @@ const zh_Hant: LocalePhrasesRoot = {
noResults: '沒有結果',
noAssetsFound: '沒有發現媒體資產。',
noImagesFound: '沒有發現影像。',
- private: '私人',
images: '影像',
mediaAssets: '媒體資產',
search: '搜尋中...',
diff --git a/core/src/reducers/entryDraft.ts b/core/src/reducers/entryDraft.ts
index 5fe2f74d..0a301983 100644
--- a/core/src/reducers/entryDraft.ts
+++ b/core/src/reducers/entryDraft.ts
@@ -5,7 +5,6 @@ import { v4 as uuid } from 'uuid';
import {
ADD_DRAFT_ENTRY_MEDIA_FILE,
DRAFT_CHANGE_FIELD,
- DRAFT_CLEAR_ERRORS,
DRAFT_CREATE_DUPLICATE_FROM_ENTRY,
DRAFT_CREATE_EMPTY,
DRAFT_CREATE_FROM_ENTRY,
@@ -176,13 +175,6 @@ function entryDraftReducer(
};
}
- case DRAFT_CLEAR_ERRORS: {
- return {
- ...state,
- fieldsErrors: {},
- };
- }
-
case ENTRY_PERSIST_REQUEST: {
if (!state.entry) {
return state;
diff --git a/core/src/reducers/index.ts b/core/src/reducers/index.ts
index 5871b061..10f3b13c 100644
--- a/core/src/reducers/index.ts
+++ b/core/src/reducers/index.ts
@@ -18,18 +18,18 @@ import type { IntegrationHooks } from './integrations';
const reducers = {
auth,
- config,
collections,
- search,
- integrations,
- entries,
+ config,
cursors,
+ entries,
entryDraft,
- medias,
- mediaLibrary,
globalUI,
- status,
+ integrations,
+ mediaLibrary,
+ medias,
scroll,
+ search,
+ status,
};
export default reducers;
diff --git a/core/src/reducers/integrations.ts b/core/src/reducers/integrations.ts
index 3fc80b0b..b532bcac 100644
--- a/core/src/reducers/integrations.ts
+++ b/core/src/reducers/integrations.ts
@@ -5,22 +5,18 @@ import { CONFIG_SUCCESS } from '../actions/config';
import type { ConfigAction } from '../actions/config';
import type {
AlgoliaConfig,
- AssetStoreConfig,
Config,
- MediaIntegrationProvider,
SearchIntegrationProvider,
} from '../interface';
export interface IntegrationHooks {
search?: SearchIntegrationProvider;
listEntries?: SearchIntegrationProvider;
- assetStore?: MediaIntegrationProvider;
}
export interface IntegrationsState {
providers: {
algolia?: AlgoliaConfig;
- assetStore?: AssetStoreConfig;
};
hooks: IntegrationHooks;
collectionHooks: Record;
@@ -47,8 +43,6 @@ export function getIntegrations(config: Config): IntegrationsState {
hook => (acc.collectionHooks[collection][hook] = providerData.provider),
);
});
- } else if (providerData.provider === 'assetStore') {
- acc.providers[providerData.provider] = providerData;
}
return acc;
},
diff --git a/core/src/reducers/mediaLibrary.ts b/core/src/reducers/mediaLibrary.ts
index b1db0021..8dab1de1 100644
--- a/core/src/reducers/mediaLibrary.ts
+++ b/core/src/reducers/mediaLibrary.ts
@@ -21,12 +21,11 @@ import {
MEDIA_PERSIST_SUCCESS,
MEDIA_REMOVE_INSERTED,
} from '../actions/mediaLibrary';
-import { selectIntegration } from './';
-import { selectEditingDraft } from './entries';
import { selectMediaFolder } from '../lib/util/media.util';
+import { selectEditingDraft } from './entries';
import type { MediaLibraryAction } from '../actions/mediaLibrary';
-import type { Field, DisplayURLState, MediaFile, MediaLibraryInstance } from '../interface';
+import type { DisplayURLState, Field, MediaFile, MediaLibraryInstance } from '../interface';
import type { RootState } from '../store';
export interface MediaLibraryDisplayURL {
@@ -49,7 +48,6 @@ export type MediaLibraryState = {
value?: string | string[];
replaceIndex?: number;
canInsert?: boolean;
- privateUpload?: boolean;
isLoading?: boolean;
dynamicSearch?: boolean;
dynamicSearchActive?: boolean;
@@ -82,26 +80,8 @@ function mediaLibrary(
};
case MEDIA_LIBRARY_OPEN: {
- const { controlID, forImage, privateUpload, config, field, value, replaceIndex } =
- action.payload;
+ const { controlID, forImage, config, field, value, replaceIndex } = action.payload;
const libConfig = config || {};
- const privateUploadChanged = state.privateUpload !== privateUpload;
- if (privateUploadChanged) {
- return {
- ...state,
- isVisible: true,
- forImage,
- controlID,
- canInsert: Boolean(controlID),
- privateUpload,
- config: libConfig,
- controlMedia: {},
- displayURLs: {},
- field,
- value,
- replaceIndex,
- };
- }
return {
...state,
@@ -109,7 +89,6 @@ function mediaLibrary(
forImage: Boolean(forImage),
controlID,
canInsert: !!controlID,
- privateUpload: Boolean(privateUpload),
config: libConfig,
field,
value,
@@ -180,19 +159,7 @@ function mediaLibrary(
};
case MEDIA_LOAD_SUCCESS: {
- const {
- files = [],
- page,
- canPaginate,
- dynamicSearch,
- dynamicSearchQuery,
- privateUpload,
- } = action.payload;
- const privateUploadChanged = state.privateUpload !== privateUpload;
-
- if (privateUploadChanged) {
- return state;
- }
+ const { files = [], page, canPaginate, dynamicSearch, dynamicSearchQuery } = action.payload;
const filesWithKeys = files.map(file => ({ ...file, key: uuid() }));
return {
@@ -210,11 +177,6 @@ function mediaLibrary(
}
case MEDIA_LOAD_FAILURE: {
- const privateUploadChanged = state.privateUpload !== action.payload.privateUpload;
- if (privateUploadChanged) {
- return state;
- }
-
return {
...state,
isLoading: false,
@@ -228,12 +190,7 @@ function mediaLibrary(
};
case MEDIA_PERSIST_SUCCESS: {
- const { file, privateUpload } = action.payload;
- const privateUploadChanged = state.privateUpload !== privateUpload;
- if (privateUploadChanged) {
- return state;
- }
-
+ const { file } = action.payload;
const fileWithKey = { ...file, key: uuid() };
const files = state.files as MediaFile[];
const updatedFiles = [fileWithKey, ...files];
@@ -245,11 +202,6 @@ function mediaLibrary(
}
case MEDIA_PERSIST_FAILURE: {
- const privateUploadChanged = state.privateUpload !== action.payload.privateUpload;
- if (privateUploadChanged) {
- return state;
- }
-
return {
...state,
isPersisting: false,
@@ -263,12 +215,8 @@ function mediaLibrary(
};
case MEDIA_DELETE_SUCCESS: {
- const { file, privateUpload } = action.payload;
+ const { file } = action.payload;
const { key, id } = file;
- const privateUploadChanged = state.privateUpload !== privateUpload;
- if (privateUploadChanged) {
- return state;
- }
const files = state.files as MediaFile[];
const updatedFiles = files.filter(file => (key ? file.key !== key : file.id !== id));
@@ -288,11 +236,6 @@ function mediaLibrary(
}
case MEDIA_DELETE_FAILURE: {
- const privateUploadChanged = state.privateUpload !== action.payload.privateUpload;
- if (privateUploadChanged) {
- return state;
- }
-
return {
...state,
isDeleting: false,
@@ -347,10 +290,9 @@ function mediaLibrary(
export function selectMediaFiles(state: RootState, field?: Field): MediaFile[] {
const { mediaLibrary, entryDraft } = state;
const editingDraft = selectEditingDraft(entryDraft);
- const integration = selectIntegration(state, null, 'assetStore');
let files: MediaFile[] = [];
- if (editingDraft && !integration) {
+ if (editingDraft) {
const entryFiles = entryDraft?.entry?.mediaFiles ?? [];
const entry = entryDraft['entry'];
const collection = entry?.collection ? state.collections[entry.collection] : null;
diff --git a/core/src/types/global.d.ts b/core/src/types/global.d.ts
index 8cfb28f0..edc352e7 100644
--- a/core/src/types/global.d.ts
+++ b/core/src/types/global.d.ts
@@ -3,14 +3,21 @@ export {};
import type { Config } from '../interface';
import type CmsAPI from '../index';
import type createReactClass from 'create-react-class';
-import type { createElement } from 'react';
+import type { createElement, useEffect, useState, useMemo, useCallback } from 'react';
declare global {
interface Window {
CMS?: CmsAPI;
CMS_CONFIG?: Config;
CMS_ENV?: string;
+ /**
+ * @deprecated Should use react functional components instead
+ */
createClass: createReactClass;
h: createElement;
+ useState: useState;
+ useMemo: useMemo;
+ useEffect: useEffect;
+ useCallback: useCallback;
}
}
diff --git a/core/src/widgets/code/index.ts b/core/src/widgets/code/index.ts
index 9e21f30a..f5dfc999 100644
--- a/core/src/widgets/code/index.ts
+++ b/core/src/widgets/code/index.ts
@@ -11,7 +11,6 @@ const CodeWidget = (): WidgetParam) => {
- const [internalValue, setInternalValue] = useState(value ?? '');
-
const { format, dateFormat, timeFormat } = useMemo(() => {
const format = field.format;
@@ -75,18 +75,7 @@ const DateTimeControl = ({
};
}, [field.date_format, field.format, field.time_format]);
- const dateValue = useMemo(
- () => (format ? parse(internalValue, format, new Date()) : parseISO(internalValue)),
- [format, internalValue],
- );
-
- const timezoneOffset = useMemo(() => dateValue.getTimezoneOffset() * 60000, [dateValue]);
-
- const utcDate = useMemo(() => {
- const dateTime = new Date(dateValue);
- const utcFromLocal = new Date(dateTime.getTime() + timezoneOffset);
- return utcFromLocal;
- }, [dateValue, timezoneOffset]);
+ const timezoneOffset = useMemo(() => new Date().getTimezoneOffset() * 60000, []);
const localToUTC = useCallback(
(dateTime: Date) => {
@@ -105,6 +94,20 @@ const DateTimeControl = ({
: field.default;
}, [field.default, field.picker_utc, format, localToUTC]);
+ const [internalValue, setInternalValue] = useState(value ?? defaultValue);
+
+ const dateValue = useMemo(
+ () =>
+ format ? parse(internalValue, format, new Date()) ?? defaultValue : parseISO(internalValue),
+ [defaultValue, format, internalValue],
+ );
+
+ const utcDate = useMemo(() => {
+ const dateTime = new Date(dateValue);
+ const utcFromLocal = new Date(dateTime.getTime() + timezoneOffset) ?? defaultValue;
+ return utcFromLocal;
+ }, [dateValue, defaultValue, timezoneOffset]);
+
const handleChange = useCallback(
(datetime: Date | null) => {
if (datetime === null) {
@@ -127,27 +130,16 @@ const DateTimeControl = ({
[defaultValue, field.picker_utc, format, localToUTC, onChange],
);
- useEffect(() => {
- /**
- * Set the current date as default value if no value is provided and default is absent. An
- * empty default string means the value is intentionally blank.
- */
- if (internalValue === undefined) {
- setTimeout(() => {
- setInternalValue(defaultValue);
- onChange(defaultValue);
- }, 0);
- }
- }, [defaultValue, handleChange, internalValue, onChange]);
-
const dateTimePicker = useMemo(() => {
if (dateFormat && !timeFormat) {
+ const inputDateFormat = typeof dateFormat === 'string' ? dateFormat : 'MMM d, yyyy';
+
return (
(
(
0) {
+ inputFormat = formatParts.join(' ');
+ }
}
return (
@@ -220,7 +216,7 @@ const DateTimeControl = ({
key="mobile-date-time-picker"
inputFormat={inputFormat}
label={label}
- value={field.picker_utc ? utcDate : dateValue}
+ value={formatDate(field.picker_utc ? utcDate : dateValue, inputFormat)}
onChange={handleChange}
renderInput={params => (
,
- | 'clearFieldErrors'
| 'entry'
| 'field'
| 'fieldsErrors'
@@ -98,7 +97,6 @@ interface ListItemProps
const ListItem = ({
index,
- clearFieldErrors,
entry,
field,
fieldsErrors,
@@ -201,7 +199,6 @@ const ListItem = ({
key={index}
field={objectField}
value={value}
- clearFieldErrors={clearFieldErrors}
fieldsErrors={fieldsErrors}
submitted={submitted}
parentPath={path}
diff --git a/core/src/widgets/markdown/MarkdownControl.tsx b/core/src/widgets/markdown/MarkdownControl.tsx
index e0faebd1..8fcfaab9 100644
--- a/core/src/widgets/markdown/MarkdownControl.tsx
+++ b/core/src/widgets/markdown/MarkdownControl.tsx
@@ -86,7 +86,6 @@ const MarkdownControl = ({
openMediaLibrary({
controlID,
forImage,
- privateUpload: false,
allowMultiple: false,
field,
config: 'config' in mediaLibraryFieldOptions ? mediaLibraryFieldOptions.config : undefined,
diff --git a/core/src/widgets/object/ObjectControl.tsx b/core/src/widgets/object/ObjectControl.tsx
index 8d2d5ed4..acd1b46e 100644
--- a/core/src/widgets/object/ObjectControl.tsx
+++ b/core/src/widgets/object/ObjectControl.tsx
@@ -47,7 +47,6 @@ const StyledNoFieldsMessage = styled('div')`
`;
const ObjectControl = ({
- clearFieldErrors,
field,
fieldsErrors,
submitted,
@@ -89,7 +88,6 @@ const ObjectControl = ({
key={index}
field={field}
value={fieldValue}
- clearFieldErrors={clearFieldErrors}
fieldsErrors={fieldsErrors}
submitted={submitted}
parentPath={path}
@@ -104,7 +102,6 @@ const ObjectControl = ({
}) ?? null
);
}, [
- clearFieldErrors,
fieldsErrors,
i18n,
isFieldDuplicate,
diff --git a/core/src/widgets/select/SelectControl.tsx b/core/src/widgets/select/SelectControl.tsx
index 0152fe18..29369d86 100644
--- a/core/src/widgets/select/SelectControl.tsx
+++ b/core/src/widgets/select/SelectControl.tsx
@@ -34,7 +34,7 @@ const SelectControl = ({
}: WidgetControlProps) => {
const [internalValue, setInternalValue] = useState(value);
- const fieldOptions: (string | Option)[] = useMemo(() => field.options, [field.options]);
+ const fieldOptions: (string | number | Option)[] = useMemo(() => field.options, [field.options]);
const isMultiple = useMemo(() => field.multiple ?? false, [field.multiple]);
const options = useMemo(
diff --git a/website/content/docs/add-to-your-site-bundling.mdx b/website/content/docs/add-to-your-site-bundling.mdx
index 2278eec0..92fa2fab 100644
--- a/website/content/docs/add-to-your-site-bundling.mdx
+++ b/website/content/docs/add-to-your-site-bundling.mdx
@@ -40,7 +40,7 @@ For GitHub and GitLab repositories, you can start your Static CMS `config.yml` f
```yaml
backend:
- title: git-gateway
+ name: git-gateway
branch: main # Branch to update (optional; defaults to main)
```
@@ -92,18 +92,18 @@ Given this example, our `collections` settings would look like this in your Stat
```yaml
collections:
- - title: 'blog' # Used in routes, e.g., /admin/collections/blog
+ - name: 'blog' # Used in routes, e.g., /admin/collections/blog
label: 'Blog' # Used in the UI
folder: '_posts/blog' # The path to the folder where the documents are stored
create: true # Allow users to create new documents in this collection
slug: '{{year}}-{{month}}-{{day}}-{{slug}}' # Filename template, e.g., YYYY-MM-DD-title.md
fields: # The fields for each document, usually in front matter
- - { label: 'Layout', title: 'layout', widget: 'hidden', default: 'blog' }
- - { label: 'Title', title: 'title', widget: 'string' }
- - { label: 'Publish Date', title: 'date', widget: 'datetime' }
- - { label: 'Featured Image', title: 'thumbnail', widget: 'image' }
- - { label: 'Rating (scale of 1-5)', title: 'rating', widget: 'number' }
- - { label: 'Body', title: 'body', widget: 'markdown' }
+ - { label: 'Layout', name: 'layout', widget: 'hidden', default: 'blog' }
+ - { label: 'Title', name: 'title', widget: 'string' }
+ - { label: 'Publish Date', name: 'date', widget: 'datetime' }
+ - { label: 'Featured Image', name: 'thumbnail', widget: 'image' }
+ - { label: 'Rating (scale of 1-5)', name: 'rating', widget: 'number' }
+ - { label: 'Body', name: 'body', widget: 'markdown' }
```
Let's break that down:
@@ -119,7 +119,7 @@ Let's break that down:
As described above, the `widget` property specifies a built-in or custom UI widget for a given field. When a content editor enters a value into a widget, that value is saved in the document front matter as the value for the `name` specified for that field. A full listing of available widgets can be found in the [Widgets doc](/docs/widgets).
-Based on this example, you can go through the post types in your site and add the appropriate settings to your Static CMS `config.yml` file. Each post type should be listed as a separate node under the `collections` field. See the [Collections reference doc](/docs/configuration-options/#collections) for more configuration options.
+Based on this example, you can go through the post types in your site and add the appropriate settings to your Static CMS `config.yml` file. Each post type should be listed as a separate node under the `collections` field. See the [Collections reference doc](/docs/collection-overview) for more configuration options.
### Filter
@@ -127,14 +127,14 @@ The entries for any collection can be filtered based on the value of a single fi
```yaml
collections:
- - title: 'posts'
+ - name: 'posts'
label: 'Post'
folder: '_posts'
filter:
field: language
value: en
fields:
- - { label: 'Language', title: 'language' }
+ - { label: 'Language', name: 'language' }
```
## Authentication
diff --git a/website/content/docs/add-to-your-site-cdn.mdx b/website/content/docs/add-to-your-site-cdn.mdx
index 30390511..5dff3480 100644
--- a/website/content/docs/add-to-your-site-cdn.mdx
+++ b/website/content/docs/add-to-your-site-cdn.mdx
@@ -4,7 +4,7 @@ title: CDN Hosting
weight: 4
---
-This tutorial guides you through the steps for adding Static CMS via a public CDN to a site that's built with a common [static site generator](https://www.staticgen.com/), like Jekyll, Nest, Hugo, Hexo, or Gatsby. Alternatively, you can [start from a template](/docs/start-with-a-template) or dive right into [configuration options](/docs/configuration-options).
+This tutorial guides you through the steps for adding Static CMS via a public CDN to a site that's built with a common [static site generator](https://www.staticgen.com/), like Jekyll, Next, Hugo, Hexo, or Gatsby. Alternatively, you can [start from a template](/docs/start-with-a-template) or dive right into [configuration options](/docs/configuration-options).
## App File Structure
@@ -35,7 +35,7 @@ admin
└ config.yml
```
-The first file, `admin/index.html`, is the entry point for the Static CMS admin interface. This means that users navigate to `yoursite.com/admin/` to access it. On the code side, it's a basic HTML starter page that loads the Static CMS JavaScript file from a public CDN. The second file, `admin/config.yml`, is the heart of your Static CMS installation, and a bit more complex. The [Configuration](#configuration) section covers the details.
+The first file, `admin/index.html`, is the entry point for the Static CMS admin interface. This means that users navigate to `yoursite.com/admin/` to access it. On the code side, it's a basic HTML starter page that loads the Static CMS JavaScript file from a public CDN and initializes it. The second file, `admin/config.yml`, is the heart of your Static CMS installation, and a bit more complex. The [Configuration](#configuration) section covers the details.
In this example, we pull the `admin/index.html` file from a public CDN.
@@ -67,15 +67,15 @@ Configuration is different for every site, so we'll break it down into parts. Ad
We're using [Netlify](https://www.netlify.com) for our hosting and authentication in this tutorial, so backend configuration is fairly straightforward.
-For GitHub and GitLab repositories, you can start your Static CMS `config.yml` file with these lines:
+For GitHub repositories, you can start your Static CMS `config.yml` file with these lines:
```yaml
backend:
- title: git-gateway
+ name: git-gateway
branch: main # Branch to update (optional; defaults to main)
```
-_(For Bitbucket repositories, use the [Bitbucket backend](/docs/bitbucket-backend) instructions instead.)_
+_(For GitLab repositories, use [GitLab backend](/docs/gitlab-backend) and for Bitbucket repositories, use [Bitbucket backend](/docs/bitbucket-backend).)_
The configuration above specifies your backend protocol and your publication branch. Git Gateway is an open source API that acts as a proxy between authenticated users of your site and your site repo. (We'll get to the details of that in the [Authentication section](#authentication) below.) If you leave out the `branch` declaration, it defaults to `main`.
@@ -123,18 +123,18 @@ Given this example, our `collections` settings would look like this in your Stat
```yaml
collections:
- - title: 'blog' # Used in routes, e.g., /admin/collections/blog
+ - name: 'blog' # Used in routes, e.g., /admin/collections/blog
label: 'Blog' # Used in the UI
folder: '_posts/blog' # The path to the folder where the documents are stored
create: true # Allow users to create new documents in this collection
slug: '{{year}}-{{month}}-{{day}}-{{slug}}' # Filename template, e.g., YYYY-MM-DD-title.md
fields: # The fields for each document, usually in front matter
- - { label: 'Layout', title: 'layout', widget: 'hidden', default: 'blog' }
- - { label: 'Title', title: 'title', widget: 'string' }
- - { label: 'Publish Date', title: 'date', widget: 'datetime' }
- - { label: 'Featured Image', title: 'thumbnail', widget: 'image' }
- - { label: 'Rating (scale of 1-5)', title: 'rating', widget: 'number' }
- - { label: 'Body', title: 'body', widget: 'markdown' }
+ - { label: 'Layout', name: 'layout', widget: 'hidden', default: 'blog' }
+ - { label: 'Title', name: 'title', widget: 'string' }
+ - { label: 'Publish Date', name: 'date', widget: 'datetime' }
+ - { label: 'Featured Image', name: 'thumbnail', widget: 'image' }
+ - { label: 'Rating (scale of 1-5)', name: 'rating', widget: 'number' }
+ - { label: 'Body', name: 'body', widget: 'markdown' }
```
Let's break that down:
@@ -150,7 +150,7 @@ Let's break that down:
As described above, the `widget` property specifies a built-in or custom UI widget for a given field. When a content editor enters a value into a widget, that value is saved in the document front matter as the value for the `name` specified for that field. A full listing of available widgets can be found in the [Widgets doc](/docs/widgets).
-Based on this example, you can go through the post types in your site and add the appropriate settings to your Static CMS `config.yml` file. Each post type should be listed as a separate node under the `collections` field. See the [Collections reference doc](/docs/configuration-options/#collections) for more configuration options.
+Based on this example, you can go through the post types in your site and add the appropriate settings to your Static CMS `config.yml` file. Each post type should be listed as a separate node under the `collections` field. See the [Collections reference doc](/docs/collection-overview) for more configuration options.
## Authentication
diff --git a/website/content/docs/add-to-your-site.mdx b/website/content/docs/add-to-your-site.mdx
index 0367e193..c54a4804 100644
--- a/website/content/docs/add-to-your-site.mdx
+++ b/website/content/docs/add-to-your-site.mdx
@@ -4,6 +4,9 @@ title: Add to Your Site
weight: 3
---
-You can adapt Static CMS to a wide variety of projects. It works with any content written in markdown, JSON, YAML, or TOML files, stored in a repo on [GitHub](https://github.com/), [GitLab](https://gitlab.com/), [Bitbucket](https://bitbucket.org) or [Azure](https://azure.microsoft.com/en-us/products/devops/repos/). You can also create your own custom backend.
+You can adapt Static CMS to a wide variety of projects. It works with any content written in markdown, JSON, YAML, or TOML files, stored in a repo on [GitHub](https://github.com/), [GitLab](https://gitlab.com/) or [Bitbucket](https://bitbucket.org). You can also create your own custom backend.
-You can add Static CMS to your site in two different ways: [CDN hosting](/docs/add-to-your-site-cdn) or [bundling directly into your app](/docs/add-to-your-site-bundling).
+You can add Static CMS to your site in two different ways:
+
+- [CDN hosting](/docs/add-to-your-site-cdn)
+- [bundling directly into your app](/docs/add-to-your-site-bundling)
diff --git a/website/content/docs/additional-links.mdx b/website/content/docs/additional-links.mdx
new file mode 100644
index 00000000..14043a83
--- /dev/null
+++ b/website/content/docs/additional-links.mdx
@@ -0,0 +1,66 @@
+---
+group: Customization
+title: Custom Links & Pages
+weight: 60
+---
+
+The Static CMS exposes a `window.CMS` global object that you can use to register external links or links custom pages, via `registerAdditionalLink`. The links are displayed at the bottom of the navigation menu in the order they are registered.
+
+### React Components Inline
+
+The `registerPreviewTemplate` requires you to provide a React component. If you have a build process in place for your project, it is possible to integrate with this build process.
+
+However, although possible, it may be cumbersome or even impractical to add a React build phase. For this reason, Static CMS exposes some constructs globally to allow you to create components inline: `h` (alias for React.createElement) as well some basic hooks (`useState`, `useMemo`, `useEffect`, `useCallback`).
+
+**NOTE**: `createClass` is still provided, allowing for the creation of react class components. However it has now been deprecated and will be removed in `v2.0.0`.
+
+## Params
+
+`registerAdditionalLink` takes an `AdditionalLink` object with the following properties:
+
+| Param | Type | Description |
+| ------- | --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| id | string | Unique identifier for the link |
+| title | string | Display text for the link |
+| data | string \| [React Function Component](https://reactjs.org/docs/components-and-props.html) |
`string` - The href for the link
`React Function Component` - A react component to render on the route `/page/[id]`
|
+| options | object | _Optional_. See [Options](#options) |
+
+### Options
+
+Available options for each additional link are:
+
+| Param | Type | Description |
+| -------- | ------ | --------------------------------------------------------------------------------------- |
+| iconName | string | The name of a custom registered icon to display. See [Custom Icons](/docs/custom-icons) |
+
+## Examples
+
+### External Links
+
+```js
+CMS.registerAdditionalLink({
+ id: 'example',
+ title: 'Example.com',
+ data: 'https://example.com',
+ options: {
+ icon: 'page',
+ },
+});
+```
+
+### Custom Page
+
+```js
+const CustomPage = () => {
+ return h('div', {}, 'I am a custom page!');
+};
+
+CMS.registerAdditionalLink({
+ id: 'custom-page',
+ title: 'Custom Page',
+ data: CustomPage,
+ options: {
+ icon: 'page',
+ },
+});
+```
diff --git a/website/content/docs/architecture.mdx b/website/content/docs/architecture.mdx
deleted file mode 100644
index 96682a52..00000000
--- a/website/content/docs/architecture.mdx
+++ /dev/null
@@ -1,64 +0,0 @@
----
-group: Contributing
-title: Architecture
-weight: 200
----
-
-Static CMS is a React application, using Redux for state management with immutable data structures (immutable.js).
-
-The core abstractions for content editing are `collections`, `entries`, and `widgets`.
-
-Each `collection` represents a collection of entries. This can either be a collection of similar entries with the same structure, or a set of entries where each has its own structure.
-
-The structure of an entry is defined as a series of fields, each with a `name`, a `label`, and a `widget`.
-
-The `widget` determines the UI widget that the content editor will use when editing this field of an entry, as well as how the content of the field is presented in the editing preview.
-
-Entries are loaded and persisted through a `backend` that will typically represent a `git` repository.
-
-## State shape / reducers
-**Auth:** Keeps track of the logged state and the current user.
-
-**Config:** Holds the environment configuration (backend type, available collections and fields).
-
-**Collections:** List of available collections and their fields information.
-
-**Entries:** Entries for each field.
-
-**EntryDraft:** Reused for each entry that is edited or created. It holds the entry's temporary data until it's persisted on the backend.
-
-## Selectors
-Selectors are functions defined within reducers used to compute derived data from the Redux store. The available selectors are:
-
-**selectEntry:** Selects a single entry, given the collection and a slug.
-
-**selectEntries:** Selects all entries for a given collection.
-
-**getAsset:** Selects a single AssetProxy object for the given path.
-
-## Value Objects
-**AssetProxy:** AssetProxy is a Value Object that holds information regarding an asset file (for example, an image), whether it's persisted online or held locally in cache.
-
-For a file persisted online, the AssetProxy only keeps information about its URI. For local files, the AssetProxy will keep a reference to the actual File object while generating the expected final URIs and on-demand blobs for local preview.
-
-The AssetProxy object can be used directly inside a media tag (such as ``), as it will always return something that can be used by the media tag to render correctly (either the URI for the online file or a single-use blob).
-
-## Components structure and Workflows
-Components are separated into two main categories: Container components and Presentational components.
-
-### Entry Editing
-For either updating an existing entry or creating a new one, the `EntryEditor` is used and the flow is the same:
-
-* When mounted, the `EntryPage` container component dispatches the `createDraft` action, setting the `entryDraft` state to a blank state (in case of a new entry) or to a copy of the selected entry (in case of an edit).
-* The `EntryPage` will also render widgets for each field type in the given entry.
-* Widgets are used for editing entry fields. There are different widgets for different field types, and they are always defined in a pair containing a `control` component and a `preview` component. The control component is responsible for presenting the user with the appropriate interface for manipulating the current field value. The preview component is responsible for displaying the value with the appropriate styling.
-
-#### Widget components implementation
-The control component receives one (1) callback as a prop: `onChange`.
-
-* onChange (required): Should be called when the users changes the current value. It will ultimately end up updating the EntryDraft object in the Redux Store, thus updating the preview component.
-* addAsset & onRemoveAsset (optionals): Should be invoked with an `AssetProxy` value object if the field accepts file uploads for media (images, for example). `addAsset` will get the current media stored in the Redux state tree while `onRemoveAsset` will remove it. AssetProxy objects are stored in the `Medias` object and referenced in the `EntryDraft` object on the state tree.
-
-Both control and preview widgets receive a `getAsset` selector via props. Displaying the media (or its URI) for the user should always be done via `getAsset`, as it returns an AssetProxy that can return the correct value for both medias already persisted on the server and cached media not yet uploaded.
-
-The actual persistence of the content and medias inserted into the control component is delegated to the backend implementation. The backend will be called with the updated values and a list of assetProxy objects for each field of the entry, and should return a promise that can resolve into the persisted entry object and the list of the persisted media URIs.
diff --git a/website/content/docs/azure-backend.mdx b/website/content/docs/azure-backend.mdx
deleted file mode 100644
index 12b597c4..00000000
--- a/website/content/docs/azure-backend.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
----
-group: Accounts
-title: Azure
-weight: 20
----
-For repositories stored on Azure, the `azure` backend allows CMS users to log in directly with their Azure account. Note that all users must have write access to your content repository for this to work.
-
-## Authentication
-
-In order to get Static CMS working with Azure DevOps, you need a Tenant Id and an Application Id.
-
-1. If you do not have an Azure account, [create one here](https://azure.microsoft.com/en-us/free/?WT.mc_id=A261C142F) and make sure to have a credit card linked to the account.
-2. If you do not have an Azure Active Directory Tenant Id, [set one up here](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-create-new-tenant).
-3. [Register an application with Azure AD](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app). Configure it as a Single tenant Web application and add a redirect URI (e.g. `http://localhost:8080/`)
-4. Add the `Azure DevOps->user_impersonation` [permission](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-configure-app-access-web-apis#add-permissions-to-access-your-web-api) for the created application.
-5. [Grant admin consent](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-configure-app-access-web-apis#admin-consent-button) for the application.
-6. Under `Authentication->Implicit grant` enable [Access tokens](https://docs.microsoft.com/en-us/azure/active-directory/develop/access-tokens) for the application and click `Save`.
-7. Verify your Azure DevOps organization is connected to the same directory as your tenant under: `https://dev.azure.com//_settings/organizationAad`
-8. Add the following lines to your Static CMS `config.yml` file:
-
-```yaml
-backend:
- title: azure
- repo: organization/project/repo # replace with actual path
- tenant_id: tenantId # replace with your tenantId
- app_id: appId # replace with your appId
-```
-
-## Limitations
-
-1. Pagination is not supported so some endpoints might return missing data
-
-2. Nested collection are partially supported as Azure doesn't allow [renaming and editing](https://docs.microsoft.com/en-us/rest/api/azure/devops/git/pushes/create?view=azure-devops-rest-6.1&source=docs#rename-a-file) in a single operation
diff --git a/website/content/docs/backends-overview.mdx b/website/content/docs/backends-overview.mdx
index a21dc938..d64f8345 100644
--- a/website/content/docs/backends-overview.mdx
+++ b/website/content/docs/backends-overview.mdx
@@ -1,5 +1,5 @@
---
-group: Accounts
+group: Backends
title: Overview
weight: 1
---
@@ -8,17 +8,18 @@ A backend is JavaScript code that allows Static CMS to communicate with a servic
## Backend Configuration
-Individual backends should provide their own configuration documentation, but there are some configuration options that are common to multiple backends. A full reference is below. Note that these are properties of the `backend` field, and should be nested under that field.
+Individual backends provide their own configuration documentation, but there are some configuration options that are common to multiple backends. A full reference is below. Note that these are properties of the `backend` field, and should be nested under that field.
-| Field | Default | Description |
-| --------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `repo` | none | **Required** for `github`, `gitlab`, and `bitbucket` backends; ignored by `git-gateway`. Follows the pattern `[org-or-username]/[repo-name]`. |
-| `branch` | `main` | The branch where published content is stored. All CMS commits and PRs are made to this branch. |
-| `api_root` | `https://api.github.com` (GitHub), `https://gitlab.com/api/v4` (GitLab), or `https://api.bitbucket.org/2.0` (Bitbucket) | The API endpoint. Only necessary in certain cases, like with GitHub Enterprise or self-hosted GitLab. |
-| `site_domain` | `location.hostname` (or `cms.netlify.com` when on `localhost`) | Sets the `site_id` query param sent to the API endpoint. Non-Netlify auth setups will often need to set this for local development to work properly. |
-| `base_url` | `https://api.netlify.com` (GitHub, Bitbucket) or `https://gitlab.com` (GitLab) | OAuth client hostname (just the base domain, no path). **Required** when using an external OAuth server or self-hosted GitLab. |
-| `auth_endpoint` | `auth` (GitHub, Bitbucket) or `oauth/authorize` (GitLab) | Path to append to `base_url` for authentication requests. Optional. |
+| Name | Type | Default | Description |
+| ------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name | 'git-gateway' \| 'github' \| 'gitlab' \| 'bitbucket' \| 'test-repo' \| 'proxy' | | The backend git provider |
+| repo | string | | Required for `github`, `gitlab`, and `bitbucket` backends. Ignored by `git-gateway`. Follows the pattern `[org-or-username]/[repo-name]` |
+| branch | string | `main` | _Optional_. The branch where published content is stored. All CMS commits and PRs are made to this branch |
+| api_root | string | GitHub `https://api.github.com`
GitLab `https://gitlab.com/api/v4`
Bitbucket `https://api.bitbucket.org/2.0` | _Optional_. The API endpoint. Only necessary in certain cases, like with GitHub Enterprise or self-hosted GitLab |
+| site_domain | string | `location.hostname`
On `localhost` `cms.netlify.com` | _Optional_. Sets the `site_id` query param sent to the API endpoint. Non-Netlify auth setups will often need to set this for local development to work properly |
+| base_url | string | GitHub or Bitbucket `https://api.netlify.com`
GitLab `https://gitlab.com` | _Optional_. OAuth client hostname (just the base domain, no path). **Required** when using an external OAuth server or self-hosted GitLab |
+| auth_endpoint | string | GitHub or Bitbucket `auth`
GitLab `oauth/authorize` | _Optional_. Path to append to `base_url` for authentication requests. |
## Creating a New Backend
-Anyone can write a backend, but we don't yet have a finalized and documented API. If you would like to write your own backend for a service that does not have one currently, we recommend using the [GitHub backend](https://github.com/StaticJsCMS/static-cms/tree/main/src/backends/github) as a reference for API and best practices.
+Anyone can write a backend, but the API is not yet finalized and documented. If you would like to write your own backend for a service that does not have one currently, Static CMS recommends using the [GitHub backend](https://github.com/StaticJsCMS/static-cms/tree/main/core/src/backends/github) as a reference for API and best practices.
diff --git a/website/content/docs/beta-features.mdx b/website/content/docs/beta-features.mdx
index 546f2769..c324874a 100644
--- a/website/content/docs/beta-features.mdx
+++ b/website/content/docs/beta-features.mdx
@@ -1,56 +1,13 @@
---
-group: Configuration
-title: Beta Features!
+group: Intro
+title: Beta Features
weight: 200
---
-We run new functionality in an open beta format from time to time. That means that this functionality is totally available for use, and we *think* it might be ready for primetime, but it could break or change without notice.
+
+Static CMS runs new functionality in an open beta format from time to time. That means that this functionality is totally available for use, an it might be ready for primetime, but it could break or change without notice.
**Use these features at your own risk.**
-## Working with a Local Git Repository
-
-You can connect Static CMS to a local Git repository, instead of working with a live repo.
-
-1. Navigate to a local Git repository configured with the CMS.
-2. Add the top-level property `local_backend` configuration to your `config.yml`:
-
-```yaml
-backend:
- title: git-gateway
-
-# when using the default proxy server port
-local_backend: true
-```
-
-3. Run `npx @staticcms/proxy-server` from the root directory of the above repository.
-
- * If the default port (8081) is in use, the proxy server won't start and you will see an error message. In this case, follow [these steps](#configure-the-@staticcms/proxy-server-port-number) before proceeding.
-4. Start your local development server (e.g. run `gatsby develop`).
-5. Open `http://localhost:/admin` to verify that your can administer your content locally. Replace `` with the port of your local development server. For example Gatsby's default port is `8000`
-
-**Note:** `@staticcms/proxy-server` runs an unauthenticated express server. As any client can send requests to the server, it should only be used for local development.
-
-### Configure the Static CMS proxy server port number
-
-1. Create a `.env` file in the project's root folder and define the PORT you'd like the proxy server to use
-
-```ini
-PORT=8082
-```
-
-2. Update the `local_backend` object in `config.yml` and specify a `url` property to use your custom port number
-
-```yaml
-backend:
- title: git-gateway
-
-local_backend:
- # when using a custom proxy server port
- url: http://localhost:8082/api/v1
- # when accessing the local site from a host other than 'localhost' or '127.0.0.1'
- allowed_hosts: ['192.168.0.1']
-```
-
## i18n Support
The CMS can provide a side by side interface for authoring content in multiple languages.
@@ -78,7 +35,7 @@ i18n:
```yaml
collections:
- - title: i18n_content
+ - name: i18n_content
# same as the top level, but all fields are optional and defaults to the top level
# can also be a boolean to accept the top level defaults
i18n: true
@@ -88,20 +45,20 @@ When using a file collection, you must also enable i18n for each individual file
```yaml
collections:
- - title: pages
+ - name: pages
label: Pages
# Configure i18n for this collection.
i18n:
structure: single_file
locales: [en, de, fr]
files:
- - title: about
+ - name: about
label: About Page
file: site/content/about.yml
# Enable i18n for this file.
i18n: true
fields:
- - { label: Title, title: title, widget: string, i18n: true }
+ - { label: Title, name: title, widget: string, i18n: true }
```
### Field level configuration
@@ -109,17 +66,17 @@ collections:
```yaml
fields:
- label: Title
- title: title
+ name: title
widget: string
# same as 'i18n: translate'. Allows translation of the title field
i18n: true
- label: Date
- title: date
+ name: date
widget: datetime
# The date field will be duplicated from the default locale.
i18n: duplicate
- label: Body
- title: body
+ name: body
# The markdown field will be omitted from the translation.
widget: markdown
```
@@ -132,22 +89,22 @@ i18n:
locales: [en, de, fr]
collections:
- - title: posts
+ - name: posts
label: Posts
folder: content/posts
create: true
i18n: true
fields:
- label: Title
- title: title
+ name: title
widget: string
i18n: true
- label: Date
- title: date
+ name: date
widget: datetime
i18n: duplicate
- label: Body
- title: body
+ name: body
widget: markdown
```
@@ -159,96 +116,29 @@ collections:
```yaml
- label: 'Object'
- title: 'object'
+ name: 'object'
widget: 'object'
i18n: true
fields:
- - { label: 'String', title: 'string', widget: 'string', i18n: true }
- - { label: 'Date', title: 'date', widget: 'datetime', i18n: duplicate }
- - { label: 'Boolean', title: 'boolean', widget: 'boolean', i18n: duplicate }
+ - { label: 'String', name: 'string', widget: 'string', i18n: true }
+ - { label: 'Date', name: 'date', widget: 'datetime', i18n: duplicate }
+ - { label: 'Boolean', name: 'boolean', widget: 'boolean', i18n: duplicate }
- {
label: 'Object',
- title: 'object',
+ name: 'object',
widget: 'object',
i18n: true,
- field: { label: 'String', title: 'string', widget: 'string', i18n: duplicate },
+ field: { label: 'String', name: 'string', widget: 'string', i18n: duplicate },
}
```
## Folder Collections Path
-By default the CMS stores folder collection content under the folder specified in the collection setting.
+See [Folder Collections Path](/docs/collection-types#folder-collections-path).
-For example configuring `folder: posts` for a collection will save the content under `posts/post-title.md`.
+## Nested Collections
-You can now specify an additional `path` template (similar to the `slug` template) to control the content destination.
-
-This allows saving content in subfolders, e.g. configuring `path: '{{year}}/{{slug}}'` will save the content under `posts/2019/post-title.md`.
-
-## Folder Collections Media and Public Folder
-
-By default the CMS stores media files for all collections under a global `media_folder` directory as specified in the configuration.
-
-When using the global `media_folder` directory any entry field that points to a media file will use the absolute path to the published file as designated by the `public_folder` configuration.
-
-For example configuring:
-
-```yaml
-media_folder: static/media
-public_folder: /media
-```
-
-And saving an entry with an image named `image.png` will result in the image being saved under `static/media/image.png` and relevant entry fields populated with the value of `/media/image.png`.
-
-Some static site generators (e.g. Gatsby) work best when using relative image paths.
-
-This can now be achieved using a per collection `media_folder` configuration which specifies a relative media folder for the collection.
-
-For example, the following configuration will result in media files being saved in the same directory as the entry, and the image field being populated with the relative path to the image.
-
-```yaml
-media_folder: static/media
-public_folder: /media
-collections:
- - title: posts
- label: Posts
- label_singular: 'Post'
- folder: content/posts
- path: '{{slug}}/index'
- media_folder: ''
- public_folder: ''
- fields:
- - label: Title
- title: title
- widget: string
- - label: 'Cover Image'
- title: 'image'
- widget: 'image'
-```
-
-More specifically, saving an entry with a title of `example post` with an image named `image.png` will result in a directory structure of:
-
-```bash
-content
- posts
- example-post
- index.md
- image.png
-```
-
-And for the image field being populated with a value of `image.png`.
-
-**Note: When specifying a `path` on a folder collection, `media_folder` defaults to an empty string.**
-
-**Available template tags:**
-
-Supports all of the [`slug` templates](/docs/configuration-options#slug) and:
-
-* `{{dirname}}` The path to the file's parent directory, relative to the collection's `folder`.
-* `{{filename}}` The file name without the extension part.
-* `{{extension}}` The file extension.
-* `{{media_folder}}` The global `media_folder`.
-* `{{public_folder}}` The global `public_folder`.
+Seed [Nested Collections](/docs/collection-types#nested-collections).
## List Widget: Variable Types
@@ -264,9 +154,9 @@ To use variable types in the list widget, update your field configuration as fol
### Additional list widget options
-* `types`: a nested list of object widgets. All widgets must be of type `object`. Every object widget may define different set of fields.
-* `typeKey`: the name of the field that will be added to every item in list representing the name of the object widget that item belongs to. Ignored if `types` is not defined. Default is `type`.
-* `summary`: allows customization of a collapsed list item object in a similar way to a [collection summary](/docs/configuration-options/?#summary)
+- `types`: a nested list of object widgets. All widgets must be of type `object`. Every object widget may define different set of fields.
+- `typeKey`: the name of the field that will be added to every item in list representing the name of the object widget that item belongs to. Ignored if `types` is not defined. Default is `type`.
+- `summary`: allows customization of a collapsed list item object in a similar way to a [collection summary](/docs/configuration-options/?#summary)
### Example Configuration
@@ -275,27 +165,27 @@ either a "carousel" or a "spotlight". Each type has a unique name and set of fie
```yaml
- label: 'Home Section'
- title: 'sections'
+ name: 'sections'
widget: 'list'
types:
- label: 'Carousel'
- title: 'carousel'
+ name: 'carousel'
widget: object
summary: '{{fields.header}}'
fields:
- - { label: Header, title: header, widget: string, default: 'Image Gallery' }
- - { label: Template, title: template, widget: string, default: 'carousel.html' }
+ - { label: Header, name: header, widget: string, default: 'Image Gallery' }
+ - { label: Template, name: template, widget: string, default: 'carousel.html' }
- label: Images
- title: images
+ name: images
widget: list
- field: { label: Image, title: image, widget: image }
+ field: { label: Image, name: image, widget: image }
- label: 'Spotlight'
- title: 'spotlight'
+ name: 'spotlight'
widget: object
fields:
- - { label: Header, title: header, widget: string, default: 'Spotlight' }
- - { label: Template, title: template, widget: string, default: 'spotlight.html' }
- - { label: Text, title: text, widget: text, default: 'Hello World' }
+ - { label: Header, name: header, widget: string, default: 'Spotlight' }
+ - { label: Template, name: template, widget: string, default: 'spotlight.html' }
+ - { label: Text, name: text, widget: text, default: 'Hello World' }
```
### Example Output
@@ -367,7 +257,7 @@ init()
init({
config: {
backend: {
- title: 'git-gateway',
+ name: 'git-gateway',
},
},
})
@@ -383,17 +273,17 @@ init({
init({
config: {
backend: {
- title: 'git-gateway',
+ name: 'git-gateway',
},
load_config_file: false,
media_folder: "static/images/uploads",
public_folder: "/images/uploads",
collections: [
- { label: "Blog", title: "blog", folder: "_posts/blog", create: true, fields: [
- { label: "Title", title: "title", widget: "string" },
- { label: "Publish Date", title: "date", widget: "datetime" },
- { label: "Featured Image", title: "thumbnail", widget: "image" },
- { label: "Body", title: "body", widget: "markdown" },
+ { label: "Blog", name: "blog", folder: "_posts/blog", create: true, fields: [
+ { label: "Title", name: "title", widget: "string" },
+ { label: "Publish Date", name: "date", widget: "datetime" },
+ { label: "Featured Image", name: "thumbnail", widget: "image" },
+ { label: "Body", name: "body", widget: "markdown" },
]},
],
},
@@ -422,22 +312,22 @@ backend:
Static CMS generates the following commit types:
-| Commit type | When is it triggered? | Available template tags |
-| --------------- | ---------------------------------------- | ----------------------------------------------------------- |
-| `create` | A new entry is created | `slug`, `path`, `collection`, `author-login`, `author-name` |
-| `update` | An existing entry is changed | `slug`, `path`, `collection`, `author-login`, `author-name` |
-| `delete` | An existing entry is deleted | `slug`, `path`, `collection`, `author-login`, `author-name` |
-| `uploadMedia` | A media file is uploaded | `path`, `author-login`, `author-name` |
-| `deleteMedia` | A media file is deleted | `path`, `author-login`, `author-name` |
+| Commit type | When is it triggered? | Available template tags |
+| ------------- | ---------------------------- | ----------------------------------------------------------- |
+| `create` | A new entry is created | `slug`, `path`, `collection`, `author-login`, `author-name` |
+| `update` | An existing entry is changed | `slug`, `path`, `collection`, `author-login`, `author-name` |
+| `delete` | An existing entry is deleted | `slug`, `path`, `collection`, `author-login`, `author-name` |
+| `uploadMedia` | A media file is uploaded | `path`, `author-login`, `author-name` |
+| `deleteMedia` | A media file is deleted | `path`, `author-login`, `author-name` |
Template tags produce the following output:
-* `{{slug}}`: the url-safe filename of the entry changed
-* `{{collection}}`: the name of the collection containing the entry changed
-* `{{path}}`: the full path to the file changed
-* `{{message}}`: the relevant message based on the current change (e.g. the `create` message when an entry is created)
-* `{{author-login}}`: the login/username of the author
-* `{{author-name}}`: the full name of the author (might be empty based on the user's profile)
+- `{{slug}}`: the url-safe filename of the entry changed
+- `{{collection}}`: the name of the collection containing the entry changed
+- `{{path}}`: the full path to the file changed
+- `{{message}}`: the relevant message based on the current change (e.g. the `create` message when an entry is created)
+- `{{author-login}}`: the login/username of the author
+- `{{author-name}}`: the full name of the author (might be empty based on the user's profile)
## Image widget file size limit
@@ -447,7 +337,7 @@ Example config:
```yaml
- label: 'Featured Image'
- title: 'thumbnail'
+ name: 'thumbnail'
widget: 'image'
default: '/uploads/chocolate-dogecoin.jpg'
media_library:
@@ -463,18 +353,18 @@ Example config:
```yaml
collections:
- - title: 'posts'
+ - name: 'posts'
label: 'Posts'
folder: '_posts'
summary: "{{title | upper}} - {{date | date('YYYY-MM-DD')}} – {{body | truncate(20, '***')}}"
fields:
- - { label: 'Title', title: 'title', widget: 'string' }
- - { label: 'Publish Date', title: 'date', widget: 'datetime' }
- - { label: 'Body', title: 'body', widget: 'markdown' }
+ - { label: 'Title', name: 'title', widget: 'string' }
+ - { label: 'Publish Date', name: 'date', widget: 'datetime' }
+ - { label: 'Body', name: 'body', widget: 'markdown' }
```
The above config will transform the title field to uppercase and format the date field using `YYYY-MM-DD` format.
-Available transformations are `upper`, `lower`, `date('')`, `default('defaultValue')`, `ternary('valueForTrue','valueForFalse')` and `truncate()`/`truncate(, '')`
+Available transformations are `upper`, `lower`, `date('')`, `default('defaultValue')`, `ternary('valueForTrue','valueForFalse')` and `truncate()`/`truncate(, '')`
## Registering to CMS Events
@@ -484,7 +374,7 @@ Example usage:
```javascript
CMS.registerEventListener({
- title: 'prePublish',
+ name: 'prePublish',
handler: ({ author, entry }) => console.info(JSON.stringify({ author, data: entry.data })),
});
```
@@ -493,7 +383,7 @@ Supported events are `prePublish`, `postPublish`, `preSave` and `postSave`. The
```javascript
CMS.registerEventListener({
- title: 'preSave',
+ name: 'preSave',
handler: ({ entry }) => {
return entry.data.set('title', 'new title');
},
@@ -508,23 +398,23 @@ For example given the configuration:
```yaml
collections:
- - title: posts
+ - name: posts
label: Posts
folder: content/posts
create: true
fields:
- label: Title
- title: title
+ name: title
widget: string
- label: Object
- title: object
+ name: object
widget: object
fields:
- label: Title
- title: title
+ name: title
widget: string
- label: body
- title: body
+ name: body
widget: markdown
```
@@ -534,45 +424,3 @@ will open the editor for a new post with the `title` field populated with `first
with `second` and the markdown `body` field with `# content`.
**Note:** URL Encoding might be required for certain values (e.g. in the previous example the value for `body` is URL encoded).
-
-## Nested Collections
-
-Allows a folder collection to show a nested structure of entries and edit the locations of the entries.
-
-Example configuration:
-
-```yaml
-collections:
- - title: pages
- label: Pages
- label_singular: 'Page'
- folder: content/pages
- create: true
- # adding a nested object will show the collection folder structure
- nested:
- depth: 100 # max depth to show in the collection tree
- summary: '{{title}}' # optional summary for a tree node, defaults to the inferred title field
- fields:
- - label: Title
- title: title
- widget: string
- - label: Body
- title: body
- widget: markdown
-```
-
-Nested collections expect the following directory structure:
-
-```bash
-content
-└── pages
- ├── authors
- │ ├── author-1
- │ │ └── index.md
- │ └── index.md
- ├── index.md
- └── posts
- ├── hello-world
- │ └── index.md
- └── index.md
-```
diff --git a/website/content/docs/bitbucket-backend.mdx b/website/content/docs/bitbucket-backend.mdx
index a26aaefc..7ae7f47f 100644
--- a/website/content/docs/bitbucket-backend.mdx
+++ b/website/content/docs/bitbucket-backend.mdx
@@ -1,8 +1,11 @@
---
-group: Accounts
+group: Backends
title: Bitbucket
-weight: 20
+weight: 30
---
+
+- **Name**: `bitbucket`
+
For repositories stored on Bitbucket, the `bitbucket` backend allows CMS users to log in directly with their Bitbucket account. Note that all users must have write access to your content repository for this to work.
## Authentication
@@ -12,8 +15,8 @@ To enable Bitbucket authentication it:
1. Follow the authentication provider setup steps in the [Netlify docs](https://www.netlify.com/docs/authentication-providers/#using-an-authentication-provider).
2. Add the following lines to your Static CMS `config.yml` file:
- ```yaml
- backend:
- title: bitbucket
- repo: owner-name/repo-name # Path to your Bitbucket repository
- ```
+```yaml
+backend:
+ name: bitbucket
+ repo: owner-name/repo-name # Path to your Bitbucket repository
+```
diff --git a/website/content/docs/cloudinary.mdx b/website/content/docs/cloudinary.mdx
index 273fa1a3..3ba36a7a 100644
--- a/website/content/docs/cloudinary.mdx
+++ b/website/content/docs/cloudinary.mdx
@@ -3,6 +3,9 @@ group: Media
title: Cloudinary
weight: 10
---
+
+##
+
Cloudinary is a digital asset management platform with a broad feature set, including support for responsive image generation and url based image transformation. They also provide a powerful media library UI for managing assets, and tools for organizing your assets into a hierarchy.
The Cloudinary media library integration for Static CMS uses Cloudinary's own media library interface within Static CMS. To get started, you'll need a Cloudinary account and Static CMS 2.3.0 or greater.
@@ -13,32 +16,33 @@ You can [sign up for Cloudinary](https://cloudinary.com/users/register/free) for
-## Connecting Cloudinary to Static CMS
+## Connecting Cloudinary
To use the Cloudinary media library within Static CMS, you'll need to update your Static CMS configuration file with the information from your Cloudinary account:
```yaml
media_library:
- title: cloudinary
+ name: cloudinary
config:
- cloud_title: your_cloud_name
+ cloud_name: your_cloud_name
api_key: your_api_key
```
-**Note:** The user must be logged in to the Cloudinary account connected to the `api_key` used in your Static CMS configuration.
+**Note:** The user must be logged in to the Cloudinary account connected to the `api_key` used in your Static CMS configuration.
### Security Considerations
+
Although this setup exposes the `cloud_name` and `api_key` publicly via the `/admin/config.yml` endpoint, this information is not sensitive. Any integration of the Cloudinary media library requires this information to be exposed publicly. To use this library or use the restricted Cloudinary API endpoints, the user must have access to the Cloudinary account login details or the `api_secret` associated with the `cloud_name` and `api_key`.
## Static CMS configuration options
The following options are specific to the Static CMS integration for Cloudinary:
-* **`output_filename_only`**: _(default: `false`)_\
+- **`output_filename_only`**: _(default: `false`)_\
By default, the value provided for a selected image is a complete URL for the asset on Cloudinary's CDN. Setting `output_filename_only` to `true` will instead produce just the filename (e.g. `image.jpg`). This should be `true` if you will be directly embedding cloudinary transformation urls in page templates. Refer to [Inserting Cloudinary URL in page templates](#inserting-cloudinary-url-in-page-templates).
-* **`use_transformations`**: _(default: `true`)_\
+- **`use_transformations`**: _(default: `true`)_\
If `true`, uses derived url when available (the url will have image transformation segments included). Has no effect if `output_filename_only` is set to `true`.
-* **`use_secure_url`**: _(default: `true`)_\
+- **`use_secure_url`**: _(default: `true`)_\
Controls whether an `http` or `https` URL is provided. Has no effect if `output_filename_only` is set to `true`.
## Cloudinary configuration options
@@ -47,20 +51,21 @@ The following options are used to configure the media library. All options are l
### Authentication
-* `cloud_name`
-* `api_key`
+- `cloud_name`
+- `api_key`
### Media library behavior
-* `default_transformations` _\- only the first [image transformation](#image-transformations) is used, be sure to use the `SDK Parameter` column transformation names from the_ [_transformation reference_](https://cloudinary.com/documentation/image_transformation_reference)
-* `max_files` _\- has no impact on images inside the [markdown widget](/docs/widgets/#markdown)_. Refer to [media library documentation](https://cloudinary.com/documentation/media_library_widget#3_set_the_configuration_options) for details on this property
-* `multiple` _\- has no impact on images inside the [markdown widget](/docs/widgets/#markdown)_. Refer to [media library documentation](https://cloudinary.com/documentation/media_library_widget#3_set_the_configuration_options) for details on this property
+- `default_transformations` _\- only the first [image transformation](#image-transformations) is used, be sure to use the `SDK Parameter` column transformation names from the_ [_transformation reference_](https://cloudinary.com/documentation/image_transformation_reference)
+- `max_files` _\- has no impact on images inside the [markdown widget](/docs/widgets/#markdown)_. Refer to [media library documentation](https://cloudinary.com/documentation/media_library_widget#3_set_the_configuration_options) for details on this property
+- `multiple` _\- has no impact on images inside the [markdown widget](/docs/widgets/#markdown)_. Refer to [media library documentation](https://cloudinary.com/documentation/media_library_widget#3_set_the_configuration_options) for details on this property
## Image transformations
The Cloudinary integration allows images to be transformed in two ways: directly within Static CMS via [Cloudinary's Media Library](#transforming-images-via-media-library), and separately from the CMS via Cloudinary's [dynamic URL's](https://cloudinary.com/documentation/image_transformations#delivering_media_assets_using_dynamic_urls) by [inserting cloudinary urls](#inserting-cloudinary-url-in-page-templates).
-### Transforming images via Media Library
+### Transforming Images
+
If you transform and insert images from within the Cloudinary media library, the transformed image URL will be output by default. This gives the editor complete freedom to make changes to the image output.
There are two ways to configure image transformation via media library - [globally](#global-configuration) and per [field](#field-configuration). Global options will be overridden by field options.
@@ -73,7 +78,7 @@ instance of the Cloudinary widget.
```yaml
# global
media_library:
- title: cloudinary
+ name: cloudinary
output_filename_only: false
config:
default_transformations:
@@ -92,43 +97,45 @@ For example:
```yaml
# field
fields: # The fields each document in this collection have
-- label: 'Cover Image'
- title: 'image'
- widget: 'image'
- required: false
- tagtitle: ''
- media_library:
- config:
- default_transformations:
- - fetch_format: auto
- width: 300
- quality: auto
- crop: fill
- effect: grayscale
+ - label: 'Cover Image'
+ name: 'image'
+ widget: 'image'
+ required: false
+ tagtitle: ''
+ media_library:
+ config:
+ default_transformations:
+ - fetch_format: auto
+ width: 300
+ quality: auto
+ crop: fill
+ effect: grayscale
```
## Inserting Cloudinary URL in page templates
If you prefer to provide direction so that images are transformed in a specific way, or dynamically retrieve images based on viewport size, you can do so by providing your own base Cloudinary URL and only storing the asset filenames in your content:
-* Either globally or for specific fields, configure the Cloudinary extension to only output the asset filename
+- Either globally or for specific fields, configure the Cloudinary extension to only output the asset filename
```yaml
# global
media_library:
- title: cloudinary
+ name: cloudinary
output_filename_only: true
# field
media_library:
- title: cloudinary
+ name: cloudinary
output_filename_only: true
```
-* Provide a dynamic URL in the site template
+- Provide a dynamic URL in the site template
```handlebars
{{! handlebars example }}
-
+
```
Your dynamic URL can be formed conditionally to provide any desired transformations - please see Cloudinary's [image transformation reference](https://cloudinary.com/documentation/image_transformation_reference) for available transformations.
diff --git a/website/content/docs/collection-overview.mdx b/website/content/docs/collection-overview.mdx
new file mode 100644
index 00000000..b59b2f3e
--- /dev/null
+++ b/website/content/docs/collection-overview.mdx
@@ -0,0 +1,217 @@
+---
+group: Collections
+title: Collections Configuration
+weight: 9
+---
+
+`collections` accepts a list of collection objects, each with the following options
+
+| Name | Type | Default | Description |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| name | string | | Unique identifier for the collection, used as the key when referenced in other contexts (like the [relation widget](/docs/widgets/#relation)) |
+| identifier_field | string | `'title'` | _Optional_. See [identifier_field](#identifier_field) below |
+| label | string | `name` | _Optional_. Label for the collection in the editor UI |
+| label_singular | string | `label` | _Optional_. singular label for certain elements in the editor |
+| icon | string | | Unique name of icon to use in main menu. See [Custom Icons](/docs/custom-icons) |
+| description | string | | _Optional_. Text displayed below the label when viewing a collection |
+| files or folder | [Collection Files](/docs/collection-types#file-collections) \| [Collection Folder](/docs/collection-types#folder-collections) | | **Requires one of these**: Specifies the collection type and location; details in [Collection Types](/docs/collection-types) |
+| filter | string | | _Optional_. Filter for [Folder Collections](/docs/collection-types#folder-collections) |
+| create | string | `false` | **For [Folder Collections](/docs/collection-types#folder-collections) only** `true` - Allows users to create new items in the collection |
+| hide | string | `false` | `true` hides a collection in the CMS UI. Useful when using the relation widget to hide referenced collections |
+| delete | string | `true` | `false` prevents users from deleting items in a collection |
+| extension | string | | See [extension](#extension-and-format) below |
+| format | string | | See [format](#extension-and-format) below |
+| frontmatter_delimiter | string | | See [frontmatter_delimiter](#frontmatter_delimiter) below |
+| slug | string | | See [slug](#slug) below |
+| fields (required) | string | | See [fields](#fields) below |
+| editor | string | | See [editor](#editor) below |
+| summary | string | | See [summary](#summary) below |
+| sortable_fields | string | | See [sortable_fields](#sortable_fields) below |
+| view_filters | string | | See [view_filters](#view_filters) below |
+| view_groups | string | | See [view_groups](#view_groups) below |
+
+## `identifier_field`
+
+Static CMS expects every entry to provide a field named `"title"` that serves as an identifier for the entry. The identifier field serves as an entry's title when viewing a list of entries, and is used in [slug](#slug) creation. If you would like to use a field other than `"title"` as the identifier, you can set `identifier_field` to the name of the other field.
+
+### Example
+
+```yaml
+collections:
+ - name: posts
+ identifier_field: name
+```
+
+## `extension` and `format`
+
+These settings determine how collection files are parsed and saved. Both are optional—Static CMS will attempt to infer your settings based on existing items in the collection. If your collection is empty, or you'd like more control, you can set these fields explicitly.
+
+`extension` determines the file extension searched for when finding existing entries in a folder collection and it determines the file extension used to save new collection items. It accepts the following values: `yml`, `yaml`, `toml`, `json`, `md`, `markdown`, `html`.
+
+You may also specify a custom `extension` not included in the list above, as long as the collection files can be parsed and saved in one of the supported formats below.
+
+`format` determines how collection files are parsed and saved. It will be inferred if the `extension` field or existing collection file extensions match one of the supported extensions above. It accepts the following values:
+
+- `yml` or `yaml`: parses and saves files as YAML-formatted data files; saves with `yml` extension by default
+- `toml`: parses and saves files as TOML-formatted data files; saves with `toml` extension by default
+- `json`: parses and saves files as JSON-formatted data files; saves with `json` extension by default
+- `frontmatter`: parses files and saves files with data frontmatter followed by an unparsed body text (edited using a `body` field); saves with `md` extension by default; default for collections that can't be inferred. Collections with `frontmatter` format (either inferred or explicitly set) can parse files with frontmatter in YAML, TOML, or JSON format. However, they will be saved with YAML frontmatter.
+- `yaml-frontmatter`: same as the `frontmatter` format above, except frontmatter will be both parsed and saved only as YAML, followed by unparsed body text. The default delimiter for this option is `---`.
+- `toml-frontmatter`: same as the `frontmatter` format above, except frontmatter will be both parsed and saved only as TOML, followed by unparsed body text. The default delimiter for this option is `+++`.
+- `json-frontmatter`: same as the `frontmatter` format above, except frontmatter will be both parsed and saved as JSON, followed by unparsed body text. The default delimiter for this option is `{` `}`.
+
+## `frontmatter_delimiter`
+
+If you have an explicit frontmatter format declared, this option allows you to specify a custom delimiter like `~~~`. If you need different beginning and ending delimiters, you can use an array like `["(", ")"]`.
+
+## `slug`
+
+For folder collections where users can create new items, the `slug` option specifies a template for generating new filenames based on a file's creation date and `title` field. (This means that all collections with `create: true` must have a `title` field (a different field can be used via [`identifier_field`](#identifier_field)).
+
+The slug template can also reference a field value by name, eg. `{{title}}`. If a field name conflicts with a built in template tag name - for example, if you have a field named `slug`, and would like to reference that field via `{{slug}}`, you can do so by adding the explicit `fields.` prefix, eg. `{{fields.slug}}`.
+
+### Available Template Tags
+
+- Any field can be referenced by wrapping the field name in double curly braces, eg. `{{author}}`
+- `{{slug}}`: a url-safe version of the `title` field (or identifier field) for the file
+- `{{year}}`: 4-digit year of the file creation date
+- `{{month}}`: 2-digit month of the file creation date
+- `{{day}}`: 2-digit day of the month of the file creation date
+- `{{hour}}`: 2-digit hour of the file creation date
+- `{{minute}}`: 2-digit minute of the file creation date
+- `{{second}}`: 2-digit second of the file creation date
+
+### Examples
+
+#### Basic Example
+
+```yaml
+slug: '{{year}}-{{month}}-{{day}}_{{slug}}'
+```
+
+#### Field Names
+
+```yaml
+slug: '{{year}}-{{month}}-{{day}}_{{title}}_{{some_other_field}}'
+```
+
+#### Field Name That Conflicts With Template Tag
+
+```yaml
+slug: '{{year}}-{{month}}-{{day}}_{{fields.slug}}'
+```
+
+## `fields`
+
+The `fields` option maps editor UI widgets to field-value pairs in the saved file. The order of the fields in your Static CMS `config.yml` file determines their order in the editor UI and in the saved file.
+
+`fields` accepts a list of widgets. See [widgets](/docs/widgets) for more details.
+
+In files with frontmatter, one field should be named `body`. This special field represents the section of the document (usually markdown) that comes after the frontmatter.
+
+### Example
+
+```yaml
+fields:
+ - label: "Title"
+ name: "title"
+ widget: "string"
+ pattern: ['.{20,}', "Must have at least 20 characters"]
+ - {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
+ - {label: "Featured Image", name: "thumbnail", widget: "image", required: false}
+ - {label: "Body", name: "body", widget: "markdown"}
+ comment: 'This is a multiline\ncomment'
+```
+
+## `editor`
+
+This setting changes options for the editor view of a collection or a file inside a files collection. It has the following options:
+
+| Name | Type | Default | Description |
+| ------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------ |
+| preview | boolean | `true` | Set to `false` to disable the preview pane for this collection or file |
+| frame | boolean | `true` |
`true` - Previews render in a frame
`false` - Previews render directly in your app
|
+
+### Example
+
+```yaml
+editor:
+ preview: false
+ frame: false
+```
+
+**Note**: Setting this as a top level configuration will set the default for all collections
+
+## `summary`
+
+This setting allows the customization of the collection list view. Similar to the `slug` field, a string with templates can be used to include values of different fields, e.g. `{{title}}`. This option over-rides the default of `title` field and `identifier_field`.
+
+### Available Template Tags
+
+Template tags are the same as those for [slug](#slug), with the following additions:
+
+- `{{dirname}}` The path to the file's parent directory, relative to the collection's `folder`.
+- `{{filename}}` The file name without the extension part.
+- `{{extension}}` The file extension.
+- `{{commit_date}}` The file commit date on supported backends (git based backends).
+- `{{commit_author}}` The file author date on supported backends (git based backends).
+
+### Example
+
+```yaml
+summary: 'Version: {{version}} - {{title}}'
+```
+
+## `sortable_fields`
+
+An optional list of sort fields to show in the UI.
+
+Defaults to inferring `title`, `date`, `author` and `description` fields and will also show `Update On` sort field in git based backends.
+
+When `author` field can't be inferred commit author will be used.
+
+### Example
+
+```yaml
+# use dot notation for nested fields
+sortable_fields: ['commit_date', 'title', 'commit_author', 'language.en']
+```
+
+### `view_filters`
+
+An optional list of predefined view filters to show in the UI.
+
+Defaults to an empty list.
+
+### Example
+
+```yaml
+view_filters:
+ - label: "Alice's and Bob's Posts"
+ field: author
+ pattern: 'Alice|Bob'
+ - label: 'Posts published in 2020'
+ field: date
+ pattern: '2020'
+ - label: Drafts
+ field: draft
+ pattern: true
+```
+
+## `view_groups`
+
+An optional list of predefined view groups to show in the UI.
+
+Defaults to an empty list.
+
+### Example
+
+```yaml
+view_groups:
+ - label: Year
+ field: date
+ # groups items based on the value matched by the pattern
+ pattern: \d{4}
+ - label: Drafts
+ field: draft
+```
diff --git a/website/content/docs/collection-types.mdx b/website/content/docs/collection-types.mdx
index 63471d00..08e55b04 100644
--- a/website/content/docs/collection-types.mdx
+++ b/website/content/docs/collection-types.mdx
@@ -14,7 +14,7 @@ Folder collections represent one or more files with the same format, fields, and
Unlike file collections, folder collections have the option to allow editors to create new items in the collection. This is set by the boolean `create` field.
-**Note:** Folder collections must have at least one field with the name `title` for creating new entry slugs. That field should use the default `string` widget. The `label` for the field can be any string value. If you wish to use a different field as your identifier, set `identifier_field` to the field name. See the [Collections reference doc](/docs/configuration-options/#collections) for details on how collections and fields are configured. If you forget to add this field, you will get an error that your collection "must have a field that is a valid entry identifier".
+**Note:** Folder collections must have at least one field with the name `title` for creating new entry slugs. That field should use the default `string` widget. The `label` for the field can be any string value. If you wish to use a different field as your identifier, set `identifier_field` to the field name. See the [Collections reference doc](/docs/collection-overview) for details on how collections and fields are configured. If you forget to add this field, you will get an error that your collection "must have a field that is a valid entry identifier".
### Examples
@@ -115,7 +115,82 @@ collections:
widget: markdown
```
-### Nested Collections (Beta)
+### Folder Collections Path
+
+By default the CMS stores folder collection content under the folder specified in the collection setting.
+
+For example configuring `folder: posts` for a collection will save the content under `posts/post-title.md`.
+
+You can now specify an additional `path` template (similar to the `slug` template) to control the content destination.
+
+This allows saving content in subfolders, e.g. configuring `path: '{{year}}/{{slug}}'` will save the content under `posts/2019/post-title.md`.
+
+#### Media and Public Folder
+
+By default the CMS stores media files for all collections under a global `media_folder` directory as specified in the configuration.
+
+When using the global `media_folder` directory any entry field that points to a media file will use the absolute path to the published file as designated by the `public_folder` configuration.
+
+For example configuring:
+
+```yaml
+media_folder: static/media
+public_folder: /media
+```
+
+And saving an entry with an image named `image.png` will result in the image being saved under `static/media/image.png` and relevant entry fields populated with the value of `/media/image.png`.
+
+Some static site generators (e.g. Gatsby) work best when using relative image paths.
+
+This can now be achieved using a per collection `media_folder` configuration which specifies a relative media folder for the collection.
+
+For example, the following configuration will result in media files being saved in the same directory as the entry, and the image field being populated with the relative path to the image.
+
+```yaml
+media_folder: static/media
+public_folder: /media
+collections:
+ - name: posts
+ label: Posts
+ label_singular: 'Post'
+ folder: content/posts
+ path: '{{slug}}/index'
+ media_folder: ''
+ public_folder: ''
+ fields:
+ - label: Title
+ name: title
+ widget: string
+ - label: 'Cover Image'
+ name: 'image'
+ widget: 'image'
+```
+
+More specifically, saving an entry with a title of `example post` with an image named `image.png` will result in a directory structure of:
+
+```bash
+content
+ posts
+ example-post
+ index.md
+ image.png
+```
+
+And for the image field being populated with a value of `image.png`.
+
+**Note: When specifying a `path` on a folder collection, `media_folder` defaults to an empty string.**
+
+##### Available Template Tags
+
+Supports all of the [`slug` templates](/docs/configuration-options#slug) and:
+
+* `{{dirname}}` The path to the file's parent directory, relative to the collection's `folder`.
+* `{{filename}}` The file name without the extension part.
+* `{{extension}}` The file extension.
+* `{{media_folder}}` The global `media_folder`.
+* `{{public_folder}}` The global `public_folder`.
+
+### Nested Collections
[Nested collections](/docs/beta-features/#nested-collections) is a beta feature that allows a folder collection to show a nested structure of entries and edit the locations of the entries. This feature is useful when you have a complex folder structure and may not want to create separate collections for every directory. As it is in beta, please use with discretion.
@@ -140,7 +215,7 @@ collections:
fields:
- name: title
label: Title
- widget: string
+ widget: string
- name: intro
label: Intro
widget: markdown
diff --git a/website/content/docs/configuration-options.mdx b/website/content/docs/configuration-options.mdx
index 67d3cc3e..dd7f3172 100644
--- a/website/content/docs/configuration-options.mdx
+++ b/website/content/docs/configuration-options.mdx
@@ -1,9 +1,8 @@
---
-group: Configuration
+group: Intro
title: Configuration Options
-weight: 10
+weight: 180
---
-## Configuration File
All configuration options for Static CMS are specified in a `config.yml` file, in the folder where you access the editor UI (usually in the `/admin` folder).
@@ -14,7 +13,7 @@ Alternatively, you can specify a custom config file using a link tag:
```
-To see working configuration examples, you can [start from a template](/docs/start-with-a-template) or check out the [CMS demo site](https://cms-demo.netlify.com). (No login required: click the login button and the CMS will open.) You can refer to the demo [configuration code](https://github.com/StaticJsCMS/static-cms/blob/main/dev-test/config.yml) to see how each option was configured.
+To see working configuration examples, you can [start from a template](/docs/start-with-a-template) or check out the [CMS demo site](https://static-cms-demo.netlify.app). (No login required: click the login button and the CMS will open.) You can refer to the demo [configuration code](https://github.com/StaticJsCMS/static-cms/blob/main/core/dev-test/config.yml) to see how each option was configured.
You can find details about all configuration options below. Note that [YAML syntax](https://en.wikipedia.org/wiki/YAML#Basic_components) allows lists and objects to be written in block or inline style, and the code samples below include a mix of both.
@@ -24,7 +23,7 @@ You can find details about all configuration options below. Note that [YAML synt
The `backend` option specifies how to access the content for your site, including authentication. Full details and code samples can be found in [Backends](/docs/backends-overview).
-**Note**: no matter where you access Static CMS — whether running locally, in a staging environment, or in your published site — it will always fetch and commit files in your hosted repository (for example, on GitHub), on the branch you configured in your Static CMS config.yml file. This means that content fetched in the admin UI will match the content in the repository, which may be different from your locally running site. It also means that content saved using the admin UI will save directly to the hosted repository, even if you're running the UI locally or in staging. If you want to have your local CMS write to a local repository, try the `local_backend` setting, [currently in beta](/docs/beta-features/#working-with-a-local-git-repository).
+**Note**: no matter where you access Static CMS — whether running locally, in a staging environment, or in your published site — it will always fetch and commit files in your hosted repository (for example, on GitHub), on the branch you configured in your Static CMS config.yml file. This means that content fetched in the admin UI will match the content in the repository, which may be different from your locally running site. It also means that content saved using the admin UI will save directly to the hosted repository, even if you're running the UI locally or in staging. If you want to have your local CMS write to a local repository, [try the local_backend setting](/docs/local-backend).
## Media and Public Folders
@@ -60,7 +59,7 @@ Media library integrations are configured via the `media_library` property, and
```yaml
media_library:
- title: uploadcare
+ name: uploadcare
config:
publicKey: demopublickey
```
@@ -99,9 +98,7 @@ logo_url: https://your-site.com/images/logo.svg
## Locale
-The CMS locale.
-
-Defaults to `en`.
+The CMS locale. Defaults to `en`.
Other languages than English must be registered manually.
@@ -127,8 +124,7 @@ When a translation for the selected locale is missing the English one will be us
## Search
-The search functionally requires loading all collection(s) entries, which can exhaust rate limits on large repositories.
-It can be disabled by setting the top level `search` property to `false`.
+The search functionally requires loading all collection(s) entries, which can exhaust rate limits on large repositories. It can be disabled by setting the top level `search` property to `false`.
Defaults to `true`
@@ -167,217 +163,4 @@ slug:
The `collections` setting is the heart of your Static CMS configuration, as it determines how content types and editor fields in the UI generate files and content in your repository. Each collection you configure displays in the left sidebar of the Content page of the editor UI, in the order they are entered into your Static CMS `config.yml` file.
-`collections` accepts a list of collection objects, each with the following options:
-
-* `name` (required): unique identifier for the collection, used as the key when referenced in other contexts (like the [relation widget](/docs/widgets/#relation))
-* `identifier_field`: see detailed description below
-* `label`: label for the collection in the editor UI; defaults to the value of `name`
-* `label_singular`: singular label for certain elements in the editor; defaults to the value of `label`
-* `description`: optional text, displayed below the label when viewing a collection
-* `files` or `folder` (requires one of these): specifies the collection type and location; details in [Collection Types](/docs/collection-types)
-* `filter`: optional filter for `folder` collections; details in [Collection Types](/docs/collection-types)
-* `create`: for `folder` collections only; `true` allows users to create new items in the collection; defaults to `false`
-* `hide`: `true` hides a collection in the CMS UI; defaults to `false`. Useful when using the relation widget to hide referenced collections.
-* `delete`: `false` prevents users from deleting items in a collection; defaults to `true`
-* `extension`: see detailed description below
-* `format`: see detailed description below
-* `frontmatter_delimiter`: see detailed description under `format`
-* `slug`: see detailed description below
-* `preview_path`: see detailed description below
-* `preview_path_date_field`: see detailed description below
-* `fields` (required): see detailed description below
-* `editor`: see detailed description below
-* `summary`: see detailed description below
-* `sortable_fields`: see detailed description below
-* `view_filters`: see detailed description below
-* `view_groups`: see detailed description below
-
-The last few options require more detailed information.
-
-### `identifier_field`
-
-Static CMS expects every entry to provide a field named `"title"` that serves as an identifier for the entry. The identifier field serves as an entry's title when viewing a list of entries, and is used in [slug](#slug) creation. If you would like to use a field other than `"title"` as the identifier, you can set `identifier_field` to the name of the other field.
-
-**Example**
-
-```yaml
-collections:
- - title: posts
- identifier_field: name
-```
-
-### `extension` and `format`
-
-These settings determine how collection files are parsed and saved. Both are optional—Static CMS will attempt to infer your settings based on existing items in the collection. If your collection is empty, or you'd like more control, you can set these fields explicitly.
-
-`extension` determines the file extension searched for when finding existing entries in a folder collection and it determines the file extension used to save new collection items. It accepts the following values: `yml`, `yaml`, `toml`, `json`, `md`, `markdown`, `html`.
-
-You may also specify a custom `extension` not included in the list above, as long as the collection files can be parsed and saved in one of the supported formats below.
-
-`format` determines how collection files are parsed and saved. It will be inferred if the `extension` field or existing collection file extensions match one of the supported extensions above. It accepts the following values:
-
-* `yml` or `yaml`: parses and saves files as YAML-formatted data files; saves with `yml` extension by default
-* `toml`: parses and saves files as TOML-formatted data files; saves with `toml` extension by default
-* `json`: parses and saves files as JSON-formatted data files; saves with `json` extension by default
-* `frontmatter`: parses files and saves files with data frontmatter followed by an unparsed body text (edited using a `body` field); saves with `md` extension by default; default for collections that can't be inferred. Collections with `frontmatter` format (either inferred or explicitly set) can parse files with frontmatter in YAML, TOML, or JSON format. However, they will be saved with YAML frontmatter.
-* `yaml-frontmatter`: same as the `frontmatter` format above, except frontmatter will be both parsed and saved only as YAML, followed by unparsed body text. The default delimiter for this option is `---`.
-* `toml-frontmatter`: same as the `frontmatter` format above, except frontmatter will be both parsed and saved only as TOML, followed by unparsed body text. The default delimiter for this option is `+++`.
-* `json-frontmatter`: same as the `frontmatter` format above, except frontmatter will be both parsed and saved as JSON, followed by unparsed body text. The default delimiter for this option is `{` `}`.
-
-### `frontmatter_delimiter`
-
-If you have an explicit frontmatter format declared, this option allows you to specify a custom delimiter like `~~~`. If you need different beginning and ending delimiters, you can use an array like `["(", ")"]`.
-
-### `slug`
-
-For folder collections where users can create new items, the `slug` option specifies a template for generating new filenames based on a file's creation date and `title` field. (This means that all collections with `create: true` must have a `title` field (a different field can be used via [`identifier_field`](#identifier_field)).
-
-The slug template can also reference a field value by name, eg. `{{title}}`. If a field name conflicts with a built in template tag name - for example, if you have a field named `slug`, and would like to reference that field via `{{slug}}`, you can do so by adding the explicit `fields.` prefix, eg. `{{fields.slug}}`.
-
-**Available template tags:**
-
-* Any field can be referenced by wrapping the field name in double curly braces, eg. `{{author}}`
-* `{{slug}}`: a url-safe version of the `title` field (or identifier field) for the file
-* `{{year}}`: 4-digit year of the file creation date
-* `{{month}}`: 2-digit month of the file creation date
-* `{{day}}`: 2-digit day of the month of the file creation date
-* `{{hour}}`: 2-digit hour of the file creation date
-* `{{minute}}`: 2-digit minute of the file creation date
-* `{{second}}`: 2-digit second of the file creation date
-
-**Example:**
-
-```yaml
-slug: "{{year}}-{{month}}-{{day}}_{{slug}}"
-```
-
-**Example using field names:**
-
-```yaml
-slug: "{{year}}-{{month}}-{{day}}_{{title}}_{{some_other_field}}"
-```
-
-**Example using field name that conflicts with a template tag:**
-
-```yaml
-slug: "{{year}}-{{month}}-{{day}}_{{fields.slug}}"
-```
-
-### `fields`
-
-The `fields` option maps editor UI widgets to field-value pairs in the saved file. The order of the fields in your Static CMS `config.yml` file determines their order in the editor UI and in the saved file.
-
-`fields` accepts a list of collection objects, each with the following options:
-
-* `name` (required): unique identifier for the field, used as the key when referenced in other contexts (like the [relation widget](/docs/widgets/#relation))
-* `label`: label for the field in the editor UI; defaults to the value of `name`
-* `widget`: defines editor UI and inputs and file field data types; details in [Widgets](/docs/widgets)
-* `default`: specify a default value for a field; available for most widget types (see [Widgets](/docs/widgets) for details on each widget type). Please note that field default value only works for folder collection type.
-* `required`: specify as `false` to make a field optional; defaults to `true`
-* `pattern`: add field validation by specifying a list with a regex pattern and an error message; more extensive validation can be achieved with [custom widgets](/docs/custom-widgets/#advanced-field-validation)
-* `comment`: optional comment to add before the field (only supported for `yaml`)
-
-In files with frontmatter, one field should be named `body`. This special field represents the section of the document (usually markdown) that comes after the frontmatter.
-
-**Example:**
-
-```yaml
-fields:
- - label: "Title"
- title: "title"
- widget: "string"
- pattern: ['.{20,}', "Must have at least 20 characters"]
- - {label: "Layout", title: "layout", widget: "hidden", default: "blog"}
- - {label: "Featured Image", title: "thumbnail", widget: "image", required: false}
- - {label: "Body", title: "body", widget: "markdown"}
- comment: 'This is a multiline\ncomment'
-```
-
-### `editor`
-
-This setting changes options for the editor view of a collection or a file inside a files collection. It has one option so far:
-
-* `preview`: set to `false` to disable the preview pane for this collection or file; defaults to `true`
-
-**Example:**
-
-```yaml
- editor:
- preview: false
-```
-
-**Note**: Setting this as a top level configuration will set the default for all collections
-
-### `summary`
-
-This setting allows the customization of the collection list view. Similar to the `slug` field, a string with templates can be used to include values of different fields, e.g. `{{title}}`. This option over-rides the default of `title` field and `identifier_field`.
-
-**Available template tags:**
-
-Template tags are the same as those for [slug](#slug), with the following additions:
-
-* `{{dirname}}` The path to the file's parent directory, relative to the collection's `folder`.
-* `{{filename}}` The file name without the extension part.
-* `{{extension}}` The file extension.
-* `{{commit_date}}` The file commit date on supported backends (git based backends).
-* `{{commit_author}}` The file author date on supported backends (git based backends).
-
-**Example**
-
-```yaml
- summary: "Version: {{version}} - {{title}}"
-```
-
-### `sortable_fields`
-
-An optional list of sort fields to show in the UI.
-
-Defaults to inferring `title`, `date`, `author` and `description` fields and will also show `Update On` sort field in git based backends.
-
-When `author` field can't be inferred commit author will be used.
-
-**Example**
-
-```yaml
- # use dot notation for nested fields
- sortable_fields: ['commit_date', 'title', 'commit_author', 'language.en']
-```
-
-### `view_filters`
-
-An optional list of predefined view filters to show in the UI.
-
-Defaults to an empty list.
-
-**Example**
-
-```yaml
- view_filters:
- - label: "Alice's and Bob's Posts"
- field: author
- pattern: 'Alice|Bob'
- - label: 'Posts published in 2020'
- field: date
- pattern: '2020'
- - label: Drafts
- field: draft
- pattern: true
-```
-
-### `view_groups`
-
-An optional list of predefined view groups to show in the UI.
-
-Defaults to an empty list.
-
-**Example**
-
-```yaml
- view_groups:
- - label: Year
- field: date
- # groups items based on the value matched by the pattern
- pattern: \d{4}
- - label: Drafts
- field: draft
-```
+`collections` accepts a list of collection objects. See [Collections](/docs/collection-overview) for details.
\ No newline at end of file
diff --git a/website/content/docs/contributor-guide.mdx b/website/content/docs/contributor-guide.mdx
index 017a54ab..9244e0fc 100644
--- a/website/content/docs/contributor-guide.mdx
+++ b/website/content/docs/contributor-guide.mdx
@@ -23,10 +23,10 @@ If you have a GitHub account, you can file an [issue](https://github.com/StaticJ
When filing an issue, it is important to remember the [Code of Conduct](https://github.com/StaticJsCMS/static-cms/blob/main/CODE_OF_CONDUCT.md).
## Improve existing content
-If you are able to offer up a change to existing content, we welcome this. Once you've forked the repo, and changed the content, you would file a pull request (PR). The repo [Contributing file](https://github.com/StaticJsCMS/static-cms/blob/main/CONTRIBUTING.md) lays out the correct format for PRs.
+If you are able to offer up a change to existing content, it is welcome. Once you've forked the repo, and changed the content, you would file a pull request (PR). The repo [Contributing file](https://github.com/StaticJsCMS/static-cms/blob/main/CONTRIBUTING.md) lays out the correct format for PRs.
## Other places to get involved
-While we work on building this page (and you can help!), here are some links with more information about getting involved:
+Here are some links with more information about getting involved:
* [Setup instructions and Contribution Guidelines](https://github.com/StaticJsCMS/static-cms/blob/main/CONTRIBUTING.md)
* [Join our Community Chat](/chat)
diff --git a/website/content/docs/custom-icons.mdx b/website/content/docs/custom-icons.mdx
new file mode 100644
index 00000000..15e195c2
--- /dev/null
+++ b/website/content/docs/custom-icons.mdx
@@ -0,0 +1,27 @@
+---
+group: Customization
+title: Adding Custom Icons
+weight: 100
+---
+
+The Static CMS exposes a `window.CMS` global object that you can use to register custom icons via `registerIcon`. The same object is also the default export if you import Static CMS as an npm module.
+
+Custom icons can be used with [Collections](/docs/collection-overview) or [Custom Links & Pages](/docs/additional-links)
+
+## Params
+
+| Param | Type | Description |
+| ----- | ------------------------------------------------------------------------------ | -------------------------------------------------- |
+| name | string | A unique name for the icon |
+| name | [React Function Component](https://reactjs.org/docs/components-and-props.html) | A React functional component that renders the icon |
+
+## Example
+
+This example uses Font Awesome to supply the icon.
+
+```js
+import { faHouse } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+cmsApp.registerIcon('house', );
+```
diff --git a/website/content/docs/custom-previews.mdx b/website/content/docs/custom-previews.mdx
new file mode 100644
index 00000000..21b89576
--- /dev/null
+++ b/website/content/docs/custom-previews.mdx
@@ -0,0 +1,157 @@
+---
+group: Customization
+title: Creating Custom Previews
+weight: 50
+---
+
+The Static CMS exposes a `window.CMS` global object that you can use to register custom previews for an entire collection (or file within a file collection) via `registerPreviewTemplate`.
+
+### React Components Inline
+
+The `registerPreviewTemplate` requires you to provide a React component. If you have a build process in place for your project, it is possible to integrate with this build process.
+
+However, although possible, it may be cumbersome or even impractical to add a React build phase. For this reason, Static CMS exposes some constructs globally to allow you to create components inline: `h` (alias for React.createElement) as well some basic hooks (`useState`, `useMemo`, `useEffect`, `useCallback`).
+
+**NOTE**: `createClass` is still provided, allowing for the creation of react class components. However it has now been deprecated and will be removed in `v2.0.0`.
+
+## Params
+
+| Param | Type | Description |
+| --------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| name | string | The name of the collection (or file for file collections) which this preview component will be used for
Folder collections: Use the name of the collection
File collections: Use the name of the file
|
+| react_component | [React Function Component](https://reactjs.org/docs/components-and-props.html) | A React functional component that renders the collection data. |
+
+The following parameters will be passed to your `react_component` during render:
+
+| Param | Type | Description |
+| ---------- | -------------- | ---------------------------------------------------------------------------------------------------- |
+| entry | object | Object with a `data` field that contains the current value of all widgets in the editor |
+| document | Document | The document object the preview is within. If rendered with a frame, it will be the frame's document |
+| window | Window | The window object the preview is within. If rendered with a frame, it will be the frame's window |
+| getAsset | Async function | Function that given a url returns (as a promise) a loaded asset |
+| widgetFor | Function | Given a field name, returns the rendered preview of that field's widget and value |
+| widgetsFor | Function | Given a field name, returns the rendered previews of that field's nested child widgets and values |
+
+### Example
+
+```html
+
+
+```
+
+### Lists and Objects
+
+The API for accessing the individual fields of list- and object-type entries is similar to the API for accessing fields in standard entries, but there are a few key differences. Access to these nested fields is facilitated through the `widgetsFor` function, which is passed to the preview template component during render.
+
+**List Example:**
+
+```html
+
+```
+
+**Object Example:**
+
+```html
+
+```
diff --git a/website/content/docs/custom-widgets.mdx b/website/content/docs/custom-widgets.mdx
index d4e7c72d..ffa960ef 100644
--- a/website/content/docs/custom-widgets.mdx
+++ b/website/content/docs/custom-widgets.mdx
@@ -1,20 +1,20 @@
---
-group: Widgets
+group: Customization
title: Creating Custom Widgets
-weight: 50
+weight: 40
---
-The Static CMS exposes a `window.CMS` a global object that you can use to register custom widgets, previews, and editor plugins. The same object is also the default export if you import Static CMS as an npm module. The available widget extension methods are:
-* **registerWidget:** registers a custom widget.
-* **registerEditorComponent:** adds a block component to the Markdown editor.
+The Static CMS exposes a `window.CMS` global object that you can use to register custom widgets via `registerWidget`. The same object is also the default export if you import Static CMS as an npm module.
-### Writing React Components inline
+### React Components Inline
-The `registerWidget` requires you to provide a React component. If you have a build process in place for your project, it is possible to integrate with this build process.
+The `registerPreviewTemplate` requires you to provide a React component. If you have a build process in place for your project, it is possible to integrate with this build process.
-However, although possible, it may be cumbersome or even impractical to add a React build phase. For this reason, Static CMS exposes two constructs globally to allow you to create components inline: `createClass` and `h` (alias for React.createElement).
+However, although possible, it may be cumbersome or even impractical to add a React build phase. For this reason, Static CMS exposes some constructs globally to allow you to create components inline: `h` (alias for React.createElement) as well some basic hooks (`useState`, `useMemo`, `useEffect`, `useCallback`).
-## `registerWidget`
+**NOTE**: `createClass` is still provided, allowing for the creation of react class components. However it has now been deprecated and will be removed in `v2.0.0`.
+
+## Register Widget
Register a custom widget.
@@ -27,58 +27,139 @@ import CMS from '@staticcms/core';
CMS.registerWidget(name, control, [preview], [schema]);
```
-**Params:**
+### Params
-| Param | Type | Description |
-| ----------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name` | `string` | Widget name, allows this widget to be used via the field `widget` property in config |
-| `control` | `React.Component` or `string` |
React component that renders the control, receives the following props:
**value:** Current field value
**field:** Immutable map of current field configuration
**forID:** Unique identifier for the field
**classNameWrapper:** class name to apply CMS styling to the field
**onChange:** Callback function to update the field value
Name of a registered widget whose control should be used (includes built in widgets).
|
-| [`preview`] | `React.Component`, optional | Renders the widget preview, receives the following props:
**value:** Current preview value
**field:** Immutable map of current field configuration
**getAsset:** Function for retrieving an asset url for image/file fields
**entry:** Immutable Record of all entry data
|
-| [`schema`] | `JSON Schema object`, optional | Enforces a schema for the widget's field configuration |
+| Param | Type | Description |
+| ------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name | string | Widget name, allows this widget to be used via the field `widget` property in config |
+| control | [React Function Component](https://reactjs.org/docs/components-and-props.html) \| string |
`React Function Component` - The react component that renders the control. See [Control Component](#control-component)
`string` - Name of a registered widget whose control should be used (includes built in widgets).
|
+| preview | [React Function Component](https://reactjs.org/docs/components-and-props.html) | _Optional_. Renders the widget preview. See [Preview Component](#preview-component) |
+| options | object | _Optional_. Widget options. See [Options](#options) |
-**Example:**
+### Control Component
+
+The react component that renders the control. It receives the following props:
+
+| Param | Type | Description |
+| ------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------- |
+| label | string | The label for the widget |
+| value | An valid widget value | The current value of the widget |
+| onChange | function | Function to be called when the value changes. Accepts a valid widget value |
+| field | object | The field configuration for the current widget. See [Widget Options](/docs/widgets#common-widget-options) |
+| collection | object | The collection configuration for the current widget. See [Collections](/docs/collection-overview) |
+| config | object | The current Static CMS config. See [configuration options](/docs/configuration-options) |
+| entry | object | Object with a `data` field that contains the current value of all widgets in the editor |
+| path | string | `.` separated string donating the path to the current widget within the entry |
+| hasErrors | boolean | Specifies if there are validation errors with the current widget |
+| fieldsErrors | object | Key/value object of field names mapping to validation errors |
+| isDisabled | boolean | Specifies if the widget control should be disabled |
+| submitted | boolean | Specifies if a save attempt has been made in the editor session |
+| forList | boolean | Specifices if the widget is within a `list` widget |
+| isFieldDuplicate | function | Function that given a field configuration, returns if that field is a duplicate |
+| isFieldHidden | function | Function that given a field configuration, returns if that field is hidden |
+| getAsset | Async function | Function that given a url returns (as a promise) a loaded asset |
+| locale | string \| undefined | The current locale of the editor |
+| mediaPaths | object | Key/value object of control IDs (passed to the media library) mapping to media paths |
+| clearMediaControl | function | Clears a control ID's value from the internal store |
+| openMediaLibrary | function | Opens the media library popup. See [Open Media Library](#open-media-library) |
+| removeInsertedMedia | function | Removes draft media for a give control ID |
+| removeMediaControl | function | Clears a control ID completely from the internal store |
+| query | function | Runs a search on another collection. See [Query](#query) |
+| i18n | object | The current i18n settings |
+| t | function | Translates a given key to the current locale |
+
+#### Open Media Library
+
+`openMediaLibrary` allows you to open up the media library popup. It accepts the following props:
+
+| Param | Type | Default | Description |
+| ------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------ |
+| controlID | string | | _Optional_ A unique identifier to which the uploaded media will be linked |
+| forImage | boolean | `false` | _Optional_ If `true`, restricts upload to image files only |
+| value | string list of strings | | _Optional_ The current selected media value |
+| allowMultiple | boolean | | _Optional_ Allow multiple files or images to be uploaded at once. Only used on media libraries that support multi upload |
+| replaceIndex | number | | _Optional_ The index of the image in an list. Ignored if ` allowMultiple` is `false` |
+| config | object | | _Optional_ Media library config options. Available options depend on the media library being used |
+| field | object | | _Optional_ The current field configuration |
+
+#### Query
+
+`query` allows you to search the entries of a given collection. It accepts the following props:
+
+| Param | Type | Default | Description |
+| -------------- | --------------- | ------- | -------------------------------------------------------------------------------------- |
+| namespace | string | | Unique identifier for search |
+| collectionName | string | | The collection to be searched |
+| searchFields | list of strings | | The Fields to be searched within the target collection |
+| searchTerm | string | | The term to search with |
+| file | string | | _Optional_ The file in a file collection to search. Ignored on folder collections |
+| limit | string | | _Optional_ The number of results to return. If not specified, all results are returned |
+
+### Preview Component
+
+The react component that renders the preview. It receives the following props:
+
+| Param | Type | Description |
+| ---------- | --------------------- | --------------------------------------------------------------------------------------------------------- |
+| value | An valid widget value | The current value of the widget |
+| field | object | The field configuration for the current widget. See [Widget Options](/docs/widgets#common-widget-options) |
+| collection | object | The collection configuration for the current widget. See [Collections](/docs/collection-overview) |
+| config | object | The current Static CMS config. See [configuration options](/docs/configuration-options) |
+| entry | object | Object with a `data` field that contains the current value of all widgets in the editor |
+| getAsset | Async function | Function that given a url returns (as a promise) a loaded asset |
+
+### Options
+
+Register widget takes an optional object of options. These options include:
+
+| Param | Type | Description |
+| ------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
+| validator | function | _Optional_. Validates the value of the widget |
+| getValidValue | string | _Optional_. Given the current value, returns a valid value. See [Advanced field validation](#advanced-field-validation) |
+| schema | JSON Schema object | _Optional_. Enforces a schema for the widget's field configuration |
+
+### Example
`admin/index.html`
```html
-
+
```
@@ -86,478 +167,71 @@ CMS.registerWidget('categories', CategoriesControl, CategoriesPreview, schema);
```yml
collections:
- - title: posts
+ - name: posts
label: Posts
folder: content/posts
fields:
- - title: title
+ - name: title
label: Title
widget: string
- - title: categories
+ - name: categories
label: Categories
widget: categories
separator: __
```
-## `registerEditorComponent`
-
-Register a block level component for the Markdown editor:
-
-```js
-CMS.registerEditorComponent(definition)
-```
-
-**Params**
-
-* **definition:** The component definition; must specify: id, label, fields, patterns, fromBlock, toBlock, toPreview
-
-> Additional properties are optional and will be passed to the underlying widget control (object widget by default). For example, adding a `collapsed: true` property will collapse the widget by default.
-
-**Example:**
-
-```html
-
-
-```
-
-**Result:**
-
-
-
## Advanced field validation
All widget fields, including those for built-in widgets, [include basic validation](/docs/widgets/#common-widget-options) capability using the `required` and `pattern` options.
-With custom widgets, the widget control can also optionally implement an `isValid` method to perform custom validations, in addition to presence and pattern. The `isValid` method will be automatically called, and it can return either a boolean value, an object with an error message or a promise. Examples:
+With custom widgets, the widget can also optionally pass in a `validator` method to perform custom validations, in addition to presence and pattern. The `validator` function will be automatically called, and it can return either a `boolean` value, an `object` with a type and error message or a promise.
-**Boolean**
-No errors:
+### Examples
+
+#### No Errors
```javascript
- isValid = () => {
- // Do internal validation
- return true;
- };
-```
-
-Existing error:
-
-```javascript
- isValid = () => {
- // Do internal validation
- return false;
- };
-```
-
-**Object with `error` (useful for returning custom error messages)**
-Existing error:
-
-```javascript
- isValid = () => {
- // Do internal validation
- return { error: { message: 'Your error message.' } };
- };
-```
-
-**Promise**
-You can also return a promise from `isValid`. While the promise is pending, the widget will be marked as "in error". When the promise resolves, the error is automatically cleared.
-
-```javascript
- isValid = () => {
- return this.existingPromise;
- };
-```
-
-**Note:** Do not create a promise inside `isValid` - `isValid` is called right before trying to persist. This means that even if a previous promise was already resolved, when the user hits 'save', `isValid` will be called again. If it returns a new promise, it will be immediately marked as "in error" until the new promise resolves.
-
-## Writing custom widgets as a separate package
-
-Widgets are inputs for the Static CMS editor interface. It's a React component that receives user input and outputs a serialized value. Those are the only rules - the component can be extremely simple, like text input, or extremely complicated, like a full-blown markdown editor. They can make calls to external services, and generally do anything that JavaScript can do.
-
-For writing custom widgets as a separate package you should follow these steps:
-
-1. Create a directory
-
- ```javascript
- mkdir my-custom-widget
- ```
-2. Navigate to the directory
-
- ```javascript
- cd my-custom-widget
- ```
-3. For setting up a new npm package run this command:
-
- ```javascript
- npm init
- ```
-4. Answer the questions in the command line questionnaire.
-5. In order to build React components, we need to set up a build step. We'll be using Webpack. Please run the following commands to install the required dependencies:
-
-```javascript
- npm install --save-dev @staticcms/core babel-loader@7 babel-core babel-plugin-transform-class-properties babel-plugin-transform-export-extensions babel-plugin-transform-object-rest-spread babel-preset-env babel-preset-react cross-env css-loader html-webpack-plugin react source-map-loader style-loader webpack webpack-cli webpack-serve
-```
-
-```javascript
- npm install --save prop-types
-```
-
-And you should manually add "**peerDependencies**" and "**scripts**" as shown below.
-
-Here is the content of `package.json` that you will have at the end:
-
-```javascript
-{
- "name": "static-cms-widget-starter",
- "description": "A boilerplate for creating Static CMS widgets.",
- "author": "name of developer",
- "keywords": [
- "simple",
- "static-cms",
- "cms",
- "widget",
- "starter",
- "boilerplate"
- ],
- "version": "0.0.1",
- "homepage": "https://github.com/StaticJsCMS/static-cms-widget-starter",
- "license": "MIT",
- "main": "dist/main.js",
- "devDependencies": {
- "@staticcms/core": "^0.1.0",
- "babel-loader": "^7.1.4",
- "babel-plugin-transform-class-properties": "^6.24.1",
- "babel-plugin-transform-export-extensions": "^6.22.0",
- "babel-plugin-transform-object-rest-spread": "^6.26.0",
- "babel-preset-env": "^1.6.1",
- "babel-preset-react": "^6.24.1",
- "cross-env": "^5.1.4",
- "css-loader": "^0.28.11",
- "html-webpack-plugin": "^3.2.0",
- "react": "^16.3.2",
- "source-map-loader": "^0.2.3",
- "style-loader": "^0.20.3",
- "webpack": "^4.6.0",
- "webpack-cli": "^2.0.14",
- "webpack-serve": "^0.3.1"
- },
- "dependencies": {
- "prop-types": "^15.6.1"
- },
- "peerDependencies": {
- "react": "^16"
- },
- "scripts": {
- "start": "webpack-serve --static public --open"
- }
-}
-```
-
-5. Create a Webpack configuration file with this content:
-
- `webpack.config.js`
-
- ```javascript
- const path = require('path')
- const HtmlWebpackPlugin = require('html-webpack-plugin')
-
- const developmentConfig = {
- mode: 'development',
- entry: './dev/index.js',
- output: {
- path: path.resolve(__dirname, 'public'),
- },
- optimization: { minimize: false },
- module: {
- rules: [
- {
- test: /\.js$/,
- loader: 'source-map-loader',
- enforce: 'pre',
- },
- {
- test: /\.jsx?$/,
- exclude: /node_modules/,
- loader: 'babel-loader',
- },
- {
- test: /\.css$/,
- use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
- },
- ],
- },
- plugins: [
- new HtmlWebpackPlugin(),
- ],
- devtool: 'eval-source-map',
- }
-
- const productionConfig = {
- mode: 'production',
- module: {
- rules: [
- {
- test: /\.jsx?$/,
- loader: 'babel-loader',
- },
- ],
- },
- devtool: 'source-map',
- }
-
- module.exports = process.env.NODE_ENV === 'production' ? productionConfig : developmentConfig
- ```
-6. The `.babelrc` file is our local configuration for our code in the project. You should create it under the root of the application repo. It will affect all files that Babel processes. So, create a `.babelrc` file under the main project with this content:
-
-```javascript
-{
- "presets": [
- "react",
- "env",
- ],
- "plugins": [
- "transform-export-extensions",
- "transform-class-properties",
- "transform-object-rest-spread",
- ],
-}
-```
-
-7. Create a `src` directory with the files `Control.js`, `Preview.js` and `index.js`
-
-`src/Control.js`
-
-```javascript
- import PropTypes from 'prop-types';
- import React from 'react';
-
- export default class Control extends React.Component {
- static propTypes = {
- onChange: PropTypes.func.isRequired,
- forID: PropTypes.string,
- value: PropTypes.node,
- classNameWrapper: PropTypes.string.isRequired,
- }
-
- static defaultProps = {
- value: '',
- }
-
- render() {
- const {
- forID,
- value,
- onChange,
- classNameWrapper,
- } = this.props;
-
- return (
- onChange(e.target.value)}
- />
- );
- }
- }
-```
-
-`src/Preview.js`
-
-```javascript
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default function Preview({ value }) {
- return
{ value }
;
-}
-
-Preview.propTypes = {
- value: PropTypes.node,
+const validator = () => {
+ // Do internal validation
+ return true;
};
```
-`src/index.js`
+#### Has Error
```javascript
-import Control from './Control'
-import Preview from './Preview'
-
-if (typeof window !== 'undefined') {
- window.Control = Control
- window.Preview = Preview
-}
-
-export { Control, Preview }
+const validator = () => {
+ // Do internal validation
+ return false;
+};
```
-8. Now you need to set up the locale example site.
- Under the main project, create a `dev` directory with the files `bootstrap.js` and `index.js`
-
-`bootstrap.js`
+#### Error With Type
```javascript
-window.CMS_MANUAL_INIT = true
+const validator = () => {
+ // Do internal validation
+ return { type: 'custom-error' };
+};
```
-`index.js`
+#### Error With Type and Message
+
+_Useful for returning custom error messages_
```javascript
-import './bootstrap.js'
-import CMS, { init } from '@staticcms/core'
-import { Control, Preview } from '/docs/src'
-
-const config = {
-backend: {
- title: 'test-repo',
- login: false,
-},
-media_folder: 'assets',
-collections: [{
- title: 'test',
- label: 'Test',
- files: [{
- file: 'test.yml',
- title: 'test',
- label: 'Test',
- fields: [
- { title: 'test_widget', label: 'Test Widget', widget: 'test'},
- ],
- }],
-}],
-}
-
-CMS.registerWidget('test', Control, Preview)
-
-init({ config })
+const validator = () => {
+ // Do internal validation
+ return { type: 'custom-error', message: 'Your error message.' };
+};
```
-### [](https://github.com/StaticJsCMS/static-cms-widget-starter#development)Development
+#### Promise
-To run a copy of Static CMS with your widget for development, use the start script:
+You can also return a promise from `validator`. The promise can return `boolean` value, an `object` with a type and error message or a promise.
```javascript
-npm start
-```
-
-Your widget source is in the `src` directory, where there are separate files for the `Control` and `Preview` components.
-
-### [](https://github.com/StaticJsCMS/static-cms-widget-starter#production--publishing)Production & Publishing
-
-You'll want to take a few steps before publishing a production built package to npm:
-
-1. Customize `package.json` with details for your specific widget, e.g. name, description, author, version, etc.
-
- ```json
- {
- "name": "static-cms-widget-starter",
- "description": "A boilerplate for creating Static CMS widgets.",
- "author": "name of developer",
- "keywords": [
- "simple",
- "static-cms",
- "cms",
- "widget",
- "starter",
- "boilerplate"
- ],
- "version": "0.0.1",
- // ... rest
- }
- ```
-2. For discoverability, ensure that your package name follows the pattern `static-cms-widget-`.
-3. Delete this `README.md`, rename `README_TEMPLATE.md` to `README.md`, and update the new file for your specific widget.
-4. Rename the exports in `src/index.js`. For example, if your widget is `static-cms-widget-awesome`, you would do:
-
-```javascript
-if (typeof window !== 'undefined') {
- window.AwesomeControl = Control
- window.AwesomePreview = Preview
-}
-
-export { Control as AwesomeControl, Preview as AwesomePreview }
-```
-
-5. Optional: customize the component and file names in `src`.
-6. If you haven't already, push your repo to your GitHub account so the source available to other developers.
-7. Create a production build, which will be output to `dist`:
-
-```javascript
-npm run build
-```
-
-8. Finally, if you're sure things are tested and working, publish!
-
-```javascript
-npm publish
+const validator = () => {
+ return this.existingPromise;
+};
```
diff --git a/website/content/docs/customization-overview.mdx b/website/content/docs/customization-overview.mdx
new file mode 100644
index 00000000..06ff6574
--- /dev/null
+++ b/website/content/docs/customization-overview.mdx
@@ -0,0 +1,13 @@
+---
+group: Customization
+title: Overview
+weight: 1
+---
+
+The Static CMS exposes a `window.CMS` global object that you can use to customize your CMS. The same object is also the default export if you import Static CMS as an npm module. Available options are:
+
+- Register [custom widgets](/docs/custom-widgets)
+- Register [custom previews](/docs/custom-previews)
+- Register [editor customizations](/docs/widget-markdown#customization)
+- Register [additional menu links or custom pages](/docs/additional-links)
+- Register [custom icons](/docs/custom-icons)
diff --git a/website/content/docs/customization.mdx b/website/content/docs/customization.mdx
deleted file mode 100644
index 5c0b50c5..00000000
--- a/website/content/docs/customization.mdx
+++ /dev/null
@@ -1,147 +0,0 @@
----
-group: Customization
-title: Creating Custom Previews
-weight: 50
----
-
-The Static CMS exposes a `window.CMS` global object that you can use to register custom widgets, previews and editor plugins. The available customization methods are:
-
-- **registerPreviewTemplate:** Registers a template for a collection.
-
-### React Components inline interaction
-
-Static CMS is a collection of React components and exposes two constructs globally to allow you to create components inline: `createClass` and `h` (alias for React.createElement).
-
-## `registerPreviewTemplate`
-
-Registers a template for a folder collection or an individual file in a file collection.
-
-`CMS.registerPreviewTemplate(name, react_component);`
-
-**Params:**
-
-- title: The name of the collection (or file for file collections) which this preview component will be used for.
- - Folder collections: Use the name of the collection
- - File collections: Use the name of the file
-- react_component: A React component that renders the collection data. Six props will be passed to your component during render:
-
- - entry: Immutable collection containing the entry data.
- - widgetFor: Returns the appropriate widget preview component for a given field.
- - [widgetsFor](#lists-and-objects): Returns an array of objects with widgets and associated field data. For use with list and object type entries.
- - getAsset: Returns the correct filePath or in-memory preview for uploaded images.
- **Example:**
-
- ```html
-
-
- ```
-
- - document: The preview pane iframe's [document instance](https://github.com/ryanseddon/react-frame-component/tree/9f8f06e1d3fc40da7122f0a57c62f7dec306e6cb#accessing-the-iframes-window-and-document).
- - window: The preview pane iframe's [window instance](https://github.com/ryanseddon/react-frame-component/tree/9f8f06e1d3fc40da7122f0a57c62f7dec306e6cb#accessing-the-iframes-window-and-document).
-
- ### Lists and Objects
-
- The API for accessing the individual fields of list- and object-type entries is similar to the API for accessing fields in standard entries, but there are a few key differences. Access to these nested fields is facilitated through the `widgetsFor` function, which is passed to the preview template component during render.
- **Note**: as is often the case with the Static CMS API, arrays and objects are created with Immutable.js. If some of the methods that we use are unfamiliar, such as `getIn`, check out [their docs](https://facebook.github.io/immutable-js/docs/#/) to get a better understanding.
- **List Example:**
-
- ```html
-
- ```
-
- **Object Example:**
-
- ```html
-
- ```
diff --git a/website/content/docs/docusaurus.mdx b/website/content/docs/docusaurus.mdx
index 1c82d78d..a0791ad7 100644
--- a/website/content/docs/docusaurus.mdx
+++ b/website/content/docs/docusaurus.mdx
@@ -95,7 +95,7 @@ Your website is now deployed. Netlify provides you with a randomly generated dom
- foo
- bar
authors:
- - title: Garrison McMullen
+ - name: Garrison McMullen
title: Instruction Writer
url: https://github.com/garrison0
image_url: https://avatars.githubusercontent.com/u/4089393?v=4
@@ -127,7 +127,7 @@ Your website is now deployed. Netlify provides you with a randomly generated dom
-
+
+
Cloudinary is a digital asset management platform with a broad feature set, including support for responsive image generation and url based image transformation. They also provide a powerful media library UI for managing assets, and tools for organizing your assets into a hierarchy.
The Cloudinary media library integration for Static CMS uses Cloudinary's own media library interface within Static CMS. To get started, you'll need a Cloudinary account and Static CMS 2.3.0 or greater.
@@ -13,32 +16,33 @@ You can [sign up for Cloudinary](https://cloudinary.com/users/register/free) for
-## Connecting Cloudinary to Static CMS
+## Connecting Cloudinary
To use the Cloudinary media library within Static CMS, you'll need to update your Static CMS configuration file with the information from your Cloudinary account:
```yaml
media_library:
- title: cloudinary
+ name: cloudinary
config:
- cloud_title: your_cloud_name
+ cloud_name: your_cloud_name
api_key: your_api_key
```
-**Note:** The user must be logged in to the Cloudinary account connected to the `api_key` used in your Static CMS configuration.
+**Note:** The user must be logged in to the Cloudinary account connected to the `api_key` used in your Static CMS configuration.
### Security Considerations
+
Although this setup exposes the `cloud_name` and `api_key` publicly via the `/admin/config.yml` endpoint, this information is not sensitive. Any integration of the Cloudinary media library requires this information to be exposed publicly. To use this library or use the restricted Cloudinary API endpoints, the user must have access to the Cloudinary account login details or the `api_secret` associated with the `cloud_name` and `api_key`.
## Static CMS configuration options
The following options are specific to the Static CMS integration for Cloudinary:
-* **`output_filename_only`**: _(default: `false`)_\
+- **`output_filename_only`**: _(default: `false`)_\
By default, the value provided for a selected image is a complete URL for the asset on Cloudinary's CDN. Setting `output_filename_only` to `true` will instead produce just the filename (e.g. `image.jpg`). This should be `true` if you will be directly embedding cloudinary transformation urls in page templates. Refer to [Inserting Cloudinary URL in page templates](#inserting-cloudinary-url-in-page-templates).
-* **`use_transformations`**: _(default: `true`)_\
+- **`use_transformations`**: _(default: `true`)_\
If `true`, uses derived url when available (the url will have image transformation segments included). Has no effect if `output_filename_only` is set to `true`.
-* **`use_secure_url`**: _(default: `true`)_\
+- **`use_secure_url`**: _(default: `true`)_\
Controls whether an `http` or `https` URL is provided. Has no effect if `output_filename_only` is set to `true`.
## Cloudinary configuration options
@@ -47,20 +51,21 @@ The following options are used to configure the media library. All options are l
### Authentication
-* `cloud_name`
-* `api_key`
+- `cloud_name`
+- `api_key`
### Media library behavior
-* `default_transformations` _\- only the first [image transformation](#image-transformations) is used, be sure to use the `SDK Parameter` column transformation names from the_ [_transformation reference_](https://cloudinary.com/documentation/image_transformation_reference)
-* `max_files` _\- has no impact on images inside the [markdown widget](/docs/widgets/#markdown)_. Refer to [media library documentation](https://cloudinary.com/documentation/media_library_widget#3_set_the_configuration_options) for details on this property
-* `multiple` _\- has no impact on images inside the [markdown widget](/docs/widgets/#markdown)_. Refer to [media library documentation](https://cloudinary.com/documentation/media_library_widget#3_set_the_configuration_options) for details on this property
+- `default_transformations` _\- only the first [image transformation](#image-transformations) is used, be sure to use the `SDK Parameter` column transformation names from the_ [_transformation reference_](https://cloudinary.com/documentation/image_transformation_reference)
+- `max_files` _\- has no impact on images inside the [markdown widget](/docs/widgets/#markdown)_. Refer to [media library documentation](https://cloudinary.com/documentation/media_library_widget#3_set_the_configuration_options) for details on this property
+- `multiple` _\- has no impact on images inside the [markdown widget](/docs/widgets/#markdown)_. Refer to [media library documentation](https://cloudinary.com/documentation/media_library_widget#3_set_the_configuration_options) for details on this property
## Image transformations
The Cloudinary integration allows images to be transformed in two ways: directly within Static CMS via [Cloudinary's Media Library](#transforming-images-via-media-library), and separately from the CMS via Cloudinary's [dynamic URL's](https://cloudinary.com/documentation/image_transformations#delivering_media_assets_using_dynamic_urls) by [inserting cloudinary urls](#inserting-cloudinary-url-in-page-templates).
-### Transforming images via Media Library
+### Transforming Images
+
If you transform and insert images from within the Cloudinary media library, the transformed image URL will be output by default. This gives the editor complete freedom to make changes to the image output.
There are two ways to configure image transformation via media library - [globally](#global-configuration) and per [field](#field-configuration). Global options will be overridden by field options.
@@ -73,7 +78,7 @@ instance of the Cloudinary widget.
```yaml
# global
media_library:
- title: cloudinary
+ name: cloudinary
output_filename_only: false
config:
default_transformations:
@@ -92,43 +97,45 @@ For example:
```yaml
# field
fields: # The fields each document in this collection have
-- label: 'Cover Image'
- title: 'image'
- widget: 'image'
- required: false
- tagtitle: ''
- media_library:
- config:
- default_transformations:
- - fetch_format: auto
- width: 300
- quality: auto
- crop: fill
- effect: grayscale
+ - label: 'Cover Image'
+ name: 'image'
+ widget: 'image'
+ required: false
+ tagtitle: ''
+ media_library:
+ config:
+ default_transformations:
+ - fetch_format: auto
+ width: 300
+ quality: auto
+ crop: fill
+ effect: grayscale
```
## Inserting Cloudinary URL in page templates
If you prefer to provide direction so that images are transformed in a specific way, or dynamically retrieve images based on viewport size, you can do so by providing your own base Cloudinary URL and only storing the asset filenames in your content:
-* Either globally or for specific fields, configure the Cloudinary extension to only output the asset filename
+- Either globally or for specific fields, configure the Cloudinary extension to only output the asset filename
```yaml
# global
media_library:
- title: cloudinary
+ name: cloudinary
output_filename_only: true
# field
media_library:
- title: cloudinary
+ name: cloudinary
output_filename_only: true
```
-* Provide a dynamic URL in the site template
+- Provide a dynamic URL in the site template
```handlebars
{{! handlebars example }}
-
+