Skip to content
This repository was archived by the owner on Aug 18, 2020. It is now read-only.

Commit f6afd76

Browse files
sebinsidesebinside
committed
Close #22. Finished README files. Only took 5 months.
1 parent 40b7a97 commit f6afd76

File tree

2 files changed

+432
-27
lines changed

2 files changed

+432
-27
lines changed

‎deployment-files/end-user/README.html

Lines changed: 150 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<title>Chat Overflow README</title>
6-
<script crossorigin="anonymous"
7-
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
7+
<script crossorigin="anonymous" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
88
src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
99

1010
<!-- IMPORTANT: Only update the end-user README.file. Then plugin-dev README has to be overwritten with changed styling. -->
@@ -21,7 +21,7 @@
2121
<!-- IMPORTANT: UPDATE THE VERSION NUMBERS HERE, FOLLOWING THE DISPLAYED VERSIONS ON STARTUP -->
2222
<script>
2323
const versions = {
24-
framework: "0.0.0",
24+
framework: "3.0.0",
2525
api: "3.0.0",
2626
rest: "3.0.0-3",
2727
npm: "3.0.0-3",
@@ -56,75 +56,112 @@
5656
#newVersionAvailable {
5757
display: none;
5858
}
59+
5960
body {
6061
text-align: center;
6162
padding-top: 25px;
6263
font-family: sans-serif;
64+
background: #2B2B2B;
65+
color: #EEE;
6366
}
67+
6468
.deploymentType {
65-
margin-top: 5px;
66-
background: lightgray;
67-
width:fit-content;
69+
margin-top: 15px;
70+
background: rgb(77, 77, 77);
71+
width: fit-content;
6872
font-family: monospace;
6973
padding: 5px;
7074
border-radius: 3px;
75+
font-weight: bold;
76+
box-shadow: 10px 10px 5px -6px rgba(0, 0, 0, 0.75);
7177
}
78+
7279
#deploymentEndUser {
73-
color: darkgreen
80+
color: #F8721E
7481
}
82+
7583
#deploymentPluginDev {
76-
color: darkblue
84+
color: #0486FF
7785
}
86+
7887
.smallVersions {
7988
font-size: small;
8089
}
81-
.versionNumber, #newerVersion {
90+
91+
.versionNumber,
92+
#newerVersion {
93+
font-family: monospace;
94+
}
95+
96+
.code {
8297
font-family: monospace;
98+
font-size: large;
8399
}
100+
84101
.divider {
85102
border-top: 2px solid gray;
86-
margin-top:15px;
103+
margin-top: 15px;
87104
margin-bottom: 30px;
88105
}
89-
.mainContent, .divider {
106+
107+
.mainContent,
108+
.divider {
90109
width: 600px;
91110
display: inline-block;
92111
text-align: left;
112+
line-height: 150%;
93113
}
114+
94115
h1 {
95116
font-size: 18pt;
96117
margin-top: 15px;
97118
margin-bottom: 5px;
119+
color: #F8721E;;
98120
}
121+
99122
.signature {
100123
font-style: italic;
101124
font-size: small;
102125
}
126+
103127
#newVersionAvailable {
104128
font-style: italic;
105129
font-size: small;
106130
}
131+
107132
a {
108-
color: rgb(255, 136, 0);
133+
color: #F8721E;
134+
}
135+
136+
#headerLogo {
137+
box-shadow: 10px 10px 5px -6px rgba(0, 0, 0, 0.75);
138+
margin-bottom: 5px;
139+
}
140+
141+
.highlight {
142+
color: #F8721E;
143+
font-weight: bold;
109144
}
110145
</style>
111146
</head>
147+
112148
<body>
113149
<div class="header">
114-
<div><img alt="Chat Overflow logo"
150+
<div><img id="headerLogo" alt="Chat Overflow logo"
115151
src="https://raw.githubusercontent.com/codeoverflow-org/chatoverflow/master/chatoverflow-logo.png"
116152
width="350px"></div>
117153
</div>
118154

119155
<div class="version">
120-
156+
121157
<div class="smallVersions">
122158
API: <span class="versionNumber" id="apiVersion"></span>
123159
REST: <span class="versionNumber" id="restVersion"></span>
124160
NPM: <span class="versionNumber" id="npmVersion"></span>
125161
GUI: <span class="versionNumber" id="guiVersion"></span>
126162
</div>
127-
<div id="newVersionAvailable">A newer version (<span id="newerVersion"></span>) is available. <a href="https://github.com/codeoverflow-org/chatoverflow/releases">Download</a>
163+
<div id="newVersionAvailable">A newer version (<span id="newerVersion"></span>) is available. <a
164+
href="https://github.com/codeoverflow-org/chatoverflow/releases">Download</a>
128165
</div>
129166
</div>
130167

@@ -138,22 +175,108 @@
138175
<div>&nbsp;</div>
139176

140177
<div class="mainContent">
141-
<div id="downloadInfo">Thank you for downloading <b>Chat Overflow <span id="frameworkVersion"></span></b>! For more information, please visit <a
142-
href="http://codeoverflow.org">codeoverflow.org</a> or join our <a href="https://discord.gg/p2HDsme">discord
143-
server</a>. We're always happy about bug reports and feature requests. Have fun! <span class="signature">- The Code Overflow Team</span>
144-
</div>
145-
<h1>Introduction</h1>
146-
<div id="description">Code Overflow Motivation / Description</div>
147-
<h1>How to use</h1>
148-
<div class="onlyEndUser" id="shortTutorialEndUser">TODO</div>
149-
<div class="onlyPluginDev" id="shortTutorialPluginDev">TODO</div>
150-
<h1>More information</h1>
151-
<div class="onlyEndUser" id="helpfulLinksEndUser">TODO</div>
152-
<div class="onlyPluginDev" id="helpfulLinksPluginDev">TODO</div>
178+
<div id="downloadInfo">Thank you for downloading <b>Chat Overflow <span id="frameworkVersion"></span></b>! For
179+
more information, please visit <a href="http://codeoverflow.org">codeoverflow.org</a> or join our <a
180+
href="https://discord.gg/p2HDsme">discord
181+
server</a>. We're always happy about bug reports and feature requests. Have fun! <span
182+
class="signature">- The Code Overflow Team</span>
183+
</div>
184+
<h1>Introduction</h1>
185+
<div id="description">
186+
<!-- Just copy paste the first part / abstract of the github page -->
187+
What if you could combine the power of
188+
189+
<ul>
190+
<li>Chat bots like nightbot, moobot and botler</li>
191+
<li>Supporting services like StreamElements, Streamlabs, TipeeeStream, Loots and</li>
192+
<li>Social Media and Chat software, e.g. Twitter, Discord, YouTube etc.</li>
193+
</ul>
194+
195+
with your interactive chat in your livestream. What if you could easily react on events, e.g.
196+
197+
<ul>
198+
<li><span class="highlight">Share</span> your new subscribers on twitter</li>
199+
<li><span class="highlight">Control</span> your studio's lighting colors through chat messages</li>
200+
<li><span class="highlight">Post</span> an user's cheer on your minecraft server</li>
201+
<li><span class="highlight">Upload</span> a youtube video with stream highlights when your stream stops
202+
</li>
203+
</ul>
204+
205+
and so much more. We know, there is IFTTT. But sometimes, building blocks are to generic and services aren't
206+
optimized for your streaming environment.
207+
<br><br>
208+
The alternative: Develop everything by yourself and waste hundreds of hours with API-integration. We already
209+
solved this problem for you. This is <span class="highlight">Chat Overflow</span>!
210+
</div>
211+
212+
<h1>How to use</h1>
213+
<div class="onlyEndUser" id="shortTutorialEndUser">
214+
Using Chat Overflow is simple. We already prepared executable files for Windows, Mac OS and linux. Just for
215+
you!
216+
217+
<ol>
218+
<li>If you are on Windows, execute <span class="code">ChatOverflow.bat</span>. If you are on an UNIX
219+
operating system like MacOS or Linux execute <span class="code">ChatOverflow.sh</span>.
220+
</li>
221+
<li>Wait for the launcher to download all dependencies.</li>
222+
<li>The framework starts when everything is ready.</li>
223+
<li>Head over to the Better REPL&trade; (Work in Progress GUI), located here (by default): <a
224+
href="http://localhost:2400">http://localhost:2400</a>.
225+
</li>
226+
</ol>
227+
228+
</div>
229+
<div class="onlyPluginDev" id="shortTutorialPluginDev">
230+
This version of Chat Overflow is optimized for plugin development. There are 3 important steps when you want to
231+
create and implement a new Chat Overflow plugin:
232+
233+
<ol>
234+
<li>Create a new plugin project with the commands of the framework</li>
235+
<li>Implement the pluggable construct</li>
236+
<li>Implement the plugin with own logic</li>
237+
</ol>
238+
239+
Please see the full tutorial in our <a
240+
href="https://github.com/codeoverflow-org/chatoverflow/wiki/Writing-a-plugin">wiki</a>!
241+
242+
</div>
243+
<h1>More information</h1>
244+
<div class="onlyEndUser" id="helpfulLinksEndUser">
245+
Here are some helpful links to our wiki:
246+
247+
<ul>
248+
<li>How to use the Work in Progress GUI: <a
249+
href="https://github.com/codeoverflow-org/chatoverflow/wiki/Using-the-GUI">Better REPL&trade;
250+
Tutorial</a></li>
251+
<li>More options are available through the <a
252+
href="https://github.com/codeoverflow-org/chatoverflow/wiki/Using-the-CLI">CLI</a></li>
253+
<li><a href="https://github.com/codeoverflow-org/chatoverflow/wiki/Frequent-Issues">Frequent issues</a>
254+
</li>
255+
</ul>
256+
</div>
257+
<div class="onlyPluginDev" id="helpfulLinksPluginDev">
258+
Here are some helpful links to our wiki:
259+
260+
<ul>
261+
<li>How to use the Work in Progress GUI: <a
262+
href="https://github.com/codeoverflow-org/chatoverflow/wiki/Using-the-GUI">Better REPL&trade;
263+
Tutorial</a></li>
264+
<li>How to write plugins, the <a
265+
href="https://github.com/codeoverflow-org/chatoverflow/wiki/Writing-a-plugin">full tutorial</a></li>
266+
<li><a href="https://github.com/codeoverflow-org/chatoverflow/wiki/Frequent-Issues">Frequent issues</a>
267+
</li>
268+
</ul>
269+
</div>
153270

154271
</div>
272+
<div>&nbsp;</div>
273+
274+
<div class="divider"></div>
275+
276+
<div>&nbsp;</div>
155277
<script type="text/javascript">
156278
updateVersions();
157279
</script>
158280
</body>
281+
159282
</html>

0 commit comments

Comments
 (0)