Skip to content

Commit 7135588

Browse files
forstisabellaforstisabella
committed
Added scripts for each call in spec
1 parent 6baa4e4 commit 7135588

File tree

7 files changed

+436
-140
lines changed

7 files changed

+436
-140
lines changed

‎src/_sass/components/_prisim.scss

Lines changed: 129 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,129 @@
1-
/**
2-
* prism.js default theme for JavaScript, CSS and HTML
3-
* Based on dabblet (http://dabblet.com)
4-
* @author Lea Verou
5-
*/
6-
7-
code[class*="language-"],
8-
pre[class*="language-"] {
9-
color: black;
10-
text-shadow: 0 1px white;
11-
font-family: Consolas, Monaco, 'Andale Mono', monospace;
12-
direction: ltr;
13-
text-align: left;
14-
white-space: pre;
15-
word-spacing: normal;
16-
word-break: normal;
17-
line-height: 1.5;
18-
19-
-moz-tab-size: 4;
20-
-o-tab-size: 4;
21-
tab-size: 4;
22-
23-
-webkit-hyphens: none;
24-
-moz-hyphens: none;
25-
-ms-hyphens: none;
26-
hyphens: none;
27-
}
28-
29-
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
30-
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
31-
text-shadow: none;
32-
background: #eceef0;
33-
}
34-
35-
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
36-
code[class*="language-"]::selection, code[class*="language-"] ::selection {
37-
text-shadow: none;
38-
background: #eceef0;
39-
}
40-
41-
@media print {
42-
code[class*="language-"],
43-
pre[class*="language-"] {
44-
text-shadow: none;
45-
}
46-
}
47-
48-
/* Code blocks */
49-
pre[class*="language-"] {
50-
padding: 1em;
51-
margin: .5em 0;
52-
overflow: auto;
53-
}
54-
55-
:not(pre) > code[class*="language-"],
56-
pre[class*="language-"] {
57-
background: #eceef0;
58-
}
59-
60-
/* Inline code */
61-
:not(pre) > code[class*="language-"] {
62-
padding: .1em;
63-
border-radius: .3em;
64-
}
65-
66-
.token.comment,
67-
.token.prolog,
68-
.token.doctype,
69-
.token.cdata {
70-
color: #474d66;
71-
}
72-
73-
.token.punctuation {
74-
color: #474d66;
75-
}
76-
77-
.namespace {
78-
opacity: .7;
79-
}
80-
81-
.token.property,
82-
.token.tag,
83-
.token.boolean,
84-
.token.number,
85-
.token.constant,
86-
.token.symbol,
87-
.token.deleted {
88-
color: #d52039;
89-
}
90-
91-
.token.selector,
92-
.token.attr-name,
93-
.token.string,
94-
.token.char,
95-
.token.builtin,
96-
.token.inserted {
97-
color: #6fba97;
98-
}
99-
100-
.token.operator,
101-
.token.entity,
102-
.token.url,
103-
.language-css .token.string,
104-
.style .token.string {
105-
color: #f89c56;
106-
background: #eceef0;
107-
}
108-
109-
.token.atrule,
110-
.token.attr-value,
111-
.token.keyword {
112-
color: #2e98df;
113-
}
114-
115-
.token.function {
116-
color: #ff678d;
117-
}
118-
119-
.token.regex,
120-
.token.important,
121-
.token.variable {
122-
color: #f89c56;
123-
}
124-
125-
.token.important,
126-
.token.bold {
127-
font-weight: bold;
128-
}
129-
.token.italic {
130-
font-style: italic;
131-
}
132-
133-
.token.entity {
134-
cursor: help;
135-
}
1+
code[class*="language-"],
2+
pre[class*="language-"] {
3+
color: black;
4+
text-shadow: 0 1px white;
5+
font-family: Consolas, Monaco, 'Andale Mono', monospace;
6+
direction: ltr;
7+
text-align: left;
8+
white-space: pre;
9+
word-spacing: normal;
10+
word-break: normal;
11+
line-height: 1.5;
12+
13+
-moz-tab-size: 4;
14+
-o-tab-size: 4;
15+
tab-size: 4;
16+
17+
-webkit-hyphens: none;
18+
-moz-hyphens: none;
19+
-ms-hyphens: none;
20+
hyphens: none;
21+
}
22+
23+
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
24+
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
25+
text-shadow: none;
26+
background: #b3d4fc;
27+
}
28+
29+
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
30+
code[class*="language-"]::selection, code[class*="language-"] ::selection {
31+
text-shadow: none;
32+
background: #b3d4fc;
33+
}
34+
35+
@media print {
36+
code[class*="language-"],
37+
pre[class*="language-"] {
38+
text-shadow: none;
39+
}
40+
}
41+
42+
/* Code blocks */
43+
pre[class*="language-"] {
44+
padding: 1em;
45+
margin: .5em 0;
46+
overflow: auto;
47+
}
48+
49+
:not(pre) > code[class*="language-"],
50+
pre[class*="language-"] {
51+
background: #f5f2f0;
52+
}
53+
54+
/* Inline code */
55+
:not(pre) > code[class*="language-"] {
56+
padding: .1em;
57+
border-radius: .3em;
58+
}
59+
60+
.token.comment,
61+
.token.prolog,
62+
.token.doctype,
63+
.token.cdata {
64+
color: slategray;
65+
}
66+
67+
.token.punctuation {
68+
color: #999;
69+
}
70+
71+
.namespace {
72+
opacity: .7;
73+
}
74+
75+
.token.property,
76+
.token.tag,
77+
.token.boolean,
78+
.token.number,
79+
.token.constant,
80+
.token.symbol,
81+
.token.deleted {
82+
color: #905;
83+
}
84+
85+
.token.selector,
86+
.token.attr-name,
87+
.token.string,
88+
.token.char,
89+
.token.builtin,
90+
.token.inserted {
91+
color: #690;
92+
}
93+
94+
.token.operator,
95+
.token.entity,
96+
.token.url,
97+
.language-css .token.string,
98+
.style .token.string {
99+
color: #a67f59;
100+
background: hsla(0, 0%, 100%, .5);
101+
}
102+
103+
.token.atrule,
104+
.token.attr-value,
105+
.token.keyword {
106+
color: #07a;
107+
}
108+
109+
.token.function {
110+
color: #DD4A68;
111+
}
112+
113+
.token.regex,
114+
.token.important,
115+
.token.variable {
116+
color: #e90;
117+
}
118+
119+
.token.important,
120+
.token.bold {
121+
font-weight: bold;
122+
}
123+
.token.italic {
124+
font-style: italic;
125+
}
126+
127+
.token.entity {
128+
cursor: help;
129+
}

‎src/connections/spec/best-practices-identify.md

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ analytics.page({
5959
```
6060

6161
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js" integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
62-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism.css" integrity="sha512-EaMmVtm5YHQNg4u9UXGOueWP6nyUtCpKZojcE4Rqt/6ifpzzzuQVMTffvo8FVj4xDG04gIyWm1z1b7GqELl1eQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
62+
<link href="/src/_sass/components/_prisim.scss"/>
6363
<script type="text/javascript">
6464
function showMessage(){
6565
var email = document.getElementById("email").value;
@@ -100,11 +100,8 @@ analytics.page({
100100

101101
<div class="output">
102102
<h3>Sample Identify Call</h3>
103-
<!-- <div class="output-code" id="output-code" style="display:none"> -->
104103
<pre class="language-javascript"><code class="language-javascript" id="output_container">
105-
106104
</code></pre>
107-
<!-- </div> -->
108105
</div>
109106
</div>
110107

‎src/connections/spec/group.md

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,84 @@ Here's a complete example of a `group` call:
8181
}
8282
```
8383

84+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js" integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
85+
<link rel="stylesheet" href="/src/_sass/components/_prisim.scss"/>
86+
<script type="text/javascript">
87+
function showMessage(){
88+
var name = document.getElementById("name").value;
89+
var industry = document.getElementById("industry").value;
90+
var employees = document.getElementById("employees").value;
91+
var plan = document.getElementById("plan").value;
92+
var totalBilled = document.getElementById("totalBilled").value;
93+
var output = `{
94+
"anonymousId": "507f191e810c19729de860ea",
95+
"channel": "browser",
96+
"context": {
97+
"ip": "8.8.8.8",
98+
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36"
99+
},
100+
"integrations": {
101+
"All": true,
102+
"Mixpanel": false,
103+
"Salesforce": false
104+
},
105+
"messageId": "022bb90c-bbac-11e4-8dfc-aa07a5b093db",
106+
"receivedAt": "2015-02-23T22:28:55.387Z",
107+
"sentAt": "2015-02-23T22:28:55.111Z",
108+
"timestamp": "2015-02-23T22:28:55.111Z",
109+
"traits": {
110+
"name": "${name}",
111+
"industry": "${industry}",
112+
"employees": ${employees},
113+
"plan": "${plan}",
114+
"total billed": ${totalBilled}
115+
},
116+
"type": "group",
117+
"userId": "97980cfea0067",
118+
"groupId": "0e8c78ea9d97a7b8185e8632",
119+
"version": "1.1"
120+
}`
121+
output_container.innerHTML = output
122+
Prism.highlightElement(output_container)
123+
}
124+
</script>
125+
<script>
126+
function showOutput() {
127+
var show = document.getElementById("output-code");
128+
if (show.style.display === "block") {
129+
show.style.display = "none";
130+
} else {
131+
show.style.display = "block";
132+
}
133+
}
134+
</script>
135+
136+
<div class="sample-code-container">
137+
<div class="form">
138+
<h3> Sample Group </h3>
139+
<p><b>See what your group call looks like</b></p>
140+
<label for="name">Name:</label>
141+
<input type="text" id="name"><br>
142+
<label for="industry">Title:</label>
143+
<input type="text" id="industry"><br>
144+
<label for="employees">Employees:</label>
145+
<input type="text" id="employees"><br>
146+
<label for="plan">Plan:</label>
147+
<input type="text" id="plan"><br>
148+
<label for="totalBilled">Total Billed:</label>
149+
<input type="text" id="totalBilled"><br>
150+
<input type="submit" id="submit" onclick="showMessage(); showOutput()" value="See a sample page call">
151+
</div>
152+
</div>
153+
154+
<div class="output">
155+
<h3>Sample Group Call</h3>
156+
<pre class="language-javascript"><code class="language-javascript" id="output_container">
157+
158+
</code></pre>
159+
</div>
160+
</div>
161+
84162
## Identities
85163

86164
{% include content/spec-identities.md %}

0 commit comments

Comments
 (0)