Update images in docs

core/src/backends/git-gateway/AuthenticationPage.tsx

@@ -3,6 +3,7 @@ import { styled } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
 import React, { useCallback, useEffect, useState } from 'react';
 
+import alert from '../../components/UI/Alert';
 import AuthenticationPage from '../../components/UI/AuthenticationPage';
 import { colors } from '../../components/UI/styles';
 
@@ -56,17 +57,37 @@ const GitGatewayAuthenticationPage = ({
   }>({});
 
   useEffect(() => {
-    if (!loggedIn && window.netlifyIdentity && window.netlifyIdentity.currentUser()) {
-      onLogin(window.netlifyIdentity.currentUser());
-      window.netlifyIdentity.close();
+    try {
+      if (!loggedIn && window.netlifyIdentity && window.netlifyIdentity.currentUser()) {
+        onLogin(window.netlifyIdentity.currentUser());
+        window.netlifyIdentity.close();
+      }
+    } catch (e: unknown) {
+      console.error(e);
+      if (e instanceof Error) {
+        alert({
+          title: 'auth.errors.authTitle',
+          body: { key: 'auth.errors.authBody', options: { details: e.message } },
+        });
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleIdentityLogin = useCallback(
     (user: User) => {
-      onLogin(user);
-      window.netlifyIdentity?.close();
+      try {
+        onLogin(user);
+        window.netlifyIdentity?.close();
+      } catch (e: unknown) {
+        console.error(e);
+        if (e instanceof Error) {
+          alert({
+            title: 'auth.errors.authTitle',
+            body: { key: 'auth.errors.authBody', options: { details: e.message } },
+          });
+        }
+      }
     },
     [onLogin],
   );
@@ -92,11 +113,21 @@ const GitGatewayAuthenticationPage = ({
   useNetlifyIdentifyEvent('error', handleIdentityError);
 
   const handleIdentity = useCallback(() => {
-    const user = window.netlifyIdentity?.currentUser();
-    if (user) {
-      onLogin(user);
-    } else {
-      window.netlifyIdentity?.open();
+    try {
+      const user = window.netlifyIdentity?.currentUser();
+      if (user) {
+        onLogin(user);
+      } else {
+        window.netlifyIdentity?.open();
+      }
+    } catch (e: unknown) {
+      console.error(e);
+      if (e instanceof Error) {
+        alert({
+          title: 'auth.errors.authTitle',
+          body: { key: 'auth.errors.authBody', options: { details: e.message } },
+        });
+      }
     }
   }, [onLogin]);
 
@@ -142,7 +173,17 @@ const GitGatewayAuthenticationPage = ({
         return;
       }
 
-      onLogin(response);
+      try {
+        onLogin(response);
+      } catch (e: unknown) {
+        console.error(e);
+        if (e instanceof Error) {
+          alert({
+            title: 'auth.errors.authTitle',
+            body: { key: 'auth.errors.authBody', options: { details: e.message } },
+          });
+        }
+      }
     },
     [email, handleAuth, onLogin, password, t],
   );

core/src/backends/git-gateway/implementation.tsx

@@ -360,6 +360,7 @@ export default class GitGateway implements BackendClass {
       return { name: userData.name, login: userData.email } as User;
     });
   }
+
   async restoreUser() {
     const client = await this.getAuthClient();
     const user = client?.currentUser();

core/src/components/App/App.tsx

@@ -81,10 +81,6 @@ function EditEntityRedirect() {
   return <Navigate to={`/collections/${name}/entries/${entryName}`} />;
 }
 
-history.listen(e => {
-  console.log(e);
-});
-
 const App = ({
   auth,
   user,
@@ -116,14 +112,21 @@ const App = ({
     [loginUser],
   );
 
-  const authenticating = useCallback(() => {
+  const AuthComponent = useMemo(() => {
     if (!config.config) {
       return null;
     }
 
     const backend = currentBackend(config.config);
+    return backend?.authComponent();
+  }, [config.config]);
 
-    if (backend == null) {
+  const authenticationPage = useMemo(() => {
+    if (!config.config) {
+      return null;
+    }
+
+    if (AuthComponent == null) {
       return (
         <div>
           <h1>{t('app.app.waitingBackend')}</h1>
@@ -132,21 +135,22 @@ const App = ({
     }
 
     return (
-      <div>
-        {React.createElement(backend.authComponent(), {
-          onLogin: handleLogin,
-          error: auth.error,
-          inProgress: auth.isFetching,
-          siteId: config.config.backend.site_domain,
-          base_url: config.config.backend.base_url,
-          authEndpoint: config.config.backend.auth_endpoint,
-          config: config.config,
-          clearHash: () => history.replace('/'),
-          t,
-        })}
+      <div key="auth-page-wrapper">
+        <AuthComponent
+          key="auth-page"
+          onLogin={handleLogin}
+          error={auth.error}
+          inProgress={auth.isFetching}
+          siteId={config.config.backend.site_domain}
+          base_url={config.config.backend.base_url}
+          authEndpoint={config.config.backend.auth_endpoint}
+          config={config.config}
+          clearHash={() => history.replace('/')}
+          t={t}
+        />
       </div>
     );
-  }, [auth.error, auth.isFetching, config.config, handleLogin, t]);
+  }, [AuthComponent, auth.error, auth.isFetching, config.config, handleLogin, t]);
 
   const defaultPath = useMemo(() => getDefaultPath(collections), [collections]);
 
@@ -163,7 +167,7 @@ const App = ({
   }
 
   if (!user) {
-    return authenticating();
+    return authenticationPage;
   }
 
   return (

website/content/docs/custom-widgets.mdx

@@ -190,7 +190,7 @@ CMS.registerEditorComponent({
 
 **Result:**
 
-![youtube-widget](/img/screen shot 2018-01-05 at 4.25.07 pm.png)
+![youtube-widget](/img/youtube-widget.webp)
 
 ## Advanced field validation
 

website/content/docs/docusaurus.mdx

@@ -50,7 +50,7 @@ gh repo create my-website
 
 Don't add a license or a .gitignore. Do add an "origin" git remote.
 
-![](/img/screen-shot-2021-11-15-at-4.16.53-pm.png)
+![](/img/create-remote-repo.webp)
 
 ```bash
 # 6. Update your remote repository with your staged changes. 
@@ -68,7 +68,7 @@ git push -u origin main
 4. Choose `yarn build` for your build command.
 5. Choose `build` for your deployment directory.
 
-![](/img/screen-shot-2021-11-16-at-1.34.18-PM.png)
+![](/img/create-remote-repo.webp)
 
 Choose the default option for everything else. 
 

website/content/docs/hugo.mdx

@@ -199,48 +199,3 @@ Create a file `layouts/blog/single.html`, and put the following content in there
 ```
 
 You can see this basic template includes all the fields you've specified in your Static CMS `config.yml` file. You can access any custom front-matter fields with `.Params.<field-name>`!
-
-### Using Hugo shortcodes in the Markdown Editor
-
-Using `registerEditorComponent` we can register a block level component for the Markdown editor. You can use it to add Hugo's inbuilt shortcodes like `gist`,`youtube` and others as block components to the markdown editor.
-
-You can refer to [registering editor components](/docs/custom-widgets/#registereditorcomponent) for a getting started guide or for creating your own editor components.
-
-**Example**
-
-```javascript
-CMS.registerEditorComponent({
-    id: "gist",
-    label: "Gist",
-    fields: [{
-            title: "username",
-            label: "Github Username",
-            widget: "string"
-        },
-        {
-            title: "gid",
-            label: "Gist ID",
-            widget: "string"
-        },
-    ],
-    pattern: /^{{< gist ([a-zA-Z0-9]+) ([a-zA-Z0-9]+) >}}/,
-    fromBlock: function(match) {
-        return {
-            usertitle: match[1],
-            gid: match[2],
-        };
-    },
-    toBlock: function(obj) {
-        return `{{< gist ${obj.username} ${obj.gid} >}}`;
-    },
-    toPreview: function(obj) {
-        return '<a href="https://gist.github.com/' + obj.username + '/' + obj.id + '">gist</a>';
-    },
-});
-```
-
-**Result**
-
-![Gist](/img/hugo_shortcode_gist.png "Gist")
-
-For getting started quickly you can refer to this amazing prebuilt resource of [hugo shortcodes editor components](https://github.com/sharadcodes/hugo-shortcodes-netlify-cms)!

website/content/docs/jekyll.mdx

@@ -15,7 +15,7 @@ If you're starting a new project, the fastest route to publishing on a Jekyll we
 
 This guide will use the blog you get if you follow the [really excellent official Jekyll step by step tutorial](https://jekyllrb.com/docs/step-by-step/01-setup/) as a starting point. If you're new to Jekyll - I recommended you start by following the tutorial so you know your way around your new blog. Otherwise [you can clone this repo](https://github.com/adamwatters/jekyll-tutorial-with-netlify-cms/tree/without-cms) and checkout the `without-cms` branch.
 
-![Jekyll tutorial blog screenshot](/img/screenshot-jekyll-tutorial-blog.png?raw=true)
+![Jekyll tutorial blog screenshot](/img/screenshot-jekyll-tutorial-blog.webp)
 
 ## Add Static CMS
 

website/content/docs/releases.mdx

@@ -1,7 +1,7 @@
 ---
 group: Intro
 title: Releases
-weight: 4
+weight: 10
 ---
 
 

website/content/docs/start-with-a-template.mdx

@@ -232,9 +232,9 @@ After clicking one of those buttons, authenticate with GitHub or GitLab and choo
 ## Access Static CMS
 
 1. The template deploy process sends you an invitation to your new site, sent from `no-reply@netlify.com`.
-   ![Sample email subject line: You've been invited to join radiologist-amanda-53841.netlify.com](/img/email-subject.png?raw=true)
+   ![Sample email subject line: You've been invited to join radiologist-amanda-53841.netlify.com](/img/email-subject.webp)
 2. Wait for the deployment to complete, then click the link to accept the invite. Your site will open with a prompt to create a password.
-   !["Complete your signup" modal on the Kaldi coffee site](/img/create-password.png?raw=true)
+   !["Complete your signup" modal on the Kaldi coffee site](/img/create-password.webp)
 3. Enter a password, sign in, and you'll go to the CMS. (For future visits, you can go straight to `<yoursiteaddress.com>/admin/`.)
 
 Try adding and editing posts, or changing the content of the Products page. When you save, the changes are pushed immediately to your Git repository, triggering a build on Netlify, and updating the content on your site. Check out the configuration code by visiting your site repo.

website/content/docs/widget-markdown.mdx

@@ -25,6 +25,6 @@ The markdown widget provides a full fledged text editor allowing users to format
 
 This would render as:
 
-![Markdown widget example](/img/widgets-markdown.png)
+![Markdown widget example](/img/widgets-markdown.webp)
 
 *Please note:* The markdown widget outputs a raw markdown string. Your static site generator may or may not render the markdown to HTML automatically. Consult with your static site generator's documentation for more information about rendering markdown.

website/src/components/docs/DocsContent.tsx

@@ -5,6 +5,7 @@ const DocsContent = styled('div')(
     color: ${theme.palette.text.primary};
     font-weight: 200;
     width: 100%;
+    max-width: 900px;
     padding: 0 40px 0 56px;
     display: flex;
     flex-direction: column;