Switching to manual ga tagging.

2024-09-22 14:51:34 -04:00 · 2024-09-22 14:51:34 -04:00 · ed270d842d
commit ed270d842d
parent 95813b49f2
24 changed files with 422 additions and 248 deletions
--- a/composer.json
+++ b/composer.json
@ -28,6 +28,7 @@
        "drupal/entity_hierarchy": "^3.3",
        "drupal/field_group": "^3.4",
        "drupal/flexslider": "^3.0@alpha",
+        "drupal/fpa": "^4.0",
        "drupal/gin": "^3.0@RC",
        "drupal/gin_login": "^2.1",
        "drupal/google_tag": "^2.0",
--- a/composer.lock
+++ b/composer.lock
@ -4,7 +4,7 @@
        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
        "This file is @generated automatically"
    ],
-    "content-hash": "6089571e27cbac2520d85b9198689722",
+    "content-hash": "97285fcebea078d79227424ce462164f",
    "packages": [
        {
            "name": "asm89/stack-cors",
@ -2847,6 +2847,62 @@
                "issues": "https://drupal.org/project/issues/flexslider"
            }
        },
+        {
+            "name": "drupal/fpa",
+            "version": "4.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/fpa.git",
+                "reference": "4.0.0"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/fpa-4.0.0.zip",
+                "reference": "4.0.0",
+                "shasum": "889bc7a4c65fa435da61c6583e1aa4d29b1802e1"
+            },
+            "require": {
+                "drupal/core": "^9.4 || ^10.0"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "drupal": {
+                    "version": "4.0.0",
+                    "datestamp": "1672325749",
+                    "security-coverage": {
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "azovsky",
+                    "homepage": "https://www.drupal.org/user/330533"
+                },
+                {
+                    "name": "corey.aufang",
+                    "homepage": "https://www.drupal.org/user/163737"
+                },
+                {
+                    "name": "HakS",
+                    "homepage": "https://www.drupal.org/user/1815198"
+                },
+                {
+                    "name": "VladimirAus",
+                    "homepage": "https://www.drupal.org/user/673120"
+                }
+            ],
+            "description": "Fast filtering on permissions administration form.",
+            "homepage": "https://www.drupal.org/project/fpa",
+            "support": {
+                "source": "https://git.drupalcode.org/project/fpa"
+            }
+        },
        {
            "name": "drupal/gin",
            "version": "3.0.0-rc13",
--- a/config/default/core.entity_form_display.node.article.default.yml
+++ b/config/default/core.entity_form_display.node.article.default.yml
@ -46,12 +46,11 @@ content:
      media_types: {  }
    third_party_settings: {  }
  field_banner_color:
-    type: color_field_widget_default
+    type: color_field_widget_box
    weight: 1
    region: content
    settings:
-      placeholder_color: ''
-      placeholder_opacity: ''
+      default_colors: '#565264,#009fb7,#fed766,#f4f4f8,#e6e6ea,#fe4a49,#c0a9b0,#d74e09,#60935d,#bc9ec1,#ffa8a9,#157145'
    third_party_settings: {  }
  field_read_time:
    type: number
--- a/config/default/core.extension.yml
+++ b/config/default/core.extension.yml
@ -23,6 +23,7 @@ module:
  field_ui: 0
  file: 0
  filter: 0
+  fpa: 0
  gin_login: 0
  gin_toolbar: 0
  help: 0
--- a/config/default/field.field.node.article.field_banner_color.yml
+++ b/config/default/field.field.node.article.field_banner_color.yml
@ -15,7 +15,10 @@ label: 'Banner Color'
 description: 'The color for the banner.'
 required: false
 translatable: false
-default_value: {  }
+default_value:
+  -
+    color: '#565264'
+    opacity: null
 default_value_callback: ''
 settings:
  opacity: 0
--- a/config/default/field.field.node.article.field_read_time.yml
+++ b/config/default/field.field.node.article.field_read_time.yml
@ -19,5 +19,5 @@ settings:
  min: null
  max: null
  prefix: ''
-  suffix: 'minute read time'
+  suffix: ' minute read time'
 field_type: integer
--- a/config/default/system.action.user_add_role_action.article_publisher.yml
+++ b/config/default/system.action.user_add_role_action.article_publisher.yml
@ -0,0 +1,14 @@
+uuid: 8994a8bf-14e3-4f6c-96ea-e0d69a799a7b
+langcode: en
+status: true
+dependencies:
+  config:
+    - user.role.article_publisher
+  module:
+    - user
+id: user_add_role_action.article_publisher
+label: 'Add the Article Publisher role to the selected user(s)'
+type: user
+plugin: user_add_role_action
+configuration:
+  rid: article_publisher
--- a/config/default/system.action.user_add_role_action.content_editor.yml
+++ b/config/default/system.action.user_add_role_action.content_editor.yml
@ -1,14 +0,0 @@
-uuid: 5bc749de-6689-4275-9eca-ae490faf3a03
-langcode: en
-status: true
-dependencies:
-  config:
-    - user.role.content_editor
-  module:
-    - user
-id: user_add_role_action.content_editor
-label: 'Add the Content editor role to the selected user(s)'
-type: user
-plugin: user_add_role_action
-configuration:
-  rid: content_editor
--- a/config/default/system.action.user_remove_role_action.article_publisher.yml
+++ b/config/default/system.action.user_remove_role_action.article_publisher.yml
@ -0,0 +1,14 @@
+uuid: 992add39-d908-432d-a4e1-207ec10525fc
+langcode: en
+status: true
+dependencies:
+  config:
+    - user.role.article_publisher
+  module:
+    - user
+id: user_remove_role_action.article_publisher
+label: 'Remove the Article Publisher role from the selected user(s)'
+type: user
+plugin: user_remove_role_action
+configuration:
+  rid: article_publisher
--- a/config/default/system.action.user_remove_role_action.content_editor.yml
+++ b/config/default/system.action.user_remove_role_action.content_editor.yml
@ -1,14 +0,0 @@
-uuid: 33929f2e-ac25-4617-acc2-77c8d63804fc
-langcode: en
-status: true
-dependencies:
-  config:
-    - user.role.content_editor
-  module:
-    - user
-id: user_remove_role_action.content_editor
-label: 'Remove the Content editor role from the selected user(s)'
-type: user
-plugin: user_remove_role_action
-configuration:
-  rid: content_editor
--- a/config/default/user.role.article_publisher.yml
+++ b/config/default/user.role.article_publisher.yml
@ -0,0 +1,22 @@
+uuid: 1618ab23-bc39-4092-9519-050c320a1289
+langcode: en
+status: true
+dependencies:
+  config:
+    - node.type.article
+  module:
+    - node
+id: article_publisher
+label: 'Article Publisher'
+weight: 4
+is_admin: null
+permissions:
+  - 'create article content'
+  - 'delete any article content'
+  - 'delete article revisions'
+  - 'delete own article content'
+  - 'edit any article content'
+  - 'edit own article content'
+  - 'revert article revisions'
+  - 'view article revisions'
+  - 'view own unpublished content'
--- a/config/default/user.role.content_editor.yml
+++ b/config/default/user.role.content_editor.yml
@ -1,45 +0,0 @@
-uuid: 04d81b0e-6142-474a-943f-dbce73dcda0d
-langcode: en
-status: true
-dependencies:
-  config:
-    - node.type.article
-    - node.type.page
-    - taxonomy.vocabulary.tags
-  module:
-    - contextual
-    - file
-    - node
-    - path
-    - system
-    - taxonomy
-    - toolbar
-_core:
-  default_config_hash: e_wG1u7SrGaJbY2-Szgbgl-c8T3kdirU3uTNq2c_QJQ
-id: content_editor
-label: 'Content editor'
-weight: 2
-is_admin: false
-permissions:
-  - 'access administration pages'
-  - 'access content overview'
-  - 'access contextual links'
-  - 'access files overview'
-  - 'access toolbar'
-  - 'administer url aliases'
-  - 'create article content'
-  - 'create page content'
-  - 'create terms in tags'
-  - 'create url aliases'
-  - 'delete article revisions'
-  - 'delete own article content'
-  - 'delete own files'
-  - 'delete own page content'
-  - 'delete page revisions'
-  - 'edit own article content'
-  - 'edit own page content'
-  - 'edit terms in tags'
-  - 'revert all revisions'
-  - 'view all revisions'
-  - 'view own unpublished content'
-  - 'view the administration theme'
--- a/config/default/views.view.articles.yml
+++ b/config/default/views.view.articles.yml
@ -5,7 +5,7 @@ dependencies:
  config:
    - field.storage.node.body
    - field.storage.node.field_article_image
-    - image.style.medium
+    - image.style.large
    - node.type.article
  module:
    - media
@ -28,53 +28,6 @@ display:
    display_options:
      title: Articles
      fields:
-        title:
-          id: title
-          table: node_field_data
-          field: title
-          relationship: none
-          group_type: group
-          admin_label: ''
-          entity_type: node
-          entity_field: title
-          plugin_id: field
-          label: ''
-          exclude: false
-          alter:
-            alter_text: false
-            make_link: false
-            absolute: false
-            word_boundary: false
-            ellipsis: false
-            strip_tags: false
-            trim: false
-            html: false
-          element_type: ''
-          element_class: ''
-          element_label_type: ''
-          element_label_class: ''
-          element_label_colon: true
-          element_wrapper_type: ''
-          element_wrapper_class: ''
-          element_default_classes: true
-          empty: ''
-          hide_empty: false
-          empty_zero: false
-          hide_alter_empty: true
-          click_sort_column: value
-          type: string
-          settings:
-            link_to_entity: true
-          group_column: value
-          group_columns: {  }
-          group_rows: true
-          delta_limit: 0
-          delta_offset: 0
-          delta_reversed: false
-          delta_first_last: false
-          multi_type: separator
-          separator: ', '
-          field_api_classes: false
        field_article_image:
          id: field_article_image
          table: node__field_article_image
@ -128,7 +81,7 @@ display:
          type: media_thumbnail
          settings:
            image_link: content
-            image_style: medium
+            image_style: large
            image_loading:
              attribute: lazy
          group_column: target_id
@ -141,6 +94,71 @@ display:
          multi_type: separator
          separator: ', '
          field_api_classes: false
+        title:
+          id: title
+          table: node_field_data
+          field: title
+          relationship: none
+          group_type: group
+          admin_label: ''
+          entity_type: node
+          entity_field: title
+          plugin_id: field
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: false
+            ellipsis: false
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: h4
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: string
+          settings:
+            link_to_entity: true
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
        changed:
          id: changed
          table: node_field_data
@ -195,12 +213,12 @@ display:
          click_sort_column: value
          type: timestamp
          settings:
-            date_format: fallback
-            custom_date_format: ''
+            date_format: custom
+            custom_date_format: 'm/d/Y h:s A'
            timezone: ''
            tooltip:
-              date_format: fallback
-              custom_date_format: ''
+              date_format: custom
+              custom_date_format: 'm/d/Y h:s A'
            time_diff:
              enabled: false
              future_format: '@interval hence'
@ -361,14 +379,13 @@ display:
          value:
            article: article
      style:
-        type: html_list
+        type: grid_responsive
        options:
-          row_class: ''
-          default_row_class: true
-          uses_fields: false
-          type: ul
-          wrapper_class: item-list
-          class: ''
+          grouping: {  }
+          columns: 4
+          cell_min_width: 100
+          grid_gutter: 10
+          alignment: horizontal
      row:
        type: fields
        options:
--- a/web/themes/custom/dchadwick/css/style.css
+++ b/web/themes/custom/dchadwick/css/style.css
@ -1,6 +1,8 @@
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
 :root {
  --site-primary: #009FB7;
+  --site-primary-light: #01bfdb;
+  --site-gray: #565264;
  --site-secondary: #FED766;
  --site-white: #F4F4F8;
  --site-platinum: #E6E6EA;
@ -17,6 +19,24 @@ h1.center {
  width: 100%;
 }

+h2 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin: 10px 0;
+}
+
+h3 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 10px 0;
+}
+
+h4 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 10px 0;
+}
+
 #block-dchadwick-primary-local-tasks {
  width: 100%;
 }
@ -41,7 +61,7 @@ h1.center {
  color: var(--site-primary);
 }

-.btn-primary {
+.btn-primary a {
  background: var(--site-primary) !important;
  color: var(--site-white);
  cursor: pointer;
@ -50,7 +70,7 @@ h1.center {
  border: none;
  border-radius: 5px;
 }
-.btn-primary:hover {
+.btn-primary a:hover {
  background: var(--site-white);
  color: var(--site-secondary);
 }
@ -106,18 +126,6 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover {
  color: var(--site-white);
 }

-@media screen and (max-width: 1300px) {
-  #block-dchadwick-main-menu {
-    margin-right: 50px;
-  }
-  #block-dchadwick-site-branding {
-    margin-left: 50px;
-  }
-  header#header {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-}
 #footer {
  display: flex;
  background: var(--site-primary);
@ -441,54 +449,58 @@ table.cols-5 td.incorrect {
 }

 .node-type-article .hero {
-  position: relative;
-  max-height: 60vh;
-  overflow: hidden;
+  padding: 30px 0;
 }
-.node-type-article .hero img {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-}
-.node-type-article .hero h1 {
-  width: 100%;
-  flex-basis: 100%;
-  color: var(--site-primary);
+.node-type-article .article-intro h1 {
  margin: 0;
-}
-.node-type-article .article-intro {
-  display: flex;
-  position: absolute;
-  top: 50%;
-  height: auto;
-  background: rgba(254, 215, 101, 0.9);
+  font-size: 56px;
  color: var(--site-white);
-  flex-direction: row;
-  flex-wrap: wrap;
-  padding: 20px 30px;
-  transform: translateY(-50%);
-}
-@media screen and (min-width: 1300px) {
-  .node-type-article .article-intro {
-    left: calc((100vw - 1300px) / 2);
-  }
-}
-.node-type-article .article-intro > div {
-  flex: 1;
 }
 .node-type-article #article-body {
-  display: flex;
-  padding: 20px;
+  display: block;
+  margin-top: 20px;
 }
 .node-type-article .left-side {
-  flex: 2;
+  display: inline-block;
+  width: 75%;
+}
+.node-type-article .left-side .article-info {
+  background: var(--site-platinum);
+  padding: 10px;
+  gap: 20px;
+  display: inline-flex;
+  justify-content: space-evenly;
+  align-items: center;
+  font-size: 14px;
+  color: var(--site-gray);
+  margin-bottom: 10px;
+}
+.node-type-article .left-side .article-info .info-item {
+  display: flex;
+  align-items: center;
+}
+.node-type-article .left-side .article-info .info-item span {
+  margin-right: 3px;
+  color: var(--site-primary);
 }
 .node-type-article .left-side p {
  font-size: 16px;
  line-height: 24px;
 }
 .node-type-article .right-side {
-  flex: 1;
+  display: inline-block;
+  vertical-align: top;
+  width: 24%;
+  text-align: center;
+  right: 0;
+}
+.node-type-article .right-side.fixed-sidebar {
+  position: fixed;
+  top: 0;
+  right: 25px;
+  background: var(--site-secondary);
+  color: var(--site-primary);
+  transition: all 0.2s ease-in-out;
 }

 html {
@ -521,7 +533,16 @@ img {
  max-height: 100%;
 }

+p {
+  color: var(--site-gray);
+}
+
 .container {
  max-width: 1300px;
  margin: auto;
 }
+@media screen and (max-width: 1300px) {
+  .container {
+    margin: 0 50px;
+  }
+}
--- a/web/themes/custom/dchadwick/dchadwick.libraries.yml
+++ b/web/themes/custom/dchadwick/dchadwick.libraries.yml
@ -27,3 +27,10 @@ brainjs:
  js:
    https://unpkg.com/brain.js@2.0.0-beta.23/dist/browser.js: { type: external, attributes: { async: true }}

+articles:
+  js:
+    js/articles.js: { }
+  dependencies:
+    - core/drupal
+    - core/once
+
--- a/web/themes/custom/dchadwick/dchadwick.theme
+++ b/web/themes/custom/dchadwick/dchadwick.theme
@ -12,6 +12,10 @@ function dchadwick_preprocess_html(&$variables) {
  }
 }

+function dchadwick_preprocess_node__article(&$vars) {
+  $vars['#attached']['library'] = 'dchadwick/articles';
+}
+
 function dchadwick_page_attachments_alter(&$page) {
  $page['#attached']['library'][] = 'dchadwick/brainjs';
 }
--- a/web/themes/custom/dchadwick/js/articles.js
+++ b/web/themes/custom/dchadwick/js/articles.js
@ -0,0 +1,32 @@
+/**
+ * @file
+ * Claro's enhancement for autocomplete form element.
+ */
+
+// cspell:ignore is-autocompleting
+
+((Drupal, once) => {
+  Drupal.behaviors.articleBehaviors = {
+    attach(context) {
+      let rightSidebar = once('articleBehavior', '#article-body .right-side', context);
+      let anchor = document.querySelector('.right-side').offsetTop;
+
+      const seeIfSticky = (element) => {
+        // get right sidebar scroll top.
+        let jumpLinks = document.querySelector('.right-side');
+        var curScroll = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
+        console.log(curScroll + ":: jumpPos: " + anchor);
+        if (curScroll >= anchor) {
+          jumpLinks.classList.add('fixed-sidebar');
+        }
+        else if (curScroll < anchor) {
+          jumpLinks.classList.remove('fixed-sidebar');
+        }
+      };
+
+      rightSidebar.forEach(function(elem) {
+        document.addEventListener("scroll", seeIfSticky);
+      });
+    },
+  };
+})(Drupal, once);
--- a/web/themes/custom/dchadwick/src/sass/partials/article.scss
+++ b/web/themes/custom/dchadwick/src/sass/partials/article.scss
@ -1,55 +1,50 @@
 .node-type-article {
+
  .hero {
-    position: relative;
-    max-height: 60vh;
-    overflow: hidden;
-
-    img {
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
-
-    h1 {
-      // display: block;
-      width: 100%;
-      flex-basis: 100%;
-      color: var(--site-primary);
-      margin: 0;
-    }
+    padding: 30px 0;
  }

  .article-intro {
-    display: flex;
-    position: absolute;
-    top: 50%;
-    height: auto;
-    background: rgba(254, 215, 101, 0.9);
+
+    h1 {
+      margin: 0;
+      font-size: 56px;
      color: var(--site-white);
-    flex-direction: row;
-    flex-wrap: wrap;
-    padding: 20px 30px;
-    transform: translateY(-50%);
-
-    @media screen and (min-width: $container-full) {
-      left: calc((100vw - $container-full) / 2);
-    }
-
-    > div {
-      flex: 1;
+      // max-width: 70%;
    }
  }

  #article-body {
-    display: flex;
-    padding: 20px;
-
-
+    display: block;
+    margin-top: 20px;
  }

-
  .left-side {
-    flex: 2;
+    display: inline-block;
+    width: 75%;
+
+    .article-info {
+      background: var(--site-platinum);
+      padding: 10px;
+      gap: 20px;
+      display: inline-flex;
+      justify-content: space-evenly;
+      align-items: center;
+      font-size: 14px;
+      color: var(--site-gray);
+      margin-bottom: 10px;
+
+      .info-item {
+        display: flex;
+        align-items: center;
+
+        span {
+          margin-right: 3px;
+          color: var(--site-primary);
+        }
+      }
+    }
+
    p {
      font-size: 16px;
      line-height: 24px;
@ -57,7 +52,20 @@
  }

  .right-side {
-    flex: 1;
+    display: inline-block;
+    vertical-align: top;
+    width: 24%;
+    text-align: center;
+    right: 0;
+
+    &.fixed-sidebar {
+      position: fixed;
+      top: 0;
+      right: 25px;
+      background: var(--site-secondary);
+      color: var(--site-primary);
+      transition: all .2s ease-in-out;
+    }
  }
 }

--- a/web/themes/custom/dchadwick/src/sass/partials/buttons.scss
+++ b/web/themes/custom/dchadwick/src/sass/partials/buttons.scss
@ -1,4 +1,4 @@
-.btn-primary {
+.btn-primary a {
  background: var(--site-primary) !important;
  color: var(--site-white);
  cursor: pointer;
--- a/web/themes/custom/dchadwick/src/sass/partials/header.scss
+++ b/web/themes/custom/dchadwick/src/sass/partials/header.scss
@ -60,16 +60,16 @@ header#header {
  }
 }

-@media screen and (max-width: $container-full) {
-  #block-dchadwick-main-menu {
-    margin-right: 50px;
-  }
-  #block-dchadwick-site-branding {
-    margin-left: 50px;
-  }
-  header#header {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-}
+// @media screen and (max-width: $container-full) {
+//   #block-dchadwick-main-menu {
+//     margin-right: 50px;
+//   }
+//   #block-dchadwick-site-branding {
+//     margin-left: 50px;
+//   }
+//   header#header {
+//     padding-left: 20px;
+//     padding-right: 20px;
+//   }
+// }

--- a/web/themes/custom/dchadwick/src/sass/partials/headings.scss
+++ b/web/themes/custom/dchadwick/src/sass/partials/headings.scss
@ -7,3 +7,21 @@ h1 {
    width: 100%;
  }
 }
+
+h2 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin: 10px 0;
+}
+
+h3 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 10px 0;
+}
+
+h4 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 10px 0;
+}
--- a/web/themes/custom/dchadwick/src/sass/style.scss
+++ b/web/themes/custom/dchadwick/src/sass/style.scss
@ -1,6 +1,8 @@
 // Colors.
 :root {
  --site-primary: #009FB7;
+  --site-primary-light: #01bfdb;
+  --site-gray: #565264;
  --site-secondary: #FED766;
  --site-white: #F4F4F8;
  --site-platinum: #E6E6EA;
@ -76,8 +78,16 @@ img {
  max-height: 100%;
 }

+p {
+  color: var(--site-gray);
+}
+
 .container {
  max-width: $container-full;
  margin: auto;
+
+  @media screen and (max-width: $container-full) {
+    margin: 0 50px;
+  }
 }

--- a/web/themes/custom/dchadwick/templates/node/node--article.html.twig
+++ b/web/themes/custom/dchadwick/templates/node/node--article.html.twig
@ -61,21 +61,33 @@
 *
 */
 #}
+{% set bannerColor = content.field_banner_color.0['#markup']|default('#fff') %}
 <article{{ attributes }}>
-
-  <div class="hero">
-    {{ content.field_article_image }}
-    <div class="article-intro">
+  <div class="hero" style="background-color:{{ bannerColor }}">
+    {# content.field_article_image #}
+    <div class="article-intro container">
      {{ title_prefix }}
-      <h1>{{ label }}</h1>
+      {% embed 'dchadwick:heading' with {
+        level: 1,
+      }%}
+        {% block text %}
+          {{ node.getTitle() }}
+        {% endblock %}
+      {% endembed %}
      {{ title_suffix }}
-      <span class="material-icons md-24">calendar_month</span>{{ date }}
-      <span class="material-icons md-24">schedule</span>{{ content.field_read_time|default('1 minute read time') }}
    </div>
  </div>

  <div id="article-body" class="container">
    <div class="left-side">
+      <div class="article-info">
+        <div class="info-item">
+          <span class="material-icons md-24">calendar_month</span>{{ node.changed.value|date("m/d/Y h:i A") }}
+        </div>
+        <div class="info-item">
+          <span class="material-icons md-24">schedule</span>{{ content.field_read_time|default('1 minute read time') }}
+        </div>
+      </div>
      {{ content.body }}
    </div>
    <div class="right-side">
--- a/web/themes/custom/dchadwick/templates/system/page.html.twig
+++ b/web/themes/custom/dchadwick/templates/system/page.html.twig
@ -1,3 +1,11 @@
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-47TH3K5YXH"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'G-47TH3K5YXH');
+</script>
 <header aria-label="Site header" class="header" id="header" role="banner">
  {{ page.navigation }}
 </header>