Add support for multiflowblock sections to singlepage

assets/static/css/style.css

@@ -576,6 +576,10 @@ img {
   position: relative;
 }
 
+.body-subsection {
+  padding-top: 1em;
+}
+
 .light-bg-section {
   background: #ffffff;
   background: var(--theme-bg-color, #ffffff);

example-site/content/contents.lr

@@ -219,7 +219,7 @@ direct_link: false
 
 
 
-#### team ####
+#### multisection ####
 section_id: credits
 ----
 title: Credits
@@ -231,156 +231,183 @@ The key people and organizations without which this theme wouldn't be possible.<
 ----
 nav_label: Credits
 ----
+inner_content:
+
+##### team #####
+section_id: contributors
+-----
+title:
+-----
+description:
+-----
+nav_label:
+-----
 members:
 
-##### member #####
+###### member ######
 name: FreeHTML5.co
------
+------
 position: Original Template Creator
------
+------
 description:
 
 Created the original "Icon" plain HTML template, on which Hugo-Icon was based.
------
+------
 image:
------
+------
 website: https://freehtml5.co/
------
+------
 facebook: https://www.facebook.com/fh5co/
------
+------
 twitter: https://twitter.com/fh5co
------
+------
 instagram:
------
+------
 github:
------
+------
 linkedin:
------
+------
 
 
-##### member #####
+###### member ######
 name: Steve Lane
------
+------
 position: Hugo-Icon Theme Creator
------
+------
 description:
 
 Ported the "Icon" template to Hugo and converted it into a jinja-templated theme.
------
+------
 image:
------
+------
 website: https://gtown-ds.netlify.com/
------
+------
 facebook:
------
+------
 twitter: https://twitter.com/stephenelane
------
+------
 instagram:
------
+------
 github: https://github.com/SteveLane
------
+------
 linkedin:
------
+------
 
 
-##### member #####
+###### member ######
 name: Daniel Althviz Moré
------
+------
 position: Lektor-Icon Theme Porter
------
+------
 description:
 
 Ported the Hugo-Icon theme to Lektor, revamping it and adding new features and styling in the process.
 Also helped create the original blog templates.
------
+------
 image: dalthviz.jpg
------
+------
 website: https://dalthviz.github.io/
------
+------
 facebook:
------
+------
 twitter:
------
+------
 instagram:
------
+------
 github: https://github.com/dalthviz
------
+------
 linkedin:
------
+------
 
 
-##### member #####
-name: Spyder Development Team
------
-position: Primary Lektor-Icon Developers
------
+###### member ######
+name: Spyder Team
+------
+position: Theme Maintainers
+------
 description:
 
-Have taken primary responsibility for maintaining and enhancing the theme further, in particular to support our use of it on the official Spyder website.
------
+Has taken primary responsibility for maintaining and enhancing the theme further, in particular to support our use of it on the official Spyder website.
+------
 image: /static/images/spyder-logo.svg
------
+------
 website: https://www.spyder-ide.org/
------
+------
 facebook: https://www.facebook.com/SpyderIDE/
------
-twitter: https://twitter.com/spyder_ide"
------
+------
+twitter: https://twitter.com/spyder_ide
+------
 instagram:
------
+------
 github: https://github.com/spyder-ide/spyder
------
+------
 linkedin:
------
+------
 
 
-##### member #####
+###### member ######
 name: Third Party Assets
------
+------
 position: JS Libs, Icon Fonts and Styles
------
+------
 description:
 
 Lektor-Icon includes a number of icon font glyphs, third-party styles and Javascript libraries in the final product. Check out NOTICE.txt for more.
------
+------
 image:
------
+------
 website: https://github.com/spyder-ide/lektor-icon/blob/master/NOTICE.txt
------
+------
 facebook:
------
+------
 twitter:
------
+------
 instagram:
------
+------
 github: https://github.com/spyder-ide/lektor-icon/blob/master/NOTICE.txt
------
+------
 linkedin:
------
+------
 
 
-##### member #####
+###### member ######
 name: You!
------
+------
 position: Community Contributors
------
+------
 description:
 
 Lektor-Icon welcomes your help in making this theme better for everyone. Anyone can submit a PR or participate in development!
------
+------
 image:
------
+------
 website:
------
+------
 facebook:
------
+------
 twitter:
------
+------
 instagram:
------
+------
 github:
------
+------
 linkedin:
+------
+-----
+
+
+##### content #####
+section_id: opencollective-backers
+-----
+title:
+-----
+description:
+-----
+content:
+
+<a href="https://opencollective.com/spyder#support">
+  <img src="https://opencollective.com/spyder/sponsors.svg" class="img-responsive img-center" alt="Graphic showing Spyder's top backers on OpenCollective">
+</a>
 -----
 ----
 

flowblocks/multisection.ini

@@ -0,0 +1,29 @@
+[block]
+name = Multisection Block
+
+[fields.title]
+label = Section Title
+description = A title for this section. If this and the description is left empty, no title block is shown for the section.
+size = large
+type = string
+
+[fields.description]
+label = Section Description
+description = If present, displayed as a short block of text underneath the title. Can use Markdown formatting.
+type = markdown
+
+[fields.nav_label]
+label = Navbar Link Label
+description = Text to use as a link to the section in the top navigation bar. Typically a shorter form of the section title. If not provided, this section will not appear in the navbar.
+type = string
+
+[fields.section_id]
+label = Section ID for HTML
+description = Alphanumeric, unique identifier to use for the "id" property of this section within the HTML. Required; will appear in links to the section so should be human-readable.
+type = string
+
+[fields.inner_content]
+label = Inner Content Flowblocks
+description = The set of flowblock sections comprising the body content of the multi-section.
+type = flow
+flow_blocks = mission, content, services, gallery, team, dashboard, multisection

models/single-layout.ini

@@ -41,4 +41,4 @@ choice_labels = Dark, Light
 label = Main Content Flowblocks
 description = The set of flowblock sections comprising the body content of the page.
 type = flow
-flow_blocks = mission, content, services, gallery, team, dashboard
+flow_blocks = mission, content, services, gallery, team, dashboard, multisection

templates/blocks/multisection.html

@@ -0,0 +1,20 @@
+{% if this.inner_content %}
+{% for inner_block in this.inner_content.blocks %}
+{% set extra_classes = '' %}
+{% if not inner_block.title %}
+{% set extra_classes = extra_classes ~ ' notitle-section' %}
+{% endif %}
+<div id="section-{{ inner_block.section_id }}" data-section="{{ inner_block.section_id }}" class="{{ inner_block._flowblock }}-section body-subsection{{ extra_classes }}">
+  {% if inner_block.video_url and inner_block.video_url.url != '' %}
+  <div class="video-spacer"></div>
+  {% endif %}
+  {% if inner_block.title or inner_block.description %}
+  <div class="text-center fh5co-heading">
+    <h2>{{ inner_block.title }}</h2>
+    {{ inner_block.description }}
+  </div>
+  {% endif %}
+{{ inner_block }}
+</div> <!-- END {{ inner_block._flowblock }}-subsection -->
+{% endfor %}
+{% endif %}

templates/single-layout.html

@@ -82,28 +82,28 @@ <h2>{{ this.hero_description | replace('<p>', '') | replace('</p>', '') | safe }
 {% endif %}
 
 {% if this.main_content %}
-{% for block in this.main_content.blocks %}
+{% for main_block in this.main_content.blocks %}
 {% set extra_classes = '' %}
 {% if this.starting_block_bg and this.starting_block_bg == 'light' %}
 {% set extra_classes = extra_classes ~ loop.cycle(' light-bg-section', ' dark-bg-section') %}
 {% else %}
 {% set extra_classes = extra_classes ~ loop.cycle(' dark-bg-section', ' light-bg-section') %}
 {% endif %}
-{% if not block.title %}
+{% if not main_block.title %}
 {% set extra_classes = extra_classes ~ ' notitle-section' %}
 {% endif %}
-<div id="section-{{ block.section_id }}" data-section="{{ block.section_id }}" class="{{ block._flowblock }}-section body-section{{ extra_classes }}">
-  {% if block.video_url and block.video_url.url != '' %}
+<div id="section-{{ main_block.section_id }}" data-section="{{ main_block.section_id }}" class="{{ main_block._flowblock }}-section body-section{{ extra_classes }}">
+  {% if main_block.video_url and main_block.video_url.url != '' %}
   <div class="video-spacer"></div>
   {% endif %}
-  {% if block.title or block.description %}
+  {% if main_block.title or main_block.description %}
   <div class="text-center fh5co-heading">
-    <h2>{{ block.title }}</h2>
-    {{ block.description }}
+    <h2>{{ main_block.title }}</h2>
+    {{ main_block.description }}
   </div>
   {% endif %}
-{{ block }}
-</div> <!-- END {{ block._flowblock }}-section -->
+{{ main_block }}
+</div> <!-- END {{ main_block._flowblock }}-section -->
 {% endfor %}
 {% endif %}