@mindful-web/marko-web-theme-monorail 1.0.0

package/templates/search.marko

@@ -0,0 +1,136 @@
+import queryFragment from "../graphql/fragments/section-feed-block";
+import { get } from '@mindful-web/object-path';
+import { isFunction } from '@mindful-web/utils';
+
+$ const {
+  config,
+  req,
+  $markoWebSearch: search,
+  site,
+  i18n,
+} = out.global;
+
+$ const type = "search";
+$ const i18nIsFunction = isFunction(i18n);
+$ const title = i18nIsFunction ? i18n("Search") : "Search";
+$ const description = i18nIsFunction ? `${i18n("Search")} ${config.siteName()}` : `Search ${config.siteName()}`;
+
+$ const currentPage = search.getCurrentPage();
+
+$ const sponsorLogo = site.get('search.sponsorLogos.page');
+
+<marko-web-default-page-layout type=type title=title description=description>
+  <@head>
+    <marko-web-gtm-default-context|{ context }| type=type>
+      <marko-web-gtm-push data=context />
+    </marko-web-gtm-default-context>
+    <meta name="robots" content="noindex">
+  </@head>
+  <@page>
+    <marko-web-page-wrapper>
+      <@section modifiers=["first"]>
+        <theme-gam-define-display-ad
+          name="leaderboard"
+          position="static_page"
+          modifiers=["inter-block"]
+        />
+      </@section>
+      <@section|{ blockName }|>
+        <div class="row">
+          <div class="col-lg-3">
+            <marko-web-search-filter-container modifiers=["sticky"] title={ value: `${i18n("Filters")}`}>
+                <@before-title|{ blockName }|>
+                  <marko-web-website-section-name|{ value }| tag="h1" block-name=blockName obj={ name: title }>
+                    <if(currentPage > 1)>${value}: ${i18n("Page")} ${currentPage}</if>
+                    <else>${value}</else>
+                  </marko-web-website-section-name>
+                </@before-title>
+              <marko-web-search-content-types-filter />
+              <marko-web-search-website-sections-filter />
+            </marko-web-search-filter-container>
+          </div>
+
+          <div class="col-lg-9">
+            <div class="row">
+              <div class="col-xl-9">
+                <marko-web-search-form>
+                  <@block class="search-form" />
+                  <div class="form-group search-form__group">
+                    <label for="search-phrase" class="sr-only">${i18n("Enter search phrase")}</label>
+                    <marko-web-search-input
+                      id="search-phrase"
+                      class="form-control"
+                      placeholder=`${i18n("Enter search phrase")}...`
+                    />
+                  </div>
+                  <button type="submit" class="btn btn-primary search-form__btn">
+                    ${i18n("Search")}
+                  </button>
+                </marko-web-search-form>
+                </div>
+                <div class="col-xl-3">
+                  <marko-web-search-sort-by />
+                  <if(sponsorLogo)>
+                    <div class="search-sponsor">
+                      <span class="search-sponsor__label">Sponsored by</span>
+                      <marko-web-img
+                        alt=sponsorLogo.alt
+                        src=sponsorLogo.src
+                        srcset=sponsorLogo.srcset
+                        class="search-sponsor__logo"
+                      />
+                    </div>
+                  </if>
+                </div>
+              </div>
+            <!-- Enforce it this way to not mess with the config, changing at the config level will auto apply sort -->
+            $ const sortField = (search.input.sortField === "SCORE" && search.input.searchQuery === '') ? "PUBLISHED" : search.input.sortField;
+            <marko-web-search-query|{ nodes, totalCount }|
+              limit=search.getLimit()
+              skip=search.getSkip()
+              sort-field=sortField
+              sort-order=search.input.sortOrder
+              content-types=search.input.contentTypes
+              search-query=search.input.searchQuery
+              assigned-to-website-section-ids=search.input.assignedToWebsiteSectionIds
+              query-fragment=queryFragment
+            >
+              <marko-web-page-wrapper modifiers=["no-padding-x"]>
+                <@section modifiers=["search-results"]>
+                  <div>${new Intl.NumberFormat().format(totalCount)} ${i18n("Results")}</div>
+                  <marko-web-search-selected-filters />
+                </@section>
+                <if(nodes.length)>
+                  <@section>
+                    <marko-web-node-list
+                      inner-justified=true
+                      flush-x=true
+                      flush-y=false
+                      modifiers=["section-feed"]
+                    >
+                      <@nodes nodes=nodes>
+                        <@slot|{ node }|>
+                          <theme-section-feed-content-node node=node />
+                        </@slot>
+                      </@nodes>
+                    </marko-web-node-list>
+                    <marko-web-search-pagination-controls total-count=totalCount>
+                      <@link class="btn btn-primary" />
+                    </marko-web-search-pagination-controls>
+                  </@section>
+                </if>
+              </marko-web-page-wrapper>
+            </marko-web-search-query>
+          </div>
+        </div>
+      </@section>
+      <@section>
+        <theme-gam-define-display-ad
+          name="rotation"
+          position="static_page"
+          modifiers=["inter-block"]
+        />
+      </@section>
+    </marko-web-page-wrapper>
+  </@page>
+</marko-web-default-page-layout>

package/templates/search.marko.js

@@ -0,0 +1,335 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-theme-monorail$1.0.0/templates/search.marko",
+    marko_component = require("./search.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_queryFragment = require("../graphql/fragments/section-feed-block"),
+    queryFragment = module_queryFragment.default || module_queryFragment,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    get = module_objectPath_module.get,
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    isFunction = module_utils_module.isFunction,
+    marko_web_gtm_push_template = require("@mindful-web/marko-web-gtm/components/push.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_gtm_push_tag = marko_loadTag(marko_web_gtm_push_template),
+    marko_web_gtm_default_context_template = require("@mindful-web/marko-web-gtm/components/context/default.marko"),
+    marko_web_gtm_default_context_tag = marko_loadTag(marko_web_gtm_default_context_template),
+    theme_gam_define_display_ad_template = require("../components/gam/define-display-ad.marko"),
+    theme_gam_define_display_ad_tag = marko_loadTag(theme_gam_define_display_ad_template),
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_web_website_section_name_template = require("@mindful-web/marko-web/components/element/website-section/name.marko"),
+    marko_web_website_section_name_tag = marko_loadTag(marko_web_website_section_name_template),
+    marko_web_search_content_types_filter_template = require("@mindful-web/marko-web-search/components/filters/content-types.marko"),
+    marko_web_search_content_types_filter_tag = marko_loadTag(marko_web_search_content_types_filter_template),
+    marko_web_search_website_sections_filter_template = require("@mindful-web/marko-web-search/components/filters/website-sections.marko"),
+    marko_web_search_website_sections_filter_tag = marko_loadTag(marko_web_search_website_sections_filter_template),
+    marko_web_search_filter_container_template = require("@mindful-web/marko-web-search/components/filters/filter-container.marko"),
+    marko_web_search_filter_container_tag = marko_loadTag(marko_web_search_filter_container_template),
+    marko_web_search_input_template = require("@mindful-web/marko-web-search/components/form/input.marko"),
+    marko_web_search_input_tag = marko_loadTag(marko_web_search_input_template),
+    marko_web_search_form_template = require("@mindful-web/marko-web-search/components/form/index.marko"),
+    marko_web_search_form_tag = marko_loadTag(marko_web_search_form_template),
+    marko_web_search_sort_by_template = require("@mindful-web/marko-web-search/components/sort-by/index.marko"),
+    marko_web_search_sort_by_tag = marko_loadTag(marko_web_search_sort_by_template),
+    marko_web_img_template = require("@mindful-web/marko-web/components/element/img.marko"),
+    marko_web_img_tag = marko_loadTag(marko_web_img_template),
+    marko_web_search_selected_filters_template = require("@mindful-web/marko-web-search/components/filters/selected/index.marko"),
+    marko_web_search_selected_filters_tag = marko_loadTag(marko_web_search_selected_filters_template),
+    theme_section_feed_content_node_template = require("../components/nodes/section-feed-content.marko"),
+    theme_section_feed_content_node_tag = marko_loadTag(theme_section_feed_content_node_template),
+    marko_web_node_list_template = require("@mindful-web/marko-web/components/node-list/index.marko"),
+    marko_web_node_list_tag = marko_loadTag(marko_web_node_list_template),
+    marko_web_search_pagination_controls_template = require("@mindful-web/marko-web-search/components/pagination-controls.marko"),
+    marko_web_search_pagination_controls_tag = marko_loadTag(marko_web_search_pagination_controls_template),
+    marko_loadNestedTag = require("marko/dist/runtime/helpers/load-nested-tag"),
+    marko_web_page_wrapper_section_nested_tag = marko_loadNestedTag("sections", 1),
+    marko_mergeNestedTagsHelper = require("marko/dist/runtime/helpers/merge-nested-tags"),
+    marko_web_page_wrapper_template = require("@mindful-web/marko-web/components/page/wrapper.marko"),
+    marko_web_page_wrapper_tag = marko_loadTag(marko_web_page_wrapper_template),
+    marko_web_search_query_template = require("@mindful-web/marko-web-search/components/query.marko"),
+    marko_web_search_query_tag = marko_loadTag(marko_web_search_query_template),
+    marko_web_default_page_layout_template = require("@mindful-web/marko-web/components/page/layouts/default.marko"),
+    marko_web_default_page_layout_tag = marko_loadTag(marko_web_default_page_layout_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const {
+  config,
+  req,
+  $markoWebSearch: search,
+  site,
+  i18n,
+} = out.global;
+
+  const type = "search";
+
+  const i18nIsFunction = isFunction(i18n);
+
+  const title = i18nIsFunction ? i18n("Search") : "Search";
+
+  const description = i18nIsFunction ? `${i18n("Search")} ${config.siteName()}` : `Search ${config.siteName()}`;
+
+  const currentPage = search.getCurrentPage();
+
+  const sponsorLogo = site.get('search.sponsorLogos.page');
+
+  marko_web_default_page_layout_tag({
+      type: type,
+      title: title,
+      description: description,
+      head: {
+          renderBody: function(out) {
+            marko_web_gtm_default_context_tag({
+                type: type,
+                renderBody: function(out, { context }) {
+                  marko_web_gtm_push_tag({
+                      name: "dataLayer",
+                      data: context
+                    }, out, __component, "3");
+                }
+              }, out, __component, "2");
+
+            out.w("<meta name=\"robots\" content=\"noindex\">");
+          }
+        },
+      page: {
+          renderBody: function(out) {
+            marko_web_page_wrapper_tag({
+                blockName: "page-wrapper",
+                tag: "div",
+                sections: [
+                    {
+                        tag: "div",
+                        modifiers: [
+                            "first"
+                          ],
+                        renderBody: function(out) {
+                          theme_gam_define_display_ad_tag({
+                              name: "leaderboard",
+                              position: "static_page",
+                              modifiers: [
+                                  "inter-block"
+                                ]
+                            }, out, __component, "8");
+                        }
+                      },
+                    {
+                        tag: "div",
+                        renderBody: function(out, { blockName }) {
+                          out.w("<div class=\"row\"><div class=\"col-lg-3\">");
+
+                          marko_web_search_filter_container_tag({
+                              modifiers: [
+                                  "sticky"
+                                ],
+                              title: {
+                                  value: "" + i18n("Filters")
+                                },
+                              beforeTitle: {
+                                  renderBody: function(out, { blockName }) {
+                                    marko_web_website_section_name_tag({
+                                        tag: "h1",
+                                        blockName: blockName,
+                                        obj: {
+                                            name: title
+                                          },
+                                        renderBody: function(out, { value }) {
+                                          if (currentPage > 1) {
+                                            out.w(marko_escapeXml(value) +
+                                              ": " +
+                                              marko_escapeXml(i18n("Page")) +
+                                              " " +
+                                              marko_escapeXml(currentPage));
+                                          } else {
+                                            out.w(marko_escapeXml(value));
+                                          }
+                                        }
+                                      }, out, __component, "14");
+                                  }
+                                },
+                              renderBody: function(out) {
+                                marko_web_search_content_types_filter_tag({}, out, __component, "15");
+
+                                marko_web_search_website_sections_filter_tag({}, out, __component, "16");
+                              }
+                            }, out, __component, "12");
+
+                          out.w("</div><div class=\"col-lg-9\"><div class=\"row\"><div class=\"col-xl-9\">");
+
+                          marko_web_search_form_tag({
+                              block: {
+                                  class: "search-form"
+                                },
+                              renderBody: function(out) {
+                                out.w("<div class=\"form-group search-form__group\"><label for=\"search-phrase\" class=\"sr-only\">" +
+                                  marko_escapeXml(i18n("Enter search phrase")) +
+                                  "</label>");
+
+                                marko_web_search_input_tag({
+                                    id: "search-phrase",
+                                    class: "form-control",
+                                    placeholder: i18n("Enter search phrase") + "..."
+                                  }, out, __component, "24");
+
+                                out.w("</div><button type=\"submit\" class=\"btn btn-primary search-form__btn\">" +
+                                  marko_escapeXml(i18n("Search")) +
+                                  "</button>");
+                              }
+                            }, out, __component, "20");
+
+                          out.w("</div><div class=\"col-xl-3\">");
+
+                          marko_web_search_sort_by_tag({}, out, __component, "27");
+
+                          if (sponsorLogo) {
+                            out.w("<div class=\"search-sponsor\"><span class=\"search-sponsor__label\">Sponsored by</span>");
+
+                            marko_web_img_tag({
+                                lazyload: true,
+                                alt: sponsorLogo.alt,
+                                src: sponsorLogo.src,
+                                srcset: sponsorLogo.srcset,
+                                class: "search-sponsor__logo"
+                              }, out, __component, "30");
+
+                            out.w("</div>");
+                          }
+
+                          out.w("</div></div>");
+
+                          const sortField = (search.input.sortField === "SCORE" && search.input.searchQuery === '') ? "PUBLISHED" : search.input.sortField;
+
+                          marko_web_search_query_tag({
+                              limit: search.getLimit(),
+                              skip: search.getSkip(),
+                              sortField: sortField,
+                              sortOrder: search.input.sortOrder,
+                              contentTypes: search.input.contentTypes,
+                              searchQuery: search.input.searchQuery,
+                              assignedToWebsiteSectionIds: search.input.assignedToWebsiteSectionIds,
+                              queryFragment: queryFragment,
+                              renderBody: function(out, { nodes, totalCount }) {
+                                marko_web_page_wrapper_tag(marko_mergeNestedTagsHelper({
+                                    blockName: "page-wrapper",
+                                    tag: "div",
+                                    modifiers: [
+                                        "no-padding-x"
+                                      ],
+                                    sections: [
+                                        {
+                                            tag: "div",
+                                            modifiers: [
+                                                "search-results"
+                                              ],
+                                            renderBody: function(out) {
+                                              out.w("<div>" +
+                                                marko_escapeXml((new Intl.NumberFormat()).format(totalCount)) +
+                                                " " +
+                                                marko_escapeXml(i18n("Results")) +
+                                                "</div>");
+
+                                              marko_web_search_selected_filters_tag({}, out, __component, "35");
+                                            }
+                                          }
+                                      ],
+                                    renderBody: function(out, $nestedTagmarko_web_page_wrapper$0) {
+                                      if (nodes.length) {
+                                        marko_web_page_wrapper_section_nested_tag({
+                                            tag: "div",
+                                            renderBody: function(out) {
+                                              marko_web_node_list_tag({
+                                                  blockName: "node-list",
+                                                  tag: "div",
+                                                  justified: false,
+                                                  innerJustified: true,
+                                                  flushX: true,
+                                                  flushY: false,
+                                                  fullHeight: false,
+                                                  collapsible: true,
+                                                  modifiers: [
+                                                      "section-feed"
+                                                    ],
+                                                  nodes: {
+                                                      nodes: nodes,
+                                                      slots: [
+                                                          {
+                                                              renderBody: function(out, { node }) {
+                                                                theme_section_feed_content_node_tag({
+                                                                    node: node
+                                                                  }, out, __component, "40");
+                                                              }
+                                                            }
+                                                        ]
+                                                    }
+                                                }, out, __component, "37");
+
+                                              marko_web_search_pagination_controls_tag({
+                                                  totalCount: totalCount,
+                                                  link: {
+                                                      class: "btn btn-primary"
+                                                    }
+                                                }, out, __component, "41");
+                                            }
+                                          }, $nestedTagmarko_web_page_wrapper$0);
+                                      }
+                                    }
+                                  }), out, __component, "32");
+                              }
+                            }, out, __component, "31");
+
+                          out.w("</div></div>");
+                        }
+                      },
+                    {
+                        tag: "div",
+                        renderBody: function(out) {
+                          theme_gam_define_display_ad_tag({
+                              name: "rotation",
+                              position: "static_page",
+                              modifiers: [
+                                  "inter-block"
+                                ]
+                            }, out, __component, "44");
+                        }
+                      }
+                  ]
+              }, out, __component, "6");
+          }
+        }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/templates/search.marko",
+    component: "./search.marko",
+    tags: [
+      "@mindful-web/marko-web-gtm/components/push.marko",
+      "@mindful-web/marko-web-gtm/components/context/default.marko",
+      "../components/gam/define-display-ad.marko",
+      "@mindful-web/marko-web/components/element/website-section/name.marko",
+      "@mindful-web/marko-web-search/components/filters/content-types.marko",
+      "@mindful-web/marko-web-search/components/filters/website-sections.marko",
+      "@mindful-web/marko-web-search/components/filters/filter-container.marko",
+      "@mindful-web/marko-web-search/components/form/input.marko",
+      "@mindful-web/marko-web-search/components/form/index.marko",
+      "@mindful-web/marko-web-search/components/sort-by/index.marko",
+      "@mindful-web/marko-web/components/element/img.marko",
+      "@mindful-web/marko-web-search/components/filters/selected/index.marko",
+      "../components/nodes/section-feed-content.marko",
+      "@mindful-web/marko-web/components/node-list/index.marko",
+      "@mindful-web/marko-web-search/components/pagination-controls.marko",
+      "@mindful-web/marko-web/components/page/wrapper.marko",
+      "@mindful-web/marko-web-search/components/query.marko",
+      "@mindful-web/marko-web/components/page/layouts/default.marko"
+    ]
+  };

package/templates/taxonomy.marko

@@ -0,0 +1,71 @@
+import hierarchyAliases from "@mindful-web/marko-web/utils/hierarchy-aliases";
+import { getAsArray } from "@mindful-web/object-path";
+import queryFragment from "../graphql/fragments/section-feed-block";
+
+$ const { id, name, type, description } = input;
+$ const { GAM, req, i18n, pagination: p } = out.global;
+$ const perPage = 12;
+
+$ const queryParams = {
+  limit: perPage,
+  skip: p.skip({ perPage }),
+  includeTaxonomyIds: [id],
+  queryFragment,
+};
+
+$ const title = `${type}: ${name}`;
+
+<marko-web-default-page-layout type="taxonomy" title=title description=description>
+  <@head>
+    <meta name="robots" content="noindex">
+  </@head>
+  <@page>
+    <marko-web-page-wrapper>
+      <@section modifiers=["first"]>
+        <theme-gam-define-display-ad
+          name="leaderboard"
+          position="section_page"
+          modifiers=["inter-block"]
+        />
+      </@section>
+
+      <@section|{ blockName }|>
+        <marko-web-website-section-name|{ value }| tag="h1" block-name=blockName obj={ name: title }>
+          <if(p.page > 1)>${value}: ${i18n("Page")} ${p.page}</if>
+          <else>${value}</else>
+        </marko-web-website-section-name>
+
+        <marko-web-query|{ nodes }| name="all-published-content" params=queryParams>
+          <marko-web-node-list
+            inner-justified=true
+            flush-x=true
+            flush-y=false
+            modifiers=["section-feed"]
+          >
+            <@nodes nodes=nodes>
+              <@slot|{ node }|>
+                <theme-section-feed-content-node node=node />
+              </@slot>
+            </@nodes>
+          </marko-web-node-list>
+        </marko-web-query>
+
+        <theme-query-total-count|{ totalCount }| name="all-published-content" params={ includeTaxonomyIds: [id] }>
+          <theme-pagination-controls
+            per-page=perPage
+            total-count=totalCount
+            path=req.path
+          />
+        </theme-query-total-count>
+      </@section>
+
+      <@section>
+        <theme-gam-define-display-ad
+          name="rotation"
+          position="section_page"
+          modifiers=["inter-block"]
+        />
+      </@section>
+    </marko-web-page-wrapper>
+  </@page>
+</marko-web-default-page-layout>