Switching to manual ga tagging.

This commit is contained in:
Dan Chadwick 2024-09-22 14:51:34 -04:00
parent 95813b49f2
commit ed270d842d
24 changed files with 422 additions and 248 deletions

View File

@ -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",

58
composer.lock generated
View File

@ -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",

View File

@ -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

View File

@ -23,6 +23,7 @@ module:
field_ui: 0
file: 0
filter: 0
fpa: 0
gin_login: 0
gin_toolbar: 0
help: 0

View File

@ -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

View File

@ -19,5 +19,5 @@ settings:
min: null
max: null
prefix: ''
suffix: 'minute read time'
suffix: ' minute read time'
field_type: integer

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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'

View File

@ -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'

View File

@ -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:

View File

@ -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;
}
}

View File

@ -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

View File

@ -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';
}

View File

@ -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);

View File

@ -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);
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;
h1 {
margin: 0;
font-size: 56px;
color: var(--site-white);
// 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;
}
}
}

View File

@ -1,4 +1,4 @@
.btn-primary {
.btn-primary a {
background: var(--site-primary) !important;
color: var(--site-white);
cursor: pointer;

View File

@ -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;
// }
// }

View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -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">

View File

@ -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>