Some more styles and things.

config/default/editor.editor.basic_html.yml

@@ -13,8 +13,11 @@ editor: ckeditor5
 settings:
   toolbar:
     items:
+      - heading
+      - alignment
       - bold
       - italic
+      - underline
       - '|'
       - link
       - '|'
@@ -22,13 +25,69 @@ settings:
       - numberedList
       - '|'
       - blockQuote
-      - drupalInsertImage
       - '|'
-      - heading
+      - drupalMedia
       - code
+      - codeBlock
       - '|'
       - sourceEditing
   plugins:
+    ckeditor5_alignment:
+      enabled_alignments:
+        - center
+        - justify
+        - left
+        - right
+    ckeditor5_codeBlock:
+      languages:
+        -
+          label: 'Plain text'
+          language: plaintext
+        -
+          label: C
+          language: c
+        -
+          label: 'C#'
+          language: cs
+        -
+          label: C++
+          language: cpp
+        -
+          label: CSS
+          language: css
+        -
+          label: Diff
+          language: diff
+        -
+          label: HTML
+          language: html
+        -
+          label: Java
+          language: java
+        -
+          label: JavaScript
+          language: javascript
+        -
+          label: PHP
+          language: php
+        -
+          label: Python
+          language: python
+        -
+          label: Ruby
+          language: ruby
+        -
+          label: TypeScript
+          language: typescript
+        -
+          label: XML
+          language: xml
+        -
+          label: YAML
+          language: yml
+        -
+          label: JSON
+          language: json
     ckeditor5_heading:
       enabled_headings:
         - heading2
@@ -36,8 +95,6 @@ settings:
         - heading4
         - heading5
         - heading6
-    ckeditor5_imageResize:
-      allow_resize: true
     ckeditor5_list:
       properties:
         reversed: false

config/default/filter.format.basic_html.yml

@@ -35,7 +35,7 @@ filters:
     status: true
     weight: -10
     settings:
-      allowed_html: '<br> <p> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <cite> <dl> <dt> <dd> <a hreflang href> <blockquote cite> <ul type> <ol type start> <strong> <em> <code> <li> <img src alt height width data-entity-uuid data-entity-type data-caption data-align> <drupal-media data-entity-type data-entity-uuid alt data-caption data-align>'
+      allowed_html: '<br> <p class="text-align-left text-align-center text-align-right text-align-justify"> <h2 id class="text-align-left text-align-center text-align-right text-align-justify"> <h3 id class="text-align-left text-align-center text-align-right text-align-justify"> <h4 id class="text-align-left text-align-center text-align-right text-align-justify"> <h5 id class="text-align-left text-align-center text-align-right text-align-justify"> <h6 id class="text-align-left text-align-center text-align-right text-align-justify"> <cite> <dl> <dt> <dd> <a hreflang href> <blockquote cite> <ul type> <ol type start> <strong> <em> <u> <code class="language-*"> <pre class="text-align-left text-align-center text-align-right text-align-justify"> <li> <drupal-media data-entity-type data-entity-uuid alt data-caption data-align>'
       filter_html_help: false
       filter_html_nofollow: false
   filter_html_image_secure:

web/themes/custom/dchadwick/css/style.css

@@ -143,6 +143,11 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover {
   margin: 0;
 }
 
+blockquote {
+  font-style: italic;
+  border-left: 1px solid var(--site-primary);
+}
+
 .table {
   width: auto;
   margin: auto;
@@ -474,6 +479,7 @@ table.cols-5 td.incorrect {
   font-size: 14px;
   color: var(--site-gray);
   margin-bottom: 10px;
+  border-radius: 10px;
 }
 .node-type-article .left-side .article-info .info-item {
   display: flex;
@@ -487,26 +493,54 @@ table.cols-5 td.incorrect {
   font-size: 16px;
   line-height: 24px;
 }
+.node-type-article .left-side img {
+  border-radius: 10px;
+}
 .node-type-article .right-side {
   display: inline-block;
   vertical-align: top;
   width: 24%;
-  text-align: center;
+  text-align: left;
   right: 0;
 }
+.node-type-article .right-side ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 5px;
+  padding-left: 10px;
+  border-left: 2px solid var(--site-primary);
+}
+.node-type-article .right-side ul li a {
+  display: inline-block;
+  margin-left: 20px;
+  width: 100%;
+  margin: 20px 0;
+  font-size: 18px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  text-decoration-thickness: 0px;
+}
+.node-type-article .right-side ul li a:hover {
+  color: var(--site-gray);
+  text-decoration: underline;
+  text-decoration-thickness: 5px;
+}
 .node-type-article .right-side.fixed-sidebar {
   position: fixed;
   top: 0;
-  right: 25px;
+  right: 34px;
-  background: var(--site-secondary);
-  color: var(--site-primary);
-  transition: all 0.2s ease-in-out;
 }
 
 html {
   font-size: 100%;
   box-sizing: border-box;
   overflow-x: hidden;
+  scroll-behavior: smooth;
 }
 
 .region-content {
@@ -546,3 +580,15 @@ p {
     margin: 0 50px;
   }
 }
+
+blockquote {
+  font-style: italic;
+  border-left: 1px solid var(--site-primary);
+  padding-left: 20px;
+}
+
+pre {
+  background: #414559;
+  color: #c6d0f5;
+  padding: 10px;
+}

web/themes/custom/dchadwick/js/articles.js

@@ -9,22 +9,45 @@
   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) {
+        let anchor = document.querySelector('.right-side').offsetTop;
+        // get all headings.
+        let headings = context.querySelectorAll(".article-content h2, h3, h4, h5, h6");
+        // create an <ol>
+        // add each item as <li><a href="#name">Text</a></li>
+        let jumpLinks = document.createElement('ul');
+        headings.forEach(function(heading) {
+          if (heading.classList.contains("visually-hidden")) {
+            return;
+          }
+          // convert text to a name.
+          let headingText = heading.innerText;
+          let headingId = headingText.replace(/\s+/g, '-').toLowerCase();
+          // set as the id.
+          heading.id = headingId;
+          let listElement = document.createElement('li');
+          let listElementLink = document.createElement('a');
+          listElementLink.href = "#" + headingId;
+          listElementLink.innerText = headingText;
+          listElement.appendChild(listElementLink)
+          jumpLinks.appendChild(listElement);
+        });
+        elem.innerHTML = "";
+        elem.append(jumpLinks);
+        // Function to check if the nav should stick.
+        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;
+          if (curScroll >= anchor) {
+            jumpLinks.classList.add('fixed-sidebar');
+          }
+          else if (curScroll < anchor) {
+            jumpLinks.classList.remove('fixed-sidebar');
+          }
+        };
         document.addEventListener("scroll", seeIfSticky);
       });
     },

web/themes/custom/dchadwick/src/sass/partials/article.scss

@@ -5,12 +5,10 @@
   }
 
   .article-intro {
-
     h1 {
       margin: 0;
       font-size: 56px;
       color: var(--site-white);
-      // max-width: 70%;
     }
   }
 
@@ -33,6 +31,7 @@
       font-size: 14px;
       color: var(--site-gray);
       margin-bottom: 10px;
+      border-radius: 10px;
 
       .info-item {
         display: flex;
@@ -49,22 +48,53 @@
       font-size: 16px;
       line-height: 24px;
     }
+
+    img {
+      border-radius: 10px;
+    }
   }
 
   .right-side {
     display: inline-block;
     vertical-align: top;
     width: 24%;
-    text-align: center;
+    text-align: left;
     right: 0;
 
+    ul {
+      list-style-type: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      flex-wrap: wrap;
+      margin-left: 5px;
+      padding-left: 10px;
+      border-left: 2px solid var(--site-primary);
+
+      li a {
+        display: inline-block;
+        margin-left: 20px;
+        width: 100%;
+        margin: 20px 0;
+        font-size: 18px;
+        font-weight: 700;
+        cursor: pointer;
+        transition: all .2s ease;
+        text-decoration: none;
+        text-decoration-thickness: 0px;
+
+        &:hover {
+          color: var(--site-gray);
+          text-decoration: underline;
+          text-decoration-thickness: 5px;
+        }
+      }
+    }
+
     &.fixed-sidebar {
       position: fixed;
       top: 0;
-      right: 25px;
+      right: 34px;
-      background: var(--site-secondary);
-      color: var(--site-primary);
-      transition: all .2s ease-in-out;
     }
   }
 }

web/themes/custom/dchadwick/src/sass/partials/main.scss

@@ -1,8 +1,4 @@
-main {
+blockquote {
-  // max-width: $container-full;
+  font-style: italic;
-  // margin: auto;
+  border-left: 1px solid var(--site-primary);
-}
-
-#main  {
-  // z-index: 501;
 }

web/themes/custom/dchadwick/src/sass/style.scss

@@ -52,6 +52,7 @@ html {
   font-size: 100%;
   box-sizing: border-box;
   overflow-x: hidden;
+  scroll-behavior: smooth;
 }
 
 .region-content {
@@ -91,3 +92,15 @@ p {
   }
 }
 
+blockquote {
+  font-style: italic;
+  border-left: 1px solid var(--site-primary);
+  padding-left: 20px;
+}
+
+pre {
+  background: #414559;
+  color: #c6d0f5;
+  padding: 10px;
+}
+

web/themes/custom/dchadwick/templates/node/node--article.html.twig

@@ -82,21 +82,21 @@
     <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") }}
+          <span class="material-icons md-24">calendar_month</span>{{ node.changed.value|date("m/d/Y") }}
         </div>
         <div class="info-item">
-          <span class="material-icons md-24">schedule</span>{{ content.field_read_time|default('1 minute read time') }}
+          <span class="material-icons md-24">schedule</span>{{ node.changed.value|date("h:i A") }}
+        </div>
+        <div class="info-item">
+          <span class="material-icons md-24">hourglass_top</span>{{ content.field_read_time|default('1 minute read time') }}
         </div>
       </div>
-      {{ content.body }}
+      <div class="article-content">
+        {{ content.body }}
+      </div>
     </div>
     <div class="right-side">
       <p>This is where link block goes</p>
-      <p>This is where link block goes</p>
-      <p>This is where link block goes</p>
-      <p>This is where link block goes</p>
-      <p>This is where link block goes</p>
-      <p>This is where link block goes</p>
     </div>
   </div>
 

web/themes/custom/dchadwick/templates/system/page.html.twig

@@ -1,11 +1,3 @@
-<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>
@@ -22,20 +14,6 @@
    </main>
 </section>
 <footer aria-label="Site footer" class="footer" id="footer" role="contentinfo">
-  {# include('dchadwick:button', {text: 'Click me', type: 'danger'}, with_context = false) #}
-
-  {# embed 'dchadwick:accordion' %}
-
-    {% block accordion_title %}
-      Click Me!
-    {% endblock %}
-
-    {% block accordion_content %}
-      Here is some content that goes in the place where the body is.
-    {% endblock %}
-
-  {% endembed #}
-
    <div class="footer--bottom">
        {{ page.footer_bottom }}
    </div>