@evershop/evershop 1.0.0-beta

package/src/modules/cms/components/admin/navigation/DashboardMenuItem.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types'
+import React from 'react';
+import MenuItem from '../NavigationItem';
+import Icon from '@heroicons/react/solid/esm/HomeIcon';
+
+export default function DashboardMenuItem({ url }) {
+  return <MenuItem Icon={Icon} title="Dashboard" url={url} />;
+}
+
+DashboardMenuItem.propTypes = {
+  url: PropTypes.string.isRequired
+}

package/src/modules/cms/components/admin/navigation/PagesMenuItem.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types'
+import React from 'react';
+import MenuItem from '../NavigationItem';
+import Icon from '@heroicons/react/solid/esm/DocumentIcon';
+
+export default function PagesMenuItem({ url }) {
+  return <MenuItem Icon={Icon} title="Pages" url={url} />;
+}
+
+PagesMenuItem.propTypes = {
+  url: PropTypes.string.isRequired
+}

package/src/modules/cms/components/frontStore/Button.js

@@ -0,0 +1,4 @@
+import Button from '../../../../lib/components/form/Button';
+import './Button.scss';
+
+export default Button;

package/src/modules/cms/components/frontStore/Button.scss

@@ -0,0 +1,67 @@
+.button {
+    display: inline-block;
+    position: relative;
+    border: 1px solid rgba(186, 191, 195, 1);
+    border-radius: 3px;
+    padding: 0.5rem 1.5rem;
+    font-weight: 600;
+    color: inherit;
+    background-color: white;
+    border-top-color: rgba(201, 204, 207, 1);
+    border-bottom-color: rgba(186, 191, 196, 1);
+    &:hover {
+        text-decoration: none;
+        background-color: rgba(201, 204, 207, 0.05);
+    }
+    &.primary {
+        background-color: var(--primary);
+        border: 0;
+        color: white;
+        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
+        &:hover {
+            background-color: #606060;
+        }
+    }
+    &.critical {
+        background-color: var(--critical);
+        border: 0;
+        color: white;
+        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
+        &:hover {
+            background-color: #bc2200;
+        }
+    }
+    &.outline.interactive {
+        border-color: var(--interactive);
+        color: var(--interactive);
+        &:hover {
+            background-color: rgba(var(--interactive), 0.05);
+        }
+    }
+    &.outline.critical {
+        background-color: transparent;
+        box-shadow: none;
+        border: 1px solid;
+        border-color: var(--critical);
+        color: var(--critical);
+        &:hover {
+            background-color: #fff4f4;
+        }
+    }
+    &.loading {
+        background-color: var(--divider);
+        &:hover {
+            background-color: var(--divider);
+        }
+        span {
+            opacity: 0;
+        }
+        svg {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            margin-top: -1rem;
+            margin-left: -1rem;
+        }
+    }
+}

package/src/modules/cms/components/frontStore/MetaDescription.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Meta from '../../../../lib/components/Meta';
+import { useAppState } from '../../../../lib/context/app';
+import { get } from '../../../../lib/util/get';
+
+export default function MetaDescription() {
+  const description = get(useAppState(), 'metaDescription', '');
+
+  return <Meta name="description" content={description} />;
+}

package/src/modules/cms/components/frontStore/MetaTitle.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Title from '../../../../lib/components/Title';
+import { get } from '../../../../lib/util/get';
+import { useAppState } from '../../../../lib/context/app';
+
+export default function MetaTitle() {
+  const title = get(useAppState(), 'metaTitle');
+
+  return <Title title={title} />;
+}

package/src/modules/cms/graphql/types/CmsPage/CmsPage.graphql

@@ -0,0 +1,25 @@
+type CmsPage {
+  cmsPageId: Int
+  layout: String!
+  status: Int!
+  urlKey: String!
+  name: String!
+  content: String!
+  metaTitle: String
+  metaKeywords: String
+  metaDescription: String
+  url: String!
+  editUrl: String!
+}
+
+type CmsPageCollection {
+  items: [CmsPage]
+  currentPage: Int!
+  total: Int!
+  currentFilters: [Filter]
+}
+
+extend type Query {
+  cmsPage(id: Int): CmsPage,
+  cmsPages(filters: [FilterInput]): CmsPageCollection
+}

package/src/modules/cms/graphql/types/CmsPage/CmsPage.resolvers.js

@@ -0,0 +1,95 @@
+const { select } = require("@evershop/mysql-query-builder");
+const { buildUrl } = require("../../../../../lib/router/buildUrl");
+const { camelCase } = require("../../../../../lib/util/camelCase");
+
+module.exports = {
+  Query: {
+    cmsPage: async (root, { id }, { pool, tokenPayload }) => {
+      const { admin } = tokenPayload;
+      const query = select()
+        .from('cms_page');
+      query.leftJoin('cms_page_description')
+        .on('cms_page.`cms_page_id`', '=', 'cms_page_description.`cms_page_description_cms_page_id`');
+      query.where('cms_page_id', '=', id);
+      // if (admin !== true) {
+      //   query.where('cms_page.`status`', '=', 1);
+      // }
+
+      const page = await query.load(pool);
+      return page ? camelCase(page) : null;
+    },
+    cmsPages: async (_, { filters = [] }, { pool }) => {
+      const query = select().from('cms_page');
+      query.leftJoin('cms_page_description')
+        .on('cms_page.`cms_page_id`', '=', 'cms_page_description.`cms_page_description_cms_page_id`');
+      const currentFilters = [];
+
+      // Attribute filters
+      filters.forEach((filter) => {
+        if (filter.key === 'name') {
+          query.andWhere('cms_page_description.`name`', 'LIKE', `%${filter.value}%`);
+          currentFilters.push({
+            key: 'name',
+            operation: '=',
+            value: filter.value
+          });
+        }
+        if (filter.key === 'status') {
+          query.andWhere('cms_page.`status`', '=', filter.value);
+          currentFilters.push({
+            key: 'status',
+            operation: '=',
+            value: filter.value
+          });
+        }
+      })
+
+      const sortBy = filters.find((f) => f.key === 'sortBy');
+      const sortOrder = filters.find((f) => f.key === 'sortOrder' && ['ASC', 'DESC'].includes(f.value)) || { value: 'ASC' };
+      if (sortBy && sortBy.value === 'name') {
+        query.orderBy('cms_page_description.`name`', sortOrder.value);
+        currentFilters.push({
+          key: 'sortBy',
+          operation: '=',
+          value: sortBy.value
+        });
+      } else {
+        query.orderBy('cms_page.`cms_page_id`', "DESC");
+      };
+
+      if (sortOrder.key) {
+        currentFilters.push({
+          key: 'sortOrder',
+          operation: '=',
+          value: sortOrder.value
+        });
+      }
+      // Clone the main query for getting total right before doing the paging
+      const cloneQuery = query.clone();
+      cloneQuery.select('COUNT(cms_page.`cms_page_id`)', 'total');
+      // Paging
+      const page = filters.find((f) => f.key === 'page') || { value: 1 };
+      const limit = filters.find((f) => f.key === 'limit') || { value: 20 };// TODO: Get from config
+      currentFilters.push({
+        key: 'page',
+        operation: '=',
+        value: page.value
+      });
+      currentFilters.push({
+        key: 'limit',
+        operation: '=',
+        value: limit.value
+      });
+      query.limit((page.value - 1) * parseInt(limit.value), parseInt(limit.value));
+      return {
+        items: (await query.execute(pool)).map(row => camelCase(row)),
+        total: (await cloneQuery.load(pool))['total'],
+        currentFilters: currentFilters,
+      }
+    }
+  },
+  CmsPage: {
+    url: ({ urlKey }) => buildUrl('cmsPageView', { url_key: urlKey }),
+    editUrl: ({ cmsPageId }) => buildUrl('cmsPageEdit', { id: cmsPageId })
+  }
+}

package/src/modules/cms/graphql/types/Menu/Menu.graphql

@@ -0,0 +1,13 @@
+type MenuItem {
+  name: String!
+  url: String!
+  children: [MenuItem]
+}
+
+type Menu {
+  items: [MenuItem]
+}
+
+extend type Query {
+  menu: Menu
+}

package/src/modules/cms/graphql/types/Menu/Menu.resolvers.js

@@ -0,0 +1,22 @@
+const { select } = require("@evershop/mysql-query-builder");
+const { buildUrl } = require("../../../../../lib/router/buildUrl");
+
+module.exports = {
+  Query: {
+    menu: async (root, { id }, { pool }) => {
+      const query = select('name')
+        .select('url_key')
+        .from('category', 'cat');
+      query.leftJoin('category_description', 'des')
+        .on('cat.`category_id`', '=', 'des.`category_description_category_id`');
+      query.where('cat.`status`', '=', 1).and('cat.`include_in_nav`', '=', 1);
+
+      const items = (await query.execute(pool)).map((i) => ({
+        name: i.name,
+        url: buildUrl('categoryView', { url_key: i.url_key })
+      }));
+
+      return { items };
+    }
+  }
+}

package/src/modules/cms/graphql/types/PageInfo/PageInfo.graphql

@@ -0,0 +1,9 @@
+type PageInfo {
+  url: String!
+  title: String!
+  description: String!
+}
+
+extend type Query {
+  pageInfo: PageInfo
+}

package/src/modules/cms/graphql/types/PageInfo/PageInfo.resolvers.js

@@ -0,0 +1,14 @@
+const { get } = require("../../../../../lib/util/get")
+
+module.exports = {
+  Query: {
+    pageInfo: (root, args, context) => { // TODO To be updated, API should be stateless
+      return {
+        url: get(context, "currentUrl"),
+        title: get(context, "pageInfo.title", ""),
+        description: get(context, "pageInfo.description", ""),
+        keywords: get(context, "pageInfo.keywords", "")
+      }
+    }
+  }
+}

package/src/modules/cms/migration/Version-1.0.0.js

@@ -0,0 +1,30 @@
+const { execute } = require('@evershop/mysql-query-builder');
+const { pool } = require('../../../lib/mysql/connection');
+
+// eslint-disable-next-line no-multi-assign
+module.exports = exports = async () => {
+  await execute(pool, `CREATE TABLE \`cms_page\` (
+  \`cms_page_id\` int(10) unsigned NOT NULL AUTO_INCREMENT,
+  \`layout\` varchar(255) NOT NULL,
+  \`status\` smallint(6) DEFAULT NULL,
+  \`created_at\` datetime DEFAULT NULL,
+  \`updated_at\` datetime DEFAULT NULL ON UPDATE current_timestamp(),
+  PRIMARY KEY (\`cms_page_id\`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Cms page';
+`);
+
+  await execute(pool, `CREATE TABLE \`cms_page_description\` (
+  \`cms_page_description_id\` int(10) unsigned NOT NULL AUTO_INCREMENT,
+  \`cms_page_description_cms_page_id\` int(10) unsigned DEFAULT NULL,
+  \`url_key\` varchar(255) NOT NULL,
+  \`name\` text NOT NULL,
+  \`content\` longtext DEFAULT NULL,
+  \`meta_title\` varchar(255) DEFAULT NULL,
+  \`meta_keywords\` varchar(255) DEFAULT NULL,
+  \`meta_description\` text DEFAULT NULL,
+  PRIMARY KEY (\`cms_page_description_id\`),
+  UNIQUE KEY \`PAGE_ID_UNIQUE\` (\`cms_page_description_cms_page_id\`),
+  CONSTRAINT \`FK_CMS_PAGE_DESCRIPTION\` FOREIGN KEY (\`cms_page_description_cms_page_id\`) REFERENCES \`cms_page\` (\`cms_page_id\`) ON DELETE CASCADE ON UPDATE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Cms page description';
+`);
+};

package/src/modules/cms/pages/admin/adminNotFound/Meta.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types'
+import React from 'react';
+import Meta from '../../../../../lib/components/Meta';
+import Title from '../../../../../lib/components/Title';
+
+export default function SeoMeta() {
+  return <>
+    <Title title={'Page Not Found'} />
+    <Meta name="description" content={'Page Not Found'} />
+  </>
+}
+
+SeoMeta.propTypes = {
+  description: PropTypes.any,
+  title: PropTypes.any
+}
+
+export const layout = {
+  areaId: 'head',
+  sortOrder: 1
+}
+

package/src/modules/cms/pages/admin/adminNotFound/NotFound.js

@@ -0,0 +1,64 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Area from '../../../../../lib/components/Area';
+import Button from '../../../../../lib/components/form/Button';
+
+function Name() {
+  return <h1 className="page-name text-center mt-25 mb-15">404 Page Not Found</h1>;
+}
+
+function Content({ dashboardUrl }) {
+  return (
+    <div className="page-content">
+      <div className="text-center">The page you requested does not exist.</div>
+      <div className="mt-2 text-center">
+        <Button title="Back To Dashboard" url={dashboardUrl} outline />
+      </div>
+    </div>
+  );
+}
+
+Content.propTypes = {
+  dashboardUrl: PropTypes.string.isRequired
+};
+
+export default function NotFound({ dashboardUrl }) {
+  return (
+    <div className="page-width mt-25">
+      <div className="pt-15">
+        <Area
+          id="notfound-page"
+          coreComponents={[
+            {
+              component: { default: Name },
+              props: {},
+              sortOrder: 10,
+              id: 'notfound-page-title'
+            },
+            {
+              component: { default: Content },
+              props: { dashboardUrl },
+              sortOrder: 20,
+              id: 'notfound-page-content'
+            }
+          ]}
+        />
+      </div>
+    </div>
+  );
+}
+
+NotFound.propTypes = {
+  dashboardUrl: PropTypes.string.isRequired
+};
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    dashboardUrl: url(routeId: "dashboard")
+  }
+`

package/src/modules/cms/pages/admin/adminNotFound/route

@@ -0,0 +1,2 @@
+GET
+/notfound

package/src/modules/cms/pages/admin/adminStaticAsset/route

@@ -0,0 +1,2 @@
+GET
+/assets/*

package/src/modules/cms/pages/admin/adminStaticAsset/staticAssets.js

@@ -0,0 +1,5 @@
+const staticMiddleware = require('../../../../../lib/middlewares/static');
+
+module.exports = (request, response, stack, next) => {
+  staticMiddleware(request, response, next);
+};

package/src/modules/cms/pages/admin/all/CmsMenuGroup.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import NavigationItemGroup from '../../../components/admin/NavigationItemGroup';
+import Icon from '@heroicons/react/solid/esm/DocumentIcon';
+
+export default function CmsMenuGroup({ cmsPageGrid }) {
+  return <NavigationItemGroup
+    id="cmsMenuGroup"
+    name="CMS"
+    items={[
+      {
+        Icon: Icon,
+        url: cmsPageGrid,
+        title: "Pages"
+      }
+    ]}
+  />
+}
+
+export const layout = {
+  areaId: 'adminMenu',
+  sortOrder: 50
+}
+
+export const query = `
+  query Query {
+    cmsPageGrid: url(routeId:"cmsPageGrid")
+  }
+`

package/src/modules/cms/pages/admin/all/Layout.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Area from '../../../../../lib/components/Area';
+import './Layout.scss';
+import './tailwind.scss';
+
+export default function AdminLayout() {
+  return (
+    <>
+      <div className="header">
+        <Area id="header" noOuter />
+      </div>
+      <div className="content-wrapper">
+        <div className="admin-navigation">
+          <Area id="adminNavigation" noOuter />
+        </div>
+        <div className="main-content">
+          <Area id="content" className="main-content-inner" />
+          <div className="footer">
+            <div className="copyright"><span>Copyright © 2021 EverShop</span></div>
+            <div className="version"><span>Version 1.0 dev</span></div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export const layout = {
+  areaId: 'body',
+  sortOrder: 10
+}

package/src/modules/cms/pages/admin/all/Layout.scss

@@ -0,0 +1,90 @@
+:root {
+    --primary: #008060;
+    --secondary: #111213;
+    --surface: #111213;
+    --onSurface: #111213;
+    --interactive: #2c6ecb;
+    --critical: #d72c0d;
+    --warning: #ffc453;
+    --highlight: #5bcdda;
+    --success: #008060;
+    --decorative: #ffc96b;
+    --border: #8c9196;
+    --background: #f6f6f7fc;
+    --icon: #5c5f62;
+    --textSubdued: #6d7175;
+    --divider: #e1e3e5;
+    --text: #202223;
+    --formFieldBorder: #c9cccf;
+    --formFieldBorderShadow: #aeb4b9;
+}
+
+html {
+    font-size: 62.5%;
+}
+body {
+    font-size: 1.4rem;
+    color: #202223;
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+    td,
+    th {
+        border: 1px solid var(--divider);
+        padding: 0.5rem;
+        text-align: left;
+    }
+    th {
+        vertical-align: top;
+    }
+    &.listing {
+        td,
+        th {
+            border-left: 0;
+            border-right: 0;
+            padding: 1rem;
+        }
+        th {
+            border: 0;
+            padding-top: 2rem;
+            padding-bottom: 2rem;
+        }
+    }
+}
+#app {
+    background-color: rgba(246, 246, 247, .9882352941);
+}
+.header {
+    height: 5.6rem;
+    width: 100%;
+    padding: 0 1rem;
+    box-sizing: border-box;
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: #fff;
+    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.15);
+    z-index: 100;
+}
+.content-wrapper {
+    margin-top: 5.6rem;
+    min-height: 100vh;
+    .main-content {
+        overflow: hidden;
+        margin-left: 24rem;
+        .main-content-inner {
+            padding: 2rem 3rem;
+            min-height: 100vh;
+        }
+    }
+}
+.footer {
+    padding-left: 3rem;
+    margin-top: 2rem;
+    color: var(--border);
+    padding-bottom: 1rem;
+    border-top: 1px solid var(--divider);
+    padding-top: 1rem;
+}

package/src/modules/cms/pages/admin/all/Logo.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import './Logo.scss';
+
+export default function Logo({ dashboardUrl }) {
+  return (
+    <div className="logo">
+      <a href={dashboardUrl}>
+        <svg width="436" height="120" viewBox="0 0 436 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M30.432 96.96C24.992 96.96 20.256 95.84 16.224 93.6C12.256 91.296 9.184 88.192 7.008 84.288C4.896 80.384 3.84 75.968 3.84 71.04C3.84 65.28 4.992 60.384 7.296 56.352C9.664 52.256 12.736 49.12 16.512 46.944C20.288 44.768 24.288 43.68 28.512 43.68C31.776 43.68 34.848 44.352 37.728 45.696C40.672 47.04 43.264 48.896 45.504 51.264C47.744 53.568 49.504 56.256 50.784 59.328C52.128 62.4 52.8 65.664 52.8 69.12C52.736 70.656 52.128 71.904 50.976 72.864C49.824 73.824 48.48 74.304 46.944 74.304H10.272L7.392 64.704H42.624L40.512 66.624V64.032C40.384 62.176 39.712 60.512 38.496 59.04C37.344 57.568 35.872 56.416 34.08 55.584C32.352 54.688 30.496 54.24 28.512 54.24C26.592 54.24 24.8 54.496 23.136 55.008C21.472 55.52 20.032 56.384 18.816 57.6C17.6 58.816 16.64 60.448 15.936 62.496C15.232 64.544 14.88 67.136 14.88 70.272C14.88 73.728 15.584 76.672 16.992 79.104C18.464 81.472 20.32 83.296 22.56 84.576C24.864 85.792 27.296 86.4 29.856 86.4C32.224 86.4 34.112 86.208 35.52 85.824C36.928 85.44 38.048 84.992 38.88 84.48C39.776 83.904 40.576 83.424 41.28 83.04C42.432 82.464 43.52 82.176 44.544 82.176C45.952 82.176 47.104 82.656 48 83.616C48.96 84.576 49.44 85.696 49.44 86.976C49.44 88.704 48.544 90.272 46.752 91.68C45.088 93.088 42.752 94.336 39.744 95.424C36.736 96.448 33.632 96.96 30.432 96.96ZM59.9003 44.64C61.1163 44.64 62.2363 44.96 63.2603 45.6C64.2843 46.176 65.0523 47.072 65.5643 48.288L79.6763 80.544L77.5643 81.504L91.9643 48.384C93.0523 45.824 94.7483 44.608 97.0523 44.736C98.6523 44.736 99.9323 45.248 100.892 46.272C101.916 47.232 102.428 48.448 102.428 49.92C102.428 50.368 102.332 50.848 102.14 51.36C102.012 51.872 101.852 52.352 101.66 52.8L83.7083 92.352C82.6843 94.656 81.0523 95.872 78.8123 96C77.5963 96.192 76.4123 95.968 75.2603 95.328C74.1723 94.688 73.3403 93.696 72.7643 92.352L54.9083 52.8C54.7803 52.48 54.6203 52.064 54.4283 51.552C54.3003 51.04 54.2363 50.432 54.2363 49.728C54.2363 48.576 54.7483 47.456 55.7723 46.368C56.7963 45.216 58.1723 44.64 59.9003 44.64ZM130.426 96.96C124.986 96.96 120.25 95.84 116.218 93.6C112.25 91.296 109.178 88.192 107.002 84.288C104.89 80.384 103.834 75.968 103.834 71.04C103.834 65.28 104.986 60.384 107.29 56.352C109.658 52.256 112.73 49.12 116.506 46.944C120.282 44.768 124.282 43.68 128.506 43.68C131.77 43.68 134.842 44.352 137.722 45.696C140.666 47.04 143.258 48.896 145.498 51.264C147.738 53.568 149.498 56.256 150.778 59.328C152.122 62.4 152.794 65.664 152.794 69.12C152.73 70.656 152.122 71.904 150.97 72.864C149.818 73.824 148.474 74.304 146.938 74.304H110.266L107.386 64.704H142.618L140.506 66.624V64.032C140.378 62.176 139.706 60.512 138.49 59.04C137.338 57.568 135.866 56.416 134.074 55.584C132.346 54.688 130.49 54.24 128.506 54.24C126.586 54.24 124.794 54.496 123.13 55.008C121.466 55.52 120.026 56.384 118.81 57.6C117.594 58.816 116.634 60.448 115.93 62.496C115.226 64.544 114.874 67.136 114.874 70.272C114.874 73.728 115.578 76.672 116.986 79.104C118.458 81.472 120.314 83.296 122.554 84.576C124.858 85.792 127.29 86.4 129.85 86.4C132.218 86.4 134.106 86.208 135.514 85.824C136.922 85.44 138.042 84.992 138.874 84.48C139.77 83.904 140.57 83.424 141.274 83.04C142.426 82.464 143.514 82.176 144.538 82.176C145.946 82.176 147.098 82.656 147.994 83.616C148.954 84.576 149.434 85.696 149.434 86.976C149.434 88.704 148.538 90.272 146.746 91.68C145.082 93.088 142.746 94.336 139.738 95.424C136.73 96.448 133.626 96.96 130.426 96.96ZM163.819 96C162.155 96 160.779 95.456 159.691 94.368C158.603 93.216 158.059 91.808 158.059 90.144V50.496C158.059 48.832 158.603 47.456 159.691 46.368C160.779 45.216 162.155 44.64 163.819 44.64C165.483 44.64 166.859 45.216 167.947 46.368C169.035 47.456 169.579 48.832 169.579 50.496V59.52L168.907 53.088C169.611 51.552 170.507 50.208 171.595 49.056C172.747 47.84 174.027 46.848 175.435 46.08C176.843 45.248 178.347 44.64 179.947 44.256C181.547 43.872 183.147 43.68 184.747 43.68C186.667 43.68 188.267 44.224 189.547 45.312C190.891 46.4 191.563 47.68 191.563 49.152C191.563 51.264 191.019 52.8 189.931 53.76C188.843 54.656 187.659 55.104 186.379 55.104C185.163 55.104 184.043 54.88 183.019 54.432C182.059 53.984 180.939 53.76 179.659 53.76C178.507 53.76 177.323 54.048 176.107 54.624C174.955 55.136 173.867 55.968 172.843 57.12C171.883 58.272 171.083 59.712 170.443 61.44C169.867 63.104 169.579 65.088 169.579 67.392V90.144C169.579 91.808 169.035 93.216 167.947 94.368C166.859 95.456 165.483 96 163.819 96ZM217.444 96.96C212.964 96.96 208.932 96.416 205.348 95.328C201.764 94.176 198.34 92.192 195.076 89.376C194.244 88.672 193.604 87.872 193.156 86.976C192.708 86.08 192.484 85.184 192.484 84.288C192.484 82.816 192.996 81.536 194.02 80.448C195.108 79.296 196.452 78.72 198.052 78.72C199.268 78.72 200.356 79.104 201.316 79.872C203.748 81.856 206.148 83.36 208.516 84.384C210.948 85.408 213.924 85.92 217.444 85.92C219.812 85.92 221.988 85.568 223.972 84.864C225.956 84.096 227.556 83.104 228.772 81.888C229.988 80.608 230.596 79.168 230.596 77.568C230.596 75.648 230.02 74.016 228.868 72.672C227.716 71.328 225.956 70.208 223.588 69.312C221.22 68.352 218.212 67.616 214.564 67.104C211.108 66.592 208.068 65.824 205.444 64.8C202.82 63.712 200.612 62.368 198.82 60.768C197.092 59.104 195.78 57.184 194.884 55.008C193.988 52.768 193.54 50.272 193.54 47.52C193.54 43.36 194.596 39.808 196.708 36.864C198.884 33.92 201.796 31.68 205.444 30.144C209.092 28.608 213.124 27.84 217.54 27.84C221.7 27.84 225.54 28.48 229.06 29.76C232.644 30.976 235.556 32.544 237.796 34.464C239.652 35.936 240.58 37.632 240.58 39.552C240.58 40.96 240.036 42.24 238.948 43.392C237.86 44.544 236.58 45.12 235.108 45.12C234.148 45.12 233.284 44.832 232.516 44.256C231.492 43.36 230.116 42.528 228.388 41.76C226.66 40.928 224.836 40.256 222.916 39.744C220.996 39.168 219.204 38.88 217.54 38.88C214.788 38.88 212.452 39.232 210.532 39.936C208.676 40.64 207.268 41.6 206.308 42.816C205.348 44.032 204.868 45.44 204.868 47.04C204.868 48.96 205.412 50.56 206.5 51.84C207.652 53.056 209.284 54.048 211.396 54.816C213.508 55.52 216.036 56.16 218.98 56.736C222.82 57.44 226.18 58.272 229.06 59.232C232.004 60.192 234.436 61.44 236.356 62.976C238.276 64.448 239.716 66.336 240.676 68.64C241.636 70.88 242.116 73.632 242.116 76.896C242.116 81.056 240.964 84.64 238.66 87.648C236.356 90.656 233.316 92.96 229.54 94.56C225.828 96.16 221.796 96.96 217.444 96.96ZM274.341 43.68C278.949 43.68 282.437 44.672 284.805 46.656C287.237 48.64 288.901 51.296 289.797 54.624C290.693 57.888 291.141 61.536 291.141 65.568V90.144C291.141 91.808 290.597 93.216 289.509 94.368C288.421 95.456 287.045 96 285.381 96C283.717 96 282.341 95.456 281.253 94.368C280.165 93.216 279.621 91.808 279.621 90.144V65.568C279.621 63.456 279.365 61.568 278.853 59.904C278.341 58.176 277.413 56.8 276.069 55.776C274.725 54.752 272.805 54.24 270.309 54.24C267.877 54.24 265.797 54.752 264.069 55.776C262.341 56.8 261.029 58.176 260.133 59.904C259.301 61.568 258.885 63.456 258.885 65.568V90.144C258.885 91.808 258.341 93.216 257.253 94.368C256.165 95.456 254.789 96 253.125 96C251.461 96 250.085 95.456 248.997 94.368C247.909 93.216 247.365 91.808 247.365 90.144V30.816C247.365 29.152 247.909 27.776 248.997 26.688C250.085 25.536 251.461 24.96 253.125 24.96C254.789 24.96 256.165 25.536 257.253 26.688C258.341 27.776 258.885 29.152 258.885 30.816V54.624L257.445 54.336C258.021 53.248 258.821 52.096 259.845 50.88C260.869 49.6 262.117 48.416 263.589 47.328C265.061 46.24 266.693 45.376 268.485 44.736C270.277 44.032 272.229 43.68 274.341 43.68ZM348.639 70.368C348.639 75.616 347.455 80.256 345.087 84.288C342.783 88.256 339.647 91.36 335.679 93.6C331.775 95.84 327.391 96.96 322.527 96.96C317.663 96.96 313.247 95.84 309.279 93.6C305.375 91.36 302.239 88.256 299.871 84.288C297.567 80.256 296.415 75.616 296.415 70.368C296.415 65.12 297.567 60.512 299.871 56.544C302.239 52.512 305.375 49.376 309.279 47.136C313.247 44.832 317.663 43.68 322.527 43.68C327.391 43.68 331.775 44.832 335.679 47.136C339.647 49.376 342.783 52.512 345.087 56.544C347.455 60.512 348.639 65.12 348.639 70.368ZM337.119 70.368C337.119 67.104 336.447 64.288 335.103 61.92C333.823 59.488 332.063 57.6 329.823 56.256C327.647 54.912 325.215 54.24 322.527 54.24C319.839 54.24 317.375 54.912 315.135 56.256C312.959 57.6 311.199 59.488 309.855 61.92C308.575 64.288 307.935 67.104 307.935 70.368C307.935 73.568 308.575 76.384 309.855 78.816C311.199 81.184 312.959 83.04 315.135 84.384C317.375 85.728 319.839 86.4 322.527 86.4C325.215 86.4 327.647 85.728 329.823 84.384C332.063 83.04 333.823 81.184 335.103 78.816C336.447 76.384 337.119 73.568 337.119 70.368ZM380.513 43.68C384.993 43.68 388.993 44.832 392.513 47.136C396.097 49.376 398.913 52.48 400.961 56.448C403.073 60.416 404.129 65.024 404.129 70.272C404.129 75.52 403.073 80.16 400.961 84.192C398.913 88.16 396.129 91.296 392.609 93.6C389.153 95.84 385.249 96.96 380.897 96.96C378.337 96.96 375.937 96.544 373.697 95.712C371.457 94.88 369.473 93.824 367.745 92.544C366.081 91.264 364.769 89.984 363.809 88.704C362.913 87.36 362.465 86.24 362.465 85.344L365.441 84.096V109.344C365.441 111.008 364.897 112.384 363.809 113.472C362.721 114.624 361.345 115.2 359.681 115.2C358.017 115.2 356.641 114.656 355.553 113.568C354.465 112.48 353.921 111.072 353.921 109.344V50.496C353.921 48.832 354.465 47.456 355.553 46.368C356.641 45.216 358.017 44.64 359.681 44.64C361.345 44.64 362.721 45.216 363.809 46.368C364.897 47.456 365.441 48.832 365.441 50.496V55.2L363.809 54.336C363.809 53.504 364.257 52.512 365.153 51.36C366.049 50.144 367.265 48.96 368.801 47.808C370.337 46.592 372.097 45.6 374.081 44.832C376.129 44.064 378.273 43.68 380.513 43.68ZM379.073 54.24C376.257 54.24 373.793 54.944 371.681 56.352C369.569 57.76 367.905 59.68 366.689 62.112C365.537 64.48 364.961 67.2 364.961 70.272C364.961 73.28 365.537 76.032 366.689 78.528C367.905 80.96 369.569 82.88 371.681 84.288C373.793 85.696 376.257 86.4 379.073 86.4C381.889 86.4 384.321 85.696 386.369 84.288C388.481 82.88 390.113 80.96 391.265 78.528C392.481 76.032 393.089 73.28 393.089 70.272C393.089 67.2 392.481 64.48 391.265 62.112C390.113 59.68 388.481 57.76 386.369 56.352C384.321 54.944 381.889 54.24 379.073 54.24Z" fill="#3a3a3a" />
+          <circle cx="407" cy="41" r="9" stroke="#3a3a3a" strokeWidth="2" />
+          <path d="M403.814 36.4688H406.914C407.562 36.4688 408.119 36.5664 408.584 36.7617C409.049 36.957 409.406 37.2461 409.656 37.6289C409.906 38.0117 410.031 38.4824 410.031 39.041C410.031 39.4824 409.953 39.8652 409.797 40.1895C409.641 40.5137 409.42 40.7852 409.135 41.0039C408.854 41.2227 408.521 41.3945 408.139 41.5195L407.635 41.7773H404.898L404.887 40.5059H406.932C407.264 40.5059 407.539 40.4473 407.758 40.3301C407.977 40.2129 408.141 40.0508 408.25 39.8438C408.363 39.6367 408.42 39.4004 408.42 39.1348C408.42 38.8496 408.365 38.6035 408.256 38.3965C408.146 38.1855 407.98 38.0234 407.758 37.9102C407.535 37.7969 407.254 37.7402 406.914 37.7402H405.426V45H403.814V36.4688ZM408.631 45L406.656 41.1797L408.361 41.1738L410.359 44.918V45H408.631Z" fill="#3a3a3a" />
+        </svg>
+      </a>
+    </div>
+  );
+}
+
+Logo.propTypes = {
+  dashboardUrl: PropTypes.string.isRequired
+};
+
+export const layout = {
+  areaId: 'header',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    dashboardUrl: url(routeId:"dashboard")
+  }
+`;

package/src/modules/cms/pages/admin/all/Logo.scss

@@ -0,0 +1,13 @@
+.logo {
+  display: flex;
+  a {
+    align-self: center;
+    color: var(--primary);
+    display: block;
+    padding: 3px;
+    svg {
+      width: 10rem;
+      height: 3rem;
+    }
+  }
+}