Cohoard/index.html at gh-pages · a2aaron/Cohoard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cohoard - Format Chatlogs for Cohost</title>
  <script src="./index.js" type="module"></script>
  <link rel="stylesheet" href="style.css">
  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
  <link rel="manifest" href="site.webmanifest">
</head>

<body>
  <f-col class="gap-1">
    <h1>
      Cohoard - Format Chatlogs for Cohost
    </h1>
    <main class="gap-1">
      <f-col id="editing-column" class="gap-1">
        <div>
          <textarea
                    id="script">@ Today
EGGBUG: welcome to Cohoard!
EGGBUG: use Cohoard to format your chatlogs like Discord conversations, Twitter threads, and more!
EGGBUG: the text area in the upper left holds your chatlog, formatted like a play script!
EGGBUG: the table in the lower left configures how the people speaking in your post will look! you can customize things like their display name, their avatar color, and their avatar
@ Tomorrow
EGGBUG: when you're happy with how everything looks, click the "HTML" button above the preview window. it'll switch the preview window to a raw HTML view you can post to Cohost!</textarea>
        </div>
        <f-col class="gap-1">
          <div id="config-wrapper"></div>
          <button id="cleanup-btn">Remove Empty Rows & Columns</button>
        </f-col>
        <select id="add-person-select">
          <option value="add-row">--- Add A Row Preset ---</option>
          <optgroup label="Cohost">
            <option value="cohost-random">Random Cohost Default Avatar</option>
            <option value="cohost-eggbug">Eggbug</option>
            <option value="cohost-bugegg">Bugegg</option>
          </optgroup>
          <!-- <optgroup label="Undertale">
            <option value="undertale-flowey">Flowey</option>
          </optgroup> -->
          <optgroup label="Homestuck - Beta Kids">
            <option value="homestuck-john">John Egbert</option>
            <option value="homestuck-john2">John Egbert (ghostyTrickster)</option>
            <option value="homestuck-rose">Rose Lalonde</option>
            <option value="homestuck-dave">Dave Strider</option>
            <option value="homestuck-jade">Jade Harley</option>
          </optgroup>
          <optgroup label="Homestuck - Alpha Kids">
            <option value="homestuck-jane">Jane Crocker</option>
            <option value="homestuck-dirk">Dirk Strider</option>
            <option value="homestuck-roxy">Roxy Lalonde</option>
            <option value="homestuck-jake">Jake English</option>
          </optgroup>
          <optgroup label="Homestuck - Beta Trolls">
            <option value="homestuck-karkat">Karkat Vantas</option>
            <option value="homestuck-aradia">Aradia Megido</option>
            <option value="homestuck-tavros">Tavros Nitram</option>
            <option value="homestuck-sollux">Sollux Captor</option>
            <option value="homestuck-nepeta">Nepeta Leijon</option>
            <option value="homestuck-kanaya">Kanaya Maryam</option>
            <option value="homestuck-terezi">Terezi Pyrope</option>
            <option value="homestuck-vriska">Vriska Serket</option>
            <option value="homestuck-equius">Equius Zahhak</option>
            <option value="homestuck-gamzee">Gamzee Makara</option>
            <option value="homestuck-eridan">Eridan Ampora</option>
            <option value="homestuck-feferi">Feferi Peixes</option>
          </optgroup>
          <optgroup label="Homestuck - Alpha Trolls">
            <option value="homestuck-kankri">Kankri Vantas</option>
            <option value="homestuck-damara">Damara Megido</option>
            <option value="homestuck-rufioh">Rufioh Nitram</option>
            <option value="homestuck-mituna">Mituna Captor</option>
            <option value="homestuck-meulin">Meulin Leijon</option>
            <option value="homestuck-porrim">Porrim Maryam</option>
            <option value="homestuck-latula">Latula Pyrope</option>
            <option value="homestuck-aranea">Aranea Serket</option>
            <option value="homestuck-horuss">Horuss Zahhak</option>
            <option value="homestuck-kurloz">Kurloz Makara</option>
            <option value="homestuck-cronus">Cronus Ampora</option>
            <option value="homestuck-meenah">Meenah Peixes</option>
          </optgroup>
          <optgroup label="Homestuck - Other">
            <option value="homestuck-docscratch">Doc Scratch</option>
            <option value="homestuck-condesce">The Condesce</option>
            <option value="homestuck-calliope">Calliope</option>
            <option value="homestuck-caliborn">Caliborn</option>
          </optgroup>
          <optgroup label="corru.observer">
            <option value="corru-interloper">The Interloper</option>
            <option value="corru-mindspike">The Mindspike</option>
            <option value="corru-moth">Moth</option>
            <option value="corru-funfriend">Funfriend</option>
            <option value="corru-akizet">Akizetesche</option>
            <option value="corru-bozko">Bozko</option>
            <option value="corru-cavik">Cavik</option>
            <option value="corru-gakvu">Gakvu</option>
            <option value="corru-kazki">Kazki</option>
            <option value="corru-tozik">Tozik</option>
            <option value="corru-movefriend">Movefriend</option>
            <option value="corru-barfriend">Barfriend</option>
            <option value="corru-velzie">Velzie</option>
            <option value="corru-god">God</option>
            <option value="corru-bstrd">bstrd</option>
          </optgroup>
          <optgroup label="17776">
            <option value="17776-nine">Nine</option>
            <option value="17776-ten">Ten</option>
            <option value="17776-juice">Juice</option>
            <option value="20020-nine">Nine (20020)</option>
            <option value="20020-ten">Ten (20020)</option>
            <option value="20020-juice">Juice (20020)</option>
          </optgroup>
          <optgroup label="Discord Defaults">
            <option value="discord-red">Discord Red</option>
            <option value="discord-yellow">Discord Yellow</option>
            <option value="discord-green">Discord Green</option>
            <option value="discord-blue">Discord Blue</option>
            <option value="discord-grey">Discord Grey</option>
          </optgroup>
          <optgroup label="Twitter Defaults">
            <option value="twitter-person-grey">Twitter Person Grey</option>
            <option value="twitter-egg-red">Twitter Egg Red</option>
            <option value="twitter-egg-orange">Twitter Egg Orange</option>
            <option value="twitter-egg-yellow">Twitter Egg Yellow</option>
            <option value="twitter-egg-green">Twitter Egg Green</option>
            <option value="twitter-egg-blue">Twitter Egg Blue</option>
            <option value="twitter-egg-purple">Twitter Egg Purple</option>
            <option value="twitter-egg-grey">Twitter Egg Grey</option>
          </optgroup>
          <optgroup label="Utility">
            <option value="utility-black">Solid Black Avatar</option>
            <option value="utility-white">Solid White Avatar</option>
            <option value="utility-transparent">Transparent Avatar</option>
          </optgroup>
        </select>
      </f-col>
      <f-col class="gap-1">
        <f-row class="gap-1">
          <button id="preview-btn">Preview</button>
          <button id="html-btn">HTML</button>
          <button id="edit-template-btn">Edit Template</button>
          <f-sp></f-sp>
          <div>
            <button id="rename-template-btn" class="hidden">Rename</button>
            <button id="delete-template-btn" class="hidden">Delete</button>
            <label for="template-select">Template Preset:</label>
            <select id="template-select"></select>
          </div>
        </f-row>
        <div id="preview-output">
          <f-row class="spinner-container">
            <f-sp></f-sp><img src="https://i.imgur.com/BBaogem.png" alt="eggbug is loading!" class="spinner">
            <f-sp></f-sp>
          </f-row>
        </div>
        <textarea readonly id="html-output" class="hidden output-textarea">Loading...</textarea>
        <textarea id="template-editor" class="hidden output-textarea">Paste in a custom template here!</textarea>
        <f-col class="gap-1" id="template-ui"></f-col>
      </f-col>
    </main>
  </f-col>
  <details id="import-export-details"><summary>Import / Export Cohoard Data</summary>
    <p>You can import and export custom templates and Config Table values from here. Data is exported as a big JSON
      string. The saved format here may change in the future, although I will try to make this as backwards compatible as possible.
      <strong>Please note that importing overwrites your current saved templates and Config Table values!</strong></p>
    <p>A brief summary of the JSON data is follows, in case you want to edit it in a text editor:</p>
    <ul>
      <li><strong><code>configTableCols</code></strong> - An array containing the headers for the Config Table. In other
        words: The first row of the Config Table. Note: This may include columns with blank headers, which is normal
        (the Config Table may have an empty column header with data in the body).</li>
      <li><strong><code>configTableBody</code></strong> -  An array of arrays containing the bodies for the Config Table.
        In other words: All the rows of the Config Table except for the first one. These match the order of the column
        headers. Blank values here are normal if not all the values in the Config Table are filled in.</li>
      <li><strong><code>customTemplates</code></strong> -  An array containing JSON objects that contain the data for the
        custom templates. This JSON object contains three keys: <code>content</code>, which is a string containing the
        contents of the template (likely to be very long!), <code>displayed_name</code>, which is the name of the custom
        template in the dropdown, and <code>ui_values</code>, which is the saved UI values for the template (if not
        included, template falls back to whatever default it has).</li>
      <li><strong><code>builtinTemplates</code></strong> -  An array containing JSON objects that contain the data for
        the builtin template. This only stores the saved UI values for the template (and if not included, template falls
        back to whatever default it has.</li>
    </ul>
    <textarea id="import-export-textarea"></textarea>
    <f-row class="gap-1">
      <button id="export-button">Export</button>
      <button id="import-button">Import</button>
    </f-row>
  </details>
  <pre id="error-msg"></pre>

  <div id="instructions">
    <h2>Quick Start Guide</h2>
    <p>Cohoard is a tool for quickly and easily formatting chatlogs for posting on <a href="www.cohost.org">Cohost</a>.
    </p>
    <h3>The Script</h3>
    <p>The Script contains the main content of your post. You can write messages in playscript format--that is,
      something like <code>EGGBUG: i'm eggbug!</code>. The name before the colon is called the <em>key</em> and is used
      in the Config Table.</p>
    <pre id="discord-example-script">
EGGBUG: hi!
EGGBUG: these three messages are part of the same PostBlock
EGGBUG: because they are all from me!
BUGEGG: i am a new speaker,
BUGEGG: so my messages are in a new PostBlock
EGGBUG: yeah! and now this message will appear in its own PostBlock</pre>
    <p>The above conversation renders in the Discord template like so:</p>
    <div id="discord-example-render"></div>
    <p>You can add extra styling to posts. For example, writing <code>@ Some Time Here</code> on
      its own line will set a timestamp for the posts. You can also use most Markdown features, like
      bolding, italices, codeblocks, and so on.</p>
    <h3>Config Table</h3>
    <p>The Config Table is a table of keys and values. Each row of the table describes how a person in the Script should
      be styled, and typically includes information like their username or avatar. The first column of the table is the
      "<code>key</code>", which should match with the keys in the script. This is typically an ALL CAPS name (like
      "<code>EGGBUG</code>") but does not have to be. The rest of the columns can be renamed to whatever keys that the
      template is expecting to have. Currently the two preset templates take the following keys.</p>
    <h4>Discord Template</h4>
    <ul>
      <li><strong><code>name</code></strong> - The username displayed in the headline. If not provided, defaults to the
        key</li>
      <li><strong><code>color</code></strong> - The color of the username. This (and any other color field) can be any
        CSS color value, for example "<code>red</code>" or "<code>#FF0000</code>" both work.</li>
      <li><strong><code>avatar</code></strong> - A URL pointing to the avatar of the poster. If not provided, then the
          avatar will be blank.</li>
      <li><strong><code>bot_tag</code></strong> - The text of the "BOT" tag. If not provided, then no bot tag is displayed.
          You can add the checkmark symbol (✓) in order to make the bot tag include a checkmark.</li>
    </ul>
    <h4>Twitter Template</h4>
    <ul>
      <li><strong><code>name</code></strong> - The display name of the Tweeter</li>
      <li><strong><code>handle</code></strong> - The handle of the Tweeter. The template automatically prepends the "@"
        symbol for you</li>
      <li><strong><code>avatar</code></strong> - A URL pointing to the avatar of the poster. If not provided, then the
        avatar will be blank.</li>
    </ul>
    <h4>Pesterlog Template</h4>
    <ul>
      <li><strong><code>short_handle</code></strong> - The handle displayed just before a chat message. For example,
        Dave Strider's <code>short_handle</code> is <code>TG</code>. </li>
      <li><strong><code>handle</code></strong> - Optional. A synonym for <code>short_handle</code>. The template will
        prefer using the <code>short_handle</code> and will fall back to <code>handle</code> and finally
        <code>key</code> if not provided.
      </li>
      <li><strong><code>color</code></strong> - The color of the user's messages. This is the color
        the chat message will be rendered in. If not provided, defaults to black.</li>
      <li><strong><code>handle_color</code></strong> - The color of the handle. This is useful if a
        character's handle color is not the same as their message colors. For example, some characters
        in <i>Godfeels</i> do this. If not provided, then the handle will be the same color as <code>color</code>.</li>
    </ul>
    <h4>17776 Template</h4>
    <ul>
      <li><strong><code>color</code></strong> - The color of the text. If not provided, defaults to white.</li>
      <li><strong><code>background_color</code></strong> - The background color of the user. If not provided, defaults
        to transparent. This is typically used by the satellite characters in 20020, with black colored text.</li>
      <li><strong><code>padding_left</code></strong> - How far to indent the text. If not provided, defaults to zero.
        Typically, 17776 uses increments of <code>10%</code> for different characters.</li>
    </ul>
    <h4>Undertale Template</h4>
    <ul>
      <li><strong><code>color</code></strong> - If "Use custom <code>color</code>" is checked and this is
        provided, then the character's dialog will be colored to this color. Otherwise, defaults to white.</li>
      <li><strong><code>font</code></strong> - If provided, then the character's dialog will be in this font.
        Otherwise, defaults to the "Default Font"</li>
      <li><strong><code>avatar</code></strong> - A URL pointing to the avatar of the poster. If not provided, then the
        avatar will be blank.</li>
    </ul>
    <h4>Wikipedia Template</h4>
    <p>This template ignores all of the Config Table values. Hence, you can just write text that begins with
      <code>ARTICLE:</code> and it will appear. Note that <code>sup</code> tags can be used to make "citations".</p>
    <h4>ChatGPT Template</h4>
    <ul>
      <li><strong><code>avatar</code></strong> - A URL pointing to the avatar of the poster. If not provided, then the
        avatar will be the ChatGPT logo.</li>
    </ul>
    <h4><a href="https://corru.observer">corru.observer</a> Template</h4>
    <ul>
      <li><strong><code>name</code></strong> - The display name of the Tweeter</li>
      <li><strong><code>avatar</code></strong> - A URL pointing to the avatar of the poster. If not provided, then the
        avatar will be blank.</li>
      <li><strong><code>avatar_background</code></strong> - Sets the <code>background</code> attribute on the avatar
        image. If not provided, defaults to black. This is useful for transparent images.</li>
      <li><strong><code>border_radius</code></strong> - Sets the <code>border-radius</code> attribute on the avatar
        image. If not provided, defaults to zero.</li>
      <li><strong><code>color</code></strong> - The color of the text. If not provided, defaults to white.</li>
      <li><strong><code>background_color</code></strong> - The background color of the message box. If not provided,
        defaults to black.</li>
      <li><strong><code>style</code></strong> - If provided and set to <code>noheadline</code>, then the username
        headline will not be rendered and the message text will be centered and have a barcode. This is typically
        used by The Interloper. If set to <code>messageonly</code> instead, then the message box will only contain the
        message contents. This is used by Velzie.</li>
    </ul>
    <h3>The Preview Window</h3>
    <p>On the right side is the preview window. Any changes you make to the Script will automatically update the preview
      window. You can click on the button labeled "HTML" to switch to a raw HTML view of your post--this is the text
      that can be copy-pasted directly into a Cohost post.</p>
    <p>You can use the Template Preset dropdown to switch between stored Templates, including custom Tepmlates you have
      made. To make a custom Template, choose "<code>Create New Preset...</code>" from the dropdown. Custom Templates
      can be edited using the "Edit Template" button and are saved in the browser's localStorage. You can also rename
      and delete custom templates.</p>
    <h3>Change Log</h3>
    <p>See <a href="https://github.com/a2aaron/Cohoard/blob/gh-pages/CHANGELOG.md">here</a> for a list of breaking changes to the template. Where possible, I try to keep
       old templates working, however there maybe cases where I cannot do this.</p>
    <h3>Contributing</h3>
    <p>If you have any bug reports, feature requests, or template suggestions, feel free to submit them on the Issues
      page of the <a href="https://github.com/a2aaron/Cohoard">Github repo</a>.</p>
    <h3>Credits & Thanks</h3>
    <ul>
      <li>Sprites ripped with permission from <a href="https://corru.observer">corru.observer</a>. You should seriously
        check this game out, it's so good.</li>
      <li>Twitter template originally based on work by <a href="https://github.com/furryaccount">furryaccount</a>.</li>
    </ul>
  </div>
</body>

</html>