Skip to content

Commit 9ae7533

Browse files
vkarpov15vkarpov15
committed
docs: finish up home page first pass
1 parent e374266 commit 9ae7533

File tree

6 files changed

+383
-0
lines changed

6 files changed

+383
-0
lines changed

‎.npmignore

+9
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,12 @@ gulpfile.js
33
logo.svg
44

55
package-lock.json
6+
7+
docs/*
8+
favicon.ico
9+
10+
History.md
11+
.travis.yml
12+
.gitignore
13+
HEADER.md
14+
index.html

‎docs/home.js

+23
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,27 @@ module.exports = props => `
3131
</div>
3232
</div>
3333
</div>
34+
<div class="boxes">
35+
<div id="parse">
36+
<h3>Parse Mocha Tests</h3>
37+
The core <a href="https://www.npmjs.com/package/acquit">acquit module</a>
38+
is a lightweight parser that parses BDD test syntax and comments into a
39+
usable format for plugins.
40+
</div>
41+
<div id="transpile">
42+
<h3>Transpile Tests into Markdown</h3>
43+
The <a href="https://www.npmjs.com/package/acquit-markdown">acquit-markdown plugin</a>
44+
converts BDD test files into <a href="https://en.wikipedia.org/wiki/Markdown">markdown</a>.
45+
If you already have BDD tests and comments, acquit-markdown gives you
46+
documentation with a single command.
47+
</div>
48+
<div id="include">
49+
<h3>Import Test Code into HTML</h3>
50+
The <a href="https://www.npmjs.com/package/acquit-require">acquit-require plugin</a>
51+
lets you import the source code of a BDD test into HTML or markdown. Take
52+
your existing documentation, move the examples to a test file, and let your
53+
test runner verify your examples.
54+
</div>
55+
<div style="clear:both"></div>
56+
</div>
3457
`.trim();

‎docs/layout.js

+43
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,56 @@ module.exports = props => `
88
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
99
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
1010
<link href="/docs/style.css" rel="stylesheet">
11+
12+
<script type="text/javascript" src="/docs/native.js"></script>
1113
</head>
1214
1315
<body>
1416
${navbar(props)}
1517
<div class="content">
1618
${props.content}
1719
</div>
20+
<script type="text/javascript">
21+
_native.init("CK7DT53Y", {
22+
targetClass: 'native-js',
23+
display: 'flex',
24+
visibleClass: 'native-show'
25+
});
26+
</script>
27+
<div class="native-js">
28+
<div class="native-sponsor">Sponsored by #native_company# — Learn More</div>
29+
<a href="#native_link#" class="native-flex">
30+
<style>
31+
.native-js {
32+
background: linear-gradient(-30deg, #native_bg_color#E5, #native_bg_color#E5 45%, #native_bg_color# 45%) #fff;
33+
}
34+
.native-details,
35+
.native-sponsor,
36+
.native-bsa {
37+
color: #native_color# !important;
38+
}
39+
.native-details:hover {
40+
color: #native_color_hover# !important;
41+
}
42+
.native-cta {
43+
color: #native_cta_color#;
44+
background-color: #native_cta_bg_color#;
45+
}
46+
.native-cta:hover {
47+
color: #native_cta_color_hover;
48+
background-color: #native_cta_bg_color_hover#;
49+
}
50+
</style>
51+
<div class="native-main">
52+
<img class="native-img" src="#native_logo#">
53+
<div class="native-details">
54+
<span class="native-company">#native_title#</span>
55+
<span class="native-desc">#native_desc#</span>
56+
</div>
57+
</div>
58+
<span class="native-cta">#native_cta#</span>
59+
</a>
60+
</div>
1861
</body>
1962
</html>
2063
`.trim();

‎docs/native.js

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
var _native = {
2+
construct: function(e) {
3+
var default_options = {
4+
display: "block",
5+
fallback: "",
6+
placement: "",
7+
prefix: "native",
8+
targetClass: "native-ad",
9+
visibleClass: "native-show"
10+
};
11+
12+
if (typeof e == "undefined") return default_options;
13+
Object.keys(default_options).forEach((key, index) => {
14+
if (typeof e[key] == "undefined") {
15+
e[key] = default_options[key];
16+
}
17+
});
18+
return e;
19+
},
20+
init: function(zone, options) {
21+
options = this.construct(options);
22+
this.className = options["targetClass"];
23+
this.displayStyle = options["display"];
24+
this.fallback = options["fallback"];
25+
this.visibleClassName = options["visibleClass"];
26+
this.prefix = options["prefix"];
27+
this.placement = options["placement"];
28+
29+
let jsonUrl = `https://srv.buysellads.com/ads/${zone}.json?callback=_native_go`;
30+
if (options["placement"] !== "") {
31+
jsonUrl += "&segment=placement:" + options["placement"];
32+
}
33+
34+
let srv = document.createElement("script");
35+
srv.src = jsonUrl;
36+
document.getElementsByTagName("head")[0].appendChild(srv);
37+
},
38+
sanitize: function(ads) {
39+
return ads
40+
.filter(ad => {
41+
return Object.keys(ad).length > 0;
42+
})
43+
.filter(ad => {
44+
return ad.hasOwnProperty("statlink");
45+
});
46+
},
47+
pixel: function(p, timestamp) {
48+
let c = "";
49+
if (p)
50+
p.split("||").forEach((pixel, index) => {
51+
c += '<img src="' + pixel.replace("[timestamp]", timestamp) + '" style="display:none;" height="0" width="0" />';
52+
});
53+
return c;
54+
}
55+
};
56+
57+
var _native_go = function(json) {
58+
let ads = _native.sanitize(json["ads"]);
59+
60+
if (ads.length < 1) {
61+
document.querySelectorAll("." + _native.className).forEach((className, index) => {
62+
document.getElementsByClassName(_native.className)[index].innerHTML = _native.fallback;
63+
if (_native.fallback !== "") document.getElementsByClassName(_native.className)[index].className += " " + _native.visibleClassName;
64+
});
65+
66+
return "No ads found";
67+
}
68+
69+
document.querySelectorAll("." + _native.className).forEach((className, index) => {
70+
if (ads[index] && className) {
71+
let adElement = document.getElementsByClassName(_native.className)[index].innerHTML;
72+
73+
let ad = adElement
74+
.replace(new RegExp("#" + _native.prefix + "_bg_color#", "g"), ads[index]["backgroundColor"])
75+
.replace(new RegExp("#" + _native.prefix + "_bg_color_hover#", "g"), ads[index]["backgroundHoverColor"])
76+
.replace(new RegExp("#" + _native.prefix + "_company#", "g"), ads[index]["company"])
77+
.replace(new RegExp("#" + _native.prefix + "_cta#", "g"), ads[index]["callToAction"])
78+
.replace(new RegExp("#" + _native.prefix + "_cta_bg_color#", "g"), ads[index]["ctaBackgroundColor"])
79+
.replace(new RegExp("#" + _native.prefix + "_cta_bg_color_hover#", "g"), ads[index]["ctaBackgroundHoverColor"])
80+
.replace(new RegExp("#" + _native.prefix + "_cta_color#", "g"), ads[index]["ctaTextColor"])
81+
.replace(new RegExp("#" + _native.prefix + "_cta_color_hover#", "g"), ads[index]["ctaTextColorHover"])
82+
.replace(new RegExp("#" + _native.prefix + "_desc#", "g"), ads[index]["description"])
83+
.replace(new RegExp("#" + _native.prefix + "_index#", "g"), _native.prefix + "-" + ads[index]["i"])
84+
.replace(new RegExp("#" + _native.prefix + "_img#", "g"), ads[index]["image"])
85+
.replace(new RegExp("#" + _native.prefix + "_link#", "g"), ads[index]["statlink"])
86+
.replace(new RegExp("#" + _native.prefix + "_logo#", "g"), ads[index]["logo"])
87+
.replace(new RegExp("#" + _native.prefix + "_color#", "g"), ads[index]["textColor"])
88+
.replace(new RegExp("#" + _native.prefix + "_color_hover#", "g"), ads[index]["textColorHover"])
89+
.replace(new RegExp("#" + _native.prefix + "_title#", "g"), ads[index]["title"]);
90+
91+
document.getElementsByClassName(_native.className)[index].innerHTML = null;
92+
document.getElementsByClassName(_native.className)[index].innerHTML += ad + _native.pixel(ads[index]["pixel"], ads[index]["timestamp"]);
93+
document.getElementsByClassName(_native.className)[index].style.display = _native.displayStyle;
94+
if (_native.className !== "") document.getElementsByClassName(_native.className)[index].className += " " + _native.visibleClassName;
95+
} else {
96+
document.getElementsByClassName(_native.className)[index].innerHTML = null;
97+
document.getElementsByClassName(_native.className)[index].style.display = "none";
98+
}
99+
});
100+
};

‎docs/style.css

+142
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ header {
7979
width: 1000px;
8080
margin-left: auto;
8181
margin-right: auto;
82+
height: 300px;
8283
}
8384

8485
.hero .left {
@@ -89,6 +90,7 @@ header {
8990
.hero .right {
9091
float: left;
9192
width: 680px;
93+
height: 300px;
9294
}
9395

9496
.hero .right .tagline {
@@ -122,3 +124,143 @@ header {
122124
.hero .social {
123125
margin-top: 0.5em;
124126
}
127+
128+
.boxes {
129+
width: 1000px;
130+
margin-left: auto;
131+
margin-right: auto;
132+
margin-top: 100px;
133+
line-height: 1.5em;
134+
margin-bottom: 50px;
135+
}
136+
137+
.boxes div {
138+
width: 290px;
139+
margin-right: 30px;
140+
float: left;
141+
}
142+
143+
/* CPC ads */
144+
145+
.native-js {
146+
visibility: hidden;
147+
transition: all .25s ease-in-out;
148+
opacity: 0;
149+
flex-flow: column nowrap;
150+
transform: translateY(calc(100% - 35px));
151+
}
152+
153+
.native-show {
154+
visibility: visible;
155+
position: fixed;
156+
width: 100%;
157+
bottom: 0;
158+
box-shadow: 0 -1px 4px 1px hsla(0, 0%, 0%, .15);
159+
opacity: 1;
160+
z-index: 10;
161+
}
162+
163+
.native-show:hover {
164+
transform: translateY(0);
165+
}
166+
167+
.native-img {
168+
margin-right: 20px;
169+
max-height: 50px;
170+
border-radius: 3px;
171+
width: auto;
172+
}
173+
174+
.native-sponsor {
175+
margin: 10px 20px;
176+
text-align: center;
177+
text-transform: uppercase;
178+
transform-origin: left;
179+
letter-spacing: .5px;
180+
transition: all .3s ease-in-out;
181+
font-size: 12px;
182+
}
183+
184+
.native-show:hover .native-sponsor {
185+
transform: scaleY(0);
186+
margin: 0 20px;
187+
opacity: 0;
188+
}
189+
190+
.native-flex {
191+
display: flex;
192+
padding: 20px 20px 40px;
193+
text-decoration: none;
194+
195+
flex-flow: row nowrap;
196+
justify-content: space-between;
197+
align-items: center;
198+
}
199+
200+
.native-main {
201+
display: flex;
202+
203+
flex-flow: row nowrap;
204+
align-items: center;
205+
}
206+
207+
.native-details {
208+
display: flex;
209+
margin-right: 30px;
210+
211+
flex-flow: column nowrap;
212+
}
213+
214+
.native-company {
215+
margin-bottom: 4px;
216+
text-transform: uppercase;
217+
letter-spacing: 2px;
218+
font-size: 10px;
219+
}
220+
221+
.native-desc {
222+
letter-spacing: 1px;
223+
font-weight: 300;
224+
line-height: 1.4;
225+
}
226+
227+
.native-cta {
228+
padding: 10px 14px;
229+
border-radius: 3px;
230+
box-shadow: 0 6px 13px 0 hsla(0, 0%, 0%, .15);
231+
text-transform: uppercase;
232+
white-space: nowrap;
233+
letter-spacing: 1px;
234+
font-weight: 400;
235+
font-size: 12px;
236+
transition: all .3s ease-in-out;
237+
transform: translateY(-1px);
238+
}
239+
240+
.native-cta:hover {
241+
box-shadow: none;
242+
transform: translateY(1px);
243+
}
244+
245+
@media only screen and (min-width: 320px) and (max-width: 759px) {
246+
.native-flex {
247+
flex-wrap: wrap;
248+
flex-direction: column;
249+
}
250+
251+
.native-img {
252+
margin: 0;
253+
}
254+
255+
.native-details {
256+
margin: 0;
257+
}
258+
259+
.native-main {
260+
margin-bottom: 20px;
261+
flex-wrap: wrap;
262+
flex-direction: column;
263+
text-align: center;
264+
align-content: center;
265+
}
266+
}

0 commit comments

Comments
 (0)