[431] Update default page template for using hero section and shared widgets (#22)

- **New Features**
- Introduced a new "Default Hero" widget, allowing content editors to
add a hero section with a title, optional subtitle, and a background
image to pages.
- Updated page structure to include a dedicated "header" area for hero
content, separate from the main content area.

- **Style**
- Improved template and configuration formatting for better readability.

- **Refactor**
- Reorganized page field groups and area configurations to support the
new hero widget and enhance content flexibility.

Author: VitalyyP

website/app.js

@@ -3,6 +3,7 @@ function createAposConfig() {
   return {
     shortName: 'apostrophe-site',
     baseUrl: process.env.BASE_URL || 'http://localhost:3000',
+
     // Session configuration
     modules: {
       // Core modules configuration
@@ -20,6 +21,7 @@ function createAposConfig() {
           },
         },
       },
+
       // Configure page types
       '@apostrophecms/rich-text-widget': {},
       '@apostrophecms/image-widget': {
@@ -32,6 +34,7 @@ function createAposConfig() {
           className: 'bp-video-widget',
         },
       },
+
       // Custom Widgets
       'home-hero-widget': {},
       'default-hero-widget': {},
@@ -51,6 +54,7 @@ function createAposConfig() {
        * 'links-buttons-widget': {},
        * 'team-carousel-widget': {},
        */
+
       // The main form module
       '@apostrophecms/form': {},
       // The form widget module, allowing editors to add forms to content areas
@@ -66,17 +70,20 @@ function createAposConfig() {
       '@apostrophecms/form-conditional-widget': {},
       '@apostrophecms/form-divider-widget': {},
       '@apostrophecms/form-group-widget': {},
+
       // Custom Pieces
       'team-members': {},
       projects: {},
       testimonials: {},
+
       // `asset` supports the project"s webpack build for client-side assets.
       asset: {},
       // The project"s first custom page type.
       'default-page': {},
     },
   };
 }
+
 /* istanbul ignore next */
 if (require.main === module) {
   apostrophe(createAposConfig());

website/modules/default-hero-widget/index.js

@@ -0,0 +1,29 @@
+module.exports = {
+  extend: '@apostrophecms/widget-type',
+  options: {
+    label: 'Default Hero',
+    icon: 'image-icon',
+  },
+  fields: {
+    add: {
+      title: {
+        type: 'string',
+        label: 'Title',
+        required: true,
+      },
+      subtitle: {
+        type: 'string',
+        label: 'Subtitle',
+      },
+      backgroundImage: {
+        type: 'area',
+        options: {
+          max: 1,
+          widgets: {
+            '@apostrophecms/image': {},
+          },
+        },
+      },
+    },
+  },
+};

website/modules/default-hero-widget/views/widget.html

@@ -0,0 +1,16 @@
+{% set widget = data.widget %}
+
+<div class="default-hero">
+  {% if widget.backgroundImage %}
+  <div class="default-hero__background">
+    {% area widget, 'backgroundImage' %}
+  </div>
+  {% endif %}
+
+  <div class="default-hero__content">
+    <h1 class="default-hero__title">{{ widget.title }}</h1>
+    {% if widget.subtitle %}
+    <p class="default-hero__subtitle">{{ widget.subtitle }}</p>
+    {% endif %}
+  </div>
+</div>

website/modules/default-page/index.js

@@ -1,52 +1,34 @@
+const mainWidgets = require('../../lib/mainWidgets');
+
 module.exports = {
   extend: '@apostrophecms/page-type',
   options: {
     label: 'Default Page',
   },
   fields: {
     add: {
-      main: {
+      header: {
         type: 'area',
         options: {
+          max: 1,
           widgets: {
-            '@apostrophecms/rich-text': {
-              toolbar: [
-                'styles',
-                '|',
-                'bold',
-                'italic',
-                'strike',
-                'link',
-                '|',
-                'bulletList',
-                'orderedList',
-              ],
-              styles: [
-                {
-                  tag: 'p',
-                  label: 'Paragraph (P)',
-                },
-                {
-                  tag: 'h3',
-                  label: 'Heading 3 (H3)',
-                },
-                {
-                  tag: 'h4',
-                  label: 'Heading 4 (H4)',
-                },
-              ],
-              insert: ['table', 'image'],
-            },
-            '@apostrophecms/image': {},
-            '@apostrophecms/video': {},
+            'default-hero': {},
           },
         },
       },
+      main: {
+        type: 'area',
+        options: mainWidgets,
+      },
     },
     group: {
-      basics: {
-        label: 'Basics',
-        fields: ['title', 'main'],
+      hero: {
+        label: 'Hero',
+        fields: ['title', 'header'],
+      },
+      mainArea: {
+        label: 'Main page content',
+        fields: ['main'],
       },
     },
   },

website/modules/default-page/views/page.html

@@ -1,13 +1,9 @@
-{#
-  This is an example home page template. It inherits and extends a layout template
-  that lives in the top-level views/ folder for convenience
-#}
-
-{% extends "layout.html" %}
-
-{% block main %}
-  <section class="bp-content">
-    <h1>{{ data.page.title }}</h1>
-    {% area data.page, 'main' %}
-  </section>
+{# This is an example home page template. It inherits and extends a layout
+template that lives in the top-level views/ folder for convenience #} {% extends
+"layout.html" %} {% block main %}
+<section class="bp-content">
+  {% if not data.page.header %}
+  <h1>{{ data.page.title }}</h1>
+  {% endif %} {% area data.page, 'header' %} {% area data.page, 'main' %}
+</section>
 {% endblock %}