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