Skip to content

Commit 5de67a0

Browse files
loreanvictorloreanvictor
committedFeb 23, 2020
make the docs much more cool looking
1 parent 93e69cf commit 5de67a0

39 files changed

+131
-101
lines changed
 

‎404.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
<link rel="stylesheet"
1919
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
20-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
2121

2222
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
2323

@@ -33,7 +33,7 @@
3333
<body>
3434
<div id="header">
3535

36-
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star on GitHub</a>
36+
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star</a>
3737

3838
</div>
3939
<div class="container">

‎docs/agent.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
<link rel="stylesheet"
1919
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
20-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
2121

2222
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
2323

@@ -33,7 +33,7 @@
3333
<body>
3434
<div id="header">
3535

36-
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star on GitHub</a>
36+
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star</a>
3737

3838
</div>
3939
<div class="container">

‎docs/assets/main.js

+20-11
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ function showOverlay(overlay, time) {
66
overlay.timeout = setTimeout(function(){ hideOverlay(overlay); }, time);
77
}
88

9-
function hideOverlay(overlay) {
9+
function hideOverlay(overlay, options) {
1010
clearTimeout(overlay.timeout);
11-
overlay.dispatchEvent(new CustomEvent('overlay-closed'));
11+
if (!options || options.propagate !== false)
12+
overlay.dispatchEvent(new CustomEvent('overlay-closed'));
1213
overlay.classList.remove('active');
1314
}
1415

@@ -52,26 +53,31 @@ window.addEventListener('load', function() {
5253
node.innerHTML = '';
5354
node.classList.add('processed');
5455
for (var i = 0; i < lines.length; i++) {
55-
var line = lines[i];
56+
var line = lines[i].replace(/=\&gt\;/g, '<span class="func-arrow">=&gt;</span>');
57+
var ctr = '<span line-counter ' +
58+
(((i + 1)%5==0 || (i == 0) || (i == lines.length - 1)?'class="prim"':''))
59+
+ '>' + (i + 1) + '</span>';
5660
if (line.trim().length > 0) {
5761
if (line.startsWith(marker)) {
5862
var content = line.substr(marker.length);
5963
if (content.trim().length == 0)
60-
node.innerHTML += '<div class="line highlight"><span line-counter>' + (i + 1) + '</span><br></div>';
64+
node.innerHTML += '<div class="line highlight">' + ctr + '<br></div>';
6165
else
62-
node.innerHTML += '<div class="line highlight"><span line-counter>' + (i + 1) + '</span>' + line.substr(marker.length) + '</div>';
66+
node.innerHTML += '<div class="line highlight">' + ctr + line.substr(marker.length) + '</div>';
6367
}
6468
else
65-
node.innerHTML += '<div class="line"><span line-counter>' + (i + 1) + '</span>' + line + '</div>';
69+
node.innerHTML += '<div class="line">' + ctr + line + '</div>';
6670
}
67-
else node.innerHTML += '<div class="line"><span line-counter>' + (i + 1) + '</span><br></div>';
71+
else node.innerHTML += '<div class="line">' + ctr + '<br></div>';
6872
}
6973
});
7074

7175
new ClipboardJS('code .line', {
7276
text: function(trigger) {
7377
showOverlay(copyConfirm, 2000);
74-
return trigger.textContent;
78+
var clone = trigger.cloneNode(true);
79+
clone.childNodes[0].remove();
80+
return clone.textContent;
7581
}
7682
});
7783

@@ -124,8 +130,11 @@ window.addEventListener('load', function() {
124130
showOverlay(copyConfirm, 2000);
125131
let code = '';
126132
let lines = trigger.parentElement.previousElementSibling.querySelector('code').childNodes;
127-
for (var i = 0; i < lines.length; i++)
128-
code += lines[i].textContent + '\n';
133+
for (var i = 0; i < lines.length; i++) {
134+
var line = lines[i].cloneNode(true);
135+
line.childNodes[0].remove();
136+
code += line.textContent + '\n';
137+
}
129138

130139
return code;
131140
}
@@ -390,7 +399,7 @@ window.addEventListener('load', function() {
390399
chatElement.addEventListener('gitter-chat-toggle', function (event) {
391400
if (event.detail.state)
392401
showOverlay(gitterOverlay);
393-
else hideOverlay(gitterOverlay);
402+
else hideOverlay(gitterOverlay, { propagate: false });
394403
});
395404

396405
gitterOverlay.addEventListener('overlay-closed', function() {

‎docs/assets/styles.css

+37-16
Original file line numberDiff line numberDiff line change
@@ -311,8 +311,8 @@ body.dark-mode #toc a { color: #424242; }
311311
left: 0;
312312
width: calc(50% - 384px);
313313
background: #f5f5f5;
314-
transform: translateX(-110vw);
315-
transition: transform .5s, background .3s;
314+
transform: translateY(110vh);
315+
transition: transform .3s, background .3s;
316316
display: flex;
317317
flex-direction: column;
318318
}
@@ -322,7 +322,7 @@ body.dark-mode #nav {
322322
}
323323

324324
#nav.active {
325-
transform: translateX(0);
325+
transform: translateY(0);
326326
}
327327

328328
#nav .contents {
@@ -440,7 +440,11 @@ body.dark-mode #nav .search p {
440440
opacity: 0;
441441
transform: scaleX(0);
442442
transform-origin: left;
443-
transition: opacity .5s, transform .5s;
443+
transition: opacity .5s, transform .5s, background .3s;
444+
}
445+
446+
body.dark-mode #nav a::before {
447+
background: #6a1b9a;
444448
}
445449

446450
#nav a.highlight::before {
@@ -935,6 +939,11 @@ pre[copy]::after {
935939
transition: all .15s;
936940
}
937941

942+
pre:not([copy]) code:not(.processed),
943+
pre:not([copy]) code:not(.processed) * {
944+
color: transparent !important;
945+
}
946+
938947
body.dark-mode pre[copy]::after {
939948
background: #111111;
940949
}
@@ -946,30 +955,37 @@ pre[copy]:hover::after {
946955
code .line {
947956
cursor: pointer;
948957
background: transparent;
949-
transition: background .15s;
958+
transition: background .1s;
950959
position: relative;
951960
padding: 1px 0;
952961
min-width: 720px;
953962
}
954963

955964
code .line span[line-counter] {
956-
width: 32px;
965+
width: 24px;
957966
margin-right: 12px;
958967
padding-right: 12px;
959968
text-align: right;
960969
font-size: 10px;
970+
line-height: 16px;
961971
display: inline-block;
972+
color: transparent;
973+
border-right: 2px solid rgba(255, 255, 255, .015);
974+
transition: border-color .1s, color .1s;
975+
}
976+
977+
code .line span[line-counter].prim {
962978
color: #616161;
963-
transition: color .3s;
964979
}
965980

966-
body.dark-mode code .line span[line-counter] {
981+
body.dark-mode code .line span[line-counter].prim {
967982
color: #424242;
968983
}
969984

970985
code .line:hover span[line-counter],
971986
body.dark-mode code .line:hover span[line-counter] {
972-
color: #4A90E2;
987+
border-color: #7187ff;
988+
color: #7187ff;
973989
}
974990

975991
code .line.highlight {
@@ -998,7 +1014,7 @@ body.dark-mode code .line:hover {
9981014
font-family: 'Source Code Pro', 'Courier New', Courier, monospace;
9991015
}
10001016

1001-
.hljs.processed {
1017+
pre:not([copy]) code.hljs {
10021018
padding: 24px 0px;
10031019
}
10041020

@@ -1007,24 +1023,24 @@ body.dark-mode .hljs {
10071023
}
10081024

10091025
.hljs-keyword {
1010-
color: #4A90E2;
1026+
color: #7187ff;
10111027
font-weight: normal;
10121028
}
10131029

10141030
.hljs-built_in {
1015-
color: #B765FF;
1031+
color: #b388ff;
10161032
}
10171033

10181034
.hljs-subst {
10191035
color: #B8E986;
10201036
}
10211037

10221038
.hljs-number {
1023-
color: #F5A623;
1039+
color: #ffc400;
10241040
}
10251041

10261042
.hljs-literal {
1027-
color: #F5A623;
1043+
color: #ffc400;
10281044
}
10291045

10301046
.hljs-title {
@@ -1033,13 +1049,18 @@ body.dark-mode .hljs {
10331049
}
10341050

10351051
.hljs-attr {
1036-
color: #B765FF;
1052+
color: #ffea00;
10371053
}
10381054

10391055
.hljs-string {
1040-
color: #B8E986;
1056+
color: #69f0ae;
1057+
}
1058+
1059+
.func-arrow {
1060+
color: #18ffff;
10411061
}
10421062

1063+
10431064
.hljs-comment {
10441065
color: #757575;
10451066
transition: color .3s;

‎docs/check.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
<link rel="stylesheet"
1919
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
20-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
2121

2222
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
2323

@@ -33,7 +33,7 @@
3333
<body>
3434
<div id="header">
3535

36-
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star on GitHub</a>
36+
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star</a>
3737

3838
</div>
3939
<div class="container">

‎docs/composition.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
<link rel="stylesheet"
1919
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
20-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
2121

2222
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
2323

@@ -33,7 +33,7 @@
3333
<body>
3434
<div id="header">
3535

36-
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star on GitHub</a>
36+
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star</a>
3737

3838
</div>
3939
<div class="container">

‎docs/connective-v-rxjs.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
<link rel="stylesheet"
1919
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
20-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
2121

2222
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
2323

@@ -33,7 +33,7 @@
3333
<body>
3434
<div id="header">
3535

36-
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star on GitHub</a>
36+
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star</a>
3737

3838
</div>
3939
<div class="container">

‎docs/control.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
<link rel="stylesheet"
1919
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
20-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
2121

2222
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
2323

@@ -33,7 +33,7 @@
3333
<body>
3434
<div id="header">
3535

36-
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star on GitHub</a>
36+
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star</a>
3737

3838
</div>
3939
<div class="container">

‎docs/deep.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
<link rel="stylesheet"
1919
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
20-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
2121

2222
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
2323

@@ -33,7 +33,7 @@
3333
<body>
3434
<div id="header">
3535

36-
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star on GitHub</a>
36+
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star</a>
3737

3838
</div>
3939
<div class="container">

‎docs/emission.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
<link rel="stylesheet"
1919
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
20-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
2121

2222
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
2323

@@ -33,7 +33,7 @@
3333
<body>
3434
<div id="header">
3535

36-
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star on GitHub</a>
36+
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star</a>
3737

3838
</div>
3939
<div class="container">

‎docs/expr.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
<link rel="stylesheet"
1919
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
20-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
2121

2222
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
2323

@@ -33,7 +33,7 @@
3333
<body>
3434
<div id="header">
3535

36-
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star on GitHub</a>
36+
<a class="github-button" href="https://github.com/connect-platform/connective" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-show-count="true" aria-label="Star connect-platform/connective on GitHub">Star</a>
3737

3838
</div>
3939
<div class="container">

0 commit comments

Comments
 (0)
Failed to load comments.