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

package/scss/index.scss

@@ -0,0 +1,241 @@
+.magazine-issues {
+  $self: &;
+  margin-right: $marko-web-page-wrapper-padding * -1;
+  margin-left: $marko-web-page-wrapper-padding * -1;
+  @include media-breakpoint-down(md) {
+    margin-right: -16px;
+    margin-left: -16px;
+  }
+  &__wrapper {
+    padding-right: 15px;
+    padding-left: 15px;
+    background-color: $gray-100;
+
+    @media (min-width: $marko-web-document-container-max-width) {
+      $margin: calc((((100vw - #{$marko-web-document-container-max-width}) / 2) + #{$marko-web-page-wrapper-padding}) * -1);
+      margin-right: $margin;
+      margin-left: $margin;
+
+      #{ $self }__contents {
+        max-width: $marko-web-document-container-max-width;
+        margin-right: auto;
+        margin-left: auto;
+      }
+    }
+    + #{ $self }__wrapper {
+      background-color: $gray-200;
+    }
+  }
+
+  &__header {
+    padding-top: 30px;
+    padding-bottom: 15px;
+    @include skin-typography($style: "section-header-small");
+  }
+
+  &__contents {
+    &--buttons {
+      display: flex;
+      justify-content: center;
+      padding-top: 15px;
+      padding-bottom: 15px;
+      .btn + .btn {
+        margin-left: 15px;
+      }
+    }
+  }
+
+  .card-deck-flow--4-cols {
+    .card-deck-flow {
+      &__node {
+        @include make-col(3);
+        @include media-breakpoint-down(sm) {
+          @include make-col(6);
+        }
+        .node {
+          &__title {
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}
+
+.magazine-publication-buttons {
+  $self: &;
+  &__button {
+    @extend .btn;
+    @extend .btn-sm;
+    @extend .btn-primary;
+    margin-right: $marko-web-node-spacer;
+    margin-bottom: $marko-web-node-spacer;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &--bottom {
+    #{ $self } {
+      &__button {
+        margin-top: $marko-web-node-spacer;
+      }
+    }
+  }
+}
+
+.node__text--magazine-publication-links {
+  display: flex;
+  flex-direction: column;
+}
+
+
+.magazine-publication-buttons {
+  $self: &;
+  display: flex;
+  #{ $self }__button {
+    padding: 12px;
+    font-size: 12px;
+    white-space: nowrap;
+  }
+}
+
+.magazine-publication-card-block {
+  @include theme-card();
+  &__header {
+    @include theme-card-header();
+    @include border-top-radius($theme-card-border-radius);
+    padding: $theme-item-padding ($theme-item-padding + $theme-item-contents-padding);
+    margin-bottom: 0;
+
+    &:empty {
+      display: none;
+    }
+
+    &:last-child {
+      @include border-bottom-radius(0);
+    }
+
+    a {
+      @include theme-card-header-link();
+    }
+  }
+
+  &__body {
+    padding: $marko-web-node-padding;
+  }
+
+  &--flush {
+    border-radius: 0;
+    box-shadow: none;
+  }
+}
+
+.magazine-publication-card-block {
+  &__header, &__header a {
+    padding-right: 0;
+    padding-left: 0;
+    @include skin-typography($style: "section-header");
+  }
+  &__body {
+    padding-right: 0;
+    padding-left: 0;
+    .issue-archive-cover {
+      margin-bottom: $block-spacer;
+    }
+  }
+}
+
+.page {
+  &--magazine-publication {
+    .page-wrapper {
+      &__title {
+        @include skin-typography($style: "section-header");
+      }
+    }
+  }
+  .magazine-publication-card-block {
+    &__body {
+      padding-right: 10px;
+      padding-left: 10px;
+    }
+    .node {
+      &__title {
+        @include skin-typography($style: "section-header");
+        text-transform: none;
+        margin-bottom: 24px;
+      }
+      &__text {
+        &--magazine-publication-links {
+          flex-direction: row;
+          .btn {
+            margin-right: 1rem;
+          }
+        }
+      }
+      &__footer-left {
+        display: flex;
+        justify-content: space-between;
+        @include marko-web-node-list-border(border-top);
+        width: 100%;
+        padding-top: 1rem;
+        font-weight: $font-weight-bold;
+        .btn {
+          padding: 12px;
+          font-size: 12px;
+        }
+      }
+    }
+    &.sticky-top {
+      @media (max-height: 650px) and (min-width: 992px) {
+        position: initial;
+      }
+    }
+  }
+}
+
+.node-list {
+  $self: &;
+  &--latest-issue {
+    #{ $self }__header {
+      @include skin-typography($style: "section-header-small", $link-style: "primary");
+      margin-bottom: 1rem;
+    }
+    #{ $self }__nodes {
+      padding-top: 10px;
+    }
+    #{ $self }__footer {
+      display: flex;
+      justify-content: space-between;
+      @include marko-web-node-list-border(border-top);
+      padding-bottom: map-get($spacers, "block");
+      font-weight: $font-weight-bold;
+    }
+    .btn  {
+      padding: 12px;
+      font-size: 14px;
+    }
+    .node-list {
+      &__node:first-child {
+        @include marko-web-node-list-border(border-top);
+        padding-top: 1rem;
+      }
+      &__nodes {
+        flex-grow: 0;
+        padding-top: 0;
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+// add margin to top of ad below paginated content results
+.page--magazine-issue {
+  .pagination-controls + .ad-container--inter-block {
+    margin-top: map-get($spacers, block);
+  }
+  .section-feed-content-node {
+    flex-direction: row;
+  }
+}

package/templates/index.marko

@@ -0,0 +1,28 @@
+$ const { site } = out.global;
+
+$ const type = "magazines";
+$ const title = "Magazines";
+$ const description = site.get("magazines.description");
+
+<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>
+  </@head>
+  <@page>
+    <marko-web-page-wrapper class="mb-block">
+      <@section>
+        <div class="row">
+          <div class="col">
+            <h1 class="page-wrapper__title">${title}</h1>
+            <if(description)>
+              <p class="page-wrapper__deck">${description}</p>
+            </if>
+          </div>
+        </div>
+        <theme-magazine-publications-block with-header=false />
+      </@section>
+    </marko-web-page-wrapper>
+  </@page>
+</marko-web-default-page-layout>

package/templates/index.marko.js

@@ -0,0 +1,98 @@
+// 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-magazine$1.0.0/templates/index.marko",
+    marko_component = require("./index.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    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),
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    theme_magazine_publications_block_template = require("../components/blocks/magazine-publications.marko"),
+    theme_magazine_publications_block_tag = marko_loadTag(theme_magazine_publications_block_template),
+    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_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 { site } = out.global;
+
+  const type = "magazines";
+
+  const title = "Magazines";
+
+  const description = site.get("magazines.description");
+
+  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");
+          }
+        },
+      page: {
+          renderBody: function(out) {
+            marko_web_page_wrapper_tag({
+                blockName: "page-wrapper",
+                tag: "div",
+                class: "mb-block",
+                sections: [
+                    {
+                        tag: "div",
+                        renderBody: function(out) {
+                          out.w("<div class=\"row\"><div class=\"col\"><h1 class=\"page-wrapper__title\">" +
+                            marko_escapeXml(title) +
+                            "</h1>");
+
+                          if (description) {
+                            out.w("<p class=\"page-wrapper__deck\">" +
+                              marko_escapeXml(description) +
+                              "</p>");
+                          }
+
+                          out.w("</div></div>");
+
+                          theme_magazine_publications_block_tag({
+                              withHeader: false
+                            }, out, __component, "11");
+                        }
+                      }
+                  ]
+              }, out, __component, "5");
+          }
+        }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail-magazine$1.0.0/templates/index.marko",
+    component: "./index.marko",
+    tags: [
+      "@mindful-web/marko-web-gtm/components/push.marko",
+      "@mindful-web/marko-web-gtm/components/context/default.marko",
+      "../components/blocks/magazine-publications.marko",
+      "@mindful-web/marko-web/components/page/wrapper.marko",
+      "@mindful-web/marko-web/components/page/layouts/default.marko"
+    ]
+  };

package/templates/issue.marko

@@ -0,0 +1,96 @@
+import issueFragment from "../graphql/fragments/magazine-issue-archive";
+import contentListFragment from "../graphql/fragments/magazine-content-feed-block";
+import { get, getAsObject } from "@mindful-web/object-path";
+
+$ const { site, pagination: p, i18n } = out.global;
+$ const { id, pageNode } = data;
+
+<marko-web-magazine-issue-page-layout id=id>
+  <@head>
+    <marko-web-gtm-magazine-issue-context|{ context }| id=id>
+      <marko-web-gtm-push data=context />
+    </marko-web-gtm-magazine-issue-context>
+  </@head>
+  <@page>
+    <marko-web-resolve-page|{ data: issue }| node=pageNode>
+      <marko-web-page-wrapper class="mb-block">
+        <@section>
+          <div class="row">
+            <div class="col">
+              <theme-breadcrumbs modifiers=["website-section"]>
+                <@item><marko-web-link href="/magazine">Magazine</marko-web-link></@item>
+                <@item><marko-web-magazine-publication-name tag=null obj=issue.publication link=true /></@item>
+              </theme-breadcrumbs>
+              <h1 class="page-wrapper__title">
+                ${issue.name}
+              </h1>
+              <if(issue.description)>
+                <p class="page-wrapper__deck">${issue.description}</p>
+              </if>
+            </div>
+          </div>
+        </@section>
+
+        <@section|{ aliases }|>
+          <div class="row">
+            <div class="col-lg-4" style="padding-top: 11px;">
+              <theme-magazine-latest-issue-block node=issue with-title=false class="sticky-top" />
+            </div>
+            <div class="col-lg-8">
+              $ const contentQueryName = "magazine-scheduled-content";
+              $ const contentQueryParams = { issueId: id, queryFragment: contentListFragment };
+              $ const perPage = 12;
+              <theme-section-feed-block query-name=contentQueryName query-params=contentQueryParams>
+                <@query-params ...contentQueryParams limit=perPage skip=p.skip({ perPage }) />
+                <@header>
+                  In This Issue <if(p.page !== 1)>(Page ${p.page})</if>
+                </@header>
+                <@after>
+                  <theme-section-feed-block|{ totalCount }| alias=`/magazine/${issue.id}` count-only=true query-name=contentQueryName query-params=contentQueryParams>
+                    <theme-pagination-controls
+                      per-page=perPage
+                      total-count=totalCount
+                      path=`/magazine/${issue.id}`
+                    />
+                  </theme-section-feed-block>
+                </@after>
+              </theme-section-feed-block>
+            </div>
+          </div>
+        </@section>
+
+        <@section>
+          <marko-web-query|{ nodes }| name="magazine-active-issues"
+            params={
+              publicationId: issue.publication.id,
+              excludeIssueIds: [issue.id],
+              queryFragment: issueFragment,
+              limit: 12,
+              requiresCoverImage: true
+            }
+          >
+          <marko-web-node-list
+            inner-justified=true
+            flush-x=true
+            flush-y=false
+            modifiers=["issue-archives"]
+            collapsible=false
+          >
+            <@header>
+              ${i18n("Past Issues")}
+            </@header>
+            <@body>
+              <theme-magazine-issue-archive-flow nodes=nodes flush=true />
+            </@body>
+            <@footer>
+              <marko-web-magazine-publication-name tag=null obj=issue.publication link={ class: "btn btn-primary" }>
+                ${i18n("View All Past Issues")}
+              </marko-web-magazine-publication-name>
+            </@footer>
+          </marko-web-node-list>
+          </marko-web-query>
+        </@section>
+      </marko-web-page-wrapper>
+    </marko-web-resolve-page>
+  </@page>
+</marko-web-magazine-issue-page-layout>