├── .gitignore
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── images
    │   └── logo.png
    ├── color.js
    ├── snippets
    │   ├── discordio.js
    │   ├── eris.js
    │   ├── discordie.js
    │   ├── discordjs.js
    │   ├── restcord.js
    │   ├── discordnet.js
    │   ├── jda.js
    │   ├── dsharpplus.js
    │   ├── discordpy.js
    │   ├── discordrb.js
    │   ├── discord4j.js
    │   └── dsharpplus-embedbuilder.js
    ├── index.js
    ├── components
    │   ├── button.jsx
    │   ├── warningmodal.jsx
    │   ├── modal.jsx
    │   ├── modalcontainer.jsx
    │   ├── codemirror.jsx
    │   ├── codemodal.jsx
    │   ├── embed.jsx
    │   ├── discordview.jsx
    │   ├── aboutmodal.jsx
    │   ├── app.jsx
    │   └── markdown.jsx
    ├── constants
    │   └── embedschema.js
    ├── css
    │   ├── codemirror-one-dark.css
    │   ├── index.css
    │   └── discord.css
    └── validation.js
├── package.json
├── README.md
└── LICENSE


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mee6/embed-visualizer/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mee6/embed-visualizer/HEAD/src/images/logo.png


--------------------------------------------------------------------------------
/src/color.js:
--------------------------------------------------------------------------------
 1 | function extractRGB(i) {
 2 |   return {
 3 |     r: (i >> 16) & 0xFF,
 4 |     g: (i >> 8) & 0xFF,
 5 |     b: i & 0xFF,
 6 |   };
 7 | }
 8 | 
 9 | function combineRGB(r, g, b) {
10 |   return (r << 16) | (g << 8) | b;
11 | }
12 | 
13 | export { extractRGB, combineRGB };


--------------------------------------------------------------------------------
/src/snippets/discordio.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   name: 'discord.io (JavaScript)',
3 |   language: 'javascript',
4 |   generateFrom(data) {
5 |     const d = { to: '...', message: data.content, embed: data.embed };
6 |     return `var data = ${JSON.stringify(d, null, '  ')};\nclient.sendMessage(data);`;
7 |   }
8 | };
9 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './components/app';
 4 | 
 5 | import './css/index.css';
 6 | import './css/discord.css';
 7 | import 'highlight.js/styles/solarized-dark.css';
 8 | 
 9 | 
10 | ReactDOM.render(
11 |   <App />,
12 |   document.getElementById('root')
13 | );
14 | 


--------------------------------------------------------------------------------
/src/snippets/eris.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   name: 'Eris (JavaScript)',
 3 |   language: 'javascript',
 4 |   generateFrom(data) {
 5 |     if (data.embed) {
 6 |       return `const data = ${JSON.stringify(data, null, '  ')};\nclient.createMessage(channelID, data);`;
 7 |     }
 8 | 
 9 |     return `client.createMessage(channelID, ${JSON.stringify(data.content)});`;
10 |   }
11 | };
12 | 


--------------------------------------------------------------------------------
/src/components/button.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | 
 4 | const Button = ({ label, onClick, className='', colors='bg-white blurple' }) => {
 5 |   const base = 'dib b--none no-underline pointer ph3 pv2 ma1 br2';
 6 |   const cls = `${base} ${colors} ${className}`;
 7 |   return <button onClick={onClick} className={cls}>{label}</button>;
 8 | };
 9 | 
10 | 
11 | export default Button;
12 | 


--------------------------------------------------------------------------------
/src/snippets/discordie.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   name: 'discordie (JavaScript)',
 3 |   language: 'javascript',
 4 |   generateFrom(data) {
 5 |     if (data.embed) {
 6 |       return (
 7 |         `const data = ${JSON.stringify(data.embed, null, '  ')};\n` +
 8 |         `channel.sendMessage(${JSON.stringify(data.content)}, false, data);`
 9 |       );
10 |     }
11 | 
12 |     return `channel.sendMessage(${JSON.stringify(data.content)});`;
13 |   }
14 | };
15 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 7 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
 8 |     <title>Embed Visualizer</title>
 9 |   </head>
10 |   <body>
11 |     <div id="root"></div>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/snippets/discordjs.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   name: 'discord.js (JavaScript)',
 3 |   language: 'javascript',
 4 |   generateFrom(data) {
 5 |     if (data.embed && data.content) {
 6 |       return (
 7 |         `const embed = ${JSON.stringify(data.embed, null, '  ')};\n` +
 8 |         `channel.send(${JSON.stringify(data.content)}, { embed });`
 9 |       );
10 |     } else if (data.embed) {
11 |       return `const embed = ${JSON.stringify(data.embed, null, '  ')};\nchannel.send({ embed });`;
12 |     }
13 | 
14 |     return `channel.send(${JSON.stringify(data.content)})`;
15 |   }
16 | };
17 | 


--------------------------------------------------------------------------------
/src/snippets/restcord.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   name: 'RestCord (PHP)',
 3 |   language: 'php',
 4 |   generateFrom(data) {
 5 |     let embed = null;
 6 |     if (data.embed) {
 7 |       embed = JSON.stringify(data.embed, null, 4)
 8 |           .replace(/{/g, '[')
 9 |           .replace(/}/g, ']')
10 |           .replace(/^ {4}/gm, '        ')
11 |           .replace(/^]/gm, '    ]');
12 |     }
13 | 
14 |     return `<?php
15 |     
16 | $client->channel->createMessage([
17 |     'channel.id' => $channelId,
18 |     'content'    => "${data.content}",
19 |     'embed'      => ${embed}
20 | ]);`;
21 |   }
22 | };
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "embed-visualizer",
 3 |   "author": "leovoel",
 4 |   "license": "MIT",
 5 |   "version": "0.1.0",
 6 |   "private": true,
 7 |   "homepage": "https://leovoel.github.io/embed-visualizer/",
 8 |   "devDependencies": {
 9 |     "react-scripts": "0.8.5",
10 |     "rimraf": "^2.5.4"
11 |   },
12 |   "dependencies": {
13 |     "ajv": "^4.11.2",
14 |     "codemirror": "^5.23.0",
15 |     "highlight.js": "^9.9.0",
16 |     "lodash.debounce": "^4.0.8",
17 |     "moment": "^2.17.1",
18 |     "react": "^15.4.2",
19 |     "react-addons-css-transition-group": "^15.4.2",
20 |     "react-color": "^2.13.8",
21 |     "react-dom": "^15.4.2",
22 |     "simple-markdown": "^0.2.1",
23 |     "twemoji": "^2.2.3"
24 |   },
25 |   "scripts": {
26 |     "start": "react-scripts start",
27 |     "build": "react-scripts build",
28 |     "postbuild": "rimraf build/**/*.map asset build/asset-manifest.json",
29 |     "test": "react-scripts test --env=jsdom",
30 |     "eject": "react-scripts eject"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/components/warningmodal.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Modal from './modal';
 3 | import Button from './button';
 4 | 
 5 | 
 6 | // TODO: generalize?
 7 | 
 8 | function WarningButton(props) {
 9 |   return <Button className='b shadow-1 shadow-hover-2 shadow-up-hover w-25' {...props} />;
10 | }
11 | 
12 | function WarningModal(props) {
13 |   return (
14 |     <Modal title='Warning' maxWidth='80ch' maxHeight='90%' {...props}>
15 |       <div className='ma3'>
16 |         <p>Do you want to see the webhook example? <strong>(this will erase your previous input)</strong></p>
17 | 
18 |         <p className='f6'>
19 |           You will not see this message again.
20 |         </p>
21 | 
22 |         <div className='tc'>
23 |           <WarningButton label='Yes' colors='white bg-dark-red' onClick={props.yes} />
24 |           <WarningButton label='No' colors='white bg-green' onClick={props.no} />
25 |         </div>
26 |       </div> 
27 |     </Modal>
28 |   );
29 | }
30 | 
31 | 
32 | export default WarningModal;
33 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Embed Visualizer
 2 | ================
 3 | 
 4 | ![demo gif](http://i.imgur.com/2wAb2d3.gif)
 5 | 
 6 | ### Code snippet generators
 7 | 
 8 | The general structure for them looks like this:
 9 | 
10 | ```js
11 | export default {
12 |   // for displaying on the <select> dropdown
13 |   name: 'Cool Discord Lib (Cool Programming Language)',
14 | 
15 |   // for highlight.js
16 |   // see https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases
17 |   language: 'coolprogramminglanguage',
18 | 
19 |   // actual generator
20 |   // data is just a javascript object that looks like this:
21 |   // { "content": "message content...", "embed": { ... } }
22 |   generateFrom(data) {
23 |     ...
24 |   },
25 | };
26 | ```
27 | 
28 | Currently, we don't really take in account "webhook mode" since most libraries don't
29 | really support that directly. If in the future most of them end up supporting it,
30 | we can start passing that down to the `generateFrom` function, so that it can emit something else.
31 | 
32 | [embed docs]: https://discordapp.com/developers/docs/resources/channel#embed-object
33 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2017 leovoel
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a
 6 | copy of this software and associated documentation files (the "Software"),
 7 | to deal in the Software without restriction, including without limitation
 8 | the rights to use, copy, modify, merge, publish, distribute, sublicense,
 9 | and/or sell copies of the Software, and to permit persons to whom the
10 | Software is furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
16 | OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
21 | DEALINGS IN THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/modal.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | 
 4 | const Modal = React.createClass({
 5 |   propTypes: {
 6 |     maxWidth: React.PropTypes.string,
 7 |     maxHeight: React.PropTypes.string,
 8 |     title: React.PropTypes.string,
 9 |     close: React.PropTypes.func,
10 |     children: React.PropTypes.node
11 |   },
12 | 
13 |   getDefaultProps() {
14 |     return { maxWidth: '60vw', maxHeight: '90vh' };
15 |   },
16 | 
17 |   componentDidMount()    { document.body.style.overflow = 'hidden'; },
18 |   componentWillUnmount() { document.body.style.overflow = 'auto';   },
19 | 
20 |   render() {
21 |     const cls = 'z-1 inner shadow-3 br2 overflow-hidden flex flex-column open-sans';
22 | 
23 |     const style = {
24 |       maxWidth: this.props.maxWidth,
25 |       maxHeight: this.props.maxHeight
26 |     };
27 | 
28 |     return (
29 |       <div className={cls} style={style}>
30 |         <header className='bg-blurple white pa3 flex flex-shrink-0 justify-between'>
31 |           <h3 className='ma0'>{this.props.title}</h3>
32 |           <button onClick={this.props.close} className='b bg-transparent pointer white b--none'>X</button>
33 |         </header>
34 |         <div className='bg-white h-100 overflow-y-auto'>
35 |           {this.props.children}
36 |         </div>
37 |       </div>
38 |     );
39 |   },
40 | });
41 | 
42 | 
43 | export default Modal;
44 | 


--------------------------------------------------------------------------------
/src/components/modalcontainer.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 3 | 
 4 | 
 5 | const ESC = 27;
 6 | 
 7 | const ModalContainer = React.createClass({
 8 |   propTypes: {
 9 |     currentModal: React.PropTypes.func,
10 |     close: React.PropTypes.func,
11 |     transitionName: React.PropTypes.string,
12 |     enterDuration: React.PropTypes.number.isRequired,
13 |     exitDuration: React.PropTypes.number.isRequired
14 |   },
15 | 
16 |   getDefaultProps() {
17 |     return { transitionName: 'modal', enterDuration: 190, exitDuration: 190 };
18 |   },
19 | 
20 |   componentDidMount() {
21 |     document.addEventListener('keydown', this.onKeyDown);
22 |   },
23 | 
24 |   componentWillUnmount() {
25 |     document.removeEventListener('keydown', this.onKeyDown);
26 |   },
27 | 
28 |   onKeyDown(event) {
29 |     if (event.keyCode === ESC) {
30 |       this.props.close();
31 |     }
32 |   },
33 | 
34 |   render() {
35 |     const content = this.props.currentModal ? (
36 |       <div className='fixed top-0 left-0 bottom-0 right-0'>
37 |         <div className='absolute top-0 left-0 w-100 h-100 bg-black-50' onClick={this.props.close} />
38 |         <div className='w-100 h-100 flex items-center justify-center'>
39 |           {this.props.currentModal(this.props)}
40 |         </div>
41 |       </div>
42 |     ) : null;
43 | 
44 |     return (
45 |       <ReactCSSTransitionGroup
46 |         transitionName={this.props.transitionName}
47 |         transitionEnterTimeout={this.props.enterDuration}
48 |         transitionLeaveTimeout={this.props.exitDuration}
49 |       >
50 |         {content}
51 |       </ReactCSSTransitionGroup>
52 |     );
53 |   },
54 | });
55 | 
56 | 
57 | export default ModalContainer;
58 | 


--------------------------------------------------------------------------------
/src/components/codemirror.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | 
  3 | import CM from 'codemirror';
  4 | import 'codemirror/lib/codemirror.css';
  5 | 
  6 | // generally you'd want to leave these up to the caller
  7 | // but we don't care about generalizing
  8 | import 'codemirror/addon/edit/closebrackets';
  9 | import 'codemirror/addon/edit/matchbrackets';
 10 | import 'codemirror/addon/scroll/simplescrollbars';
 11 | import 'codemirror/mode/javascript/javascript';
 12 | 
 13 | 
 14 | const defaultOptions = {
 15 |   mode: { name: 'javascript', json: true },
 16 |   autoCloseBrackets: true,
 17 |   matchBrackets: true,
 18 |   tabSize: 2,
 19 |   extraKeys: {
 20 |     // see https://github.com/codemirror/CodeMirror/issues/988
 21 |     Tab: function (cm) {
 22 |       if (cm.somethingSelected()) {
 23 |         cm.indentSelection('add');
 24 |         return;
 25 |       }
 26 | 
 27 |       cm.execCommand('insertSoftTab');
 28 |     },
 29 |   },
 30 |   viewportMargin: Infinity,
 31 | };
 32 | 
 33 | const CodeMirror = React.createClass({
 34 |   getDefaultProps() {
 35 |     return {
 36 |       theme: 'default',
 37 |       preserveScrollPosition: false,
 38 |     };
 39 |   },
 40 | 
 41 |   componentDidMount() {
 42 |     this.instance = CM.fromTextArea(this.textarea, defaultOptions);
 43 |     this.updateTheme(this.props.theme);
 44 |     this.instance.on('change', this.valueChanged);
 45 |     this.focus();
 46 |   },
 47 | 
 48 |   componentWillUnmount() {
 49 |     if (this.instance) {
 50 |       this.instance.toTextArea();
 51 |     }
 52 |   },
 53 | 
 54 |   componentWillReceiveProps(next) {
 55 |     if (
 56 |       this.instance &&
 57 |       next.value !== undefined &&
 58 |       this.instance.getValue() !== next.value
 59 |     ) {
 60 |       if (this.props.preserveScrollPosition) {
 61 |         const previous = this.instance.getScrollInfo();
 62 |         this.instance.setValue(next.value);
 63 |         this.instance.scrollTo(previous.left, previous.top);
 64 |       } else {
 65 |         this.instance.setValue(next.value);
 66 |       }
 67 |     }
 68 | 
 69 |     if (next.theme) {
 70 |       this.updateTheme(next.theme);
 71 |     }
 72 |   },
 73 | 
 74 |   updateTheme(name) {
 75 |     this.instance.setOption('theme', name);
 76 |   },
 77 | 
 78 |   valueChanged(instance, change) {
 79 |     if (this.props.onChange && change.origin !== 'setValue') {
 80 |       this.props.onChange(this.instance.getValue(), change);
 81 |     }
 82 |   },
 83 | 
 84 |   render() {
 85 |     return (
 86 |       <div className='w-100 h-100'>
 87 |         <textarea
 88 |           ref={(textarea) => this.textarea = textarea}
 89 |           defaultValue={this.props.value}
 90 |           autoComplete='off'
 91 |         />
 92 |       </div>
 93 |     );
 94 |   },
 95 | 
 96 |   focus() {
 97 |     if (this.instance) {
 98 |       this.instance.focus();
 99 |     }
100 |   },
101 | 
102 | });
103 | 
104 | 
105 | export default CodeMirror;
106 | 


--------------------------------------------------------------------------------
/src/snippets/discordnet.js:
--------------------------------------------------------------------------------
 1 | const fields = {
 2 |           title: (title) => `\t.WithTitle(${JSON.stringify(title)})`,
 3 |     description: (desc) => `\t.WithDescription(${JSON.stringify(desc)})`,
 4 |             url: (url) => `\t.WithUrl(${JSON.stringify(url)})`,
 5 |           color: (color) => `\t.WithColor(new Color(0x${color.toString(16).toUpperCase()}))`,
 6 |       timestamp: (ts) => `\t.WithTimestamp(DateTimeOffset.FromUnixTimeMilliseconds(${Date.parse(ts)}))`,
 7 |          footer: (footer) => generateFooter(footer),
 8 |       thumbnail: (thumb) => `\t.WithThumbnailUrl(${JSON.stringify(thumb.url)})`,
 9 |           image: (img) => `\t.WithImageUrl(${JSON.stringify(img.url)})`,
10 |          author: (author) => generateAuthor(author),
11 |          fields: (fields) => generateFields(fields)
12 | }
13 | 
14 | function generateFooter(data) {
15 |     let result = ['\t.WithFooter(footer => {\n\t\tfooter'];
16 | 
17 |     if (data.text) {
18 |         result.push(`\t.WithText(${JSON.stringify(data.text)})`);
19 |     }
20 |     if (data.icon_url) {
21 |         result.push(`\t.WithIconUrl(${JSON.stringify(data.icon_url)})`);
22 |     }
23 | 
24 |     result[result.length-1] += ';\n\t})';
25 | 
26 |     return result.join('\n\t\t');
27 | }
28 | function generateAuthor(data) {
29 |     let result = ['\t.WithAuthor(author => {\n\t\tauthor'];
30 | 
31 |     result.push(`\t.WithName(${JSON.stringify(data.name)})`);
32 | 
33 |     if (data.url) {
34 |         result.push(`\t.WithUrl(${JSON.stringify(data.url)})`);
35 |     }
36 |     if (data.icon_url) {
37 |         result.push(`\t.WithIconUrl(${JSON.stringify(data.icon_url)})`);
38 |     }
39 | 
40 |     result[result.length-1] += ';\n\t})';
41 | 
42 |     return result.join('\n\t\t');
43 | }
44 | function generateFields(data) {
45 |     return data.map(function(x) {
46 |         if (x.inline) {
47 |             return `\t.AddInlineField(${JSON.stringify(x.name)}, ${JSON.stringify(x.value)})`
48 |         } else {
49 |             return `\t.AddField(${JSON.stringify(x.name)}, ${JSON.stringify(x.value)})`
50 |         }
51 |     }).join('\n');
52 | }
53 | 
54 | export default {
55 |     name: 'Discord.Net (C#)',
56 |     language: 'csharp',
57 |     generateFrom(data) {
58 |         if (data.embed) {
59 |             let result = [];
60 |             result.push('var builder = new EmbedBuilder()');
61 |             for (let key in data.embed) {
62 |                 if (fields[key]) {
63 |                     result.push(fields[key](data.embed[key]));
64 |                 }
65 |             }
66 |             result[result.length-1] += ';';
67 | 
68 |             result.push('var embed = builder.Build();');
69 |             result.push(`await Context.Channel.SendMessageAsync(\n\t${data.content ? JSON.stringify(data.content) : 'null'},\n\tembed: embed)\n\t.ConfigureAwait(false);`);
70 | 
71 |             return result.join('\n');
72 |         } else {
73 |             return `await Context.Channel.SendMessageAsync(${data.content ? JSON.stringify(data.content) : 'null'})\n\t.ConfigureAwait(false);`;
74 |         }
75 |     }
76 | }
77 | 


--------------------------------------------------------------------------------
/src/snippets/jda.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   name: "JDA (Java)",
 3 |   language: "java",
 4 | 
 5 |   generateFrom(data) {
 6 |     const result = [];
 7 | 
 8 |     if (data.content) {
 9 |       result.push(`new MessageBuilder()`);
10 |       result.push(`  .append(${JSON.stringify(data.content)})`)
11 |     }
12 | 
13 |     if (data.embed) {
14 |       result.push(`  .setEmbed(new EmbedBuilder()`);
15 | 
16 |       if (data.embed.title) {
17 |         const title = JSON.stringify(data.embed.title);
18 |         if (data.embed.url) {
19 |           const url = JSON.stringify(data.embed.url);
20 |           if (title) {
21 |             result.push(`    .setTitle(${title}, ${url})`)
22 |           }
23 |         }
24 |         else if (title) {
25 |           result.push(`    .setTitle(${title})`)
26 |         }
27 |       }
28 | 
29 |       if (data.embed.description) {
30 |         const description = JSON.stringify(data.embed.description);
31 |         if (description) {
32 |           result.push(`    .setDescription(${description})`)
33 |         }
34 |       }
35 | 
36 |       if (data.embed.color) {
37 |         result.push(`    .setColor(new Color(${data.embed.color}))`)
38 |       }
39 | 
40 |       if (data.embed.timestamp) {
41 |         const timestamp = JSON.stringify(data.embed.timestamp);
42 |         result.push(`    .setTimestamp(OffsetDateTime.parse(${timestamp}))`)
43 |       }
44 | 
45 |       if (data.embed.footer) {
46 |         const text = data.embed.footer.text ? JSON.stringify(data.embed.footer.text) : null;
47 |         const icon_url = data.embed.footer.icon_url ? JSON.stringify(data.embed.footer.icon_url) : null;
48 |         result.push(`    .setFooter(${text}, ${icon_url})`)
49 |       }
50 | 
51 |       if (data.embed.thumbnail) {
52 |         const thumbnail = data.embed.thumbnail.url ? JSON.stringify(data.embed.thumbnail.url) : null;
53 |         if (thumbnail) {
54 |           result.push(`    .setThumbnail(${thumbnail})`)
55 |         }
56 |       }
57 | 
58 |       if (data.embed.image) {
59 |         const image = data.embed.image.url ? JSON.stringify(data.embed.image.url) : null;
60 |         if (image) {
61 |           result.push(`    .setImage(${image})`)
62 |         }
63 |       }
64 | 
65 |       if (data.embed.author) {
66 |         const name = data.embed.author.name ? JSON.stringify(data.embed.author.name) : null;
67 |         const url = data.embed.author.url ? JSON.stringify(data.embed.author.url) : null;
68 |         const icon_url = data.embed.author.icon_url ? JSON.stringify(data.embed.author.icon_url) : null;
69 |         result.push(`    .setAuthor(${name}, ${url}, ${icon_url})`)
70 |       }
71 | 
72 |       if (data.embed.fields) {
73 |         for (const field of data.embed.fields) {
74 |           const name = field.name ? JSON.stringify(field.name) : null;
75 |           const value = field.value ? JSON.stringify(field.value) : null;
76 |           const inline = field.inline !== undefined ? field.inline.toString() : `false`;
77 |           result.push(`    .addField(${name}, ${value}, ${inline})`)
78 |         }
79 |       }
80 | 
81 |       result.push(`    .build())`);
82 |     }
83 | 
84 |     result.push(`  .build();`);
85 |     return result.join('\n');
86 |   }
87 | };
88 | 


--------------------------------------------------------------------------------
/src/snippets/dsharpplus.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |     name: "DSharpPlus (C#)",
  3 |     language: "csharp",
  4 | 
  5 |     generateFrom(data) {
  6 | 
  7 |         const result = [];
  8 | 
  9 |         const push = e => result.push(e);
 10 | 
 11 |         // TODO: could use @"" to avoid escaping.
 12 |         const s = e => JSON.stringify(e);
 13 | 
 14 |         if (data.content) {
 15 |             push(`var builder = new DiscordEmbedBuilder()`);
 16 |         } else {
 17 |             push(`new DiscordEmbedBuilder()`);
 18 |         }
 19 | 
 20 |         const e = data.embed;
 21 | 
 22 |         if (!e) {
 23 |             return `You forgot the, uh, 'embed' bit of the embed.`;
 24 |         }
 25 | 
 26 |         if (e.title) {
 27 |             push(`.WithTitle(${s(e.title)})`);
 28 |         }
 29 | 
 30 |         if (e.description) {
 31 |             push(`.WithDescription(${s(e.description)})`);
 32 |         }
 33 | 
 34 |         if (e.url) {
 35 |             push(`.WithUrl(${s(e.url)})`);
 36 |         }
 37 | 
 38 |         if (e.color) { // use hex in case int is out of signed range
 39 |             push(`.WithColor(new DiscordColor(0x${e.color.toString(16).toUpperCase()}))`);
 40 |         }
 41 | 
 42 |         if (e.timestamp) {
 43 |             push(`.WithTimestamp(DateTimeOffset.FromUnixTimeMilliseconds(${Date.parse(e.timestamp)}UL))`);
 44 |         }
 45 | 
 46 |         if (e.footer) {
 47 |             push(`.WithFooter(`);
 48 |             push(`    ${e.footer.text     ? s(e.footer.text    ) : 'null'},`);
 49 |             push(`    ${e.footer.icon_url ? s(e.footer.icon_url) : 'null'}`);
 50 |             push(`)`);
 51 |         }
 52 | 
 53 |         if (e.thumbnail) {
 54 |             if (e.thumbnail.url) {
 55 |                 push(`.WithThumbnailUrl(${s(e.thumbnail.url)})`);
 56 |             } else {
 57 |                 push(`// warning: bad thumbnail <${s(e.thumbnail)}>`);
 58 |             }
 59 |         }
 60 | 
 61 |         if (e.image) {
 62 |             if (e.image.url) {
 63 |                 push(`.WithImageUrl(${s(e.image.url)})`);
 64 |             } else {
 65 |                 push(`// warning: bad image <${s(e.image)}>`);
 66 |             }
 67 |         }
 68 | 
 69 |         if (e.author) {
 70 |             push(`.WithAuthor(`);
 71 | 
 72 |             const author = [];
 73 | 
 74 |             if (e.author.name) {
 75 |                 author.push(e.author.name);
 76 |             }
 77 |             if (e.author.url) {
 78 |                 author.push(e.author.url);
 79 |             }
 80 |             if (e.author.icon_url) {
 81 |                 author.push(e.author.icon_url);
 82 |             }
 83 | 
 84 |             push(author.map(e => `    ${s(e)}`).join(',\n'));
 85 | 
 86 |             push(`)`);
 87 |         }
 88 | 
 89 |         if (e.fields && e.fields.length) {
 90 |             //.AddField("<:thonkang:219069250692841473>", "are inline fields", true);
 91 |             e.fields.forEach(e => {
 92 |                 push(`.AddField(${s(e.name)}, ${s(e.value)}, ${!!e.inline})`);
 93 |             });
 94 |         }
 95 | 
 96 |         result[result.length-1] += ';';
 97 | 
 98 |         push('');
 99 | 
100 |         if (data.content) {
101 |             push(`// await SendMessageAsync(`);
102 |             push(`//     ${s(data.content)},`);
103 |             push(`//     false, embed);`);
104 |         } else {
105 |             push(`// await SendMessageAsync(null, false, embed);`);
106 |         }
107 | 
108 |         return result.join('\n');
109 |     }
110 | }; 


--------------------------------------------------------------------------------
/src/snippets/discordpy.js:
--------------------------------------------------------------------------------
  1 | import Moment from 'moment';
  2 | 
  3 | 
  4 | function pythonKwargs(args) {
  5 |   return Object.keys(args).reduce((kwargs, key) => {
  6 |     if (args[key] !== null) {
  7 |       return kwargs.concat(`${key}=${args[key]}`);
  8 |     }
  9 | 
 10 |     return kwargs;
 11 |   }, []).join(', ');
 12 | }
 13 | 
 14 | function toTitleCase(s) {
 15 |   return s.charAt(0).toUpperCase() + s.substring(1);
 16 | }
 17 | 
 18 | export default {
 19 |   name: "discord.py (Python)",
 20 |   language: "python",
 21 |   generateFrom(data) {
 22 |     // TODO: minimize JSON.stringify?
 23 |     // this is kind of stupid as-is
 24 | 
 25 |     const result = [];
 26 | 
 27 |     if (data.embed) {
 28 |       // TODO: don't duplicate this kind of parsing
 29 |       let timestamp = Moment(data.embed.timestamp !== undefined ? data.embed.timestamp : null);
 30 |       timestamp = timestamp.isValid() ? timestamp.unix() : null;
 31 | 
 32 |       const args = {
 33 |         title: data.embed.title ? JSON.stringify(data.embed.title) : null,
 34 |         colour: data.embed.color ? `discord.Colour(0x${data.embed.color.toString(16)})` : null,
 35 |         url: data.embed.url ? JSON.stringify(data.embed.url) : null,
 36 |         description: data.embed.description ? JSON.stringify(data.embed.description) : null,
 37 |         timestamp: timestamp ? `datetime.datetime.utcfromtimestamp(${timestamp})` : null
 38 |       };
 39 | 
 40 |       result.push(`embed = discord.Embed(${pythonKwargs(args)})`);
 41 | 
 42 |       if (data.embed.image || data.embed.thumbnail || data.embed.author || data.embed.footer) {
 43 |         result.push('');
 44 |       }
 45 | 
 46 |       if (data.embed.image) {
 47 |         const image = data.embed.image;
 48 |         const args = { url: image.url ? JSON.stringify(image.url) : null };
 49 |         result.push(`embed.set_image(${pythonKwargs(args)})`);
 50 |       }
 51 | 
 52 |       if (data.embed.thumbnail) {
 53 |         const thumbnail = data.embed.thumbnail;
 54 |         const args = { url: thumbnail.url ? JSON.stringify(thumbnail.url) : null };
 55 |         result.push(`embed.set_thumbnail(${pythonKwargs(args)})`);
 56 |       }
 57 | 
 58 |       if (data.embed.author) {
 59 |         const author = data.embed.author;
 60 |         const args = {
 61 |           name: author.name ? JSON.stringify(author.name) : null,
 62 |           url: author.url ? JSON.stringify(author.url) : null,
 63 |           icon_url: author.icon_url ? JSON.stringify(author.icon_url) : null
 64 |         };
 65 |         result.push(`embed.set_author(${pythonKwargs(args)})`);
 66 |       }
 67 | 
 68 |       if (data.embed.footer) {
 69 |         const args = {
 70 |           text: data.embed.footer.text ? JSON.stringify(data.embed.footer.text) : null,
 71 |           icon_url: data.embed.footer.icon_url ? JSON.stringify(data.embed.footer.icon_url) : null
 72 |         };
 73 | 
 74 |         result.push(`embed.set_footer(${pythonKwargs(args)})`);
 75 |       }
 76 | 
 77 |       if (data.embed.fields) {
 78 |         result.push('');
 79 |         for (const field of data.embed.fields) {
 80 |           const args = {
 81 |             name: field.name ? JSON.stringify(field.name) : null,
 82 |             value: field.value ? JSON.stringify(field.value) : null,
 83 |             inline: field.inline !== undefined ? toTitleCase(field.inline.toString()) : null
 84 |           };
 85 |           result.push(`embed.add_field(${pythonKwargs(args)})`);
 86 |         }
 87 |       }
 88 | 
 89 |       result.push('');
 90 |     }
 91 | 
 92 |     if (data.content || data.embed) {
 93 |       const args = {
 94 |         content: data.content ? JSON.stringify(data.content) : null,
 95 |         embed: data.embed ? 'embed' : null
 96 |       };
 97 |       result.push(`await bot.say(${pythonKwargs(args)})`);
 98 |     }
 99 | 
100 |     return result.join('\n');
101 |   }
102 | };
103 | 


--------------------------------------------------------------------------------
/src/snippets/discordrb.js:
--------------------------------------------------------------------------------
  1 | import Moment from 'moment';
  2 | 
  3 | 
  4 | function rubyKwargs(args) {
  5 |   return Object.keys(args).reduce((kwargs, key) => {
  6 |     if (args[key] !== null) {
  7 |       return kwargs.concat(`${key}: ${args[key]}`);
  8 |     }
  9 | 
 10 |     return kwargs;
 11 |   }, []).join(', ');
 12 | }
 13 | 
 14 | export default {
 15 |   name: "discordrb (Ruby)",
 16 |   language: "ruby",
 17 |   generateFrom(data) {
 18 |     const result = [];
 19 | 
 20 |     if (data.content) {
 21 |       const args = {
 22 |         content: data.content ? JSON.stringify(data.content) : null,
 23 |         embed: data.embed ? 'embed' : null
 24 |       };
 25 | 
 26 |       if (data.embed) {
 27 |         result.push(`event.channel.send_embed(${args['content']}) do |embed|`);
 28 |       } else {
 29 |         result.push(`event.channel.send_message(${args['content']})`);
 30 |       }
 31 |     } else if (data.embed) {
 32 |       result.push(`event.channel.send_embed do |embed|`);
 33 |     } else {
 34 |       result.push('')
 35 |     }
 36 | 
 37 |     if (data.embed) {
 38 |       let timestamp = Moment(data.embed.timestamp !== undefined ? data.embed.timestamp : null);
 39 |       timestamp = timestamp.isValid() ? timestamp.unix() : null;
 40 | 
 41 |       const args = {
 42 |         title: data.embed.title ? JSON.stringify(data.embed.title) : null,
 43 |         colour: data.embed.color ? `0x${data.embed.color.toString(16)}` : null,
 44 |         url: data.embed.url ? JSON.stringify(data.embed.url) : null,
 45 |         description: data.embed.description ? JSON.stringify(data.embed.description) : null,
 46 |         timestamp: timestamp ? `Time.at(${timestamp})` : null
 47 |       };
 48 | 
 49 |       var pushed = false
 50 |       Object.keys(args).forEach(function(k) {
 51 |         if (args[k]) {
 52 |           result.push(`  embed.${k} = ${args[k]}`)
 53 |           pushed = true
 54 |         }
 55 |       })
 56 | 
 57 |       if (pushed) {
 58 |         result.push('')
 59 |       }
 60 | 
 61 |       if (data.embed.image) {
 62 |         const image = data.embed.image;
 63 |         const args = { url: image.url ? JSON.stringify(image.url) : null };
 64 |         result.push(`  embed.image = Discordrb::Webhooks::EmbedImage.new(${rubyKwargs(args)})`);
 65 |       }
 66 | 
 67 |       if (data.embed.thumbnail) {
 68 |         const thumbnail = data.embed.thumbnail;
 69 |         const args = { url: thumbnail.url ? JSON.stringify(thumbnail.url) : null };
 70 |         result.push(`  embed.thumbnail = Discordrb::Webhooks::EmbedThumbnail.new(${rubyKwargs(args)})`);
 71 |       }
 72 | 
 73 |       if (data.embed.author) {
 74 |         const author = data.embed.author;
 75 |         const args = {
 76 |           name: author.name ? JSON.stringify(author.name) : null,
 77 |           url: author.url ? JSON.stringify(author.url) : null,
 78 |           icon_url: author.icon_url ? JSON.stringify(author.icon_url) : null
 79 |         };
 80 |         result.push(`  embed.author = Discordrb::Webhooks::EmbedAuthor.new(${rubyKwargs(args)})`);
 81 |       }
 82 | 
 83 |       if (data.embed.footer) {
 84 |         const args = {
 85 |           text: data.embed.footer.text ? JSON.stringify(data.embed.footer.text) : null,
 86 |           icon_url: data.embed.footer.icon_url ? JSON.stringify(data.embed.footer.icon_url) : null
 87 |         };
 88 | 
 89 |         result.push(`  embed.footer = Discordrb::Webhooks::EmbedFooter.new(${rubyKwargs(args)})`);
 90 |       }
 91 | 
 92 |       if (data.embed.fields) {
 93 |         result.push('');
 94 |         for (const field of data.embed.fields) {
 95 |           const args = {
 96 |             name: field.name ? JSON.stringify(field.name) : null,
 97 |             value: field.value ? JSON.stringify(field.value) : null,
 98 |             inline: field.inline !== undefined ? field.inline.toString() : null
 99 |           };
100 |           result.push(`  embed.add_field(${rubyKwargs(args)})`);
101 |         }
102 |       }
103 | 
104 |       result.push('end');
105 |     }
106 | 
107 |     return result.join('\n');
108 |   }
109 | };
110 | 


--------------------------------------------------------------------------------
/src/components/codemodal.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import hljs from 'highlight.js';
  3 | import Modal from './modal';
  4 | 
  5 | import discord4j from '../snippets/discord4j';
  6 | import discordnet from '../snippets/discordnet';
  7 | import dsharpplus from '../snippets/dsharpplus';
  8 | import dsharpplusEmbedbuilder from '../snippets/dsharpplus-embedbuilder';
  9 | import discordpy from '../snippets/discordpy';
 10 | import discordie from '../snippets/discordie';
 11 | import discordjs from '../snippets/discordjs';
 12 | import discordio from '../snippets/discordio';
 13 | import restcord from '../snippets/restcord';
 14 | import eris from '../snippets/eris';
 15 | import discordrb from '../snippets/discordrb';
 16 | import jda from '../snippets/jda';
 17 | 
 18 | 
 19 | const libraries = {
 20 |   'dotnet_discord-net': discordnet,
 21 |   'dotnet_dsharpplus': dsharpplus,
 22 |   'dotnet_dsharpplusEmbedbuilder': dsharpplusEmbedbuilder,
 23 |   'python_discord-py': discordpy,
 24 |   'js_discordie': discordie,
 25 |   'js_discordjs': discordjs,
 26 |   'js_discordio': discordio,
 27 |   'js_eris': eris,
 28 |   'php_restcord': restcord,
 29 |   'ruby_discordrb': discordrb,
 30 |   'java_discord4j': discord4j,
 31 |   'java_jda': jda,
 32 | };
 33 | 
 34 | // TODO: check for localStorage availability?
 35 | // are we ever going to run into a browser that supports flexbox but not localStorage?
 36 | 
 37 | const LOCAL_STORAGE_KEY = 'codegen_lib';
 38 | 
 39 | const CodeModal = React.createClass({
 40 |   getInitialState() {
 41 |     const keys = Object.keys(libraries);
 42 |     let initial = keys[Math.floor(Math.random() * keys.length)];
 43 | 
 44 |     const stored = localStorage.getItem(LOCAL_STORAGE_KEY);
 45 |     if (stored) {
 46 |       initial = stored;
 47 |     } else {
 48 |       localStorage.setItem(LOCAL_STORAGE_KEY, initial);
 49 |     }
 50 | 
 51 |     return { library: initial };
 52 |   },
 53 | 
 54 |   changeLibrary(event) {
 55 |     localStorage.setItem('codegen_lang', event.target.value);
 56 |     this.setState({ library: event.target.value });
 57 |   },
 58 | 
 59 |   render() {
 60 |     const { data, hasError, webhookMode, ...props } = this.props;
 61 |     let code = 'Errors encountered when validating/parsing your data.\nCheck those first before trying to generate code.';
 62 |     let language = 'accesslog';
 63 | 
 64 |     if (webhookMode) {
 65 |       // TODO: add support for this in whatever libraries support it directly?
 66 |       // seems like very few of them do it
 67 |       code = 'Webhook mode not supported yet.';
 68 |     } else if (!hasError) {
 69 |       language = libraries[this.state.library].language;
 70 |       code = libraries[this.state.library].generateFrom(data);
 71 |     }
 72 | 
 73 |     const theme = `atom-one-${this.props.darkTheme ? 'dark' : 'light'}`;
 74 |     const highlightedBlock = hljs.highlight(language, code, true);
 75 | 
 76 |     return (
 77 |       <Modal title='Generate code' {...props} maxWidth='90ch'>
 78 |         <div className='ma3'>
 79 | 
 80 |           <div className='mv2 flex flex-auto flex-column'>
 81 |             <div className='bg-dark-red washed-blue pa2 mb2'>
 82 |               <strong>NOTE:</strong> These code snippets may need changes to work in your
 83 |               actual program, and they may not even be correct. Do <strong>NOT</strong> just copy and paste them in
 84 |               without understanding what they mean.
 85 |             </div>
 86 |             <select
 87 |               className='w-100 h2 mb2'
 88 |               value={this.state.library}
 89 |               onChange={this.changeLibrary}
 90 |             >
 91 |               {Object.keys(libraries).sort().map(k => {
 92 |                 return <option value={k} key={k}>{libraries[k].name}</option>;
 93 |               })}
 94 |             </select>
 95 | 
 96 |             <pre className='ma0'>
 97 |               <code
 98 |                 className={`${theme} hljs ${highlightedBlock.language}`}
 99 |                 dangerouslySetInnerHTML={{ __html: highlightedBlock.value }}
100 |               />
101 |             </pre>
102 |           </div>
103 | 
104 |         </div>
105 |       </Modal>
106 |     );
107 |   },
108 | });
109 | 
110 | function wrapper(props) {
111 |   return <CodeModal {...props} />;
112 | }
113 | 
114 | 
115 | export default wrapper;
116 | 


--------------------------------------------------------------------------------
/src/snippets/discord4j.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |     name: "Discord4J (Java)",
  3 |     language: "java",
  4 | 
  5 |     generateFrom(data) {
  6 |         const result = [];
  7 | 
  8 |         if (data.content) {
  9 |             result.push(`new MessageBuilder(client)`);
 10 |             result.push(`  .appendContent(${JSON.stringify(data.content)})`)
 11 |         }
 12 | 
 13 |         if (data.embed) {
 14 |             result.push(`  .withEmbed(new EmbedBuilder()`);
 15 | 
 16 |             if (data.embed.title) {
 17 |                 const title = JSON.stringify(data.embed.title);
 18 |                 if (data.embed.url) {
 19 |                     const url = JSON.stringify(data.embed.url);
 20 |                     if (title) {
 21 |                         result.push(`    .withTitle(${title})`)
 22 |                         result.push(`    .withUrl(${url})`)
 23 |                     }
 24 |                 }
 25 |                 else if (title) {
 26 |                     result.push(`    .withTitle(${title})`)
 27 |                 }
 28 |             }
 29 | 
 30 |             if (data.embed.description) {
 31 |                 const description = JSON.stringify(data.embed.description);
 32 |                 if (description) {
 33 |                     result.push(`    .withDesc(${description})`)
 34 |                 }
 35 |             }
 36 | 
 37 |             if (data.embed.color) {
 38 |                 result.push(`    .withColor(new Color(${data.embed.color}))`)
 39 |             }
 40 | 
 41 |             if (data.embed.timestamp) {
 42 |                 const timestamp = JSON.stringify(data.embed.timestamp);
 43 |                 result.push(`    .withTimestamp(OffsetDateTime.parse(${timestamp}).toLocalDateTime())`)
 44 |             }
 45 | 
 46 |             if (data.embed.footer) {
 47 |                 const text = data.embed.footer.text ? JSON.stringify(data.embed.footer.text) : null;
 48 |                 const icon_url = data.embed.footer.icon_url ? JSON.stringify(data.embed.footer.icon_url) : null;
 49 |                 if (text != null) {
 50 |                     result.push(`    .withFooterText(${text})`)
 51 |                 }
 52 |                 if (icon_url != null) {
 53 |                     result.push(`    .withFooterIcon(${icon_url})`)
 54 |                 }
 55 | 
 56 |             }
 57 | 
 58 |             if (data.embed.thumbnail) {
 59 |                 const thumbnail = data.embed.thumbnail.url ? JSON.stringify(data.embed.thumbnail.url) : null;
 60 |                 if (thumbnail) {
 61 |                     result.push(`    .withThumbnail(${thumbnail})`)
 62 |                 }
 63 |             }
 64 | 
 65 |             if (data.embed.image) {
 66 |                 const image = data.embed.image.url ? JSON.stringify(data.embed.image.url) : null;
 67 |                 if (image) {
 68 |                     result.push(`    .withImage(${image})`)
 69 |                 }
 70 |             }
 71 | 
 72 |             if (data.embed.author) {
 73 |                 const name = data.embed.author.name ? JSON.stringify(data.embed.author.name) : null;
 74 |                 const url = data.embed.author.url ? JSON.stringify(data.embed.author.url) : null;
 75 |                 const icon_url = data.embed.author.icon_url ? JSON.stringify(data.embed.author.icon_url) : null;
 76 |                 if (name != null) {
 77 |                     result.push(`    .withAuthorName(${name})`)
 78 |                 }
 79 |                 if (icon_url != null) {
 80 |                     result.push(`    .withAuthorIcon(${icon_url})`)
 81 |                 }
 82 |                 if (url != null) {
 83 |                     result.push(`    .withAuthorUrl(${url})`)
 84 |                 }
 85 |             }
 86 | 
 87 |             if (data.embed.fields) {
 88 |                 for (const field of data.embed.fields) {
 89 |                     const name = field.name ? JSON.stringify(field.name) : null;
 90 |                     const value = field.value ? JSON.stringify(field.value) : null;
 91 |                     const inline = field.inline !== undefined ? field.inline.toString() : `false`;
 92 |                     result.push(`    .appendField(${name}, ${value}, ${inline})`)
 93 |                 }
 94 |             }
 95 | 
 96 |             result.push(`    .build())`);
 97 |         }
 98 | 
 99 |         result.push(`  .build();`);
100 |         return result.join('\n');
101 |     }
102 | };
103 | 


--------------------------------------------------------------------------------
/src/snippets/dsharpplus-embedbuilder.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   name: "DSharpPlus ModernEmbedBuilder (C#)",
  3 |   language: "csharp",
  4 | 
  5 |   generateFrom(data) {
  6 | 
  7 |     const footerStyleCompact = false;
  8 |     const authorStyleCompact = false;
  9 | 
 10 |     const result = [];
 11 | 
 12 |     const push = e => result.push(e);
 13 | 
 14 |     // TODO: could use @"" to avoid escaping.
 15 |     const s = e => JSON.stringify(e);
 16 | 
 17 |     if (data.content) {
 18 |       push(`await new ModernEmbedBuilder`);
 19 |     } else {
 20 |       push(`new ModernEmbedBuilder`);
 21 |     }
 22 | 
 23 |     push(`{`);
 24 | 
 25 |     if (data.content) {
 26 |       push(`    Content = (${s(data.content)}),`);
 27 |     }
 28 | 
 29 |     const e = data.embed;
 30 | 
 31 |     if (!e) {
 32 |       return `You forgot the, uh, 'embed' bit of the embed.`;
 33 |     }
 34 | 
 35 |     if (e.title) {
 36 |       push(`    Title = ${s(e.title)},`);
 37 |     }
 38 | 
 39 |     if (e.description) {
 40 |       push(`    Description = ${s(e.description)},`);
 41 |     }
 42 | 
 43 |     if (e.url) {
 44 |       push(`    Url = ${s(e.url)},`);
 45 |     }
 46 | 
 47 |     if (e.color) { // use hex in case int is out of signed range
 48 |       push(`    Color = 0x${e.color.toString(16).toUpperCase()},`);
 49 |     }
 50 | 
 51 |     if (e.timestamp) {
 52 |       //push(`    Timestamp = ${Date.parse(e.timestamp)}UL`);
 53 |       push(`    Timestamp = ${s(e.timestamp)},`);
 54 |     }
 55 | 
 56 |     if (e.footer) {
 57 |       if (!footerStyleCompact) {
 58 |         if (!e.footer.icon_url) {
 59 |           push(`    Footer = ${s(e.footer.text)},`)
 60 |         } else {
 61 |           push(`    Footer = (${s(e.footer.text)}, ${s(e.footer.icon_url)}),`)
 62 |         }
 63 |       } else {
 64 |         if (e.footer.text    ) push(`    FooterText = ${s(e.footer.text    )},`);
 65 |         if (e.footer.icon_url) push(`    FooterIcon = ${s(e.footer.icon_url)},`);
 66 |       }
 67 |     }
 68 | 
 69 |     if (e.thumbnail) {
 70 |       if (e.thumbnail.url) {
 71 |         push(`    ThumbnailUrl = ${s(e.thumbnail.url)},`);
 72 |       } else {
 73 |         push(`    // warning: bad thumbnail <${s(e.thumbnail)}>`);
 74 |       }
 75 |     }
 76 | 
 77 |     if (e.image) {
 78 |       if (e.image.url) {
 79 |         push(`    ImageUrl = ${s(e.image.url)},`);
 80 |       } else {
 81 |         push(`    // warning: bad image <${s(e.image)}>`);
 82 |       }
 83 |     }
 84 | 
 85 |     if (e.author) {
 86 |       if (!authorStyleCompact) {
 87 |         if (!e.author.url && !e.author.icon_url) {
 88 |           push(`    Author = ${s(e.author.name)},`);
 89 |         } else {
 90 |           const author = [];
 91 | 
 92 |           if (e.author.name) {
 93 |             author.push(e.author.name);
 94 |           }
 95 |           if (e.author.url) {
 96 |             author.push(e.author.url);
 97 |           }
 98 |           if (e.author.icon_url) {
 99 |             author.push(e.author.icon_url);
100 |           }
101 | 
102 |           push(`    Author = (${author.map(e => `${s(e)}`).join(', ')}),`);
103 |         }
104 |       } else {
105 |         if (e.author.name) {
106 |           push(`    AuthorName = ${s(e.author.name)},`);
107 |         }
108 |         if (e.author.url) {
109 |           push(`    AuthorUrl = ${s(e.author.url)},`);
110 |         }
111 |         if (e.author.icon_url) {
112 |           push(`    AuthorIcon = ${s(e.author.icon_url)},`);
113 |         }
114 |       }
115 |     }
116 | 
117 |     if (e.fields && e.fields.length) {
118 |       /*
119 |        * 
120 |         Fields =
121 |         {
122 |             "Field with just name",
123 |             ("ay Name", "ay Value"),
124 |             ("ay Name", "ay Value", inline: true),
125 |        */
126 |       push(`    Fields = `);
127 |       push(`    {`);
128 | 
129 |       e.fields.forEach(e => {
130 |         if (!e.value && !e.inline) {
131 |           push(`        ${s(e.name)}`)
132 |         } else {
133 |           const field = [];
134 |           if (e.name) field.push(s(e.name));
135 |           if (e.value) field.push(s(e.value));
136 |           if (e.inline) field.push('inline: true');
137 | 
138 |           push(`        (${field.join(', ')})`);
139 |         }
140 |       });
141 | 
142 |       push(`    }`);
143 |     }
144 | 
145 |     if (data.content) {
146 |       push(`}.Send(message);`);
147 |     } else {
148 |       push(`};`);
149 |     }
150 | 
151 |     return result.join('\n');
152 |   }
153 | };


--------------------------------------------------------------------------------
/src/constants/embedschema.js:
--------------------------------------------------------------------------------
  1 | // for colors, 24-bit integer expected to be in RR GG BB order
  2 | const UINT24_MAX = Math.pow(2, 24) - 1;
  3 | 
  4 | // iso 8601, but no support for utc offsets
  5 | // or even +00:00 for that matter, either just Z or nothing
  6 | const ISO_8601 = /^(\d{4})-(\d\d)-(\d\d)([T ](\d\d):(\d\d):(\d\d)(\.\d+)?(Z)?)?$/;
  7 | 
  8 | 
  9 | // see https://discordapp.com/developers/docs/resources/channel#embed-object
 10 | 
 11 | // we don't check urls here, even though generally only http(s) urls work
 12 | // although there's the special attachment:// ones for uploads
 13 | // (see https://discordapp.com/developers/docs/resources/channel#using-attachments-within-embeds)
 14 | 
 15 | // this depends on the custom 'disallowed' and 'atLeastOneOf' keywords
 16 | // (see validation.js)
 17 | 
 18 | // NOTE: when disallowing properties, we have to include them as
 19 | // valid properties first. kinda stupid, but i can't think of other ways
 20 | // to prevent ajv from overriding the disallowed property error. yet, anyway.
 21 | 
 22 | const embedSchema = {
 23 |   'type': 'object',
 24 |   'additionalProperties': false,
 25 |   'disallowed': ['type', 'provider', 'video'],
 26 |   'minProperties': 1,
 27 |   'properties': {
 28 |     'title': { 'type': 'string', 'maxLength': 256, 'trim': true },
 29 |     'url': { 'type': 'string' },
 30 |     'description': { 'type': 'string', 'maxLength': 2048, 'trim': true },
 31 |     'timestamp': { 'type': 'string', 'pattern': ISO_8601.source },
 32 |     'color': { 'type': 'integer', 'maximum': UINT24_MAX },
 33 |     'footer': {
 34 |       'type': 'object',
 35 |       'additionalProperties': false,
 36 |       'disallowed': ['proxy_icon_url'],
 37 |       'properties': {
 38 |         'text': { 'type': 'string', 'maxLength': 2048, 'trim': true },
 39 |         'icon_url': { 'type': 'string' },
 40 |         'proxy_icon_url': {}
 41 |       }
 42 |     },
 43 |     'image': {
 44 |       'type': 'object',
 45 |       'additionalProperties': false,
 46 |       'disallowed': ['proxy_url', 'width', 'height'],
 47 |       'properties': {
 48 |         'url': { 'type': 'string' },
 49 |         'proxy_url': {},
 50 |         'width': {},
 51 |         'height': {}
 52 |       }
 53 |     },
 54 |     'thumbnail': {
 55 |       'type': 'object',
 56 |       'additionalProperties': false,
 57 |       'disallowed': ['proxy_url', 'width', 'height'],
 58 |       'properties': {
 59 |         'url': { 'type': 'string' },
 60 |         'proxy_url': {},
 61 |         'width': {},
 62 |         'height': {}
 63 |       }
 64 |     },
 65 |     'author': {
 66 |       'type': 'object',
 67 |       'additionalProperties': false,
 68 |       'disallowed': ['proxy_icon_url'],
 69 |       'required': ['name'],
 70 |       'properties': {
 71 |         'name': { 'type': 'string', 'maxLength': 256, 'trim': true },
 72 |         'url': { 'type': 'string' },
 73 |         'icon_url': { 'type': 'string' },
 74 |         'proxy_icon_url': {}
 75 |       }
 76 |     },
 77 |     'fields': {
 78 |       'type': 'array',
 79 |       'maxItems': 25,
 80 |       'items': {
 81 |         'type': 'object',
 82 |         'additionalProperties': false,
 83 |         'required': ['name', 'value'],
 84 |         'properties': {
 85 |           'name': { 'type': 'string', 'maxLength': 256, 'trim': true },
 86 |           'value': { 'type': 'string', 'maxLength': 1024, 'trim': true },
 87 |           'inline': { 'type': 'boolean' }
 88 |         }
 89 |       }
 90 |     },
 91 |     'provider': {},
 92 |     'video': {},
 93 |     'type': {}
 94 |   }
 95 | };
 96 | 
 97 | // there's a lot of fields omitted in the bot message schema,
 98 | // and a couple in the webhook one. we are not concerned with most of them,
 99 | // our job is just to validate embeds.
100 | 
101 | const botMessageSchema = {
102 |   'type': 'object',
103 |   'additionalProperties': false,
104 |   'properties': {
105 |     'content': {
106 |       'type': 'string',
107 |       'maxLength': 2000,
108 |       'trim': true
109 |     },
110 |     'embed': embedSchema
111 |   },
112 |   'atLeastOneOf': ['content', 'embed']
113 | };
114 | 
115 | const webhookMessageSchema = {
116 |   'type': 'object',
117 |   'additionalProperties': false,
118 |   'properties': {
119 |     'username': { 'type': 'string', 'maxLength': 256 },
120 |     'avatar_url': { 'type': 'string' },
121 |     'content': { 'type': 'string', 'maxLength': 2000, 'trim': true },
122 |     'embeds': { 'type': 'array', 'maxItems': 10, 'items': embedSchema },
123 |     'tts': { 'type': 'boolean' },
124 |     'file': {}
125 |   },
126 |   'atLeastOneOf': ['content', 'embeds']
127 | };
128 | 
129 | export { botMessageSchema, webhookMessageSchema };
130 | 


--------------------------------------------------------------------------------
/src/components/embed.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import Moment from 'moment';
  3 | import { parseAllowLinks, parseEmbedTitle } from './markdown';
  4 | import { extractRGB } from '../color';
  5 | 
  6 | 
  7 | const Link = ({ children, ...props}) => {
  8 |   return <a target='_blank' rel='noreferrer' {...props}>{children}</a>;
  9 | };
 10 | 
 11 | 
 12 | const EmbedColorPill = ({ color }) => {
 13 |   let computed;
 14 | 
 15 |   if (color) {
 16 |     const c = extractRGB(color);
 17 |     computed = `rgba(${c.r},${c.g},${c.b},1)`;
 18 |   }
 19 | 
 20 |   const style = { backgroundColor: computed !== undefined ? computed : '' };
 21 |   return <div className='embed-color-pill' style={style} />;
 22 | }
 23 | 
 24 | const EmbedTitle = ({ title, url }) => {
 25 |   if (!title) {
 26 |     return null;
 27 |   }
 28 | 
 29 |   let computed = <div className='embed-title'>{parseEmbedTitle(title)}</div>;
 30 |   if (url) {
 31 |     computed = <Link href={url} className='embed-title'>{parseEmbedTitle(title)}</Link>;
 32 |   }
 33 | 
 34 |   return computed;
 35 | };
 36 | 
 37 | const EmbedDescription = ({ content }) => {
 38 |   if (!content) {
 39 |     return null;
 40 |   }
 41 | 
 42 |   return <div className='embed-description markup'>{parseAllowLinks(content)}</div>;
 43 | };
 44 | 
 45 | const EmbedAuthor = ({ name, url, icon_url }) => {
 46 |   if (!name) {
 47 |     return null;
 48 |   }
 49 | 
 50 |   let authorName;
 51 |   if (name) {
 52 |     authorName = <span className='embed-author-name'>{name}</span>;
 53 |     if (url) {
 54 |       authorName = <Link href={url} className='embed-author-name'>{name}</Link>;
 55 |     }
 56 |   }
 57 | 
 58 |   const authorIcon = icon_url ? (<img src={icon_url} role='presentation' className='embed-author-icon' />) : null;
 59 | 
 60 |   return <div className='embed-author'>{authorIcon}{authorName}</div>;
 61 | };
 62 | 
 63 | const EmbedField = ({ name, value, inline }) => {
 64 |   if (!name && !value) {
 65 |     return null;
 66 |   }
 67 | 
 68 |   const cls = 'embed-field' + (inline ? ' embed-field-inline' : '');
 69 | 
 70 |   const fieldName = name ? (<div className='embed-field-name'>{parseEmbedTitle(name)}</div>) : null;
 71 |   const fieldValue = value ? (<div className='embed-field-value markup'>{parseAllowLinks(value)}</div>) : null;
 72 | 
 73 |   return <div className={cls}>{fieldName}{fieldValue}</div>;
 74 | };
 75 | 
 76 | const EmbedThumbnail = ({ url }) => {
 77 |   if (!url) {
 78 |     return null;
 79 |   }
 80 | 
 81 |   return (
 82 |     <img
 83 |       src={url}
 84 |       role='presentation'
 85 |       className='embed-rich-thumb'
 86 |       style={{ maxWidth: 80, maxHeight: 80 }}
 87 |     />
 88 |   );
 89 | };
 90 | 
 91 | const EmbedImage = ({ url }) => {
 92 |   if (!url) {
 93 |     return null;
 94 |   }
 95 | 
 96 |   // NOTE: for some reason it's a link in the original DOM
 97 |   // not sure if this breaks the styling, probably does
 98 |   return <a className='embed-thumbnail embed-thumbnail-rich'><img className='image' role='presentation' src={url} /></a>;
 99 | };
100 | 
101 | const EmbedFooter = ({ timestamp, text, icon_url }) => {
102 |   if (!text && !timestamp) {
103 |     return null;
104 |   }
105 | 
106 |   // pass null, since undefined will make moment(...) return the current date/time
107 |   let time = Moment(timestamp !== undefined ? timestamp : null);
108 |   time = time.isValid() ? time.format('ddd MMM Do, YYYY [at] h:mm A') : null;
109 | 
110 |   const footerText = [text, time].filter(Boolean).join(' | ');
111 |   const footerIcon = text && icon_url ? (
112 |     <img src={icon_url} className='embed-footer-icon' role='presentation' width='20' height='20' />
113 |   ) : null;
114 | 
115 |   return <div>{footerIcon}<span className='embed-footer'>{footerText}</span></div>;
116 | };
117 | 
118 | const EmbedFields = ({ fields }) => {
119 |   if (!fields) {
120 |     return null;
121 |   }
122 | 
123 |   return <div className='embed-fields'>{fields.map((f, i) => <EmbedField key={i} {...f} />)}</div>;
124 | };
125 | 
126 | const Embed = ({
127 |   color, author, title, url, description, fields, thumbnail, image, timestamp, footer
128 | }) => {
129 |   return (
130 |     <div className='accessory'>
131 |       <div className='embed-wrapper'>
132 |         <EmbedColorPill color={color} />
133 |         <div className='embed embed-rich'>
134 |           <div className='embed-content'>
135 |             <div className='embed-content-inner'>
136 |               <EmbedAuthor {...author} />
137 |               <EmbedTitle title={title} url={url} />
138 |               <EmbedDescription content={description} />
139 |               <EmbedFields fields={fields} />
140 |             </div>
141 |             <EmbedThumbnail {...thumbnail} />
142 |           </div>
143 |           <EmbedImage {...image} />
144 |           <EmbedFooter timestamp={timestamp} {...footer} />
145 |         </div>
146 |       </div>
147 |     </div>
148 |   );
149 | };
150 | 
151 | 
152 | export default Embed;
153 | 


--------------------------------------------------------------------------------
/src/css/codemirror-one-dark.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |   Name:       one-dark
  3 |   Author:     Török Ádám (http://github.com/Aerobird98)
  4 | 
  5 |   Original Atom One Dark Theme (https://github.com/atom/one-dark-syntax & https://github.com/atom/one-dark-ui)
  6 | */
  7 | 
  8 | /* UI Theme /----------------------------------------------------------------------------------- */
  9 | 
 10 | .cm-s-one-dark .CodeMirror, .cm-s-one-dark .CodeMirror-scroll {
 11 |   font-family: Consolas, Monaco, monospace;
 12 |   font-weight: 300;
 13 |   font-size: 14px;
 14 |   background-color: hsl(220, 13%, 18%);
 15 |   color: hsl(220, 14%, 71%);
 16 | }
 17 | .cm-s-one-dark div.CodeMirror-selected {
 18 |   background: rgba(204, 217, 255, 0.15);
 19 | }
 20 | .cm-s-one-dark .CodeMirror-focused div.CodeMirror-selected {
 21 |   background: rgba(204, 217, 255, 0.09);
 22 | }
 23 | .cm-s-one-dark .CodeMirror-lines {
 24 |   padding: 4px 0; /* Vertical padding around content */
 25 | }
 26 | .cm-s-one-dark .CodeMirror pre {
 27 |   padding: 0 4px; /* Horizontal padding of content */
 28 | }
 29 | 
 30 | /* Gutter & Folding */
 31 | 
 32 | .cm-s-one-dark .CodeMirror .CodeMirror-gutters, .cm-s-one-dark .CodeMirror-gutter {
 33 |   white-space: nowrap;
 34 |   border: none;
 35 |   background: transparent;
 36 | }
 37 | .cm-s-one-dark .CodeMirror-linenumber {
 38 |   padding: 0 30px 0 30px;
 39 |   min-width: 20px;
 40 |   text-align: right;
 41 |   white-space: nowrap;
 42 |   color: hsl(220, 10%, 25%);
 43 | }
 44 | /* ...folding addon: fold/...  */
 45 | .cm-s-one-dark .CodeMirror-foldmarker {
 46 |   font-family: Consolas, Monaco, monospace;
 47 |   line-height: .3;
 48 |   cursor: pointer;
 49 |   color: hsl(220, 14%, 71%);
 50 |   background: rgba(204, 217, 255,0.05);
 51 | }
 52 | .cm-s-one-dark .CodeMirror-foldgutter {
 53 |   width: 15px;
 54 |   border: none;
 55 | }
 56 | .cm-s-one-dark .CodeMirror-foldgutter-open, .cm-s-one-dark .CodeMirror-foldgutter-folded {
 57 |   cursor: pointer;
 58 | }
 59 | .cm-s-one-dark .CodeMirror-foldgutter-open:after {
 60 |   content: "\25BE";
 61 |   color: hsl(220, 10%, 25%);
 62 | }
 63 | .cm-s-one-dark .CodeMirror.over-gutter, .cm-s-one-dark .CodeMirror-activeline .CodeMirror-foldgutter-open:after {
 64 |   color: hsl(220, 10%, 40%);
 65 | }
 66 | .cm-s-one-dark .CodeMirror-foldgutter-folded:after {
 67 |   content: "\25B8";
 68 |   color: hsl(220, 10%, 40%);
 69 | }
 70 | /* ...misc */
 71 | .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
 72 |   background-color: #ccc; /* The little square between H and V scrollbars */
 73 | }
 74 | 
 75 | /* Cursor */
 76 | 
 77 | .cm-s-one-dark .CodeMirror-cursor {
 78 |   border-left: 2px solid hsl(220, 100%, 66%) !important;
 79 | }
 80 | .cm-s-one-dark .CodeMirror-overwrite .CodeMirror-cursor {
 81 |   border-left: none !important;
 82 |   border-bottom: 1px solid #fff;
 83 | }
 84 | 
 85 | /* Popular addons */
 86 | 
 87 | /* addon: adit/machingbrackets.js & addon: edit/matchtags.js   */
 88 | .cm-s-one-dark .CodeMirror-matchingbracket, .cm-s-one-dark .CodeMirror-matchingtag {
 89 |   /* Ensure visibility against gray inline editor background */
 90 |   background-color: rgba(204, 217, 255,0.09);
 91 |   color: hsl(220, 14%, 71%) !important;
 92 |   border-bottom: 1px solid hsl(220, 100%, 66%);
 93 | }
 94 | 
 95 | 
 96 | /* Syntax Theme /---------------------------------------------------------------------------------- */
 97 | 
 98 | 
 99 | /* markdown */
100 | .cm-s-one-dark .cm-header {color: #e06c75;}
101 | .cm-s-one-dark .cm-quote {color: #5c6370;font-style: italic;}
102 | 
103 | .cm-s-one-dark .cm-negative {color: #e06c75;}
104 | .cm-s-one-dark .cm-positive {color: #e06c75;}
105 | 
106 | .cm-s-one-dark .cm-strong {color: #d19a66;font-weight: bold;}
107 | .cm-s-one-dark .cm-header .cm-strong {color: #d19a66;font-weight: bold;}
108 | 
109 | .cm-s-one-dark .cm-em {color: #c678dd;font-style: italic;}
110 | .cm-s-one-dark .cm-header .cm-em {color: #c678dd;font-style: italic;}
111 | 
112 | /* xml, html, ... */
113 | .cm-s-one-dark .cm-tag {color: #e06c75;}
114 | .cm-s-one-dark .cm-attribute {color: #d19a66;}
115 | .cm-s-one-dark .cm-link {color: #98c379;border-bottom: solid 1px #98c379;}
116 | 
117 | /* other ... (for example javascript) */
118 | .cm-s-one-dark .cm-builtin {color: #e06c75;}
119 | .cm-s-one-dark .cm-keyword {color: #c678dd;}
120 | .cm-s-one-dark .cm-def {color: #e5c07b;} /* original:  #d19a66; */
121 | 
122 | .cm-s-one-dark .cm-atom {color: #d19a66;}
123 | .cm-s-one-dark .cm-number {color: #d19a66;}
124 | .cm-s-one-dark .cm-property {color: #61afef;} /* original: #abb2bf */
125 | .cm-s-one-dark .cm-qualifier {color: #d19a66;}
126 | 
127 | .cm-s-one-dark .cm-variable {color: #e06c75;}
128 | .cm-s-one-dark .cm-variable-2 {color: #abb2bf;}
129 | .cm-s-one-dark .cm-variable-3 {color: #e5c07b;}
130 | 
131 | .cm-s-one-dark .cm-string {color: #98c379;}
132 | .cm-s-one-dark .cm-string-2 {color: #98c379;}
133 | 
134 | .cm-s-one-dark .cm-punctuation {color: #abb2bf;}
135 | .cm-s-one-dark .cm-operator {color: #abb2bf;}
136 | .cm-s-one-dark .cm-meta {color: #abb2bf;}
137 | .cm-s-one-dark .cm-bracket {color: #abb2bf;}
138 | .cm-s-one-dark .cm-comment {color: #5c6370;font-style: italic;}
139 | 


--------------------------------------------------------------------------------
/src/components/discordview.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import Moment from 'moment';
  3 | import Embed from './embed';
  4 | import { parse, parseAllowLinks, jumboify } from './markdown';
  5 | 
  6 | 
  7 | const MessageTimestamp = React.createClass({
  8 |   getDefaultProps() {
  9 |     return { compactMode: false };
 10 |   },
 11 | 
 12 |   componentDidMount() {
 13 |     this.timer = setInterval(() => this.tick(), 1000 * 60);
 14 |   },
 15 | 
 16 |   componentWillUnmount() {
 17 |     clearInterval(this.timer);
 18 |   },
 19 | 
 20 |   tick() {
 21 |     this.forceUpdate();
 22 |   },
 23 | 
 24 |   render() {
 25 |     const { compactMode } = this.props;
 26 |     const m = Moment();
 27 |     const computed = compactMode ? m.format('LT') : m.calendar();
 28 | 
 29 |     return <span className='timestamp'>{computed}</span>;
 30 |   },
 31 | });
 32 | 
 33 | const MessageBody = ({ compactMode, username, content, webhookMode }) => {
 34 |   if (compactMode) {
 35 |     return (
 36 |       <div className='markup'>
 37 |         <MessageTimestamp compactMode={compactMode} />
 38 |         <span className='username-wrapper v-btm'>
 39 |           <strong className='user-name'>{username}</strong>
 40 |           <span className='bot-tag'>BOT</span>
 41 |         </span>
 42 |         <span className='highlight-separator'> - </span>
 43 |         <span className='message-content'>{content && parse(content, true, {}, jumboify)}</span>
 44 |       </div>
 45 |     );
 46 |   } else if (content) {
 47 |     if (webhookMode) {
 48 |       return <div className='markup'>{parseAllowLinks(content, true, {}, jumboify)}</div>;
 49 |     }
 50 | 
 51 |     return <div className='markup'>{parse(content, true, {}, jumboify)}</div>;
 52 |   }
 53 | 
 54 |   return null;
 55 | };
 56 | 
 57 | const CozyMessageHeader = ({ compactMode, username }) => {
 58 |   if (compactMode) {
 59 |     return null;
 60 |   }
 61 | 
 62 |   return (
 63 |     <h2 style={{ lineHeight: '16px' }}>
 64 |       <span className='username-wrapper v-btm'>
 65 |         <strong className='user-name'>{username}</strong>
 66 |         <span className='bot-tag'>BOT</span>
 67 |       </span>
 68 |       <span className='highlight-separator'> - </span>
 69 |       <MessageTimestamp compactMode={compactMode} />
 70 |     </h2>
 71 |   );
 72 | };
 73 | 
 74 | const Avatar = ({ compactMode, url }) => {
 75 |   if (compactMode) {
 76 |     return null;
 77 |   }
 78 | 
 79 |   return <div className='avatar-large animate' style={{ backgroundImage: `url('${url}')` }} />;
 80 | };
 81 | 
 82 | const ErrorHeader = ({ error }) => {
 83 |   if (!error) {
 84 |     return null;
 85 |   }
 86 | 
 87 |   return <header className='f6 bg-red br2 pa2 br--top w-100 code pre-wrap'>{error}</header>;
 88 | };
 89 | 
 90 | const DiscordViewWrapper = ({ darkTheme, children }) => {
 91 |   // yikes
 92 |   // we could actually just flatten the styling out on the respective elements,
 93 |   // but copying directly from discord is a lot easier than that
 94 |   return (
 95 |     <div className='w-100 h-100 overflow-auto pa2 discord-view'>
 96 |       <div className={`flex-vertical whitney ${darkTheme && 'theme-dark'}`}>
 97 |         <div className='chat flex-vertical flex-spacer'>
 98 |           <div className='content flex-spacer flex-horizontal'>
 99 |             <div className='flex-spacer flex-vertical messages-wrapper'>
100 |               <div className='scroller-wrap'>
101 |                 <div className='scroller messages'>
102 |                   {children}
103 |                 </div>
104 |               </div>
105 |             </div>
106 |           </div>
107 |         </div>
108 |       </div>
109 |     </div>
110 |   );
111 | };
112 | 
113 | const DiscordView = React.createClass({
114 |   getDefaultProps() {
115 |     return {
116 |       // TODO: make these two configurable?
117 |       username: 'Discord Bot',
118 |       avatar_url: 'https://cdn.discordapp.com/embed/avatars/0.png',
119 | 
120 |       // hehe
121 |       darkTheme: true,
122 |       compactMode: false
123 |     };
124 |   },
125 | 
126 |   render() {
127 |     const {
128 |       compactMode, darkTheme, webhookMode,
129 |       username, avatar_url, error,
130 |       data: { content, embed, embeds }
131 |     } = this.props;
132 | 
133 |     const bgColor = darkTheme ? 'bg-discord-dark' : 'bg-discord-light';
134 |     const cls = `w-100 h-100 br2 flex flex-column white overflow-hidden ${bgColor}`;
135 | 
136 |     return (
137 |       <div className={cls}>
138 |         <ErrorHeader error={error} />
139 |         <DiscordViewWrapper darkTheme={darkTheme}>
140 |           <div className={`message-group hide-overflow ${compactMode ? 'compact' : ''}`}>
141 |             <Avatar url={avatar_url} compactMode={compactMode} />
142 |             <div className='comment'>
143 |               <div className='message first'>
144 |                 <CozyMessageHeader username={username} compactMode={compactMode} />
145 |                 <div className='message-text'>
146 |                   <MessageBody
147 |                     content={content}
148 |                     username={username}
149 |                     compactMode={compactMode}
150 |                     webhookMode={webhookMode}
151 |                   />
152 |                 </div>
153 |                 {embed ? <Embed {...embed} /> : (embeds && embeds.map((e, i) => <Embed key={i} {...e} />))}
154 |               </div>
155 | 
156 |             </div>
157 |           </div>
158 |         </DiscordViewWrapper>
159 |       </div>
160 |     );
161 |   },
162 | });
163 | 
164 | 
165 | export default DiscordView;
166 | 


--------------------------------------------------------------------------------
/src/components/aboutmodal.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import Modal from './modal';
  3 | import SimpleMarkdown from 'simple-markdown';
  4 | import logo from '../images/logo.png';
  5 | 
  6 | 
  7 | // TODO: move this link out of here?
  8 | const GITHUB_REPO = 'https://github.com/leovoel/embed-visualizer';
  9 | 
 10 | const aboutText = `
 11 | -= Visualizer and validator for [Discord embeds][embed-docs]. =-
 12 | 
 13 | ----------------------------------------------------------------
 14 | 
 15 | Its primary purpose is mostly just previewing how some given embed might appear on [Discord][discordapp],
 16 | but it also serves as a reference for the various limits that are imposed on embeds.
 17 | 
 18 | It also contains some primitive code generation, in case you're not sure how to
 19 | use embeds in your library of choice. If your library isn't here you can open an issue/make a pull request about it.
 20 | 
 21 | This tool is not officially part of [Discord][discordapp] or its [documentation][discord-docs].
 22 | It makes use of some assets derived/extracted from their application. This is
 23 | done for the sake of more helpful visuals, and not to infringe on their copyright.
 24 | 
 25 | The source code is available on [GitHub](${GITHUB_REPO}), under the MIT license.
 26 | 
 27 | ### Webhook mode?
 28 | 
 29 | -----------------
 30 | 
 31 | The main difference is that instead of:
 32 | 
 33 | \`\`\`json
 34 | {
 35 |   "embed": {
 36 |     "name": "This is my really cool embed",
 37 |     ...
 38 |   }
 39 | }
 40 | \`\`\`
 41 | 
 42 | ...you should have:
 43 | 
 44 | \`\`\`json
 45 | {
 46 |   "embeds": [
 47 |     { "name": "This is my really cool embed #1", ... },
 48 |     { "name": "This is my really cool embed #2", ... },
 49 |     ...
 50 |   ]
 51 | }
 52 | \`\`\`
 53 | 
 54 | ...and that you can also use masked links - i.e. \`[title](url)\` - on the message content.
 55 | 
 56 | ### Caveats
 57 | 
 58 | -----------
 59 | 
 60 | - No GUI for creating embeds (yet?)
 61 | 
 62 |   Currently the idea is you paste in some JSON and get a rendered version
 63 |   of it back, and maybe do minor edits.
 64 |   In the future some sort of form input mode could be added in.
 65 | 
 66 | - Invites are not rendered
 67 | - Mentions are not rendered
 68 | 
 69 |   This is purely out of laziness, although there's not much that can go wrong with them.  
 70 |   Keep in mind that in embeds, mentions are rendered but do not notify anyone.
 71 | 
 72 | - Images may not render exactly the same
 73 | 
 74 |   There is some logic for limiting sizes when rendering,
 75 |   that is hard to replicate due to the way this was written.
 76 | 
 77 |   It is probably possible to get it to work, but I don't
 78 |   think it's worth the effort (especially to reverse-engineer it out of the client).
 79 | 
 80 |   I don't also know if it's even necessary, hard to tell.
 81 | 
 82 | - JSON data is not exactly the actual data you can send
 83 | 
 84 |   It's not that it's wrong (it may be at some point in the future, but that's not a problem),
 85 |   but rather that there are properties we don't validate/render. This is by design.
 86 | 
 87 |   When in doubt, consult the [docs][embed-docs].
 88 | 
 89 | 
 90 | ### Libraries used (thanks!):
 91 | 
 92 | -----------------------------
 93 |   
 94 | - [React](https://facebook.github.io/react/)
 95 | - [Ajv](https://epoberezkin.github.io/ajv/)
 96 | - [Moment.js](https://momentjs.com)
 97 | - [CodeMirror](https://codemirror.net)
 98 | - [highlight.js](https://highlightjs.org)
 99 | - [simple-markdown](https://github.com/Khan/simple-markdown)
100 | - [Twemoji](https://github.com/twitter/twemoji)
101 | - [lodash](https://lodash.com)
102 | - [Tachyons](http://tachyons.io)
103 | 
104 | 
105 | [discordapp]: https://discordapp.com/
106 | [discord-docs]: https://discordapp.com/developers/docs/intro
107 | [embed-docs]: https://discordapp.com/developers/docs/resources/channel#embed-object
108 | `;
109 | 
110 | const rules = {
111 |   ...SimpleMarkdown.defaultRules,
112 | 
113 |   center: {
114 |     // really naive but we'll be ok
115 |     match: SimpleMarkdown.blockRegex(/^-= (.*?) =-/),
116 |     order: SimpleMarkdown.defaultRules.paragraph.order,
117 | 
118 |     parse(capture, recurseParse, state) {
119 |       return { content: SimpleMarkdown.parseInline(recurseParse, capture[1], state) };
120 |     },
121 | 
122 |     react(node, recurseOutput, state) {
123 |       return <div key={state.key} className='db b f3 mv2 tc'>{recurseOutput(node.content, state)}</div>;
124 |     }
125 |   },
126 | 
127 |   paragraph: {
128 |     ...SimpleMarkdown.defaultRules.paragraph,
129 |     react(node, recurseOutput, state) {
130 |       return <p key={state.key}>{recurseOutput(node.content, state)}</p>;
131 |     },
132 |   },
133 | 
134 |   link: {
135 |     ...SimpleMarkdown.defaultRules.link,
136 |     react(node, recurseOutput, state) {
137 |       return (
138 |         <a
139 |           className='link blurple underline-hover'
140 |           href={SimpleMarkdown.sanitizeUrl(node.target)}
141 |           title={node.title}
142 |           key={state.key}
143 |           target='_blank'
144 |         >
145 |           {recurseOutput(node.content, state)}
146 |         </a>
147 |       );
148 |     },
149 |   },
150 | 
151 |   list: {
152 |     ...SimpleMarkdown.defaultRules.list,
153 |     react(node, recurseOutput, state) {
154 |       return React.createElement(
155 |         node.ordered ? 'ol' : 'ul',
156 |         {
157 |           start: node.start,
158 |           key: state.key,
159 |           className: 'mb4 pl4',
160 |           children: node.items.map((item, i) => {
161 |             return <li key={i}>{recurseOutput(item, state)}</li>;
162 |           })
163 |         }
164 |       );
165 |     },
166 |   },
167 | 
168 |   hr: {
169 |     ...SimpleMarkdown.defaultRules.hr,
170 |     react(node, recurseOutput, state) {
171 |       return <hr className='b--solid b--light-gray ma0' key={state.key} />;
172 |     }
173 |   },
174 | };
175 | 
176 | const parser = SimpleMarkdown.parserFor(rules);
177 | const renderer = SimpleMarkdown.reactFor(SimpleMarkdown.ruleOutput(rules, 'react'));
178 | 
179 | const renderAboutText = (input) => {
180 |   input += '\n\n';
181 |   return renderer(parser(input, { inline: false }));
182 | };
183 | 
184 | const AboutModal = (props) => {
185 |   return (
186 |     <Modal title='About' maxWidth='80ch' maxHeight='90%' {...props}>
187 |       <div className='ma3 nested-copy-seperator nested-copy-line-height'>
188 |         <div className='center w4'>
189 |           <a href={GITHUB_REPO} title='Embed Visualizer' target='_blank'>
190 |             <img src={logo} alt='Embed Visualizer' />
191 |           </a>
192 |         </div>
193 |         {renderAboutText(aboutText)}
194 |       </div>
195 |     </Modal>
196 |   );
197 | };
198 | 
199 | 
200 | export default AboutModal;
201 | 


--------------------------------------------------------------------------------
/src/validation.js:
--------------------------------------------------------------------------------
  1 | import { botMessageSchema, webhookMessageSchema } from './constants/embedschema';
  2 | 
  3 | 
  4 | function traverseObject(object, path) {
  5 |   let result = object;
  6 | 
  7 |   for (const fragment of path) {
  8 |     if (fragment[fragment.length - 1] === ']') {
  9 |       // simple ~assumption~
 10 |       const indexStart = fragment.lastIndexOf('[');
 11 |       const indexEnd = fragment.lastIndexOf(']');
 12 | 
 13 |       const key = fragment.slice(0, indexStart);
 14 |       const array = result[key];
 15 | 
 16 |       if (array !== undefined || array !== null) {
 17 |         if (indexStart !== -1 && indexEnd !== -1) {
 18 |           const index = parseInt(fragment.slice(indexStart + 1, indexEnd), 10);
 19 |           const element = array[index];
 20 | 
 21 |           if (element === undefined || element === null) {
 22 |             break;
 23 |           }
 24 | 
 25 |           result = element;
 26 |         }
 27 |       }
 28 |     } else {
 29 |       const sub = result[fragment];
 30 |       if (sub === undefined || sub === null) break;
 31 |       result = sub;
 32 |     }
 33 |   }
 34 | 
 35 |   return result;
 36 | }
 37 | 
 38 | // TODO: rewrite these so that we can report errors during validation instead of after?
 39 | // in these we assume the data path is always NOT at the root
 40 | const customMessages = {
 41 |   additionalProperties(data, e) {
 42 |     let result = `Unrecognized property "${e.params.additionalProperty}"`;
 43 | 
 44 |     if (e.dataPath) {
 45 |       result += ` in "${e.dataPath.slice(1)}"`;
 46 |     }
 47 | 
 48 |     return result;
 49 |   },
 50 | 
 51 |   minProperties(data, e) {
 52 |     const dataPath = e.dataPath.slice(1);
 53 | 
 54 |     if (e.params.limit === 1) {
 55 |       return `"${dataPath}" should NOT be empty`;
 56 |     }
 57 | 
 58 |     return `"${dataPath}" ${e.message}`;
 59 |   },
 60 | 
 61 |   maxLength(data, e) {
 62 |     const dataPath = e.dataPath.slice(1);
 63 | 
 64 |     const path = dataPath.split('.');
 65 |     const dest = traverseObject(data, path);
 66 |     // count full code points instead of utf-16 code units
 67 |     const length = [...dest].length;
 68 | 
 69 |     return `"${dataPath}" ${e.message} (${length} currently)`;
 70 |   },
 71 | 
 72 |   maxItems(data, e) {
 73 |     const dataPath = e.dataPath.slice(1);
 74 | 
 75 |     const path = dataPath.split('.');
 76 |     const dest = traverseObject(data, path);
 77 |     const length = dest.length;
 78 | 
 79 |     return `"${dataPath}" ${e.message} (${length} currently)`;
 80 |   },
 81 | 
 82 |   // right now this is just being used for the timestamp
 83 |   // so we can safely assume this is all about it.
 84 |   // if we were to support more regex validators, this should
 85 |   // be a custom keyword or something.
 86 |   pattern(data, e) {
 87 |     const dataPath = e.dataPath.slice(1);
 88 | 
 89 |     const path = dataPath.split('.');
 90 |     const dest = traverseObject(data, path);
 91 | 
 92 |     let result = `"${dataPath}" is not a valid timestamp.`;
 93 | 
 94 |     const m = /^\d{4}-\d\d-\d\d(?:[T ]\d\d:\d\d:\d\d(?:\.\d+)?([+-]\d\d(?::\d\d)?)?)?$/.exec(dest);
 95 |     if (m) {
 96 |       result = `You can't specify UTC offsets in "${dataPath}", just Z or nothing (not even +00:00 is supported)`;
 97 |     }
 98 | 
 99 |     return result;
100 |   }
101 | }
102 | 
103 | function registerKeywords(ajv) {
104 | 
105 |   const disallowed = {
106 |       type: 'object',
107 |       errors: true,
108 |       compile: function(disallowedProperties) {
109 |       // we're assuming disallowedProperties is an array, so
110 |       // code below is commented out.
111 | 
112 |       // const typeString = Object.prototype.toString.call(disallowedProperties);
113 |       // if (typeString !== '[object Array]') {
114 |       //   throw new Error('Expected [object Array], got ' + typeString);
115 |       // }
116 | 
117 |       function disallowOne(data) {
118 |         for (const property of disallowedProperties) {
119 |           if (data[property] !== undefined) {
120 |             disallowOne.errors = [];
121 |             pushError(disallowOne.errors, property);
122 |             return false;
123 |           }
124 |         }
125 | 
126 |         return true;
127 |       }
128 | 
129 |       function disallowAny(data) {
130 |         const errors = [];
131 | 
132 |         for (const property of disallowedProperties) {
133 |           if (data[property] !== undefined) {
134 |             pushError(errors, property);
135 |           }
136 |         }
137 | 
138 |         if (errors.length) {
139 |           disallowAny.errors = errors;
140 |         }
141 | 
142 |         return errors.length === 0;
143 |       }
144 | 
145 |       function pushError(errors, name) {
146 |         errors.push({
147 |           keyword: 'disallowed',
148 |           params: { propertyName: name },
149 |           message: `should NOT contain "${name}"`
150 |         });
151 |       }
152 | 
153 |       return ajv._opts.allErrors ? disallowAny : disallowOne;
154 |     }
155 |   };
156 | 
157 |   const atLeastOneOf = {
158 |     type: 'object',
159 |     errors: true,
160 |     compile: function(expectedProperties) {
161 |       function inner(data) {
162 |         for (const property in data) {
163 |           if (expectedProperties.indexOf(property) !== -1) {
164 |             return true;
165 |           }
166 |         }
167 | 
168 |         const expected = expectedProperties
169 |           .map(property => `"${property}"`)
170 |           .join(', ');
171 | 
172 |         inner.errors = [{
173 |           keyword: 'atLeastOneOf',
174 |           params: { expectedProperties },
175 |           message: `should contain at least one of: ${expected}`
176 |         }];
177 | 
178 |         return false;
179 |       }
180 | 
181 |       return inner;
182 |     }
183 |   };
184 | 
185 |   const trim = {
186 |     type: 'string',
187 |     errors: true,
188 |     compile: function(enabled) {
189 |       function inner(data) {
190 |         if (data && data.trim()) {
191 |           return true;
192 |         }
193 | 
194 |         inner.errors = [{
195 |           keyword: 'trim',
196 |           params: { enabled },
197 |           message: 'should NOT be empty'
198 |         }];
199 | 
200 |         return false;
201 |       }
202 | 
203 |       if (enabled) {
204 |         return inner;
205 |       }
206 | 
207 |       // pass-thru
208 |       return (data) => true;
209 |     }
210 |   };
211 | 
212 |   ajv.addKeyword('disallowed', disallowed);
213 |   ajv.addKeyword('atLeastOneOf', atLeastOneOf);
214 |   ajv.addKeyword('trim', trim);
215 |   return ajv;
216 | }
217 | 
218 | function stringifyErrors(data, errors, options) {
219 |   // we expect the data to be passed as well since
220 |   // that way we can report better errors.
221 | 
222 |   if (!errors) {
223 |     return 'No errors';
224 |   }
225 | 
226 |   const opt = {
227 |     separator: '\n',
228 |     root: 'root',
229 |     ...options
230 |   };
231 | 
232 |   let text = '';
233 | 
234 |   for (let i = 0; i < errors.length; i++) {
235 |     const error = errors[i];
236 | 
237 |     if (!error) {
238 |       continue;
239 |     }
240 | 
241 |     if (customMessages[error.keyword]) {
242 |       text += customMessages[error.keyword](data, error) + opt.separator;
243 |     } else {
244 |       if (error.dataPath) {
245 |         // dataPath starts with a dot, which we don't
246 |         // want for properties on the top-level
247 |         text += `"${error.dataPath.slice(1)}" ${error.message}${opt.separator}`;
248 |       } else {
249 |         text += `${opt.root} ${error.message}${opt.separator}`;
250 |       }
251 |     }
252 |   }
253 | 
254 |   return text.slice(0, -opt.separator.length);
255 | }
256 | 
257 | export { botMessageSchema, webhookMessageSchema, registerKeywords, stringifyErrors };
258 | 


--------------------------------------------------------------------------------
/src/css/index.css:
--------------------------------------------------------------------------------
  1 | @import './tachyons.css';
  2 | @import './codemirror-one-dark.css';
  3 | 
  4 | @font-face {
  5 |   font-family: Whitney;
  6 |   font-style: light;
  7 |   font-weight: 300;
  8 |   src: url(https://discordapp.com/assets/6c6374bad0b0b6d204d8d6dc4a18d820.woff) format('woff');
  9 | }
 10 | 
 11 | @font-face {
 12 |   font-family: Whitney;
 13 |   font-style: normal;
 14 |   font-weight: 500;
 15 |   src: url(https://discordapp.com/assets/e8acd7d9bf6207f99350ca9f9e23b168.woff) format('woff');
 16 | }
 17 | 
 18 | @font-face {
 19 |   font-family: Whitney;
 20 |   font-style: medium;
 21 |   font-weight: 600;
 22 |   src: url(https://discordapp.com/assets/3bdef1251a424500c1b3a78dea9b7e57.woff) format('woff');
 23 | }
 24 | 
 25 | @font-face {
 26 |   font-family: WhitneyMedium;
 27 |   font-style: medium;
 28 |   font-weight: 600;
 29 |   src: url(https://discordapp.com/assets/be0060dafb7a0e31d2a1ca17c0708636.woff) format('woff');
 30 | }
 31 | 
 32 | @font-face {
 33 |   font-family: Whitney;
 34 |   font-style: bold;
 35 |   font-weight: 700;
 36 |   src: url(https://discordapp.com/assets/8e12fb4f14d9c4592eb8ec9f22337b04.woff) format('woff');
 37 | }
 38 | 
 39 | /* -- colors -- */
 40 | 
 41 | .blurple            { color:            #7289DA; }
 42 | .bg-blurple         { background-color: #7289DA; }
 43 | .red                { color:            #F04747; }
 44 | .bg-red             { background-color: #F04747; }
 45 | .bg-discord-light   { background-color: #ffffff; }
 46 | .bg-discord-dark    { background-color: #36393e; }
 47 | 
 48 | /* -- colors -- */
 49 | 
 50 | /* -- box shadow -- */
 51 | 
 52 | .shadow-1 { box-shadow: 0 2px  8px  rgba(0, 0, 0, 0.3); }
 53 | .shadow-2 { box-shadow: 0 5px  15px rgba(0, 0, 0, 0.3); }
 54 | .shadow-3 { box-shadow: 0 14px 25px rgba(0, 0, 0, 0.4); }
 55 | .shadow-4 { box-shadow: 0 28px 50px rgba(0, 0, 0, 0.4); }
 56 | 
 57 | /* -- box shadow -- */
 58 | 
 59 | /* -- hover -- */
 60 | 
 61 | [class *= 'shadow-hover'] { transition: box-shadow 0.5s ease; }
 62 | .shadow-hover-1:hover, .shadow-hover-1:focus { box-shadow: 0 2px  8px  rgba(0, 0, 0, 0.3); }
 63 | .shadow-hover-2:hover, .shadow-hover-2:focus { box-shadow: 0 5px  15px rgba(0, 0, 0, 0.3); }
 64 | .shadow-hover-3:hover, .shadow-hover-3:focus { box-shadow: 0 14px 25px rgba(0, 0, 0, 0.4); }
 65 | .shadow-hover-4:hover, .shadow-hover-4:focus { box-shadow: 0 28px 50px rgba(0, 0, 0, 0.4); }
 66 | 
 67 | .shadow-up-hover { position: relative; top: 0; transition: box-shadow 0.1s ease, top 0.1s ease; }
 68 | .shadow-up-hover:hover, .shadow-up-hover:active { top: -.1rem; }
 69 | 
 70 | /* -- hover -- */
 71 | 
 72 | /* -- misc -- */
 73 | 
 74 | .flex-shrink-0 { flex-shrink: 0; }
 75 | .pre-wrap { white-space: pre-wrap; }
 76 | .resize-none { resize: none; }
 77 | .open-sans { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
 78 | .whitney { font-family: Whitney, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
 79 | 
 80 | /* -- misc -- */
 81 | 
 82 | /* -- modal -- */
 83 | 
 84 | .modal-enter { opacity: 0; }
 85 | .modal-enter .inner { transform: scale(0.5); }
 86 | 
 87 | .modal-enter-active { animation: fade-in 190ms ease-out; }
 88 | .modal-enter-active .inner { animation: zoom-in 190ms ease-in-out; }
 89 | 
 90 | .modal-leave { opacity: 1; }
 91 | .modal-leave .inner { transform: scale(1); }
 92 | 
 93 | .modal-leave-active { animation: fade-out 190ms ease-in; }
 94 | .modal-leave-active .inner { animation: zoom-out 190ms ease-in; }
 95 | 
 96 | @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
 97 | @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
 98 | 
 99 | @keyframes zoom-out {
100 |   0% { transform: scale(1); }
101 |   20% { transform: scale(0.95); }
102 |   100% { transform: scale(0.1); }
103 | }
104 | 
105 | @keyframes zoom-in {
106 |   0% { transform: scale(0.8); }
107 |   50% { transform: scale(1.02); }
108 |   100% { transform: scale(1); }
109 | }
110 | 
111 | /* -- modal -- */
112 | 
113 | /* -- codemirror -- */
114 | 
115 | .CodeMirror {
116 |   height: 100%;
117 |   border-radius: .25rem;
118 |   z-index: 0;
119 |   font-family: Consolas, Monaco, monospace;
120 |   font-weight: 300;
121 |   font-size: 14px;
122 | }
123 | 
124 | /* -- codemirror -- */
125 | 
126 | /* -- highlight.js -- */
127 | 
128 | /*
129 | 
130 | we use a different class name here since
131 | we'd like to keep the code blocks for the discord view
132 | the same as they would be in the actual application
133 | ---------------------------------------------------
134 | */
135 | 
136 | /*!
137 | Atom One Dark by Daniel Gamage
138 | Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
139 | */
140 | 
141 | .atom-one-dark {
142 |   display: block !important;
143 |   overflow-x: auto !important;
144 |   padding: 0.5em !important;
145 |   color: #abb2bf !important;
146 |   background: #282c34 !important;
147 | }
148 | 
149 | .atom-one-dark > .hljs-comment,
150 | .atom-one-dark > .hljs-quote {
151 |   color: #5c6370;
152 |   font-style: italic;
153 | }
154 | 
155 | .atom-one-dark > .hljs-doctag,
156 | .atom-one-dark > .hljs-keyword,
157 | .atom-one-dark > .hljs-formula {
158 |   color: #c678dd;
159 | }
160 | 
161 | .atom-one-dark > .hljs-section,
162 | .atom-one-dark > .hljs-name,
163 | .atom-one-dark > .hljs-selector-tag,
164 | .atom-one-dark > .hljs-deletion,
165 | .atom-one-dark > .hljs-subst {
166 |   color: #e06c75;
167 | }
168 | 
169 | .atom-one-dark > .hljs-literal {
170 |   color: #56b6c2;
171 | }
172 | 
173 | .atom-one-dark > .hljs-string,
174 | .atom-one-dark > .hljs-regexp,
175 | .atom-one-dark > .hljs-addition,
176 | .atom-one-dark > .hljs-attribute,
177 | .atom-one-dark > .hljs-meta-string {
178 |   color: #98c379;
179 | }
180 | 
181 | .atom-one-dark > .hljs-built_in,
182 | .atom-one-dark > .hljs-class .hljs-title {
183 |   color: #e6c07b;
184 | }
185 | 
186 | .atom-one-dark > .hljs-attr,
187 | .atom-one-dark > .hljs-variable,
188 | .atom-one-dark > .hljs-template-variable,
189 | .atom-one-dark > .hljs-type,
190 | .atom-one-dark > .hljs-selector-class,
191 | .atom-one-dark > .hljs-selector-attr,
192 | .atom-one-dark > .hljs-selector-pseudo,
193 | .atom-one-dark > .hljs-number {
194 |   color: #d19a66;
195 | }
196 | 
197 | .atom-one-dark > .hljs-symbol,
198 | .atom-one-dark > .hljs-bullet,
199 | .atom-one-dark > .hljs-link,
200 | .atom-one-dark > .hljs-meta,
201 | .atom-one-dark > .hljs-selector-id,
202 | .atom-one-dark > .hljs-title {
203 |   color: #61aeee;
204 | }
205 | 
206 | .atom-one-dark > .hljs-emphasis {
207 |   font-style: italic;
208 | }
209 | 
210 | .atom-one-dark > .hljs-strong {
211 |   font-weight: bold;
212 | }
213 | 
214 | .atom-one-dark > .hljs-link {
215 |   text-decoration: underline;
216 | }
217 | 
218 | /*!
219 | Atom One Light by Daniel Gamage
220 | Original One Light Syntax theme from https://github.com/atom/one-light-syntax
221 | */
222 | 
223 | .atom-one-light {
224 |   display: block !important;
225 |   overflow-x: auto !important;
226 |   padding: 0.5em !important;
227 |   color: #383a42 !important;
228 |   background: #fafafa !important;
229 | }
230 | 
231 | .atom-one-light > .hljs-comment,
232 | .atom-one-light > .hljs-quote {
233 |   color: #a0a1a7;
234 |   font-style: italic;
235 | }
236 | 
237 | .atom-one-light > .hljs-doctag,
238 | .atom-one-light > .hljs-keyword,
239 | .atom-one-light > .hljs-formula {
240 |   color: #a626a4;
241 | }
242 | 
243 | .atom-one-light > .hljs-section,
244 | .atom-one-light > .hljs-name,
245 | .atom-one-light > .hljs-selector-tag,
246 | .atom-one-light > .hljs-deletion,
247 | .atom-one-light > .hljs-subst {
248 |   color: #e45649;
249 | }
250 | 
251 | .atom-one-light > .hljs-literal {
252 |   color: #0184bb;
253 | }
254 | 
255 | .atom-one-light > .hljs-string,
256 | .atom-one-light > .hljs-regexp,
257 | .atom-one-light > .hljs-addition,
258 | .atom-one-light > .hljs-attribute,
259 | .atom-one-light > .hljs-meta-string {
260 |   color: #50a14f;
261 | }
262 | 
263 | .atom-one-light > .hljs-built_in,
264 | .atom-one-light > .hljs-class .hljs-title {
265 |   color: #c18401;
266 | }
267 | 
268 | .atom-one-light > .hljs-attr,
269 | .atom-one-light > .hljs-variable,
270 | .atom-one-light > .hljs-template-variable,
271 | .atom-one-light > .hljs-type,
272 | .atom-one-light > .hljs-selector-class,
273 | .atom-one-light > .hljs-selector-attr,
274 | .atom-one-light > .hljs-selector-pseudo,
275 | .atom-one-light > .hljs-number {
276 |   color: #986801;
277 | }
278 | 
279 | .atom-one-light > .hljs-symbol,
280 | .atom-one-light > .hljs-bullet,
281 | .atom-one-light > .hljs-link,
282 | .atom-one-light > .hljs-meta,
283 | .atom-one-light > .hljs-selector-id,
284 | .atom-one-light > .hljs-title {
285 |   color: #4078f2;
286 | }
287 | 
288 | .atom-one-light > .hljs-emphasis {
289 |   font-style: italic;
290 | }
291 | 
292 | .atom-one-light > .hljs-strong {
293 |   font-weight: bold;
294 | }
295 | 
296 | .atom-one-light > .hljs-link {
297 |   text-decoration: underline;
298 | }
299 | 
300 | /* -- highlight.js -- */
301 | 


--------------------------------------------------------------------------------
/src/components/app.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { SketchPicker } from 'react-color';
  3 | 
  4 | import Button from './button';
  5 | import ModalContainer from './modalcontainer';
  6 | import AboutModal from './aboutmodal';
  7 | import CodeModal from './codemodal';
  8 | import WarningModal from './warningmodal';
  9 | import CodeMirror from './codemirror';
 10 | import DiscordView from './discordview';
 11 | 
 12 | import Ajv from 'ajv';
 13 | import {
 14 |   botMessageSchema,
 15 |   webhookMessageSchema,
 16 |   registerKeywords,
 17 |   stringifyErrors,
 18 | } from '../validation';
 19 | 
 20 | import {
 21 |   extractRGB,
 22 |   combineRGB,
 23 | } from '../color';
 24 | 
 25 | 
 26 | const ajv = registerKeywords(new Ajv({ allErrors: true }));
 27 | const validators = {
 28 |   regular: ajv.compile(botMessageSchema),
 29 |   webhook: ajv.compile(webhookMessageSchema),
 30 | };
 31 | 
 32 | function FooterButton(props) {
 33 |   return <Button {...props} className='shadow-1 shadow-hover-2 shadow-up-hover' />;
 34 | }
 35 | 
 36 | const initialContent = 'this `supports` __a__ **subset** *of* ~~markdown~~ 😃 ```js\nfunction foo(bar) {\n  console.log(bar);\n}\n\nfoo(1);```';
 37 | const initialColor = Math.floor(Math.random() * 0xFFFFFF);
 38 | const initialEmbed = {
 39 |   title: 'title ~~(did you know you can have markdown here too?)~~',
 40 |   description: 'this supports [named links](https://discordapp.com) on top of the previously shown subset of markdown. ```\nyes, even code blocks```',
 41 |   url: 'https://discordapp.com',
 42 |   color: initialColor,
 43 |   timestamp: new Date().toISOString(),
 44 |   footer: { icon_url: 'https://cdn.discordapp.com/embed/avatars/0.png', text: 'footer text' },
 45 |   thumbnail: { url: 'https://cdn.discordapp.com/embed/avatars/0.png' },
 46 |   image: { url: 'https://cdn.discordapp.com/embed/avatars/0.png' },
 47 |   author: {
 48 |     name: 'author name',
 49 |     url: 'https://discordapp.com',
 50 |     icon_url: 'https://cdn.discordapp.com/embed/avatars/0.png'
 51 |   },
 52 |   fields: [
 53 |     { name: '🤔', value: 'some of these properties have certain limits...' },
 54 |     { name: '😱', value: 'try exceeding some of them!' },
 55 |     { name: '🙄', value: 'an informative error should show up, and this view will remain as-is until all issues are fixed' },
 56 |     { name: '<:thonkang:219069250692841473>', value: 'these last two', inline: true },
 57 |     { name: '<:thonkang:219069250692841473>', value: 'are inline fields', inline: true }
 58 |   ]
 59 | };
 60 | 
 61 | // this is just for convenience.
 62 | // TODO: vary this more?
 63 | const initialCode = JSON.stringify({
 64 |   content: initialContent,
 65 |   embed: initialEmbed
 66 | }, null, '  ');
 67 | 
 68 | const webhookExample = JSON.stringify({
 69 |   content: `${initialContent}\nWhen sending webhooks, you can have [masked links](https://discordapp.com) in here!`,
 70 |   embeds: [
 71 |     initialEmbed,
 72 |     {
 73 |       title: 'Woah',
 74 |       description: 'You can also have multiple embeds!\n**NOTE**: The color picker does not work with multiple embeds (yet).'
 75 |     },
 76 |   ]
 77 | }, null, '  ');
 78 | 
 79 | const App = React.createClass({
 80 |   // TODO: serialize input, webhookMode, compactMode and darkTheme to query string?
 81 | 
 82 |   getInitialState() {
 83 |     return {
 84 |       webhookMode: false,
 85 |       compactMode: false,
 86 |       darkTheme: true,
 87 |       currentModal: null,
 88 |       input: initialCode,
 89 |       data: {},
 90 |       error: null,
 91 |       colorPickerShowing: false,
 92 |       embedColor: extractRGB(initialColor),
 93 | 
 94 |       // TODO: put in local storage?
 95 |       webhookExampleWasShown: false,
 96 |     };
 97 |   },
 98 | 
 99 |   validateInput(input, webhookMode) {
100 |     const validator = webhookMode ? validators.webhook : validators.regular;
101 | 
102 |     let parsed;
103 |     let isValid = false;
104 |     let error = '';
105 | 
106 |     try {
107 |       parsed = JSON.parse(input);
108 |       isValid = validator(parsed);
109 |       if (!isValid) {
110 |         error = stringifyErrors(parsed, validator.errors);
111 |       }
112 |     } catch (e) {
113 |       error = e.message;
114 |     }
115 | 
116 |     let data = isValid ? parsed : this.state.data;
117 | 
118 |     let embedColor = { r: 0, g: 0, b: 0 };
119 |     if (webhookMode && isValid && data.embeds && data.embeds[0]) {
120 |       embedColor = extractRGB(data.embeds[0].color);
121 |     } else if (!webhookMode && isValid && data.embed) {
122 |       embedColor = extractRGB(data.embed.color);
123 |     }
124 | 
125 |     // we set all these here to avoid some re-renders.
126 |     // maybe it's okay (and if we ever want to
127 |     // debounce validation, we need to take some of these out)
128 |     // but for now that's what we do.
129 |     this.setState({ input, data, error, webhookMode, embedColor });
130 |   },
131 | 
132 |   componentWillMount() {
133 |     this.validateInput(this.state.input, this.state.webhookMode);
134 |   },
135 | 
136 |   onCodeChange(value, change) {
137 |     // for some reason this fires without the value changing...?
138 |     if (value !== this.state.input) {
139 |       this.validateInput(value, this.state.webhookMode);
140 |     }
141 |   },
142 | 
143 |   openAboutModal() {
144 |     this.setState({ currentModal: AboutModal });
145 |   },
146 | 
147 |   openCodeModal() {
148 |     this.setState({ currentModal: CodeModal });
149 |   },
150 | 
151 |   closeModal() {
152 |     this.setState({ currentModal: null });
153 |   },
154 | 
155 |   toggleWebhookMode() {
156 |     if (!this.state.webhookExampleWasShown) {
157 |       this.setState({ currentModal: WarningModal });
158 |     } else {
159 |       this.validateInput(this.state.input, !this.state.webhookMode);
160 |     }
161 |   },
162 | 
163 |   displayWebhookExample() {
164 |     this.setState({ currentModal: null, webhookExampleWasShown: true });
165 |     this.validateInput(webhookExample, true);
166 |   },
167 | 
168 |   dismissWebhookExample() {
169 |     this.setState({ currentModal: null, webhookExampleWasShown: true });
170 |     this.validateInput(this.state.input, true);
171 |   },
172 | 
173 |   toggleTheme() {
174 |     this.setState({ darkTheme: !this.state.darkTheme });
175 |   },
176 | 
177 |   toggleCompactMode() {
178 |     this.setState({ compactMode: !this.state.compactMode });
179 |   },
180 |   
181 |   openColorPicker() {
182 |     this.setState({ colorPickerShowing: !this.state.colorPickerShowing });
183 |   },
184 |   
185 |   colorChange(color) {
186 |     let val = combineRGB(color.rgb.r, color.rgb.g, color.rgb.b);
187 |     if (val === 0) val = 1; // discord wont accept 0
188 |     const input = this.state.input.replace(/"color"\s*:\s*([0-9]+)/, '"color": ' + val);
189 |     this.validateInput(input, this.state.webhookMode);
190 |   },
191 | 
192 |   render() {
193 |     const webhookModeLabel = `${this.state.webhookMode ? 'Dis' : 'En'}able webhook mode`;
194 |     const themeLabel = `${this.state.darkTheme ? 'Light' : 'Dark'} theme`;
195 |     const compactModeLabel = `${this.state.compactMode ? 'Cozy' : 'Compact'} mode`;
196 |     const colorPickerLabel = `${!this.state.colorPickerShowing ? 'Open' : 'Close'} color picker`;
197 | 
198 |     const colorPicker = this.state.colorPickerShowing ? (
199 |       <div style={{
200 |         position: 'absolute',
201 |         bottom: '45px',
202 |         marginLeft: '-25px',
203 |       }}>
204 |         <SketchPicker
205 |           color={this.state.embedColor}
206 |           onChange={this.colorChange}
207 |           disableAlpha={true}
208 |         />
209 |       </div>
210 |     ) : null;
211 |     
212 |     return (
213 |       <main className='vh-100-l bg-blurple open-sans'>
214 | 
215 |         <div className='h-100 flex flex-column'>
216 |           <section className='flex-l flex-auto'>
217 |             <div className='vh-100 h-auto-l w-100 w-50-l pa4 pr3-l pb0-l'>
218 |               <CodeMirror
219 |                 onChange={this.onCodeChange}
220 |                 value={this.state.input}
221 |                 theme={this.state.darkTheme ? 'one-dark' : 'default'}
222 |               />
223 |             </div>
224 |             <div className='vh-100 h-auto-l w-100 w-50-l pa4 pl3-l pb0'>
225 |               <DiscordView
226 |                 data={this.state.data}
227 |                 error={this.state.error}
228 |                 webhookMode={this.state.webhookMode}
229 |                 darkTheme={this.state.darkTheme}
230 |                 compactMode={this.state.compactMode}
231 |               />
232 |             </div>
233 |           </section>
234 | 
235 |           <footer className='w-100 pa3 tc white'>
236 |             <FooterButton label='Generate code' onClick={this.openCodeModal} />
237 |             <div style={{ position: 'relative', display: 'inline-block' }}>
238 |               <FooterButton label={colorPickerLabel} onClick={this.openColorPicker} />
239 |               {colorPicker}
240 |             </div>
241 |             <FooterButton label={webhookModeLabel} onClick={this.toggleWebhookMode} />
242 |             <FooterButton label={themeLabel} onClick={this.toggleTheme} />
243 |             <FooterButton label={compactModeLabel} onClick={this.toggleCompactMode} />
244 |             <FooterButton label='About' onClick={this.openAboutModal} />
245 |           </footer>
246 |         </div>
247 | 
248 |         <ModalContainer
249 |           yes={this.displayWebhookExample}
250 |           no={this.dismissWebhookExample}
251 |           close={this.closeModal}
252 |           data={this.state.data}
253 |           webhookMode={this.state.webhookMode}
254 |           darkTheme={this.state.darkTheme}
255 |           hasError={this.state.error !== null && this.state.error !== ''}
256 |           currentModal={this.state.currentModal}
257 |         />
258 |       </main>
259 |     );
260 |   },
261 | });
262 | 
263 | 
264 | export default App;
265 | 


--------------------------------------------------------------------------------
/src/components/markdown.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import SimpleMarkdown from 'simple-markdown';
  3 | import hljs from 'highlight.js';
  4 | import Twemoji from 'twemoji';
  5 | import Emoji from '../constants/emoji';
  6 | 
  7 | 
  8 | // this is mostly translated from discord's client,
  9 | // although it's not 1:1 since the client js is minified
 10 | // and also is transformed into some tricky code
 11 | 
 12 | // names are weird and sometimes missing, as i'm not sure
 13 | // what all of these are doing exactly.
 14 | 
 15 | 
 16 | function flattenAst(node, parent) {
 17 |   if (Array.isArray(node)) {
 18 |     for (let n = 0; n < node.length; n++) {
 19 |       node[n] = flattenAst(node[n], parent);
 20 |     }
 21 | 
 22 |     return node;
 23 |   }
 24 | 
 25 |   if (node.content != null) {
 26 |     node.content = flattenAst(node.content, node);
 27 |   }
 28 | 
 29 |   if (parent != null && node.type === parent.type) {
 30 |     return node.content;
 31 |   }
 32 | 
 33 |   return node;
 34 | }
 35 | 
 36 | function astToString(node) {
 37 |   function inner(node, result=[]) {
 38 |     if (Array.isArray(node)) {
 39 |       node.forEach(subNode => astToString(subNode, result));
 40 |     } else if (typeof node.content === 'string') {
 41 |       result.push(node.content);
 42 |     } else if (node.content != null) {
 43 |       astToString(node.content, result);
 44 |     }
 45 | 
 46 |     return result;
 47 |   }
 48 | 
 49 |   return inner(node).join('');
 50 | }
 51 | 
 52 | function parserFor(rules, returnAst) {
 53 |   const parser = SimpleMarkdown.parserFor(rules);
 54 |   const renderer = SimpleMarkdown.reactFor(SimpleMarkdown.ruleOutput(rules, 'react'));
 55 |   return function(input='', inline=true, state={}, transform=null) {
 56 |     if (!inline) {
 57 |       input += '\n\n';
 58 |     }
 59 | 
 60 |     let ast = parser(input, { inline, ...state });
 61 |     ast = flattenAst(ast);
 62 |     if (transform) {
 63 |       ast = transform(ast);
 64 |     }
 65 | 
 66 |     if (returnAst) {
 67 |       return ast;
 68 |     }
 69 | 
 70 |     return renderer(ast);
 71 |   }
 72 | }
 73 | 
 74 | function omit(object, excluded) {
 75 |   return Object.keys(object).reduce((result, key) => {
 76 |     if (excluded.indexOf(key) === -1) {
 77 |       result[key] = object[key];
 78 |     }
 79 | 
 80 |     return result;
 81 |   }, {});
 82 | }
 83 | 
 84 | // emoji stuff
 85 | 
 86 | const getEmoteURL = (emote) => `${location.protocol}//cdn.discordapp.com/emojis/${emote.id}.png`;
 87 | 
 88 | function getEmojiURL(surrogate) {
 89 |   if (['™', '©', '®'].indexOf(surrogate) > -1) {
 90 |     return '';
 91 |   }
 92 | 
 93 |   try {
 94 |     // we could link to discord's cdn, but there's a lot of these
 95 |     // and i'd like to minimize the amount of data we need directly from them
 96 |     return `https://twemoji.maxcdn.com/2/svg/${Twemoji.convert.toCodePoint(surrogate)}.svg`;
 97 |   } catch (error) {
 98 |     return '';
 99 |   }
100 | }
101 | 
102 | // emoji lookup tables
103 | 
104 | const DIVERSITY_SURROGATES = ['🏻', '🏼', '🏽', '🏾', '🏿'];
105 | const NAME_TO_EMOJI = {};
106 | const EMOJI_TO_NAME = {};
107 | 
108 | Object.keys(Emoji).forEach(category => {
109 |   Emoji[category].forEach(emoji => {
110 |     EMOJI_TO_NAME[emoji.surrogates] = emoji.names[0] || '';
111 | 
112 |     emoji.names.forEach(name => {
113 |       NAME_TO_EMOJI[name] = emoji.surrogates;
114 | 
115 |       DIVERSITY_SURROGATES.forEach((d, i) => {
116 |         NAME_TO_EMOJI[`${name}::skin-tone-${i + 1}`] = emoji.surrogates.concat(d);
117 |       });
118 |     });
119 | 
120 |     DIVERSITY_SURROGATES.forEach((d, i) => {
121 |       const surrogates = emoji.surrogates.concat(d);
122 |       const name = emoji.names[0] || '';
123 | 
124 |       EMOJI_TO_NAME[surrogates] = `${name}::skin-tone-${i + 1}`;
125 |     });
126 |   });
127 | });
128 | 
129 | const EMOJI_NAME_AND_DIVERSITY_RE = /^:([^\s:]+?(?:::skin\-tone\-\d)?):/;
130 | 
131 | function convertNameToSurrogate(name, t='') {
132 |   // what is t for?
133 |   return NAME_TO_EMOJI.hasOwnProperty(name) ? NAME_TO_EMOJI[name] : t;
134 | }
135 | 
136 | function convertSurrogateToName(surrogate, colons=true, n='') {
137 |   // what is n for?
138 |   let a = n;
139 | 
140 |   if (EMOJI_TO_NAME.hasOwnProperty(surrogate)) {
141 |     a = EMOJI_TO_NAME[surrogate];
142 |   }
143 | 
144 |   return colons ? `:${a}:` : a;
145 | }
146 | 
147 | const escape = (str) => str.replace(/[\-\[\]\/\{}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
148 | 
149 | const replacer = (function() {
150 |   const surrogates = Object.keys(EMOJI_TO_NAME)
151 |     .sort(surrogate => -surrogate.length)
152 |     .map(surrogate => escape(surrogate))
153 |     .join('|');
154 | 
155 |   return new RegExp('(' + surrogates + ')', 'g');
156 | })();
157 | 
158 | function translateSurrogatesToInlineEmoji(surrogates) {
159 |   return surrogates.replace(replacer, (_, match) => convertSurrogateToName(match));
160 | }
161 | 
162 | // i am not sure why are these rules split like this.
163 | 
164 | const baseRules = {
165 |   newline: SimpleMarkdown.defaultRules.newline,
166 |   paragraph: SimpleMarkdown.defaultRules.paragraph,
167 |   escape: SimpleMarkdown.defaultRules.escape,
168 |   link: SimpleMarkdown.defaultRules.link,
169 |   autolink: {
170 |     ...SimpleMarkdown.defaultRules.autolink,
171 |     match: SimpleMarkdown.inlineRegex(/^<(https?:\/\/[^ >]+)>/)
172 |   },
173 |   url: SimpleMarkdown.defaultRules.url,
174 |   strong: SimpleMarkdown.defaultRules.strong,
175 |   em: SimpleMarkdown.defaultRules.em,
176 |   u: SimpleMarkdown.defaultRules.u,
177 |   br: SimpleMarkdown.defaultRules.br,
178 |   inlineCode: SimpleMarkdown.defaultRules.inlineCode,
179 |   emoticon: {
180 |     order: SimpleMarkdown.defaultRules.text.order,
181 |     match: function(source) {
182 |       return /^(¯\\_\(ツ\)_\/¯)/.exec(source);
183 |     },
184 |     parse: function(capture) {
185 |       return { type: 'text', content: capture[1] };
186 |     }
187 |   },
188 |   codeBlock: {
189 |     order: SimpleMarkdown.defaultRules.codeBlock.order,
190 |     match(source) {
191 |       return /^```(([A-z0-9\-]+?)\n+)?\n*([^]+?)\n*```/.exec(source);
192 |     },
193 |     parse(capture) {
194 |       return { lang: (capture[2] || '').trim(), content: capture[3] || '' };
195 |     }
196 |   },
197 |   emoji: {
198 |     order: SimpleMarkdown.defaultRules.text.order,
199 |     match(source) {
200 |       return EMOJI_NAME_AND_DIVERSITY_RE.exec(source);
201 |     },
202 |     parse(capture) {
203 |       const match = capture[0];
204 |       const name = capture[1];
205 |       const surrogate = convertNameToSurrogate(name);
206 |       return surrogate ? {
207 |         name: `:${name}:`,
208 |         surrogate: surrogate,
209 |         src: getEmojiURL(surrogate)
210 |       } : {
211 |         type: 'text',
212 |         content: match
213 |       }
214 |     },
215 |     react(node, recurseOutput, state) {
216 |       return node.src ? (
217 |         <img
218 |           draggable={false}
219 |           className={`emoji ${node.jumboable ? 'jumboable' : ''}`}
220 |           alt={node.surrogate}
221 |           title={node.name}
222 |           src={node.src}
223 |           key={state.key}
224 |         />
225 |       ) : (
226 |         <span key={state.key}>{node.surrogate}</span>
227 |       );
228 |     }
229 |   },
230 |   customEmoji: {
231 |     order: SimpleMarkdown.defaultRules.text.order,
232 |     match(source) {
233 |       return /^<:(\w+):(\d+)>/.exec(source);
234 |     },
235 |     parse(capture) {
236 |       const name = capture[1];
237 |       const id = capture[2];
238 |       return {
239 |         emojiId: id,
240 |         // NOTE: we never actually try to fetch the emote
241 |         // so checking if colons are required (for 'name') is not
242 |         // something we can do to begin with
243 |         name: name,
244 |         src: getEmoteURL({
245 |           id: id
246 |         })
247 |       };
248 |     },
249 |     react(node, recurseOutput, state) {
250 |       return (
251 |         <img
252 |           draggable={false}
253 |           className={`emoji ${node.jumboable ? 'jumboable' : ''}`}
254 |           alt={`<:${node.name}:${node.id}>`}
255 |           title={node.name}
256 |           src={node.src}
257 |           key={state.key}
258 |         />
259 |       );
260 |     }
261 |   },
262 |   text: {
263 |     ...SimpleMarkdown.defaultRules.text,
264 |     parse(capture, recurseParse, state) {
265 |       return state.nested ? {
266 |         content: capture[0]
267 |       } : recurseParse(translateSurrogatesToInlineEmoji(capture[0]), {
268 |         ...state,
269 |         nested: true
270 |       });
271 |     }
272 |   },
273 |   s: {
274 |     order: SimpleMarkdown.defaultRules.u.order,
275 |     match: SimpleMarkdown.inlineRegex(/^~~([\s\S]+?)~~(?!_)/),
276 |     parse: SimpleMarkdown.defaultRules.u.parse
277 |   }
278 | };
279 | 
280 | function createRules(r) {
281 |   const paragraph = r.paragraph;
282 |   const url = r.url;
283 |   const link = r.link;
284 |   const codeBlock = r.codeBlock;
285 |   const inlineCode = r.inlineCode;
286 | 
287 |   return {
288 |     // rules we don't care about:
289 |     //  mention
290 |     //  channel
291 |     //  highlight
292 | 
293 |     // what is highlight?
294 | 
295 |     ...r,
296 |     s: {
297 |       order: r.u.order,
298 |       match: SimpleMarkdown.inlineRegex(/^~~([\s\S]+?)~~(?!_)/),
299 |       parse: r.u.parse,
300 |       react(node, recurseOutput, state) {
301 |         return <s key={state.key}>{recurseOutput(node.content, state)}</s>;
302 |       }
303 |     },
304 |     paragraph: {
305 |       ...paragraph,
306 |       react(node, recurseOutput, state) {
307 |         return <p key={state.key}>{recurseOutput(node.content, state)}</p>;
308 |       }
309 |     },
310 |     url: {
311 |       ...url,
312 |       match: SimpleMarkdown.inlineRegex(/^((https?|steam):\/\/[^\s<]+[^<.,:;"')\]\s])/)
313 |     },
314 |     link: {
315 |       ...link,
316 |       react(node, recurseOutput, state) {
317 |         // this contains some special casing for invites (?)
318 |         // or something like that.
319 |         // we don't really bother here
320 |         const children = recurseOutput(node.content, state);
321 |         const title = node.title || astToString(node.content);
322 |         return (
323 |           <a
324 |             title={title}
325 |             href={SimpleMarkdown.sanitizeUrl(node.target)}
326 |             target='_blank'
327 |             rel='noreferrer'
328 |             key={state.key}
329 |           >
330 |             {children}
331 |           </a>
332 |         );
333 |       }
334 |     },
335 |     inlineCode: {
336 |       ...inlineCode,
337 |       react(node, recurseOutput, state) {
338 |         return (
339 |           <code className='inline' key={state.key}>
340 |             {node.content}
341 |           </code>
342 |         );
343 |       }
344 |     },
345 |     codeBlock: {
346 |       ...codeBlock,
347 |       react(node, recurseOutput, state) {
348 |         if (node.lang && hljs.getLanguage(node.lang) != null) {
349 |           const highlightedBlock = hljs.highlight(node.lang, node.content, true);
350 | 
351 |           return (
352 |             <pre key={state.key}>
353 |               <code
354 |                 className={`hljs ${highlightedBlock.language}`}
355 |                 dangerouslySetInnerHTML={{ __html: highlightedBlock.value }}
356 |               />
357 |             </pre>
358 |           );
359 |         }
360 | 
361 |         return (
362 |           <pre key={state.key}>
363 |             <code className='hljs'>{node.content}</code>
364 |           </pre>
365 |         );
366 |       }
367 |     }
368 |   };
369 | }
370 | 
371 | const rulesWithoutMaskedLinks = createRules({
372 |   ...baseRules,
373 |   link: {
374 |     ...baseRules.link,
375 |     match() {
376 |       return null;
377 |     }
378 |   }
379 | });
380 | 
381 | // used in:
382 | //  message content (non-webhook mode)
383 | const parse = parserFor(rulesWithoutMaskedLinks);
384 | 
385 | // used in:
386 | //  message content (webhook mode)
387 | //  embed description
388 | //  embed field values
389 | const parseAllowLinks = parserFor(createRules(baseRules));
390 | 
391 | // used in:
392 | //  embed title (obviously)
393 | //  embed field names
394 | const parseEmbedTitle = parserFor(
395 |   omit(rulesWithoutMaskedLinks, ['codeBlock', 'br', 'mention', 'channel', 'roleMention'])
396 | );
397 | 
398 | // used in:
399 | //  message content
400 | function jumboify(ast) {
401 |   const nonEmojiNodes = ast.some(node => (
402 |     node.type !== 'emoji' &&
403 |     node.type !== 'customEmoji' &&
404 |     (typeof node.content !== 'string' || node.content.trim() !== '')
405 |   ));
406 | 
407 |   if (nonEmojiNodes) {
408 |     return ast;
409 |   }
410 | 
411 |   const maximum = 27;
412 |   let count = 0;
413 | 
414 |   ast.forEach(node => {
415 |     if (node.type === 'emoji' || node.type === 'customEmoji') {
416 |       count += 1;
417 |     }
418 | 
419 |     if (count > maximum) {
420 |       return false;
421 |     }
422 |   });
423 | 
424 |   if (count < maximum) {
425 |     ast.forEach(node => node.jumboable = true);
426 |   }
427 | 
428 |   return ast;
429 | }
430 | 
431 | 
432 | export { parse, parseAllowLinks, parseEmbedTitle, jumboify };
433 | 


--------------------------------------------------------------------------------
/src/css/discord.css:
--------------------------------------------------------------------------------
   1 | .bot-tag {
   2 |   background: #7289da;
   3 |   font-size: 10px;
   4 |   font-weight: 600;
   5 |   color: #fff!important;
   6 |   margin-left: 6px;
   7 |   padding: 1px 2px;
   8 |   border-radius: 3px;
   9 |   text-transform: uppercase;
  10 |   vertical-align: bottom;
  11 |   line-height: 16px;
  12 |   -ms-flex-negative: 0;
  13 |   flex-shrink: 0
  14 | }
  15 | 
  16 | .compact .bot-tag {
  17 |   margin: 0 3px 0 0
  18 | }
  19 | 
  20 | .avatar-large,
  21 | .avatar-profile,
  22 | .avatar-small,
  23 | .avatar-xlarge,
  24 | .avatar-xsmall,
  25 | .avatar-xxlarge {
  26 |   background-clip: padding-box;
  27 |   position: relative;
  28 |   background-color: none;
  29 |   background-position: 50%;
  30 |   border-radius: 50%
  31 | }
  32 | 
  33 | .avatar-large {
  34 |   width: 40px;
  35 |   height: 40px;
  36 |   background-size: 40px 40px
  37 | }
  38 | 
  39 | .scroller-wrap {
  40 |   position: relative;
  41 |   display: -webkit-box;
  42 |   display: -ms-flexbox;
  43 |   display: flex
  44 | }
  45 | 
  46 | .scroller-wrap,
  47 | .scroller-wrap .scroller {
  48 |   min-height: 1px;
  49 |   -webkit-box-flex: 1;
  50 |   -ms-flex: 1;
  51 |   flex: 1
  52 | }
  53 | 
  54 | .scroller-wrap .scroller.scrolling>* {
  55 |   pointer-events: none
  56 | }
  57 | 
  58 | .scroller-wrap .scroller::-webkit-scrollbar {
  59 |   width: 14px
  60 | }
  61 | 
  62 | .scroller-wrap .scroller::-webkit-scrollbar-thumb,
  63 | .scroller-wrap .scroller::-webkit-scrollbar-track-piece {
  64 |   background-color: #7289da;
  65 |   background-clip: padding-box;
  66 |   border: 3px solid #fff;
  67 |   border-radius: 7px
  68 | }
  69 | 
  70 | .scroller-wrap .scroller::-webkit-scrollbar-track-piece {
  71 |   background-color: #f3f3f3
  72 | }
  73 | 
  74 | .scroller-wrap.polyfill .scroller {
  75 |   padding-right: 14px
  76 | }
  77 | 
  78 | .scroller-wrap .scrollbar {
  79 |   background-color: #fff;
  80 |   width: 14px;
  81 |   pointer-events: none;
  82 |   position: absolute;
  83 |   top: 0;
  84 |   right: 0;
  85 |   bottom: 0;
  86 |   display: -webkit-box;
  87 |   display: -ms-flexbox;
  88 |   display: flex
  89 | }
  90 | 
  91 | .scroller-wrap .scrollbar:after {
  92 |   left: -3px;
  93 |   width: 3px;
  94 |   background-color: #fff;
  95 |   position: absolute;
  96 |   top: 0;
  97 |   bottom: 0;
  98 |   content: ""
  99 | }
 100 | 
 101 | .scroller-wrap .scrollbar .track {
 102 |   background: #f3f3f3;
 103 |   border-radius: 4px;
 104 |   margin: 3px;
 105 |   -webkit-box-flex: 1;
 106 |   -ms-flex-positive: 1;
 107 |   flex-grow: 1;
 108 |   -webkit-box-orient: vertical;
 109 |   -webkit-box-direction: normal;
 110 |   -ms-flex-direction: column;
 111 |   flex-direction: column
 112 | }
 113 | 
 114 | .scroller-wrap .scrollbar .thumb {
 115 |   background-color: #fff;
 116 |   border-radius: 7px;
 117 |   position: absolute;
 118 |   top: 0;
 119 |   right: 0;
 120 |   left: 0
 121 | }
 122 | 
 123 | .scroller-wrap .scrollbar .thumb:after {
 124 |   border-radius: 4px;
 125 |   background-color: #7289da;
 126 |   margin: 3px;
 127 |   position: absolute;
 128 |   top: 0;
 129 |   right: 0;
 130 |   bottom: 0;
 131 |   left: 0;
 132 |   content: ""
 133 | }
 134 | 
 135 | .scroller-wrap.fade .scroller::-webkit-scrollbar-thumb,
 136 | .scroller-wrap.fade .scroller::-webkit-scrollbar-track-piece {
 137 |   visibility: hidden
 138 | }
 139 | 
 140 | .scroller-wrap.fade .scroller:hover:hover::-webkit-scrollbar-thumb,
 141 | .scroller-wrap.fade .scroller:hover:hover::-webkit-scrollbar-track-piece,
 142 | .scroller-wrap.fade:hover:hover::-webkit-scrollbar-thumb,
 143 | .scroller-wrap.fade:hover:hover::-webkit-scrollbar-track-piece {
 144 |   visibility: visible
 145 | }
 146 | 
 147 | .scroller-wrap.fade .scroller:hover .scrollbar .thumb,
 148 | .scroller-wrap.fade:hover .scrollbar .thumb {
 149 |   opacity: 1
 150 | }
 151 | 
 152 | .scroller-wrap.fade .scrollbar .thumb {
 153 |   -webkit-transition: opacity .1s ease-in-out;
 154 |   transition: opacity .1s ease-in-out;
 155 |   opacity: 0
 156 | }
 157 | 
 158 | .scroller-wrap.dark .scroller::-webkit-scrollbar-thumb {
 159 |   background-color: rgba(0, 0, 0, .4);
 160 |   border-color: transparent
 161 | }
 162 | 
 163 | .scroller-wrap.dark .scroller::-webkit-scrollbar-track-piece {
 164 |   background-color: transparent;
 165 |   border-color: transparent
 166 | }
 167 | 
 168 | .scroller-wrap.dark .scrollbar,
 169 | .scroller-wrap.dark .scrollbar:after {
 170 |   background-color: #2e3136
 171 | }
 172 | 
 173 | .scroller-wrap.dark .scrollbar .track {
 174 |   background-color: transparent
 175 | }
 176 | 
 177 | .scroller-wrap.dark .scrollbar .thumb {
 178 |   background-color: #2e3136
 179 | }
 180 | 
 181 | .scroller-wrap.dark .scrollbar .thumb:after {
 182 |   background-color: rgba(0, 0, 0, .4)
 183 | }
 184 | 
 185 | .scroller-wrap.light .scroller::-webkit-scrollbar-thumb {
 186 |   background-color: rgba(0, 0, 0, .4);
 187 |   border-color: transparent
 188 | }
 189 | 
 190 | .scroller-wrap.light .scroller::-webkit-scrollbar-track-piece {
 191 |   background-color: transparent;
 192 |   border-color: transparent
 193 | }
 194 | 
 195 | .scroller-wrap.light .scrollbar,
 196 | .scroller-wrap.light .scrollbar:after {
 197 |   background-color: #f3f3f3
 198 | }
 199 | 
 200 | .scroller-wrap.light .scrollbar .track {
 201 |   background-color: transparent
 202 | }
 203 | 
 204 | .scroller-wrap.light .scrollbar .thumb {
 205 |   background-color: #f3f3f3
 206 | }
 207 | 
 208 | .scroller-wrap.light .scrollbar .thumb:after {
 209 |   background-color: rgba(0, 0, 0, .4)
 210 | }
 211 | 
 212 | .theme-dark .hljs,
 213 | .theme-light .hljs {
 214 |   display: block;
 215 |   overflow-x: auto;
 216 |   padding: .5em;
 217 |   -webkit-text-size-adjust: none
 218 | }
 219 | 
 220 | .theme-dark .hljs-emphasis,
 221 | .theme-light .hljs-emphasis {
 222 |   font-style: italic
 223 | }
 224 | 
 225 | .theme-dark .hljs-strong,
 226 | .theme-light .hljs-strong {
 227 |   font-weight: 700
 228 | }
 229 | 
 230 | .theme-light .hljs {
 231 |   background: #fdf6e3;
 232 |   color: #657b83
 233 | }
 234 | 
 235 | .theme-light .hljs-comment,
 236 | .theme-light .hljs-quote {
 237 |   color: #586e75
 238 | }
 239 | 
 240 | .theme-light .hljs-addition,
 241 | .theme-light .hljs-keyword,
 242 | .theme-light .hljs-selector-tag {
 243 |   color: #859900
 244 | }
 245 | 
 246 | .theme-light .hljs-doctag,
 247 | .theme-light .hljs-literal,
 248 | .theme-light .hljs-meta .hljs-meta-string,
 249 | .theme-light .hljs-number,
 250 | .theme-light .hljs-regexp,
 251 | .theme-light .hljs-string {
 252 |   color: #2aa198
 253 | }
 254 | 
 255 | .theme-light .hljs-name,
 256 | .theme-light .hljs-section,
 257 | .theme-light .hljs-selector-class,
 258 | .theme-light .hljs-selector-id,
 259 | .theme-light .hljs-title {
 260 |   color: #268bd2
 261 | }
 262 | 
 263 | .theme-light .hljs-attr,
 264 | .theme-light .hljs-attribute,
 265 | .theme-light .hljs-class .hljs-title,
 266 | .theme-light .hljs-template-variable,
 267 | .theme-light .hljs-type,
 268 | .theme-light .hljs-variable {
 269 |   color: #b58900
 270 | }
 271 | 
 272 | .theme-light .hljs-bullet,
 273 | .theme-light .hljs-link,
 274 | .theme-light .hljs-meta,
 275 | .theme-light .hljs-meta .hljs-keyword,
 276 | .theme-light .hljs-selector-attr,
 277 | .theme-light .hljs-selector-pseudo,
 278 | .theme-light .hljs-subst,
 279 | .theme-light .hljs-symbol {
 280 |   color: #cb4b16
 281 | }
 282 | 
 283 | .theme-light .hljs-built_in,
 284 | .theme-light .hljs-deletion {
 285 |   color: #dc322f
 286 | }
 287 | 
 288 | .theme-light .hljs-formula {
 289 |   background: #073642
 290 | }
 291 | 
 292 | .theme-dark .hljs {
 293 |   background: #002b36;
 294 |   color: #839496
 295 | }
 296 | 
 297 | .theme-dark .hljs-comment,
 298 | .theme-dark .hljs-quote {
 299 |   color: #586e75
 300 | }
 301 | 
 302 | .theme-dark .hljs-addition,
 303 | .theme-dark .hljs-keyword,
 304 | .theme-dark .hljs-selector-tag {
 305 |   color: #859900
 306 | }
 307 | 
 308 | .theme-dark .hljs-doctag,
 309 | .theme-dark .hljs-literal,
 310 | .theme-dark .hljs-meta .hljs-meta-string,
 311 | .theme-dark .hljs-number,
 312 | .theme-dark .hljs-regexp,
 313 | .theme-dark .hljs-string {
 314 |   color: #2aa198
 315 | }
 316 | 
 317 | .theme-dark .hljs-name,
 318 | .theme-dark .hljs-section,
 319 | .theme-dark .hljs-selector-class,
 320 | .theme-dark .hljs-selector-id,
 321 | .theme-dark .hljs-title {
 322 |   color: #268bd2
 323 | }
 324 | 
 325 | .theme-dark .hljs-attr,
 326 | .theme-dark .hljs-attribute,
 327 | .theme-dark .hljs-class .hljs-title,
 328 | .theme-dark .hljs-template-variable,
 329 | .theme-dark .hljs-type,
 330 | .theme-dark .hljs-variable {
 331 |   color: #b58900
 332 | }
 333 | 
 334 | .theme-dark .hljs-bullet,
 335 | .theme-dark .hljs-link,
 336 | .theme-dark .hljs-meta,
 337 | .theme-dark .hljs-meta .hljs-keyword,
 338 | .theme-dark .hljs-selector-attr,
 339 | .theme-dark .hljs-selector-pseudo,
 340 | .theme-dark .hljs-subst,
 341 | .theme-dark .hljs-symbol {
 342 |   color: #cb4b16
 343 | }
 344 | 
 345 | .theme-dark .hljs-built_in,
 346 | .theme-dark .hljs-deletion {
 347 |   color: #dc322f
 348 | }
 349 | 
 350 | .theme-dark .hljs-formula {
 351 |   background: #073642
 352 | }
 353 | 
 354 | .chat,
 355 | .message-group .accessory,
 356 | .message-group .comment .attachment .attachment-inner {
 357 |   -webkit-box-orient: vertical;
 358 |   -webkit-box-direction: normal
 359 | }
 360 | 
 361 | .chat,
 362 | .chat>.title-wrap>.title,
 363 | .message-group .accessory {
 364 |   -webkit-box-direction: normal
 365 | }
 366 | 
 367 | .message-group,
 368 | .message-group.compact .message .message-text .markup .message-content {
 369 |   word-wrap: break-word
 370 | }
 371 | 
 372 | .chat {
 373 |   display: -webkit-box;
 374 |   display: -ms-flexbox;
 375 |   display: flex;
 376 |   -ms-flex-direction: column;
 377 |   flex-direction: column;
 378 |   position: relative;
 379 |   color: #fff
 380 | }
 381 | 
 382 | .chat .content {
 383 |   background: #fff
 384 | }
 385 | 
 386 | .chat .user-name {
 387 |   cursor: pointer
 388 | }
 389 | 
 390 | .chat .user-name:hover {
 391 |   text-decoration: underline
 392 | }
 393 | 
 394 | .chat .avatar-large {
 395 |   cursor: pointer;
 396 |   opacity: 1;
 397 |   -webkit-transition: opacity .2s ease;
 398 |   transition: opacity .2s ease
 399 | }
 400 | 
 401 | .chat>.title-wrap>.topic a,
 402 | .message-group a {
 403 |   -webkit-transition: .05s;
 404 |   text-decoration: none
 405 | }
 406 | 
 407 | .chat .avatar-large:hover {
 408 |   opacity: .8
 409 | }
 410 | 
 411 | .chat .messages-wrapper {
 412 |   position: relative;
 413 |   display: -webkit-box;
 414 |   display: -ms-flexbox;
 415 |   display: flex;
 416 |   -webkit-box-flex: 1;
 417 |   -ms-flex: 1;
 418 |   flex: 1;
 419 |   z-index: 0
 420 | }
 421 | 
 422 | .chat .messages-wrapper,
 423 | .chat .messages-wrapper .scroller-wrap {
 424 |   overflow: hidden
 425 | }
 426 | 
 427 | .chat .messages {
 428 |   margin: 0;
 429 |   overflow-x: hidden
 430 | }
 431 | 
 432 | .hide-overflow {
 433 |   overflow: hidden
 434 | }
 435 | 
 436 | .message-group {
 437 |   display: -webkit-box;
 438 |   display: -ms-flexbox;
 439 |   display: flex;
 440 |   padding: 20px 0;
 441 |   margin-left: 20px;
 442 |   margin-right: 6px;
 443 |   border-bottom: 1px solid #eceeef;
 444 |   box-sizing: border-box;
 445 |   -webkit-user-select: text;
 446 |   -moz-user-select: text;
 447 |   -ms-user-select: text;
 448 |   user-select: text
 449 | }
 450 | 
 451 | .message-group a {
 452 |   color: #00b0f4;
 453 |   transition: .05s;
 454 |   cursor: pointer
 455 | }
 456 | 
 457 | .message-group a:hover {
 458 |   text-decoration: underline
 459 | }
 460 | 
 461 | .message-group .message .markup a {
 462 |   unicode-bidi: bidi-override;
 463 |   direction: ltr
 464 | }
 465 | 
 466 | .message-group .comment .markup code.inline,
 467 | .message-group .comment .markup pre {
 468 |   font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;
 469 |   background: #f9f9f9
 470 | }
 471 | 
 472 | .message-group .accessory {
 473 |   display: -webkit-box;
 474 |   display: -ms-flexbox;
 475 |   display: flex;
 476 |   -webkit-box-align: start;
 477 |   -ms-flex-align: start;
 478 |   align-items: flex-start;
 479 |   -ms-flex-direction: column;
 480 |   flex-direction: column
 481 | }
 482 | 
 483 | .message-group:last-of-type,
 484 | .message-group:last-of-type:after {
 485 |   border-bottom: none
 486 | }
 487 | 
 488 | .message-group .emoji {
 489 |   margin-bottom: -5px
 490 | }
 491 | 
 492 | .message-group .image {
 493 |   vertical-align: bottom;
 494 |   max-width: 520px
 495 | }
 496 | 
 497 | .message-group .avatar-large {
 498 |   -ms-flex-negative: 0;
 499 |   flex-shrink: 0;
 500 |   margin-top: -2px;
 501 |   margin-right: 20px
 502 | }
 503 | 
 504 | .message-group h2 {
 505 |   margin: 0;
 506 |   padding: 0
 507 | }
 508 | 
 509 | .message-group h2 strong {
 510 |   color: #2e3136;
 511 |   font-size: 16px;
 512 |   font-weight: 600;
 513 |   letter-spacing: 0
 514 | }
 515 | 
 516 | .message-group h2 .timestamp {
 517 |   color: #99aab5;
 518 |   font-size: 12px;
 519 |   letter-spacing: 0;
 520 |   font-weight: 500;
 521 |   text-transform: none;
 522 |   margin-left: 6px
 523 | }
 524 | 
 525 | .message-group .highlight-separator {
 526 |   opacity: 0;
 527 |   width: 0;
 528 |   display: inline-block;
 529 |   color: #99aab5
 530 | }
 531 | 
 532 | .message-group .highlight-separator.right-pad {
 533 |   text-indent: -10px
 534 | }
 535 | 
 536 | .message-group .highlight-separator.left-pad {
 537 |   text-indent: 10px
 538 | }
 539 | 
 540 | .message-group .comment {
 541 |   -webkit-box-flex: 1;
 542 |   -ms-flex: 1;
 543 |   flex: 1;
 544 |   margin-right: 20px;
 545 |   min-width: 0
 546 | }
 547 | 
 548 | .message-group .comment .markup {
 549 |   color: #737f8d;
 550 |   font-size: 15px;
 551 |   line-height: 1.1em;
 552 |   white-space: pre-wrap;
 553 |   margin-top: 6px;
 554 |   word-wrap: break-word
 555 | }
 556 | 
 557 | .message-group .comment .markup strong {
 558 |   font-weight: 700
 559 | }
 560 | 
 561 | .message-group .comment .markup em {
 562 |   font-style: italic
 563 | }
 564 | 
 565 | .message-group .comment .markup pre {
 566 |   border: 2px solid #f3f3f3;
 567 |   border-radius: 5px;
 568 |   max-width: 90%;
 569 |   box-sizing: border-box;
 570 |   font-size: 12px;
 571 |   white-space: pre-wrap;
 572 |   margin-top: 6px
 573 | }
 574 | 
 575 | .message-group .comment .markup pre code {
 576 |   background: #f9f9f9;
 577 |   text-indent: 0
 578 | }
 579 | 
 580 | .message-group .comment .markup code.inline {
 581 |   width: auto;
 582 |   height: auto;
 583 |   padding: .2em;
 584 |   border-radius: 3px;
 585 |   font-size: 85%;
 586 |   text-indent: 0
 587 | }
 588 | 
 589 | .message-group.compact .comment {
 590 |   width: 100%
 591 | }
 592 | 
 593 | .message-group.compact .accessory {
 594 |   padding-left: 100px
 595 | }
 596 | 
 597 | .message-group.compact .emoji {
 598 |   width: 16px;
 599 |   height: 16px;
 600 |   vertical-align: top
 601 | }
 602 | 
 603 | .message-group.compact .emoji.jumboable {
 604 |   width: 16px;
 605 |   height: 16px
 606 | }
 607 | 
 608 | .message-group.compact.message-group {
 609 |   padding: 3px 0
 610 | }
 611 | 
 612 | .message-group.compact .timestamp {
 613 |   color: #d0d8dd;
 614 |   display: inline-block;
 615 |   width: 65px;
 616 |   text-align: right;
 617 |   padding-right: 5px;
 618 |   overflow: hidden;
 619 |   font-size: 11px;
 620 |   line-height: 16px;
 621 |   vertical-align: bottom
 622 | }
 623 | 
 624 | .message-group.compact .message {
 625 |   padding: 0;
 626 |   margin: 6px 0;
 627 |   line-height: 18px;
 628 |   vertical-align: bottom
 629 | }
 630 | 
 631 | .message-group.compact .message:not(.first) .timestamp {
 632 |   color: transparent!important
 633 | }
 634 | 
 635 | .message-group.compact .message:hover .timestamp {
 636 |   color: #99aab5!important
 637 | }
 638 | 
 639 | .message-group.compact .message .message-text .markup {
 640 |   text-indent: -100px;
 641 |   padding-left: 100px
 642 | }
 643 | 
 644 | .message-group.compact .message .message-text .markup .user-name {
 645 |   margin-right: 5px;
 646 |   font-size: 16px;
 647 |   line-height: 16px;
 648 |   font-weight: 600;
 649 |   color: #4f545c;
 650 |   word-break: break-all
 651 | }
 652 | 
 653 | .theme-dark .message-group h2 strong {
 654 |   color: #fff
 655 | }
 656 | 
 657 | .theme-dark .message-group h2 span {
 658 |   color: hsla(0, 0%, 100%, .2)
 659 | }
 660 | 
 661 | .theme-dark .message-group a {
 662 |   color: #0096d1
 663 | }
 664 | 
 665 | .theme-dark .message-group .comment .markup {
 666 |   color: hsla(0, 0%, 100%, .7)
 667 | }
 668 | 
 669 | .theme-dark .message-group .comment .markup pre {
 670 |   background: #2e3136;
 671 |   border-color: #282b30
 672 | }
 673 | 
 674 | .theme-dark .message-group .comment .markup code.inline,
 675 | .theme-dark .message-group .comment .markup pre code {
 676 |   background: #2e3136
 677 | }
 678 | 
 679 | .theme-dark .message-group.compact .message .markup .user-name {
 680 |   color: #f9f9f9
 681 | }
 682 | 
 683 | .theme-dark .message-group.compact .timestamp {
 684 |   color: hsla(0, 0%, 100%, .2)
 685 | }
 686 | 
 687 | .theme-dark .message-group .embed-wrapper .embed-color-pill {
 688 |   background-color: #4f545c
 689 | }
 690 | 
 691 | .theme-dark .message-group .embed {
 692 |   background-color: rgba(46, 48, 54, .3);
 693 |   border-color: rgba(46, 48, 54, .6)
 694 | }
 695 | 
 696 | .theme-dark .message-group .embed .embed-footer,
 697 | .theme-dark .message-group .embed .embed-provider {
 698 |   color: hsla(0, 0%, 100%, .6)
 699 | }
 700 | 
 701 | .theme-dark .message-group .embed .embed-author-name {
 702 |   color: #fff!important
 703 | }
 704 | 
 705 | .theme-dark .message-group .embed div.embed-title {
 706 |   color: #fff
 707 | }
 708 | 
 709 | .theme-dark .message-group .embed .embed-description,
 710 | .theme-dark .message-group .embed .embed-fields {
 711 |   color: hsla(0, 0%, 100%, .6)
 712 | }
 713 | 
 714 | .theme-dark .message-group .embed .embed-fields .embed-field-name {
 715 |   color: #fff
 716 | }
 717 | 
 718 | .emoji {
 719 |   -o-object-fit: contain;
 720 |   object-fit: contain;
 721 |   width: 22px;
 722 |   height: 22px;
 723 |   margin: 0 .05em 0 .1em!important;
 724 |   vertical-align: -.4em
 725 | }
 726 | 
 727 | .emoji.jumboable {
 728 |   width: 32px;
 729 |   height: 32px
 730 | }
 731 | 
 732 | .image {
 733 |   display: inline-block;
 734 |   position: relative;
 735 |   -webkit-user-select: text;
 736 |   -moz-user-select: text;
 737 |   -ms-user-select: text;
 738 |   user-select: text
 739 | }
 740 | 
 741 | .embed,
 742 | .embed-wrapper {
 743 |   display: -webkit-box;
 744 |   display: -ms-flexbox
 745 | }
 746 | 
 747 | .embed-wrapper {
 748 |   position: relative;
 749 |   margin-top: 5px;
 750 |   max-width: 520px;
 751 |   display: flex
 752 | }
 753 | 
 754 | .embed-wrapper .embed-color-pill {
 755 |   width: 4px;
 756 |   background: #cacbce;
 757 |   border-radius: 3px 0 0 3px;
 758 |   -ms-flex-negative: 0;
 759 |   flex-shrink: 0
 760 | }
 761 | 
 762 | .embed {
 763 |   padding: 8px 10px;
 764 |   box-sizing: border-box;
 765 |   background: hsla(0, 0%, 98%, .3);
 766 |   border: 1px solid hsla(0, 0%, 80%, .3);
 767 |   border-radius: 0 3px 3px 0;
 768 |   display: flex;
 769 |   -webkit-box-orient: vertical;
 770 |   -webkit-box-direction: normal;
 771 |   -ms-flex-direction: column;
 772 |   flex-direction: column
 773 | }
 774 | 
 775 | .embed .embed-content,
 776 | .embed.embed-rich {
 777 |   display: -webkit-box;
 778 |   display: -ms-flexbox
 779 | }
 780 | 
 781 | .embed .embed-fields,
 782 | .embed.embed-link {
 783 |   -webkit-box-orient: horizontal;
 784 |   -webkit-box-direction: normal
 785 | }
 786 | 
 787 | .embed div.embed-title {
 788 |   color: #4f545c
 789 | }
 790 | 
 791 | .embed .embed-content {
 792 |   width: 100%;
 793 |   display: flex;
 794 |   margin-bottom: 10px
 795 | }
 796 | 
 797 | .embed .embed-content .embed-content-inner {
 798 |   -webkit-box-flex: 1;
 799 |   -ms-flex: 1;
 800 |   flex: 1
 801 | }
 802 | 
 803 | .embed.embed-rich {
 804 |   position: relative;
 805 |   display: flex;
 806 |   border-radius: 0 3px 3px 0
 807 | }
 808 | 
 809 | .embed.embed-rich .embed-rich-thumb {
 810 |   max-height: 80px;
 811 |   max-width: 80px;
 812 |   border-radius: 3px;
 813 |   width: auto;
 814 |   -o-object-fit: contain;
 815 |   object-fit: contain;
 816 |   -ms-flex-negative: 0;
 817 |   flex-shrink: 0;
 818 |   margin-left: 20px
 819 | }
 820 | 
 821 | .embed.embed-inline {
 822 |   padding: 0;
 823 |   margin: 4px 0;
 824 |   border-radius: 3px
 825 | }
 826 | 
 827 | .embed .image,
 828 | .embed video {
 829 |   display: -webkit-box;
 830 |   display: -ms-flexbox;
 831 |   display: flex;
 832 |   overflow: hidden;
 833 |   border-radius: 2px
 834 | }
 835 | 
 836 | .embed .embed-content-inner>:last-child,
 837 | .embed .embed-content:last-child,
 838 | .embed .embed-inner>:last-child,
 839 | .embed>:last-child {
 840 |   margin-bottom: 0!important
 841 | }
 842 | 
 843 | .embed .embed-provider {
 844 |   display: inline-block;
 845 |   color: #87909c;
 846 |   font-weight: 400;
 847 |   font-size: 12px;
 848 |   margin-bottom: 5px
 849 | }
 850 | 
 851 | .embed .embed-author {
 852 |   display: -webkit-box;
 853 |   display: -ms-flexbox;
 854 |   display: flex;
 855 |   -webkit-box-align: center;
 856 |   -ms-flex-align: center;
 857 |   align-items: center;
 858 |   margin-bottom: 5px
 859 | }
 860 | 
 861 | .embed .embed-author-name,
 862 | .embed .embed-footer,
 863 | .embed .embed-title {
 864 |   display: inline-block;
 865 |   font-weight: 600
 866 | }
 867 | 
 868 | .embed .embed-author-name {
 869 |   font-size: 14px;
 870 |   color: #4f545c!important
 871 | }
 872 | 
 873 | .embed .embed-author-icon {
 874 |   margin-right: 9px;
 875 |   width: 20px;
 876 |   height: 20px;
 877 |   -o-object-fit: contain;
 878 |   object-fit: contain;
 879 |   border-radius: 50%
 880 | }
 881 | 
 882 | .embed .embed-footer {
 883 |   font-size: 12px;
 884 |   color: rgba(79, 83, 91, .6);
 885 |   letter-spacing: 0
 886 | }
 887 | 
 888 | .embed .embed-footer-icon {
 889 |   margin-right: 10px;
 890 |   height: 18px;
 891 |   width: 18px;
 892 |   -o-object-fit: contain;
 893 |   object-fit: contain;
 894 |   float: left;
 895 |   border-radius: 2.45px
 896 | }
 897 | 
 898 | .embed .embed-title {
 899 |   margin-bottom: 4px;
 900 |   font-size: 14px
 901 | }
 902 | 
 903 | .embed .embed-title+.embed-description {
 904 |   margin-top: -3px!important
 905 | }
 906 | 
 907 | .embed .embed-description {
 908 |   display: block;
 909 |   font-size: 14px;
 910 |   font-weight: 500;
 911 |   margin-bottom: 10px;
 912 |   color: rgba(79, 83, 91, .9);
 913 |   letter-spacing: 0
 914 | }
 915 | 
 916 | .embed .embed-description.markup {
 917 |   white-space: pre-line;
 918 |   margin-top: 0!important;
 919 |   font-size: 14px!important;
 920 |   line-height: 16px!important
 921 | }
 922 | 
 923 | .embed .embed-description.markup pre {
 924 |   max-width: 100%!important
 925 | }
 926 | 
 927 | .embed .embed-fields {
 928 |   display: -webkit-box;
 929 |   display: -ms-flexbox;
 930 |   display: flex;
 931 |   -ms-flex-direction: row;
 932 |   flex-direction: row;
 933 |   -ms-flex-wrap: wrap;
 934 |   flex-wrap: wrap;
 935 |   color: #36393e;
 936 |   margin-top: -10px;
 937 |   margin-bottom: 10px
 938 | }
 939 | 
 940 | .embed .embed-fields .embed-field {
 941 |   -webkit-box-flex: 0;
 942 |   -ms-flex: 0;
 943 |   flex: 0;
 944 |   padding-top: 10px;
 945 |   min-width: 100%;
 946 |   max-width: 506px
 947 | }
 948 | 
 949 | .embed .embed-fields .embed-field.embed-field-inline {
 950 |   -webkit-box-flex: 1;
 951 |   -ms-flex: 1;
 952 |   flex: 1;
 953 |   min-width: 150px;
 954 |   -ms-flex-preferred-size: auto;
 955 |   flex-basis: auto
 956 | }
 957 | 
 958 | .embed .embed-fields .embed-field .embed-field-name {
 959 |   font-size: 14px;
 960 |   margin-bottom: 4px;
 961 |   font-weight: 600
 962 | }
 963 | 
 964 | .embed .embed-fields .embed-field .embed-field-value {
 965 |   font-size: 14px;
 966 |   font-weight: 500
 967 | }
 968 | 
 969 | .embed .embed-thumbnail,
 970 | .embed .embed-thumbnail-gifv {
 971 |   position: relative;
 972 |   display: inline-block
 973 | }
 974 | 
 975 | .embed .embed-thumbnail {
 976 |   margin-bottom: 10px
 977 | }
 978 | 
 979 | .embed .embed-thumbnail img {
 980 |   margin: 0
 981 | }
 982 | 
 983 | .comment>:last-child .embed {
 984 |   margin-bottom: auto
 985 | }
 986 | 
 987 | .flex-horizontal,
 988 | .flex-vertical {
 989 |   display: -webkit-box;
 990 |   display: -ms-flexbox
 991 | }
 992 | 
 993 | .flex-vertical {
 994 |   display: flex;
 995 |   -webkit-box-orient: vertical;
 996 |   -webkit-box-direction: normal;
 997 |   -ms-flex-direction: column;
 998 |   flex-direction: column
 999 | }
1000 | 
1001 | .flex-vertical>.flex-spacer {
1002 |   min-height: 1px
1003 | }
1004 | 
1005 | .flex-horizontal {
1006 |   display: flex;
1007 |   -webkit-box-orient: horizontal;
1008 |   -webkit-box-direction: normal;
1009 |   -ms-flex-direction: row;
1010 |   flex-direction: row
1011 | }
1012 | 
1013 | 
1014 | .flex-horizontal>.flex-spacer {
1015 |   min-width: 1px
1016 | }
1017 | 
1018 | .flex-spacer {
1019 |   -webkit-box-flex: 1;
1020 |   -ms-flex: 1;
1021 |   flex: 1
1022 | }
1023 | 
1024 | .flex-center {
1025 |   display: -webkit-box;
1026 |   display: -ms-flexbox;
1027 |   display: flex;
1028 |   -webkit-box-pack: center;
1029 |   -ms-flex-pack: center;
1030 |   justify-content: center;
1031 |   -webkit-box-align: center;
1032 |   -ms-flex-align: center;
1033 |   align-items: center
1034 | }
1035 | 
1036 | .theme-dark .chat {
1037 |   background-color: #36393e
1038 | }
1039 | 
1040 | .theme-dark .chat>.content,
1041 | .theme-dark .friends-table,
1042 | .theme-dark .messages-wrapper {
1043 |   background-color: #36393e
1044 | }
1045 | 
1046 | .theme-dark .friends-table .scroller-wrap::-webkit-scrollbar-thumb,
1047 | .theme-dark .messages-wrapper .scroller-wrap::-webkit-scrollbar-thumb {
1048 |   background-color: #1e2124;
1049 |   border-color: #36393e
1050 | }
1051 | 
1052 | .theme-dark .friends-table .scroller-wrap::-webkit-scrollbar-track-piece,
1053 | .theme-dark .messages-wrapper .scroller-wrap::-webkit-scrollbar-track-piece {
1054 |   background-color: #2e3136;
1055 |   border-color: #36393e
1056 | }
1057 | 
1058 | .theme-dark .friends-table .scroller-wrap.polyfill .scrollbar,
1059 | .theme-dark .friends-table .scroller-wrap.polyfill .scrollbar:after,
1060 | .theme-dark .messages-wrapper .scroller-wrap.polyfill .scrollbar,
1061 | .theme-dark .messages-wrapper .scroller-wrap.polyfill .scrollbar:after {
1062 |   background-color: #36393e
1063 | }
1064 | 
1065 | .theme-dark .friends-table .scroller-wrap.polyfill .scrollbar .thumb,
1066 | .theme-dark .messages-wrapper .scroller-wrap.polyfill .scrollbar .thumb {
1067 |   background-color: #36393e;
1068 |   border-color: #36393e
1069 | }
1070 | 
1071 | .theme-dark .friends-table .scroller-wrap.polyfill .scrollbar .thumb:after,
1072 | .theme-dark .messages-wrapper .scroller-wrap.polyfill .scrollbar .thumb:after {
1073 |   background-color: #1e2124
1074 | }
1075 | 
1076 | .theme-dark .friends-table .scroller-wrap.polyfill .scrollbar .track,
1077 | .theme-dark .messages-wrapper .scroller-wrap.polyfill .scrollbar .track {
1078 |   background-color: #2e3136;
1079 |   border-color: #36393e
1080 | }
1081 | 
1082 | .discord-view body,
1083 | .discord-view button,
1084 | .discord-view input,
1085 | .discord-view textarea {
1086 |   font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif
1087 | }
1088 | 
1089 | .discord-view a img {
1090 |   border: none
1091 | }
1092 | 
1093 | .discord-view ol,
1094 | .discord-view ul {
1095 |   list-style: none
1096 | }
1097 | 
1098 | .discord-view strong {
1099 |   font-weight: 600
1100 | }
1101 | 
1102 | .discord-view button {
1103 |   border: 0;
1104 |   cursor: pointer
1105 | }
1106 | 
1107 | .discord-view button:focus {
1108 |   outline: 0
1109 | }
1110 | 
1111 | .discord-view code {
1112 |   font-family: Menlo, Consolas, Monaco, monospace;
1113 |   font-size: 14px;
1114 |   line-height: 16px
1115 | }
1116 | 
1117 | .discord-view a {
1118 |   color: #00b0f4;
1119 |   text-decoration: none
1120 | }
1121 | 


--------------------------------------------------------------------------------