Sends a welcome image to new users. The image is generated entirely from HTML + CSS and supports dynamic variables like text, colours, and images. Requires 'Privileged Intents' to be activated. **Warning:** projects with many dependencies may break with this snippet as the project size might become too large. Delete the 'puppeteer' dependency if this occurs.
const lib = require('lib')({token: process.env.STDLIB_SECRET_TOKEN});
const prefix = require('prefix-parser')
const puppeteer = require('autocode-puppeteer')
const user = context.params.event.user;
const width = 800, height = 350;
const colourPairs = [
['#F87171', '#374151'], // yellow + gray
['#FBBF24', '#1E3A8A'], // yellow + blue
['#2DD4BF', '#1E40AF'], // teal + navy
['#FB923C', '#292524'], // orange + black
['#6EE7B7', '#047857'], // emerald
['#FDBA74', '#C2410C'], // orange
['#7DD3FC', '#0369A1'], // sky
['#FACC15', '#A16207'], // yellow
]
const text1 = 'Welcome'
const text2 = user.username
const [color1, color2] = colourPairs[Math.floor(Math.random() * colourPairs.length)]
const imageUrl = user.avatar
? `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png?size=512`
: 'https://polybit-apps.s3.amazonaws.com/stdlib/users/discord/profile/image.png?1621007833204';
// Add html and css here.
// This example uses Tailwind CSS for styling - https://play.tailwindcss.com/kIKw0FjbXH?size=802x350
const body = `
`
const css = `
/** Normalize CSS */
*, ::before, ::after { box-sizing: border-box; } html { -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; } html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; } body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; } hr { height: 0; color: inherit; } abbr[title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } ::-moz-focus-inner { border-style: none; padding: 0; } :-moz-focusring { outline: 1px dotted ButtonText; } :-moz-ui-invalid { box-shadow: none; } legend { padding: 0; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } button { background-color: transparent; background-image: none; } fieldset { margin: 0; padding: 0; } ol, ul { list-style: none; margin: 0; padding: 0; } html { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; line-height: 1.5; } body { font-family: inherit; line-height: inherit; } *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; } hr { border-top-width: 1px; } img { border-style: solid; } textarea { resize: vertical; } input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; color: #9ca3af; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { opacity: 1; color: #9ca3af; } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; } button, [role="button"] { cursor: pointer; } table { border-collapse: collapse; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } button, input, optgroup, select, textarea { padding: 0; line-height: inherit; color: inherit; } pre, code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } [hidden] { display: none; }
/** Tailwind */
*, ::before, ::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); --tw-border-opacity: 1; border-color: rgba(229, 231, 235, var(--tw-border-opacity)); } .absolute { position: absolute; } .relative { position: relative; } .left-0 { left: 0px; } .top-0 { top: 0px; } .right-0 { right: 0px; } .bottom-0 { bottom: 0px; } .left-20 { left: 5rem; } .top-1\\/2 { top: 50%; } .h-60 { height: 15rem; } .h-full { height: 100%; } .h-24 { height: 6rem; } .h-36 { height: 9rem; } .h-6 { height: 1.5rem; } .h-10 { height: 2.5rem; } .min-h-screen { min-height: 100vh; } .w-full { width: 100%; } .w-96 { width: 24rem; } .w-60 { width: 15rem; } .w-52 { width: 13rem; } .w-40 { width: 10rem; } .w-20 { width: 5rem; } .w-16 { width: 4rem; } .w-8 { width: 2rem; } .w-10 { width: 2.5rem; } .-translate-y-1\\/2 { --tw-translate-y: -50%; transform: var(--tw-transform); } .rotate-180 { --tw-rotate: 180deg; transform: var(--tw-transform); } .rounded-full { border-radius: 9999px; } .border-8 { border-width: 8px; } .object-cover { -o-object-fit: cover; object-fit: cover; } .object-center { -o-object-position: center; object-position: center; } .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-5xl { font-size: 3rem; line-height: 1; } .font-extrabold { font-weight: 800; } .opacity-20 { opacity: 0.2; } .opacity-50 { opacity: 0.5; } .opacity-40 { opacity: 0.4; }
`
// Make html dynamic by replacing variables
const bodyWithParams = body
.split('{{color1}}').join(color1)
.split('{{color2}}').join(color2)
.split('{{text1}}').join(text1)
.split('{{text2}}').join(text2)
.split('{{imageUrl}}').join(imageUrl)
// Inject html and css into a valid html document
const html = `
${bodyWithParams}
`;
// Screenshot with chrome via puppeteer
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent(html);
await page.setViewport({ width, height, deviceScaleFactor: 2 });
let screenshot = await page.screenshot({ type: 'jpeg', quality: 90, fullPage: true });
await browser.close();
// Post to Discord!
await lib.discord.channels['@0.1.2'].messages.create({
channel_id: process.env.CHANNEL_ID,
content: `Welcome <@${user.id}>`,
"file": Buffer.from(screenshot, 'binary'),
"filename": "image.jpg"
});
