-
Notifications
You must be signed in to change notification settings - Fork 500
/
cssxref.ejs
73 lines (60 loc) · 2.42 KB
/
cssxref.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<%
/*
Inserts a link to a CSS entity documentation
Appropriate styling is applied.
This template handles CSS data types and CSS functions gracefully by
automatically adding arrow brackets or round brackets, respectively.
For the ease of linking to CSS descriptors and functions, if only one
parameter is specified and it contains a slash, the displayed link name
will strip the last slash and any content before it.
Parameters:
$0 - API name to refer to
$1 - name of the link to display (optional)
$2 - anchor within the article to jump to of the form '#xyz' (optional)
Examples:
{{cssxref("background")}} =>
<a href="/en-US/docs/Web/CSS/background"><code>background</code></a>
{{cssxref("length")}} =>
<a href="/en-US/docs/Web/CSS/length"><code><length></code></a>
{{cssxref("gradient/linear-gradient")}} =>
<a href="/en-US/docs/Web/CSS/gradient/linear-gradient"><code>linear-gradient()</code></a>
{{cssxref("calc()")}} =>
<a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a>
{{cssxref("margin-top", "top margin")}} =>
<a href="/en-US/docs/Web/CSS/margin-top"><code>top margin</code></a>
{{cssxref("attr()", "", "#values")}} =>
<a href="/en-US/docs/Web/CSS/attr#values"><code>attr()</code></a>
*/
const lang = env.locale;
let url = "";
let urlWithoutAnchor = "";
let displayName = ($1 || $0.slice($0.lastIndexOf("/") 1));
// Deal with CSS data types and functions by removing <> and ()
let slug = $0.replace(/<(.*)>/g, "$1")
.replace(/\(\)/g, "");
// Special case <color>, <flex>, <overflow>, and <position>
if (/^<(color|flex|overflow|position)>$/.test($0)) {
slug = "_value";
}
// Special case :host() and fit-content()
if (/^(:host|fit-content)\(\)$/.test($0)) {
slug = "_function";
}
const basePath = `/${lang}/docs/Web/CSS/`;
urlWithoutAnchor = basePath slug;
url = urlWithoutAnchor $2;
const thisPage = (!$1 || !$2) ?
wiki.getPage(`/en-US/docs/Web/CSS/${slug}`) :
null;
if (!$1) {
// Append parameter brackets to CSS functions
if ((thisPage.pageType === "css-function") && !displayName.endsWith("()")) {
displayName = "()";
}
// Enclose CSS data types in arrow brackets
if ((thisPage.pageType === "css-type") && !/^<. >$/.test(displayName)) {
displayName = "<" displayName ">";
}
}
const entry = web.smartLink(url, "", `<code>${displayName}</code>`, $0, basePath);
%><%- entry %>