@evfrenkel/decap-cms-core 3.13.0-image-conversions.0

package/src/bootstrap.js

@@ -0,0 +1,104 @@
+import './lib/polyfill';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Provider, connect } from 'react-redux';
+import { Route, Router } from 'react-router-dom';
+import { GlobalStyles } from 'decap-cms-ui-default';
+import { I18n } from 'react-polyglot';
+
+import { store } from './redux';
+import { history } from './routing/history';
+import { loadConfig } from './actions/config';
+import { authenticateUser } from './actions/auth';
+import { getPhrases } from './lib/phrases';
+import { selectLocale } from './reducers/config';
+import { ErrorBoundary } from './components/UI';
+import App from './components/App/App';
+import './components/EditorWidgets';
+import './mediaLibrary';
+import 'what-input';
+
+const ROOT_ID = 'nc-root';
+
+function TranslatedApp({ locale, config }) {
+  return (
+    <I18n locale={locale} messages={getPhrases(locale)}>
+      <ErrorBoundary showBackup config={config}>
+        <Router history={history}>
+          <Route component={App} />
+        </Router>
+      </ErrorBoundary>
+    </I18n>
+  );
+}
+
+function mapDispatchToProps(state) {
+  return { locale: selectLocale(state.config), config: state.config };
+}
+
+const ConnectedTranslatedApp = connect(mapDispatchToProps)(TranslatedApp);
+
+function bootstrap(opts = {}) {
+  const { config } = opts;
+
+  /**
+   * Log the version number.
+   */
+  if (typeof DECAP_CMS_CORE_VERSION === 'string') {
+    console.log(`decap-cms-core ${DECAP_CMS_CORE_VERSION}`);
+  }
+
+  /**
+   * Get DOM element where app will mount.
+   */
+  function getRoot() {
+    /**
+     * Return existing root if found.
+     */
+    const existingRoot = document.getElementById(ROOT_ID);
+    if (existingRoot) {
+      return existingRoot;
+    }
+
+    /**
+     * If no existing root, create and return a new root.
+     */
+    const newRoot = document.createElement('div');
+    newRoot.id = ROOT_ID;
+    document.body.appendChild(newRoot);
+    return newRoot;
+  }
+
+  /**
+   * Dispatch config to store if received. This config will be merged into
+   * config.yml if it exists, and any portion that produces a conflict will be
+   * overwritten.
+   */
+  store.dispatch(
+    loadConfig(config, function onLoad() {
+      store.dispatch(authenticateUser());
+    }),
+  );
+
+  /**
+   * Create connected root component.
+   */
+  function Root() {
+    return (
+      <>
+        <GlobalStyles />
+        <Provider store={store}>
+          <ConnectedTranslatedApp />
+        </Provider>
+      </>
+    );
+  }
+
+  /**
+   * Render application root.
+   */
+  const root = createRoot(getRoot());
+  root.render(<Root />);
+}
+
+export default bootstrap;

package/src/components/App/App.js

@@ -0,0 +1,295 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { translate } from 'react-polyglot';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import styled from '@emotion/styled';
+import { connect } from 'react-redux';
+import { Route, Switch, Redirect } from 'react-router-dom';
+import TopBarProgress from 'react-topbar-progress-indicator';
+import { Loader, colors } from 'decap-cms-ui-default';
+
+import { loginUser, logoutUser } from '../../actions/auth';
+import { currentBackend } from '../../backend';
+import { createNewEntry } from '../../actions/collections';
+import { openMediaLibrary } from '../../actions/mediaLibrary';
+import MediaLibrary from '../MediaLibrary/MediaLibrary';
+import { Notifications } from '../UI';
+import { history } from '../../routing/history';
+import { SIMPLE, EDITORIAL_WORKFLOW } from '../../constants/publishModes';
+import Collection from '../Collection/Collection';
+import Workflow from '../Workflow/Workflow';
+import Editor from '../Editor/Editor';
+import NotFoundPage from './NotFoundPage';
+import Header from './Header';
+
+TopBarProgress.config({
+  barColors: {
+    0: colors.active,
+    '1.0': colors.active,
+  },
+  shadowBlur: 0,
+  barThickness: 2,
+});
+
+const AppMainContainer = styled.div`
+  min-width: 800px;
+  max-width: 1440px;
+  margin: 0 auto;
+`;
+
+const ErrorContainer = styled.div`
+  margin: 20px;
+`;
+
+const ErrorCodeBlock = styled.pre`
+  margin-left: 20px;
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+function getDefaultPath(collections) {
+  const first = collections.filter(collection => collection.get('hide') !== true).first();
+  if (first) {
+    return `/collections/${first.get('name')}`;
+  } else {
+    throw new Error('Could not find a non hidden collection');
+  }
+}
+
+function RouteInCollection({ collections, render, ...props }) {
+  const defaultPath = getDefaultPath(collections);
+  return (
+    <Route
+      {...props}
+      render={routeProps => {
+        const collectionExists = collections.get(routeProps.match.params.name);
+        return collectionExists ? render(routeProps) : <Redirect to={defaultPath} />;
+      }}
+    />
+  );
+}
+
+class App extends React.Component {
+  static propTypes = {
+    auth: PropTypes.object.isRequired,
+    config: PropTypes.object.isRequired,
+    collections: ImmutablePropTypes.map.isRequired,
+    loginUser: PropTypes.func.isRequired,
+    logoutUser: PropTypes.func.isRequired,
+    user: PropTypes.object,
+    isFetching: PropTypes.bool.isRequired,
+    publishMode: PropTypes.oneOf([SIMPLE, EDITORIAL_WORKFLOW]),
+    siteId: PropTypes.string,
+    useMediaLibrary: PropTypes.bool,
+    openMediaLibrary: PropTypes.func.isRequired,
+    showMediaButton: PropTypes.bool,
+    t: PropTypes.func.isRequired,
+  };
+
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(App.propTypes, this.props, 'prop', 'App');
+  }
+
+  configError(config) {
+    const t = this.props.t;
+    return (
+      <ErrorContainer>
+        <h1>{t('app.app.errorHeader')}</h1>
+        <div>
+          <strong>{t('app.app.configErrors')}:</strong>
+          <ErrorCodeBlock>{config.error}</ErrorCodeBlock>
+          <span>{t('app.app.checkConfigYml')}</span>
+        </div>
+      </ErrorContainer>
+    );
+  }
+
+  handleLogin(credentials) {
+    this.props.loginUser(credentials);
+  }
+
+  authenticating() {
+    const { auth, t } = this.props;
+    const backend = currentBackend(this.props.config);
+
+    if (backend == null) {
+      return (
+        <div>
+          <h1>{t('app.app.waitingBackend')}</h1>
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <Notifications />
+        {React.createElement(backend.authComponent(), {
+          onLogin: this.handleLogin.bind(this),
+          error: auth.error,
+          inProgress: auth.isFetching,
+          siteId: this.props.config.backend.site_domain,
+          base_url: this.props.config.backend.base_url,
+          authEndpoint: this.props.config.backend.auth_endpoint,
+          config: this.props.config,
+          clearHash: () => history.replace('/'),
+          t,
+        })}
+      </div>
+    );
+  }
+
+  handleLinkClick(event, handler, ...args) {
+    event.preventDefault();
+    handler(...args);
+  }
+
+  render() {
+    const {
+      user,
+      config,
+      collections,
+      logoutUser,
+      isFetching,
+      publishMode,
+      useMediaLibrary,
+      openMediaLibrary,
+      t,
+      showMediaButton,
+      location,
+    } = this.props;
+
+    if (config === null) {
+      return null;
+    }
+
+    if (config.error) {
+      return this.configError(config);
+    }
+
+    if (config.isFetching) {
+      return <Loader active>{t('app.app.loadingConfig')}</Loader>;
+    }
+
+    if (user == null) {
+      return this.authenticating(t);
+    }
+
+    const defaultPath = getDefaultPath(collections);
+    const hasWorkflow = publishMode === EDITORIAL_WORKFLOW;
+
+    // Work out if this is an editor route, following the same URL matching as the router.
+    // - /collections/:name/entries/*
+    // - /collections/:name/new
+    const [, base, , view] = location.pathname.split('/');
+    const isEditorRoute = base === 'collections' && (view === 'entries' || view === 'new');
+
+    return (
+      <>
+        <Notifications />
+        {!isEditorRoute && (
+          <Header
+            user={user}
+            collections={collections}
+            onCreateEntryClick={createNewEntry}
+            onLogoutClick={logoutUser}
+            openMediaLibrary={openMediaLibrary}
+            hasWorkflow={hasWorkflow}
+            displayUrl={config.display_url}
+            logoUrl={config.logo_url} // Deprecated, replaced by `logo.src`
+            logo={config.logo}
+            isTestRepo={config.backend.name === 'test-repo'}
+            showMediaButton={showMediaButton}
+          />
+        )}
+        <AppMainContainer>
+          {isFetching && <TopBarProgress />}
+          <Switch>
+            <Redirect exact from="/" to={defaultPath} />
+            <Redirect exact from="/search/" to={defaultPath} />
+            <RouteInCollection
+              exact
+              collections={collections}
+              path="/collections/:name/search/"
+              render={({ match }) => <Redirect to={`/collections/${match.params.name}`} />}
+            />
+            <Redirect
+              // This happens on Identity + Invite Only + External Provider email not matching
+              // the registered user
+              from="/error=access_denied&error_description=Signups+not+allowed+for+this+instance"
+              to={defaultPath}
+            />
+            {hasWorkflow ? <Route path="/workflow" component={Workflow} /> : null}
+            <RouteInCollection
+              exact
+              collections={collections}
+              path="/collections/:name"
+              render={props => <Collection {...props} />}
+            />
+            <RouteInCollection
+              path="/collections/:name/new"
+              collections={collections}
+              render={props => <Editor {...props} newRecord />}
+            />
+            <RouteInCollection
+              path="/collections/:name/entries/*"
+              collections={collections}
+              render={props => <Editor {...props} />}
+            />
+            <RouteInCollection
+              path="/collections/:name/search/:searchTerm"
+              collections={collections}
+              render={props => <Collection {...props} isSearchResults isSingleSearchResult />}
+            />
+            <RouteInCollection
+              collections={collections}
+              path="/collections/:name/filter/:filterTerm*"
+              render={props => <Collection {...props} />}
+            />
+            <Route
+              path="/search/:searchTerm"
+              render={props => <Collection {...props} isSearchResults />}
+            />
+            <RouteInCollection
+              path="/edit/:name/:entryName"
+              collections={collections}
+              render={({ match }) => {
+                const { name, entryName } = match.params;
+                return <Redirect to={`/collections/${name}/entries/${entryName}`} />;
+              }}
+            />
+            <Route component={NotFoundPage} />
+          </Switch>
+          {useMediaLibrary ? <MediaLibrary /> : null}
+        </AppMainContainer>
+      </>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  const { auth, config, collections, globalUI, mediaLibrary } = state;
+  const user = auth.user;
+  const isFetching = globalUI.isFetching;
+  const publishMode = config.publish_mode;
+  const useMediaLibrary = !mediaLibrary.get('externalLibrary');
+  const showMediaButton = mediaLibrary.get('showMediaButton');
+  return {
+    auth,
+    config,
+    collections,
+    user,
+    isFetching,
+    publishMode,
+    showMediaButton,
+    useMediaLibrary,
+  };
+}
+
+const mapDispatchToProps = {
+  openMediaLibrary,
+  loginUser,
+  logoutUser,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(translate()(App));

package/src/components/App/Header.js

@@ -0,0 +1,291 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { translate } from 'react-polyglot';
+import { NavLink } from 'react-router-dom';
+import {
+  Icon,
+  Dropdown,
+  DropdownItem,
+  StyledDropdownButton,
+  colors,
+  shadows,
+  buttons,
+  zIndex,
+} from 'decap-cms-ui-default';
+import { connect } from 'react-redux';
+
+import { SettingsDropdown } from '../UI';
+import { checkBackendStatus } from '../../actions/status';
+
+const styles = {
+  buttonActive: css`
+    color: ${colors.active};
+  `,
+};
+
+function AppHeader(props) {
+  return (
+    <header
+      css={css`
+        ${shadows.dropMain};
+        width: 100%;
+        background-color: ${colors.foreground};
+        z-index: ${zIndex.zIndex300};
+
+        @media (min-height: 500px) {
+          position: sticky;
+          top: 0;
+        }
+      `}
+      {...props}
+    />
+  );
+}
+
+const AppHeaderContent = styled.div`
+  display: flex;
+  flex-direction: column-reverse;
+  padding: 0 12px;
+  margin: 0 auto;
+
+  @media (min-width: 800px) {
+    max-width: 1440px;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+`;
+
+const AppHeaderButton = styled.button`
+  ${buttons.button};
+  background: none;
+  color: #7b8290;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1;
+  font-weight: 500;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 10px 10px;
+  align-items: center;
+  text-align: center;
+
+  @media (min-width: 400px) {
+    flex-direction: row;
+    gap: 4px;
+  }
+
+  @media (min-width: 500px) {
+    font-size: 16px;
+    padding: 16px 20px;
+  }
+
+  ${Icon} {
+    color: #b3b9c4;
+  }
+
+  &:hover,
+  &:active,
+  &:focus-visible {
+    ${styles.buttonActive};
+
+    ${Icon} {
+      ${styles.buttonActive};
+    }
+  }
+
+  ${props => css`
+    &.${props.activeClassName} {
+      ${styles.buttonActive};
+
+      ${Icon} {
+        ${styles.buttonActive};
+      }
+    }
+  `};
+`;
+
+const AppHeaderNavLink = AppHeaderButton.withComponent(NavLink);
+
+const AppHeaderActions = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const AppHeaderQuickNewButton = styled(StyledDropdownButton)`
+  ${buttons.button};
+  ${buttons.medium};
+  ${buttons.gray};
+  white-space: nowrap;
+  margin-right: 8px;
+
+  &:after {
+    top: 11px;
+  }
+`;
+
+const AppHeaderNavList = styled.ul`
+  display: flex;
+  margin: 0;
+  list-style: none;
+  justify-content: space-around;
+
+  @media (min-width: 800px) {
+    justify-content: flex-start;
+  }
+`;
+
+const AppHeaderLogo = styled.li`
+  display: flex;
+  align-items: center;
+
+  img {
+    padding: 12px 20px;
+    max-height: 56px;
+    max-width: 300px;
+    object-fit: contain;
+    object-position: center;
+  }
+`;
+
+class Header extends React.Component {
+  static propTypes = {
+    user: PropTypes.object.isRequired,
+    collections: ImmutablePropTypes.map.isRequired,
+    onCreateEntryClick: PropTypes.func.isRequired,
+    onLogoutClick: PropTypes.func.isRequired,
+    openMediaLibrary: PropTypes.func.isRequired,
+    hasWorkflow: PropTypes.bool.isRequired,
+    displayUrl: PropTypes.string,
+    logoUrl: PropTypes.string, // Deprecated, replaced by `logo.src`
+    logo: PropTypes.shape({
+      src: PropTypes.string.isRequired,
+      show_in_header: PropTypes.bool,
+    }),
+    isTestRepo: PropTypes.bool,
+    t: PropTypes.func.isRequired,
+    checkBackendStatus: PropTypes.func.isRequired,
+  };
+
+  intervalId;
+
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(Header.propTypes, this.props, 'prop', 'Header');
+
+    this.intervalId = setInterval(() => {
+      this.props.checkBackendStatus();
+    }, 5 * 60 * 1000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.intervalId);
+  }
+
+  handleCreatePostClick = collectionName => {
+    const { onCreateEntryClick } = this.props;
+    if (onCreateEntryClick) {
+      onCreateEntryClick(collectionName);
+    }
+  };
+
+  render() {
+    const {
+      user,
+      collections,
+      onLogoutClick,
+      openMediaLibrary,
+      hasWorkflow,
+      displayUrl,
+      logoUrl, // Deprecated, replaced by `logo.src`
+      logo,
+      isTestRepo,
+      t,
+      showMediaButton,
+    } = this.props;
+
+    const creatableCollections = collections
+      .filter(collection => collection.get('create'))
+      .toList();
+
+    const shouldShowLogo = logo?.show_in_header && logo?.src;
+
+    return (
+      <AppHeader>
+        <AppHeaderContent>
+          <nav>
+            <AppHeaderNavList>
+              {shouldShowLogo && (
+                <AppHeaderLogo>
+                  <img src={logo?.src || logoUrl} alt="Logo" />
+                </AppHeaderLogo>
+              )}
+              <li>
+                <AppHeaderNavLink
+                  to="/"
+                  activeClassName="header-link-active"
+                  isActive={(match, location) => location.pathname.startsWith('/collections/')}
+                >
+                  <Icon type="page" />
+                  {t('app.header.content')}
+                </AppHeaderNavLink>
+              </li>
+              {hasWorkflow && (
+                <li>
+                  <AppHeaderNavLink to="/workflow" activeClassName="header-link-active">
+                    <Icon type="workflow" />
+                    {t('app.header.workflow')}
+                  </AppHeaderNavLink>
+                </li>
+              )}
+              {showMediaButton && (
+                <li>
+                  <AppHeaderButton onClick={openMediaLibrary}>
+                    <Icon type="media-alt" />
+                    {t('app.header.media')}
+                  </AppHeaderButton>
+                </li>
+              )}
+            </AppHeaderNavList>
+          </nav>
+          <AppHeaderActions>
+            {creatableCollections.size > 0 && (
+              <Dropdown
+                renderButton={() => (
+                  <AppHeaderQuickNewButton> {t('app.header.quickAdd')}</AppHeaderQuickNewButton>
+                )}
+                dropdownTopOverlap="30px"
+                dropdownWidth="160px"
+                dropdownPosition="left"
+              >
+                {creatableCollections.map(collection => (
+                  <DropdownItem
+                    key={collection.get('name')}
+                    label={collection.get('label_singular') || collection.get('label')}
+                    onClick={() => this.handleCreatePostClick(collection.get('name'))}
+                  />
+                ))}
+              </Dropdown>
+            )}
+            <SettingsDropdown
+              displayUrl={displayUrl}
+              isTestRepo={isTestRepo}
+              imageUrl={user?.avatar_url}
+              onLogoutClick={onLogoutClick}
+            />
+          </AppHeaderActions>
+        </AppHeaderContent>
+      </AppHeader>
+    );
+  }
+}
+
+const mapDispatchToProps = {
+  checkBackendStatus,
+};
+
+export default connect(null, mapDispatchToProps)(translate()(Header));

package/src/components/App/NotFoundPage.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { translate } from 'react-polyglot';
+import { lengths } from 'decap-cms-ui-default';
+import PropTypes from 'prop-types';
+
+const NotFoundContainer = styled.div`
+  margin: ${lengths.pageMargin};
+`;
+
+function NotFoundPage({ t }) {
+  return (
+    <NotFoundContainer>
+      <h2>{t('app.notFoundPage.header')}</h2>
+    </NotFoundContainer>
+  );
+}
+
+NotFoundPage.propTypes = {
+  t: PropTypes.func.isRequired,
+};
+
+export default translate()(NotFoundPage);