General update and feature addition

README.md

@@ -1,5 +1,4 @@
-Embed Visualizer
-================
+# Embed Visualizer
 
 ![demo gif](http://i.imgur.com/2wAb2d3.gif)
 
@@ -16,17 +15,20 @@ export default {
   // see https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases
   language: 'coolprogramminglanguage',
 
+  // Decides if the library has webhook support or not.
+  // If not set to false and a info will be displayed
+  webhook_support: true,
+
   // actual generator
+  // If webhook mode is enabled and supported the list of provided embeds will be in the "embeds" property, otherwise the single embed will be in "embed"
   // data is just a javascript object that looks like this:
-  // { "content": "message content...", "embed": { ... } }
-  generateFrom(data) {
+  // { "content": "message content...", "embed": { ... }, "embeds": [ { ... }, { ...}] }
+  // isWebhook will (if webhook mode is supported) be a boolean indicating if the mode is set to webhook(true) or normal(false).
+  // if theres no support, this param may be omited
+  generateFrom(data, isWebhook) {
     ...
   },
 };
 ```
 
-Currently, we don't really take in account "webhook mode" since most libraries don't
-really support that directly. If in the future most of them end up supporting it,
-we can start passing that down to the `generateFrom` function, so that it can emit something else.
-
 [embed docs]: https://discordapp.com/developers/docs/resources/channel#embed-object

package.json

@@ -6,20 +6,28 @@
   "private": true,
   "homepage": "https://leovoel.github.io/embed-visualizer/",
   "devDependencies": {
-    "react-scripts": "0.8.5",
+    "husky": "^4.3.7",
+    "prettier": "^2.2.1",
+    "pretty-quick": "^3.1.0",
+    "react-scripts": "3.4.3",
     "rimraf": "^2.5.4"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  },
   "dependencies": {
     "ajv": "^4.11.2",
     "codemirror": "^5.23.0",
     "highlight.js": "^9.9.0",
     "lodash.debounce": "^4.0.8",
     "moment": "^2.17.1",
-    "react": "^15.4.2",
+    "react": "^16.13.1",
     "react-addons-css-transition-group": "^15.4.2",
     "react-color": "^2.13.8",
-    "react-dom": "^15.4.2",
-    "simple-markdown": "^0.2.1",
+    "react-dom": "^16.13.1",
+    "simple-markdown": "^0.7.2",
     "twemoji": "^2.2.3"
   },
   "scripts": {
@@ -28,5 +36,17 @@
     "postbuild": "rimraf build/**/*.map asset build/asset-manifest.json",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

src/components/aboutmodal.jsx

@@ -1,11 +1,10 @@
-import React from 'react';
-import Modal from './modal';
-import SimpleMarkdown from 'simple-markdown';
-import logo from '../images/logo.png';
-
+import React from "react";
+import Modal from "./modal";
+import SimpleMarkdown from "simple-markdown";
+import logo from "../images/logo.png";
 
 // TODO: move this link out of here?
-const GITHUB_REPO = 'https://github.com/leovoel/embed-visualizer';
+const GITHUB_REPO = "https://github.com/leovoel/embed-visualizer";
 
 const aboutText = `
 -= Visualizer and validator for [Discord embeds][embed-docs]. =-
@@ -63,10 +62,9 @@ The main difference is that instead of:
   of it back, and maybe do minor edits.
   In the future some sort of form input mode could be added in.
 
-- Invites are not rendered
 - Mentions are not rendered
 
-  This is purely out of laziness, although there's not much that can go wrong with them.  
+  This is purely out of laziness, although there's not much that can go wrong with them.
   Keep in mind that in embeds, mentions are rendered but do not notify anyone.
 
 - Images may not render exactly the same
@@ -90,7 +88,7 @@ The main difference is that instead of:
 ### Libraries used (thanks!):
 
 -----------------------------
-  
+
 - [React](https://facebook.github.io/react/)
 - [Ajv](https://epoberezkin.github.io/ajv/)
 - [Moment.js](https://momentjs.com)
@@ -116,12 +114,18 @@ const rules = {
     order: SimpleMarkdown.defaultRules.paragraph.order,
 
     parse(capture, recurseParse, state) {
-      return { content: SimpleMarkdown.parseInline(recurseParse, capture[1], state) };
+      return {
+        content: SimpleMarkdown.parseInline(recurseParse, capture[1], state),
+      };
     },
 
     react(node, recurseOutput, state) {
-      return <div key={state.key} className='db b f3 mv2 tc'>{recurseOutput(node.content, state)}</div>;
-    }
+      return (
+        <div key={state.key} className="db b f3 mv2 tc">
+          {recurseOutput(node.content, state)}
+        </div>
+      );
+    },
   },
 
   paragraph: {
@@ -136,11 +140,11 @@ const rules = {
     react(node, recurseOutput, state) {
       return (
         <a
-          className='link blurple underline-hover'
+          className="link blurple underline-hover"
           href={SimpleMarkdown.sanitizeUrl(node.target)}
           title={node.title}
           key={state.key}
-          target='_blank'
+          target="_blank"
         >
           {recurseOutput(node.content, state)}
         </a>
@@ -151,43 +155,42 @@ const rules = {
   list: {
     ...SimpleMarkdown.defaultRules.list,
     react(node, recurseOutput, state) {
-      return React.createElement(
-        node.ordered ? 'ol' : 'ul',
-        {
-          start: node.start,
-          key: state.key,
-          className: 'mb4 pl4',
-          children: node.items.map((item, i) => {
-            return <li key={i}>{recurseOutput(item, state)}</li>;
-          })
-        }
-      );
+      return React.createElement(node.ordered ? "ol" : "ul", {
+        start: node.start,
+        key: state.key,
+        className: "mb4 pl4",
+        children: node.items.map((item, i) => {
+          return <li key={i}>{recurseOutput(item, state)}</li>;
+        }),
+      });
     },
   },
 
   hr: {
     ...SimpleMarkdown.defaultRules.hr,
     react(node, recurseOutput, state) {
-      return <hr className='b--solid b--light-gray ma0' key={state.key} />;
-    }
+      return <hr className="b--solid b--light-gray ma0" key={state.key} />;
+    },
   },
 };
 
 const parser = SimpleMarkdown.parserFor(rules);
-const renderer = SimpleMarkdown.reactFor(SimpleMarkdown.ruleOutput(rules, 'react'));
+const renderer = SimpleMarkdown.reactFor(
+  SimpleMarkdown.ruleOutput(rules, "react")
+);
 
 const renderAboutText = (input) => {
-  input += '\n\n';
+  input += "\n\n";
   return renderer(parser(input, { inline: false }));
 };
 
 const AboutModal = (props) => {
   return (
-    <Modal title='About' maxWidth='80ch' maxHeight='90%' {...props}>
-      <div className='ma3 nested-copy-seperator nested-copy-line-height'>
-        <div className='center w4'>
-          <a href={GITHUB_REPO} title='Embed Visualizer' target='_blank'>
-            <img src={logo} alt='Embed Visualizer' />
+    <Modal title="About" maxWidth="80ch" maxHeight="90%" {...props}>
+      <div className="ma3 nested-copy-seperator nested-copy-line-height">
+        <div className="center w4">
+          <a href={GITHUB_REPO} title="Embed Visualizer" target="_blank">
+            <img src={logo} alt="Embed Visualizer" />
           </a>
         </div>
         {renderAboutText(aboutText)}
@@ -196,5 +199,4 @@ const AboutModal = (props) => {
   );
 };
 
-
 export default AboutModal;