Skip to content

Commit 691ab5f

Browse files
zachleatzachleat
authored
Merge pull request #656 from jamstack/zl/survey
Jamstack Survey
2 parents 2354f04 + 72d4c55 commit 691ab5f

19 files changed

+3614
-12
lines changed

‎.eleventy.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,14 @@ module.exports = function(eleventyConfig) {
55
// Support yaml data files
66
eleventyConfig.addDataExtension("yaml", contents => yaml.safeLoad(contents))
77

8+
eleventyConfig.addWatchTarget("src/site/survey/**/*.js");
9+
810
// pass images directly through to the output
911
eleventyConfig.addPassthroughCopy("src/site/img");
1012
eleventyConfig.addPassthroughCopy({
1113
"src/js": "js",
1214
"node_modules/@zachleat/filter-container/*.js": "js",
15+
"src/css": "css",
1316
});
1417

1518
// Date helper
@@ -184,7 +187,7 @@ module.exports = function(eleventyConfig) {
184187
// favicons files
185188
eleventyConfig.addPassthroughCopy("src/site/browserconfig.xml");
186189
eleventyConfig.addPassthroughCopy("src/site/site.webmanifest");
187-
190+
eleventyConfig.addPassthroughCopy("src/site/survey/2021/community-survey-2021-methodology.pdf");
188191

189192
return {
190193
dir: {

‎netlify.toml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,5 +65,15 @@
6565
to = "/headless-cms/keystone/"
6666
status = 301
6767

68+
[[redirects]]
69+
from = "/survey/"
70+
to = "/survey/2021/"
71+
status = 302
72+
73+
[[redirects]]
74+
from = "/survey/2020/"
75+
to = "https://www.netlify.com/blog/2020/05/27/state-of-the-jamstack-survey-2020-first-results/"
76+
status = 301
77+
6878
[[plugins]]
6979
package = "./plugins/keep-dot-cache-folder"

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"@zachleat/filter-container": "^1.0.3",
2828
"autoprefixer": "^10.2.5",
2929
"cssnano": "^4.1.10",
30+
"d3": "^7.1.1",
3031
"dotenv": "^8.2.0",
3132
"fast-glob": "^3.2.5",
3233
"gray-matter": "^4.0.2",

‎src/css/d3chart.css‎

Lines changed: 332 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,332 @@
1+
.d3chart-placeholder {
2+
width: 100%;
3+
height: 450px;
4+
}
5+
.d3chart-placeholder-large {
6+
height: 660px;
7+
}
8+
.d3chart-placeholder-xl {
9+
height: 1000px;
10+
}
11+
.d3chart-legend-placeholder {
12+
min-height: 1.71875em; /* 27.5px /16 */
13+
}
14+
15+
.d3chart {
16+
position: relative;
17+
}
18+
.d3chart > .d3chart-legend {
19+
position: absolute;
20+
top: 0;
21+
right: 0;
22+
}
23+
24+
.d3chart-legend {
25+
display: flex;
26+
justify-content: flex-end;
27+
gap: .5em;
28+
font-size: 0.8125em; /* 13px /16 */
29+
font-weight: 600;
30+
}
31+
.d3chart-legend button {
32+
font-weight: inherit;
33+
}
34+
.d3chart-legend-wrap .d3chart-legend {
35+
flex-wrap: wrap;
36+
justify-content: center;
37+
margin-left: auto;
38+
margin-right: auto;
39+
}
40+
.d3chart + .d3chart-legend-placeholder .d3chart-legend {
41+
justify-content: center;
42+
}
43+
.d3chart-legend > * {
44+
border-radius: .25em;
45+
padding: .25em .5em;
46+
}
47+
48+
.d3chart .tick text {
49+
font-size: 1.3em; /* 13px /10 */
50+
}
51+
.d3chart .tick line {
52+
shape-rendering: crispEdges;
53+
stroke: rgba(255,255,255,.15);
54+
}
55+
.d3chart-bubble .tick:nth-child(2n) line {
56+
stroke: rgba(255,255,255,.22);
57+
}
58+
.d3chart-bubble .tick:nth-child(2n+1) line {
59+
stroke: rgba(255,255,255,.1);
60+
}
61+
.d3chart-bubble .d3chart-xaxis :first-child line,
62+
.d3chart-bubble .d3chart-yaxis .tick:last-child line {
63+
stroke: #737680;
64+
stroke-width: 2px;
65+
}
66+
.d3chart-hbar .d3chart-xaxis .tick:first-child line,
67+
.d3chart-vbar .d3chart-yaxis .tick:first-child line {
68+
stroke: #c5c5c9;
69+
stroke-width: 2px;
70+
}
71+
.d3chart-hbar .d3chart-xaxis .tick:first-child line {
72+
transform: translateX(-1px);
73+
}
74+
.d3chart-vbar .d3chart-yaxis .tick:first-child line {
75+
transform: translateY(1px);
76+
}
77+
.d3chart-vbar .d3chart-xaxis text,
78+
.d3chart-hbar .d3chart-yaxis text {
79+
--d3chart-label-clamp: 2vw;
80+
font-size: 12px;
81+
font-size: clamp(12px, var(--d3chart-label-clamp), 14px);
82+
font-weight: 600;
83+
}
84+
85+
86+
.d3chart-inlinebarvalue {
87+
--d3chart-label-clamp: 2vw;
88+
font-size: 12px;
89+
font-size: clamp(11px, var(--d3chart-label-clamp), 16px);
90+
font-weight: 600;
91+
text-anchor: middle;
92+
}
93+
.d3chart-inlinebarvalue-h {
94+
font-size: 16px;
95+
font-weight: 600;
96+
text-anchor: start;
97+
dominant-baseline: central;
98+
alignment-baseline: middle;
99+
}
100+
.d3chart-inlinebarvalue-h.inside {
101+
text-anchor: end;
102+
}
103+
.d3chart-inlinebarvalue-h.inside-offset {
104+
font-size: 14px;
105+
text-anchor: end;
106+
}
107+
108+
/* Wrapped labels */
109+
.d3chart-yaxis text.d3chart-label-wrapped {
110+
font-size: 13px;
111+
}
112+
113+
/* Axis labels */
114+
.d3chart-axislabel {
115+
fill: #fff;
116+
text-anchor: end;
117+
font-weight: 700;
118+
}
119+
.d3chart-axislabel-center {
120+
text-anchor: middle;
121+
}
122+
123+
/* Bubble charts */
124+
.d3chart-bubblelabel {
125+
text-anchor: middle;
126+
dominant-baseline: central;
127+
font-size: 12px;
128+
font-weight: 600;
129+
}
130+
.d3chart-bubblelabel.offset-l,
131+
.d3chart-bubblelabel.offset-r {
132+
font-weight: 700;
133+
text-shadow: none;
134+
}
135+
.d3chart-bubblelabel.offset-l {
136+
text-anchor: end;
137+
}
138+
.d3chart-bubblelabel.offset-r {
139+
text-anchor: start;
140+
}
141+
.d3chart-bubblelabelbg.offset {
142+
background-color: rgba(255,255,255,.4);
143+
}
144+
.d3chart-bubble circle {
145+
fill-opacity: .85;
146+
}
147+
.d3chart-bubble-active .d3chart-bubblelabel,
148+
.d3chart-bubble-active .d3chart-bubblecircle {
149+
fill-opacity: .15;
150+
}
151+
.d3chart-bubble-active .d3chart-bubblelabel.active,
152+
.d3chart-bubble-active .d3chart-bubblecircle.active {
153+
fill-opacity: 1;
154+
}
155+
.d3chart-bubble .d3chart-yaxis .tick:last-child text {
156+
display: none;
157+
}
158+
.d3chart-bubble .d3chart-xaxis .tick text {
159+
transform: translateY(2px);
160+
}
161+
162+
/* Color gradients */
163+
.d3chart-color-0 {
164+
fill: url(#gradient-sunrise-v);
165+
}
166+
.d3chart-hbar .d3chart-color-0 {
167+
fill: url(#gradient-sunrise-h);
168+
}
169+
.d3chart-color-1 {
170+
fill: url(#gradient-blue-v);
171+
}
172+
.d3chart-hbar .d3chart-color-1 {
173+
fill: url(#gradient-blue-h);
174+
}
175+
.d3chart-color-2 {
176+
fill: url(#gradient-sun-v);
177+
}
178+
.d3chart-hbar .d3chart-color-2 {
179+
fill: url(#gradient-sun-h);
180+
}
181+
.d3chart-color-3 {
182+
fill: url(#gradient-seamist-v);
183+
}
184+
.d3chart-hbar .d3chart-color-3 {
185+
fill: url(#gradient-seamist-h);
186+
}
187+
.d3chart-color-4 {
188+
fill: url(#gradient-hallows-v);
189+
}
190+
.d3chart-hbar .d3chart-color-4 {
191+
fill: url(#gradient-hallows-h);
192+
}
193+
.d3chart-color-5 {
194+
fill: url(#gradient-bubblegum-v);
195+
}
196+
.d3chart-hbar .d3chart-color-5 {
197+
fill: url(#gradient-bubblegum-h);
198+
}
199+
.d3chart-color-6 {
200+
fill: url(#gradient-purple-v);
201+
}
202+
.d3chart-hbar .d3chart-color-6 {
203+
fill: url(#gradient-purple-h);
204+
}
205+
.d3chart-color-7 {
206+
fill: url(#gradient-air-v);
207+
}
208+
.d3chart-hbar .d3chart-color-7 {
209+
fill: url(#gradient-air-h);
210+
}
211+
.d3chart-color-8 {
212+
fill: url(#gradient-pink-v);
213+
}
214+
.d3chart-hbar .d3chart-color-8 {
215+
fill: url(#gradient-pink-h);
216+
}
217+
.d3chart-color-9 {
218+
fill: url(#gradient-leaves-v);
219+
}
220+
.d3chart-hbar .d3chart-color-9 {
221+
fill: url(#gradient-leaves-h);
222+
}
223+
.d3chart-color-10 {
224+
fill: url(#gradient-haze-v);
225+
}
226+
.d3chart-hbar .d3chart-color-10 {
227+
fill: url(#gradient-haze-h);
228+
}
229+
.d3chart-color-11 {
230+
fill: url(#gradient-gnat-v);
231+
}
232+
.d3chart-hbar .d3chart-color-11 {
233+
fill: url(#gradient-gnat-h);
234+
}
235+
.d3chart-color-12 {
236+
fill: url(#gradient-fire-v);
237+
}
238+
.d3chart-hbar .d3chart-color-12 {
239+
fill: url(#gradient-fire-h);
240+
}
241+
.d3chart-color-13 {
242+
fill: url(#gradient-ocean-v);
243+
}
244+
.d3chart-hbar .d3chart-color-13 {
245+
fill: url(#gradient-ocean-h);
246+
}
247+
.d3chart-color-14 {
248+
fill: url(#gradient-night-v);
249+
}
250+
.d3chart-hbar .d3chart-color-14 {
251+
fill: url(#gradient-night-h);
252+
}
253+
.d3chart-color-15 {
254+
fill: url(#gradient-dusk-v);
255+
}
256+
.d3chart-hbar .d3chart-color-15 {
257+
fill: url(#gradient-dusk-h);
258+
}
259+
260+
/* Legend gradients */
261+
.d3chart-legend-0 {
262+
color: #fff;
263+
background: linear-gradient(352.65deg, #F0047F 1.39%, #FC814A 82.63%);
264+
}
265+
.d3chart-legend-1 {
266+
color: #000;
267+
background: linear-gradient(47.9deg, #0090CA 6.17%, #00BFAD 79.63%);
268+
}
269+
.d3chart-legend-2 {
270+
color: #000;
271+
background: linear-gradient(180deg, #FFC803 0%, #FC814A 100%);
272+
}
273+
.d3chart-legend-3 {
274+
color: #000;
275+
background: linear-gradient(180deg, #78ECC2 0%, #00FFB2 100%);
276+
}
277+
.d3chart-legend-4 {
278+
color: #000;
279+
background: linear-gradient(108.82deg, #DF4A1F 0%, #FFA278 90.74%);
280+
}
281+
.d3chart-legend-5 {
282+
color: #000;
283+
background: linear-gradient(108.82deg, #FD98BC 32.87%, #FFCCDE 90.74%);
284+
}
285+
.d3chart-legend-6 {
286+
color: #000;
287+
background: linear-gradient(108.82deg, #6B38FB 0%, #CCB4FF 90.74%);
288+
}
289+
.d3chart-legend-7 {
290+
color: #000;
291+
background: linear-gradient(108.82deg, #03D0D0 0%, #B5FFF8 90.74%);
292+
}
293+
.d3chart-legend-8 {
294+
color: #fff;
295+
background: linear-gradient(108.82deg, #C40468 0%, #FC2796 90.74%);
296+
}
297+
.d3chart-legend-9 {
298+
color: #000;
299+
background: linear-gradient(180deg, #78F19A 0%, #13B110 100%);
300+
}
301+
.d3chart-legend-10 {
302+
color: #000;
303+
background: linear-gradient(108.82deg, #91A5EE 37.71%, #D6DEFF 90.74%);
304+
}
305+
.d3chart-legend-11 {
306+
color: #000;
307+
background: linear-gradient(108.82deg, #02C6B3 40.13%, #59F7E7 90.74%);
308+
}
309+
.d3chart-legend-12 {
310+
color: #fff;
311+
background: linear-gradient(108.82deg, #FF0F00 0%, #FF928A 90.74%);
312+
}
313+
.d3chart-legend-13 {
314+
color: #000;
315+
background: linear-gradient(180deg, #003EDD 0%, #6CDCFF 100%);
316+
}
317+
.d3chart-legend-14 {
318+
color: #000;
319+
background: linear-gradient(108.82deg, #02465F 3.38%, #6AD7FF 90.74%);
320+
}
321+
.d3chart-legend-15 {
322+
color: #fff;
323+
background: linear-gradient(108.82deg, #960000 0%, #E94242 92.82%);
324+
}
325+
.d3chart-legend-16 {
326+
color: #fff;
327+
background: linear-gradient(108.82deg, #FF72CF 0%, #C92ECC 90.74%);
328+
}
329+
330+
331+
332+
/* Overrides */

‎src/css/tailwind.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,7 @@ details[open] .summary-swap-open {
242242
display: block;
243243
}
244244

245-
@media (min-width: 640px) {
245+
@media (min-width: 768px) {
246246
.sm\:page-layout {
247247
grid-template-columns: 16.875em minmax(0, 1fr);
248248
}
@@ -255,7 +255,7 @@ details[open] .summary-swap-open {
255255
}
256256

257257
/* Desktop sticky nav */
258-
@media (min-width: 640px) and (min-height: 41.25em) { /* 660px */
258+
@media (min-width: 768px) and (min-height: 53.75em) { /* 860px */
259259
.page-header {
260260
position: sticky;
261261
top: 0;

0 commit comments

Comments
 (0)