@data-visuals/create 7.6.5 → 7.6.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/templates/__common__/app/styles/components/_graphic.scss +1 -1
- package/templates/__common__/app/templates/includes/figma2html-config.html +1 -1
- package/templates/__common__/config/tasks/graphics-meta.js +2 -0
- package/templates/feature/app/index.html +186 -83
- package/templates/feature/app/scripts/components/RelatedContent.js +30 -8
- package/templates/feature/app/scripts/components/Story.js +71 -34
- package/templates/feature/app/scripts/kickstart.js +9 -3
- package/templates/feature/app/scripts/utils/feeds.js +51 -1
- package/templates/feature/app/styles/components/_authors.scss +21 -0
- package/templates/feature/app/styles/components/_brief-promo.scss +27 -0
- package/templates/feature/app/styles/components/_images.scss +19 -0
- package/templates/feature/app/styles/components/_related-content.scss +39 -0
- package/templates/feature/app/styles/main-queso.scss +4 -0
- package/templates/feature/app/templates/base.html +93 -92
- package/templates/feature/app/templates/includes/authors.html +98 -0
- package/templates/feature/app/templates/includes/brief-promo.html +36 -0
- package/templates/feature/app/templates/includes/contributors.html +85 -0
- package/templates/feature/app/templates/includes/svg-defs.html +6 -2
- package/templates/feature/app/templates/includes/trust-project.html +34 -0
- package/templates/feature/app/templates/macros/processors-queso.html +32 -0
package/package.json
CHANGED
|
@@ -21,6 +21,6 @@
|
|
|
21
21
|
if (frames.length == 2) {
|
|
22
22
|
style.textContent = '#f2h-frame-664 { display: block !important; } #f2h-frame-320 { display: none !important; } @media (max-width: 663px) { #f2h-frame-664 { display: none !important; } #f2h-frame-320 { display: block !important; }}'
|
|
23
23
|
} else {
|
|
24
|
-
style.textContent = '#f2h-frame-
|
|
24
|
+
style.textContent = '#f2h-frame-1140 { display: block !important; } #f2h-frame-664, #f2h-frame-320 { display: none !important; } @media (max-width: 1039px) { #f2h-frame-1140, #f2h-frame-320 { display: none !important; } #f2h-frame-664 { display: block !important; }} @media (max-width: 663px) { #f2h-frame-1140, #f2h-frame-664 { display: none !important; } #f2h-frame-320 { display: block !important; }}'
|
|
25
25
|
}
|
|
26
26
|
</script>
|
|
@@ -281,6 +281,8 @@ module.exports = async localURL => {
|
|
|
281
281
|
const browser = await puppeteer
|
|
282
282
|
.launch({
|
|
283
283
|
executablePath: process.env.CHROME_INSTALL_PATH || CHROME_INSTALL_PATH,
|
|
284
|
+
// Hot fix on puppeteer in Feb 2025
|
|
285
|
+
headless: false,
|
|
284
286
|
})
|
|
285
287
|
.catch(err => {
|
|
286
288
|
logErrorMessage(err);
|
|
@@ -1,88 +1,191 @@
|
|
|
1
|
-
{% extends 'base.html' %}
|
|
2
|
-
|
|
3
|
-
{%
|
|
4
|
-
|
|
5
|
-
{%
|
|
6
|
-
|
|
7
|
-
{%
|
|
8
|
-
{%
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
{% block
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
{%-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
{
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
{
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
{%
|
|
81
|
-
|
|
82
|
-
|
|
1
|
+
{% extends 'base.html' %} {% from 'macros/prose-queso.html' import prose %} {%
|
|
2
|
+
from 'macros/processors-queso.html' import ad %} {% set jsPackName = 'main' %}
|
|
3
|
+
{% set context = data.text %} {% set graphicTags = context.guten_tag %} {% set
|
|
4
|
+
authorComma = joiner() %} {% block google_fonts %}{# queso fonts found in CSS
|
|
5
|
+
#}{% endblock google_fonts %} {% block css_file %}
|
|
6
|
+
<link rel="stylesheet" href="{{ static('styles/min/main-queso.css') }}" />
|
|
7
|
+
{% endblock css_file %} {% block nav %}{% include 'components/navbar.html' %}{%
|
|
8
|
+
endblock %} {% block content_wrap %}
|
|
9
|
+
<main data-feature>
|
|
10
|
+
<article class="has-giant-btm-marg">
|
|
11
|
+
{% block content %}
|
|
12
|
+
<div class="has-page-padding has-giant-btm-marg">
|
|
13
|
+
<header class="t-align-center">
|
|
14
|
+
<h1
|
|
15
|
+
class="l-container l-container--m t-headline t-serif t-lh-s has-s-btm-marg"
|
|
16
|
+
data-title
|
|
17
|
+
>
|
|
18
|
+
{{ context.headline | widont or 'The only member-supported,
|
|
19
|
+
digital-first, nonpartisan media organization' | widont }}
|
|
20
|
+
</h1>
|
|
21
|
+
<p
|
|
22
|
+
class="t-byline t-links t-uppercase t-lsp-m t-size-xs has-text-gray-dark has-b-btm-marg"
|
|
23
|
+
>
|
|
24
|
+
<span class="t-byline__item"
|
|
25
|
+
>By
|
|
26
|
+
<span data-credit
|
|
27
|
+
>{%- for author in context.authors or ['Texas Tribune Staff'] -%}
|
|
28
|
+
{% if not loop.last %}{{ authorComma() }}{% elif not loop.first %}
|
|
29
|
+
and{% endif %} <span class="l-display-ib">{{ author }}</span> {%-
|
|
30
|
+
endfor -%}</span
|
|
31
|
+
>
|
|
32
|
+
</span>
|
|
33
|
+
|
|
34
|
+
{% if context.update_date %}
|
|
35
|
+
<span class="l-display-block">
|
|
36
|
+
<span class="t-byline__item"
|
|
37
|
+
>Published:
|
|
38
|
+
<time datetime="{{ context.pub_date }}"
|
|
39
|
+
>{{ apFormatDate(context.pub_date) }}</time
|
|
40
|
+
></span
|
|
41
|
+
>
|
|
42
|
+
<span class="t-byline__item"
|
|
43
|
+
>Updated:
|
|
44
|
+
<time datetime="{{ context.update_date }}"
|
|
45
|
+
>{{ apFormatDate(context.update_date) }}</time
|
|
46
|
+
></span
|
|
47
|
+
>
|
|
48
|
+
</span>
|
|
49
|
+
{% else %}
|
|
50
|
+
<span class="t-byline__item"
|
|
51
|
+
><time datetime="{{ context.pub_date }}"
|
|
52
|
+
>{{ apFormatDate(context.pub_date) }}</time
|
|
53
|
+
></span
|
|
54
|
+
>
|
|
55
|
+
{% endif %}
|
|
56
|
+
</p>
|
|
57
|
+
</header>
|
|
58
|
+
|
|
59
|
+
<div
|
|
60
|
+
class="c-details t-size-xs t-uppercase t-lsp-m t-lh-b has-text-black-off has-text-vert-padding has-s-btm-marg t-byline t-links t-uppercase t-lsp-m t-size-xs has-text-gray-dark has-page-padding t-align-center"
|
|
61
|
+
>
|
|
62
|
+
{% include 'components/share.html' %}
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div class="t-serif t-links-underlined has-page-padding">
|
|
67
|
+
{{ prose(context.prose, context, data) }} {# graphics are attached to this
|
|
68
|
+
container #}
|
|
69
|
+
<div id="graphic"></div>
|
|
70
|
+
|
|
71
|
+
<p class="t-copy">
|
|
72
|
+
Duis mattis orci a porta maximus. Pellentesque vel pellentesque augue, a
|
|
73
|
+
condimentum nibh. Integer eget feugiat turpis, at vehicula metus.
|
|
74
|
+
Vestibulum arcu dui, hendrerit sed purus sed, vulputate aliquam est.
|
|
75
|
+
Duis quis metus sed odio commodo dapibus. Maecenas pulvinar elit sit
|
|
76
|
+
amet lorem iaculis blandit. Aliquam vitae sollicitudin urna. Sed viverra
|
|
77
|
+
tincidunt felis.
|
|
78
|
+
</p>
|
|
79
|
+
|
|
80
|
+
{# Brief promo #} {% include "includes/brief-promo.html" %}
|
|
81
|
+
|
|
82
|
+
<p class="t-copy">
|
|
83
|
+
Duis mattis orci a porta maximus. Pellentesque vel pellentesque augue, a
|
|
84
|
+
condimentum nibh. Integer eget feugiat turpis, at vehicula metus.
|
|
85
|
+
Vestibulum arcu dui, hendrerit sed purus sed, vulputate aliquam est.
|
|
86
|
+
Duis quis metus sed odio commodo dapibus. Maecenas pulvinar elit sit
|
|
87
|
+
amet lorem iaculis blandit. Aliquam vitae sollicitudin urna. Sed viverra
|
|
88
|
+
tincidunt felis.
|
|
89
|
+
</p>
|
|
90
|
+
|
|
91
|
+
<h2 class="t-copy t-copy--subheader">
|
|
92
|
+
{{ 'A cool subhead here' | widont }}
|
|
93
|
+
</h2>
|
|
94
|
+
|
|
95
|
+
<p class="t-copy">
|
|
96
|
+
Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut.
|
|
97
|
+
Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget
|
|
98
|
+
ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi
|
|
99
|
+
hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis
|
|
100
|
+
urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien
|
|
101
|
+
volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget
|
|
102
|
+
turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit
|
|
103
|
+
ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui
|
|
104
|
+
eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex
|
|
105
|
+
rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac
|
|
106
|
+
nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget
|
|
107
|
+
placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at
|
|
108
|
+
magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet
|
|
109
|
+
arcu ut, interdum nulla.
|
|
110
|
+
</p>
|
|
111
|
+
|
|
112
|
+
<p class="t-copy">
|
|
113
|
+
Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc
|
|
114
|
+
eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra
|
|
115
|
+
commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet
|
|
116
|
+
ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada
|
|
117
|
+
urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia
|
|
118
|
+
lectus.
|
|
119
|
+
</p>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
{# use 'none' as the value if the ad should not have a gray background #} {#
|
|
123
|
+
do not put ads inside a container div #} {{ ad('gray') }} {# create another
|
|
124
|
+
container for more prose if the text needs to be split by an ad #}
|
|
125
|
+
<div class="t-serif t-links-underlined has-page-padding">
|
|
126
|
+
<p class="t-copy">
|
|
127
|
+
Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut.
|
|
128
|
+
Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget
|
|
129
|
+
ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi
|
|
130
|
+
hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis
|
|
131
|
+
urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien
|
|
132
|
+
volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget
|
|
133
|
+
turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit
|
|
134
|
+
ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui
|
|
135
|
+
eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex
|
|
136
|
+
rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac
|
|
137
|
+
nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget
|
|
138
|
+
placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at
|
|
139
|
+
magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet
|
|
140
|
+
arcu ut, interdum nulla.
|
|
141
|
+
</p>
|
|
142
|
+
|
|
143
|
+
<p class="t-copy">
|
|
144
|
+
Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc
|
|
145
|
+
eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra
|
|
146
|
+
commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet
|
|
147
|
+
ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada
|
|
148
|
+
urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia
|
|
149
|
+
lectus.
|
|
150
|
+
</p>
|
|
151
|
+
</div>
|
|
152
|
+
|
|
153
|
+
{{ ad('gray', 'footer') }} {# Authors and contributors #} {% include
|
|
154
|
+
"includes/authors.html" %} {% if context['contributors'] %} {% include
|
|
155
|
+
"includes/contributors.html" %} {% endif %} {# Trust project #} {% include
|
|
156
|
+
"includes/trust-project.html" %} {% endblock content %}
|
|
157
|
+
</article>
|
|
158
|
+
</main>
|
|
159
|
+
<aside>
|
|
160
|
+
{# Related story topics #}
|
|
161
|
+
<section
|
|
162
|
+
id="related-story-topics"
|
|
163
|
+
class="c-plugin c-plugin--default c-plugin--narrow is-hidden-print"
|
|
164
|
+
>
|
|
165
|
+
<h2 class="t-size-s has-xs-btm-marg">Explore related story topics</h2>
|
|
166
|
+
<p class="c-tags l-flex">
|
|
167
|
+
{% for topic in context['related_story_topics'] %}
|
|
168
|
+
<a
|
|
169
|
+
href="{{ topic['topic_link'] }}"
|
|
170
|
+
ga-event-category="article-tag"
|
|
171
|
+
class="c-tag c-tag__inner has-bg-white-off is-rounded-b"
|
|
172
|
+
>{{ topic['topic_title'] }}</a
|
|
173
|
+
>
|
|
174
|
+
{% endfor %}
|
|
175
|
+
</p>
|
|
176
|
+
</section>
|
|
177
|
+
|
|
178
|
+
{# Related stories #}
|
|
179
|
+
<div
|
|
180
|
+
class="related-content l-container has-page-padding"
|
|
181
|
+
id="related-content-container"
|
|
182
|
+
></div>
|
|
183
|
+
<div id="ribbon-container"></div>
|
|
184
|
+
</aside>
|
|
185
|
+
{% endblock content_wrap %} {% block inline_data %}
|
|
83
186
|
<script>
|
|
84
187
|
window.ttData = {
|
|
85
|
-
|
|
188
|
+
related_category: '{{ context.related_category or "politics" }}',
|
|
86
189
|
};
|
|
87
190
|
</script>
|
|
88
191
|
{% endblock inline_data %}
|
|
@@ -1,24 +1,44 @@
|
|
|
1
1
|
import { Component, h } from 'preact';
|
|
2
|
-
|
|
3
2
|
import Story from './Story';
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import {
|
|
4
|
+
BUILD_RELATED_CONTENT_URL_NEWSPACK,
|
|
5
|
+
mappingTaxonomy,
|
|
6
|
+
} from '../utils/feeds';
|
|
6
7
|
|
|
7
8
|
class RelatedContent extends Component {
|
|
8
9
|
constructor() {
|
|
9
10
|
super();
|
|
10
|
-
|
|
11
11
|
this.state = {
|
|
12
12
|
stories: [],
|
|
13
13
|
};
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
componentDidMount() {
|
|
17
|
-
const {
|
|
17
|
+
const { related_category, numberOfStories, taxonomy } = this.props;
|
|
18
|
+
|
|
19
|
+
mappingTaxonomy(taxonomy, related_category)
|
|
20
|
+
.then(term => {
|
|
21
|
+
if (!term) {
|
|
22
|
+
console.warn('No term found for tag or category');
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const itemId = term['fetched']['id'];
|
|
27
|
+
const taxonomyParam = taxonomy;
|
|
28
|
+
|
|
29
|
+
const url = BUILD_RELATED_CONTENT_URL_NEWSPACK({
|
|
30
|
+
taxonomy: taxonomyParam,
|
|
31
|
+
item: itemId,
|
|
32
|
+
numberOfStories,
|
|
33
|
+
});
|
|
18
34
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
35
|
+
return fetch(url)
|
|
36
|
+
.then(res => res.json())
|
|
37
|
+
.then(posts => {
|
|
38
|
+
this.setState({ stories: posts });
|
|
39
|
+
});
|
|
40
|
+
})
|
|
41
|
+
.catch(err => console.error('related content error:', err));
|
|
22
42
|
}
|
|
23
43
|
|
|
24
44
|
render({ title }, { stories }) {
|
|
@@ -40,6 +60,8 @@ class RelatedContent extends Component {
|
|
|
40
60
|
RelatedContent.defaultProps = {
|
|
41
61
|
numberOfStories: 4,
|
|
42
62
|
title: 'Read more',
|
|
63
|
+
// either categories or tags
|
|
64
|
+
taxonomy: 'categories',
|
|
43
65
|
};
|
|
44
66
|
|
|
45
67
|
export default RelatedContent;
|
|
@@ -1,39 +1,76 @@
|
|
|
1
|
-
import { h } from 'preact';
|
|
1
|
+
import { h, Component } from 'preact';
|
|
2
2
|
import { apdate } from 'journalize';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
4
|
+
class Story extends Component {
|
|
5
|
+
constructor(props) {
|
|
6
|
+
super(props);
|
|
7
|
+
this.state = {
|
|
8
|
+
altText: '',
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
componentDidMount() {
|
|
13
|
+
const { _links } = this.props;
|
|
14
|
+
const href = _links['wp:featuredmedia'][0].href;
|
|
15
|
+
if (!href) return;
|
|
16
|
+
|
|
17
|
+
fetch(href)
|
|
18
|
+
.then(res => res.json())
|
|
19
|
+
.then(images => {
|
|
20
|
+
let finalAlt = '';
|
|
21
|
+
|
|
22
|
+
if (images.alt_text) {
|
|
23
|
+
finalAlt = images.alt_text;
|
|
24
|
+
} else if (images.media_details.image_meta.caption) {
|
|
25
|
+
finalAlt = images.media_details.image_meta.caption;
|
|
26
|
+
} else if (typeof images.caption.rendered == 'string') {
|
|
27
|
+
finalAlt = images.caption.rendered.replace(/<[^>]+>/g, '');
|
|
28
|
+
} else {
|
|
29
|
+
finalAlt = 'Image for article';
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
this.setState({ altText: finalAlt });
|
|
33
|
+
})
|
|
34
|
+
.catch(err => {
|
|
35
|
+
console.error('Error fetching media:', err);
|
|
36
|
+
this.setState({ altText: 'Image for article' });
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
render({ title, link, date, jetpack_featured_media_url }, { altText }) {
|
|
41
|
+
return (
|
|
42
|
+
<article class="story">
|
|
43
|
+
<a
|
|
44
|
+
class="story-link dim"
|
|
45
|
+
href={link}
|
|
46
|
+
target="_blank"
|
|
47
|
+
ga-event-category="read more"
|
|
48
|
+
ga-event-action="automated by tag"
|
|
49
|
+
ga-event-label="apps page"
|
|
50
|
+
>
|
|
51
|
+
<div class="story-media c-story-block">
|
|
52
|
+
<div class="story-art c-story-block__image-wrap">
|
|
53
|
+
<img
|
|
54
|
+
src={jetpack_featured_media_url}
|
|
55
|
+
alt={altText}
|
|
56
|
+
class="l-width-full"
|
|
57
|
+
/>
|
|
58
|
+
</div>
|
|
59
|
+
<div class="story-text c-story-block__text">
|
|
60
|
+
<header class="story-header">
|
|
61
|
+
<h4 class="story-headline t-serif t-size-b t-lh-s has-xxxs-btm-marg">
|
|
62
|
+
{title['rendered']}
|
|
63
|
+
</h4>
|
|
64
|
+
<p class="story-byline t-byline t-links t-uppercase t-lsp-m t-size-xs has-text-gray-dark">
|
|
65
|
+
{apdate(new Date(date))}
|
|
66
|
+
</p>
|
|
67
|
+
</header>
|
|
68
|
+
</div>
|
|
32
69
|
</div>
|
|
33
|
-
</
|
|
34
|
-
</
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
70
|
+
</a>
|
|
71
|
+
</article>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
38
75
|
|
|
39
76
|
export default Story;
|
|
@@ -8,12 +8,15 @@ const relatedContentContainer = document.getElementById(
|
|
|
8
8
|
'related-content-container'
|
|
9
9
|
);
|
|
10
10
|
|
|
11
|
-
if (relatedContentContainer && window.ttData.
|
|
11
|
+
if (relatedContentContainer && window.ttData.related_category) {
|
|
12
12
|
import(
|
|
13
13
|
/* webpackChunkName: "RelatedContent" */ './components/RelatedContent'
|
|
14
14
|
).then(({ default: RelatedContent }) =>
|
|
15
15
|
render(
|
|
16
|
-
<RelatedContent
|
|
16
|
+
<RelatedContent
|
|
17
|
+
title={'Read more'}
|
|
18
|
+
related_category={window.ttData.related_category}
|
|
19
|
+
/>,
|
|
17
20
|
relatedContentContainer
|
|
18
21
|
)
|
|
19
22
|
);
|
|
@@ -31,7 +34,10 @@ if (relatedContentContainer && window.ttData.gutenTag) {
|
|
|
31
34
|
// ads
|
|
32
35
|
import(/* webpackChunkName: "ads" */ './utils/ad-loader').then(
|
|
33
36
|
({ default: AdLoader }) => {
|
|
34
|
-
const ads = new AdLoader(
|
|
37
|
+
const ads = new AdLoader({
|
|
38
|
+
targetingKey: 'tribpedia',
|
|
39
|
+
targetingValue: window.ttData.targetingValue,
|
|
40
|
+
});
|
|
35
41
|
ads.init();
|
|
36
42
|
}
|
|
37
43
|
);
|
|
@@ -3,4 +3,54 @@ const TRENDING_STORIES_URL =
|
|
|
3
3
|
const BUILD_RELATED_CONTENT_URL = ({ gutenTag, numberOfStories = 4 }) =>
|
|
4
4
|
`https://www.texastribune.org/api/v2/articles/?content_type=story,audio,video,pointer&tag=${gutenTag}&tag!=object-tribcast&fields=id,url,pub_date,headline,summary,sitewide_image&limit=${numberOfStories}&format=json`;
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
// Newspack API base URL
|
|
7
|
+
let BASE_NEWSPACK_API = 'https://www.texastribune.org/wp-json/wp/v2/';
|
|
8
|
+
|
|
9
|
+
const BUILD_RELATED_CONTENT_URL_NEWSPACK = ({
|
|
10
|
+
taxonomy,
|
|
11
|
+
item,
|
|
12
|
+
numberOfStories = 4,
|
|
13
|
+
}) =>
|
|
14
|
+
`${BASE_NEWSPACK_API}posts?
|
|
15
|
+
${taxonomy}=${item}&per_page=${numberOfStories}&orderby=date&order=desc`;
|
|
16
|
+
|
|
17
|
+
// Function to map taxonomy (categories or tags) to get the item ID
|
|
18
|
+
export async function mappingTaxonomy(type, string) {
|
|
19
|
+
// pick either categories or tags
|
|
20
|
+
const perPage = 100;
|
|
21
|
+
|
|
22
|
+
const base = `${BASE_NEWSPACK_API}${type}`;
|
|
23
|
+
|
|
24
|
+
// We get the total number of pages, total entries and first page
|
|
25
|
+
const firstRes = await fetch(`${base}?per_page=${perPage}&page=1`);
|
|
26
|
+
|
|
27
|
+
const total = Number(firstRes.headers.get('X-WP-Total'));
|
|
28
|
+
const totalPages = Number(firstRes.headers.get('X-WP-TotalPages'));
|
|
29
|
+
|
|
30
|
+
const firstPage = await firstRes.json();
|
|
31
|
+
|
|
32
|
+
const pageNums = Array.from(
|
|
33
|
+
{ length: Math.max(totalPages - 1, 0) },
|
|
34
|
+
(_, i) => i + 2
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
const promises = pageNums.map(p =>
|
|
38
|
+
fetch(`${base}?per_page=${perPage}&page=${p}`).then(r => r.json())
|
|
39
|
+
);
|
|
40
|
+
|
|
41
|
+
const restPages = await Promise.all(promises);
|
|
42
|
+
|
|
43
|
+
// put all of rest together
|
|
44
|
+
const all = firstPage.concat(...restPages);
|
|
45
|
+
|
|
46
|
+
// Find the category or tag we want
|
|
47
|
+
const item = all.find(item => item.slug === string);
|
|
48
|
+
|
|
49
|
+
return { total, totalPages, fetched: item, type };
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export {
|
|
53
|
+
BUILD_RELATED_CONTENT_URL,
|
|
54
|
+
BUILD_RELATED_CONTENT_URL_NEWSPACK,
|
|
55
|
+
TRENDING_STORIES_URL,
|
|
56
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// authors
|
|
2
|
+
.c-author-info__container {
|
|
3
|
+
align-items: flex-start;
|
|
4
|
+
gap: 1.75rem;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.c-author-info__trib-author-container {
|
|
8
|
+
gap: 0.92rem;
|
|
9
|
+
|
|
10
|
+
img {
|
|
11
|
+
width: 90px;
|
|
12
|
+
height: auto; // Let height adjust to maintain aspect ratio
|
|
13
|
+
object-fit: cover; // Crop to fit if needed
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
#nonstaff-author {
|
|
18
|
+
h3 {
|
|
19
|
+
font-family: $font-serif;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
// brief promo
|
|
2
|
+
#brief-promo {
|
|
3
|
+
.c-prompt {
|
|
4
|
+
margin: 3.125rem auto;
|
|
5
|
+
background-color: #000;
|
|
6
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.c-prompt__content {
|
|
10
|
+
gap: 1.25rem;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.c-mini-form .c-button {
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
font-size: 0.83em;
|
|
16
|
+
line-height: 1.6;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.has-xs-btm-marg {
|
|
20
|
+
margin-bottom: 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.c-mini-form {
|
|
24
|
+
display: block;
|
|
25
|
+
width: 80%;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
figcaption {
|
|
2
|
+
font-size: 13.5px;
|
|
3
|
+
max-width: 664px;
|
|
4
|
+
color: #4a4a4a;
|
|
5
|
+
margin: 0 auto;
|
|
6
|
+
padding: calc(0.85rem - 10px) 0 0;
|
|
7
|
+
|
|
8
|
+
@media (max-width: 43.5em) {
|
|
9
|
+
padding: calc(0.85rem - 10px) 0.85rem 0;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.c-icon svg {
|
|
14
|
+
position: relative;
|
|
15
|
+
top: 0.15em;
|
|
16
|
+
fill: currentColor;
|
|
17
|
+
height: 1.1em;
|
|
18
|
+
width: 1.1em;
|
|
19
|
+
}
|
|
@@ -76,3 +76,42 @@
|
|
|
76
76
|
letter-spacing: 0.05em;
|
|
77
77
|
text-transform: uppercase;
|
|
78
78
|
}
|
|
79
|
+
|
|
80
|
+
.related-stories {
|
|
81
|
+
.t-links-underlined-hover {
|
|
82
|
+
border-bottom: 0px solid #a1d2df;
|
|
83
|
+
transition: all .15s ease-in-out;
|
|
84
|
+
box-shadow: inset 0 0 #a1d2df;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.t-links-underlined-hover:hover {
|
|
88
|
+
border-bottom: 1px solid #a1d2df;
|
|
89
|
+
box-shadow: inset 0 -2px 0 0 #a1d2df;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// related story topics
|
|
94
|
+
#related-story-topics {
|
|
95
|
+
max-width: 664px;
|
|
96
|
+
margin: 2.5rem auto;
|
|
97
|
+
|
|
98
|
+
@media (max-width: 664px) {
|
|
99
|
+
padding: 0 0.85rem;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.c-tags {
|
|
104
|
+
flex-wrap: wrap;
|
|
105
|
+
gap: .5rem .4rem;
|
|
106
|
+
|
|
107
|
+
.c-tag {
|
|
108
|
+
font-family: $font-sans-serif;
|
|
109
|
+
padding-left: 1rem;
|
|
110
|
+
padding-right: 1rem;
|
|
111
|
+
font-size: .85rem;
|
|
112
|
+
}
|
|
113
|
+
:hover {
|
|
114
|
+
background-color: #348094;
|
|
115
|
+
color: white;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
@@ -20,6 +20,10 @@
|
|
|
20
20
|
@import 'components/navbar';
|
|
21
21
|
@import 'components/details';
|
|
22
22
|
@import 'components/ribbon';
|
|
23
|
+
@import 'components/related-content';
|
|
24
|
+
@import 'components/brief-promo';
|
|
25
|
+
@import 'components/images';
|
|
26
|
+
@import 'components/authors';
|
|
23
27
|
@import 'components/chart';
|
|
24
28
|
@import 'components/graphic';
|
|
25
29
|
|
|
@@ -1,102 +1,103 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<title>
|
|
5
|
+
{% if context.seo_headline %}{{ context.seo_headline + ' | ' }}{% elif
|
|
6
|
+
context.headline %}{{ context.headline + ' | ' }}{% endif %}The Texas
|
|
7
|
+
Tribune
|
|
8
|
+
</title>
|
|
9
|
+
{% include 'includes/metas.html' %}
|
|
6
10
|
|
|
7
|
-
|
|
11
|
+
<meta name="tt-graphic-tags" content="{{ context.tags or ['politics'] }}" />
|
|
8
12
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<link rel="dns-prefetch" href="https://fonts.googleapis.com"
|
|
13
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin
|
|
13
|
+
<link rel="dns-prefetch" href="https://www.google-analytics.com" />
|
|
14
|
+
<link rel="dns-prefetch" href="https://www.googletagmanager.com" />
|
|
15
|
+
{% block google_fonts %}
|
|
16
|
+
<link rel="dns-prefetch" href="https://fonts.googleapis.com" />
|
|
17
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
14
18
|
|
|
15
19
|
<!-- Start fonts -->
|
|
16
20
|
<script>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
+
window.WebFontConfig = {
|
|
22
|
+
google: { families: ['Open Sans:300,400,700', 'PT Serif:400,700'] },
|
|
23
|
+
timeout: 10000,
|
|
24
|
+
};
|
|
21
25
|
</script>
|
|
22
|
-
<script
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
{% include 'includes/svg-defs.html' %}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
{% block
|
|
39
|
-
|
|
40
|
-
{%
|
|
41
|
-
|
|
42
|
-
{%
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
});
|
|
63
|
-
var f = d.getElementsByTagName(s)[0],
|
|
64
|
-
j = d.createElement(s),
|
|
65
|
-
dl = l != 'dataLayer' ? '&l=' + l : '';
|
|
66
|
-
j.async = true;
|
|
67
|
-
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
|
|
68
|
-
f.parentNode.insertBefore(j, f);
|
|
69
|
-
})(window, document, 'script', 'dataLayer', 'GTM-P5L2Z5Z');
|
|
70
|
-
</script>
|
|
71
|
-
<!-- End Google Tag Manager -->
|
|
26
|
+
<script
|
|
27
|
+
async
|
|
28
|
+
src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"
|
|
29
|
+
></script>
|
|
30
|
+
<!-- End fonts -->
|
|
31
|
+
{% endblock google_fonts %} {% block css_file %}
|
|
32
|
+
<link rel="stylesheet" href="{{ static('styles/main.css') }}" />
|
|
33
|
+
{% endblock css_file %} {% include 'includes/ldjson.html' %} {% block
|
|
34
|
+
head_scripts %} {{ javascriptPack(jsPackName, { mjs: true }) }} {% endblock
|
|
35
|
+
head_scripts %}
|
|
36
|
+
</head>
|
|
37
|
+
<body>
|
|
38
|
+
{% include 'includes/svg-defs.html' %} {% block nav %}{% include
|
|
39
|
+
'components/simple-masthead.html' %}{% endblock nav %} {% block content_wrap
|
|
40
|
+
%}
|
|
41
|
+
<main role="main">
|
|
42
|
+
{% block content %}{% endblock content %}
|
|
43
|
+
</main>
|
|
44
|
+
{% endblock content_wrap %} {% include 'components/footer.html' %} {% block
|
|
45
|
+
inline_data %}{% endblock inline_data %} {% include
|
|
46
|
+
'includes/nomodule-shim.html' %} {% block scripts %} {{
|
|
47
|
+
javascriptPack(jsPackName) }} {% endblock scripts %} {% if ENV ==
|
|
48
|
+
'production' %}
|
|
49
|
+
<!-- Google Tag Manager -->
|
|
50
|
+
<script>
|
|
51
|
+
(function(w, d, s, l, i) {
|
|
52
|
+
w[l] = w[l] || [];
|
|
53
|
+
w[l].push({
|
|
54
|
+
'gtm.start': new Date().getTime(),
|
|
55
|
+
event: 'gtm.js',
|
|
56
|
+
});
|
|
57
|
+
var f = d.getElementsByTagName(s)[0],
|
|
58
|
+
j = d.createElement(s),
|
|
59
|
+
dl = l != 'dataLayer' ? '&l=' + l : '';
|
|
60
|
+
j.async = true;
|
|
61
|
+
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
|
|
62
|
+
f.parentNode.insertBefore(j, f);
|
|
63
|
+
})(window, document, 'script', 'dataLayer', 'GTM-P5L2Z5Z');
|
|
64
|
+
</script>
|
|
65
|
+
<!-- End Google Tag Manager -->
|
|
72
66
|
|
|
73
|
-
<!-- Google Tag Manager (noscript) -->
|
|
74
|
-
<noscript>
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
67
|
+
<!-- Google Tag Manager (noscript) -->
|
|
68
|
+
<noscript>
|
|
69
|
+
<iframe
|
|
70
|
+
src="https://www.googletagmanager.com/ns.html?id=GTM-P5L2Z5Z"
|
|
71
|
+
height="0"
|
|
72
|
+
width="0"
|
|
73
|
+
style="display:none;visibility:hidden"
|
|
74
|
+
></iframe>
|
|
75
|
+
</noscript>
|
|
76
|
+
<!-- End Google Tag Manager (noscript) -->
|
|
78
77
|
|
|
79
|
-
<!-- START Parse.ly Include: Standard -->
|
|
80
|
-
<div id="parsely-root" style="display: none">
|
|
81
|
-
|
|
82
|
-
</div>
|
|
83
|
-
<script>
|
|
84
|
-
(function(s, p, d) {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
78
|
+
<!-- START Parse.ly Include: Standard -->
|
|
79
|
+
<div id="parsely-root" style="display: none">
|
|
80
|
+
<span id="parsely-cfg" data-parsely-site="texastribune.org"></span>
|
|
81
|
+
</div>
|
|
82
|
+
<script>
|
|
83
|
+
(function(s, p, d) {
|
|
84
|
+
var h = d.location.protocol,
|
|
85
|
+
i = p + '-' + s,
|
|
86
|
+
e = d.getElementById(i),
|
|
87
|
+
r = d.getElementById(p + '-root'),
|
|
88
|
+
u =
|
|
89
|
+
h === 'https:'
|
|
90
|
+
? 'd1z2jf7jlzjs58.cloudfront.net'
|
|
91
|
+
: 'static.' + p + '.com';
|
|
92
|
+
if (e) return;
|
|
93
|
+
e = d.createElement(s);
|
|
94
|
+
e.id = i;
|
|
95
|
+
e.async = true;
|
|
96
|
+
e.src = h + '//' + u + '/p.js';
|
|
97
|
+
r.appendChild(e);
|
|
98
|
+
})('script', 'parsely', document);
|
|
99
|
+
</script>
|
|
100
|
+
<!-- END Parse.ly Include: Standard -->
|
|
101
|
+
{% endif %}
|
|
102
|
+
</body>
|
|
102
103
|
</html>
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<section class="t-copy t-links-underlined is-hidden-print">
|
|
2
|
+
<hr class="has-bg-gray-light has-giant-btm-marg" />
|
|
3
|
+
<h2 class="is-sr-only">Information about the authors</h2>
|
|
4
|
+
|
|
5
|
+
<div class="c-author-info__container l-flex l-flex-column l-ai-center">
|
|
6
|
+
<div
|
|
7
|
+
id="staff-author"
|
|
8
|
+
class="c-author-info__container l-flex l-flex-column"
|
|
9
|
+
>
|
|
10
|
+
{% for author in context['staff_authors'] %}
|
|
11
|
+
<div class="c-author-info__trib-author-container l-flex l-ai-center">
|
|
12
|
+
{% if author['author_photo'] %}
|
|
13
|
+
<a class="t-links-unset" href="{{ author['author_link'] }}">
|
|
14
|
+
<noscript>
|
|
15
|
+
<img
|
|
16
|
+
width="68"
|
|
17
|
+
height="100"
|
|
18
|
+
alt="{{ author['author_name'] }}’s staff photo"
|
|
19
|
+
src="{{ author['author_photo'] }}"
|
|
20
|
+
/>
|
|
21
|
+
</noscript>
|
|
22
|
+
<img
|
|
23
|
+
alt="{{ author['author_name'] }}’s staff photo"
|
|
24
|
+
class="l-display-block js-lazy-image has-bg-gray-dark js-lazy-image--loaded"
|
|
25
|
+
data-src="{{ author['author_photo'] }}"
|
|
26
|
+
width="68"
|
|
27
|
+
height="100"
|
|
28
|
+
src="{{ author['author_photo'] }}"
|
|
29
|
+
/>
|
|
30
|
+
</a>
|
|
31
|
+
{% endif %}
|
|
32
|
+
<div>
|
|
33
|
+
<h3 class="has-xxxs-btm-marg t-weight-bold t-size-m">
|
|
34
|
+
<a href="{{ author['author_link'] }}">
|
|
35
|
+
{{ author['author_name'] }}
|
|
36
|
+
</a>
|
|
37
|
+
</h3>
|
|
38
|
+
<h4
|
|
39
|
+
class="has-text-gray-dark t-weight-normal has-b-btm-marg t-size-xs t-sans t-lsp-m t-uppercase"
|
|
40
|
+
>
|
|
41
|
+
{{ author['author_title'] }}
|
|
42
|
+
</h4>
|
|
43
|
+
<div
|
|
44
|
+
class="c-author-info__contacts-container l-flex l-flex-column t-size-xs t-sans"
|
|
45
|
+
>
|
|
46
|
+
{% if author['author_email'] %}
|
|
47
|
+
<p class="l-flex l-ai-center">
|
|
48
|
+
<a
|
|
49
|
+
tabindex="-1"
|
|
50
|
+
href="mailto:{{ author['author_email'] }}"
|
|
51
|
+
class="c-icon t-links-unset has-text-teal c-author-info__contact-icon"
|
|
52
|
+
>
|
|
53
|
+
<span class="c-icon"
|
|
54
|
+
><svg aria-hidden="true">
|
|
55
|
+
<use xlink:href="#envelope"></use></svg
|
|
56
|
+
></span>
|
|
57
|
+
</a>
|
|
58
|
+
|
|
59
|
+
<a href="mailto:{{ author['author_email'] }}">
|
|
60
|
+
{{ author['author_email'] }}
|
|
61
|
+
</a>
|
|
62
|
+
</p>
|
|
63
|
+
{% endif %} {% if author['author_twitter'] %}
|
|
64
|
+
<p class="l-flex l-ai-center">
|
|
65
|
+
<a
|
|
66
|
+
tabindex="-1"
|
|
67
|
+
href="https://twitter.com/{{ author['author_twitter'] }}"
|
|
68
|
+
class="c-icon t-links-unset t-size-xs c-author-info__contact-icon"
|
|
69
|
+
>
|
|
70
|
+
<svg aria-hidden="true">
|
|
71
|
+
<use xlink:href="#twitter"></use>
|
|
72
|
+
</svg>
|
|
73
|
+
</a>
|
|
74
|
+
|
|
75
|
+
<a href="https://twitter.com/{{ author['author_twitter'] }}"
|
|
76
|
+
>@{{ author['author_twitter'] }}</a
|
|
77
|
+
>
|
|
78
|
+
</p>
|
|
79
|
+
{% endif %}
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
{% endfor %}
|
|
84
|
+
</div>
|
|
85
|
+
<div id="nonstaff-author">
|
|
86
|
+
<h3 class="t-size-m has-xxxs-btm-marg t-weight-normal">
|
|
87
|
+
<em>
|
|
88
|
+
<strong>{{ context['nonstaff_authors'][0].author_name }}</strong>
|
|
89
|
+
</em>
|
|
90
|
+
</h3>
|
|
91
|
+
<h4
|
|
92
|
+
class="t-uppercase t-lsp-m t-size-xs t-weight-normal t-sans has-text-gray-dark t-lsp-m has-text-gray-dark"
|
|
93
|
+
>
|
|
94
|
+
{{ context['nonstaff_authors'][0].author_title }}
|
|
95
|
+
</h4>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</section>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<div id="brief-promo" class="c-plugin c-plugin--seamless c-plugin--flush">
|
|
2
|
+
<div class="c-plugin__inner">
|
|
3
|
+
<div class="c-prompt c-prompt--box c-prompt--livestream">
|
|
4
|
+
<div class="c-prompt__content t-align-center">
|
|
5
|
+
<img
|
|
6
|
+
class="c-prompt__img"
|
|
7
|
+
src="https://static.texastribune.org/media/prompts/promo-brief-logo.png"
|
|
8
|
+
alt="Logo for The Brief newsletter."
|
|
9
|
+
/>
|
|
10
|
+
<div class="c-prompt__txt t-size-b t-lsp-s t-lh-m">
|
|
11
|
+
The most important Texas news,<br />sent weekday mornings.
|
|
12
|
+
</div>
|
|
13
|
+
<div
|
|
14
|
+
class="c-mini-form has-xs-btm-marg"
|
|
15
|
+
href="https://www.texastribune.org/newsletters/the-brief/"
|
|
16
|
+
>
|
|
17
|
+
<a
|
|
18
|
+
class="c-mini-form__submit"
|
|
19
|
+
href="https://www.texastribune.org/newsletters/the-brief/"
|
|
20
|
+
>
|
|
21
|
+
<div
|
|
22
|
+
id="main-form-submit"
|
|
23
|
+
aria-label="Sign up"
|
|
24
|
+
tabindex="0"
|
|
25
|
+
role="button"
|
|
26
|
+
aria-pressed="false"
|
|
27
|
+
class="c-button c-button--s c-sign-up__submit button has-text-black-off l-width-full l-display-block has-bg-yellow"
|
|
28
|
+
>
|
|
29
|
+
Sign up
|
|
30
|
+
</div>
|
|
31
|
+
</a>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<section class="t-copy t-links-underlined is-hidden-print">
|
|
2
|
+
<br />
|
|
3
|
+
<h2 class="t-sans t-size-b t-uppercase t-lsp-b has-s-btm-marg">
|
|
4
|
+
Contributors
|
|
5
|
+
</h2>
|
|
6
|
+
|
|
7
|
+
<div class="c-author-info__container l-flex l-flex-column l-ai-center">
|
|
8
|
+
<div id="contributor" class="c-author-info__container l-flex l-flex-column">
|
|
9
|
+
{% for author in context['contributors'] %}
|
|
10
|
+
<div class="c-author-info__trib-author-container l-flex l-ai-center">
|
|
11
|
+
{% if author['author_photo'] %}
|
|
12
|
+
<a class="t-links-unset" href="{{ author['author_link'] }}">
|
|
13
|
+
<noscript>
|
|
14
|
+
<img
|
|
15
|
+
width="68"
|
|
16
|
+
height="100"
|
|
17
|
+
alt="{{ author['author_name'] }}’s staff photo"
|
|
18
|
+
src="{{ author['author_photo'] }}"
|
|
19
|
+
/>
|
|
20
|
+
</noscript>
|
|
21
|
+
<img
|
|
22
|
+
alt="{{ author['author_name'] }}’s staff photo"
|
|
23
|
+
class="l-display-block js-lazy-image has-bg-gray-dark js-lazy-image--loaded"
|
|
24
|
+
data-src="{{ author['author_photo'] }}"
|
|
25
|
+
width="68"
|
|
26
|
+
height="100"
|
|
27
|
+
src="{{ author['author_photo'] }}"
|
|
28
|
+
/>
|
|
29
|
+
</a>
|
|
30
|
+
{% endif %}
|
|
31
|
+
<div>
|
|
32
|
+
<h3 class="has-xxxs-btm-marg t-weight-bold t-size-m">
|
|
33
|
+
<a href="{{ author['author_link'] }}">
|
|
34
|
+
{{ author['author_name'] }}
|
|
35
|
+
</a>
|
|
36
|
+
</h3>
|
|
37
|
+
<h4
|
|
38
|
+
class="has-text-gray-dark t-weight-normal has-b-btm-marg t-size-xs t-sans t-lsp-m t-uppercase"
|
|
39
|
+
>
|
|
40
|
+
{{ author['author_title'] }}
|
|
41
|
+
</h4>
|
|
42
|
+
<div
|
|
43
|
+
class="c-author-info__contacts-container l-flex l-flex-column t-size-xs t-sans"
|
|
44
|
+
>
|
|
45
|
+
{% if author['author_email'] %}
|
|
46
|
+
<p class="l-flex l-ai-center">
|
|
47
|
+
<a
|
|
48
|
+
tabindex="-1"
|
|
49
|
+
href="mailto:{{ author['author_email'] }}"
|
|
50
|
+
class="c-icon t-links-unset has-text-teal c-author-info__contact-icon"
|
|
51
|
+
>
|
|
52
|
+
<span class="c-icon"
|
|
53
|
+
><svg aria-hidden="true">
|
|
54
|
+
<use xlink:href="#envelope"></use></svg
|
|
55
|
+
></span>
|
|
56
|
+
</a>
|
|
57
|
+
|
|
58
|
+
<a href="mailto:{{ author['author_email'] }}">
|
|
59
|
+
{{ author['author_email'] }}
|
|
60
|
+
</a>
|
|
61
|
+
</p>
|
|
62
|
+
{% endif %} {% if author['author_twitter'] %}
|
|
63
|
+
<p class="l-flex l-ai-center">
|
|
64
|
+
<a
|
|
65
|
+
tabindex="-1"
|
|
66
|
+
href="https://twitter.com/{{ author['author_twitter'] }}"
|
|
67
|
+
class="c-icon t-links-unset t-size-xs c-author-info__contact-icon"
|
|
68
|
+
>
|
|
69
|
+
<svg aria-hidden="true">
|
|
70
|
+
<use xlink:href="#twitter"></use>
|
|
71
|
+
</svg>
|
|
72
|
+
</a>
|
|
73
|
+
|
|
74
|
+
<a href="https://twitter.com/{{ author['author_twitter'] }}"
|
|
75
|
+
>@{{ author['author_twitter'] }}</a
|
|
76
|
+
>
|
|
77
|
+
</p>
|
|
78
|
+
{% endif %}
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
{% endfor %}
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</section>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
2
2
|
<defs>
|
|
3
|
-
<symbol id="twitter" viewBox="0 0
|
|
3
|
+
<symbol id="twitter" viewBox="0 0 1200 1227">
|
|
4
4
|
<title>twitter</title>
|
|
5
|
-
<path d="
|
|
5
|
+
<path d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"></path>
|
|
6
6
|
</symbol>
|
|
7
7
|
<symbol id="facebook" viewBox="0 0 16 28">
|
|
8
8
|
<title>facebook</title>
|
|
@@ -27,5 +27,9 @@
|
|
|
27
27
|
<title>drawn-left-arrow</title>
|
|
28
28
|
<path d="M1.027 3.583c1.137 1.309 2.179 2.765 3.076 4.314l0.072 0.135c0.64 1.082 2.211 0.13 1.667-0.975-0.367-0.738-0.722-1.349-1.11-1.937l0.042 0.068c4.009 1.971 7.060 5.378 8.52 9.534l0.036 0.117c1.687 4.737 2.053 11.636-1.314 15.743-0.305 0.376 0.092 1.027 0.554 0.722 4.822-3.292 4.213-11.77 2.676-16.623-1.508-4.787-4.757-8.652-8.987-10.93l-0.099-0.049c1.036-0.339 1.934-0.764 2.766-1.286l-0.052 0.030c0.787-0.489 0.524-1.917-0.5-1.845-2.527 0.171-4.882 0.642-7.116 1.379l0.203-0.058c-0.417 0.129-0.715 0.511-0.715 0.963 0 0.271 0.107 0.516 0.281 0.697l-0-0z"></path>
|
|
29
29
|
</symbol>
|
|
30
|
+
<symbol id="camera" viewBox="0 0 30 28">
|
|
31
|
+
<title>camera</title>
|
|
32
|
+
<path d="M15 10.5c2.484 0 4.5 2.016 4.5 4.5s-2.016 4.5-4.5 4.5-4.5-2.016-4.5-4.5 2.016-4.5 4.5-4.5zM26 4c2.203 0 4 1.797 4 4v14c0 2.203-1.797 4-4 4H4c-2.203 0-4-1.797-4-4V8c0-2.203 1.797-4 4-4h3.5l.797-2.125C8.688.844 9.906 0 11 0h8c1.094 0 2.312.844 2.703 1.875L22.5 4H26zM15 22c3.859 0 7-3.141 7-7s-3.141-7-7-7-7 3.141-7 7 3.141 7 7 7z"></path>
|
|
33
|
+
</symbol>
|
|
30
34
|
</defs>
|
|
31
35
|
</svg>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<br />
|
|
2
|
+
<p class="t-copy t-size-b t-links-underlined t-lh-m">
|
|
3
|
+
<span class="c-icon c-icon--baseline t-size-m has-tiny-right-marg">
|
|
4
|
+
<svg
|
|
5
|
+
aria-hidden="true"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
viewBox="0 0 64 64"
|
|
8
|
+
>
|
|
9
|
+
<path
|
|
10
|
+
fill="#fff"
|
|
11
|
+
d="M60.2 53.8c0 3.5-2.9 6.4-6.4 6.4H10.2c-3.5 0-6.4-2.9-6.4-6.4V10.2c0-3.5 2.9-6.4 6.4-6.4h43.5c3.5 0 6.4 2.9 6.4 6.4v43.6z"
|
|
12
|
+
></path>
|
|
13
|
+
<g fill="#121212">
|
|
14
|
+
<path
|
|
15
|
+
d="M53.8 0H10.2C4.6 0 0 4.6 0 10.2v43.5C0 59.4 4.6 64 10.2 64h43.5C59.4 64 64 59.4 64 53.8V10.2C64 4.6 59.4 0 53.8 0zm6.4 53.8c0 3.5-2.9 6.4-6.4 6.4H10.2c-3.5 0-6.4-2.9-6.4-6.4V10.2c0-3.5 2.9-6.4 6.4-6.4h43.5c3.5 0 6.4 2.9 6.4 6.4v43.6z"
|
|
16
|
+
></path>
|
|
17
|
+
<path
|
|
18
|
+
d="M38.3 49.3H25.7c-.3 0-.5-.2-.5-.5V27.3c0-.3-.3-.6-.6-.6H13.5c-.3 0-.5-.2-.5-.5v-11c0-.3.2-.5.5-.5h37.1c.3 0 .5.2.5.5v11.1c0 .3-.2.5-.5.5H39.3c-.3 0-.5.2-.5.5v21.6c0 .2-.2.4-.5.4z"
|
|
19
|
+
></path>
|
|
20
|
+
</g>
|
|
21
|
+
</svg> </span
|
|
22
|
+
>
|
|
23
|
+
<em>
|
|
24
|
+
<a href="https://www.texastribune.org/about/privacy-policy/"
|
|
25
|
+
>Learn about The Texas Tribune’s policies</a
|
|
26
|
+
>, including our partnership with
|
|
27
|
+
<a
|
|
28
|
+
href="https://www.texastribune.org/about/#trust-project"
|
|
29
|
+
class="l-display-ib"
|
|
30
|
+
>The Trust Project</a
|
|
31
|
+
>
|
|
32
|
+
to increase transparency in news.
|
|
33
|
+
</em>
|
|
34
|
+
</p>
|
|
@@ -20,6 +20,38 @@
|
|
|
20
20
|
<h2 class="t-copy t-copy--subheader">{{ value | widont }}</h2>
|
|
21
21
|
{% endmacro %}
|
|
22
22
|
|
|
23
|
+
{# Simple photo/video embeds here. They will lazy load by default. #}
|
|
24
|
+
{% macro image(type, caption, alt_text, url, thumbnail_url, credit) %}
|
|
25
|
+
{% if type == 'video' %}
|
|
26
|
+
<div class="image">
|
|
27
|
+
<div class="video-container">
|
|
28
|
+
<video width="100%" preload="none" autoplay loop muted playsinline poster="{{ thumbnail_url }}">Your browser does not support the video tag.
|
|
29
|
+
<source src="{{ url }}" type="video/mp4">
|
|
30
|
+
<p>{{ alt_text }}</p>
|
|
31
|
+
</video></div>
|
|
32
|
+
<figcaption class="caption">
|
|
33
|
+
<span>{{ caption }}</span> <span class="c-icon">
|
|
34
|
+
<svg area-hidden="true">
|
|
35
|
+
<use xlink:href="#camera"></use>
|
|
36
|
+
</svg>
|
|
37
|
+
</span> <span class="credit">{{ credit }}</span>
|
|
38
|
+
</figcaption>
|
|
39
|
+
</div>
|
|
40
|
+
{% elif type == 'photo' %}
|
|
41
|
+
<div class="image">
|
|
42
|
+
<div class="photo-container">
|
|
43
|
+
<img src="{{ url }}" loading="lazy" alt="{{ alt_text }}" width="100%">
|
|
44
|
+
</div>
|
|
45
|
+
<figcaption class="caption">
|
|
46
|
+
<span>{{ caption }} </span><span class="c-icon">
|
|
47
|
+
<svg area-hidden="true">
|
|
48
|
+
<use xlink:href="#camera"></use>
|
|
49
|
+
</svg></span><span class="credit"> {{ credit }}</span>
|
|
50
|
+
</figcaption>
|
|
51
|
+
</div>
|
|
52
|
+
{% endif %}
|
|
53
|
+
{% endmacro %}
|
|
54
|
+
|
|
23
55
|
{# set type to roof for roof ads, footer for footer ads #}
|
|
24
56
|
{% macro ad(value, type) %}
|
|
25
57
|
<div class="plugin plugin--centered">
|