swedbank-pay-design-guide-jekyll-theme 2.0.0 → 2.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_layouts/default.html +35 -22
- data/_sass/accordion-table.scss +3 -21
- data/_sass/fonts.scss +3 -2
- data/_sass/front-page.scss +4 -4
- data/_sass/sidebar.scss +41 -1
- data/_sass/swedbank-pay-design-guide-theme.scss +88 -0
- data/assets/js/swedbank-pay-design-guide-theme.js +248 -136
- data/lib/field_tag.rb +50 -0
- data/lib/gem_version.rb +1 -1
- data/lib/read_time_filter.rb +40 -0
- data/lib/regex_capture_filter.rb +3 -3
- data/lib/sidebar_html_builder.rb +9 -3
- data/lib/sidebar_path.rb +1 -1
- data/lib/swedbank-pay-design-guide-jekyll-theme.rb +2 -1
- metadata +4 -3
- data/lib/read_time.rb +0 -35
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 49afa63b5e28957d99544e06ae8971292367bc61c3bdfc8975f7cfd9ea2a782b
|
|
4
|
+
data.tar.gz: bcd0f3313dbc65f1ba33662a9f763cf339813c9af5694815f38c5105d4b5c77c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 30dd0b4d0dff517e6352fa4382827c89080e2f68b0b185c2002a054df7361f37a6ea48253a89b5552f3f2eb8124b0224c22d71f2fff51bd6bb82206d2618d096
|
|
7
|
+
data.tar.gz: f10505d806af0e539d41e31f0f82851a7224491b6c6b9599ad33da762f44d66a5dff97987eeca4eefdd0362f2ba8bd1c32886619bb6aa2ed29ae4e7f8016e26f
|
data/_layouts/default.html
CHANGED
|
@@ -57,9 +57,37 @@
|
|
|
57
57
|
</head>
|
|
58
58
|
|
|
59
59
|
<body>
|
|
60
|
+
<div id="overlay"></div>
|
|
60
61
|
<div id="designguide">
|
|
62
|
+
<header id="dg-topbar" class="topbar topbar-max-md-sticky d-md-flex d-lg-none">
|
|
63
|
+
<button type="button" class="topbar-btn" aria-label="Open menu" aria-haspopup="menu" aria-expanded="false" aria-controls="topbar-nav">
|
|
64
|
+
<i class="material-icons topbar-btn-icon">menu</i>
|
|
65
|
+
</button><button type="button" class="topbar-close" aria-label="Close menu">
|
|
66
|
+
<i class="material-icons topbar-btn-icon">close</i>
|
|
67
|
+
</button>
|
|
68
|
+
<a class="topbar-logo" href="/" aria-label="To homepage">
|
|
69
|
+
<img src="{{ design_guide_url }}/designguide/assets/swedbankpay-logo-v.svg" alt="swedbankpay logo" class="logotype-vertical logotype-sm" />
|
|
70
|
+
</a>
|
|
71
|
+
</header>
|
|
61
72
|
<div class="documentation">
|
|
62
|
-
<div class="
|
|
73
|
+
<div class="search-box search-expander">
|
|
74
|
+
{% if site.search.enabled == true %}
|
|
75
|
+
<form class="search d-flex"
|
|
76
|
+
method="get" action="{{ site.search.url | relative_url }}">
|
|
77
|
+
<input name="q" type="text" id="tipue_search_input"
|
|
78
|
+
class="search-input"
|
|
79
|
+
placeholder="Search in documentation"
|
|
80
|
+
onfocus="this.placeholder=''"
|
|
81
|
+
onblur="this.placeholder='Search in documentation'"
|
|
82
|
+
pattern=".{3,}"
|
|
83
|
+
title="At least 3 characters">
|
|
84
|
+
<button id="search-btn"class="btn btn-primary btn-icon-lg" type="submit" aria-label="Search button">
|
|
85
|
+
<i class="material-icons-outlined" aria-hidden="true">search</i>
|
|
86
|
+
</button>
|
|
87
|
+
</form>
|
|
88
|
+
{% endif %}
|
|
89
|
+
</div>
|
|
90
|
+
<div class="d-md-flex">
|
|
63
91
|
<div id="dg-sidebar" class="sidebar dg-sidebar has-secondary-nav">
|
|
64
92
|
<nav class="sidebar-main-nav">
|
|
65
93
|
<div class="sidebar-logo">
|
|
@@ -68,31 +96,16 @@
|
|
|
68
96
|
alt="Swedbank Pay vertical logo" class="logotype-vertical logotype-lg"/>
|
|
69
97
|
</a>
|
|
70
98
|
</div>
|
|
71
|
-
<!-- {% if site.search.enabled == true %}
|
|
72
|
-
<form class="search-container mx-2 my-4 px-3 py-2 d-flex"
|
|
73
|
-
method="get" action="{{ site.search.url | relative_url }}">
|
|
74
|
-
<input name="q" type="text" id="tipue_search_input"
|
|
75
|
-
class="search-input w-100 "
|
|
76
|
-
placeholder="Search in documentation"
|
|
77
|
-
onfocus="this.placeholder=''"
|
|
78
|
-
onblur="this.placeholder='Search in documentation'"
|
|
79
|
-
pattern=".{3,}"
|
|
80
|
-
title="At least 3 characters">
|
|
81
|
-
<button class="mb-0">
|
|
82
|
-
<i class="material-icons m-0" aria-hidden="true">search</i>
|
|
83
|
-
</button>
|
|
84
|
-
</form>
|
|
85
|
-
{% endif %} -->
|
|
86
99
|
<ul id="dx-sidebar-main-nav-ul" class="main-nav-ul">
|
|
87
100
|
</ul>
|
|
88
101
|
</nav>
|
|
89
102
|
</div>
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
103
|
+
<main class="doc-view">
|
|
104
|
+
{% if page.layout != 'front-page' %}
|
|
105
|
+
{% include title-header.html %}
|
|
106
|
+
{% endif %}
|
|
107
|
+
{% include doc-container.html %}
|
|
108
|
+
</main>
|
|
96
109
|
</div>
|
|
97
110
|
</div>
|
|
98
111
|
</div>
|
data/_sass/accordion-table.scss
CHANGED
|
@@ -73,29 +73,11 @@
|
|
|
73
73
|
|
|
74
74
|
tbody {
|
|
75
75
|
font-size: 0.875rem;
|
|
76
|
-
|
|
76
|
+
|
|
77
77
|
tr:nth-child(odd) {
|
|
78
78
|
background-color: #F9F8F6;
|
|
79
79
|
}
|
|
80
|
-
|
|
81
|
-
tr {
|
|
82
|
-
td:not(:last-child) {
|
|
83
|
-
font-family: $mono;
|
|
84
|
-
|
|
85
|
-
code {
|
|
86
|
-
border: none;
|
|
87
|
-
background-color: transparent;
|
|
88
|
-
padding: 0;
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
td:not(:last-child):not(:nth-last-child(2)) {
|
|
93
|
-
code {
|
|
94
|
-
font-weight: 700;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
|
|
80
|
+
|
|
99
81
|
tr {
|
|
100
82
|
&:hover {
|
|
101
83
|
background-color: $apricot;
|
|
@@ -105,4 +87,4 @@
|
|
|
105
87
|
}
|
|
106
88
|
}
|
|
107
89
|
}
|
|
108
|
-
}
|
|
90
|
+
}
|
data/_sass/fonts.scss
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
$
|
|
2
|
-
$
|
|
1
|
+
$font_headline: "Swedbank Headline", "Arial", sans-serif;
|
|
2
|
+
$font_mono: "Akkurat Mono", monospace;
|
|
3
|
+
$font_body: "Arial", sans-serif;
|
data/_sass/front-page.scss
CHANGED
|
@@ -79,7 +79,7 @@ $front-page-max-width: $breakpoint-lg;
|
|
|
79
79
|
|
|
80
80
|
h3 {
|
|
81
81
|
color: $brown;
|
|
82
|
-
font-family: $
|
|
82
|
+
font-family: $font_headline;
|
|
83
83
|
margin-bottom: 2rem;
|
|
84
84
|
font-size: 2.5rem;
|
|
85
85
|
line-height: 3.5rem;
|
|
@@ -97,7 +97,7 @@ $front-page-max-width: $breakpoint-lg;
|
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
.front-page-hero-name {
|
|
100
|
-
font-family: $
|
|
100
|
+
font-family: $font_mono;
|
|
101
101
|
font-weight: bold;
|
|
102
102
|
font-size: 2.5rem;
|
|
103
103
|
color: $yellow;
|
|
@@ -111,13 +111,13 @@ $front-page-max-width: $breakpoint-lg;
|
|
|
111
111
|
|
|
112
112
|
.front-page-hero-jumbo {
|
|
113
113
|
color: $brown;
|
|
114
|
-
font-family: $
|
|
114
|
+
font-family: $font_headline;
|
|
115
115
|
margin-bottom: 2rem;
|
|
116
116
|
font-size: 3.5rem;
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
.front-page-hero-lean {
|
|
120
|
-
font-family: $
|
|
120
|
+
font-family: $font_mono;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
|
data/_sass/sidebar.scss
CHANGED
|
@@ -1,3 +1,43 @@
|
|
|
1
|
+
.sidebar {
|
|
2
|
+
&.dg-sidebar {
|
|
3
|
+
&.visible {
|
|
4
|
+
@media screen and (max-width: $breakpoint-lg) {
|
|
5
|
+
display: block;
|
|
6
|
+
position: absolute;
|
|
7
|
+
margin-top: 80px;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@media screen and (max-width: $breakpoint-lg) {
|
|
13
|
+
display: none;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&.topbar-open {
|
|
17
|
+
display: block;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.sidebar-main-nav {
|
|
21
|
+
@media screen and (max-width: $breakpoint-lg) {
|
|
22
|
+
border-top: #ffffff;
|
|
23
|
+
|
|
24
|
+
&:before {
|
|
25
|
+
background-color: #ffffff;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.sidebar-logo {
|
|
30
|
+
@media screen and (max-width: $breakpoint-lg) {
|
|
31
|
+
display: none;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.main-nav-ul {
|
|
36
|
+
margin-top: 0;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
1
41
|
#dg-sidebar {
|
|
2
42
|
&.sidebar {
|
|
3
43
|
.nav-ul {
|
|
@@ -21,7 +61,7 @@
|
|
|
21
61
|
|
|
22
62
|
.leaf {
|
|
23
63
|
&.active {
|
|
24
|
-
>
|
|
64
|
+
>a {
|
|
25
65
|
&:hover {
|
|
26
66
|
&:after {
|
|
27
67
|
content: none;
|
|
@@ -119,13 +119,24 @@ body {
|
|
|
119
119
|
.dg-sidebar {
|
|
120
120
|
border-right: 1px solid $background-gray;
|
|
121
121
|
|
|
122
|
+
@media screen and (max-width: $breakpoint-lg){
|
|
123
|
+
position: fixed;
|
|
124
|
+
}
|
|
125
|
+
|
|
122
126
|
.main-nav-ul {
|
|
123
127
|
border-bottom: 1px solid $background-gray;
|
|
128
|
+
|
|
129
|
+
.sidebar-secondary-nav {
|
|
130
|
+
overflow-y: auto;
|
|
131
|
+
}
|
|
124
132
|
}
|
|
125
133
|
}
|
|
126
134
|
}
|
|
127
135
|
|
|
128
136
|
.documentation {
|
|
137
|
+
@media screen and (max-width: $breakpoint-lg){
|
|
138
|
+
overflow-y: auto;
|
|
139
|
+
}
|
|
129
140
|
> div {
|
|
130
141
|
&.row {
|
|
131
142
|
margin-right: 0;
|
|
@@ -310,12 +321,51 @@ body {
|
|
|
310
321
|
text-align: center;
|
|
311
322
|
}
|
|
312
323
|
|
|
324
|
+
.table {
|
|
325
|
+
.field-level {
|
|
326
|
+
&::before {
|
|
327
|
+
font-family: $font_mono;
|
|
328
|
+
color: $yellow;
|
|
329
|
+
content: '╰─╼';
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
code {
|
|
333
|
+
border: 2px solid $yellow;
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.field-level-2 {
|
|
338
|
+
margin-left: 2rem;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.field-level-3 {
|
|
342
|
+
margin-left: 4rem;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.field-level-4 {
|
|
346
|
+
margin-left: 6rem;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.field-level-5 {
|
|
350
|
+
margin-left: 8rem;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.field-level-6 {
|
|
354
|
+
margin-left: 10rem;
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
|
|
313
358
|
#github {
|
|
314
359
|
opacity: .5;
|
|
315
360
|
position: absolute;
|
|
316
361
|
right: 4rem;
|
|
317
362
|
top: 4rem;
|
|
318
363
|
transition: opacity .3s;
|
|
364
|
+
|
|
365
|
+
@media screen and (max-width: $breakpoint-lg){
|
|
366
|
+
top: 6rem;
|
|
367
|
+
}
|
|
368
|
+
|
|
319
369
|
}
|
|
320
370
|
|
|
321
371
|
a#github:after {
|
|
@@ -326,3 +376,41 @@ body {
|
|
|
326
376
|
opacity: 1;
|
|
327
377
|
}
|
|
328
378
|
}
|
|
379
|
+
|
|
380
|
+
#overlay {
|
|
381
|
+
@media screen and (max-width: $breakpoint-lg) {
|
|
382
|
+
position: fixed; /* Sit on top of the page content */
|
|
383
|
+
display: none; /* Hidden by default */
|
|
384
|
+
width: 100%; /* Full width (cover the whole page) */
|
|
385
|
+
height: 100%; /* Full height (cover the whole page) */
|
|
386
|
+
top: 0;
|
|
387
|
+
left: 0;
|
|
388
|
+
right: 0;
|
|
389
|
+
bottom: 0;
|
|
390
|
+
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
|
|
391
|
+
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.search-box {
|
|
396
|
+
position: fixed;
|
|
397
|
+
right: 8rem;
|
|
398
|
+
top: 4rem;
|
|
399
|
+
|
|
400
|
+
@media screen and (max-width: $breakpoint-lg) {
|
|
401
|
+
right: 1rem;
|
|
402
|
+
top: 1.5rem;
|
|
403
|
+
z-index: 401;
|
|
404
|
+
|
|
405
|
+
#tipue_search_input {
|
|
406
|
+
display: none;
|
|
407
|
+
}
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
.topbar-logo {
|
|
412
|
+
@media screen and (max-width: $breakpoint-sm) {
|
|
413
|
+
display: block;
|
|
414
|
+
position: absolute;
|
|
415
|
+
}
|
|
416
|
+
}
|
|
@@ -1,136 +1,248 @@
|
|
|
1
|
-
/*global mermaid*/
|
|
2
|
-
// Initialize Mermaid.js
|
|
3
|
-
(function () {
|
|
4
|
-
var configObject = {
|
|
5
|
-
startOnLoad: true,
|
|
6
|
-
securityLevel: "loose",
|
|
7
|
-
htmlLabels: true,
|
|
8
|
-
sequence: {
|
|
9
|
-
useMaxWidth: false,
|
|
10
|
-
width: 300
|
|
11
|
-
},
|
|
12
|
-
flowchart: {
|
|
13
|
-
useMaxWidth: false
|
|
14
|
-
}
|
|
15
|
-
};
|
|
16
|
-
mermaid.initialize(configObject);
|
|
17
|
-
|
|
18
|
-
mermaid.init(undefined, "code.language-mermaid");
|
|
19
|
-
})();
|
|
20
|
-
|
|
21
|
-
// Initialize sidebar navigation scroll activation
|
|
22
|
-
(function () {
|
|
23
|
-
var headings = document.querySelectorAll(".doc-container h2");
|
|
24
|
-
const activeSubgroup = document.querySelector("nav.sidebar-nav .nav-subgroup.active");
|
|
25
|
-
var tocLinks = [];
|
|
26
|
-
|
|
27
|
-
if (activeSubgroup) {
|
|
28
|
-
if (activeSubgroup.querySelector(".nav-subgroup.active")) {
|
|
29
|
-
tocLinks = activeSubgroup.querySelector(".nav-subgroup.active").querySelectorAll(".nav-leaf");
|
|
30
|
-
} else {
|
|
31
|
-
tocLinks = activeSubgroup.querySelectorAll(".nav-leaf");
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
} else {
|
|
35
|
-
tocLinks = document.querySelectorAll("nav.sidebar-nav .nav-group.active .nav-leaf");
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
var getPosition = function (parent, el) {
|
|
39
|
-
if (el) {
|
|
40
|
-
var parentRect = parent.getBoundingClientRect();
|
|
41
|
-
var elemRect = el.getBoundingClientRect();
|
|
42
|
-
|
|
43
|
-
return elemRect.top - parentRect.top;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
return null;
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
const _handleLeafScrollListener = function () {
|
|
50
|
-
if (tocLinks.length > 0) {
|
|
51
|
-
const activeLeaf = document.querySelector("nav.sidebar-nav .nav-leaf.active");
|
|
52
|
-
const buffer = document.body.clientHeight * 0.1;
|
|
53
|
-
const currentPos = window.pageYOffset + buffer;
|
|
54
|
-
|
|
55
|
-
// TODO: Probably a stupid way to compute "how far left can we scroll until
|
|
56
|
-
// we reach the bottom of the page", but it seems to work.
|
|
57
|
-
const scrollDistanceFromBottom = document.documentElement.scrollHeight
|
|
58
|
-
- document.documentElement.scrollTop
|
|
59
|
-
- document.body.clientHeight
|
|
60
|
-
- buffer;
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
activeLeaf && !activeLeaf.classList.contains("nav-subgroup-leaf") && activeLeaf.classList.remove("active");
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
if (scrollDistanceFromBottom > 0) {
|
|
67
|
-
const scrollNumber = [...headings].filter((heading) => getPosition(document.body, heading) <= currentPos).length - 1;
|
|
68
|
-
|
|
69
|
-
scrollNumber >= 0 && tocLinks[parseInt(scrollNumber, 10)].classList.add("active");
|
|
70
|
-
} else {
|
|
71
|
-
tocLinks[tocLinks.length - 1].classList.add("active");
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
_handleLeafScrollListener();
|
|
78
|
-
|
|
79
|
-
window.addEventListener("scroll", _handleLeafScrollListener);
|
|
80
|
-
|
|
81
|
-
// Makes sidebar scroll so that the active element is in view
|
|
82
|
-
const pathHash = window.location.pathname + window.location.hash;
|
|
83
|
-
const sidebarNav = document.querySelector("nav.sidebar-nav");
|
|
84
|
-
var activeLeaf = document.querySelector("nav.sidebar-nav .nav-leaf.active");
|
|
85
|
-
|
|
86
|
-
if (!activeLeaf) {
|
|
87
|
-
activeLeaf = [...document.querySelectorAll(`nav.sidebar-nav .nav-leaf`)]
|
|
88
|
-
.filter((navLeaf) => navLeaf.querySelector(`a[href="${pathHash}"]`))[0];
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
if (activeLeaf) {
|
|
92
|
-
sidebarNav.scrollTop = activeLeaf.offsetTop + activeLeaf.clientHeight - sidebarNav.clientHeight / 2;
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
})();
|
|
96
|
-
|
|
97
|
-
// Simple sidebar functionality while dg.js is being loaded
|
|
98
|
-
|
|
99
|
-
function _handleSimpleSidebar (e) {
|
|
100
|
-
const target = e.target.parentElement.parentElement;
|
|
101
|
-
|
|
102
|
-
if (target.tagName === "LI") {
|
|
103
|
-
if (target.classList.contains("active")) {
|
|
104
|
-
target.classList.remove("active");
|
|
105
|
-
} else {
|
|
106
|
-
const sidebar = document.querySelector(".sidebar");
|
|
107
|
-
const closeElement = sidebar.querySelector(`.${target.classList[0]}.active`);
|
|
108
|
-
|
|
109
|
-
closeElement && closeElement.classList.remove("active");
|
|
110
|
-
|
|
111
|
-
target.classList.add("active");
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
(function () {
|
|
117
|
-
const sidebar = document.querySelector(".sidebar");
|
|
118
|
-
|
|
119
|
-
sidebar.addEventListener("click", _handleSimpleSidebar);
|
|
120
|
-
})();
|
|
121
|
-
|
|
122
|
-
// Remove simple sidebar functionality when proper sidebar functionality is loaded
|
|
123
|
-
(function () {
|
|
124
|
-
document.addEventListener("DOMContentLoaded", (e)
|
|
125
|
-
const sidebar = document.querySelector(".sidebar");
|
|
126
|
-
|
|
127
|
-
sidebar.removeEventListener("click", _handleSimpleSidebar);
|
|
128
|
-
});
|
|
129
|
-
})();
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
1
|
+
/*global mermaid*/
|
|
2
|
+
// Initialize Mermaid.js
|
|
3
|
+
(function () {
|
|
4
|
+
var configObject = {
|
|
5
|
+
startOnLoad: true,
|
|
6
|
+
securityLevel: "loose",
|
|
7
|
+
htmlLabels: true,
|
|
8
|
+
sequence: {
|
|
9
|
+
useMaxWidth: false,
|
|
10
|
+
width: 300
|
|
11
|
+
},
|
|
12
|
+
flowchart: {
|
|
13
|
+
useMaxWidth: false
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
mermaid.initialize(configObject);
|
|
17
|
+
|
|
18
|
+
mermaid.init(undefined, "code.language-mermaid");
|
|
19
|
+
})();
|
|
20
|
+
|
|
21
|
+
// Initialize sidebar navigation scroll activation
|
|
22
|
+
(function () {
|
|
23
|
+
var headings = document.querySelectorAll(".doc-container h2");
|
|
24
|
+
const activeSubgroup = document.querySelector("nav.sidebar-nav .nav-subgroup.active");
|
|
25
|
+
var tocLinks = [];
|
|
26
|
+
|
|
27
|
+
if (activeSubgroup) {
|
|
28
|
+
if (activeSubgroup.querySelector(".nav-subgroup.active")) {
|
|
29
|
+
tocLinks = activeSubgroup.querySelector(".nav-subgroup.active").querySelectorAll(".nav-leaf");
|
|
30
|
+
} else {
|
|
31
|
+
tocLinks = activeSubgroup.querySelectorAll(".nav-leaf");
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
} else {
|
|
35
|
+
tocLinks = document.querySelectorAll("nav.sidebar-nav .nav-group.active .nav-leaf");
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
var getPosition = function (parent, el) {
|
|
39
|
+
if (el) {
|
|
40
|
+
var parentRect = parent.getBoundingClientRect();
|
|
41
|
+
var elemRect = el.getBoundingClientRect();
|
|
42
|
+
|
|
43
|
+
return elemRect.top - parentRect.top;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
return null;
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const _handleLeafScrollListener = function () {
|
|
50
|
+
if (tocLinks.length > 0) {
|
|
51
|
+
const activeLeaf = document.querySelector("nav.sidebar-nav .nav-leaf.active");
|
|
52
|
+
const buffer = document.body.clientHeight * 0.1;
|
|
53
|
+
const currentPos = window.pageYOffset + buffer;
|
|
54
|
+
|
|
55
|
+
// TODO: Probably a stupid way to compute "how far left can we scroll until
|
|
56
|
+
// we reach the bottom of the page", but it seems to work.
|
|
57
|
+
const scrollDistanceFromBottom = document.documentElement.scrollHeight
|
|
58
|
+
- document.documentElement.scrollTop
|
|
59
|
+
- document.body.clientHeight
|
|
60
|
+
- buffer;
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
activeLeaf && !activeLeaf.classList.contains("nav-subgroup-leaf") && activeLeaf.classList.remove("active");
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
if (scrollDistanceFromBottom > 0) {
|
|
67
|
+
const scrollNumber = [...headings].filter((heading) => getPosition(document.body, heading) <= currentPos).length - 1;
|
|
68
|
+
|
|
69
|
+
scrollNumber >= 0 && tocLinks[parseInt(scrollNumber, 10)].classList.add("active");
|
|
70
|
+
} else {
|
|
71
|
+
tocLinks[tocLinks.length - 1].classList.add("active");
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
_handleLeafScrollListener();
|
|
78
|
+
|
|
79
|
+
window.addEventListener("scroll", _handleLeafScrollListener);
|
|
80
|
+
|
|
81
|
+
// Makes sidebar scroll so that the active element is in view
|
|
82
|
+
const pathHash = window.location.pathname + window.location.hash;
|
|
83
|
+
const sidebarNav = document.querySelector("nav.sidebar-nav");
|
|
84
|
+
var activeLeaf = document.querySelector("nav.sidebar-nav .nav-leaf.active");
|
|
85
|
+
|
|
86
|
+
if (!activeLeaf) {
|
|
87
|
+
activeLeaf = [...document.querySelectorAll(`nav.sidebar-nav .nav-leaf`)]
|
|
88
|
+
.filter((navLeaf) => navLeaf.querySelector(`a[href="${pathHash}"]`))[0];
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
if (activeLeaf) {
|
|
92
|
+
sidebarNav.scrollTop = activeLeaf.offsetTop + activeLeaf.clientHeight - sidebarNav.clientHeight / 2;
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
})();
|
|
96
|
+
|
|
97
|
+
// Simple sidebar functionality while dg.js is being loaded
|
|
98
|
+
|
|
99
|
+
function _handleSimpleSidebar (e) {
|
|
100
|
+
const target = e.target.parentElement.parentElement;
|
|
101
|
+
|
|
102
|
+
if (target.tagName === "LI") {
|
|
103
|
+
if (target.classList.contains("active")) {
|
|
104
|
+
target.classList.remove("active");
|
|
105
|
+
} else {
|
|
106
|
+
const sidebar = document.querySelector(".sidebar");
|
|
107
|
+
const closeElement = sidebar.querySelector(`.${target.classList[0]}.active`);
|
|
108
|
+
|
|
109
|
+
closeElement && closeElement.classList.remove("active");
|
|
110
|
+
|
|
111
|
+
target.classList.add("active");
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
(function () {
|
|
117
|
+
const sidebar = document.querySelector(".sidebar");
|
|
118
|
+
|
|
119
|
+
sidebar.addEventListener("click", _handleSimpleSidebar);
|
|
120
|
+
})();
|
|
121
|
+
|
|
122
|
+
// Remove simple sidebar functionality when proper sidebar functionality is loaded
|
|
123
|
+
(function () {
|
|
124
|
+
document.addEventListener("DOMContentLoaded", function(e) {
|
|
125
|
+
const sidebar = document.querySelector(".sidebar");
|
|
126
|
+
|
|
127
|
+
sidebar.removeEventListener("click", _handleSimpleSidebar);
|
|
128
|
+
});
|
|
129
|
+
})();
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
// Override the topbar click to show and hide our own sidebar
|
|
133
|
+
(function () {
|
|
134
|
+
const isLeaf = function(currentUrl) {
|
|
135
|
+
const path = window.location.pathname;
|
|
136
|
+
const href = currentUrl || window.location.href;
|
|
137
|
+
const pathIndex = href.indexOf(path);
|
|
138
|
+
const relativeUrl = href.substring(pathIndex);
|
|
139
|
+
const currentSidebarLink = document.querySelector(`.sidebar a[href$="${relativeUrl}"]`);
|
|
140
|
+
return currentSidebarLink !== null && currentSidebarLink !== "undefined"
|
|
141
|
+
? currentSidebarLink.parentElement.classList.contains("nav-leaf")
|
|
142
|
+
: false;
|
|
143
|
+
};
|
|
144
|
+
|
|
145
|
+
const isHome = function() {
|
|
146
|
+
return window.location.pathname === "/";
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
const controlVisibility = function(currentUrl) {
|
|
150
|
+
const sidebar = document.querySelector(".sidebar");
|
|
151
|
+
const overlay = document.querySelector("#overlay");
|
|
152
|
+
const topbarButton = document.querySelector(".topbar-btn");
|
|
153
|
+
const topbarClose = document.querySelector(".topbar-close");
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
if (isHome() || isLeaf(currentUrl)) {
|
|
157
|
+
sidebar.classList.remove("visible");
|
|
158
|
+
overlay.style.display = "none";
|
|
159
|
+
topbarButton.style.display = "flex";
|
|
160
|
+
topbarClose.style.display = "none";
|
|
161
|
+
} else {
|
|
162
|
+
sidebar.classList.add("visible");
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
|
|
166
|
+
document.addEventListener("DOMContentLoaded", function() {
|
|
167
|
+
const topbarButton = document.querySelector(".topbar-btn");
|
|
168
|
+
const newTopbarButton = topbarButton.cloneNode(true);
|
|
169
|
+
const sidebar = document.querySelector(".sidebar");
|
|
170
|
+
const topbarClose = document.querySelector(".topbar-close");
|
|
171
|
+
const overlay = document.querySelector("#overlay");
|
|
172
|
+
const searchButton = document.querySelector("#search-btn");
|
|
173
|
+
|
|
174
|
+
controlVisibility();
|
|
175
|
+
|
|
176
|
+
if (sidebar.classList.contains("visible")) {
|
|
177
|
+
newTopbarButton.style.display = "none";
|
|
178
|
+
topbarClose.style.display = "flex";
|
|
179
|
+
overlay.style.display = "block";
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
newTopbarButton.addEventListener("click", function(e) {
|
|
183
|
+
if (sidebar.classList.contains("visible")) {
|
|
184
|
+
sidebar.classList.remove("visible");
|
|
185
|
+
newTopbarButton.style.display = "flex";
|
|
186
|
+
topbarClose.style.display = "none";
|
|
187
|
+
overlay.style.display = "none";
|
|
188
|
+
|
|
189
|
+
} else {
|
|
190
|
+
sidebar.classList.add("visible");
|
|
191
|
+
newTopbarButton.style.display = "none";
|
|
192
|
+
topbarClose.style.display = "flex";
|
|
193
|
+
overlay.style.display = "block";
|
|
194
|
+
}
|
|
195
|
+
});
|
|
196
|
+
|
|
197
|
+
topbarClose.addEventListener("click", function(e) {
|
|
198
|
+
if (sidebar.classList.contains("visible")) {
|
|
199
|
+
sidebar.classList.remove("visible");
|
|
200
|
+
newTopbarButton.style.display = "flex";
|
|
201
|
+
topbarClose.style.display = "none";
|
|
202
|
+
overlay.style.display = "none";
|
|
203
|
+
} else {
|
|
204
|
+
sidebar.classList.add("visible");
|
|
205
|
+
newTopbarButton.style.display = "none";
|
|
206
|
+
topbarClose.style.display = "flex";
|
|
207
|
+
overlay.style.display = "block";
|
|
208
|
+
}
|
|
209
|
+
});
|
|
210
|
+
|
|
211
|
+
overlay.addEventListener("click", function(e) {
|
|
212
|
+
if (sidebar.classList.contains("visible")) {
|
|
213
|
+
sidebar.classList.remove("visible");
|
|
214
|
+
newTopbarButton.style.display = "flex";
|
|
215
|
+
topbarClose.style.display = "none";
|
|
216
|
+
overlay.style.display = "none";
|
|
217
|
+
}
|
|
218
|
+
});
|
|
219
|
+
|
|
220
|
+
document.querySelectorAll(".nav-leaf a").forEach(function(a) {
|
|
221
|
+
a.addEventListener("click", function(e) {
|
|
222
|
+
controlVisibility(e.target.href);
|
|
223
|
+
});
|
|
224
|
+
});
|
|
225
|
+
|
|
226
|
+
topbarButton.parentNode.replaceChild(newTopbarButton, topbarButton);
|
|
227
|
+
|
|
228
|
+
searchButton.addEventListener("click", function(e) {
|
|
229
|
+
const searchInput = document.querySelector(".search-input");
|
|
230
|
+
|
|
231
|
+
if (searchInput.style.display !== "block") {
|
|
232
|
+
searchInput.style.display = "block";
|
|
233
|
+
searchInput.focus();
|
|
234
|
+
e.preventDefault();
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
return false;
|
|
238
|
+
});
|
|
239
|
+
});
|
|
240
|
+
})();
|
|
241
|
+
|
|
242
|
+
|
|
243
|
+
// Initialize Tipue search
|
|
244
|
+
(function() {
|
|
245
|
+
$(document).ready(function () {
|
|
246
|
+
$("#tipue_search_input").tipuesearch();
|
|
247
|
+
});
|
|
248
|
+
})();
|
data/lib/field_tag.rb
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
# Module SwedbankPay
|
|
4
|
+
module SwedbankPay
|
|
5
|
+
# Implements the 'Level' Liquid tag.
|
|
6
|
+
class FieldTag < Liquid::Tag
|
|
7
|
+
def initialize(tag_name, input, _)
|
|
8
|
+
super
|
|
9
|
+
|
|
10
|
+
(@field_name, @level) = parse_input(input)
|
|
11
|
+
end
|
|
12
|
+
|
|
13
|
+
def render(_context)
|
|
14
|
+
return '' if @field_name.nil? || @field_name.empty?
|
|
15
|
+
|
|
16
|
+
level_class = "field-level field-level-#{@level}"
|
|
17
|
+
|
|
18
|
+
"<span class=\"#{level_class}\"><code class=\"language-json highlighter-rouge\">#{@field_name}</code></span>"
|
|
19
|
+
end
|
|
20
|
+
|
|
21
|
+
private
|
|
22
|
+
|
|
23
|
+
def parse_input(input)
|
|
24
|
+
return ['', 1] if input.nil? || input.empty? || input.strip.empty?
|
|
25
|
+
return [input.strip, 1] unless input.include?(',')
|
|
26
|
+
|
|
27
|
+
values = input.split(',')
|
|
28
|
+
field_name = field_name(values)
|
|
29
|
+
level = level(values)
|
|
30
|
+
|
|
31
|
+
[field_name, level]
|
|
32
|
+
end
|
|
33
|
+
|
|
34
|
+
def field_name(values)
|
|
35
|
+
values[0].strip
|
|
36
|
+
end
|
|
37
|
+
|
|
38
|
+
def level(values)
|
|
39
|
+
return 1 if values.size == 1
|
|
40
|
+
|
|
41
|
+
field_level = values[1].strip.to_i
|
|
42
|
+
|
|
43
|
+
field_level.positive? ? field_level : 1
|
|
44
|
+
rescue StandardError
|
|
45
|
+
1
|
|
46
|
+
end
|
|
47
|
+
end
|
|
48
|
+
end
|
|
49
|
+
|
|
50
|
+
Liquid::Template.register_tag('f', SwedbankPay::FieldTag)
|
data/lib/gem_version.rb
CHANGED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
# Module SwedbankPay
|
|
4
|
+
module SwedbankPay
|
|
5
|
+
# Calculates reading time based on the formula used by Medium
|
|
6
|
+
# https://medium.com/the-story/read-time-and-you-bc2048ab620c
|
|
7
|
+
|
|
8
|
+
# Installation: drop this into your _plugins folder
|
|
9
|
+
# Usage: {{ page.content | read_time }}
|
|
10
|
+
# Note: this requires img tags to be in the form of <img ... />. If you're
|
|
11
|
+
# using this on a post listing page, make sure to markdownify the post content
|
|
12
|
+
# first.
|
|
13
|
+
module ReadTimeFilter
|
|
14
|
+
def read_time(input)
|
|
15
|
+
words_per_minute = 275
|
|
16
|
+
# number of seconds per image to start at, default is 12s
|
|
17
|
+
img_time_max = 12
|
|
18
|
+
# time per image will decrease by 1 for every image, to a minimum
|
|
19
|
+
# of this time, default is 3s
|
|
20
|
+
img_time_min = 3
|
|
21
|
+
|
|
22
|
+
strings = input.split(%r{<img.* />})
|
|
23
|
+
|
|
24
|
+
seconds = (strings.join(' ').split.size.to_f / (words_per_minute / 60))
|
|
25
|
+
|
|
26
|
+
# number of images minus one for correct number of iterations
|
|
27
|
+
(strings.size - 2).times do |i|
|
|
28
|
+
t = (img_time_max - i)
|
|
29
|
+
image_time = [t, img_time_min].max
|
|
30
|
+
seconds += image_time
|
|
31
|
+
end
|
|
32
|
+
|
|
33
|
+
minutes = (seconds / 60).ceil
|
|
34
|
+
|
|
35
|
+
"#{minutes} min read"
|
|
36
|
+
end
|
|
37
|
+
end
|
|
38
|
+
end
|
|
39
|
+
|
|
40
|
+
Liquid::Template.register_filter(SwedbankPay::ReadTimeFilter)
|
data/lib/regex_capture_filter.rb
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
require 'liquid'
|
|
4
4
|
|
|
5
|
-
#
|
|
6
|
-
module
|
|
5
|
+
# Module SwedbankPay
|
|
6
|
+
module SwedbankPay
|
|
7
7
|
# Adds a 'regex_capture' filter to Liquid. Performs a regular expression match
|
|
8
8
|
# on the provided string and returns the capture as an array. Example usage:
|
|
9
9
|
# {{ html | regex_capture: 'id="([^"]+)"' | first }}
|
|
@@ -15,4 +15,4 @@ module Jekyll
|
|
|
15
15
|
end
|
|
16
16
|
end
|
|
17
17
|
|
|
18
|
-
Liquid::Template.register_filter(
|
|
18
|
+
Liquid::Template.register_filter(SwedbankPay::RegexCaptureFilter)
|
data/lib/sidebar_html_builder.rb
CHANGED
|
@@ -52,10 +52,14 @@ module SwedbankPay
|
|
|
52
52
|
page.doc.xpath('//*[@id="dg-sidebar"]').first.set_attribute('class', root_class)
|
|
53
53
|
"<li class=\"#{item_class}\">
|
|
54
54
|
#{title_markup}
|
|
55
|
-
#{item_class === 'main-nav-li' || item_class === 'main-nav-li active'
|
|
55
|
+
#{if item_class === 'main-nav-li' || item_class === 'main-nav-li active'
|
|
56
|
+
"<nav class=\"sidebar-secondary-nav\">
|
|
56
57
|
<header class=\"secondary-nav-header\">#{page.title.section || page.title}</header>
|
|
57
58
|
#{sub_items_markup}
|
|
58
|
-
</nav>"
|
|
59
|
+
</nav>"
|
|
60
|
+
else
|
|
61
|
+
sub_items_markup
|
|
62
|
+
end}
|
|
59
63
|
</li>"
|
|
60
64
|
end
|
|
61
65
|
|
|
@@ -92,7 +96,9 @@ module SwedbankPay
|
|
|
92
96
|
|
|
93
97
|
def title_markup(page, level, is_leaf)
|
|
94
98
|
lead_title = lead_title(page)
|
|
95
|
-
|
|
99
|
+
if level.zero? && lead_title != 'Home'
|
|
100
|
+
return "<a href=\"#{page.path}\"><i class=\"material-icons-outlined\" aria-hidden=\"true\">#{page.icon}</i>#{lead_title}</a>"
|
|
101
|
+
end
|
|
96
102
|
return "<a href=\"#{page.path}\">#{page.section || page.title}</a>" if lead_title != 'Home'
|
|
97
103
|
|
|
98
104
|
main_title = main_title(page, is_leaf)
|
data/lib/sidebar_path.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: swedbank-pay-design-guide-jekyll-theme
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 2.
|
|
4
|
+
version: 2.1.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Swedbank Pay
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2023-
|
|
11
|
+
date: 2023-02-24 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: faraday
|
|
@@ -436,8 +436,9 @@ files:
|
|
|
436
436
|
- assets/tipuesearch/tipuesearch.min.js
|
|
437
437
|
- assets/tipuesearch/tipuesearch_content.js
|
|
438
438
|
- assets/tipuesearch/tipuesearch_set.js
|
|
439
|
+
- lib/field_tag.rb
|
|
439
440
|
- lib/gem_version.rb
|
|
440
|
-
- lib/
|
|
441
|
+
- lib/read_time_filter.rb
|
|
441
442
|
- lib/regex_capture_filter.rb
|
|
442
443
|
- lib/safe_merge.rb
|
|
443
444
|
- lib/sanitized_filename.rb
|
data/lib/read_time.rb
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
# Calculates reading time based on the formula used by Medium
|
|
2
|
-
# https://medium.com/the-story/read-time-and-you-bc2048ab620c
|
|
3
|
-
|
|
4
|
-
# Installation: drop this into your _plugins folder
|
|
5
|
-
# Usage: {{ page.content | read_time }}
|
|
6
|
-
# Note: this requires img tags to be in the form of <img ... />. If you're
|
|
7
|
-
# using this on a post listing page, make sure to markdownify the post content
|
|
8
|
-
# first.
|
|
9
|
-
module ReadTimeFilter
|
|
10
|
-
def read_time(input)
|
|
11
|
-
words_per_minute = 275
|
|
12
|
-
# number of seconds per image to start at, default is 12s
|
|
13
|
-
img_time_max = 12
|
|
14
|
-
# time per image will decrease by 1 for every image, to a minimum
|
|
15
|
-
# of this time, default is 3s
|
|
16
|
-
img_time_min = 3
|
|
17
|
-
|
|
18
|
-
strings = input.split(/<img.* \/>/)
|
|
19
|
-
|
|
20
|
-
seconds = (strings.join(" ").split.size.to_f / (words_per_minute / 60))
|
|
21
|
-
|
|
22
|
-
# number of images minus one for correct number of iterations
|
|
23
|
-
(strings.size - 2).times do |i|
|
|
24
|
-
t = (img_time_max - i)
|
|
25
|
-
image_time = t > img_time_min ? t : img_time_min
|
|
26
|
-
seconds = seconds + image_time
|
|
27
|
-
end
|
|
28
|
-
|
|
29
|
-
minutes = (seconds / 60).ceil
|
|
30
|
-
|
|
31
|
-
"#{minutes} min read"
|
|
32
|
-
end
|
|
33
|
-
end
|
|
34
|
-
|
|
35
|
-
Liquid::Template.register_filter(ReadTimeFilter)
|