Skip to content

Commit b28c3a8

Browse files
fraxkenfraxken
committed
refactor: improve wiki css
Co-authored-by: PierreDemailly <39910767+PierreDemailly@users.noreply.github.com>
1 parent c1741bc commit b28c3a8

File tree

8 files changed

+113
-30
lines changed

8 files changed

+113
-30
lines changed

‎esbuild.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,13 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
1313
const kPublicDir = path.join(__dirname, "public");
1414
const kOutDir = path.join(__dirname, "dist");
1515
const kImagesDir = path.join(kPublicDir, "img");
16+
const kNodeModulesDir = path.join(__dirname, "node_modules");
1617

1718
await esbuild.build({
1819
entryPoints: [
1920
path.join(kPublicDir, "js", "master.js"),
2021
path.join(kPublicDir, "css", "style.css"),
22+
path.join(kNodeModulesDir, "highlight.js", "styles", "github.css"),
2123
...getBuildConfiguration().entryPoints
2224
],
2325
loader: {

‎public/css/reset.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,6 @@ video {
8989
border: 0;
9090
font-size: 100%;
9191
font: inherit;
92-
vertical-align: baseline;
9392
}
9493

9594
/* HTML5 display-role reset for older browsers */

‎views/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
<link rel="stylesheet" href="public/css/style.css" />
1010
<link rel="stylesheet" href="workspaces/documentation-ui/src/css/main.css" />
11+
<link rel="stylesheet" href="node_modules/highlight.js/styles/github.css" />
1112
<script src="public/js/master.js" defer></script>
1213
<title>Node-Secure</title>
1314

‎workspaces/documentation-ui/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,11 @@ const kSASTWarnings = [
1616
"unsafe-import",
1717
"unsafe-regex",
1818
"unsafe-stmt",
19+
"shady-link",
1920
"encoded-literal",
2021
"short-identifiers",
2122
"suspicious-literal",
23+
"suspicious-file",
2224
"obfuscated-code",
2325
"weak-crypto"
2426
].map((name) => ({ name }));
@@ -80,7 +82,8 @@ export function render(rootElement, options = {}) {
8082

8183
const header = new Header(kHeaderMenus, { defaultName: "flags" });
8284
const mainContainer = utils.createDOMElement("div", {
83-
className: "documentation--main", childs: [header.dom, ...containers]
85+
className: "documentation--main",
86+
childs: [header.dom, ...containers]
8487
});
8588

8689
for (const node of rootElement.childNodes) {

‎workspaces/documentation-ui/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"license": "MIT",
2727
"dependencies": {
2828
"@nodesecure/flags": "^2.4.0",
29+
"highlight.js": "^11.9.0",
2930
"markdown-it": "^13.0.1"
3031
}
3132
}

‎workspaces/documentation-ui/src/components/header.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,10 @@ export class Header {
2525

2626
const ul = utils.createDOMElement("ul", {
2727
childs: [
28-
...menu.map((item) => {
29-
return utils.createDOMElement("li", {
30-
text: item.name,
31-
attributes: { "data-menu": item.title }
32-
});
33-
})
28+
...menu.map((item) => utils.createDOMElement("li", {
29+
text: item.name,
30+
attributes: { "data-menu": item.title }
31+
}))
3432
]
3533
});
3634

‎workspaces/documentation-ui/src/css/content.css‎

Lines changed: 83 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
max-width: 100%;
1313
}
1414

15-
.documentation--content span {
15+
.documentation--content div>span {
1616
background: #b8e9ff;
1717
padding: 2px;
1818
border-radius: 2px;
@@ -45,15 +45,46 @@
4545
height: 26px;
4646
font-size: 22px;
4747
border-bottom: 1px solid #3722AF;
48-
margin-top: 2.5rem;
48+
margin-top: 2rem;
4949
margin-bottom: 1rem;
5050
font-weight: bold;
5151
}
5252

53+
.documentation--content ul+h2 {
54+
margin-top: 1rem !important;
55+
}
56+
57+
.documentation--content h3 {
58+
height: 26px;
59+
font-size: 18px;
60+
margin-top: 1rem;
61+
margin-bottom: 0.5rem;
62+
border-bottom: 1px solid #d4d4d4;
63+
font-weight: bold;
64+
}
65+
66+
.documentation--content kbd {
67+
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(229,229,229,1) 100%);
68+
padding: 1px 5px;
69+
border-radius: 4px;
70+
border: 2px solid #cdcdcd;
71+
}
72+
5373
.documentation--content p {
5474
text-align: justify;
55-
line-height: 1.20;
75+
line-height: 1.50;
5676
color: #314249;
77+
margin-right: 10px;
78+
}
79+
80+
.documentation--content p>code {
81+
background: #feffd5;
82+
padding: 1px 5px;
83+
border-radius: 4px;
84+
}
85+
86+
.documentation--content p+p {
87+
margin-top: 10px;
5788
}
5889

5990
.documentation--content p.note {
@@ -65,37 +96,61 @@
6596
border-radius: 2px;
6697
box-sizing: border-box;
6798
}
68-
.documentation--content p.note > span {
99+
100+
.documentation--content blockquote {
101+
background: #81d4fa59;
102+
color: #283593 !important;
103+
border-left: 5px solid #01579B;
104+
margin: 0.5em 10px;
105+
padding: 0.5em 10px;
106+
}
107+
108+
.documentation--content blockquote p {
109+
display: inline;
110+
}
111+
112+
.documentation--content blockquote strong,
113+
.documentation--content blockquote code {
114+
font-weight: bold;
115+
}
116+
117+
.documentation--content p.note>span {
69118
background: #FFF9C4;
70119
}
71120

72121
.documentation--content ul {
73-
margin: 1rem 0;
74-
list-style: disc !important;
75-
border-radius: 4px;
76-
box-shadow: 1px 1px 10px rgb(20 20 20 / 10%);
122+
margin: 0.5rem 0;
123+
box-shadow: 1px 1px 10px rgba(20, 20, 20, 0.205);
124+
margin-right: 10px;
77125
}
78126

79127
.documentation--content ul li {
80-
min-height: 36px;
81-
display: flex;
82-
align-items: center;
83-
padding: 2px 10px;
128+
padding: 7px 10px;
129+
border-radius: 4px;
130+
background: #FFF;
84131
}
85132

86-
.documentation--content ul li:nth-child(odd) {
87-
background: #ECEFF1;
133+
.documentation--content ul li+li {
134+
margin-top: 3px;
88135
}
89136

90-
.documentation--content ul li:nth-child(even) {
91-
background: #CFD8DC;
137+
.documentation--content ul li:before {
138+
content: "• ";
92139
}
93140

141+
.documentation--content ul li a {
142+
color: #1976D2;
143+
}
144+
145+
.documentation--content ul li strong,
146+
.documentation--content ul li code {
147+
font-weight: bold;
148+
}
94149

95150
table {
96151
width: 100%;
97152
border-spacing: 2px;
98-
table-layout:fixed;
153+
table-layout: fixed;
99154
}
100155

101156
table thead tr th {
@@ -135,16 +190,24 @@ pre {
135190
word-wrap: break-word;
136191
overflow: auto;
137192
border-radius: 4px;
193+
flex-shrink: 0;
194+
margin-top: 10px !important;
195+
margin-right: 10px !important;
196+
}
197+
198+
pre+p {
199+
margin-top: 10px;
200+
}
201+
202+
pre code.hljs {
203+
font-size: 16px;
138204
}
139205

140206
pre code {
141207
font-family: "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
142208
display: block;
143-
margin: 0 0 0 60px;
144209
padding: 15px 16px 14px;
145-
border-left: 1px solid #37474F;
146210
overflow-x: auto;
147211
font-size: 13px;
148212
line-height: 19px;
149-
color: #ddd;
150213
}

‎workspaces/documentation-ui/src/fetch.js‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,19 @@ import * as CONSTANTS from "./constants.js";
33

44
// Import Third-party Dependencies
55
import MarkdownIt from "markdown-it";
6+
import hljs from "highlight.js/lib/core";
7+
import javascript from "highlight.js/lib/languages/javascript";
8+
import json from "highlight.js/lib/languages/json";
9+
10+
hljs.registerLanguage("javascript", javascript);
11+
hljs.registerLanguage("json", json);
612

713
// CONSTANTS
814
const kRawGithubFlagsURL = "https://raw.githubusercontent.com/NodeSecure/flags/main/src/flags";
915
const kRawGithubWarningsURL = "https://raw.githubusercontent.com/NodeSecure/js-x-ray/master/docs";
10-
const kMarkdownConvertor = new MarkdownIt();
16+
const kMarkdownConvertor = new MarkdownIt({
17+
html: true
18+
});
1119

1220
/** @type {Map<string, string>} */
1321
export const cache = new Map();
@@ -55,7 +63,14 @@ export async function fetchNodeSecureWarningsByTitle(title, options = {}) {
5563

5664
const httpResponse = await fetch(`${kRawGithubWarningsURL}/${title}.md`);
5765
const markdownResponse = await httpResponse.text();
58-
const htmlResponse = kMarkdownConvertor.render(markdownResponse);
66+
const htmlResponse = kMarkdownConvertor.render(
67+
markdownResponse
68+
.replaceAll("[!IMPORTANT]", "🚨")
69+
.replaceAll("[!NOTE]", "📝")
70+
.replaceAll("[!CAUTION]", "🔶")
71+
.replaceAll("[!WARNING]", "⚠️")
72+
.replaceAll("[!TIP]", "💡")
73+
);
5974

6075
if (cacheReponse) {
6176
cache.set(cacheTitle, htmlResponse);
@@ -78,4 +93,5 @@ export async function fetchAndRenderByMenu(menuElement, kind = "flags") {
7893

7994
const documentContentElement = document.querySelector(`.documentation--${kind} .${CONSTANTS.DIV_CONTENT}`);
8095
documentContentElement.innerHTML = kind === "flags" ? htmlResponse : `<div>${htmlResponse}</div>`;
96+
hljs.highlightAll();
8197
}

0 commit comments

Comments
 (0)