First commit
This commit is contained in:
Lorem Ipsum
commit
8118c7e551
5 changed files with 1077 additions and 0 deletions
5
README.md
Normal file
5
README.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
# And embed visualizer
|
||||
|
||||
Visualizes embed or message content from JSON input.
|
||||
This can be used for bot embed commands commands, although I understand that not every one understands JSON thus will add a GUI later.
|
||||
You can look into the [project boards](https://github.com/Glitchii/embedbuilder/projects/3) if you want to see what I'm currently working on or want to contribute
|
||||
784
assets/css/index.css
Normal file
784
assets/css/index.css
Normal file
|
|
@ -0,0 +1,784 @@
|
|||
* {
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--link: #00b0f4;
|
||||
--embedTextColor: #dcddde;
|
||||
--embedTextColor2: #72767d;
|
||||
--embedBackground: #2f3136;
|
||||
--fullEmbedBackground: #36393f;
|
||||
--side1Background: #2c2e33;
|
||||
--side1Background: #2f3136;
|
||||
--background-secondary: #2f3136;
|
||||
--background-tertiary: #202225;
|
||||
--header-secondary: #b9bbbe;
|
||||
--interactive-muted: #4f545c;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
background-color: var(--fullEmbedBackground);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 45% 55%;
|
||||
}
|
||||
|
||||
.top pre>code .hltChars {
|
||||
color: #b96a97;
|
||||
color: #b36391;
|
||||
}
|
||||
|
||||
.top pre>code .hltInt {
|
||||
color: #a474e8;
|
||||
color: #7658c8;
|
||||
}
|
||||
|
||||
.top pre>code .hltBool {
|
||||
color: #d679c6;
|
||||
}
|
||||
|
||||
.top pre>code .hltStr1 {
|
||||
color: #68b7c8;
|
||||
}
|
||||
|
||||
.top pre>code .hltStr2 {
|
||||
color: #b58900;
|
||||
color: #aab060;
|
||||
}
|
||||
|
||||
.main section {
|
||||
min-height: 0;
|
||||
padding-right: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main .side1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--side1Background);
|
||||
border-right: 1px solid var(--background-tertiary);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.side1 .bottom .box {
|
||||
background-color: #27282d;
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 55%;
|
||||
border: none;
|
||||
padding: 5px;
|
||||
outline: none;
|
||||
border-radius: 5px;
|
||||
background-color: #292b2f;
|
||||
color: rgb(228, 225, 225);
|
||||
border: 1px solid var(--background-tertiary);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
height: 30%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.side1 .item.top {
|
||||
background-color: #292b2f;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.item~.item {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.main .side2 {
|
||||
height: 100%;
|
||||
background-color: var(--fullEmbedBackground);
|
||||
justify-content: center;
|
||||
vertical-align: center;
|
||||
overflow: auto;
|
||||
scrollbar-color: #26272d #36393f;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
background: #36393f;
|
||||
}
|
||||
|
||||
.main .side2::-webkit-scrollbar-thumb {
|
||||
background: #26272d;
|
||||
}
|
||||
|
||||
a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, html, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
font-weight: inherit;
|
||||
font-style: inherit;
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.hljs-comment, .hljs-quote {
|
||||
color: var(--interactive-muted);
|
||||
}
|
||||
|
||||
.hljs-addition, .hljs-keyword, .hljs-selector-tag {
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
.hljs-doctag, .hljs-literal, .hljs-meta .hljs-meta-string, .hljs-number, .hljs-regexp, .hljs-string {
|
||||
color: #2aa198;
|
||||
}
|
||||
|
||||
.hljs-name, .hljs-section, .hljs-selector-class, .hljs-selector-id, .hljs-title {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
.hljs-attr, .hljs-attribute, .hljs-class .hljs-title, .hljs-template-variable, .hljs-type, .hljs-variable {
|
||||
color: #b58900;
|
||||
}
|
||||
|
||||
.hljs-bullet, .hljs-link, .hljs-meta, .hljs-meta .hljs-keyword, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-subst, .hljs-symbol {
|
||||
color: #cb4b16;
|
||||
}
|
||||
|
||||
.hljs-built_in, .hljs-deletion {
|
||||
color: #dc322f;
|
||||
}
|
||||
|
||||
.hljs-formula {
|
||||
background: #073642;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cm-string {
|
||||
color: #92deea!important;
|
||||
}
|
||||
|
||||
.cm-string~.cm-string {
|
||||
color: #c3e88d!important;
|
||||
}
|
||||
|
||||
.cm-number {
|
||||
color: #d19a66!important;
|
||||
}
|
||||
|
||||
code, [class^="cm-"] {
|
||||
font-family: Consolas, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Monaco, Courier New, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder, body, button, input, select, textarea {
|
||||
font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
|
||||
::placeholder, body, button, input, select, textarea {
|
||||
font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
|
||||
a, button, div, input, label, select, span, strong, textarea {
|
||||
outline: 0px;
|
||||
}
|
||||
|
||||
img[alt] {
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
.msgEmbed {
|
||||
min-height: 2.75rem;
|
||||
padding: 0.125rem 0 20px 72px;
|
||||
position: absolute;
|
||||
overflow-wrap: break-word;
|
||||
user-select: text;
|
||||
width: 96%;
|
||||
margin: 10px 20px 0 20px;
|
||||
}
|
||||
|
||||
.embedTitle>* {
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
|
||||
.contents {
|
||||
position: static;
|
||||
margin-left: 0px;
|
||||
padding-left: 0px;
|
||||
text-indent: 0px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
margin-top: calc(4px - 0.125rem);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
flex: 0 0 auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.timeText {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.375rem;
|
||||
color: var(--embedTextColor2);
|
||||
vertical-align: baseline;
|
||||
margin-left: 0.25rem;
|
||||
display: inline-block;
|
||||
height: 1.25rem;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.botTag {
|
||||
height: 0.9375rem;
|
||||
padding: 0px 0.275rem;
|
||||
margin-top: 0.075em;
|
||||
border-radius: 0.1875rem;
|
||||
background: rgb(114, 137, 218);
|
||||
font-size: 0.625rem;
|
||||
text-transform: uppercase;
|
||||
vertical-align: top;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
text-indent: 0px;
|
||||
position: relative;
|
||||
top: 0.1rem;
|
||||
margin-left: 0.25rem;
|
||||
line-height: 1.375rem;
|
||||
white-space: break-spaces;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.botText {
|
||||
position: relative;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
text-transform: uppercase;
|
||||
text-indent: 0px;
|
||||
color: rgb(255, 255, 255);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.username {
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.375rem;
|
||||
color: #fff;
|
||||
display: inline;
|
||||
vertical-align: baseline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.imageWrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
user-select: text;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.imageWrapper img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.embed {
|
||||
position: relative;
|
||||
display: grid;
|
||||
max-width: 520px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
border-left: 4px solid var(--fullEmbedBackground);
|
||||
background: var(--embedBackground);
|
||||
border-color: #1e2327;
|
||||
}
|
||||
|
||||
.embedAuthorName, .embedAuthorNameLink, .embedDescription, .embedFieldName, .embedFieldValue, .embedFooterText, .embedLink, .embedProvider-3k5pfl, .embedTitle, .embedTitleLink-1Zla9e {
|
||||
unicode-bidi: plaintext;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
object-fit: contain;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin: 0 .05em 0 .1em !important;
|
||||
vertical-align: -.4em;
|
||||
}
|
||||
|
||||
.embedGrid {
|
||||
overflow: hidden;
|
||||
max-width: 516px;
|
||||
padding: 0.5rem 1rem 1rem 0.75rem;
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: auto min-content;
|
||||
}
|
||||
|
||||
.embedMargin {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.embedLink {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.embedAuthor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-column: 1 / 1;
|
||||
}
|
||||
|
||||
.embedAuthorName {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.embedAuthorIcon {
|
||||
margin-right: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
object-fit: contain;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.embedTitle {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
grid-column: 1 / 1;
|
||||
}
|
||||
|
||||
.embedDescription {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
font-weight: 400;
|
||||
white-space: pre-line;
|
||||
grid-column: 1 / 1;
|
||||
}
|
||||
|
||||
.embedImage {
|
||||
margin-top: 16px;
|
||||
grid-column: 1 / 1;
|
||||
border-radius: 4px;
|
||||
contain: paint;
|
||||
grid-column: 1 / 3;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.embedImage, .embedThumbnail {
|
||||
display: block;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.embedImage, .embedThumbnail {
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.embedThumbnail {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.embedThumbnail {
|
||||
grid-area: 1 / 2 / 8 / 2;
|
||||
margin-left: 16px;
|
||||
margin-top: 8px;
|
||||
flex-shrink: 0;
|
||||
justify-self: end;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.embedFooter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-area: auto / 1 / auto / 1;
|
||||
}
|
||||
|
||||
.embedFooter {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.embedFooterText {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--embedTextColor);
|
||||
}
|
||||
|
||||
.embedFooterSeparator {
|
||||
font-weight: 500;
|
||||
color: var(--embedTextColor);
|
||||
display: inline-block;
|
||||
margin: 0px 4px;
|
||||
}
|
||||
|
||||
.embedFooterIcon {
|
||||
margin-right: 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.embedFields {
|
||||
display: grid;
|
||||
grid-column: 1 / 1;
|
||||
margin-top: 8px;
|
||||
gap: 8px;
|
||||
min-width: 0px;
|
||||
}
|
||||
|
||||
.embedField {
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
min-width: 0px;
|
||||
}
|
||||
|
||||
.embedFieldName {
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.embedFieldValue {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
font-weight: 400;
|
||||
white-space: pre-line;
|
||||
min-width: 0px;
|
||||
}
|
||||
|
||||
.embedDescription, .embedFieldValue {
|
||||
color: var(--embedTextColor);
|
||||
}
|
||||
|
||||
.embedAuthorName, .embedFieldName, .embedTitle {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.embedGrid>* {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.embedGrid.empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.messageContent {
|
||||
user-select: text;
|
||||
margin-left: -72px;
|
||||
padding-left: 72px;
|
||||
}
|
||||
|
||||
.messageContent.markup {
|
||||
font-size: 1rem;
|
||||
line-height: 1.375rem;
|
||||
white-space: pre-wrap;
|
||||
white-space: break-spaces;
|
||||
word-wrap: break-word;
|
||||
user-select: text;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
u {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.markup em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.markup strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.markup {
|
||||
font-size: 1rem;
|
||||
line-height: 1.375rem;
|
||||
user-select: text;
|
||||
color: var(--embedTextColor);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.markup a {
|
||||
word-break: break-word;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.anchor {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
.markup a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.markup code {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
text-indent: 0;
|
||||
white-space: pre-wrap;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--background-tertiary) var(--background-secondary);
|
||||
background: #2f3136;
|
||||
border: 1px solid #202225;
|
||||
}
|
||||
|
||||
.markup pre>code {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: .5em;
|
||||
border-radius: 4px;
|
||||
color: var(--header-secondary);
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
row-gap: 0.25rem;
|
||||
text-indent: 0px;
|
||||
min-height: 0px;
|
||||
min-width: 0px;
|
||||
padding-top: 0.125rem;
|
||||
padding-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.container>* {
|
||||
place-self: start;
|
||||
}
|
||||
|
||||
.markup code {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
text-indent: 0;
|
||||
white-space: pre-wrap;
|
||||
background: var(--background-secondary);
|
||||
border: 1px solid var(--background-tertiary);
|
||||
}
|
||||
|
||||
.markup code.inline {
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: .2em;
|
||||
margin: -.2em 0;
|
||||
border-radius: 3px;
|
||||
font-size: 85%;
|
||||
font-family: Consolas, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Monaco, Courier New, Courier, monospace;
|
||||
text-indent: 0;
|
||||
border: none;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.markup pre {
|
||||
max-width: 90%;
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
font-family: Consolas, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Monaco, Courier New, Courier, monospace;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
margin-top: 6px;
|
||||
white-space: pre-wrap;
|
||||
background-clip: border-box;
|
||||
}
|
||||
|
||||
.markup pre.embeded {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markup pre.embeded>code {
|
||||
border: none;
|
||||
background: var(--background-tertiary);
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
background-color: #212121;
|
||||
color: #eff;
|
||||
width: 100%!important;
|
||||
height: 100%!important;
|
||||
background-color: inherit!important;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
|
||||
background-image: none!important;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-marker-error:after, .CodeMirror-lint-message-error:before {
|
||||
content: "!";
|
||||
color: #f45711;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
left: -2px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-message-error:before {
|
||||
content: "!";
|
||||
color: #f45711;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
left: -15px!important;
|
||||
top: 1px!important;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-tooltip {
|
||||
box-shadow: 1px 10px 15px rgb(0 0 0 / 17%);
|
||||
background-color: #202225!important;
|
||||
border: 1px solid #373a40!important;
|
||||
color: #cacaca!important;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-message {
|
||||
padding: 5px 5px 10px 18px;
|
||||
}
|
||||
|
||||
.CodeMirror-code .CodeMirror-gutter-wrapper .CodeMirror-gutter-elt {
|
||||
left: 0px!important;
|
||||
}
|
||||
|
||||
.CodeMirror-gutters {
|
||||
background: #292b2f!important;
|
||||
}
|
||||
|
||||
.CodeMirror-foldmarker {
|
||||
color: #e5ecff!important;
|
||||
text-shadow: none!important;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor {
|
||||
border-left: 2px solid #6ba6ff !important;
|
||||
height: 17px!important;
|
||||
}
|
||||
|
||||
.CodeMirror-scrollbar-filler {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
|
||||
background: #202225!important;
|
||||
}
|
||||
|
||||
.cm-s-material-darker .cm-comment {
|
||||
color: #5d616b!important;
|
||||
}
|
||||
|
||||
.cm-s-material-darker .CodeMirror-matchingbracket {
|
||||
text-decoration: none!important;
|
||||
background-color: rgb(173 192 212 / 3%)!important;
|
||||
color: #b9c3d6 !important;
|
||||
border-bottom: 1px solid #c2d6ff!important;
|
||||
/* border: 1px solid #bacdf347; */
|
||||
}
|
||||
|
||||
.notification {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.notification .inline {
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: .2em;
|
||||
margin: -.2em 0;
|
||||
border-radius: 3px;
|
||||
font-size: 85%;
|
||||
font-family: Consolas, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Monaco, Courier New, Courier, monospace;
|
||||
text-indent: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
white-space: pre-wrap;
|
||||
background-color: #4a3535;
|
||||
color: white;
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
border: 1px dashed;
|
||||
}
|
||||
|
||||
@keyframes notifAn {
|
||||
from {
|
||||
opacity: 0;
|
||||
bottom: -50px;
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
margin-top: 5px;
|
||||
animation: notifAn .5s ease;
|
||||
background-color: #202225;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
color: #8c4949;
|
||||
display: none;
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1015px) {
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.side1 .item.top {
|
||||
height: 100%;
|
||||
}
|
||||
.notification .inline {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
163
assets/js/index.js
Normal file
163
assets/js/index.js
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
|
||||
// Want to use or contribute to this? https://github.com/Glitchii/embedbuilder
|
||||
// If you found an issue, please report it, make a P.R, or use the discussion page. Thanks
|
||||
|
||||
var colNum = 1, num = 0;
|
||||
window.onload = () => {
|
||||
document.querySelectorAll('img.clickable')
|
||||
.forEach(e => e.addEventListener('click', el => window.open(el.target.src)));
|
||||
let textarea = document.querySelector('textarea');
|
||||
window.editor = CodeMirror(elt => textarea.parentNode.replaceChild(elt, textarea), {
|
||||
value: textarea.value,
|
||||
theme: 'material-darker',
|
||||
scrollbarStyle: "overlay",
|
||||
mode: "application/json",
|
||||
// lineNumbers: true,
|
||||
foldGutter: true,
|
||||
gutters: ["CodeMirror-foldgutter", "CodeMirror-lint-markers"],
|
||||
matchBrackets: true,
|
||||
lint: true
|
||||
});
|
||||
|
||||
editor.focus();
|
||||
let notif = document.querySelector('.notification'),
|
||||
url = (url) => /^(https?:)?\/\//g.exec(url) ? url : '//' + url,
|
||||
makeShort = (txt, length, mediaWidth) => {
|
||||
if (mediaWidth && window.matchMedia(`(max-width:${mediaWidth}px)`).matches)
|
||||
return txt.length > (length - 3) ? txt.substring(0, length - 3) + '...' : txt;
|
||||
return txt;
|
||||
}, error = (msg, html) => {
|
||||
if (html) notif.innerHTML = msg;
|
||||
else notif.innerText = msg;
|
||||
notif.style.display = 'block';
|
||||
// err && console.log(err);
|
||||
}, markup = (txt, isEmbed) => {
|
||||
txt = txt
|
||||
// Custom Emojis
|
||||
.replace(/<a?:[^:]+?:(\d+)>/g, '<img class="emoji" src="https://cdn.discordapp.com/emojis/$1.png"/>') // .replace(/<a?:[^:]+?:(\d+)>/g, '<img class="emoji" src="https://cdn.discordapp.com/emojis/$1.gif" onerror="this.src=\'https://cdn.discordapp.com/emojis/$1.png\'"/>') // This will keep logging failed GET request errors in console
|
||||
// MD
|
||||
.replace(/~~(.+?)~~/g, '<s>$1</s>')
|
||||
.replace(/\`(?!\`)([^\`]+?)\`(?!\`)/g, '<code class="inline">$1</code>')
|
||||
.replace(/\`\`(?!\`)([^\`]+?)\`\`(?!\`)/g, '<code class="inline">$1</code>')
|
||||
.replace(/\*\*\*(.+?)\*\*\*/g, '<em><strong>$1</strong></em>')
|
||||
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
||||
.replace(/__(.+?)__/g, '<u>$1</u>')
|
||||
.replace(/\*(.+?)\*/g, '<em>$1</em>')
|
||||
.replace(/_(.+?)_/g, '<em>$1</em>')
|
||||
// Block
|
||||
.replace(/\n/g, '<br>')
|
||||
.replace(/\`\`\`(\w{1,15})<br>((\n|.)+?)\`\`\`/g, isEmbed ? '<pre class="embeded"><code class="$1">$2</code></pre>' : '<pre><code class="$1">$2</code></pre>')
|
||||
.replace(/\`\`\`(\w{1,15})<br>((\n|.)+?)\`\`\`/g, isEmbed ? '<pre class="embeded"><code class="$1">$2</code></pre>' : '<pre><code class="$1">$2</code></pre>')
|
||||
.replace(/\`\`\`(<br>)?((\n|.)+?)\`\`\`/g, isEmbed ? '<pre class="embeded"><code class="hljs nohighlight">$2</code></pre>' : '<pre><code class="hljs nohighlight">$2</code></pre>')
|
||||
if (isEmbed) txt = txt
|
||||
.replace(/\[(.+)\]\((.+)\)/g, `<a title="$1" target="_blank" class="anchor" href="$2">$1</a>`);
|
||||
return txt;
|
||||
},
|
||||
content = document.querySelector('.messageContent'),
|
||||
embed = document.querySelector('.embedGrid'),
|
||||
msgEmbed = document.querySelector('.msgEmbed'),
|
||||
embedTitle = document.querySelector('.embedTitle'),
|
||||
embedDescription = document.querySelector('.embedDescription'),
|
||||
embedAuthor = document.querySelector('.embedAuthor'),
|
||||
embedFooter = document.querySelector('.embedFooter'),
|
||||
embedImage = document.querySelector('.embedImage'),
|
||||
embedThumbnail = document.querySelector('.embedThumbnail'),
|
||||
fields = embed.querySelector('.embedFields'),
|
||||
tstamp = stringISO => {
|
||||
let date = stringISO ? new Date(stringISO) : new Date(),
|
||||
dateArray = date.toLocaleString('en-US', { hour: 'numeric', hour12: true, minute: 'numeric' }),
|
||||
today = new Date(),
|
||||
yesterday = new Date(new Date().setDate(today.getDate() - 1));
|
||||
|
||||
return today.toDateString() === date.toDateString() ? `Today at ${dateArray}` :
|
||||
yesterday.toDateString() === date.toDateString() ? `Yesterday at ${dateArray}` :
|
||||
`${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}/${date.getFullYear()}`;
|
||||
}, display = (el, data, displayType) => {
|
||||
if (data) el.innerHTML = data;
|
||||
el.style.display = displayType || "unset";
|
||||
|
||||
}, hide = el => el.style.removeProperty('display'),
|
||||
toObj = jsonString => JSON.parse(jsonString.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g, (x, y) => y ? "" : x)),
|
||||
update = data => {
|
||||
try {
|
||||
content.innerHTML = data.content ? markup(data.content) : '';
|
||||
if (data.embed) {
|
||||
let e = data.embed;
|
||||
if (e.title) display(embedTitle, markup(`${e.url ? '<a class="anchor" target="_blank" href="' + url(e.url) + '">' + e.title + '</a>' : e.title}`));
|
||||
else hide(embedTitle);
|
||||
if (e.description) display(embedDescription, markup(e.description, true));
|
||||
else hide(embedDescription);
|
||||
if (e.color) embed.closest('.embed').style.borderColor = (typeof e.color === 'number' ? '#' + e.color.toString(16) : e.color);
|
||||
else embed.closest('.embed').style.removeProperty('border-color');
|
||||
if (e.author && e.author.name) display(embedAuthor, `
|
||||
${e.author.icon_url ? '<img class="embedAuthorIcon" src="' + url(e.author.icon_url) + '">' : ''}
|
||||
${e.author.url ? '<a class="embedAuthorNameLink embedLink embedAuthorName" href="' + url(e.author.url) + '" target="_blank">' + e.author.name + '</a>' : '<span class="embedAuthorName">' + e.author.name + '</span>'}`, 'flex');
|
||||
else hide(embedAuthor);
|
||||
if (e.thumbnail && e.thumbnail.url) embedThumbnail.src = e.thumbnail.url, embedThumbnail.style.display = 'block';
|
||||
else hide(embedThumbnail);
|
||||
if (e.image && e.image.url) embedImage.src = e.image.url, embedImage.style.display = 'block';
|
||||
else hide(embedImage);
|
||||
if (e.footer && e.footer.text) display(embedFooter, `
|
||||
${e.footer.icon_url ? '<img class="embedFooterIcon" src="' + url(e.footer.icon_url) + '">' : ''}<span class="embedFooterText">
|
||||
${e.footer.text}
|
||||
${e.timestamp ? '<span class="embedFooterSeparator">•</span>' + tstamp(e.timestamp) : ''}</span></div>`, 'flex');
|
||||
else if (e.timestamp) display(embedFooter, `<span class="embedFooterText">${tstamp(e.timestamp)}</span></div>`, 'flex');
|
||||
else hide(embedFooter);
|
||||
if (e.fields) {
|
||||
fields.innerHTML = '';
|
||||
e.fields.forEach(f => {
|
||||
if (!f.inline) {
|
||||
let el = fields.insertBefore(document.createElement('div'), null);
|
||||
el.outerHTML = `
|
||||
<div class="embedField" style="grid-column: 1 / 13;">
|
||||
<div class="embedFieldName">${markup(f.name)}</div>
|
||||
<div class="embedFieldValue">${markup(f.value)}</div>
|
||||
</div>`;
|
||||
} else {
|
||||
el = fields.insertBefore(document.createElement('div'), null);
|
||||
el.outerHTML = `
|
||||
<div class="embedField ${num}" style="grid-column: ${colNum} / ${colNum + 4};">
|
||||
<div class="embedFieldName">${markup(f.name)}</div>
|
||||
<div class="embedFieldValue">${markup(f.value)}</div>
|
||||
</div>`;
|
||||
colNum = (colNum === 9 ? 1 : colNum + 4);
|
||||
num++;
|
||||
}
|
||||
});
|
||||
colNum = 1;
|
||||
let len = e.fields.filter(f => f.inline).length;
|
||||
if (len === 2 || (len > 3 && len % 2 !== 0)) {
|
||||
let children = Array.from(fields.children),
|
||||
arr = children.filter(x => x === children[len] || x === children[len - 1]);
|
||||
arr[0].style.gridColumn = '1 / 7', arr[1].style.gridColumn = '7 / 13';
|
||||
}
|
||||
display(fields, undefined, 'grid');
|
||||
} else hide(fields);
|
||||
embed.classList.remove('empty');
|
||||
let re = /"((icon_)?url")(: *)("(?!\w+?:\/\/).+?")/g.exec(editor.getValue())
|
||||
if (re) error(`URLs should have a valid protocol (eg. https://) on this line <span class="inline">${makeShort(re[0], 30, 600)}</span>`, true);
|
||||
else notif.animate({ opacity: '0', bottom: '-50px', offset: 1 }, { easing: 'ease', duration: 500 }).onfinish = () => notif.style.removeProperty('display');
|
||||
}
|
||||
} catch (e) {
|
||||
error(e);
|
||||
}
|
||||
}
|
||||
|
||||
editor.on('change', editor => {
|
||||
try { update(toObj(editor.getValue())); }
|
||||
catch (e) {
|
||||
if (editor.getValue()) return; // error("Couldn't parse JSON; Invalid JSON syntax", e)
|
||||
embed.classList.add('empty');
|
||||
content.innerHTML = '';
|
||||
}
|
||||
document.querySelectorAll('.markup pre > code').forEach((block) => hljs.highlightBlock(block));
|
||||
twemoji.parse(msgEmbed);
|
||||
});
|
||||
|
||||
update(toObj(editor.getValue()));
|
||||
twemoji.parse(msgEmbed);
|
||||
document.querySelector('.timeText').innerText = tstamp()
|
||||
document.querySelectorAll('.markup pre > code').forEach((block) => hljs.highlightBlock(block))
|
||||
!window.navigator.userAgent.match(/Firefox\/[\d\.]+$/g) && // Firefox pushes the text up a little
|
||||
document.querySelector('.botText').style.removeProperty('top');
|
||||
};
|
||||
BIN
assets/media/layout.png
Normal file
BIN
assets/media/layout.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
125
index.html
Normal file
125
index.html
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
|
||||
<title>Embed Builder</title>
|
||||
<link rel="stylesheet" href="./assets/css/index.css" />
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/highlight.min.js"></script>
|
||||
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.min.css" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/mode/javascript/javascript.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/theme/material-darker.min.css" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/scroll/simplescrollbars.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/scroll/simplescrollbars.min.css" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/edit/matchbrackets.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/brace-fold.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/foldgutter.min.css" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/foldgutter.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/foldcode.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/lint/json-lint.min.js"></script>
|
||||
<script src="https://unpkg.com/jsonlint@1.6.3/web/jsonlint.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/lint/lint.min.css" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/lint/lint.min.js"></script>
|
||||
<script src="./assets/js/index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<section class="side1">
|
||||
<div class="top item">
|
||||
<textarea style="display: none;">
|
||||
{
|
||||
"content": "You can~~not~~ do `this`.```py\nAnd this.\nprint('Hi')```\n*italics* or _italics_ __*underline italics*__\n**bold** __**underline bold**__\n***bold italics*** __***underline bold italics***__\n__underline__ ~~Strikethrough~~",
|
||||
"embed": {
|
||||
"title": "Hello ~~people~~ world",
|
||||
"description": "A description. You can use [links](https://discord.com).\nAnd also emojis 🙂\n```\nAlso code blocks```",
|
||||
"color": 4321431,
|
||||
"timestamp": "2020-12-08T13:37:35.401Z",
|
||||
"url": "https://discord.com",
|
||||
"author": {
|
||||
"name": "Name",
|
||||
"url": "https://discord.com",
|
||||
"icon_url": "https://unsplash.it/100"
|
||||
},
|
||||
"thumbnail": {
|
||||
"url": "https://unsplash.it/200"
|
||||
},
|
||||
"image": {
|
||||
"url": "https://unsplash.it/380/200"
|
||||
},
|
||||
"footer": {
|
||||
"text": "Footer text",
|
||||
"icon_url": "https://unsplash.it/100"
|
||||
},
|
||||
"fields": [
|
||||
{
|
||||
"name": "Field 1, *lorem* **ipsum**, ~~dolor~~",
|
||||
"value": "Field value"
|
||||
},
|
||||
{
|
||||
"name": "Field 2",
|
||||
"value": "You can use custom emojis <:Kekwlaugh:722088222766923847>. <:GangstaBlob:742256196295065661>",
|
||||
"inline": false
|
||||
},
|
||||
{
|
||||
"name": "Inline field",
|
||||
"value": "Fields can be inline",
|
||||
"inline": true
|
||||
},
|
||||
{
|
||||
"name": "Inline field",
|
||||
"value": "*Lorem ipsum*",
|
||||
"inline": true
|
||||
},
|
||||
{
|
||||
"name": "Inline field",
|
||||
"value": "value",
|
||||
"inline": true
|
||||
},
|
||||
{
|
||||
"name": "Inline field",
|
||||
"value": "value",
|
||||
"inline": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="bottom item"></div>
|
||||
</section>
|
||||
<section class="side2">
|
||||
<div class="msgEmbed">
|
||||
<div class="contents">
|
||||
<img src="https://cdn.discordapp.com/embed/avatars/1.png" class="avatar" alt=" " />
|
||||
<h2>
|
||||
<span class="username" role="button">Discord Bot</span><span class="botTag"><span class="botText" style="top: 1.12px;">BOT</span></span>
|
||||
<span class="timeText"></span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="markup messageContent"></div>
|
||||
<div class="container">
|
||||
<div class="embed markup">
|
||||
<div class="embedGrid empty">
|
||||
<div class="embedAuthor embedMargin"></div>
|
||||
<div class="embedTitle embedMargin"></div>
|
||||
<div class="embedDescription embedMargin"></div>
|
||||
<div class="embedFields"></div>
|
||||
<img class="imageWrapper clickable embedMedia embedImage" />
|
||||
<img class="imageWrapper clickable embedThumbnail" />
|
||||
<div class="embedFooter embedMargin"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottomSide">
|
||||
<div class="notification">There is an error</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue