'})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'

'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"

Welcome ${"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"name"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}

"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"

"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" "})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:""})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"images"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"await"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"nodeHtmlToImage"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" html: _htmlTemplate,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" quality: "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"100"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" type: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'jpeg'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" puppeteerArgs: {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" args: ["}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'--no-sandbox'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" encoding: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'buffer'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"// for more configuration options refer to the library"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" msg.channel."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"send"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"new"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"MessageAttachment"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(images, "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"name"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}.jpeg`"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"))"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,n.jsxs)(e.h4,{id:"the-result-1",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#the-result-1",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"The result:"]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"https://dev-to-uploads.s3.amazonaws.com/i/m4bv874er90f3by3rxty.gif",alt:"HTML Example - GIF"})}),` `,(0,n.jsxs)(e.h2,{id:"conclusion-",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#conclusion-",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Conclusion ",(0,n.jsx)("a",{name:"conc"})]}),` `,(0,n.jsx)(e.p,{children:"Now we have two new ways to generate more complex and good looking cards for your Discord users to consume. One good example of this would be to display some game stats for example. My brother and his friends play World of Warcraft, so I took a little time to create a command, that will display the main stats for their characters using the HTML & CSS technique, here is the result of it:"}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"https://dev-to-uploads.s3.amazonaws.com/i/32oj0l49toik9d7y015d.png",alt:"WOW Stats - Discord.js"})}),` `,(0,n.jsx)(e.p,{children:"I would suggest using the SVG method while dealing with a static design/elements but only some text changes and use the HTML one while dealing with dynamic lists or images."}),` `,(0,n.jsx)(e.p,{children:"In the previous example, we might be able to archive the same result using an SVG but I find it hard since each element (the item icon and his value) are coming from an API in a different format (JPG/PNG for the images). Appending the item to a list it's way easier than applying a block of code to the SVG bases on some condition. Also styling things like images wrappers (round images with round borders) it's way easier in HTML & CSS than with SVG using things like masks."}),` `,(0,n.jsx)(e.p,{children:"I hope that this guide will open new ways for your creativity, which I would love to see them."}),` `,(0,n.jsxs)(e.p,{children:["You can find the BOT code with all examples at ",(0,n.jsx)(e.a,{href:"https://github.com/en3sis/discord-guides",children:"https://github.com/en3sis/discord-guides"})]}),` `,(0,n.jsxs)(e.p,{children:[`Any feedback, questions or suggestions are welcome! Thanks for reading! ~ `,(0,n.jsx)(e.a,{href:"https://twitter.com/en3sis",children:"https://twitter.com/en3sis"})]})]})}function b(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(d,l)})):d(l)}var B=b;return f(C);})(); ;return Component;

∫Posts

Dockerize Rust application ∫ Actix_web API

Fix Page with Redirect: A Solution for Vercel + Cloudflare Users

Custom Embeds with Discord.js