├── config ├── prod.env.js ├── dev.env.js └── index.js ├── .babelrc ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── .github └── workflows │ └── main.yml ├── .eslintrc.js ├── LICENSE ├── docs ├── index.html └── static │ ├── js │ ├── manifest.1cf8c84e130da47cd104.js │ ├── manifest.3e8cd535bf17bedc30fb.js │ ├── manifest.f01c6bed9b5028d57014.js │ ├── manifest.1cf8c84e130da47cd104.js.map │ ├── manifest.3e8cd535bf17bedc30fb.js.map │ ├── manifest.f01c6bed9b5028d57014.js.map │ └── app.b241be61652c70b62188.js │ └── css │ ├── app.221ffb896ddd6cede5b068b2c85d3ad0.css │ ├── app.d2ba3ce5ec90fe7e057614751e03a515.css │ ├── app.221ffb896ddd6cede5b068b2c85d3ad0.css.map │ └── app.d2ba3ce5ec90fe7e057614751e03a515.css.map └── README.md /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false 5 | }], 6 | "stage-2" 7 | ], 8 | "plugins": ["transform-runtime"] 9 | } 10 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "postcss-import": {}, 7 | "autoprefixer": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Linting CI 2 | 3 | on: 4 | push: 5 | branches: [ master ] 6 | pull_request: 7 | branches: [ master ] 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-latest 12 | 13 | steps: 14 | - uses: actions/checkout@v2 15 | 16 | - name: Test Linting 17 | run: | 18 | npm install 19 | npm run lint 20 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | 'eslint:recommended', 4 | 'plugin:vue/vue3-recommended', 5 | 'plugin:vue/recommended' 6 | ], 7 | rules: { 8 | 'vue/require-explicit-emits': 0, 9 | 'vue/custom-event-name-casing': 0, 10 | 'vue/html-indent': 0, 11 | 'vue/no-deprecated-v-on-native-modifier': 0, 12 | 'vue/no-side-effects-in-computed-properties': 0, 13 | 'vue/attributes-order': 0, 14 | 'vue/max-attributes-per-line': 0, 15 | 'no-redeclare': 0, 16 | 'no-empty': 0, 17 | 'vue/this-in-template': 0, 18 | 'no-mixed-spaces-and-tabs': 0 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 NNTin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | 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 FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | discord-logo
2 | -------------------------------------------------------------------------------- /docs/static/js/manifest.1cf8c84e130da47cd104.js: -------------------------------------------------------------------------------- 1 | !function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,a,c){for(var i,u,f,s=0,l=[];s"}})}},computed:{getDTextStyle:{get:function(){return{backgroundColor:this.colors.discordfill.hex}}},getDCornerStyle:{get:function(){var t={transform:"rotate(0deg)",backgroundColor:"#FFFFFF"};return"#FFFFFF"==this.colors.discordfill.hex?t.backgroundColor=this.colors.discordcolor.hex:t.backgroundColor="#FFFFFF",!this.isLeft&&this.isTop?(this.rotation="transform: rotateY(180deg);",t.transform="rotateY(180deg)",t):this.isLeft||this.isTop?this.isLeft&&!this.isTop?(this.rotation="transform: rotateX(180deg);",t.transform="rotateX(180deg)",t):t:(this.rotation="transform: rotateY(180deg) rotateX(180deg);",t.transform="rotateY(180deg) rotateX(180deg)",t)}},isClickable:{get:function(){return""!=this.customLink}}},watch:{previewDiscordType:function(){this.updatePreviewCode()},isRainbow:function(){this.updatePreviewCode()},size:function(){this.updatePreviewCode()},isLeft:function(){this.updatePreviewCode()},isTop:function(){this.updatePreviewCode()},colors:{handler:function(){this.updatePreviewCode()},deep:!0},customLink:function(){this.updatePreviewCode()}},created:function(){this.$nextTick(function(){this.updatePreviewCode()})}},bt=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",[t._m(0,!1,!1),t._v(" "),i("portal-target",{attrs:{name:"destination"}}),t._v(" "),i("section",[i("div",{staticClass:"left"},[i("vueSlider",{ref:"vueSlider",attrs:{reverse:!0,direction:"vertical",width:4,height:482,min:18,max:250},model:{value:t.size,callback:function(e){t.size=e},expression:"size"}}),t._v(" "),i("div",{staticClass:"stack"},[i("div",{staticClass:"input"},[i("toggle-button",{staticClass:"button",attrs:{color:{checked:"#76DA72",unchecked:"#DA7272"},disabled:"corner"!=t.previewDiscordType,labels:{checked:"left",unchecked:"right"},width:100},model:{value:t.isLeft,callback:function(e){t.isLeft=e},expression:"isLeft"}}),t._v(" "),i("toggle-button",{staticClass:"button",attrs:{color:{checked:"#7289DA",unchecked:"#D4DA72"},disabled:"corner"!=t.previewDiscordType,labels:{checked:"top",unchecked:"bottom"},width:100},model:{value:t.isTop,callback:function(e){t.isTop=e},expression:"isTop"}}),t._v(" "),i("toggle-button",{staticClass:"button",attrs:{color:{checked:"#2BA027",unchecked:"#B9B6B6"},sync:!0,disabled:!0,labels:{checked:"clickable link",unchecked:"no link"},width:100},model:{value:t.isClickable,callback:function(e){t.isClickable=e},expression:"isClickable"}}),t._v(" "),i("input",{directives:[{name:"model",rawName:"v-model",value:t.customLink,expression:"customLink"}],staticClass:"text",attrs:{size:30,placeholder:"insert link (e.g. discord invite link)"},domProps:{value:t.customLink},on:{input:function(e){e.target.composing||(t.customLink=e.target.value)}}}),t._v(" "),i("input",{directives:[{name:"model",rawName:"v-model",value:t.bubbleText,expression:"bubbleText"}],staticClass:"text",attrs:{size:30,placeholder:"insert text"},domProps:{value:t.bubbleText},on:{input:function(e){e.target.composing||(t.bubbleText=e.target.value)}}})],1),t._v(" "),i("portal",{attrs:{to:"destination",disabled:"speechbubble"!=t.previewDiscordType}},[i("div",{ref:"preview",attrs:{id:"preview"}},["standard"==t.previewDiscordType?i("DiscordLogo",{staticClass:"previewbox",attrs:{discordEyes:t.discordEyes,isRainbow:t.isRainbow,animationStyle:t.animationStyle,customLink:t.customLink,width:t.size,height:t.size,discordfill:t.colors.discordfill.hex,discordcolor:t.colors.discordcolor.hex}}):"speechbubble"==t.previewDiscordType?i("DiscordText",{ref:"discordtext",staticClass:"previewbox previewDiscordText",style:t.getDTextStyle,attrs:{discordEyes:t.discordEyes,isRainbow:t.isRainbow,animationStyle:t.animationStyle,customLink:t.customLink,height:t.size/4,standardText:t.bubbleText,discordfill:t.colors.discordfill.hex,discordcolor:t.colors.discordcolor.hex,writeText:!1},on:{htmlModified:t.onHtmlModified}}):i("DiscordCorner",{staticClass:"previewbox",style:t.getDCornerStyle,attrs:{discordEyes:t.discordEyes,customLink:t.customLink,isRainbow:t.isRainbow,animationStyle:t.animationStyle,width:t.size,height:t.size,discordfill:t.colors.discordfill.hex,discordcolor:t.colors.discordcolor.hex}})],1)])],1)],1),t._v(" "),i("div",{staticClass:"color-picker"},[i("chrome-picker",{model:{value:t.colors.discordcolor,callback:function(e){t.$set(t.colors,"discordcolor",e)},expression:"colors.discordcolor"}}),t._v(" "),i("chrome-picker",{model:{value:t.colors.discordfill,callback:function(e){t.$set(t.colors,"discordfill",e)},expression:"colors.discordfill"}})],1),t._v(" "),i("textarea",{directives:[{name:"model",rawName:"v-model",value:t.previewCode,expression:"previewCode"}],domProps:{value:t.previewCode},on:{input:function(e){e.target.composing||(t.previewCode=e.target.value)}}})]),t._v(" "),t._m(1,!1,!1)],1)},wt=[function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("header",[i("h1",[t._v("Animated Discord Logo")]),t._v(" "),i("p",[t._v("This project was inspired by "),i("a",{attrs:{href:"https://canary.discordapp.com/assets/0bdc0497eb3a19e66f2b1e3d5741634c.webm"}},[t._v("Discord's loading logo.")])]),t._v(" "),i("p",[t._v("Since the loading logo is a video you have less control over its behavior. This project recreates the animated logo in "),i("b",[t._v("S")]),t._v("caleable "),i("b",[t._v("V")]),t._v("ector "),i("b",[t._v("G")]),t._v("raphics. By using "),i("b",[t._v("SVG")]),t._v(", all edges are clean and sharp. You can have any size and color. It consumes less resources compared to a video. Original SVG and color palette were retrieved from "),i("a",{attrs:{href:"https://discordapp.com/branding"}},[t._v("Discord")]),t._v(".")]),t._v(" "),i("p",[t._v("If you need help, feel free joining "),i("a",{attrs:{href:"https://discord.gg/gDHs8AV"}},[t._v("my server")]),t._v(". Below is a code generator:")])])},function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("footer",[i("p",[t._v("This project is neither built nor endorsed by Discord.")])])}],xt={render:bt,staticRenderFns:wt},Ct=xt,kt=i("VU/8"),St=c,Lt=kt(vt,Ct,!1,St,null,null),Ft=Lt.exports,Et={name:"EyeSelector",components:{DiscordLogo:x},data:function(){return{size:100}},props:{customLink:{type:String,default:""},discordcolor:{type:String,default:"#7289DA"},discordfill:{type:String,default:"#23272A"},isRainbow:{type:Boolean,default:!1},discordEyes:{type:String,default:"none"},animationStyle:{type:String,default:"swirl"}},methods:{setEye:function(t){this.$emit("activeEyeChange",t)},sleep:function(t){return new q.a(function(e){return setTimeout(e,t)})},isActive:function(t){return this.discordEyes==t?{border:"solid 2px "+this.discordcolor}:{border:"solid 2px transparent"}}},computed:{},created:function(){}},_t=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"eyeSelector"},[i("DiscordLogo",{style:t.isActive("wink"),attrs:{discordEyes:"wink",customLink:t.customLink,width:t.size,height:t.size,discordfill:t.discordfill,discordcolor:t.discordcolor,animationStyle:t.animationStyle,isRainbow:t.isRainbow},nativeOn:{click:function(e){t.setEye("wink")}}}),t._v(" "),i("DiscordLogo",{style:t.isActive("none"),attrs:{discordEyes:"none",customLink:t.customLink,width:t.size,height:t.size,discordfill:t.discordfill,discordcolor:t.discordcolor,animationStyle:t.animationStyle,isRainbow:t.isRainbow},nativeOn:{click:function(e){t.setEye("none")}}}),t._v(" "),i("DiscordLogo",{style:t.isActive("angry"),attrs:{discordEyes:"angry",customLink:t.customLink,width:t.size,height:t.size,discordfill:t.discordfill,discordcolor:t.discordcolor,animationStyle:t.animationStyle,isRainbow:t.isRainbow},nativeOn:{click:function(e){t.setEye("angry")}}}),t._v(" "),i("DiscordLogo",{style:t.isActive("noeyes"),attrs:{discordEyes:"noeyes",customLink:t.customLink,width:t.size,height:t.size,discordfill:t.discordfill,discordcolor:t.discordcolor,animationStyle:t.animationStyle,isRainbow:t.isRainbow},nativeOn:{click:function(e){t.setEye("noeyes")}}})],1)},Dt=[],Rt={render:_t,staticRenderFns:Dt},Tt=Rt,At=i("VU/8"),zt=l,$t=At(Et,Tt,!1,zt,null,null),Nt=$t.exports,Bt={name:"app",components:{DiscordLogo:x,GithubCorner:R,DiscordCorner:U,ColorSelector:I,StyleSelector:rt,MainBody:Ft,DiscordText:gt,EyeSelector:Nt},data:function(){return{discordEyes:new URL(document.URL).searchParams.get("eyes")?new URL(document.URL).searchParams.get("eyes"):"none",isRainbow:!!new URL(document.URL).searchParams.get("rainbow"),animationStyle:new URL(document.URL).searchParams.get("animation")?new URL(document.URL).searchParams.get("animation"):"swirl",standardText:"Join us on Discord",previewDiscordType:new URL(document.URL).searchParams.get("preview")?new URL(document.URL).searchParams.get("preview"):"standard",colors:{discordcolor:"#FFFFFF",discordfill:"#7289DA"}}},methods:{updateSpeechBubble:function(){var t=["Click me to get the speech bubble code generator!","Click top right GitHub corner to fork!","Animation or style ideas? Raise an issue on GitHub!","Created with ♥ by NNTin using Vue.js","Click on the Discord corner to get the code.","All discord logos are clickable and will not redirect you!"],e=t[Math.floor(Math.random()*t.length)];this.standardText=e},onActiveEyeChange:function(t){this.discordEyes=t,this.$nextTick(function(){this.$refs.mainbody.updatePreviewCode()})},onColorChange:function(t){this.colors=t,this.$refs.mainbody.changeColor(this.colors.discordcolor,this.colors.discordfill)},onRainbowChange:function(t){this.isRainbow=t,this.$nextTick(function(){this.$refs.styleselector.isRainbowSelected=t,this.$refs.mainbody.updatePreviewCode()})},onStyleChange:function(t){this.animationStyle=t,this.$nextTick(function(){this.$refs.mainbody.updatePreviewCode()})},setPreviewType:function(t){this.previewDiscordType=t,this.$nextTick(function(){this.$refs.mainbody.refreshSlider(),this.$refs.mainbody.updatePreviewCode()})}},computed:{getBackgroundColor:{get:function(){return{backgroundColor:this.colors.discordfill}}}},created:function(){this.updateSpeechBubble()}},Pt=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{attrs:{id:"app"}},[i("div",{style:t.getBackgroundColor,attrs:{id:"top"}},[i("GithubCorner",{attrs:{discordcolor:t.colors.discordfill,discordfill:t.colors.discordcolor}}),t._v(" "),i("DiscordCorner",{attrs:{discordEyes:t.discordEyes,customLink:"#",isRainbow:t.isRainbow,animationStyle:t.animationStyle,id:"discordcorner",discordcolor:t.colors.discordfill,discordfill:t.colors.discordcolor},nativeOn:{click:function(e){t.setPreviewType("corner")}}}),t._v(" "),i("div",{attrs:{id:"container"}},[i("ColorSelector",{staticClass:"box",attrs:{discordEyes:t.discordEyes,customLink:"#",animationStyle:t.animationStyle},on:{colorChange:t.onColorChange,rainbowChange:t.onRainbowChange}}),t._v(" "),i("StyleSelector",{ref:"styleselector",staticClass:"box",attrs:{animationStyle:t.animationStyle,discordEyes:t.discordEyes,customLink:"#",isRainbow:t.isRainbow,discordfill:t.colors.discordfill,discordcolor:t.colors.discordcolor},on:{rainbowChange:t.onRainbowChange,styleChange:t.onStyleChange}}),t._v(" "),i("DiscordLogo",{staticClass:"box",attrs:{discordEyes:t.discordEyes,customLink:"#",animationStyle:t.animationStyle,isRainbow:t.isRainbow,discordfill:t.colors.discordfill,discordcolor:t.colors.discordcolor},nativeOn:{click:function(e){t.setPreviewType("standard")}}})],1),t._v(" "),i("EyeSelector",{attrs:{discordEyes:t.discordEyes,animationStyle:t.animationStyle,customLink:"#",isRainbow:t.isRainbow,discordfill:t.colors.discordfill,discordcolor:t.colors.discordcolor},on:{activeEyeChange:t.onActiveEyeChange}}),t._v(" "),i("br"),t._v(" "),i("DiscordText",{ref:"discordtext",attrs:{discordEyes:t.discordEyes,isRainbow:t.isRainbow,customLink:"#",animationStyle:t.animationStyle,standardText:t.standardText,discordfill:t.colors.discordfill,discordcolor:t.colors.discordcolor},nativeOn:{click:function(e){t.updateSpeechBubble(),t.setPreviewType("speechbubble")}}})],1),t._v(" "),i("MainBody",{ref:"mainbody",attrs:{discordEyes:t.discordEyes,animationStyle:t.animationStyle,isRainbow:t.isRainbow,previewDiscordType:t.previewDiscordType}})],1)},Mt=[],Ut={render:Pt,staticRenderFns:Mt},Ot=Ut,Vt=i("VU/8"),Yt=f,Gt=Vt(Bt,Ot,!1,Yt,null,null),Ht=Gt.exports,Xt=i("nkUn"),Zt=i.n(Xt),jt=i("9mpg"),It=i.n(jt);u.default.use(Zt.a),u.default.use(It.a),u.default.config.productionTip=!1,new u.default({el:"#app",template:"",components:{App:Ht}})},NiE3:function(t,e){},PomH:function(t,e){},dHxA:function(t,e){},"f88/":function(t,e){},skqV:function(t,e){}},["NHnr"]); 2 | //# sourceMappingURL=app.b241be61652c70b62188.js.map --------------------------------------------------------------------------------