Skip to content

Commit f0261cc

Browse files
authored
[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.
1 parent 5a7a43b commit f0261cc

5 files changed

Lines changed: 76 additions & 46 deletions

File tree

website/app.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ function createAposConfig() {
33
return {
44
shortName: 'apostrophe-site',
55
baseUrl: process.env.BASE_URL || 'http://localhost:3000',
6+
67
// Session configuration
78
modules: {
89
// Core modules configuration
@@ -20,6 +21,7 @@ function createAposConfig() {
2021
},
2122
},
2223
},
24+
2325
// Configure page types
2426
'@apostrophecms/rich-text-widget': {},
2527
'@apostrophecms/image-widget': {
@@ -32,6 +34,7 @@ function createAposConfig() {
3234
className: 'bp-video-widget',
3335
},
3436
},
37+
3538
// Custom Widgets
3639
'home-hero-widget': {},
3740
'default-hero-widget': {},
@@ -51,6 +54,7 @@ function createAposConfig() {
5154
* 'links-buttons-widget': {},
5255
* 'team-carousel-widget': {},
5356
*/
57+
5458
// The main form module
5559
'@apostrophecms/form': {},
5660
// The form widget module, allowing editors to add forms to content areas
@@ -66,17 +70,20 @@ function createAposConfig() {
6670
'@apostrophecms/form-conditional-widget': {},
6771
'@apostrophecms/form-divider-widget': {},
6872
'@apostrophecms/form-group-widget': {},
73+
6974
// Custom Pieces
7075
'team-members': {},
7176
projects: {},
7277
testimonials: {},
78+
7379
// `asset` supports the project"s webpack build for client-side assets.
7480
asset: {},
7581
// The project"s first custom page type.
7682
'default-page': {},
7783
},
7884
};
7985
}
86+
8087
/* istanbul ignore next */
8188
if (require.main === module) {
8289
apostrophe(createAposConfig());
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
module.exports = {
2+
extend: '@apostrophecms/widget-type',
3+
options: {
4+
label: 'Default Hero',
5+
icon: 'image-icon',
6+
},
7+
fields: {
8+
add: {
9+
title: {
10+
type: 'string',
11+
label: 'Title',
12+
required: true,
13+
},
14+
subtitle: {
15+
type: 'string',
16+
label: 'Subtitle',
17+
},
18+
backgroundImage: {
19+
type: 'area',
20+
options: {
21+
max: 1,
22+
widgets: {
23+
'@apostrophecms/image': {},
24+
},
25+
},
26+
},
27+
},
28+
},
29+
};
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{% set widget = data.widget %}
2+
3+
<div class="default-hero">
4+
{% if widget.backgroundImage %}
5+
<div class="default-hero__background">
6+
{% area widget, 'backgroundImage' %}
7+
</div>
8+
{% endif %}
9+
10+
<div class="default-hero__content">
11+
<h1 class="default-hero__title">{{ widget.title }}</h1>
12+
{% if widget.subtitle %}
13+
<p class="default-hero__subtitle">{{ widget.subtitle }}</p>
14+
{% endif %}
15+
</div>
16+
</div>

website/modules/default-page/index.js

Lines changed: 16 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,34 @@
1+
const mainWidgets = require('../../lib/mainWidgets');
2+
13
module.exports = {
24
extend: '@apostrophecms/page-type',
35
options: {
46
label: 'Default Page',
57
},
68
fields: {
79
add: {
8-
main: {
10+
header: {
911
type: 'area',
1012
options: {
13+
max: 1,
1114
widgets: {
12-
'@apostrophecms/rich-text': {
13-
toolbar: [
14-
'styles',
15-
'|',
16-
'bold',
17-
'italic',
18-
'strike',
19-
'link',
20-
'|',
21-
'bulletList',
22-
'orderedList',
23-
],
24-
styles: [
25-
{
26-
tag: 'p',
27-
label: 'Paragraph (P)',
28-
},
29-
{
30-
tag: 'h3',
31-
label: 'Heading 3 (H3)',
32-
},
33-
{
34-
tag: 'h4',
35-
label: 'Heading 4 (H4)',
36-
},
37-
],
38-
insert: ['table', 'image'],
39-
},
40-
'@apostrophecms/image': {},
41-
'@apostrophecms/video': {},
15+
'default-hero': {},
4216
},
4317
},
4418
},
19+
main: {
20+
type: 'area',
21+
options: mainWidgets,
22+
},
4523
},
4624
group: {
47-
basics: {
48-
label: 'Basics',
49-
fields: ['title', 'main'],
25+
hero: {
26+
label: 'Hero',
27+
fields: ['title', 'header'],
28+
},
29+
mainArea: {
30+
label: 'Main page content',
31+
fields: ['main'],
5032
},
5133
},
5234
},
Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
1-
{#
2-
This is an example home page template. It inherits and extends a layout template
3-
that lives in the top-level views/ folder for convenience
4-
#}
5-
6-
{% extends "layout.html" %}
7-
8-
{% block main %}
9-
<section class="bp-content">
10-
<h1>{{ data.page.title }}</h1>
11-
{% area data.page, 'main' %}
12-
</section>
1+
{# This is an example home page template. It inherits and extends a layout
2+
template that lives in the top-level views/ folder for convenience #} {% extends
3+
"layout.html" %} {% block main %}
4+
<section class="bp-content">
5+
{% if not data.page.header %}
6+
<h1>{{ data.page.title }}</h1>
7+
{% endif %} {% area data.page, 'header' %} {% area data.page, 'main' %}
8+
</section>
139
{% endblock %}

0 commit comments

Comments
 (0)