feat: introduce default home, 404 and error pages (#336)

packages/demo-site/package.json

@@ -5,6 +5,8 @@
   "dependencies": {
     "apollo-link-batch-http": "^1.2.3",
     "demo-theme": "0.0.0",
+    "invariant": "^2.2.4",
+    "react-helmet": "^5.2.0",
     "react-hot-loader": "^4.3.5",
     "webiny-app": "0.0.0",
     "webiny-app-cms": "0.0.0",

packages/demo-site/src/App.js

@@ -2,19 +2,27 @@
 import { hot } from "react-hot-loader";
 import React from "react";
 import { Webiny, Router } from "webiny-app";
-// import { addPlugin } from "webiny-plugins";
 import { CmsProvider } from "webiny-app-cms/context";
-import { app as cmsApp} from "webiny-app-cms/site";
+import { app as cmsApp } from "webiny-app-cms/site";
 import myTheme from "demo-theme";
 import config from "./config";
+import { GenericNotFoundPage, GenericErrorPage } from "./cms";
 
 cmsApp();
 
 const App = () => {
     return (
         <Webiny config={config}>
             {({ router }) => (
-                <CmsProvider theme={myTheme}>
+                <CmsProvider
+                    theme={myTheme}
+                    defaults={{
+                        pages: {
+                            notFound: GenericNotFoundPage,
+                            error: GenericErrorPage
+                        }
+                    }}
+                >
                     <Router router={router} />
                 </CmsProvider>
             )}

packages/demo-site/src/cms/GenericErrorPage.js

@@ -0,0 +1,17 @@
+// @flow
+import React from "react";
+import { Helmet } from "react-helmet";
+
+export default function GenericErrorPage() {
+    return (
+        <div className="webiny-cms-page">
+            <>
+                <Helmet>
+                    <meta charSet="utf-8" />
+                    <title>An error occurred.</title>
+                </Helmet>
+                <div>An error occurred.</div>
+            </>
+        </div>
+    );
+}

packages/demo-site/src/cms/GenericNotFoundPage.js

@@ -0,0 +1,17 @@
+// @flow
+import React from "react";
+import { Helmet } from "react-helmet";
+
+export default function GenericErrorPage() {
+    return (
+        <div>
+            <>
+                <Helmet>
+                    <meta charSet="utf-8" />
+                    <title>Page not found.</title>
+                </Helmet>
+                <div>Page not found.</div>
+            </>
+        </div>
+    );
+}

packages/demo-site/src/cms/index.js

@@ -0,0 +1,3 @@
+// @flow
+export { default as GenericErrorPage } from "./GenericErrorPage";
+export { default as GenericNotFoundPage } from "./GenericNotFoundPage";

packages/webiny-api-cms/src/entities/CmsSettings.entity.js

@@ -0,0 +1,40 @@
+// @flow
+import { settingsFactory } from "webiny-api/entities";
+
+import { Model } from "webiny-model";
+import { EntityModel } from "webiny-entity";
+
+const cmsSettingsPagesModelFactory = (settings, { cms: { entities } }) => {
+    return class CmsSettingsModel extends EntityModel {
+        constructor() {
+            super();
+            this.setParentEntity(settings);
+            this.attr("home").entity(entities.Page);
+            this.attr("notFound").entity(entities.Page);
+            this.attr("error").entity(entities.Page);
+        }
+    };
+};
+
+const cmsSettingsModelFactory = (...args) => {
+    return class CmsSettingsModel extends Model {
+        constructor() {
+            super();
+            this.attr("pages").model(cmsSettingsPagesModelFactory(...args));
+        }
+    };
+};
+
+export const cmsSettingsFactory = (...args) => {
+    return class CmsSettings extends settingsFactory(...args) {
+        static key = "cms";
+
+        data: Object;
+        load: Function;
+
+        constructor() {
+            super();
+            this.attr("data").model(cmsSettingsModelFactory(this, ...args));
+        }
+    };
+};

packages/webiny-api-cms/src/entities/index.js

@@ -5,3 +5,4 @@ export { menuFactory } from "webiny-api-cms/entities/Menu.entity";
 export { pageFactory } from "webiny-api-cms/entities/Page.entity";
 export { tagFactory } from "webiny-api-cms/entities/Tag.entity";
 export { tags2PagesFactory } from "webiny-api-cms/entities/Tags2Pages.entity";
+export { cmsSettingsFactory } from "webiny-api-cms/entities/CmsSettings.entity";

packages/webiny-api-cms/src/install/importData.js

@@ -1,9 +1,10 @@
 // @flow
 import setupEntities from "./setupEntities";
+import createDefaultPages from "./importData/createDefaultPages";
 
 export default async (context: Object) => {
     setupEntities(context);
-    const { Category, Element, Page, Tag, Menu } = context.cms.entities;
+    const { Category, Element, Tag, Menu } = context.cms.entities;
 
     const menu = new Menu();
     menu.populate({
@@ -34,31 +35,32 @@ export default async (context: Object) => {
         await t.save();
     });
 
-    const blogCategory = new Category();
-    blogCategory.populate({
-        name: "Blog",
-        slug: "blog",
-        url: "/blog/",
-        layout: "blog"
-    });
-    await blogCategory.save();
+    const categories = {
+        blog: new Category(),
+        static: new Category()
+    };
 
-    const staticCategory = new Category();
-    staticCategory.populate({
-        name: "Static",
-        slug: "static",
-        url: "/",
-        layout: "static"
-    });
-    await staticCategory.save();
+    await categories.blog
+        .populate({
+            name: "Blog",
+            slug: "blog",
+            url: "/blog/",
+            layout: "blog"
+        })
+        .save();
 
-    const page = new Page();
-    page.populate({
-        title: "Demo blog post",
-        category: blogCategory
-    });
-    await page.save();
+    await categories.static
+        .populate({
+            name: "Static",
+            slug: "static",
+            url: "/",
+            layout: "static"
+        })
+        .save();
+
+    await createDefaultPages(context, { categories });
 
+    // Create sample element.
     const element = new Element();
     element.populate({
         name: "Custom text",

packages/webiny-api-cms/src/install/importData/createDefaultPages.js

@@ -0,0 +1,49 @@
+// @flow
+import { notFound, homepage, error } from "./staticPages";
+
+const createDefaultPage = async ({ page, data, category }) => {
+    page.populate({ ...data, category });
+    await page.save();
+
+    page.published = true;
+    await page.save();
+
+    return page;
+};
+
+const createDefaultPages = async (context: Object, { categories }: Object) => {
+    const { Page, CmsSettings } = context.cms.entities;
+
+    // Create default pages - demo blog, error, not found and homepage and also assign to settings.
+    const demoBlogPage = new Page();
+    demoBlogPage.populate({
+        title: "Demo blog post",
+        category: categories.blog
+    });
+    await demoBlogPage.save();
+
+    const cmsSettings = new CmsSettings();
+    cmsSettings.data = {
+        pages: {
+            home: await createDefaultPage({
+                page: new Page(),
+                data: homepage,
+                category: categories.static
+            }),
+            error: await createDefaultPage({
+                page: new Page(),
+                data: error,
+                category: categories.static
+            }),
+            notFound: await createDefaultPage({
+                page: new Page(),
+                data: notFound,
+                category: categories.static
+            })
+        }
+    };
+
+    await cmsSettings.save();
+};
+
+export default createDefaultPages;

packages/webiny-api-cms/src/install/importData/staticPages/error.js

@@ -0,0 +1,80 @@
+// @flow
+export default {
+    title: "Error Page",
+    url: "/error",
+    content: {
+        id: "P3NNeXWAk",
+        data: {},
+        settings: {},
+        elements: [
+            {
+                id: "STaGA7c5Jt",
+                data: {},
+                settings: {},
+                elements: [
+                    {
+                        id: "E0j-dyOuLN",
+                        data: {},
+                        settings: { style: { margin: "15px", padding: "15px" } },
+                        elements: [
+                            {
+                                id: "iwpwZYraMw",
+                                data: { width: 100 },
+                                settings: { style: { margin: "20px" } },
+                                elements: [
+                                    {
+                                        id: "zACl76J1b",
+                                        data: {
+                                            text: {
+                                                object: "value",
+                                                document: {
+                                                    object: "document",
+                                                    data: {},
+                                                    nodes: [
+                                                        {
+                                                            object: "block",
+                                                            type: "paragraph",
+                                                            data: { align: "center" },
+                                                            nodes: [
+                                                                {
+                                                                    object: "text",
+                                                                    leaves: [
+                                                                        {
+                                                                            object: "leaf",
+                                                                            text:
+                                                                                "Woops, something went wrong! :(",
+                                                                            marks: []
+                                                                        }
+                                                                    ]
+                                                                }
+                                                            ]
+                                                        }
+                                                    ]
+                                                }
+                                            }
+                                        },
+                                        settings: { style: { padding: "20px" } },
+                                        elements: [],
+                                        path: "0.0.0.0.0",
+                                        type: "cms-element-text"
+                                    }
+                                ],
+                                path: "0.0.0.0",
+                                type: "cms-element-column"
+                            }
+                        ],
+                        path: "0.0.0",
+                        type: "cms-element-row"
+                    }
+                ],
+                path: "0.0",
+                type: "cms-element-block"
+            }
+        ],
+        path: "0",
+        type: "cms-element-document"
+    },
+    settings: {
+        general: { layout: "static" }
+    }
+};