@backstage/plugin-techdocs 1.0.1 → 1.1.0-next.3
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/CHANGELOG.md +114 -0
- package/dist/esm/{TechDocsCustomHome-174c6f0d.esm.js → TechDocsCustomHome-b1e53b51.esm.js} +16 -11
- package/dist/esm/{TechDocsCustomHome-174c6f0d.esm.js.map → TechDocsCustomHome-b1e53b51.esm.js.map} +1 -1
- package/dist/esm/index-7b32409a.esm.js +40 -0
- package/dist/esm/index-7b32409a.esm.js.map +1 -0
- package/dist/esm/index-fba8389b.esm.js +2185 -0
- package/dist/esm/index-fba8389b.esm.js.map +1 -0
- package/dist/index.d.ts +149 -48
- package/dist/index.esm.js +39 -2130
- package/dist/index.esm.js.map +1 -1
- package/package.json +21 -16
package/dist/index.esm.js
CHANGED
|
@@ -1,2131 +1,40 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import
|
|
22
|
-
import
|
|
23
|
-
import
|
|
24
|
-
import
|
|
25
|
-
import
|
|
26
|
-
import
|
|
27
|
-
import
|
|
28
|
-
import
|
|
29
|
-
import
|
|
30
|
-
import
|
|
31
|
-
import
|
|
32
|
-
import
|
|
33
|
-
import
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
class TechDocsClient {
|
|
43
|
-
constructor(options) {
|
|
44
|
-
this.configApi = options.configApi;
|
|
45
|
-
this.discoveryApi = options.discoveryApi;
|
|
46
|
-
this.fetchApi = options.fetchApi;
|
|
47
|
-
}
|
|
48
|
-
async getApiOrigin() {
|
|
49
|
-
return await this.discoveryApi.getBaseUrl("techdocs");
|
|
50
|
-
}
|
|
51
|
-
async getTechDocsMetadata(entityId) {
|
|
52
|
-
const { kind, namespace, name } = entityId;
|
|
53
|
-
const apiOrigin = await this.getApiOrigin();
|
|
54
|
-
const requestUrl = `${apiOrigin}/metadata/techdocs/${namespace}/${kind}/${name}`;
|
|
55
|
-
const request = await this.fetchApi.fetch(`${requestUrl}`);
|
|
56
|
-
if (!request.ok) {
|
|
57
|
-
throw await ResponseError.fromResponse(request);
|
|
58
|
-
}
|
|
59
|
-
return await request.json();
|
|
60
|
-
}
|
|
61
|
-
async getEntityMetadata(entityId) {
|
|
62
|
-
const { kind, namespace, name } = entityId;
|
|
63
|
-
const apiOrigin = await this.getApiOrigin();
|
|
64
|
-
const requestUrl = `${apiOrigin}/metadata/entity/${namespace}/${kind}/${name}`;
|
|
65
|
-
const request = await this.fetchApi.fetch(`${requestUrl}`);
|
|
66
|
-
if (!request.ok) {
|
|
67
|
-
throw await ResponseError.fromResponse(request);
|
|
68
|
-
}
|
|
69
|
-
return await request.json();
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
class TechDocsStorageClient {
|
|
73
|
-
constructor(options) {
|
|
74
|
-
this.configApi = options.configApi;
|
|
75
|
-
this.discoveryApi = options.discoveryApi;
|
|
76
|
-
this.identityApi = options.identityApi;
|
|
77
|
-
this.fetchApi = options.fetchApi;
|
|
78
|
-
}
|
|
79
|
-
async getApiOrigin() {
|
|
80
|
-
return await this.discoveryApi.getBaseUrl("techdocs");
|
|
81
|
-
}
|
|
82
|
-
async getStorageUrl() {
|
|
83
|
-
var _a;
|
|
84
|
-
return (_a = this.configApi.getOptionalString("techdocs.storageUrl")) != null ? _a : `${await this.discoveryApi.getBaseUrl("techdocs")}/static/docs`;
|
|
85
|
-
}
|
|
86
|
-
async getBuilder() {
|
|
87
|
-
return this.configApi.getString("techdocs.builder");
|
|
88
|
-
}
|
|
89
|
-
async getEntityDocs(entityId, path) {
|
|
90
|
-
const { kind, namespace, name } = entityId;
|
|
91
|
-
const storageUrl = await this.getStorageUrl();
|
|
92
|
-
const url = `${storageUrl}/${namespace}/${kind}/${name}/${path}`;
|
|
93
|
-
const request = await this.fetchApi.fetch(`${url.endsWith("/") ? url : `${url}/`}index.html`);
|
|
94
|
-
let errorMessage = "";
|
|
95
|
-
switch (request.status) {
|
|
96
|
-
case 404:
|
|
97
|
-
errorMessage = "Page not found. ";
|
|
98
|
-
if (!path) {
|
|
99
|
-
errorMessage += "This could be because there is no index.md file in the root of the docs directory of this repository.";
|
|
100
|
-
}
|
|
101
|
-
throw new NotFoundError(errorMessage);
|
|
102
|
-
case 500:
|
|
103
|
-
errorMessage = "Could not generate documentation or an error in the TechDocs backend. ";
|
|
104
|
-
throw new Error(errorMessage);
|
|
105
|
-
}
|
|
106
|
-
return request.text();
|
|
107
|
-
}
|
|
108
|
-
async syncEntityDocs(entityId, logHandler = () => {
|
|
109
|
-
}) {
|
|
110
|
-
const { kind, namespace, name } = entityId;
|
|
111
|
-
const apiOrigin = await this.getApiOrigin();
|
|
112
|
-
const url = `${apiOrigin}/sync/${namespace}/${kind}/${name}`;
|
|
113
|
-
const { token } = await this.identityApi.getCredentials();
|
|
114
|
-
return new Promise((resolve, reject) => {
|
|
115
|
-
const source = new EventSourcePolyfill(url, {
|
|
116
|
-
withCredentials: true,
|
|
117
|
-
headers: token ? { Authorization: `Bearer ${token}` } : {}
|
|
118
|
-
});
|
|
119
|
-
source.addEventListener("log", (e) => {
|
|
120
|
-
if (e.data) {
|
|
121
|
-
logHandler(JSON.parse(e.data));
|
|
122
|
-
}
|
|
123
|
-
});
|
|
124
|
-
source.addEventListener("finish", (e) => {
|
|
125
|
-
let updated = false;
|
|
126
|
-
if (e.data) {
|
|
127
|
-
({ updated } = JSON.parse(e.data));
|
|
128
|
-
}
|
|
129
|
-
resolve(updated ? "updated" : "cached");
|
|
130
|
-
});
|
|
131
|
-
source.onerror = (e) => {
|
|
132
|
-
source.close();
|
|
133
|
-
switch (e.status) {
|
|
134
|
-
case 404:
|
|
135
|
-
reject(new NotFoundError(e.message));
|
|
136
|
-
return;
|
|
137
|
-
default:
|
|
138
|
-
reject(new Error(e.data));
|
|
139
|
-
return;
|
|
140
|
-
}
|
|
141
|
-
};
|
|
142
|
-
});
|
|
143
|
-
}
|
|
144
|
-
async getBaseUrl(oldBaseUrl, entityId, path) {
|
|
145
|
-
const { kind, namespace, name } = entityId;
|
|
146
|
-
const apiOrigin = await this.getApiOrigin();
|
|
147
|
-
const newBaseUrl = `${apiOrigin}/static/docs/${namespace}/${kind}/${name}/${path}`;
|
|
148
|
-
return new URL(oldBaseUrl, newBaseUrl.endsWith("/") ? newBaseUrl : `${newBaseUrl}/`).toString();
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
const isSvgNeedingInlining = (attrName, attrVal, apiOrigin) => {
|
|
153
|
-
const isSrcToSvg = attrName === "src" && attrVal.endsWith(".svg");
|
|
154
|
-
const isRelativeUrl = !attrVal.match(/^([a-z]*:)?\/\//i);
|
|
155
|
-
const pointsToOurBackend = attrVal.startsWith(apiOrigin);
|
|
156
|
-
return isSrcToSvg && (isRelativeUrl || pointsToOurBackend);
|
|
157
|
-
};
|
|
158
|
-
const addBaseUrl = ({
|
|
159
|
-
techdocsStorageApi,
|
|
160
|
-
entityId,
|
|
161
|
-
path
|
|
162
|
-
}) => {
|
|
163
|
-
return async (dom) => {
|
|
164
|
-
const apiOrigin = await techdocsStorageApi.getApiOrigin();
|
|
165
|
-
const updateDom = async (list, attributeName) => {
|
|
166
|
-
for (const elem of list) {
|
|
167
|
-
if (elem.hasAttribute(attributeName)) {
|
|
168
|
-
const elemAttribute = elem.getAttribute(attributeName);
|
|
169
|
-
if (!elemAttribute)
|
|
170
|
-
return;
|
|
171
|
-
const newValue = await techdocsStorageApi.getBaseUrl(elemAttribute, entityId, path);
|
|
172
|
-
if (isSvgNeedingInlining(attributeName, elemAttribute, apiOrigin)) {
|
|
173
|
-
try {
|
|
174
|
-
const svg = await fetch(newValue, { credentials: "include" });
|
|
175
|
-
const svgContent = await svg.text();
|
|
176
|
-
elem.setAttribute(attributeName, `data:image/svg+xml;base64,${btoa(svgContent)}`);
|
|
177
|
-
} catch (e) {
|
|
178
|
-
elem.setAttribute("alt", `Error: ${elemAttribute}`);
|
|
179
|
-
}
|
|
180
|
-
} else {
|
|
181
|
-
elem.setAttribute(attributeName, newValue);
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
};
|
|
186
|
-
await Promise.all([
|
|
187
|
-
updateDom(dom.querySelectorAll("img"), "src"),
|
|
188
|
-
updateDom(dom.querySelectorAll("script"), "src"),
|
|
189
|
-
updateDom(dom.querySelectorAll("source"), "src"),
|
|
190
|
-
updateDom(dom.querySelectorAll("link"), "href"),
|
|
191
|
-
updateDom(dom.querySelectorAll("a[download]"), "href")
|
|
192
|
-
]);
|
|
193
|
-
return dom;
|
|
194
|
-
};
|
|
195
|
-
};
|
|
196
|
-
|
|
197
|
-
const addGitFeedbackLink = (scmIntegrationsApi) => {
|
|
198
|
-
return (dom) => {
|
|
199
|
-
const sourceAnchor = dom.querySelector('[title="Edit this page"]');
|
|
200
|
-
if (!sourceAnchor || !sourceAnchor.href) {
|
|
201
|
-
return dom;
|
|
202
|
-
}
|
|
203
|
-
const sourceURL = new URL(sourceAnchor.href);
|
|
204
|
-
const integration = scmIntegrationsApi.byUrl(sourceURL);
|
|
205
|
-
if ((integration == null ? void 0 : integration.type) !== "github" && (integration == null ? void 0 : integration.type) !== "gitlab") {
|
|
206
|
-
return dom;
|
|
207
|
-
}
|
|
208
|
-
const title = dom.querySelector("article>h1").childNodes[0].textContent;
|
|
209
|
-
const issueTitle = encodeURIComponent(`Documentation Feedback: ${title}`);
|
|
210
|
-
const issueDesc = encodeURIComponent(`Page source:
|
|
211
|
-
${sourceAnchor.href}
|
|
212
|
-
|
|
213
|
-
Feedback:`);
|
|
214
|
-
const gitUrl = (integration == null ? void 0 : integration.type) === "github" ? replaceGitHubUrlType(sourceURL.href, "blob") : sourceURL.href;
|
|
215
|
-
const gitInfo = parseGitUrl(gitUrl);
|
|
216
|
-
const repoPath = `/${gitInfo.organization}/${gitInfo.name}`;
|
|
217
|
-
const feedbackLink = sourceAnchor.cloneNode();
|
|
218
|
-
switch (integration == null ? void 0 : integration.type) {
|
|
219
|
-
case "gitlab":
|
|
220
|
-
feedbackLink.href = `${sourceURL.origin}${repoPath}/issues/new?issue[title]=${issueTitle}&issue[description]=${issueDesc}`;
|
|
221
|
-
break;
|
|
222
|
-
case "github":
|
|
223
|
-
feedbackLink.href = `${sourceURL.origin}${repoPath}/issues/new?title=${issueTitle}&body=${issueDesc}`;
|
|
224
|
-
break;
|
|
225
|
-
default:
|
|
226
|
-
return dom;
|
|
227
|
-
}
|
|
228
|
-
ReactDOM.render(React.createElement(FeedbackOutlinedIcon), feedbackLink);
|
|
229
|
-
feedbackLink.style.paddingLeft = "5px";
|
|
230
|
-
feedbackLink.title = "Leave feedback for this page";
|
|
231
|
-
feedbackLink.id = "git-feedback-link";
|
|
232
|
-
sourceAnchor == null ? void 0 : sourceAnchor.insertAdjacentElement("beforebegin", feedbackLink);
|
|
233
|
-
return dom;
|
|
234
|
-
};
|
|
235
|
-
};
|
|
236
|
-
|
|
237
|
-
const addSidebarToggle = () => {
|
|
238
|
-
return (dom) => {
|
|
239
|
-
const mkdocsToggleSidebar = dom.querySelector('.md-header label[for="__drawer"]');
|
|
240
|
-
const article = dom.querySelector("article");
|
|
241
|
-
if (!mkdocsToggleSidebar || !article) {
|
|
242
|
-
return dom;
|
|
243
|
-
}
|
|
244
|
-
const toggleSidebar = mkdocsToggleSidebar.cloneNode();
|
|
245
|
-
ReactDOM.render(React.createElement(MenuIcon), toggleSidebar);
|
|
246
|
-
toggleSidebar.style.paddingLeft = "5px";
|
|
247
|
-
toggleSidebar.classList.add("md-content__button");
|
|
248
|
-
toggleSidebar.title = "Toggle Sidebar";
|
|
249
|
-
toggleSidebar.id = "toggle-sidebar";
|
|
250
|
-
article == null ? void 0 : article.prepend(toggleSidebar);
|
|
251
|
-
return dom;
|
|
252
|
-
};
|
|
253
|
-
};
|
|
254
|
-
|
|
255
|
-
const rewriteDocLinks = () => {
|
|
256
|
-
return (dom) => {
|
|
257
|
-
const updateDom = (list, attributeName) => {
|
|
258
|
-
Array.from(list).filter((elem) => elem.hasAttribute(attributeName)).forEach((elem) => {
|
|
259
|
-
const elemAttribute = elem.getAttribute(attributeName);
|
|
260
|
-
if (elemAttribute) {
|
|
261
|
-
if (elemAttribute.match(/^https?:\/\//i)) {
|
|
262
|
-
elem.setAttribute("target", "_blank");
|
|
263
|
-
}
|
|
264
|
-
try {
|
|
265
|
-
const normalizedWindowLocation = normalizeUrl(window.location.href);
|
|
266
|
-
elem.setAttribute(attributeName, new URL(elemAttribute, normalizedWindowLocation).toString());
|
|
267
|
-
} catch (_e) {
|
|
268
|
-
elem.replaceWith(elem.textContent || elemAttribute);
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
});
|
|
272
|
-
};
|
|
273
|
-
updateDom(Array.from(dom.getElementsByTagName("a")), "href");
|
|
274
|
-
return dom;
|
|
275
|
-
};
|
|
276
|
-
};
|
|
277
|
-
function normalizeUrl(input) {
|
|
278
|
-
const url = new URL(input);
|
|
279
|
-
if (!url.pathname.endsWith("/") && !url.pathname.endsWith(".html")) {
|
|
280
|
-
url.pathname += "/";
|
|
281
|
-
}
|
|
282
|
-
return url.toString();
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
const addLinkClickListener = ({
|
|
286
|
-
baseUrl,
|
|
287
|
-
onClick
|
|
288
|
-
}) => {
|
|
289
|
-
return (dom) => {
|
|
290
|
-
Array.from(dom.getElementsByTagName("a")).forEach((elem) => {
|
|
291
|
-
elem.addEventListener("click", (e) => {
|
|
292
|
-
const target = elem;
|
|
293
|
-
const href = target.getAttribute("href");
|
|
294
|
-
if (!href)
|
|
295
|
-
return;
|
|
296
|
-
if (href.startsWith(baseUrl) && !elem.hasAttribute("download")) {
|
|
297
|
-
e.preventDefault();
|
|
298
|
-
onClick(e, href);
|
|
299
|
-
}
|
|
300
|
-
});
|
|
301
|
-
});
|
|
302
|
-
return dom;
|
|
303
|
-
};
|
|
304
|
-
};
|
|
305
|
-
|
|
306
|
-
const CopyToClipboardTooltip = withStyles((theme) => ({
|
|
307
|
-
tooltip: {
|
|
308
|
-
fontSize: "inherit",
|
|
309
|
-
color: theme.palette.text.primary,
|
|
310
|
-
margin: 0,
|
|
311
|
-
padding: theme.spacing(0.5),
|
|
312
|
-
backgroundColor: "transparent",
|
|
313
|
-
boxShadow: "none"
|
|
314
|
-
}
|
|
315
|
-
}))(Tooltip);
|
|
316
|
-
const CopyToClipboardIcon = () => /* @__PURE__ */ React.createElement(SvgIcon, null, /* @__PURE__ */ React.createElement("path", {
|
|
317
|
-
d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
|
|
318
|
-
}));
|
|
319
|
-
const CopyToClipboardButton = ({ text }) => {
|
|
320
|
-
const [open, setOpen] = useState(false);
|
|
321
|
-
const handleClick = useCallback(() => {
|
|
322
|
-
navigator.clipboard.writeText(text);
|
|
323
|
-
setOpen(true);
|
|
324
|
-
}, [text]);
|
|
325
|
-
const handleClose = useCallback(() => {
|
|
326
|
-
setOpen(false);
|
|
327
|
-
}, [setOpen]);
|
|
328
|
-
return /* @__PURE__ */ React.createElement(CopyToClipboardTooltip, {
|
|
329
|
-
title: "Copied to clipboard",
|
|
330
|
-
placement: "left",
|
|
331
|
-
open,
|
|
332
|
-
onClose: handleClose,
|
|
333
|
-
leaveDelay: 1e3
|
|
334
|
-
}, /* @__PURE__ */ React.createElement("button", {
|
|
335
|
-
className: "md-clipboard md-icon",
|
|
336
|
-
onClick: handleClick
|
|
337
|
-
}, /* @__PURE__ */ React.createElement(CopyToClipboardIcon, null)));
|
|
338
|
-
};
|
|
339
|
-
const copyToClipboard = (theme) => {
|
|
340
|
-
return (dom) => {
|
|
341
|
-
var _a;
|
|
342
|
-
const codes = dom.querySelectorAll("pre > code");
|
|
343
|
-
for (const code of codes) {
|
|
344
|
-
const text = code.textContent || "";
|
|
345
|
-
const container = document.createElement("div");
|
|
346
|
-
(_a = code == null ? void 0 : code.parentElement) == null ? void 0 : _a.prepend(container);
|
|
347
|
-
ReactDOM.render(/* @__PURE__ */ React.createElement(ThemeProvider, {
|
|
348
|
-
theme
|
|
349
|
-
}, /* @__PURE__ */ React.createElement(CopyToClipboardButton, {
|
|
350
|
-
text
|
|
351
|
-
})), container);
|
|
352
|
-
}
|
|
353
|
-
return dom;
|
|
354
|
-
};
|
|
355
|
-
};
|
|
356
|
-
|
|
357
|
-
const removeMkdocsHeader = () => {
|
|
358
|
-
return (dom) => {
|
|
359
|
-
var _a;
|
|
360
|
-
(_a = dom.querySelector(".md-header")) == null ? void 0 : _a.remove();
|
|
361
|
-
return dom;
|
|
362
|
-
};
|
|
363
|
-
};
|
|
364
|
-
|
|
365
|
-
const simplifyMkdocsFooter = () => {
|
|
366
|
-
return (dom) => {
|
|
367
|
-
var _a, _b;
|
|
368
|
-
(_a = dom.querySelector(".md-footer .md-copyright")) == null ? void 0 : _a.remove();
|
|
369
|
-
(_b = dom.querySelector(".md-footer-copyright")) == null ? void 0 : _b.remove();
|
|
370
|
-
return dom;
|
|
371
|
-
};
|
|
372
|
-
};
|
|
373
|
-
|
|
374
|
-
const onCssReady = ({
|
|
375
|
-
docStorageUrl,
|
|
376
|
-
onLoading,
|
|
377
|
-
onLoaded
|
|
378
|
-
}) => {
|
|
379
|
-
return (dom) => {
|
|
380
|
-
const cssPages = Array.from(dom.querySelectorAll('head > link[rel="stylesheet"]')).filter((elem) => {
|
|
381
|
-
var _a;
|
|
382
|
-
return (_a = elem.getAttribute("href")) == null ? void 0 : _a.startsWith(docStorageUrl);
|
|
383
|
-
});
|
|
384
|
-
let count = cssPages.length;
|
|
385
|
-
if (count > 0) {
|
|
386
|
-
onLoading(dom);
|
|
387
|
-
}
|
|
388
|
-
cssPages.forEach((cssPage) => cssPage.addEventListener("load", () => {
|
|
389
|
-
count -= 1;
|
|
390
|
-
if (count === 0) {
|
|
391
|
-
onLoaded(dom);
|
|
392
|
-
}
|
|
393
|
-
}));
|
|
394
|
-
return dom;
|
|
395
|
-
};
|
|
396
|
-
};
|
|
397
|
-
|
|
398
|
-
const TECHDOCS_CSS = /main\.[A-Fa-f0-9]{8}\.min\.css$/;
|
|
399
|
-
const GOOGLE_FONTS = /^https:\/\/fonts\.googleapis\.com/;
|
|
400
|
-
const GSTATIC_FONTS = /^https:\/\/fonts\.gstatic\.com/;
|
|
401
|
-
const safeLinksHook = (node) => {
|
|
402
|
-
if (node.nodeName && node.nodeName === "LINK") {
|
|
403
|
-
const href = node.getAttribute("href") || "";
|
|
404
|
-
if (href.match(TECHDOCS_CSS)) {
|
|
405
|
-
node.setAttribute("rel", "stylesheet");
|
|
406
|
-
}
|
|
407
|
-
if (href.match(GOOGLE_FONTS)) {
|
|
408
|
-
node.setAttribute("rel", "stylesheet");
|
|
409
|
-
}
|
|
410
|
-
if (href.match(GSTATIC_FONTS)) {
|
|
411
|
-
node.setAttribute("rel", "preconnect");
|
|
412
|
-
}
|
|
413
|
-
}
|
|
414
|
-
return node;
|
|
415
|
-
};
|
|
416
|
-
const filterIframeHook = (allowedIframeHosts) => (node) => {
|
|
417
|
-
if (node.nodeName === "IFRAME") {
|
|
418
|
-
const src = node.getAttribute("src");
|
|
419
|
-
if (!src) {
|
|
420
|
-
node.remove();
|
|
421
|
-
return node;
|
|
422
|
-
}
|
|
423
|
-
try {
|
|
424
|
-
const srcUrl = new URL(src);
|
|
425
|
-
const isMatch = allowedIframeHosts.some((host) => srcUrl.host === host);
|
|
426
|
-
if (!isMatch) {
|
|
427
|
-
node.remove();
|
|
428
|
-
}
|
|
429
|
-
} catch (error) {
|
|
430
|
-
console.warn(`Invalid iframe src, ${error}`);
|
|
431
|
-
node.remove();
|
|
432
|
-
}
|
|
433
|
-
}
|
|
434
|
-
return node;
|
|
435
|
-
};
|
|
436
|
-
const sanitizeDOM = (config) => {
|
|
437
|
-
const allowedIframeHosts = (config == null ? void 0 : config.getOptionalStringArray("allowedIframeHosts")) || [];
|
|
438
|
-
return (dom) => {
|
|
439
|
-
DOMPurify.addHook("afterSanitizeAttributes", safeLinksHook);
|
|
440
|
-
const addTags = ["link"];
|
|
441
|
-
if (allowedIframeHosts.length > 0) {
|
|
442
|
-
DOMPurify.addHook("beforeSanitizeElements", filterIframeHook(allowedIframeHosts));
|
|
443
|
-
addTags.push("iframe");
|
|
444
|
-
}
|
|
445
|
-
return DOMPurify.sanitize(dom.innerHTML, {
|
|
446
|
-
ADD_TAGS: addTags,
|
|
447
|
-
FORBID_TAGS: ["style"],
|
|
448
|
-
WHOLE_DOCUMENT: true,
|
|
449
|
-
RETURN_DOM: true
|
|
450
|
-
});
|
|
451
|
-
};
|
|
452
|
-
};
|
|
453
|
-
|
|
454
|
-
const injectCss = ({ css }) => {
|
|
455
|
-
return (dom) => {
|
|
456
|
-
dom.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", `<style>${css}</style>`);
|
|
457
|
-
return dom;
|
|
458
|
-
};
|
|
459
|
-
};
|
|
460
|
-
|
|
461
|
-
const scrollIntoAnchor = () => {
|
|
462
|
-
return (dom) => {
|
|
463
|
-
setTimeout(() => {
|
|
464
|
-
var _a;
|
|
465
|
-
if (window.location.hash) {
|
|
466
|
-
const hash = window.location.hash.slice(1);
|
|
467
|
-
(_a = dom == null ? void 0 : dom.querySelector(`#${hash}`)) == null ? void 0 : _a.scrollIntoView();
|
|
468
|
-
}
|
|
469
|
-
}, 200);
|
|
470
|
-
return dom;
|
|
471
|
-
};
|
|
472
|
-
};
|
|
473
|
-
|
|
474
|
-
const transform = async (html, transformers) => {
|
|
475
|
-
let dom;
|
|
476
|
-
if (typeof html === "string") {
|
|
477
|
-
dom = new DOMParser().parseFromString(html, "text/html").documentElement;
|
|
478
|
-
} else if (html instanceof Element) {
|
|
479
|
-
dom = html;
|
|
480
|
-
} else {
|
|
481
|
-
throw new Error("dom is not a recognized type");
|
|
482
|
-
}
|
|
483
|
-
for (const transformer of transformers) {
|
|
484
|
-
dom = await transformer(dom);
|
|
485
|
-
}
|
|
486
|
-
return dom;
|
|
487
|
-
};
|
|
488
|
-
|
|
489
|
-
const useStyles$3 = makeStyles({
|
|
490
|
-
flexContainer: {
|
|
491
|
-
flexWrap: "wrap"
|
|
492
|
-
},
|
|
493
|
-
itemText: {
|
|
494
|
-
width: "100%",
|
|
495
|
-
marginBottom: "1rem"
|
|
496
|
-
}
|
|
497
|
-
});
|
|
498
|
-
const TechDocsSearchResultListItem = (props) => {
|
|
499
|
-
const {
|
|
500
|
-
result,
|
|
501
|
-
lineClamp = 5,
|
|
502
|
-
asListItem = true,
|
|
503
|
-
asLink = true,
|
|
504
|
-
title
|
|
505
|
-
} = props;
|
|
506
|
-
const classes = useStyles$3();
|
|
507
|
-
const TextItem = () => {
|
|
508
|
-
var _a;
|
|
509
|
-
return /* @__PURE__ */ React.createElement(ListItemText, {
|
|
510
|
-
className: classes.itemText,
|
|
511
|
-
primaryTypographyProps: { variant: "h6" },
|
|
512
|
-
primary: title ? title : `${result.title} | ${(_a = result.entityTitle) != null ? _a : result.name} docs`,
|
|
513
|
-
secondary: /* @__PURE__ */ React.createElement(TextTruncate, {
|
|
514
|
-
line: lineClamp,
|
|
515
|
-
truncateText: "\u2026",
|
|
516
|
-
text: result.text,
|
|
517
|
-
element: "span"
|
|
518
|
-
})
|
|
519
|
-
});
|
|
520
|
-
};
|
|
521
|
-
const LinkWrapper = ({ children }) => asLink ? /* @__PURE__ */ React.createElement(Link, {
|
|
522
|
-
to: result.location
|
|
523
|
-
}, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
|
|
524
|
-
const ListItemWrapper = ({ children }) => asListItem ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ListItem, {
|
|
525
|
-
alignItems: "flex-start",
|
|
526
|
-
className: classes.flexContainer
|
|
527
|
-
}, children), /* @__PURE__ */ React.createElement(Divider, {
|
|
528
|
-
component: "li"
|
|
529
|
-
})) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
|
|
530
|
-
return /* @__PURE__ */ React.createElement(LinkWrapper, null, /* @__PURE__ */ React.createElement(ListItemWrapper, null, /* @__PURE__ */ React.createElement(TextItem, null)));
|
|
531
|
-
};
|
|
532
|
-
|
|
533
|
-
const useStyles$2 = makeStyles({
|
|
534
|
-
root: {
|
|
535
|
-
width: "100%"
|
|
536
|
-
}
|
|
537
|
-
});
|
|
538
|
-
const TechDocsSearchBar = (props) => {
|
|
539
|
-
const { entityId, debounceTime = 150 } = props;
|
|
540
|
-
const [open, setOpen] = useState(false);
|
|
541
|
-
const navigate = useNavigate();
|
|
542
|
-
const {
|
|
543
|
-
term,
|
|
544
|
-
setTerm,
|
|
545
|
-
setFilters,
|
|
546
|
-
result: { loading, value: searchVal }
|
|
547
|
-
} = useSearch();
|
|
548
|
-
const classes = useStyles$2();
|
|
549
|
-
const [options, setOptions] = useState([]);
|
|
550
|
-
useEffect(() => {
|
|
551
|
-
let mounted = true;
|
|
552
|
-
if (mounted && searchVal) {
|
|
553
|
-
const searchResults = searchVal.results.slice(0, 10);
|
|
554
|
-
setOptions(searchResults);
|
|
555
|
-
}
|
|
556
|
-
return () => {
|
|
557
|
-
mounted = false;
|
|
558
|
-
};
|
|
559
|
-
}, [loading, searchVal]);
|
|
560
|
-
const [value, setValue] = useState(term);
|
|
561
|
-
useDebounce(() => setTerm(value), debounceTime, [value]);
|
|
562
|
-
const { kind, name, namespace } = entityId;
|
|
563
|
-
useEffect(() => {
|
|
564
|
-
setFilters((prevFilters) => {
|
|
565
|
-
return {
|
|
566
|
-
...prevFilters,
|
|
567
|
-
kind,
|
|
568
|
-
namespace,
|
|
569
|
-
name
|
|
570
|
-
};
|
|
571
|
-
});
|
|
572
|
-
}, [kind, namespace, name, setFilters]);
|
|
573
|
-
const handleQuery = (e) => {
|
|
574
|
-
if (!open) {
|
|
575
|
-
setOpen(true);
|
|
576
|
-
}
|
|
577
|
-
setValue(e.target.value);
|
|
578
|
-
};
|
|
579
|
-
const handleSelection = (_, selection) => {
|
|
580
|
-
if (selection == null ? void 0 : selection.document) {
|
|
581
|
-
const { location } = selection.document;
|
|
582
|
-
navigate(location);
|
|
583
|
-
}
|
|
584
|
-
};
|
|
585
|
-
return /* @__PURE__ */ React.createElement(Autocomplete, {
|
|
586
|
-
classes: { root: classes.root },
|
|
587
|
-
"data-testid": "techdocs-search-bar",
|
|
588
|
-
size: "small",
|
|
589
|
-
open,
|
|
590
|
-
getOptionLabel: () => "",
|
|
591
|
-
filterOptions: (x) => {
|
|
592
|
-
return x;
|
|
593
|
-
},
|
|
594
|
-
onClose: () => {
|
|
595
|
-
setOpen(false);
|
|
596
|
-
},
|
|
597
|
-
onFocus: () => {
|
|
598
|
-
setOpen(true);
|
|
599
|
-
},
|
|
600
|
-
onChange: handleSelection,
|
|
601
|
-
blurOnSelect: true,
|
|
602
|
-
noOptionsText: "No results found",
|
|
603
|
-
value: null,
|
|
604
|
-
options,
|
|
605
|
-
renderOption: ({ document }) => /* @__PURE__ */ React.createElement(TechDocsSearchResultListItem, {
|
|
606
|
-
result: document,
|
|
607
|
-
lineClamp: 3,
|
|
608
|
-
asListItem: false,
|
|
609
|
-
asLink: false,
|
|
610
|
-
title: document.title
|
|
611
|
-
}),
|
|
612
|
-
loading,
|
|
613
|
-
renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, {
|
|
614
|
-
...params,
|
|
615
|
-
"data-testid": "techdocs-search-bar-input",
|
|
616
|
-
variant: "outlined",
|
|
617
|
-
fullWidth: true,
|
|
618
|
-
placeholder: `Search ${entityId.name} docs`,
|
|
619
|
-
value,
|
|
620
|
-
onChange: handleQuery,
|
|
621
|
-
InputProps: {
|
|
622
|
-
...params.InputProps,
|
|
623
|
-
startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, {
|
|
624
|
-
position: "start"
|
|
625
|
-
}, /* @__PURE__ */ React.createElement(IconButton, {
|
|
626
|
-
"aria-label": "Query",
|
|
627
|
-
disabled: true
|
|
628
|
-
}, /* @__PURE__ */ React.createElement(SearchIcon, null))),
|
|
629
|
-
endAdornment: /* @__PURE__ */ React.createElement(React.Fragment, null, loading ? /* @__PURE__ */ React.createElement(CircularProgress, {
|
|
630
|
-
color: "inherit",
|
|
631
|
-
size: 20
|
|
632
|
-
}) : null, params.InputProps.endAdornment)
|
|
633
|
-
}
|
|
634
|
-
})
|
|
635
|
-
});
|
|
636
|
-
};
|
|
637
|
-
const TechDocsSearch = (props) => {
|
|
638
|
-
const initialState = {
|
|
639
|
-
term: "",
|
|
640
|
-
types: ["techdocs"],
|
|
641
|
-
pageCursor: "",
|
|
642
|
-
filters: props.entityId
|
|
643
|
-
};
|
|
644
|
-
return /* @__PURE__ */ React.createElement(SearchContextProvider, {
|
|
645
|
-
initialState
|
|
646
|
-
}, /* @__PURE__ */ React.createElement(TechDocsSearchBar, {
|
|
647
|
-
...props
|
|
648
|
-
}));
|
|
649
|
-
};
|
|
650
|
-
|
|
651
|
-
const useDrawerStyles = makeStyles((theme) => createStyles({
|
|
652
|
-
paper: {
|
|
653
|
-
width: "100%",
|
|
654
|
-
[theme.breakpoints.up("sm")]: {
|
|
655
|
-
width: "75%"
|
|
656
|
-
},
|
|
657
|
-
[theme.breakpoints.up("md")]: {
|
|
658
|
-
width: "50%"
|
|
659
|
-
},
|
|
660
|
-
padding: theme.spacing(2.5)
|
|
661
|
-
},
|
|
662
|
-
root: {
|
|
663
|
-
height: "100%",
|
|
664
|
-
overflow: "hidden"
|
|
665
|
-
},
|
|
666
|
-
logs: {
|
|
667
|
-
background: theme.palette.background.default
|
|
668
|
-
}
|
|
669
|
-
}));
|
|
670
|
-
const TechDocsBuildLogsDrawerContent = ({
|
|
671
|
-
buildLog,
|
|
672
|
-
onClose
|
|
673
|
-
}) => {
|
|
674
|
-
const classes = useDrawerStyles();
|
|
675
|
-
const logText = buildLog.length === 0 ? "Waiting for logs..." : buildLog.join("\n");
|
|
676
|
-
return /* @__PURE__ */ React.createElement(Grid, {
|
|
677
|
-
container: true,
|
|
678
|
-
direction: "column",
|
|
679
|
-
className: classes.root,
|
|
680
|
-
spacing: 0,
|
|
681
|
-
wrap: "nowrap"
|
|
682
|
-
}, /* @__PURE__ */ React.createElement(Grid, {
|
|
683
|
-
item: true,
|
|
684
|
-
container: true,
|
|
685
|
-
justifyContent: "space-between",
|
|
686
|
-
alignItems: "center",
|
|
687
|
-
spacing: 0,
|
|
688
|
-
wrap: "nowrap"
|
|
689
|
-
}, /* @__PURE__ */ React.createElement(Typography, {
|
|
690
|
-
variant: "h5"
|
|
691
|
-
}, "Build Details"), /* @__PURE__ */ React.createElement(IconButton, {
|
|
692
|
-
key: "dismiss",
|
|
693
|
-
title: "Close the drawer",
|
|
694
|
-
onClick: onClose,
|
|
695
|
-
color: "inherit"
|
|
696
|
-
}, /* @__PURE__ */ React.createElement(Close, null))), /* @__PURE__ */ React.createElement(LogViewer, {
|
|
697
|
-
text: logText,
|
|
698
|
-
classes: { root: classes.logs }
|
|
699
|
-
}));
|
|
700
|
-
};
|
|
701
|
-
const TechDocsBuildLogs = ({ buildLog }) => {
|
|
702
|
-
const classes = useDrawerStyles();
|
|
703
|
-
const [open, setOpen] = useState(false);
|
|
704
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button, {
|
|
705
|
-
color: "inherit",
|
|
706
|
-
onClick: () => setOpen(true)
|
|
707
|
-
}, "Show Build Logs"), /* @__PURE__ */ React.createElement(Drawer, {
|
|
708
|
-
classes: { paper: classes.paper },
|
|
709
|
-
anchor: "right",
|
|
710
|
-
open,
|
|
711
|
-
onClose: () => setOpen(false)
|
|
712
|
-
}, /* @__PURE__ */ React.createElement(TechDocsBuildLogsDrawerContent, {
|
|
713
|
-
buildLog,
|
|
714
|
-
onClose: () => setOpen(false)
|
|
715
|
-
})));
|
|
716
|
-
};
|
|
717
|
-
|
|
718
|
-
const TechDocsNotFound = ({ errorMessage }) => {
|
|
719
|
-
const techdocsBuilder = useApi(configApiRef).getOptionalString("techdocs.builder");
|
|
720
|
-
let additionalInfo = "";
|
|
721
|
-
if (techdocsBuilder !== "local") {
|
|
722
|
-
additionalInfo = "Note that techdocs.builder is not set to 'local' in your config, which means this Backstage app will not generate docs if they are not found. Make sure the project's docs are generated and published by some external process (e.g. CI/CD pipeline). Or change techdocs.builder to 'local' to generate docs from this Backstage instance.";
|
|
723
|
-
}
|
|
724
|
-
return /* @__PURE__ */ React.createElement(ErrorPage, {
|
|
725
|
-
status: "404",
|
|
726
|
-
statusMessage: errorMessage || "Documentation not found",
|
|
727
|
-
additionalInfo
|
|
728
|
-
});
|
|
729
|
-
};
|
|
730
|
-
|
|
731
|
-
const useStyles$1 = makeStyles((theme) => ({
|
|
732
|
-
root: {
|
|
733
|
-
marginBottom: theme.spacing(2)
|
|
734
|
-
},
|
|
735
|
-
message: {
|
|
736
|
-
wordBreak: "break-word",
|
|
737
|
-
overflowWrap: "anywhere"
|
|
738
|
-
}
|
|
739
|
-
}));
|
|
740
|
-
const TechDocsStateIndicator = () => {
|
|
741
|
-
let StateAlert = null;
|
|
742
|
-
const classes = useStyles$1();
|
|
743
|
-
const {
|
|
744
|
-
state,
|
|
745
|
-
contentReload,
|
|
746
|
-
contentErrorMessage,
|
|
747
|
-
syncErrorMessage,
|
|
748
|
-
buildLog
|
|
749
|
-
} = useTechDocsReader();
|
|
750
|
-
const ReaderProgress = state === "CHECKING" ? /* @__PURE__ */ React.createElement(Progress, null) : null;
|
|
751
|
-
if (state === "INITIAL_BUILD") {
|
|
752
|
-
StateAlert = /* @__PURE__ */ React.createElement(Alert, {
|
|
753
|
-
classes: { root: classes.root },
|
|
754
|
-
variant: "outlined",
|
|
755
|
-
severity: "info",
|
|
756
|
-
icon: /* @__PURE__ */ React.createElement(CircularProgress, {
|
|
757
|
-
size: "24px"
|
|
758
|
-
}),
|
|
759
|
-
action: /* @__PURE__ */ React.createElement(TechDocsBuildLogs, {
|
|
760
|
-
buildLog
|
|
761
|
-
})
|
|
762
|
-
}, "Documentation is accessed for the first time and is being prepared. The subsequent loads are much faster.");
|
|
763
|
-
}
|
|
764
|
-
if (state === "CONTENT_STALE_REFRESHING") {
|
|
765
|
-
StateAlert = /* @__PURE__ */ React.createElement(Alert, {
|
|
766
|
-
variant: "outlined",
|
|
767
|
-
severity: "info",
|
|
768
|
-
icon: /* @__PURE__ */ React.createElement(CircularProgress, {
|
|
769
|
-
size: "24px"
|
|
770
|
-
}),
|
|
771
|
-
action: /* @__PURE__ */ React.createElement(TechDocsBuildLogs, {
|
|
772
|
-
buildLog
|
|
773
|
-
}),
|
|
774
|
-
classes: { root: classes.root }
|
|
775
|
-
}, "A newer version of this documentation is being prepared and will be available shortly.");
|
|
776
|
-
}
|
|
777
|
-
if (state === "CONTENT_STALE_READY") {
|
|
778
|
-
StateAlert = /* @__PURE__ */ React.createElement(Alert, {
|
|
779
|
-
variant: "outlined",
|
|
780
|
-
severity: "success",
|
|
781
|
-
action: /* @__PURE__ */ React.createElement(Button, {
|
|
782
|
-
color: "inherit",
|
|
783
|
-
onClick: () => contentReload()
|
|
784
|
-
}, "Refresh"),
|
|
785
|
-
classes: { root: classes.root }
|
|
786
|
-
}, "A newer version of this documentation is now available, please refresh to view.");
|
|
787
|
-
}
|
|
788
|
-
if (state === "CONTENT_STALE_ERROR") {
|
|
789
|
-
StateAlert = /* @__PURE__ */ React.createElement(Alert, {
|
|
790
|
-
variant: "outlined",
|
|
791
|
-
severity: "error",
|
|
792
|
-
action: /* @__PURE__ */ React.createElement(TechDocsBuildLogs, {
|
|
793
|
-
buildLog
|
|
794
|
-
}),
|
|
795
|
-
classes: { root: classes.root, message: classes.message }
|
|
796
|
-
}, "Building a newer version of this documentation failed.", " ", syncErrorMessage);
|
|
797
|
-
}
|
|
798
|
-
if (state === "CONTENT_NOT_FOUND") {
|
|
799
|
-
StateAlert = /* @__PURE__ */ React.createElement(React.Fragment, null, syncErrorMessage && /* @__PURE__ */ React.createElement(Alert, {
|
|
800
|
-
variant: "outlined",
|
|
801
|
-
severity: "error",
|
|
802
|
-
action: /* @__PURE__ */ React.createElement(TechDocsBuildLogs, {
|
|
803
|
-
buildLog
|
|
804
|
-
}),
|
|
805
|
-
classes: { root: classes.root, message: classes.message }
|
|
806
|
-
}, "Building a newer version of this documentation failed.", " ", syncErrorMessage), /* @__PURE__ */ React.createElement(TechDocsNotFound, {
|
|
807
|
-
errorMessage: contentErrorMessage
|
|
808
|
-
}));
|
|
809
|
-
}
|
|
810
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, ReaderProgress, StateAlert);
|
|
811
|
-
};
|
|
812
|
-
|
|
813
|
-
function calculateDisplayState({
|
|
814
|
-
contentLoading,
|
|
815
|
-
content,
|
|
816
|
-
activeSyncState
|
|
817
|
-
}) {
|
|
818
|
-
if (contentLoading) {
|
|
819
|
-
return "CHECKING";
|
|
820
|
-
}
|
|
821
|
-
if (activeSyncState === "BUILD_READY_RELOAD") {
|
|
822
|
-
return "CHECKING";
|
|
823
|
-
}
|
|
824
|
-
if (!content && activeSyncState === "CHECKING") {
|
|
825
|
-
return "CHECKING";
|
|
826
|
-
}
|
|
827
|
-
if (!content && activeSyncState === "BUILDING") {
|
|
828
|
-
return "INITIAL_BUILD";
|
|
829
|
-
}
|
|
830
|
-
if (!content) {
|
|
831
|
-
return "CONTENT_NOT_FOUND";
|
|
832
|
-
}
|
|
833
|
-
if (activeSyncState === "BUILDING") {
|
|
834
|
-
return "CONTENT_STALE_REFRESHING";
|
|
835
|
-
}
|
|
836
|
-
if (activeSyncState === "BUILD_READY") {
|
|
837
|
-
return "CONTENT_STALE_READY";
|
|
838
|
-
}
|
|
839
|
-
if (activeSyncState === "ERROR") {
|
|
840
|
-
return "CONTENT_STALE_ERROR";
|
|
841
|
-
}
|
|
842
|
-
return "CONTENT_FRESH";
|
|
843
|
-
}
|
|
844
|
-
function reducer(oldState, action) {
|
|
845
|
-
const newState = { ...oldState };
|
|
846
|
-
switch (action.type) {
|
|
847
|
-
case "sync":
|
|
848
|
-
if (action.state === "CHECKING") {
|
|
849
|
-
newState.buildLog = [];
|
|
850
|
-
}
|
|
851
|
-
newState.activeSyncState = action.state;
|
|
852
|
-
newState.syncError = action.syncError;
|
|
853
|
-
break;
|
|
854
|
-
case "contentLoading":
|
|
855
|
-
newState.contentLoading = true;
|
|
856
|
-
newState.contentError = void 0;
|
|
857
|
-
break;
|
|
858
|
-
case "content":
|
|
859
|
-
if (typeof action.path === "string") {
|
|
860
|
-
newState.path = action.path;
|
|
861
|
-
}
|
|
862
|
-
newState.contentLoading = false;
|
|
863
|
-
newState.content = action.content;
|
|
864
|
-
newState.contentError = action.contentError;
|
|
865
|
-
break;
|
|
866
|
-
case "buildLog":
|
|
867
|
-
newState.buildLog = newState.buildLog.concat(action.log);
|
|
868
|
-
break;
|
|
869
|
-
default:
|
|
870
|
-
throw new Error();
|
|
871
|
-
}
|
|
872
|
-
if (["BUILD_READY", "BUILD_READY_RELOAD"].includes(newState.activeSyncState) && ["contentLoading", "content"].includes(action.type)) {
|
|
873
|
-
newState.activeSyncState = "UP_TO_DATE";
|
|
874
|
-
newState.buildLog = [];
|
|
875
|
-
}
|
|
876
|
-
return newState;
|
|
877
|
-
}
|
|
878
|
-
function useReaderState(kind, namespace, name, path) {
|
|
879
|
-
var _a, _b;
|
|
880
|
-
const [state, dispatch] = useReducer(reducer, {
|
|
881
|
-
activeSyncState: "CHECKING",
|
|
882
|
-
path,
|
|
883
|
-
contentLoading: true,
|
|
884
|
-
buildLog: []
|
|
885
|
-
});
|
|
886
|
-
const techdocsStorageApi = useApi(techdocsStorageApiRef);
|
|
887
|
-
const { retry: contentReload } = useAsyncRetry(async () => {
|
|
888
|
-
dispatch({ type: "contentLoading" });
|
|
889
|
-
try {
|
|
890
|
-
const entityDocs = await techdocsStorageApi.getEntityDocs({ kind, namespace, name }, path);
|
|
891
|
-
dispatch({ type: "content", content: entityDocs, path });
|
|
892
|
-
return entityDocs;
|
|
893
|
-
} catch (e) {
|
|
894
|
-
dispatch({ type: "content", contentError: e, path });
|
|
895
|
-
}
|
|
896
|
-
return void 0;
|
|
897
|
-
}, [techdocsStorageApi, kind, namespace, name, path]);
|
|
898
|
-
const contentRef = useRef({
|
|
899
|
-
content: void 0,
|
|
900
|
-
reload: () => {
|
|
901
|
-
}
|
|
902
|
-
});
|
|
903
|
-
contentRef.current = { content: state.content, reload: contentReload };
|
|
904
|
-
useAsync(async () => {
|
|
905
|
-
dispatch({ type: "sync", state: "CHECKING" });
|
|
906
|
-
const buildingTimeout = setTimeout(() => {
|
|
907
|
-
dispatch({ type: "sync", state: "BUILDING" });
|
|
908
|
-
}, 1e3);
|
|
909
|
-
try {
|
|
910
|
-
const result = await techdocsStorageApi.syncEntityDocs({
|
|
911
|
-
kind,
|
|
912
|
-
namespace,
|
|
913
|
-
name
|
|
914
|
-
}, (log) => {
|
|
915
|
-
dispatch({ type: "buildLog", log });
|
|
916
|
-
});
|
|
917
|
-
switch (result) {
|
|
918
|
-
case "updated":
|
|
919
|
-
if (!contentRef.current.content) {
|
|
920
|
-
contentRef.current.reload();
|
|
921
|
-
dispatch({ type: "sync", state: "BUILD_READY_RELOAD" });
|
|
922
|
-
} else {
|
|
923
|
-
dispatch({ type: "sync", state: "BUILD_READY" });
|
|
924
|
-
}
|
|
925
|
-
break;
|
|
926
|
-
case "cached":
|
|
927
|
-
dispatch({ type: "sync", state: "UP_TO_DATE" });
|
|
928
|
-
break;
|
|
929
|
-
default:
|
|
930
|
-
dispatch({
|
|
931
|
-
type: "sync",
|
|
932
|
-
state: "ERROR",
|
|
933
|
-
syncError: new Error("Unexpected return state")
|
|
934
|
-
});
|
|
935
|
-
break;
|
|
936
|
-
}
|
|
937
|
-
} catch (e) {
|
|
938
|
-
dispatch({ type: "sync", state: "ERROR", syncError: e });
|
|
939
|
-
} finally {
|
|
940
|
-
clearTimeout(buildingTimeout);
|
|
941
|
-
}
|
|
942
|
-
}, [kind, name, namespace, techdocsStorageApi, dispatch, contentRef]);
|
|
943
|
-
const displayState = useMemo(() => calculateDisplayState({
|
|
944
|
-
activeSyncState: state.activeSyncState,
|
|
945
|
-
contentLoading: state.contentLoading,
|
|
946
|
-
content: state.content
|
|
947
|
-
}), [state.activeSyncState, state.content, state.contentLoading]);
|
|
948
|
-
return {
|
|
949
|
-
state: displayState,
|
|
950
|
-
contentReload,
|
|
951
|
-
path: state.path,
|
|
952
|
-
content: state.content,
|
|
953
|
-
contentErrorMessage: (_a = state.contentError) == null ? void 0 : _a.toString(),
|
|
954
|
-
syncErrorMessage: (_b = state.syncError) == null ? void 0 : _b.toString(),
|
|
955
|
-
buildLog: state.buildLog
|
|
956
|
-
};
|
|
957
|
-
}
|
|
958
|
-
|
|
959
|
-
const useStyles = makeStyles((theme) => ({
|
|
960
|
-
searchBar: {
|
|
961
|
-
maxWidth: "calc(100% - 16rem * 2 - 2.4rem)",
|
|
962
|
-
marginTop: 0,
|
|
963
|
-
marginBottom: theme.spacing(1),
|
|
964
|
-
marginLeft: "calc(16rem + 1.2rem)",
|
|
965
|
-
"@media screen and (max-width: 76.1875em)": {
|
|
966
|
-
marginLeft: "0",
|
|
967
|
-
maxWidth: "100%"
|
|
968
|
-
}
|
|
969
|
-
}
|
|
970
|
-
}));
|
|
971
|
-
const TechDocsReaderContext = createContext({});
|
|
972
|
-
const TechDocsReaderProvider = ({
|
|
973
|
-
children,
|
|
974
|
-
entityRef
|
|
975
|
-
}) => {
|
|
976
|
-
const { "*": path } = useParams();
|
|
977
|
-
const { kind, namespace, name } = entityRef;
|
|
978
|
-
const value = useReaderState(kind, namespace, name, path);
|
|
979
|
-
return /* @__PURE__ */ React.createElement(TechDocsReaderContext.Provider, {
|
|
980
|
-
value
|
|
981
|
-
}, children);
|
|
982
|
-
};
|
|
983
|
-
const withTechDocsReaderProvider = (Component, entityRef) => (props) => /* @__PURE__ */ React.createElement(TechDocsReaderProvider, {
|
|
984
|
-
entityRef
|
|
985
|
-
}, /* @__PURE__ */ React.createElement(Component, {
|
|
986
|
-
...props
|
|
987
|
-
}));
|
|
988
|
-
const useTechDocsReader = () => useContext(TechDocsReaderContext);
|
|
989
|
-
const headings = ["h1", "h2", "h3", "h4", "h5", "h6"];
|
|
990
|
-
const useTechDocsReaderDom = (entityRef) => {
|
|
991
|
-
const navigate = useNavigate$1();
|
|
992
|
-
const theme = useTheme();
|
|
993
|
-
const techdocsStorageApi = useApi(techdocsStorageApiRef);
|
|
994
|
-
const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
|
|
995
|
-
const techdocsSanitizer = useApi(configApiRef);
|
|
996
|
-
const { namespace = "", kind = "", name = "" } = entityRef;
|
|
997
|
-
const { state, path, content: rawPage } = useTechDocsReader();
|
|
998
|
-
const isDarkTheme = theme.palette.type === "dark";
|
|
999
|
-
const [sidebars, setSidebars] = useState();
|
|
1000
|
-
const [dom, setDom] = useState(null);
|
|
1001
|
-
const { isPinned } = useContext(SidebarPinStateContext);
|
|
1002
|
-
const updateSidebarPosition = useCallback(() => {
|
|
1003
|
-
if (!dom || !sidebars)
|
|
1004
|
-
return;
|
|
1005
|
-
const mdTabs = dom.querySelector(".md-container > .md-tabs");
|
|
1006
|
-
const sidebarsCollapsed = window.matchMedia("screen and (max-width: 76.1875em)").matches;
|
|
1007
|
-
const newTop = Math.max(dom.getBoundingClientRect().top, 0);
|
|
1008
|
-
sidebars.forEach((sidebar) => {
|
|
1009
|
-
if (sidebarsCollapsed) {
|
|
1010
|
-
sidebar.style.top = "0px";
|
|
1011
|
-
} else if (mdTabs) {
|
|
1012
|
-
sidebar.style.top = `${newTop + mdTabs.getBoundingClientRect().height}px`;
|
|
1013
|
-
} else {
|
|
1014
|
-
sidebar.style.top = `${newTop}px`;
|
|
1015
|
-
}
|
|
1016
|
-
});
|
|
1017
|
-
}, [dom, sidebars]);
|
|
1018
|
-
useEffect(() => {
|
|
1019
|
-
updateSidebarPosition();
|
|
1020
|
-
window.addEventListener("scroll", updateSidebarPosition, true);
|
|
1021
|
-
window.addEventListener("resize", updateSidebarPosition);
|
|
1022
|
-
return () => {
|
|
1023
|
-
window.removeEventListener("scroll", updateSidebarPosition, true);
|
|
1024
|
-
window.removeEventListener("resize", updateSidebarPosition);
|
|
1025
|
-
};
|
|
1026
|
-
}, [updateSidebarPosition, state]);
|
|
1027
|
-
const updateFooterWidth = useCallback(() => {
|
|
1028
|
-
if (!dom)
|
|
1029
|
-
return;
|
|
1030
|
-
const footer = dom.querySelector(".md-footer");
|
|
1031
|
-
if (footer) {
|
|
1032
|
-
footer.style.width = `${dom.getBoundingClientRect().width}px`;
|
|
1033
|
-
}
|
|
1034
|
-
}, [dom]);
|
|
1035
|
-
useEffect(() => {
|
|
1036
|
-
updateFooterWidth();
|
|
1037
|
-
window.addEventListener("resize", updateFooterWidth);
|
|
1038
|
-
return () => {
|
|
1039
|
-
window.removeEventListener("resize", updateFooterWidth);
|
|
1040
|
-
};
|
|
1041
|
-
});
|
|
1042
|
-
const preRender = useCallback((rawContent, contentPath) => transform(rawContent, [
|
|
1043
|
-
sanitizeDOM(techdocsSanitizer.getOptionalConfig("techdocs.sanitizer")),
|
|
1044
|
-
addBaseUrl({
|
|
1045
|
-
techdocsStorageApi,
|
|
1046
|
-
entityId: {
|
|
1047
|
-
kind,
|
|
1048
|
-
name,
|
|
1049
|
-
namespace
|
|
1050
|
-
},
|
|
1051
|
-
path: contentPath
|
|
1052
|
-
}),
|
|
1053
|
-
rewriteDocLinks(),
|
|
1054
|
-
addSidebarToggle(),
|
|
1055
|
-
removeMkdocsHeader(),
|
|
1056
|
-
simplifyMkdocsFooter(),
|
|
1057
|
-
addGitFeedbackLink(scmIntegrationsApi),
|
|
1058
|
-
injectCss({
|
|
1059
|
-
css: `
|
|
1060
|
-
/*
|
|
1061
|
-
As the MkDocs output is rendered in shadow DOM, the CSS variable definitions on the root selector are not applied. Instead, they have to be applied on :host.
|
|
1062
|
-
As there is no way to transform the served main*.css yet (for example in the backend), we have to copy from main*.css and modify them.
|
|
1063
|
-
*/
|
|
1064
|
-
:host {
|
|
1065
|
-
/* FONT */
|
|
1066
|
-
--md-default-fg-color: ${theme.palette.text.primary};
|
|
1067
|
-
--md-default-fg-color--light: ${theme.palette.text.secondary};
|
|
1068
|
-
--md-default-fg-color--lighter: ${lighten(theme.palette.text.secondary, 0.7)};
|
|
1069
|
-
--md-default-fg-color--lightest: ${lighten(theme.palette.text.secondary, 0.3)};
|
|
1070
|
-
|
|
1071
|
-
/* BACKGROUND */
|
|
1072
|
-
--md-default-bg-color:${theme.palette.background.default};
|
|
1073
|
-
--md-default-bg-color--light: ${theme.palette.background.paper};
|
|
1074
|
-
--md-default-bg-color--lighter: ${lighten(theme.palette.background.paper, 0.7)};
|
|
1075
|
-
--md-default-bg-color--lightest: ${lighten(theme.palette.background.paper, 0.3)};
|
|
1076
|
-
|
|
1077
|
-
/* PRIMARY */
|
|
1078
|
-
--md-primary-fg-color: ${theme.palette.primary.main};
|
|
1079
|
-
--md-primary-fg-color--light: ${theme.palette.primary.light};
|
|
1080
|
-
--md-primary-fg-color--dark: ${theme.palette.primary.dark};
|
|
1081
|
-
--md-primary-bg-color: ${theme.palette.primary.contrastText};
|
|
1082
|
-
--md-primary-bg-color--light: ${lighten(theme.palette.primary.contrastText, 0.7)};
|
|
1083
|
-
|
|
1084
|
-
/* ACCENT */
|
|
1085
|
-
--md-accent-fg-color: var(--md-primary-fg-color);
|
|
1086
|
-
|
|
1087
|
-
/* SHADOW */
|
|
1088
|
-
--md-shadow-z1: ${theme.shadows[1]};
|
|
1089
|
-
--md-shadow-z2: ${theme.shadows[2]};
|
|
1090
|
-
--md-shadow-z3: ${theme.shadows[3]};
|
|
1091
|
-
|
|
1092
|
-
/* EXTENSIONS */
|
|
1093
|
-
--md-admonition-fg-color: var(--md-default-fg-color);
|
|
1094
|
-
--md-admonition-bg-color: var(--md-default-bg-color);
|
|
1095
|
-
/* Admonitions and others are using SVG masks to define icons. These masks are defined as CSS variables. */
|
|
1096
|
-
--md-admonition-icon--note: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>');
|
|
1097
|
-
--md-admonition-icon--abstract: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 5h16v2H4V5m0 4h16v2H4V9m0 4h16v2H4v-2m0 4h10v2H4v-2z"/></svg>');
|
|
1098
|
-
--md-admonition-icon--info: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10A10 10 0 0012 2z"/></svg>');
|
|
1099
|
-
--md-admonition-icon--tip: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.55 11.2c-.23-.3-.5-.56-.76-.82-.65-.6-1.4-1.03-2.03-1.66C13.3 7.26 13 4.85 13.91 3c-.91.23-1.75.75-2.45 1.32-2.54 2.08-3.54 5.75-2.34 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.22.1-.46.04-.64-.12a.83.83 0 01-.15-.17c-1.1-1.43-1.28-3.48-.53-5.12C5.89 10 5 12.3 5.14 14.47c.04.5.1 1 .27 1.5.14.6.4 1.2.72 1.73 1.04 1.73 2.87 2.97 4.84 3.22 2.1.27 4.35-.12 5.96-1.6 1.8-1.66 2.45-4.32 1.5-6.6l-.13-.26c-.2-.46-.47-.87-.8-1.25l.05-.01m-3.1 6.3c-.28.24-.73.5-1.08.6-1.1.4-2.2-.16-2.87-.82 1.19-.28 1.89-1.16 2.09-2.05.17-.8-.14-1.46-.27-2.23-.12-.74-.1-1.37.18-2.06.17.38.37.76.6 1.06.76 1 1.95 1.44 2.2 2.8.04.14.06.28.06.43.03.82-.32 1.72-.92 2.27h.01z"/></svg>');
|
|
1100
|
-
--md-admonition-icon--success: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
|
|
1101
|
-
--md-admonition-icon--question: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.07 11.25l-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 00-2-2 2 2 0 00-2 2H8a4 4 0 014-4 4 4 0 014 4 3.2 3.2 0 01-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10c0-5.53-4.5-10-10-10z"/></svg>');
|
|
1102
|
-
--md-admonition-icon--warning: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2 1 21z"/></svg>');
|
|
1103
|
-
--md-admonition-icon--failure: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c5.53 0 10 4.47 10 10s-4.47 10-10 10S2 17.53 2 12 6.47 2 12 2m3.59 5L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41 15.59 7z"/></svg>');
|
|
1104
|
-
--md-admonition-icon--danger: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.5 20l4.86-9.73H13V4l-5 9.73h3.5V20M12 2c2.75 0 5.1 1 7.05 2.95C21 6.9 22 9.25 22 12s-1 5.1-2.95 7.05C17.1 21 14.75 22 12 22s-5.1-1-7.05-2.95C3 17.1 2 14.75 2 12s1-5.1 2.95-7.05C6.9 3 9.25 2 12 2z"/></svg>');
|
|
1105
|
-
--md-admonition-icon--bug: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 00-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 00-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z"/></svg>');
|
|
1106
|
-
--md-admonition-icon--example: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 01.75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25z"/></svg>');
|
|
1107
|
-
--md-admonition-icon--quote: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4z"/></svg>');
|
|
1108
|
-
--md-footnotes-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.42L5.83 13H21V7h-2z"/></svg>');
|
|
1109
|
-
--md-details-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42z"/></svg>');
|
|
1110
|
-
--md-tasklist-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>');
|
|
1111
|
-
--md-tasklist-icon--checked: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
|
|
1112
|
-
--md-nav-icon--prev: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>');
|
|
1113
|
-
--md-nav-icon--next: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42z"/></svg>');
|
|
1114
|
-
--md-toc-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 9h14V7H3v2m0 4h14v-2H3v2m0 4h14v-2H3v2m16 0h2v-2h-2v2m0-10v2h2V7h-2m0 6h2v-2h-2v2z"/></svg>');
|
|
1115
|
-
--md-clipboard-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12V1z"/></svg>');
|
|
1116
|
-
--md-search-result-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h7c-.41-.25-.8-.56-1.14-.9-.33-.33-.61-.7-.86-1.1H6V4h7v5h5v1.18c.71.16 1.39.43 2 .82V8l-6-6m6.31 16.9c1.33-2.11.69-4.9-1.4-6.22-2.11-1.33-4.91-.68-6.22 1.4-1.34 2.11-.69 4.89 1.4 6.22 1.46.93 3.32.93 4.79.02L22 23.39 23.39 22l-3.08-3.1m-3.81.1a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5z"/></svg>');
|
|
1117
|
-
--md-source-forks-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm0 2.122a2.25 2.25 0 1 0-1.5 0v.878A2.25 2.25 0 0 0 5.75 8.5h1.5v2.128a2.251 2.251 0 1 0 1.5 0V8.5h1.5a2.25 2.25 0 0 0 2.25-2.25v-.878a2.25 2.25 0 1 0-1.5 0v.878a.75.75 0 0 1-.75.75h-4.5A.75.75 0 0 1 5 6.25v-.878zm3.75 7.378a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm3-8.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/></svg>');
|
|
1118
|
-
--md-source-repositories-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 1 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 0 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 0 1 1-1h8zM5 12.25v3.25a.25.25 0 0 0 .4.2l1.45-1.087a.25.25 0 0 1 .3 0L8.6 15.7a.25.25 0 0 0 .4-.2v-3.25a.25.25 0 0 0-.25-.25h-3.5a.25.25 0 0 0-.25.25z"/></svg>');
|
|
1119
|
-
--md-source-stars-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694v.001z"/></svg>');
|
|
1120
|
-
--md-source-version-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 0 1 .25-.25h5.025a.25.25 0 0 1 .177.073l6.25 6.25a.25.25 0 0 1 0 .354l-5.025 5.025a.25.25 0 0 1-.354 0l-6.25-6.25a.25.25 0 0 1-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.75 1.75 0 0 1 1 7.775zM6 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/></svg>');
|
|
1121
|
-
--md-version-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="m310.6 246.6-127.1 128c-7.1 6.3-15.3 9.4-23.5 9.4s-16.38-3.125-22.63-9.375l-127.1-128C.224 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75s3.12 25.75-6.08 34.85z"/></svg>');
|
|
1122
|
-
}
|
|
1123
|
-
|
|
1124
|
-
:host > * {
|
|
1125
|
-
/* CODE */
|
|
1126
|
-
--md-code-fg-color: ${theme.palette.text.primary};
|
|
1127
|
-
--md-code-bg-color: ${theme.palette.background.paper};
|
|
1128
|
-
--md-code-hl-color: ${alpha(theme.palette.warning.main, 0.5)};
|
|
1129
|
-
--md-code-hl-keyword-color: ${isDarkTheme ? theme.palette.primary.light : theme.palette.primary.dark};
|
|
1130
|
-
--md-code-hl-function-color: ${isDarkTheme ? theme.palette.secondary.light : theme.palette.secondary.dark};
|
|
1131
|
-
--md-code-hl-string-color: ${isDarkTheme ? theme.palette.success.light : theme.palette.success.dark};
|
|
1132
|
-
--md-code-hl-number-color: ${isDarkTheme ? theme.palette.error.light : theme.palette.error.dark};
|
|
1133
|
-
--md-code-hl-constant-color: var(--md-code-hl-function-color);
|
|
1134
|
-
--md-code-hl-special-color: var(--md-code-hl-function-color);
|
|
1135
|
-
--md-code-hl-name-color: var(--md-code-fg-color);
|
|
1136
|
-
--md-code-hl-comment-color: var(--md-default-fg-color--light);
|
|
1137
|
-
--md-code-hl-generic-color: var(--md-default-fg-color--light);
|
|
1138
|
-
--md-code-hl-variable-color: var(--md-default-fg-color--light);
|
|
1139
|
-
--md-code-hl-operator-color: var(--md-default-fg-color--light);
|
|
1140
|
-
--md-code-hl-punctuation-color: var(--md-default-fg-color--light);
|
|
1141
|
-
|
|
1142
|
-
/* TYPESET */
|
|
1143
|
-
--md-typeset-font-size: 1rem;
|
|
1144
|
-
--md-typeset-color: var(--md-default-fg-color);
|
|
1145
|
-
--md-typeset-a-color: var(--md-accent-fg-color);
|
|
1146
|
-
--md-typeset-table-color: ${theme.palette.text.primary};
|
|
1147
|
-
--md-typeset-del-color: ${isDarkTheme ? alpha(theme.palette.error.dark, 0.5) : alpha(theme.palette.error.light, 0.5)};
|
|
1148
|
-
--md-typeset-ins-color: ${isDarkTheme ? alpha(theme.palette.success.dark, 0.5) : alpha(theme.palette.success.light, 0.5)};
|
|
1149
|
-
--md-typeset-mark-color: ${isDarkTheme ? alpha(theme.palette.warning.dark, 0.5) : alpha(theme.palette.warning.light, 0.5)};
|
|
1150
|
-
}
|
|
1151
|
-
|
|
1152
|
-
@media screen and (max-width: 76.1875em) {
|
|
1153
|
-
:host > * {
|
|
1154
|
-
/* TYPESET */
|
|
1155
|
-
--md-typeset-font-size: .9rem;
|
|
1156
|
-
}
|
|
1157
|
-
}
|
|
1158
|
-
|
|
1159
|
-
@media screen and (max-width: 600px) {
|
|
1160
|
-
:host > * {
|
|
1161
|
-
/* TYPESET */
|
|
1162
|
-
--md-typeset-font-size: .7rem;
|
|
1163
|
-
}
|
|
1164
|
-
}
|
|
1165
|
-
`
|
|
1166
|
-
}),
|
|
1167
|
-
injectCss({
|
|
1168
|
-
css: `
|
|
1169
|
-
body {
|
|
1170
|
-
--md-text-color: var(--md-default-fg-color);
|
|
1171
|
-
--md-text-link-color: var(--md-accent-fg-color);
|
|
1172
|
-
--md-text-font-family: ${theme.typography.fontFamily};
|
|
1173
|
-
font-family: var(--md-text-font-family);
|
|
1174
|
-
background-color: unset;
|
|
1175
|
-
}
|
|
1176
|
-
`
|
|
1177
|
-
}),
|
|
1178
|
-
injectCss({
|
|
1179
|
-
css: `
|
|
1180
|
-
.md-grid {
|
|
1181
|
-
max-width: 100%;
|
|
1182
|
-
margin: 0;
|
|
1183
|
-
}
|
|
1184
|
-
|
|
1185
|
-
.md-nav {
|
|
1186
|
-
font-size: calc(var(--md-typeset-font-size) * 0.9);
|
|
1187
|
-
}
|
|
1188
|
-
.md-nav__link {
|
|
1189
|
-
display: flex;
|
|
1190
|
-
align-items: center;
|
|
1191
|
-
justify-content: space-between;
|
|
1192
|
-
}
|
|
1193
|
-
.md-nav__icon {
|
|
1194
|
-
height: 20px !important;
|
|
1195
|
-
width: 20px !important;
|
|
1196
|
-
margin-left:${theme.spacing(1)}px;
|
|
1197
|
-
}
|
|
1198
|
-
.md-nav__icon svg {
|
|
1199
|
-
margin: 0;
|
|
1200
|
-
width: 20px !important;
|
|
1201
|
-
height: 20px !important;
|
|
1202
|
-
}
|
|
1203
|
-
.md-nav__icon:after {
|
|
1204
|
-
width: 20px !important;
|
|
1205
|
-
height: 20px !important;
|
|
1206
|
-
}
|
|
1207
|
-
|
|
1208
|
-
.md-main__inner {
|
|
1209
|
-
margin-top: 0;
|
|
1210
|
-
}
|
|
1211
|
-
|
|
1212
|
-
.md-sidebar {
|
|
1213
|
-
bottom: 75px;
|
|
1214
|
-
position: fixed;
|
|
1215
|
-
width: 16rem;
|
|
1216
|
-
overflow-y: auto;
|
|
1217
|
-
overflow-x: hidden;
|
|
1218
|
-
scrollbar-color: rgb(193, 193, 193) #eee;
|
|
1219
|
-
scrollbar-width: thin;
|
|
1220
|
-
}
|
|
1221
|
-
.md-sidebar .md-sidebar__scrollwrap {
|
|
1222
|
-
width: calc(16rem - 10px);
|
|
1223
|
-
}
|
|
1224
|
-
.md-sidebar--secondary {
|
|
1225
|
-
right: ${theme.spacing(3)}px;
|
|
1226
|
-
}
|
|
1227
|
-
.md-sidebar::-webkit-scrollbar {
|
|
1228
|
-
width: 5px;
|
|
1229
|
-
}
|
|
1230
|
-
.md-sidebar::-webkit-scrollbar-button {
|
|
1231
|
-
width: 5px;
|
|
1232
|
-
height: 5px;
|
|
1233
|
-
}
|
|
1234
|
-
.md-sidebar::-webkit-scrollbar-track {
|
|
1235
|
-
background: #eee;
|
|
1236
|
-
border: 1 px solid rgb(250, 250, 250);
|
|
1237
|
-
box-shadow: 0px 0px 3px #dfdfdf inset;
|
|
1238
|
-
border-radius: 3px;
|
|
1239
|
-
}
|
|
1240
|
-
.md-sidebar::-webkit-scrollbar-thumb {
|
|
1241
|
-
width: 5px;
|
|
1242
|
-
background: rgb(193, 193, 193);
|
|
1243
|
-
border: transparent;
|
|
1244
|
-
border-radius: 3px;
|
|
1245
|
-
}
|
|
1246
|
-
.md-sidebar::-webkit-scrollbar-thumb:hover {
|
|
1247
|
-
background: rgb(125, 125, 125);
|
|
1248
|
-
}
|
|
1249
|
-
|
|
1250
|
-
.md-content {
|
|
1251
|
-
max-width: calc(100% - 16rem * 2);
|
|
1252
|
-
margin-left: 16rem;
|
|
1253
|
-
margin-bottom: 50px;
|
|
1254
|
-
}
|
|
1255
|
-
|
|
1256
|
-
.md-footer {
|
|
1257
|
-
position: fixed;
|
|
1258
|
-
bottom: 0px;
|
|
1259
|
-
}
|
|
1260
|
-
.md-footer__title {
|
|
1261
|
-
background-color: unset;
|
|
1262
|
-
}
|
|
1263
|
-
.md-footer-nav__link {
|
|
1264
|
-
width: 16rem;
|
|
1265
|
-
}
|
|
1266
|
-
|
|
1267
|
-
.md-dialog {
|
|
1268
|
-
background-color: unset;
|
|
1269
|
-
}
|
|
1270
|
-
|
|
1271
|
-
@media screen and (min-width: 76.25em) {
|
|
1272
|
-
.md-sidebar {
|
|
1273
|
-
height: auto;
|
|
1274
|
-
}
|
|
1275
|
-
}
|
|
1276
|
-
|
|
1277
|
-
@media screen and (max-width: 76.1875em) {
|
|
1278
|
-
.md-nav {
|
|
1279
|
-
transition: none !important;
|
|
1280
|
-
background-color: var(--md-default-bg-color)
|
|
1281
|
-
}
|
|
1282
|
-
.md-nav--primary .md-nav__title {
|
|
1283
|
-
cursor: auto;
|
|
1284
|
-
color: var(--md-default-fg-color);
|
|
1285
|
-
font-weight: 700;
|
|
1286
|
-
white-space: normal;
|
|
1287
|
-
line-height: 1rem;
|
|
1288
|
-
height: auto;
|
|
1289
|
-
display: flex;
|
|
1290
|
-
flex-flow: column;
|
|
1291
|
-
row-gap: 1.6rem;
|
|
1292
|
-
padding: 1.2rem .8rem .8rem;
|
|
1293
|
-
background-color: var(--md-default-bg-color);
|
|
1294
|
-
}
|
|
1295
|
-
.md-nav--primary .md-nav__title~.md-nav__list {
|
|
1296
|
-
box-shadow: none;
|
|
1297
|
-
}
|
|
1298
|
-
.md-nav--primary .md-nav__title ~ .md-nav__list > :first-child {
|
|
1299
|
-
border-top: none;
|
|
1300
|
-
}
|
|
1301
|
-
.md-nav--primary .md-nav__title .md-nav__button {
|
|
1302
|
-
display: none;
|
|
1303
|
-
}
|
|
1304
|
-
.md-nav--primary .md-nav__title .md-nav__icon {
|
|
1305
|
-
color: var(--md-default-fg-color);
|
|
1306
|
-
position: static;
|
|
1307
|
-
height: auto;
|
|
1308
|
-
margin: 0 0 0 -0.2rem;
|
|
1309
|
-
}
|
|
1310
|
-
.md-nav--primary > .md-nav__title [for="none"] {
|
|
1311
|
-
padding-top: 0;
|
|
1312
|
-
}
|
|
1313
|
-
.md-nav--primary .md-nav__item {
|
|
1314
|
-
border-top: none;
|
|
1315
|
-
}
|
|
1316
|
-
.md-nav--primary :is(.md-nav__title,.md-nav__item) {
|
|
1317
|
-
font-size : var(--md-typeset-font-size);
|
|
1318
|
-
}
|
|
1319
|
-
.md-nav .md-source {
|
|
1320
|
-
display: none;
|
|
1321
|
-
}
|
|
1322
|
-
|
|
1323
|
-
.md-sidebar {
|
|
1324
|
-
height: 100%;
|
|
1325
|
-
}
|
|
1326
|
-
.md-sidebar--primary {
|
|
1327
|
-
width: 12.1rem !important;
|
|
1328
|
-
z-index: 200;
|
|
1329
|
-
left: ${isPinned ? "calc(-12.1rem + 242px)" : "calc(-12.1rem + 72px)"} !important;
|
|
1330
|
-
}
|
|
1331
|
-
.md-sidebar--secondary:not([hidden]) {
|
|
1332
|
-
display: none;
|
|
1333
|
-
}
|
|
1334
|
-
|
|
1335
|
-
.md-content {
|
|
1336
|
-
max-width: 100%;
|
|
1337
|
-
margin-left: 0;
|
|
1338
|
-
}
|
|
1339
|
-
|
|
1340
|
-
.md-header__button {
|
|
1341
|
-
margin: 0.4rem 0;
|
|
1342
|
-
margin-left: 0.4rem;
|
|
1343
|
-
padding: 0;
|
|
1344
|
-
}
|
|
1345
|
-
|
|
1346
|
-
.md-overlay {
|
|
1347
|
-
left: 0;
|
|
1348
|
-
}
|
|
1349
|
-
|
|
1350
|
-
.md-footer {
|
|
1351
|
-
position: static;
|
|
1352
|
-
padding-left: 0;
|
|
1353
|
-
}
|
|
1354
|
-
.md-footer-nav__link {
|
|
1355
|
-
/* footer links begin to overlap at small sizes without setting width */
|
|
1356
|
-
width: 50%;
|
|
1357
|
-
}
|
|
1358
|
-
}
|
|
1359
|
-
|
|
1360
|
-
@media screen and (max-width: 600px) {
|
|
1361
|
-
.md-sidebar--primary {
|
|
1362
|
-
left: -12.1rem !important;
|
|
1363
|
-
width: 12.1rem;
|
|
1364
|
-
}
|
|
1365
|
-
}
|
|
1366
|
-
`
|
|
1367
|
-
}),
|
|
1368
|
-
injectCss({
|
|
1369
|
-
css: `
|
|
1370
|
-
.md-typeset {
|
|
1371
|
-
font-size: var(--md-typeset-font-size);
|
|
1372
|
-
}
|
|
1373
|
-
|
|
1374
|
-
${headings.reduce((style, heading) => {
|
|
1375
|
-
const styles = theme.typography[heading];
|
|
1376
|
-
const { lineHeight, fontFamily, fontWeight, fontSize } = styles;
|
|
1377
|
-
const calculate = (value) => {
|
|
1378
|
-
let factor = 1;
|
|
1379
|
-
if (typeof value === "number") {
|
|
1380
|
-
factor = value / 16 * 0.6;
|
|
1381
|
-
}
|
|
1382
|
-
if (typeof value === "string") {
|
|
1383
|
-
factor = value.replace("rem", "");
|
|
1384
|
-
}
|
|
1385
|
-
return `calc(${factor} * var(--md-typeset-font-size))`;
|
|
1386
|
-
};
|
|
1387
|
-
return style.concat(`
|
|
1388
|
-
.md-typeset ${heading} {
|
|
1389
|
-
color: var(--md-default-fg-color);
|
|
1390
|
-
line-height: ${lineHeight};
|
|
1391
|
-
font-family: ${fontFamily};
|
|
1392
|
-
font-weight: ${fontWeight};
|
|
1393
|
-
font-size: ${calculate(fontSize)};
|
|
1394
|
-
}
|
|
1395
|
-
`);
|
|
1396
|
-
}, "")}
|
|
1397
|
-
|
|
1398
|
-
.md-typeset .md-content__button {
|
|
1399
|
-
color: var(--md-default-fg-color);
|
|
1400
|
-
}
|
|
1401
|
-
|
|
1402
|
-
.md-typeset hr {
|
|
1403
|
-
border-bottom: 0.05rem dotted ${theme.palette.divider};
|
|
1404
|
-
}
|
|
1405
|
-
|
|
1406
|
-
.md-typeset details {
|
|
1407
|
-
font-size: var(--md-typeset-font-size) !important;
|
|
1408
|
-
}
|
|
1409
|
-
.md-typeset details summary {
|
|
1410
|
-
padding-left: 2.5rem !important;
|
|
1411
|
-
}
|
|
1412
|
-
.md-typeset details summary:before,
|
|
1413
|
-
.md-typeset details summary:after {
|
|
1414
|
-
top: 50% !important;
|
|
1415
|
-
width: 20px !important;
|
|
1416
|
-
height: 20px !important;
|
|
1417
|
-
transform: rotate(0deg) translateY(-50%) !important;
|
|
1418
|
-
}
|
|
1419
|
-
.md-typeset details[open] > summary:after {
|
|
1420
|
-
transform: rotate(90deg) translateX(-50%) !important;
|
|
1421
|
-
}
|
|
1422
|
-
|
|
1423
|
-
.md-typeset blockquote {
|
|
1424
|
-
color: var(--md-default-fg-color--light);
|
|
1425
|
-
border-left: 0.2rem solid var(--md-default-fg-color--light);
|
|
1426
|
-
}
|
|
1427
|
-
|
|
1428
|
-
.md-typeset table:not([class]) {
|
|
1429
|
-
font-size: var(--md-typeset-font-size);
|
|
1430
|
-
border: 1px solid var(--md-default-fg-color);
|
|
1431
|
-
border-bottom: none;
|
|
1432
|
-
border-collapse: collapse;
|
|
1433
|
-
}
|
|
1434
|
-
.md-typeset table:not([class]) th {
|
|
1435
|
-
font-weight: bold;
|
|
1436
|
-
}
|
|
1437
|
-
.md-typeset table:not([class]) td, .md-typeset table:not([class]) th {
|
|
1438
|
-
border-bottom: 1px solid var(--md-default-fg-color);
|
|
1439
|
-
}
|
|
1440
|
-
|
|
1441
|
-
.md-typeset pre > code::-webkit-scrollbar-thumb {
|
|
1442
|
-
background-color: hsla(0, 0%, 0%, 0.32);
|
|
1443
|
-
}
|
|
1444
|
-
.md-typeset pre > code::-webkit-scrollbar-thumb:hover {
|
|
1445
|
-
background-color: hsla(0, 0%, 0%, 0.87);
|
|
1446
|
-
}
|
|
1447
|
-
`
|
|
1448
|
-
}),
|
|
1449
|
-
injectCss({
|
|
1450
|
-
css: `
|
|
1451
|
-
/*
|
|
1452
|
-
Disable CSS animations on link colors as they lead to issues in dark mode.
|
|
1453
|
-
The dark mode color theme is applied later and theirfore there is always an animation from light to dark mode when navigation between pages.
|
|
1454
|
-
*/
|
|
1455
|
-
.md-dialog, .md-nav__link, .md-footer__link, .md-typeset a, .md-typeset a::before, .md-typeset .headerlink {
|
|
1456
|
-
transition: none;
|
|
1457
|
-
}
|
|
1458
|
-
`
|
|
1459
|
-
}),
|
|
1460
|
-
injectCss({
|
|
1461
|
-
css: `
|
|
1462
|
-
/* HIGHLIGHT */
|
|
1463
|
-
.highlight .md-clipboard:after {
|
|
1464
|
-
content: unset;
|
|
1465
|
-
}
|
|
1466
|
-
|
|
1467
|
-
.highlight .nx {
|
|
1468
|
-
color: ${isDarkTheme ? "#ff53a3" : "#ec407a"};
|
|
1469
|
-
}
|
|
1470
|
-
|
|
1471
|
-
/* CODE HILITE */
|
|
1472
|
-
.codehilite .gd {
|
|
1473
|
-
background-color: ${isDarkTheme ? "rgba(248,81,73,0.65)" : "#fdd"};
|
|
1474
|
-
}
|
|
1475
|
-
|
|
1476
|
-
.codehilite .gi {
|
|
1477
|
-
background-color: ${isDarkTheme ? "rgba(46,160,67,0.65)" : "#dfd"};
|
|
1478
|
-
}
|
|
1479
|
-
|
|
1480
|
-
/* TABBED */
|
|
1481
|
-
.tabbed-set>input:nth-child(1):checked~.tabbed-labels>:nth-child(1),
|
|
1482
|
-
.tabbed-set>input:nth-child(2):checked~.tabbed-labels>:nth-child(2),
|
|
1483
|
-
.tabbed-set>input:nth-child(3):checked~.tabbed-labels>:nth-child(3),
|
|
1484
|
-
.tabbed-set>input:nth-child(4):checked~.tabbed-labels>:nth-child(4),
|
|
1485
|
-
.tabbed-set>input:nth-child(5):checked~.tabbed-labels>:nth-child(5),
|
|
1486
|
-
.tabbed-set>input:nth-child(6):checked~.tabbed-labels>:nth-child(6),
|
|
1487
|
-
.tabbed-set>input:nth-child(7):checked~.tabbed-labels>:nth-child(7),
|
|
1488
|
-
.tabbed-set>input:nth-child(8):checked~.tabbed-labels>:nth-child(8),
|
|
1489
|
-
.tabbed-set>input:nth-child(9):checked~.tabbed-labels>:nth-child(9),
|
|
1490
|
-
.tabbed-set>input:nth-child(10):checked~.tabbed-labels>:nth-child(10),
|
|
1491
|
-
.tabbed-set>input:nth-child(11):checked~.tabbed-labels>:nth-child(11),
|
|
1492
|
-
.tabbed-set>input:nth-child(12):checked~.tabbed-labels>:nth-child(12),
|
|
1493
|
-
.tabbed-set>input:nth-child(13):checked~.tabbed-labels>:nth-child(13),
|
|
1494
|
-
.tabbed-set>input:nth-child(14):checked~.tabbed-labels>:nth-child(14),
|
|
1495
|
-
.tabbed-set>input:nth-child(15):checked~.tabbed-labels>:nth-child(15),
|
|
1496
|
-
.tabbed-set>input:nth-child(16):checked~.tabbed-labels>:nth-child(16),
|
|
1497
|
-
.tabbed-set>input:nth-child(17):checked~.tabbed-labels>:nth-child(17),
|
|
1498
|
-
.tabbed-set>input:nth-child(18):checked~.tabbed-labels>:nth-child(18),
|
|
1499
|
-
.tabbed-set>input:nth-child(19):checked~.tabbed-labels>:nth-child(19),
|
|
1500
|
-
.tabbed-set>input:nth-child(20):checked~.tabbed-labels>:nth-child(20) {
|
|
1501
|
-
color: var(--md-accent-fg-color);
|
|
1502
|
-
border-color: var(--md-accent-fg-color);
|
|
1503
|
-
}
|
|
1504
|
-
|
|
1505
|
-
/* TASK-LIST */
|
|
1506
|
-
.task-list-control .task-list-indicator::before {
|
|
1507
|
-
background-color: ${theme.palette.action.disabledBackground};
|
|
1508
|
-
}
|
|
1509
|
-
.task-list-control [type="checkbox"]:checked + .task-list-indicator:before {
|
|
1510
|
-
background-color: ${theme.palette.success.main};
|
|
1511
|
-
}
|
|
1512
|
-
|
|
1513
|
-
/* ADMONITION */
|
|
1514
|
-
.admonition {
|
|
1515
|
-
font-size: var(--md-typeset-font-size) !important;
|
|
1516
|
-
}
|
|
1517
|
-
.admonition .admonition-title {
|
|
1518
|
-
padding-left: 2.5rem !important;
|
|
1519
|
-
}
|
|
1520
|
-
|
|
1521
|
-
.admonition .admonition-title:before {
|
|
1522
|
-
top: 50% !important;
|
|
1523
|
-
width: 20px !important;
|
|
1524
|
-
height: 20px !important;
|
|
1525
|
-
transform: translateY(-50%) !important;
|
|
1526
|
-
}
|
|
1527
|
-
`
|
|
1528
|
-
})
|
|
1529
|
-
]), [
|
|
1530
|
-
kind,
|
|
1531
|
-
name,
|
|
1532
|
-
namespace,
|
|
1533
|
-
scmIntegrationsApi,
|
|
1534
|
-
techdocsSanitizer,
|
|
1535
|
-
techdocsStorageApi,
|
|
1536
|
-
theme,
|
|
1537
|
-
isDarkTheme,
|
|
1538
|
-
isPinned
|
|
1539
|
-
]);
|
|
1540
|
-
const postRender = useCallback(async (transformedElement) => transform(transformedElement, [
|
|
1541
|
-
scrollIntoAnchor(),
|
|
1542
|
-
copyToClipboard(theme),
|
|
1543
|
-
addLinkClickListener({
|
|
1544
|
-
baseUrl: window.location.origin,
|
|
1545
|
-
onClick: (event, url) => {
|
|
1546
|
-
var _a, _b;
|
|
1547
|
-
const modifierActive = event.ctrlKey || event.metaKey;
|
|
1548
|
-
const parsedUrl = new URL(url);
|
|
1549
|
-
if (parsedUrl.hash) {
|
|
1550
|
-
if (modifierActive) {
|
|
1551
|
-
window.open(`${parsedUrl.pathname}${parsedUrl.hash}`, "_blank");
|
|
1552
|
-
} else {
|
|
1553
|
-
navigate(`${parsedUrl.pathname}${parsedUrl.hash}`);
|
|
1554
|
-
(_a = transformedElement == null ? void 0 : transformedElement.querySelector(`#${parsedUrl.hash.slice(1)}`)) == null ? void 0 : _a.scrollIntoView();
|
|
1555
|
-
}
|
|
1556
|
-
} else {
|
|
1557
|
-
if (modifierActive) {
|
|
1558
|
-
window.open(parsedUrl.pathname, "_blank");
|
|
1559
|
-
} else {
|
|
1560
|
-
navigate(parsedUrl.pathname);
|
|
1561
|
-
(_b = transformedElement == null ? void 0 : transformedElement.querySelector(".md-content__inner")) == null ? void 0 : _b.scrollIntoView();
|
|
1562
|
-
}
|
|
1563
|
-
}
|
|
1564
|
-
}
|
|
1565
|
-
}),
|
|
1566
|
-
onCssReady({
|
|
1567
|
-
docStorageUrl: await techdocsStorageApi.getApiOrigin(),
|
|
1568
|
-
onLoading: (renderedElement) => {
|
|
1569
|
-
renderedElement.style.setProperty("opacity", "0");
|
|
1570
|
-
},
|
|
1571
|
-
onLoaded: (renderedElement) => {
|
|
1572
|
-
var _a;
|
|
1573
|
-
renderedElement.style.removeProperty("opacity");
|
|
1574
|
-
(_a = renderedElement.querySelector(".md-nav__title")) == null ? void 0 : _a.removeAttribute("for");
|
|
1575
|
-
setSidebars(Array.from(renderedElement.querySelectorAll(".md-sidebar")));
|
|
1576
|
-
}
|
|
1577
|
-
})
|
|
1578
|
-
]), [theme, navigate, techdocsStorageApi]);
|
|
1579
|
-
useEffect(() => {
|
|
1580
|
-
if (!rawPage)
|
|
1581
|
-
return () => {
|
|
1582
|
-
};
|
|
1583
|
-
let shouldReplaceContent = true;
|
|
1584
|
-
preRender(rawPage, path).then(async (preTransformedDomElement) => {
|
|
1585
|
-
if (!(preTransformedDomElement == null ? void 0 : preTransformedDomElement.innerHTML)) {
|
|
1586
|
-
return;
|
|
1587
|
-
}
|
|
1588
|
-
if (!shouldReplaceContent) {
|
|
1589
|
-
return;
|
|
1590
|
-
}
|
|
1591
|
-
window.scroll({ top: 0 });
|
|
1592
|
-
const postTransformedDomElement = await postRender(preTransformedDomElement);
|
|
1593
|
-
setDom(postTransformedDomElement);
|
|
1594
|
-
});
|
|
1595
|
-
return () => {
|
|
1596
|
-
shouldReplaceContent = false;
|
|
1597
|
-
};
|
|
1598
|
-
}, [rawPage, path, preRender, postRender]);
|
|
1599
|
-
return dom;
|
|
1600
|
-
};
|
|
1601
|
-
const TheReader = ({
|
|
1602
|
-
entityRef,
|
|
1603
|
-
onReady = () => {
|
|
1604
|
-
},
|
|
1605
|
-
withSearch = true
|
|
1606
|
-
}) => {
|
|
1607
|
-
var _a, _b;
|
|
1608
|
-
const classes = useStyles();
|
|
1609
|
-
const dom = useTechDocsReaderDom(entityRef);
|
|
1610
|
-
const shadowDomRef = useRef(null);
|
|
1611
|
-
const onReadyRef = useRef(onReady);
|
|
1612
|
-
useEffect(() => {
|
|
1613
|
-
onReadyRef.current = onReady;
|
|
1614
|
-
}, [onReady]);
|
|
1615
|
-
useEffect(() => {
|
|
1616
|
-
if (!dom || !shadowDomRef.current)
|
|
1617
|
-
return;
|
|
1618
|
-
const shadowDiv = shadowDomRef.current;
|
|
1619
|
-
const shadowRoot = shadowDiv.shadowRoot || shadowDiv.attachShadow({ mode: "open" });
|
|
1620
|
-
Array.from(shadowRoot.children).forEach((child) => shadowRoot.removeChild(child));
|
|
1621
|
-
shadowRoot.appendChild(dom);
|
|
1622
|
-
onReadyRef.current();
|
|
1623
|
-
}, [dom]);
|
|
1624
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TechDocsStateIndicator, null), withSearch && ((_b = (_a = shadowDomRef == null ? void 0 : shadowDomRef.current) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.innerHTML) && /* @__PURE__ */ React.createElement(Grid, {
|
|
1625
|
-
container: true,
|
|
1626
|
-
className: classes.searchBar
|
|
1627
|
-
}, /* @__PURE__ */ React.createElement(TechDocsSearch, {
|
|
1628
|
-
entityId: entityRef
|
|
1629
|
-
})), /* @__PURE__ */ React.createElement("div", {
|
|
1630
|
-
"data-testid": "techdocs-content-shadowroot",
|
|
1631
|
-
ref: shadowDomRef
|
|
1632
|
-
}));
|
|
1633
|
-
};
|
|
1634
|
-
const Reader = (props) => {
|
|
1635
|
-
const { entityRef, onReady = () => {
|
|
1636
|
-
}, withSearch = true } = props;
|
|
1637
|
-
return /* @__PURE__ */ React.createElement(TechDocsReaderProvider, {
|
|
1638
|
-
entityRef
|
|
1639
|
-
}, /* @__PURE__ */ React.createElement(TheReader, {
|
|
1640
|
-
entityRef,
|
|
1641
|
-
onReady,
|
|
1642
|
-
withSearch
|
|
1643
|
-
}));
|
|
1644
|
-
};
|
|
1645
|
-
|
|
1646
|
-
const rootRouteRef = createRouteRef({
|
|
1647
|
-
id: "techdocs:index-page"
|
|
1648
|
-
});
|
|
1649
|
-
const rootDocsRouteRef = createRouteRef({
|
|
1650
|
-
id: "techdocs:reader-page",
|
|
1651
|
-
params: ["namespace", "kind", "name"]
|
|
1652
|
-
});
|
|
1653
|
-
const rootCatalogDocsRouteRef = createRouteRef({
|
|
1654
|
-
id: "techdocs:catalog-reader-view"
|
|
1655
|
-
});
|
|
1656
|
-
|
|
1657
|
-
const TechDocsReaderPageHeader = (props) => {
|
|
1658
|
-
const { entityRef, entityMetadata, techDocsMetadata, children } = props;
|
|
1659
|
-
const { name } = entityRef;
|
|
1660
|
-
const { site_name: siteName, site_description: siteDescription } = techDocsMetadata || {};
|
|
1661
|
-
const { locationMetadata, spec } = entityMetadata || {};
|
|
1662
|
-
const lifecycle = spec == null ? void 0 : spec.lifecycle;
|
|
1663
|
-
const ownedByRelations = entityMetadata ? getEntityRelations(entityMetadata, RELATION_OWNED_BY) : [];
|
|
1664
|
-
const docsRootLink = useRouteRef(rootRouteRef)();
|
|
1665
|
-
const labels = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(HeaderLabel, {
|
|
1666
|
-
label: "Component",
|
|
1667
|
-
value: /* @__PURE__ */ React.createElement(EntityRefLink, {
|
|
1668
|
-
color: "inherit",
|
|
1669
|
-
entityRef,
|
|
1670
|
-
defaultKind: "Component"
|
|
1671
|
-
})
|
|
1672
|
-
}), ownedByRelations.length > 0 && /* @__PURE__ */ React.createElement(HeaderLabel, {
|
|
1673
|
-
label: "Owner",
|
|
1674
|
-
value: /* @__PURE__ */ React.createElement(EntityRefLinks, {
|
|
1675
|
-
color: "inherit",
|
|
1676
|
-
entityRefs: ownedByRelations,
|
|
1677
|
-
defaultKind: "group"
|
|
1678
|
-
})
|
|
1679
|
-
}), lifecycle ? /* @__PURE__ */ React.createElement(HeaderLabel, {
|
|
1680
|
-
label: "Lifecycle",
|
|
1681
|
-
value: lifecycle
|
|
1682
|
-
}) : null, locationMetadata && locationMetadata.type !== "dir" && locationMetadata.type !== "file" ? /* @__PURE__ */ React.createElement(HeaderLabel, {
|
|
1683
|
-
label: "",
|
|
1684
|
-
value: /* @__PURE__ */ React.createElement("a", {
|
|
1685
|
-
href: locationMetadata.target,
|
|
1686
|
-
target: "_blank",
|
|
1687
|
-
rel: "noopener noreferrer"
|
|
1688
|
-
}, /* @__PURE__ */ React.createElement(CodeIcon, {
|
|
1689
|
-
style: { marginTop: "-25px", fill: "#fff" }
|
|
1690
|
-
}))
|
|
1691
|
-
}) : null);
|
|
1692
|
-
return /* @__PURE__ */ React.createElement(Header, {
|
|
1693
|
-
title: siteName ? siteName : ".",
|
|
1694
|
-
pageTitleOverride: siteName || name,
|
|
1695
|
-
subtitle: siteDescription && siteDescription !== "None" ? siteDescription : "",
|
|
1696
|
-
type: "Docs",
|
|
1697
|
-
typeLink: docsRootLink
|
|
1698
|
-
}, labels, children);
|
|
1699
|
-
};
|
|
1700
|
-
|
|
1701
|
-
function toLowerMaybe(str, config) {
|
|
1702
|
-
return config.getOptionalBoolean("techdocs.legacyUseCaseSensitiveTripletPaths") ? str : str.toLocaleLowerCase("en-US");
|
|
1703
|
-
}
|
|
1704
|
-
|
|
1705
|
-
const DocsCardGrid = (props) => {
|
|
1706
|
-
const { entities } = props;
|
|
1707
|
-
const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
|
|
1708
|
-
const config = useApi(configApiRef);
|
|
1709
|
-
if (!entities)
|
|
1710
|
-
return null;
|
|
1711
|
-
return /* @__PURE__ */ React.createElement(ItemCardGrid, {
|
|
1712
|
-
"data-testid": "docs-explore"
|
|
1713
|
-
}, !(entities == null ? void 0 : entities.length) ? null : entities.map((entity, index) => {
|
|
1714
|
-
var _a, _b;
|
|
1715
|
-
return /* @__PURE__ */ React.createElement(Card, {
|
|
1716
|
-
key: index
|
|
1717
|
-
}, /* @__PURE__ */ React.createElement(CardMedia, null, /* @__PURE__ */ React.createElement(ItemCardHeader, {
|
|
1718
|
-
title: (_a = entity.metadata.title) != null ? _a : entity.metadata.name
|
|
1719
|
-
})), /* @__PURE__ */ React.createElement(CardContent, null, entity.metadata.description), /* @__PURE__ */ React.createElement(CardActions, null, /* @__PURE__ */ React.createElement(Button$1, {
|
|
1720
|
-
to: getRouteToReaderPageFor({
|
|
1721
|
-
namespace: toLowerMaybe((_b = entity.metadata.namespace) != null ? _b : "default", config),
|
|
1722
|
-
kind: toLowerMaybe(entity.kind, config),
|
|
1723
|
-
name: toLowerMaybe(entity.metadata.name, config)
|
|
1724
|
-
}),
|
|
1725
|
-
color: "primary",
|
|
1726
|
-
"data-testid": "read_docs"
|
|
1727
|
-
}, "Read Docs")));
|
|
1728
|
-
}));
|
|
1729
|
-
};
|
|
1730
|
-
|
|
1731
|
-
const EntityListDocsGrid = () => {
|
|
1732
|
-
const { loading, error, entities } = useEntityList();
|
|
1733
|
-
if (error) {
|
|
1734
|
-
return /* @__PURE__ */ React.createElement(WarningPanel, {
|
|
1735
|
-
severity: "error",
|
|
1736
|
-
title: "Could not load available documentation."
|
|
1737
|
-
}, /* @__PURE__ */ React.createElement(CodeSnippet, {
|
|
1738
|
-
language: "text",
|
|
1739
|
-
text: error.toString()
|
|
1740
|
-
}));
|
|
1741
|
-
}
|
|
1742
|
-
if (loading || !entities) {
|
|
1743
|
-
return /* @__PURE__ */ React.createElement(Progress, null);
|
|
1744
|
-
}
|
|
1745
|
-
entities.sort((a, b) => {
|
|
1746
|
-
var _a, _b;
|
|
1747
|
-
return ((_a = a.metadata.title) != null ? _a : a.metadata.name).localeCompare((_b = b.metadata.title) != null ? _b : b.metadata.name);
|
|
1748
|
-
});
|
|
1749
|
-
return /* @__PURE__ */ React.createElement(DocsCardGrid, {
|
|
1750
|
-
entities
|
|
1751
|
-
});
|
|
1752
|
-
};
|
|
1753
|
-
|
|
1754
|
-
const YellowStar = withStyles$1({
|
|
1755
|
-
root: {
|
|
1756
|
-
color: "#f3ba37"
|
|
1757
|
-
}
|
|
1758
|
-
})(Star);
|
|
1759
|
-
const actionFactories = {
|
|
1760
|
-
createCopyDocsUrlAction(copyToClipboard) {
|
|
1761
|
-
return (row) => {
|
|
1762
|
-
return {
|
|
1763
|
-
icon: () => /* @__PURE__ */ React.createElement(ShareIcon, {
|
|
1764
|
-
fontSize: "small"
|
|
1765
|
-
}),
|
|
1766
|
-
tooltip: "Click to copy documentation link to clipboard",
|
|
1767
|
-
onClick: () => copyToClipboard(`${window.location.origin}${row.resolved.docsUrl}`)
|
|
1768
|
-
};
|
|
1769
|
-
};
|
|
1770
|
-
},
|
|
1771
|
-
createStarEntityAction(isStarredEntity, toggleStarredEntity) {
|
|
1772
|
-
return ({ entity }) => {
|
|
1773
|
-
const isStarred = isStarredEntity(entity);
|
|
1774
|
-
return {
|
|
1775
|
-
cellStyle: { paddingLeft: "1em" },
|
|
1776
|
-
icon: () => isStarred ? /* @__PURE__ */ React.createElement(YellowStar, null) : /* @__PURE__ */ React.createElement(StarBorder, null),
|
|
1777
|
-
tooltip: isStarred ? "Remove from favorites" : "Add to favorites",
|
|
1778
|
-
onClick: () => toggleStarredEntity(entity)
|
|
1779
|
-
};
|
|
1780
|
-
};
|
|
1781
|
-
}
|
|
1782
|
-
};
|
|
1783
|
-
|
|
1784
|
-
function customTitle(entity) {
|
|
1785
|
-
return entity.metadata.title || entity.metadata.name;
|
|
1786
|
-
}
|
|
1787
|
-
const columnFactories = {
|
|
1788
|
-
createNameColumn() {
|
|
1789
|
-
return {
|
|
1790
|
-
title: "Document",
|
|
1791
|
-
field: "entity.metadata.name",
|
|
1792
|
-
highlight: true,
|
|
1793
|
-
render: (row) => /* @__PURE__ */ React.createElement(SubvalueCell, {
|
|
1794
|
-
value: /* @__PURE__ */ React.createElement(Link, {
|
|
1795
|
-
to: row.resolved.docsUrl
|
|
1796
|
-
}, customTitle(row.entity)),
|
|
1797
|
-
subvalue: row.entity.metadata.description
|
|
1798
|
-
})
|
|
1799
|
-
};
|
|
1800
|
-
},
|
|
1801
|
-
createOwnerColumn() {
|
|
1802
|
-
return {
|
|
1803
|
-
title: "Owner",
|
|
1804
|
-
field: "resolved.ownedByRelationsTitle",
|
|
1805
|
-
render: ({ resolved }) => /* @__PURE__ */ React.createElement(EntityRefLinks, {
|
|
1806
|
-
entityRefs: resolved.ownedByRelations,
|
|
1807
|
-
defaultKind: "group"
|
|
1808
|
-
})
|
|
1809
|
-
};
|
|
1810
|
-
},
|
|
1811
|
-
createTypeColumn() {
|
|
1812
|
-
return {
|
|
1813
|
-
title: "Type",
|
|
1814
|
-
field: "entity.spec.type"
|
|
1815
|
-
};
|
|
1816
|
-
}
|
|
1817
|
-
};
|
|
1818
|
-
|
|
1819
|
-
const DocsTable = (props) => {
|
|
1820
|
-
const { entities, title, loading, columns, actions } = props;
|
|
1821
|
-
const [, copyToClipboard] = useCopyToClipboard();
|
|
1822
|
-
const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
|
|
1823
|
-
const config = useApi(configApiRef);
|
|
1824
|
-
if (!entities)
|
|
1825
|
-
return null;
|
|
1826
|
-
const documents = entities.map((entity) => {
|
|
1827
|
-
var _a;
|
|
1828
|
-
const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
|
|
1829
|
-
return {
|
|
1830
|
-
entity,
|
|
1831
|
-
resolved: {
|
|
1832
|
-
docsUrl: getRouteToReaderPageFor({
|
|
1833
|
-
namespace: toLowerMaybe((_a = entity.metadata.namespace) != null ? _a : "default", config),
|
|
1834
|
-
kind: toLowerMaybe(entity.kind, config),
|
|
1835
|
-
name: toLowerMaybe(entity.metadata.name, config)
|
|
1836
|
-
}),
|
|
1837
|
-
ownedByRelations,
|
|
1838
|
-
ownedByRelationsTitle: ownedByRelations.map((r) => humanizeEntityRef(r, { defaultKind: "group" })).join(", ")
|
|
1839
|
-
}
|
|
1840
|
-
};
|
|
1841
|
-
});
|
|
1842
|
-
const defaultColumns = [
|
|
1843
|
-
columnFactories.createNameColumn(),
|
|
1844
|
-
columnFactories.createOwnerColumn(),
|
|
1845
|
-
columnFactories.createTypeColumn()
|
|
1846
|
-
];
|
|
1847
|
-
const defaultActions = [
|
|
1848
|
-
actionFactories.createCopyDocsUrlAction(copyToClipboard)
|
|
1849
|
-
];
|
|
1850
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, loading || documents && documents.length > 0 ? /* @__PURE__ */ React.createElement(Table, {
|
|
1851
|
-
isLoading: loading,
|
|
1852
|
-
options: {
|
|
1853
|
-
paging: true,
|
|
1854
|
-
pageSize: 20,
|
|
1855
|
-
search: true,
|
|
1856
|
-
actionsColumnIndex: -1
|
|
1857
|
-
},
|
|
1858
|
-
data: documents,
|
|
1859
|
-
columns: columns || defaultColumns,
|
|
1860
|
-
actions: actions || defaultActions,
|
|
1861
|
-
title: title ? `${title} (${documents.length})` : `All (${documents.length})`
|
|
1862
|
-
}) : /* @__PURE__ */ React.createElement(EmptyState, {
|
|
1863
|
-
missing: "data",
|
|
1864
|
-
title: "No documents to show",
|
|
1865
|
-
description: "Create your own document. Check out our Getting Started Information",
|
|
1866
|
-
action: /* @__PURE__ */ React.createElement(Button$1, {
|
|
1867
|
-
color: "primary",
|
|
1868
|
-
to: "https://backstage.io/docs/features/techdocs/getting-started",
|
|
1869
|
-
variant: "contained"
|
|
1870
|
-
}, "DOCS")
|
|
1871
|
-
}));
|
|
1872
|
-
};
|
|
1873
|
-
DocsTable.columns = columnFactories;
|
|
1874
|
-
DocsTable.actions = actionFactories;
|
|
1875
|
-
|
|
1876
|
-
const EntityListDocsTable = (props) => {
|
|
1877
|
-
var _a, _b;
|
|
1878
|
-
const { columns, actions } = props;
|
|
1879
|
-
const { loading, error, entities, filters } = useEntityList();
|
|
1880
|
-
const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
|
|
1881
|
-
const [, copyToClipboard] = useCopyToClipboard();
|
|
1882
|
-
const title = capitalize((_b = (_a = filters.user) == null ? void 0 : _a.value) != null ? _b : "all");
|
|
1883
|
-
const defaultActions = [
|
|
1884
|
-
actionFactories.createCopyDocsUrlAction(copyToClipboard),
|
|
1885
|
-
actionFactories.createStarEntityAction(isStarredEntity, toggleStarredEntity)
|
|
1886
|
-
];
|
|
1887
|
-
if (error) {
|
|
1888
|
-
return /* @__PURE__ */ React.createElement(WarningPanel, {
|
|
1889
|
-
severity: "error",
|
|
1890
|
-
title: "Could not load available documentation."
|
|
1891
|
-
}, /* @__PURE__ */ React.createElement(CodeSnippet, {
|
|
1892
|
-
language: "text",
|
|
1893
|
-
text: error.toString()
|
|
1894
|
-
}));
|
|
1895
|
-
}
|
|
1896
|
-
return /* @__PURE__ */ React.createElement(DocsTable, {
|
|
1897
|
-
title,
|
|
1898
|
-
entities,
|
|
1899
|
-
loading,
|
|
1900
|
-
actions: actions || defaultActions,
|
|
1901
|
-
columns
|
|
1902
|
-
});
|
|
1903
|
-
};
|
|
1904
|
-
EntityListDocsTable.columns = columnFactories;
|
|
1905
|
-
EntityListDocsTable.actions = actionFactories;
|
|
1906
|
-
|
|
1907
|
-
const TechDocsPageWrapper = (props) => {
|
|
1908
|
-
var _a;
|
|
1909
|
-
const { children } = props;
|
|
1910
|
-
const configApi = useApi(configApiRef);
|
|
1911
|
-
const generatedSubtitle = `Documentation available in ${(_a = configApi.getOptionalString("organization.name")) != null ? _a : "Backstage"}`;
|
|
1912
|
-
return /* @__PURE__ */ React.createElement(PageWithHeader, {
|
|
1913
|
-
title: "Documentation",
|
|
1914
|
-
subtitle: generatedSubtitle,
|
|
1915
|
-
themeId: "documentation"
|
|
1916
|
-
}, children);
|
|
1917
|
-
};
|
|
1918
|
-
|
|
1919
|
-
class TechDocsFilter {
|
|
1920
|
-
getCatalogFilters() {
|
|
1921
|
-
return {
|
|
1922
|
-
"metadata.annotations.backstage.io/techdocs-ref": CATALOG_FILTER_EXISTS
|
|
1923
|
-
};
|
|
1924
|
-
}
|
|
1925
|
-
}
|
|
1926
|
-
const TechDocsPicker = () => {
|
|
1927
|
-
const { updateFilters } = useEntityList();
|
|
1928
|
-
useEffect(() => {
|
|
1929
|
-
updateFilters({
|
|
1930
|
-
techdocs: new TechDocsFilter()
|
|
1931
|
-
});
|
|
1932
|
-
}, [updateFilters]);
|
|
1933
|
-
return null;
|
|
1934
|
-
};
|
|
1935
|
-
|
|
1936
|
-
const DefaultTechDocsHome = (props) => {
|
|
1937
|
-
const { initialFilter = "all", columns, actions } = props;
|
|
1938
|
-
return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, {
|
|
1939
|
-
title: ""
|
|
1940
|
-
}, /* @__PURE__ */ React.createElement(SupportButton, null, "Discover documentation in your ecosystem.")), /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout.Filters, null, /* @__PURE__ */ React.createElement(TechDocsPicker, null), /* @__PURE__ */ React.createElement(UserListPicker, {
|
|
1941
|
-
initialFilter
|
|
1942
|
-
}), /* @__PURE__ */ React.createElement(EntityOwnerPicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(CatalogFilterLayout.Content, null, /* @__PURE__ */ React.createElement(EntityListDocsTable, {
|
|
1943
|
-
actions,
|
|
1944
|
-
columns
|
|
1945
|
-
}))))));
|
|
1946
|
-
};
|
|
1947
|
-
|
|
1948
|
-
const techdocsPlugin = createPlugin({
|
|
1949
|
-
id: "techdocs",
|
|
1950
|
-
apis: [
|
|
1951
|
-
createApiFactory({
|
|
1952
|
-
api: techdocsStorageApiRef,
|
|
1953
|
-
deps: {
|
|
1954
|
-
configApi: configApiRef,
|
|
1955
|
-
discoveryApi: discoveryApiRef,
|
|
1956
|
-
identityApi: identityApiRef,
|
|
1957
|
-
fetchApi: fetchApiRef
|
|
1958
|
-
},
|
|
1959
|
-
factory: ({ configApi, discoveryApi, identityApi, fetchApi }) => new TechDocsStorageClient({
|
|
1960
|
-
configApi,
|
|
1961
|
-
discoveryApi,
|
|
1962
|
-
identityApi,
|
|
1963
|
-
fetchApi
|
|
1964
|
-
})
|
|
1965
|
-
}),
|
|
1966
|
-
createApiFactory({
|
|
1967
|
-
api: techdocsApiRef,
|
|
1968
|
-
deps: {
|
|
1969
|
-
configApi: configApiRef,
|
|
1970
|
-
discoveryApi: discoveryApiRef,
|
|
1971
|
-
fetchApi: fetchApiRef
|
|
1972
|
-
},
|
|
1973
|
-
factory: ({ configApi, discoveryApi, fetchApi }) => new TechDocsClient({
|
|
1974
|
-
configApi,
|
|
1975
|
-
discoveryApi,
|
|
1976
|
-
fetchApi
|
|
1977
|
-
})
|
|
1978
|
-
})
|
|
1979
|
-
],
|
|
1980
|
-
routes: {
|
|
1981
|
-
root: rootRouteRef,
|
|
1982
|
-
docRoot: rootDocsRouteRef,
|
|
1983
|
-
entityContent: rootCatalogDocsRouteRef
|
|
1984
|
-
}
|
|
1985
|
-
});
|
|
1986
|
-
const TechdocsPage = techdocsPlugin.provide(createRoutableExtension({
|
|
1987
|
-
name: "TechdocsPage",
|
|
1988
|
-
component: () => Promise.resolve().then(function () { return Router$1; }).then((m) => m.Router),
|
|
1989
|
-
mountPoint: rootRouteRef
|
|
1990
|
-
}));
|
|
1991
|
-
const EntityTechdocsContent = techdocsPlugin.provide(createRoutableExtension({
|
|
1992
|
-
name: "EntityTechdocsContent",
|
|
1993
|
-
component: () => Promise.resolve().then(function () { return Router$1; }).then((m) => m.EmbeddedDocsRouter),
|
|
1994
|
-
mountPoint: rootCatalogDocsRouteRef
|
|
1995
|
-
}));
|
|
1996
|
-
const TechDocsCustomHome = techdocsPlugin.provide(createRoutableExtension({
|
|
1997
|
-
name: "TechDocsCustomHome",
|
|
1998
|
-
component: () => import('./esm/TechDocsCustomHome-174c6f0d.esm.js').then((m) => m.TechDocsCustomHome),
|
|
1999
|
-
mountPoint: rootRouteRef
|
|
2000
|
-
}));
|
|
2001
|
-
const TechDocsIndexPage$2 = techdocsPlugin.provide(createRoutableExtension({
|
|
2002
|
-
name: "TechDocsIndexPage",
|
|
2003
|
-
component: () => Promise.resolve().then(function () { return TechDocsIndexPage$1; }).then((m) => m.TechDocsIndexPage),
|
|
2004
|
-
mountPoint: rootRouteRef
|
|
2005
|
-
}));
|
|
2006
|
-
const TechDocsReaderPage$2 = techdocsPlugin.provide(createRoutableExtension({
|
|
2007
|
-
name: "TechDocsReaderPage",
|
|
2008
|
-
component: () => Promise.resolve().then(function () { return TechDocsReaderPage$1; }).then((m) => m.TechDocsReaderPage),
|
|
2009
|
-
mountPoint: rootDocsRouteRef
|
|
2010
|
-
}));
|
|
2011
|
-
|
|
2012
|
-
const TechDocsIndexPage = () => {
|
|
2013
|
-
const outlet = useOutlet();
|
|
2014
|
-
return outlet || /* @__PURE__ */ React.createElement(DefaultTechDocsHome, null);
|
|
2015
|
-
};
|
|
2016
|
-
|
|
2017
|
-
var TechDocsIndexPage$1 = /*#__PURE__*/Object.freeze({
|
|
2018
|
-
__proto__: null,
|
|
2019
|
-
TechDocsIndexPage: TechDocsIndexPage
|
|
2020
|
-
});
|
|
2021
|
-
|
|
2022
|
-
const TechDocsReaderPage = (props) => {
|
|
2023
|
-
const { children } = props;
|
|
2024
|
-
const { NotFoundErrorPage } = useApp().getComponents();
|
|
2025
|
-
const outlet = useOutlet();
|
|
2026
|
-
const [documentReady, setDocumentReady] = useState(false);
|
|
2027
|
-
const { namespace, kind, name } = useParams();
|
|
2028
|
-
const techdocsApi = useApi(techdocsApiRef);
|
|
2029
|
-
const { value: techdocsMetadataValue } = useAsync(() => {
|
|
2030
|
-
if (documentReady) {
|
|
2031
|
-
return techdocsApi.getTechDocsMetadata({ kind, namespace, name });
|
|
2032
|
-
}
|
|
2033
|
-
return Promise.resolve(void 0);
|
|
2034
|
-
}, [kind, namespace, name, techdocsApi, documentReady]);
|
|
2035
|
-
const { value: entityMetadataValue, error: entityMetadataError } = useAsync(() => {
|
|
2036
|
-
return techdocsApi.getEntityMetadata({ kind, namespace, name });
|
|
2037
|
-
}, [kind, namespace, name, techdocsApi]);
|
|
2038
|
-
const onReady = useCallback(() => {
|
|
2039
|
-
setDocumentReady(true);
|
|
2040
|
-
}, [setDocumentReady]);
|
|
2041
|
-
if (entityMetadataError)
|
|
2042
|
-
return /* @__PURE__ */ React.createElement(NotFoundErrorPage, null);
|
|
2043
|
-
if (!children)
|
|
2044
|
-
return outlet || /* @__PURE__ */ React.createElement(Page, {
|
|
2045
|
-
themeId: "documentation"
|
|
2046
|
-
}, /* @__PURE__ */ React.createElement(TechDocsReaderPageHeader, {
|
|
2047
|
-
techDocsMetadata: techdocsMetadataValue,
|
|
2048
|
-
entityMetadata: entityMetadataValue,
|
|
2049
|
-
entityRef: {
|
|
2050
|
-
kind,
|
|
2051
|
-
namespace,
|
|
2052
|
-
name
|
|
2053
|
-
}
|
|
2054
|
-
}), /* @__PURE__ */ React.createElement(Content, {
|
|
2055
|
-
"data-testid": "techdocs-content"
|
|
2056
|
-
}, /* @__PURE__ */ React.createElement(Reader, {
|
|
2057
|
-
onReady,
|
|
2058
|
-
entityRef: {
|
|
2059
|
-
kind,
|
|
2060
|
-
namespace,
|
|
2061
|
-
name
|
|
2062
|
-
}
|
|
2063
|
-
})));
|
|
2064
|
-
return /* @__PURE__ */ React.createElement(Page, {
|
|
2065
|
-
themeId: "documentation"
|
|
2066
|
-
}, children instanceof Function ? children({
|
|
2067
|
-
techdocsMetadataValue,
|
|
2068
|
-
entityMetadataValue,
|
|
2069
|
-
entityRef: { kind, namespace, name },
|
|
2070
|
-
onReady
|
|
2071
|
-
}) : children);
|
|
2072
|
-
};
|
|
2073
|
-
|
|
2074
|
-
var TechDocsReaderPage$1 = /*#__PURE__*/Object.freeze({
|
|
2075
|
-
__proto__: null,
|
|
2076
|
-
TechDocsReaderPage: TechDocsReaderPage
|
|
2077
|
-
});
|
|
2078
|
-
|
|
2079
|
-
const EntityPageDocs = ({ entity }) => {
|
|
2080
|
-
var _a;
|
|
2081
|
-
const config = useApi(configApiRef);
|
|
2082
|
-
return /* @__PURE__ */ React.createElement(Reader, {
|
|
2083
|
-
withSearch: false,
|
|
2084
|
-
entityRef: {
|
|
2085
|
-
namespace: toLowerMaybe((_a = entity.metadata.namespace) != null ? _a : "default", config),
|
|
2086
|
-
kind: toLowerMaybe(entity.kind, config),
|
|
2087
|
-
name: toLowerMaybe(entity.metadata.name, config)
|
|
2088
|
-
}
|
|
2089
|
-
});
|
|
2090
|
-
};
|
|
2091
|
-
|
|
2092
|
-
const TECHDOCS_ANNOTATION = "backstage.io/techdocs-ref";
|
|
2093
|
-
const isTechDocsAvailable = (entity) => {
|
|
2094
|
-
var _a, _b;
|
|
2095
|
-
return Boolean((_b = (_a = entity == null ? void 0 : entity.metadata) == null ? void 0 : _a.annotations) == null ? void 0 : _b[TECHDOCS_ANNOTATION]);
|
|
2096
|
-
};
|
|
2097
|
-
const Router = () => {
|
|
2098
|
-
return /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
|
|
2099
|
-
path: "/",
|
|
2100
|
-
element: /* @__PURE__ */ React.createElement(TechDocsIndexPage, null)
|
|
2101
|
-
}), /* @__PURE__ */ React.createElement(Route, {
|
|
2102
|
-
path: "/:namespace/:kind/:name/*",
|
|
2103
|
-
element: /* @__PURE__ */ React.createElement(TechDocsReaderPage, null)
|
|
2104
|
-
}));
|
|
2105
|
-
};
|
|
2106
|
-
const EmbeddedDocsRouter = () => {
|
|
2107
|
-
var _a;
|
|
2108
|
-
const { entity } = useEntity();
|
|
2109
|
-
const projectId = (_a = entity.metadata.annotations) == null ? void 0 : _a[TECHDOCS_ANNOTATION];
|
|
2110
|
-
if (!projectId) {
|
|
2111
|
-
return /* @__PURE__ */ React.createElement(MissingAnnotationEmptyState, {
|
|
2112
|
-
annotation: TECHDOCS_ANNOTATION
|
|
2113
|
-
});
|
|
2114
|
-
}
|
|
2115
|
-
return /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
|
|
2116
|
-
path: "/*",
|
|
2117
|
-
element: /* @__PURE__ */ React.createElement(EntityPageDocs, {
|
|
2118
|
-
entity
|
|
2119
|
-
})
|
|
2120
|
-
}));
|
|
2121
|
-
};
|
|
2122
|
-
|
|
2123
|
-
var Router$1 = /*#__PURE__*/Object.freeze({
|
|
2124
|
-
__proto__: null,
|
|
2125
|
-
isTechDocsAvailable: isTechDocsAvailable,
|
|
2126
|
-
Router: Router,
|
|
2127
|
-
EmbeddedDocsRouter: EmbeddedDocsRouter
|
|
2128
|
-
});
|
|
2129
|
-
|
|
2130
|
-
export { DefaultTechDocsHome, DocsCardGrid, DocsTable, EmbeddedDocsRouter, EntityListDocsGrid, EntityListDocsTable, EntityTechdocsContent, Reader, Router, TechDocsClient, TechDocsCustomHome, TechDocsIndexPage$2 as TechDocsIndexPage, TechDocsPageWrapper, TechDocsPicker, TechDocsReaderPage$2 as TechDocsReaderPage, TechDocsReaderPageHeader, TechDocsSearch, TechDocsSearchResultListItem, TechDocsStateIndicator, TechDocsStorageClient, TechdocsPage, isTechDocsAvailable, techdocsPlugin as plugin, techdocsApiRef, techdocsPlugin, techdocsStorageApiRef, useTechDocsReader, useTechDocsReaderDom, withTechDocsReaderProvider };
|
|
1
|
+
export { y as DefaultTechDocsHome, a as DocsCardGrid, D as DocsTable, C as EmbeddedDocsRouter, v as EntityListDocsGrid, x as EntityListDocsTable, E as EntityTechdocsContent, R as Reader, B as Router, j as TechDocsClient, d as TechDocsCustomHome, e as TechDocsIndexPage, T as TechDocsPageWrapper, z as TechDocsPicker, c as TechDocsReaderLayout, g as TechDocsReaderPage, m as TechDocsReaderPageContent, l as TechDocsReaderPageHeader, p as TechDocsReaderPageSubheader, n as TechDocsReaderProvider, s as TechDocsSearch, r as TechDocsSearchResultListItem, q as TechDocsStateIndicator, k as TechDocsStorageClient, f as TechdocsPage, A as isTechDocsAvailable, t as plugin, i as techdocsApiRef, t as techdocsPlugin, h as techdocsStorageApiRef, u as useTechDocsReader, o as useTechDocsReaderDom, w as withTechDocsReaderProvider } from './esm/index-fba8389b.esm.js';
|
|
2
|
+
import '@backstage/core-plugin-api';
|
|
3
|
+
import '@backstage/errors';
|
|
4
|
+
import 'event-source-polyfill';
|
|
5
|
+
import 'react';
|
|
6
|
+
import 'react-router-dom';
|
|
7
|
+
import '@backstage/core-components';
|
|
8
|
+
import '@backstage/plugin-techdocs-react';
|
|
9
|
+
import 'jss';
|
|
10
|
+
import '@material-ui/core';
|
|
11
|
+
import '@material-ui/styles';
|
|
12
|
+
import 'react-text-truncate';
|
|
13
|
+
import '@backstage/plugin-search-react';
|
|
14
|
+
import '@material-ui/icons/Search';
|
|
15
|
+
import '@material-ui/lab/Autocomplete';
|
|
16
|
+
import 'react-router';
|
|
17
|
+
import 'react-use/lib/useDebounce';
|
|
18
|
+
import '@material-ui/lab';
|
|
19
|
+
import '@material-ui/icons/Close';
|
|
20
|
+
import 'react-use/lib/useAsync';
|
|
21
|
+
import 'react-use/lib/useAsyncRetry';
|
|
22
|
+
import '@material-ui/core/styles';
|
|
23
|
+
import '@backstage/integration-react';
|
|
24
|
+
import '@backstage/integration';
|
|
25
|
+
import '@material-ui/icons/FeedbackOutlined';
|
|
26
|
+
import 'react-dom';
|
|
27
|
+
import 'git-url-parse';
|
|
28
|
+
import '@material-ui/icons/Menu';
|
|
29
|
+
import 'dompurify';
|
|
30
|
+
import 'react-helmet';
|
|
31
|
+
import '@material-ui/icons/Code';
|
|
32
|
+
import '@backstage/plugin-catalog-react';
|
|
33
|
+
import '@backstage/catalog-model';
|
|
34
|
+
import 'react-use/lib/useCopyToClipboard';
|
|
35
|
+
import 'lodash';
|
|
36
|
+
import '@material-ui/icons/Share';
|
|
37
|
+
import '@material-ui/icons/Star';
|
|
38
|
+
import '@material-ui/icons/StarBorder';
|
|
39
|
+
import '@backstage/core-app-api';
|
|
2131
40
|
//# sourceMappingURL=index.esm.js.map
|