Merge pull request #572 from B77Mills/AddAuthorBiosBlock

Add author bios block for bottom of content pages

packages/marko-web-theme-monorail/components/blocks/author-bios.marko

@@ -0,0 +1,28 @@
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const { authors } = input;
+$ const title = defaultValue(input.title, "About the Author");
+$ const pluralTitle = defaultValue(input.pluralTitle, "About the Authors");
+
+<if(authors)>
+  <marko-web-node-list
+      inner-justified=true
+      flush-x=true
+      flush-y=false
+      modifiers=["author-bios"]
+    >
+      <@header>
+          <if(authors.lenngth > 1)>
+            ${pluralTitle}
+          </if>
+          <else>
+            ${title}
+          </else>
+      </@header>
+      <@nodes nodes=authors>
+        <@slot|{ node }|>
+          <theme-author-bio-node node=node />
+        </@slot>
+      </@nodes>
+    </marko-web-node-list>
+  </if>

packages/marko-web-theme-monorail/components/blocks/marko.json

@@ -1,5 +1,8 @@
 {
   "taglib-imports": [],
+  "<theme-author-bios-block>": {
+    "template": "./author-bios.marko"
+  },
   "<theme-callout-cards-block>": {
     "template": "./callout-cards.marko",
     "@slots <slot>[]": {}

packages/marko-web-theme-monorail/components/nodes/author-bio.marko

@@ -0,0 +1,39 @@
+import { buildImgixUrl } from "@parameter1/base-cms-image";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import { getAsObject } from "@parameter1/base-cms-object-path";
+
+$ const node = getAsObject(input, "node");
+$ const blockName = defaultValue(input.blockName, "author-bio-node");
+$ const cta = defaultValue(input.cta, "View Bio");
+
+<marko-web-block name=blockName>
+  $ const { primaryImage } = node;
+  <if(primaryImage && primaryImage.src)>
+    $ const src = buildImgixUrl(primaryImage.src, {
+      w: 96,
+      h: 96,
+      crop: "faces",
+      fit: "crop",
+    });
+    $ const srcset = [`${buildImgixUrl(src, { dpr: 2 })} 2x`];
+    <marko-web-img
+      src=src
+      srcset=srcset
+      alt=primaryImage.alt
+      class="author-bio-node__image"
+      link={ href: node.siteContext.path }
+    />
+  </if>
+  <marko-web-element block-name=blockName name="details">
+    <marko-web-content-name block-name=blockName obj=node link=true />
+    <marko-web-content-title block-name=blockName obj=node />
+    <marko-web-content-teaser block-name=blockName obj=node />
+    <marko-web-link
+      class=`${blockName}__cta btn btn-primary`
+      href=node.siteContext.path
+      title=`View ${node.name}'s Bio`
+    >
+      ${cta}
+    </marko-web-link>
+  </marko-web-element>
+</marko-web-block>

packages/marko-web-theme-monorail/components/nodes/marko.json

@@ -2,6 +2,9 @@
   "<theme-author-node>": {
     "template": "./author.marko"
   },
+  "<theme-author-bio-node>": {
+    "template": "./author-bio.marko"
+  },
   "<theme-author-published-node>": {
     "template": "./author-published.marko"
   },

packages/marko-web-theme-monorail/scss/components/_author-bio-node.scss

@@ -0,0 +1,47 @@
+.node-list {
+  &--author-bios {
+    background-color: $gray-200;
+    padding-left: map-get($spacers, block);
+    padding-right: map-get($spacers, block);
+    margin-bottom: map-get($spacers, block);
+  }
+}
+.author-bio-node {
+  display: flex;
+  align-items: center;
+  margin-top: 17px;
+
+  &__image {
+    $size: 96px;
+    width: $size;
+    height: $size;
+    margin-right: 10px;
+    border-radius: $size;
+  }
+
+  &__content-name {
+    @include skin-typography($style: "author-content-page", $link-style: "primary");
+  }
+
+  &__content-teaser {
+    @include media-breakpoint-down(md) {
+      display: none;
+    }
+  }
+
+  &__cta {
+    margin-top: map-get($spacers, 2);
+  }
+}
+
+.inline-author-bio {
+  &__content-body {
+    margin-bottom: 18px;
+    font-size: 16px;
+    font-style: italic;
+
+    @include media-breakpoint-up(md) {
+      font-size: 18px;
+    }
+  }
+}

packages/marko-web-theme-monorail/scss/core.scss

@@ -20,6 +20,7 @@
 // theme components
 @import "./components/ads";
 @import "./components/author-node";
+@import "./components/author-bio-node";
 @import "./components/author-published-node";
 @import "./components/comments";
 @import "./components/content-page";