diff --git a/README.md b/README.md index 4129862..46b7885 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Aside the JSON editor, it also includes a GUI editor which converts to JSON for # Supported URL Parameters ## Editor param (/?editor=json) -The GUI editor is used by default. If 'editor' parameter is set with the editor set to "json", the website will use the JSON editor by default instead when the website loads. Setting the value to anything else other than 'json' will be ignored. +The GUI editor is used by default. If 'editor' parameter is set with it's value set to "json", the website will use the JSON editor by default instead. Setting the value to anything else other than 'json' will be ignored. Example URL: https://glitchii.github.io/embedbuilder/?editor=json @@ -27,18 +27,22 @@ https://glitchii.github.io/embedbuilder/?data=JTdCJTIyZW1iZWQlMjIlM0ElN0IlMjJ0aX +Params that end with `=` in the list below need a value, those that don't will always be truthy when set either with or with no value. ``` Parameter Description --------- ----------- -username= Used to set the deafult name of the bot. -avatar= If a valid URL is given, that will be the avatar or icon of the bot. -verified= Displays a verified badge on the bot tag when set to true. -reversed= Reverse the preview and editors position. +username= Used to set the deafult name of the bot. +avatar= If a valid URL is given, that will be the avatar or icon of the bot. +verified Displays a verified badge on the bot tag when set to true. +reverse Reverse the preview and editors position. +nouser Display embed or message content with no username or avatar. +embed Displa only the embed with no editor +editor=json Use the JSON editor by default instead of the GUI. guitabs= Specify what gui tabs to display comma seperated. Example: `guitabs=author` or `guitabs=image,footer` ``` ### Example URL with all parameters: -https://glitchii.github.io/embedbuilder/?username=Troy&verified=true&reversed=true&guitabs=image,footer&avatar=https://cdn.discordapp.com/avatars/663074487335649292/576eb5f13519b9da10ba7807bdd83fab.webp?size=128 +https://glitchii.github.io/embedbuilder/?username=Troy&verified&reverse&guitabs=image,footer&avatar=https://cdn.discordapp.com/avatars/663074487335649292/576eb5f13519b9da10ba7807bdd83fab.webp?size=128 >## Intergretting into your website >You are free to use this in your website. Intergretting into your websites allows sending the embed to Discord with a few changes, and using 'formmaters' eg. '{ server_name }' or '{ user_name }' etc. A not so bad downside would be that you'd probably have to keep up with fixes and updates. diff --git a/assets/css/index.css b/assets/css/index.css index 385b26b..8398184 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1,6 +1,6 @@ @font-face { font-family: DsWhitney; - src: local("Whitney"), url("../fonts/whitney-300.woff2"), url("../fonts/whitney-300.woff"); + src: local("Whitney"), url("../fonts/whitney-300.woff"); font-style: normal; font-weight: 300; font-display: swap; @@ -8,7 +8,7 @@ @font-face { font-family: DsWhitney; - src: local("Whitney"), url("../fonts/whitney-400.woff2"), url("../fonts/whitney-400.woff"); + src: local("Whitney"), url("../fonts/whitney-400.woff"); font-style: normal; font-weight: 400; font-display: swap; @@ -16,7 +16,7 @@ @font-face { font-family: DsWhitney; - src: local("Whitney"), url("../fonts/whitney-500.woff2"), url("../fonts/whitney-500.woff"); + src: local("Whitney"), url("../fonts/whitney-500.woff"); font-style: normal; font-weight: 500; font-display: swap; @@ -24,7 +24,7 @@ @font-face { font-family: DsWhitney; - src: local("Whitney"), url("../fonts/whitney-600.woff2"), url("../fonts/whitney-600.woff"); + src: local("Whitney"), url("../fonts/whitney-600.woff"); font-style: normal; font-weight: 600; font-display: swap; @@ -32,7 +32,7 @@ @font-face { font-family: DsWhitney; - src: local("Whitney"), url("../fonts/whitney-700.woff2"), url("../fonts/whitney-700.woff"); + src: local("Whitney"), url("../fonts/whitney-700.woff"); font-style: normal; font-weight: 700; font-display: swap; @@ -67,11 +67,18 @@ body { color: #fff; } +body.no-user .msgEmbed>.contents, .botTagVerified, .embedGrid>* { + display: none; +} + .main { position: absolute; width: 100%; height: 100%; display: grid; +} + +body:not(.only-embed) .main { grid-template-columns: 45% 55%; } @@ -147,7 +154,7 @@ body.gui .side1 .item.top { .main .side2 { height: 100%; - background-color: var(--fullEmbedBackground); + /* background-color: var(--fullEmbedBackground); */ justify-content: center; vertical-align: center; overflow: auto; @@ -266,6 +273,10 @@ img[alt] { padding: calc(0.125rem + 10px) 20px 20px 92px; } +body.no-user .msgEmbed { + padding-left: 35px; +} + .msgEmbed:hover { background-color: #04040512; } @@ -274,10 +285,6 @@ img[alt] { line-height: 1.375rem; } -.botTagVerified { - display: none; -} - .contents { position: static; margin-left: 0px; @@ -582,10 +589,6 @@ img[alt] { color: #fff; } -.embedGrid>* { - display: none; -} - .messageContent { user-select: text; margin-left: -72px; @@ -660,6 +663,10 @@ u { text-size-adjust: none; } +.embedMargin { + word-break: break-all; +} + .embed blockquote { max-width: 100%; } @@ -742,7 +749,7 @@ u { display: none; } -.embedImage > .spinner-container { +.embedImage>.spinner-container { background: none; } @@ -1761,6 +1768,10 @@ body { pointer-events: none; } +.noDisplay { + display: none!important; +} + @keyframes clearAn { 0% { transform: rotate(10deg); @@ -1808,26 +1819,6 @@ body.emptyEmbed.emptyContent .emptyTxt { background: #202225; } -@media screen and (max-width: 1270px) { - .fieldNumber::before { - right: 300%; - } -} - -@media screen and (max-height: 760px) { - .bottom .colrs { - bottom: 10px; - } - body.gui .side1 .item.top { - height: 65%; - max-width: 100%; - width: 100%; - } - .bottom { - margin: 40px 0 0 0 !important; - } -} - @media screen and (max-width: 1015px) { section.low .top>.gui { opacity: .6; @@ -1905,6 +1896,20 @@ body.emptyEmbed.emptyContent .emptyTxt { } } +@media screen and (max-height: 760px) { + .bottom .colrs { + bottom: 10px; + } + body.gui .side1 .item.top { + height: 65%; + max-width: 100%; + width: 100%; + } + .bottom { + margin: 40px 0 0 0 !important; + } +} + @media screen and (max-width: 530px) { .main .side1 { padding: 10px; @@ -1919,7 +1924,17 @@ body.emptyEmbed.emptyContent .emptyTxt { margin: 20px 0px; padding: 0.125rem 0 20px 65px; } + body.no-user .msgEmbed { + padding-left: 25px; + margin-top: 13px; + } .avatar { left: 10px; } +} + +@media screen and (max-width: 490px) { + .markup>blockquote, .markup pre { + max-width: 99%; + } } \ No newline at end of file diff --git a/assets/fonts/whitney-300.woff2 b/assets/fonts/whitney-300.woff similarity index 100% rename from assets/fonts/whitney-300.woff2 rename to assets/fonts/whitney-300.woff diff --git a/assets/fonts/whitney-400.woff2 b/assets/fonts/whitney-400.woff similarity index 100% rename from assets/fonts/whitney-400.woff2 rename to assets/fonts/whitney-400.woff diff --git a/assets/fonts/whitney-500.woff2 b/assets/fonts/whitney-500.woff similarity index 100% rename from assets/fonts/whitney-500.woff2 rename to assets/fonts/whitney-500.woff diff --git a/assets/fonts/whitney-600.woff2 b/assets/fonts/whitney-600.woff similarity index 100% rename from assets/fonts/whitney-600.woff2 rename to assets/fonts/whitney-600.woff diff --git a/assets/fonts/whitney-700.woff2 b/assets/fonts/whitney-700.woff similarity index 100% rename from assets/fonts/whitney-700.woff2 rename to assets/fonts/whitney-700.woff diff --git a/assets/js/script.js b/assets/js/script.js index 1411fa1..87cfdf8 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -4,13 +4,16 @@ var params = new URL(location).searchParams, + hasParam = param => params.get(param) !== null, dataSpecified = params.get('data'), botName = params.get('username'), botIcon = params.get('avatar'), guiTabs = params.get('guitabs'), useJsonEditor = params.get('editor') === 'json', - botVerified = params.get('verified') === 'true', - reverseColmns = params.get('reversed') === 'true', + botVerified = hasParam('verified'), + reverseColmns = hasParam('reverse'), + noUser = hasParam('nouser'), + onlyEmbed = hasParam('embed'), activeFields, colNum = 1, num = 0, validationError, jsonToBase64 = (jsonCode, withURL, redirect) => { let data = jsonCode || json; @@ -101,14 +104,23 @@ if (dataSpecified) window.json = base64ToJson(); window.onload = () => { - if (useJsonEditor) document.body.classList.remove('gui'); - if (botName) document.querySelector('.username').textContent = botName; - if (botIcon) document.querySelector('.avatar').src = botIcon; - if (botVerified) document.querySelector('.msgEmbed > .contents').classList.add('verified'); + let body = document.body; + + if (onlyEmbed) body.classList.add('only-embed'); + else { + document.querySelector('.side1.noDisplay').classList.remove('noDisplay'); + if (useJsonEditor) body.classList.remove('gui'); + } + if (noUser) body.classList.add('no-user'); + else { + if (botName) document.querySelector('.username').textContent = botName; + if (botIcon) document.querySelector('.avatar').src = botIcon; + if (botVerified) document.querySelector('.msgEmbed > .contents').classList.add('verified'); + } if (reverseColmns) { let side1 = document.querySelector('.side1'); side1.parentElement.insertBefore(side1.nextElementSibling, side1); - document.body.classList.add('reversed'); + body.classList.add('reversed'); }; document.querySelectorAll('.clickable > img') @@ -883,4 +895,6 @@ window.onload = () => { json.embed.color = parseInt(inputValue, 16); update(json); }) + + if (onlyEmbed) document.querySelector('.side1')?.remove(); }; \ No newline at end of file diff --git a/index.html b/index.html index 96ba306..ca8fba7 100644 --- a/index.html +++ b/index.html @@ -38,7 +38,7 @@
-
+