New design for public demo

app.js

@@ -21,53 +21,53 @@ apostrophe({
     // However any modules that are not present by default in Apostrophe must at
     // least have a minimal configuration here to turn them on: `moduleName: {}`
     '@apostrophecms/vite': {},
-    localizations: {},
 
-    // Custom CSS classes for standard apostrophe widgets
-    '@apostrophecms/rich-text-widget': {
-      options: {
-        className: 'demo-rte'
-      }
-    },
-    '@apostrophecms/image-widget': {
-      options: {
-        className: 'demo-image'
-      }
-    },
-    '@apostrophecms/video-widget': {
-      options: {
-        className: 'demo-video'
-      }
-    },
     // Manages apostrophe's overall asset pipeline
     '@apostrophecms/asset': {
       // When not in production, refresh the page on restart
-      options: {
-        // refreshOnRestart: true,
-        hmr: 'apos'
-      }
+      // options: {
+      //   // refreshOnRestart: true,
+      //   hmr: 'apos'
+      // }
     },
+
+    localizations: {},
+
+    // Manage page and piece SEO metadata
     '@apostrophecms/seo': {},
 
     // A home for our own project-specific javascript and SASS assets
     asset: {},
+
+    // Template helpers
     helper: {},
-    'cta-links-widget': {},
-    'columns-widget': {},
-    'container-widget': {},
+
+    // Widgets
+    '@apostrophecms/rich-text-widget': {},
+    '@apostrophecms/image-widget': {},
+    '@apostrophecms/video-widget': {},
     'button-widget': {},
     'github-prs-widget': {},
+    'hero-widget': {},
+    'card-widget': {},
+    'price-card-widget': {},
 
     // A page type for ordinary pages
     'default-page': {},
 
     // A piece type for articles
     article: {},
+
     // Tease an article on any page
     'article-widget': {},
+
     // Paginated index of articles, and with pages for individual articles
     'article-page': {},
+
+    // A piece type for categorizing articles
     topic: {},
+
+    // Import and export content
     '@apostrophecms/import-export': {}
   }
 });

lib/area.js

@@ -1,93 +1,104 @@
+const defaultRtConfig = {
+  toolbar: [
+    'styles',
+    'bold',
+    'italic',
+    'strike',
+    'link',
+    'bulletList',
+    'orderedList',
+    'blockquote',
+    'alignLeft',
+    'alignCenter',
+    'alignRight',
+    'codeBlock',
+    'undo',
+    'redo'
+  ],
+  insert: [ 'table', 'image' ],
+  styles: [
+    // you may also use a `class` property with these
+    {
+      tag: 'p',
+      label: 'Paragraph (P)'
+    },
+    {
+      class: 'large',
+      tag: 'p',
+      label: 'Large Paragraph (P)'
+    },
+    {
+      tag: 'h2',
+      label: 'Heading 2 (H2)'
+    },
+    {
+      tag: 'h3',
+      label: 'Heading 3 (H3)'
+    },
+    {
+      tag: 'h4',
+      label: 'Heading 4 (H4)'
+    },
+    {
+      tag: 'h5',
+      label: 'Heading 5 (H5)'
+    },
+    {
+      tag: 'h6',
+      label: 'Meta (H6)',
+      class: 'meta'
+    },
+    {
+      tag: 'span',
+      class: 'highlight-red',
+      label: 'Red Highlight'
+    },
+    {
+      tag: 'span',
+      class: 'highlight-seafoam',
+      label: 'Seafoam Highlight'
+    },
+    {
+      tag: 'span',
+      class: 'highlight-blue',
+      label: 'Blue Highlight'
+    },
+    {
+      tag: 'span',
+      class: 'highlight-mustard',
+      label: 'Mustard Highlight'
+    },
+    {
+      tag: 'span',
+      class: 'highlight-purple',
+      label: 'Purple Highlight'
+    }
+  ]
+};
+
 const basicConfig = {
   '@apostrophecms/image': {},
   '@apostrophecms/video': {},
-  '@apostrophecms/rich-text': {
-    toolbar: [
-      'styles',
-      'bold',
-      'italic',
-      'strike',
-      'link',
-      'bulletList',
-      'orderedList',
-      'blockquote',
-      'alignLeft',
-      'alignCenter',
-      'alignRight',
-      'codeBlock',
-      'undo',
-      'redo'
-    ],
-    insert: [ 'table', 'image' ],
-    styles: [
-      // you may also use a `class` property with these
-      {
-        tag: 'p',
-        label: 'Paragraph (P)'
-      },
-      {
-        tag: 'h2',
-        label: 'Heading 2 (H2)'
-      },
-      {
-        tag: 'h3',
-        label: 'Heading 3 (H3)'
-      },
-      {
-        tag: 'h4',
-        label: 'Heading 4 (H4)'
-      },
-      {
-        tag: 'h5',
-        label: 'Meta (H5)',
-        class: 'meta'
-      },
-      {
-        tag: 'span',
-        label: 'Highlight: Red',
-        class: 'highlight-red'
-      },
-      {
-        tag: 'span',
-        label: 'Highlight: Dark Orange-Yellow',
-        class: 'highlight-mustard'
-      },
-      {
-        tag: 'span',
-        label: 'Highlight: Purple',
-        class: 'highlight-purple'
-      },
-      {
-        tag: 'span',
-        label: 'Highlight: Blue',
-        class: 'highlight-blue'
-      },
-      {
-        tag: 'span',
-        label: 'Highlight: Seafoam',
-        class: 'highlight-seafoam'
-      }
-    ]
-  },
-  container: {},
+  '@apostrophecms/rich-text': defaultRtConfig,
+  '@apostrophecms/layout': {},
   button: {},
   'github-prs': {}
 };
 
 const fullConfig = Object.assign({
-  columns: {},
+  '@apostrophecms/layout': {},
   article: {},
-  'cta-links': {}
+  card: {},
+  'price-card': {}
 }, basicConfig);
 
 const fullConfigExpandedGroups = {
   layout: {
     label: 'Layout Tools',
     widgets: {
-      columns: {},
-      container: {}
+      '@apostrophecms/layout': {}
     },
-    columns: 2
+    columns: 1
   },
   media: {
     label: 'Media',
@@ -100,11 +111,12 @@ const fullConfigExpandedGroups = {
   elements: {
     label: 'Elements',
     widgets: {
+      hero: {},
       button: {},
       'github-prs': {},
-      '@apostrophecms/rich-text': {},
+      '@apostrophecms/rich-text': defaultRtConfig,
       article: {},
-      'cta-links': {}
+      'price-card': {}
     },
     columns: 3
   }

lib/iconChoices.js

@@ -0,0 +1,46 @@
+export default [
+  {
+    label: 'Clock',
+    value: 'clock'
+  },
+  {
+    label: 'Building',
+    value: 'building'
+  },
+  {
+    label: 'Landmark',
+    value: 'landmark'
+  },
+  {
+    label: 'CPU',
+    value: 'cpu'
+  },
+  {
+    label: 'Trophy',
+    value: 'trophy'
+  },
+  {
+    label: 'Earth',
+    value: 'earth'
+  },
+  {
+    label: 'People',
+    value: 'people'
+  },
+  {
+    label: 'Chart',
+    value: 'chart'
+  },
+  {
+    label: 'Rocket',
+    value: 'rocket'
+  },
+  {
+    label: 'Package',
+    value: 'package'
+  },
+  {
+    label: 'Editor',
+    value: 'editor'
+  }
+];

modules/@apostrophecms/global/index.js

@@ -1,21 +1,19 @@
-import linkConfig from '../../../lib/link.js';
+import { fullConfig } from '../../../lib/area.js';
+
 export default {
   fields: {
     add: {
-      footerLinks: {
-        label: 'Footer Links',
-        type: 'array',
-        titleField: 'linkText',
-        fields: {
-          add: {
-            ...linkConfig.link
-          }
-        }
-      },
       siteTitle: {
         label: 'Site Title',
         type: 'string',
         def: 'Awesome Site'
+      },
+      footerContent: {
+        label: 'Footer Content',
+        type: 'area',
+        options: {
+          widgets: fullConfig
+        }
       }
     },
     group: {

modules/@apostrophecms/home-page/views/page.html

@@ -7,7 +7,9 @@
 
 {# Home page is full width #}
 {% block pageTitle %}
-  <h1 class="meta home-title">{{ __t('homeTitle') }}</h1>
+  <h1 class="home-title">
+    <span class='meta'>{{ __t('homeTitle') }}</span>
+  </h1>
 {% endblock %}
 {% block subnav %}{% endblock %}