discord-message-transcript 1.0.0

package/dist/renderers/html/html copy.js

@@ -0,0 +1,371 @@
+import { CustomError } from "../../core/error";
+import { markdownToHTML } from "../../core/markdown";
+import { JsonButtonStyle, JsonComponentType } from "../../types/types";
+import { ACTIONROW_CSS, ATTACHMENT_CSS, BUTTON_CSS, COMPONENTS_CSS, COMPONENTSV2_CSS, DEFAULT_CSS, EMBED_CSS, MESSAGE_CSS } from "./css";
+const COUNT_UNIT = ["KB", "MB", "GB", "TB"];
+const BUTTON_COLOR = ["black", "#5865f2", "gray", "lime", "red", "black", "#5865f2"];
+export class Html {
+    guild;
+    channel;
+    messages;
+    options;
+    dateFormat;
+    constructor(data, options) {
+        this.guild = data.guild;
+        this.channel = data.channel;
+        this.messages = data.messages;
+        this.options = options;
+        try {
+            this.dateFormat = new Intl.DateTimeFormat(options.localDate, {
+                timeZone: options.timeZone,
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit'
+            });
+        }
+        catch (error) {
+            throw new CustomError("[discord-message-transcript] Invalid LocalDate and/or TimeZone.");
+        }
+    }
+    headerBuilder() {
+        return `
+        <div style="display: flex;  gap: 1.5rem; align-items: center;">
+            ${this.channel.img ? `<img src="${this.channel.img}" style="width: 7rem; height: 7rem; border-radius: 50%;">` : ""}
+            <div style="display: flex; flex-direction: column; justify-content: center; gap: 1.25rem;">
+                ${this.guild ? `<div id="guild" class="line">
+                    <h4>Guild: </h4>
+                    <h4 style="font-weight: normal;">${this.guild.name}</h4>
+                </div>` : ""}
+                ${this.channel.parent ? `<div id="category" class="line">
+                    <h4>Category: </h4>
+                    <h4 style="font-weight: normal;">${this.channel.parent.name}</h4>
+                </div>` : ""}
+                <div id="channel" class="line">
+                    <h4>Channel: </h4>
+                    <h4 style="font-weight: normal;">${this.channel.name}</h4>
+                </div>
+                ${this.channel.topic ? `<div id="topic" class="line">
+                    <h4>Topic: </h4>
+                    <h4 style="font-weight: normal;">${this.channel.topic}</h4>
+                </div>` : ""}
+            </div>
+        </div>
+        `;
+    }
+    messagesBuilder() {
+        return this.messages.map(message => {
+            const date = new Date(message.createdTimestamp);
+            message.content = markdownToHTML(message.content, message.mentions, this.dateFormat);
+            message.attachments;
+            return `
+<div class="messageDiv" id="${message.id}>
+    ${message.references && message.references.messageId ?
+                `<div class="messageReply" data-id="${message.references.messageId}">
+        <svg class="messageReplySvg"><use href="#reply-icon"></use></svg>
+        <img class="messageReplyImg">
+        ${message.author.bot ? `<p class="badgeReply">APP</p>` : ""}
+        <div class="messageReplyText"></div>
+    </div>` : ""}
+    <div class="messageBotton">
+        <img src="${message.author.avatarURL}" class="messageImg">
+        <div class="messageDivRight">
+            <div class="messageUser">
+                <h3 class="messageUsername" style="color: ${message.member?.displayHexColor ?? "#dbdee1"}">${message.member?.displayName ?? message.author.displayName}</h3>
+                ${message.author.bot ? `<p class="badge">APP</p>` : ""}
+                ${message.author.system ? `<p class="badge">SYSTEM</p>` : ""}
+                ${message.author.guildTag ? `<p class="badgeTag">${message.author.guildTag}</p>` : ""}
+                <p class="messageTimeStamp">${this.dateFormat.format(date)}</p>
+            </div>
+            <div class="messageContent"">${message.content}</div>
+            ${message.embeds.length > 0 ? this.embedBuilder(message, message.embeds) : ""}
+            ${message.attachments.length > 0 ? this.attachmentBuilder(message.attachments) : ""}
+            ${message.components.length > 0 ? this.componentBuilder(message, message.components) : ""}
+        </div>
+    </div>
+</div>
+        `;
+        }).join("");
+    }
+    toHTML() {
+        return `
+<!DOCTYPE html>
+<html lang="pt-BR"></html>
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${this.options.fileName}</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/atom-one-dark.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js"></script>
+    <style>
+    ${DEFAULT_CSS}
+    ${MESSAGE_CSS}
+    ${this.options.includeEmbeds ? EMBED_CSS : ""}
+    ${this.options.includeButtons || this.options.includeComponents ? ACTIONROW_CSS : ""}
+    ${this.options.includeAttachments || this.options.includeV2Components ? ATTACHMENT_CSS : ""}
+    ${this.options.includeButtons || this.options.includeV2Components ? BUTTON_CSS : ""}
+    ${this.options.includeComponents ? COMPONENTS_CSS : ""}
+    ${this.options.includeV2Components ? COMPONENTSV2_CSS : ""}
+    </style>
+</head>
+<body>
+    ${this.svgBuilder()}
+    <header>
+        ${this.headerBuilder()}
+    </header>
+    <main style="display: flex; flex-direction: column; gap: 1.75rem; padding: 2.25rem;">
+       ${this.messagesBuilder()}
+    </main>
+    <footer>
+        <br>
+        <h2>Transcript generated by <a href="https://github.com/HenriqueMairesse/discord-channel-transcript">discord-channel-transcript</a></h2>
+    </footer>
+    <script>
+        document.addEventListener('click', function (event) {
+            const spoiler = event.target.closest('.spoilerMsg, .spoilerAttachment');
+            if (spoiler && !spoiler.classList.contains('revealed')) {
+                event.preventDefault();
+                event.stopPropagation();
+                spoiler.classList.add('revealed');
+            }
+
+            const selectorInput = event.target.closest('.selectorInput');
+            document.querySelectorAll('.selector').forEach(selector => {
+                if (!selector.contains(event.target)) {
+                    selector.classList.remove('active');
+                }
+            });
+
+            if (selectorInput) {
+                const selector = selectorInput.closest('.selector');
+                if (selector) {
+                    selector.classList.toggle('active');
+                }
+            }
+        });
+        document.addEventListener('DOMContentLoaded', function (event) {
+            hljs.highlightAll();
+            
+        });
+    </script>
+</body>
+</html>     
+`;
+    }
+    embedBuilder(message, embeds) {
+        return embeds.map(embed => {
+            const embedAuthor = embed.author ? (embed.author.url ? `<a class="embedHeaderRightAuthorName" href="${embed.author.url}" target="_blank">${embed.author.name}</a>` : `<p class="embedHeaderRightAuthorName">${embed.author.name}</p>`) : "";
+            const embedTitle = embed.title ? (embed.url ? `<a class="embedHeaderRightTitle" href="${embed.url}" target="_blank">${embed.title}</a>` : `<p class="embedHeaderRightTitle">${embed.title}</p>`) : "";
+            return embed.type != "poll_result" ? `
+                <div class="embed" style="${embed.hexColor ? `border-left-color: ${embed.hexColor}` : ''}">
+                    ${embed.author || embed.title || embed.thumbnail ? `
+                    <div class="embedHeader">
+                        <div class="embedHeaderRight">
+                            ${embed.author ? `
+                            <div class="embedHeaderRightAuthor">
+                                ${embed.author.iconURL ? `<img class="embedHeaderRightAuthorImg" src="${embed.author.iconURL}">` : ""}
+                                ${embedAuthor}
+                            </div>` : ""}
+                            ${embedTitle}
+                        </div>
+                        ${embed.thumbnail ? `<img class="embedHeaderThumbnail" src="${embed.thumbnail.url}">` : ""}
+                    </div>` : ""}
+                    ${embed.description ? `<div class="embedDescription">${markdownToHTML(embed.description, message.mentions, this.dateFormat)}</div>` : ""}
+                    ${embed.fields && embed.fields.length > 0 ? `
+                    <div class="embedFields">
+                        ${embed.fields.map(field => `
+                        <div class="embedFieldsField" style="${field.inline ? 'display: inline-block;' : ''}">
+                            <p class="embedFieldsFieldTitle">${field.name}</p>
+                            <p class="embedFieldsFieldValue">${markdownToHTML(field.value, message.mentions, this.dateFormat)}</p>
+                        </div>`).join("")}
+                    </div>` : ""}
+                    ${embed.image ? `
+                    <div class="embedImage">
+                        <img src="${embed.image.url}">
+                    </div>` : ""}
+                    ${embed.footer || embed.timestamp ? `
+                    <div class="embedFooter">
+                        ${embed.footer?.iconURL ? `<img class="embedFooterImg" src="${embed.footer.iconURL}">` : ""}
+                        ${embed.footer?.text || embed.timestamp ? `<p class="embedFooterText">${embed.footer?.text ?? ''}${embed.footer?.text && embed.timestamp ? ' | ' : ''}${embed.timestamp ? this.dateFormat.format(new Date(embed.timestamp)) : ''}</p>` : ""}
+                    </div>` : ""}
+                </div>
+            ` : ``;
+        }).join("");
+    }
+    attachmentBuilder(attachments) {
+        return attachments.map(attachment => {
+            let html = "";
+            if (attachment.contentType?.startsWith('image/')) {
+                html = `<img class="attachmentImage" src="${attachment.url}">`;
+            }
+            else if (attachment.contentType?.startsWith('video/')) {
+                html = `<video class="attachmentVideo" controls src="${attachment.url}"></video>`;
+            }
+            else if (attachment.contentType?.startsWith('audio/')) {
+                html = `<audio class="attachmentAudio" controls src="${attachment.url}"></audio>`;
+            }
+            else {
+                let fileSize = attachment.size / 1024;
+                let count = 0;
+                while (fileSize > 512 && count < COUNT_UNIT.length - 1) {
+                    fileSize = fileSize / 1024;
+                    count++;
+                }
+                html = `
+                    <div class="attachmentFile">
+                        <div class="attachmentFileInfo">
+                            <p class="attachmentFileName">${attachment.name ?? 'attachment'}</p>
+                            <div class="attachmentFileSize">${fileSize.toFixed(2)} ${COUNT_UNIT[count]}</div>
+                        </div>
+                        <a class="attachmentDownload" href="${attachment.url}" target="_blank">
+                            <svg class="attachmentDownloadIcon"><use href="#download-icon"></use></svg>
+                        </a>
+                    </div>
+                `;
+            }
+            return this.spoilerAttachmentBuilder(attachment.spoiler, html);
+        }).join("");
+    }
+    componentBuilder(message, components) {
+        return components.map(component => {
+            switch (component.type) {
+                case JsonComponentType.ActionRow: {
+                    if (!component.components[0])
+                        return "";
+                    return `
+                    <div class="actionRow">
+                        ${component.components[0].type == JsonComponentType.Button ? component.components.map(button => {
+                        return button.type == JsonComponentType.Button ? this.buttonBuilder(button) : "";
+                    }).join("") : this.selectorBuilder(component.components[0])}
+                    </div>
+                    `;
+                }
+                case JsonComponentType.Container: {
+                    const html = `
+                    <div class="container" style="${component.hexAccentColor ? `border-left-color: ${component.hexAccentColor}` : ''}">
+                        ${this.componentBuilder(message, component.components)}
+                    </div>
+                    `;
+                    return this.spoilerAttachmentBuilder(component.spoiler, html);
+                }
+                case JsonComponentType.File: {
+                    let fileSize = (component.size ?? 0) / 1024;
+                    let count = 0;
+                    while (fileSize > 512 && count < COUNT_UNIT.length - 1) {
+                        fileSize = fileSize / 1024;
+                        count++;
+                    }
+                    const html = `
+                        <div class="attachmentFile">
+                            <div class="attachmentFileInfo">
+                                <p class="attachmentFileName">${component.fileName ?? 'file'}</p>
+                                <div class="attachmentFileSize">${fileSize.toFixed(2)} ${COUNT_UNIT[count]}</div>
+                            </div>
+                            <a class="attachmentDownload" href="${component.url ?? ''}" target="_blank">
+                                <svg class="attachmentDownloadIcon"><use href="#download-icon"></use></svg>
+                            </a>
+                        </div>
+                    `;
+                    return this.spoilerAttachmentBuilder(component.spoiler, html);
+                }
+                case JsonComponentType.MediaGallery: {
+                    return `
+                    <div class="mediaGallery"> 
+                        ${component.items.map(image => {
+                        return `
+                            <div class="mediaGalleryItem"> 
+                                ${this.spoilerAttachmentBuilder(image.spoiler, `<img class="mediaGalleryImg" src="${image.media.url}">`)}
+                            </div>
+                            `;
+                    }).join("")}
+                    </div>
+                    `;
+                }
+                case JsonComponentType.Section: {
+                    return `
+                    <div class="section">
+                        <div class="sectionLeft">
+                            ${this.componentBuilder(message, component.components)}
+                        </div>
+                        <div class="sectionRight">
+                            ${component.accessory.type == JsonComponentType.Button ? this.buttonBuilder(component.accessory)
+                        : component.accessory.type == JsonComponentType.Thumbnail ? this.spoilerAttachmentBuilder(component.accessory.spoiler, `
+                            <img class="sectionThumbnail" src="${component.accessory.media.url}">
+                            `) : ""}
+                        </div>
+                    </div> 
+                    `;
+                }
+                case JsonComponentType.Separator: {
+                    return `<hr>`;
+                }
+                case JsonComponentType.TextDisplay: {
+                    return markdownToHTML(component.content, message.mentions, this.dateFormat);
+                }
+                default:
+                    return ``;
+            }
+        }).join("");
+    }
+    buttonBuilder(button) {
+        return `
+        <div class="button" style="background-color: ${BUTTON_COLOR[button.style]}">
+            ${button.style == JsonButtonStyle.Link ? `
+            <a class="buttonLink" href="${button.url}" target="_blank">
+                ${button.emoji ? `<p class="buttonEmoji">${button.emoji}</p>` : ""}
+                ${button.label ? `<p class="buttonLabel">${button.label}</p>` : ""}
+                <svg class="buttonLinkIcon"><use href="#link-icon"></use></svg>
+            </a>` : `
+                ${button.emoji ? `<p class="buttonEmoji">${button.emoji}</p>` : ""}
+                ${button.label ? `<p class="buttonLabel">${button.label}</p>` : ""}
+            `}
+        </div>
+        `;
+    }
+    selectorBuilder(selector) {
+        return `
+        <div class="selector">
+            <div class="selectorInput">
+                <p class="selectorInputText">${selector.placeholder}</p>
+            </div>
+            <div class="selectorOptionMenu">
+                ${selector.type == JsonComponentType.StringSelect ? selector.options.map(option => {
+            return `
+                    <div class="selectorOption">
+                        ${option.emoji ? `<p class="selectorOptionEmoji">${option.emoji}</p>` : ""}
+                        <div class="selectorOptionRight">
+                            <p class="selectorOptionTitle">${option.label}</p>
+                            ${option.description ? `<p class="selectorOptionDesc">${option.description}</p>` : ""}
+                        </div>
+                    </div>
+                    `;
+        }).join("") : ""}
+            </div>
+        </div>
+        `;
+    }
+    spoilerAttachmentBuilder(spoiler, html) {
+        return spoiler ? `<div class="spoilerAttachment"><div class="spoilerAttachmentOverlay">SPOILER</div><div class="spoilerAttachmentContent">${html}</div></div>` : html;
+    }
+    svgBuilder() {
+        return `
+    <svg style="display: none;">
+        <defs>
+            <symbol id="reply-icon" viewBox="0 0 16 16" fill="none">
+                <g transform="rotate(90 8 8)">
+                    <path d="M6 2V9C6 11.5 8.5 14 11 14H14" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                </g>
+            </symbol>
+            ${this.options.includeAttachments ? `<symbol id="download-icon" viewBox="0 -960 960 960">
+                <path d="m720-120 160-160-56-56-64 64v-167h-80v167l-64-64-56 56 160 160ZM560 0v-80h320V0H560ZM240-160q-33 0-56.5-23.5T160-240v-560q0-33 23.5-56.5T240-880h280l240 240v121h-80v-81H480v-200H240v560h240v80H240Zm0-80v-560 560Z"/>
+            </symbol> ` : ""}
+            ${this.options.includeButtons ? `<symbol id="link-icon" viewBox="0 -960 960 960" fill="#e3e3e3">
+                <path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/>
+            </symbol>` : ""}
+        </defs>
+    </svg>
+    `;
+    }
+}

package/dist/renderers/html/html-backup.d.ts

@@ -0,0 +1,19 @@
+import { JsonData, JsonDataChannel, JsonDataGuild, JsonMessage, TranscriptOptions } from "../../types/types";
+export declare class Html {
+    guild: JsonDataGuild | null;
+    channel: JsonDataChannel;
+    messages: JsonMessage[];
+    options: TranscriptOptions;
+    dateFormat: Intl.DateTimeFormat;
+    constructor(data: JsonData, options: TranscriptOptions);
+    private headerBuilder;
+    private messagesBuilder;
+    toHTML(): string;
+    private embedBuilder;
+    private attachmentBuilder;
+    private componentBuilder;
+    private buttonBuilder;
+    private selectorBuilder;
+    private spoilerAttachmentBuilder;
+    private svgBuilder;
+}