1
2
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
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
/* global Vue */
import { getNextUntil, isContainedInHeading } from '../shared/dom';
import NavigationToggle from './components/navigation_toggle.vue';
import VersionBanner from './components/version_banner.vue';
import { setupTableOfContents } from './setup_table_of_contents';
import VersionsMenu from './components/versions_menu.vue';
import TabsSection from './components/tabs_section.vue';
import DocsBadges from './components/docs_badges.vue';
/* eslint-disable no-new */
document.addEventListener('DOMContentLoaded', () => {
setupTableOfContents();
/**
* Badge components
*
* Badges are typically added in markdown and rendered by Nanoc as spans.
* Contributor docs have a section-wide badge added here.
*/
const isContributorDocs = () => {
const paths = [
'/ee/development/',
'/omnibus/development/',
'/runner/development/',
'/charts/development/',
];
return paths.some((substr) => window.location.pathname.startsWith(substr));
};
// Inject markup for our Contributor docs badge.
if (isContributorDocs()) {
document
.querySelector('h1 a')
.insertAdjacentHTML(
'beforebegin',
' <span data-component="docs-badges"><span data-type="content" data-value="contribute"></span></span>',
);
}
document.querySelectorAll('[data-component="docs-badges"]').forEach((badgeSet) => {
const badges = badgeSet.querySelectorAll('span');
// Get badges that were added to the heading
const badgesData = Array.from(badges).map((badge) => ({
type: badge.getAttribute('data-type'),
text: badge.getAttribute('data-value'),
}));
new Vue({
el: badgeSet,
components: {
DocsBadges,
},
render(createElement) {
return createElement(DocsBadges, {
props: { badgesData, isHeading: isContainedInHeading(badgeSet) },
});
},
});
});
/**
* Banner components
*/
const versionBanner = document.querySelector('#js-version-banner');
if (versionBanner) {
const isOutdated = versionBanner.hasAttribute('data-is-outdated');
const { latestVersionUrl, archivesUrl } = versionBanner.dataset;
new Vue({
el: versionBanner,
components: {
VersionBanner,
},
render(createElement) {
return createElement(VersionBanner, {
props: { isOutdated, latestVersionUrl, archivesUrl },
on: {
toggleVersionBanner(isVisible) {
const wrapper = document.querySelector('.wrapper');
wrapper.classList.toggle('show-banner', isVisible);
},
},
});
},
});
}
/**
* Navigation toggle component
*/
new Vue({
el: '#js-nav-toggle',
components: {
NavigationToggle,
},
render(createElement) {
return createElement(NavigationToggle, {
props: {
targetSelector: ['.nav-wrapper', '.main'],
},
});
},
});
/**
* Versions menu component
*/
new Vue({
el: '.js-versions-menu',
components: {
VersionsMenu,
},
render(createElement) {
return createElement(VersionsMenu);
},
});
/**
* Tabs component
*/
const tabsetSelector = '.js-tabs';
document.querySelectorAll(tabsetSelector).forEach((tabset) => {
const tabTitles = [];
const tabContents = [];
tabset.querySelectorAll('.tab-title').forEach((tab) => {
tabTitles.push(tab.innerText);
tabContents.push(getNextUntil(tab, '.tab-title'));
});
new Vue({
el: tabsetSelector,
components: {
TabsSection,
},
render(createElement) {
return createElement(TabsSection, {
props: {
tabTitles,
tabContents,
},
});
},
});
});
});
|
