discord-message-transcript-base 1.1.3 → 1.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,10 +1,15 @@
1
+ html, body {
2
+ margin: 0;
3
+ width: 100%;
4
+ height: 100%;
5
+ }
1
6
  body {
2
7
  background-color: #3a3c43;
3
8
  color: #dbdee1;
4
9
  font-family: "Whitney", "Helvetica Neue", Helvetica, Arial, sans-serif;
5
- margin: 0;
10
+ display: flex;
11
+ flex-direction: column;
6
12
  padding: 0;
7
- width: 100%;
8
13
  }
9
14
  header {
10
15
  height: fit-content;
@@ -20,10 +20,10 @@ export function markdownToHTML(text, mentions, everyone, dateFormat) {
20
20
  return `${LINE_TOKEN}${codeLine.length}${LINE_TOKEN}`;
21
21
  });
22
22
  text = sanitize(text);
23
- // Citation (> | >>>)
23
+ // Citation (>)
24
24
  text = text.replace(/(^[ \t]*> ?.*(?:\n[ \t]*> ?.*)*)/gm, (match) => {
25
25
  const cleanContent = match.split('\n').map(line => {
26
- return line.replace(/^>+ ?/, '');
26
+ return line.replace(/^[ \t]*>+ ?/, '');
27
27
  }).join('\n');
28
28
  return `<blockquote class="quote-multi">${cleanContent}</blockquote>`;
29
29
  });
@@ -1,4 +1,4 @@
1
- export declare const DEFAULT_CSS = "\nbody {\n background-color: #3a3c43;\n color: #dbdee1;\n font-family: \"Whitney\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n margin: 0;\n padding: 0;\n width: 100%;\n}\nheader {\n height: fit-content;\n border-bottom: 2px solid black;\n margin-top: 2rem;\n padding-left: 2rem;\n padding-bottom: 1rem;\n display: flex;\n flex-direction: column;\n display: flex;\n flex-direction: row;\n}\na {\n text-decoration: none;\n color: #1E90FF;\n}\np {\n margin: 0;\n}\nh1 {\n margin: 0.5rem 0;\n}\nh2 {\n margin: 0.3rem 0;\n}\nh3 {\n margin: 0.15rem\n}\nh4 {\n margin: 0;\n}\ncode {\n border: 1px solid #202225;\n border-radius: 0.25rem;\n}\nblockquote {\n margin: 0.5rem 0;\n border-left: 0.25rem solid #4f545c;\n padding: 0.4rem 0.6rem;\n border-radius: 0.25rem;\n color: #9f9fa6;\n}\n.line {\n display: flex;\n align-items: baseline;\n gap: 0.5rem\n}\n.badge {\n background-color: #5865f2;\n color: white;\n font-weight: 600;\n font-size: 80%;\n padding: 0.1rem 0.35rem;\n border-radius: 0.25rem;\n letter-spacing: 0.03rem;\n height: fit-content;\n width: fit-content;\n align-self: flex-start;\n}\n.badgeTag {\n background-color: #747F8D50;\n color: white;\n font-weight: 600;\n font-size: 70%;\n padding: 0.1rem 0.35rem;\n border-radius: 0.25rem;\n letter-spacing: 0.03rem;\n height: fit-content;\n width: fit-content;\n align-self: center;\n}\n.mention {\n background-color: #5664fa41;\n padding: 0.2rem;\n border-radius: 0.25rem;\n transition: background-color 0.2s ease;\n}\n.mention:hover {\n background-color: #5664fa7e;\n}\n.guildInitialsIcon {\n width: 7rem;\n height: 7rem;\n border-radius: 50%;\n background-color: #4f545c;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 3rem;\n font-weight: 600;\n}\n";
1
+ export declare const DEFAULT_CSS = "\nhtml, body {\n margin: 0;\n width: 100%;\n height: 100%;\n}\nbody {\n background-color: #3a3c43;\n color: #dbdee1;\n font-family: \"Whitney\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n display: flex;\n flex-direction: column;\n padding: 0;\n}\nheader {\n height: fit-content;\n border-bottom: 2px solid black;\n margin-top: 2rem;\n padding-left: 2rem;\n padding-bottom: 1rem;\n display: flex;\n flex-direction: column;\n display: flex;\n flex-direction: row;\n}\na {\n text-decoration: none;\n color: #1E90FF;\n}\np {\n margin: 0;\n}\nh1 {\n margin: 0.5rem 0;\n}\nh2 {\n margin: 0.3rem 0;\n}\nh3 {\n margin: 0.15rem\n}\nh4 {\n margin: 0;\n}\ncode {\n border: 1px solid #202225;\n border-radius: 0.25rem;\n}\nblockquote {\n margin: 0.5rem 0;\n border-left: 0.25rem solid #4f545c;\n padding: 0.4rem 0.6rem;\n border-radius: 0.25rem;\n color: #9f9fa6;\n}\n.line {\n display: flex;\n align-items: baseline;\n gap: 0.5rem\n}\n.badge {\n background-color: #5865f2;\n color: white;\n font-weight: 600;\n font-size: 80%;\n padding: 0.1rem 0.35rem;\n border-radius: 0.25rem;\n letter-spacing: 0.03rem;\n height: fit-content;\n width: fit-content;\n align-self: flex-start;\n}\n.badgeTag {\n background-color: #747F8D50;\n color: white;\n font-weight: 600;\n font-size: 70%;\n padding: 0.1rem 0.35rem;\n border-radius: 0.25rem;\n letter-spacing: 0.03rem;\n height: fit-content;\n width: fit-content;\n align-self: center;\n}\n.mention {\n background-color: #5664fa41;\n padding: 0.2rem;\n border-radius: 0.25rem;\n transition: background-color 0.2s ease;\n}\n.mention:hover {\n background-color: #5664fa7e;\n}\n.guildInitialsIcon {\n width: 7rem;\n height: 7rem;\n border-radius: 50%;\n background-color: #4f545c;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 3rem;\n font-weight: 600;\n}\n";
2
2
  export declare const MESSAGE_CSS = "\n.messageDiv {\n display: flex;\n flex-direction: column;\n gap: 0.2rem;\n padding: 0.5rem;\n border-radius: 1rem;\n}\n.messageDiv.highlight, .messageDiv:hover {\n background-color: #40434b;\n transition: background-color 0.3s ease-in-out;\n}\n.messageBotton {\n display: flex;\n flex-direction: row;\n gap: 1rem;\n padding: 0.5rem;\n border-radius: 0.25rem;\n}\n.messageImg {\n width: 3.5rem; \n height: 3.5rem; \n border-radius: 50%;\n}\n.messageDivRight {\n display: flex;\n flex-direction: column;\n gap: 0.25rem\n}\n.messageUser {\n display: flex;\n flex-direction: row;\n gap: 0.75rem;\n}\n.messageUsername {\n margin: 0;\n}\n.messageTimeStamp {\n color: #999999;\n font-size: 77.5%;\n align-self: center;\n}\n.messageContent {\n line-height: 1.5;\n}\n.pList {\n white-space: pre-wrap;\n}\n.subtext {\n font-size: 85%;\n color: #808080;\n}\n.spoilerMsg {\n display: inline-block;\n background-color: #202225;\n color: #202225;\n padding: 0 0.2rem;\n border-radius: 0.2rem;\n cursor: pointer;\n transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;\n}\n.spoilerMsg.revealed {\n background-color: transparent;\n color: inherit;\n}\n.messageReply {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.8rem;\n color: #b5bac1;\n cursor: pointer;\n margin-left: 2rem;\n}\n.messageReplySvg {\n flex-shrink: 0;\n width: 2.25rem;\n height: 2.25rem;\n color: #b5bac1;\n}\n.messageReplyImg {\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 50%;\n flex-shrink: 0;\n}\n.messageReplyAuthor {\n font-weight: 600;\n color: #dbdee1;\n margin-right: 0.3rem;\n}\n.badgeReply {\n background-color: #5865f2;\n color: white;\n font-weight: 600;\n font-size: 70%;\n padding: 0.1rem 0.3rem;\n border-radius: 0.25rem;\n letter-spacing: 0.03rem;\n height: fit-content;\n align-self: center;\n flex-shrink: 0;\n}\n.messageReplyText {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: #b5bac1;\n font-size: 0.75rem;\n}\n";
3
3
  export declare const EMBED_CSS = "\n.embed {\n background-color: #2b2d31;\n border: 0.15rem solid #2b2d31;\n border-left: 0.25rem solid;\n border-radius: 0.25rem;\n padding: 0.5rem 0.75rem;\n margin-top: 0.5rem;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 40rem;\n min-width: 30rem;\n}\n.embed a {\n color: #00aff4;\n text-decoration: none;\n}\n.embed a:hover {\n text-decoration: underline;\n}\n.embedHeader {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 0.5rem;\n}\n.embedHeaderLeft {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n.embedHeaderLeftAuthor {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.875rem;\n font-weight: 500;\n color: #ffffff;\n margin-bottom: 0.5rem;\n}\n.embedHeaderLeftAuthorImg {\n width: 1.5rem;\n height: 1.5rem;\n border-radius: 50%;\n}\n.embedHeaderLeftAuthorName {\n color: #ffffff;\n font-weight: 500;\n}\n.embedHeaderLeftTitle {\n font-size: 1rem;\n font-weight: bold;\n color: #ffffff;\n margin-bottom: 0.75rem;\n}\n.embedHeaderThumbnail {\n max-width: 80px;\n max-height: 80px;\n object-fit: contain;\n border-radius: 0.25rem;\n flex-shrink: 0;\n}\n.embedDescription {\n font-size: 0.875rem;\n color: #dcddde;\n}\n.embedFields {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n.embedFieldsField {\n flex: 1;\n min-width: 150px;\n}\n.embedFieldsFieldTitle {\n font-size: 0.75rem;\n font-weight: bold;\n color: #ffffff;\n margin-bottom: 0.25rem;\n}\n.embedFieldsFieldValue {\n font-size: 0.875rem;\n color: #dcddde;\n}\n.embedImage {\n margin-top: 0.5rem;\n max-width: 100%;\n height: auto;\n}\n.embedImage img {\n max-width: 100%;\n max-height: 300px;\n object-fit: contain;\n border-radius: 0.25rem;\n}\n.embedFooter {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.75rem;\n color: #999999;\n margin-top: 0.5rem;\n}\n.embedFooterImg {\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 50%;\n}\n.embedFooterText {\n color: #999999;\n}\n";
4
4
  export declare const ATTACHMENT_CSS = "\n.attachmentImage, .attachmentVideo {\n max-width: 400px;\n height: auto;\n border-radius: 0.25rem;\n margin-top: 0.5rem;\n}\n.attachmentAudio {\n width: 300px;\n margin-top: 0.5rem;\n}\n.attachmentFile {\n background-color: #2b2d31;\n border: 1px solid #202225;\n border-radius: 0.75rem;\n padding: 0.75rem;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n max-width: 400px;\n margin-top: 0.5rem;\n width: fit-content;\n}\n.attachmentFileIcon {\n width: 2.5rem;\n height: 2.5rem;\n fill: #b9bbbe;\n flex-shrink: 0;\n}\n.attachmentFileInfo {\n display: flex;\n flex-direction: column;\n gap: 0.1rem;\n overflow: hidden;\n flex-grow: 1;\n}\n.attachmentFileName {\n color: #ffffff;\n text-decoration: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.attachmentFileSize {\n font-size: 0.75rem;\n color: #72767d;\n}\n.attachmentDownload {\n display: block;\n flex-shrink: 0;\n}\n.attachmentDownloadIcon {\n width: 1.5rem;\n height: 1.5rem;\n fill: #b9bbbe;\n transition: fill 0.2s ease;\n}\n.attachmentDownload:hover .attachmentDownloadIcon {\n fill: #ffffff;\n}\n.spoilerAttachment {\n position: relative;\n display: inline-block;\n border-radius: 0.5rem;\n overflow: hidden;\n cursor: pointer;\n}\n.spoilerAttachment .spoilerAttachmentContent {\n filter: blur(64px);\n pointer-events: none;\n transition: filter 0.2s ease;\n width: 100%;\n height: 100%;\n}\n.spoilerAttachment .spoilerAttachmentOverlay {\n position: absolute;\n inset: 0;\n background: rgba(32, 34, 37, 0.85);\n color: #fff;\n font-weight: 600;\n letter-spacing: 0.05em;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n user-select: none;\n}\n.spoilerAttachment.revealed .spoilerAttachmentContent {\n filter: none;\n pointer-events: auto;\n}\n.spoilerAttachment.revealed .spoilerAttachmentOverlay {\n display: none;\n}\n";
@@ -1,11 +1,16 @@
1
1
  export const DEFAULT_CSS = `
2
+ html, body {
3
+ margin: 0;
4
+ width: 100%;
5
+ height: 100%;
6
+ }
2
7
  body {
3
8
  background-color: #3a3c43;
4
9
  color: #dbdee1;
5
10
  font-family: "Whitney", "Helvetica Neue", Helvetica, Arial, sans-serif;
6
- margin: 0;
11
+ display: flex;
12
+ flex-direction: column;
7
13
  padding: 0;
8
- width: 100%;
9
14
  }
10
15
  header {
11
16
  height: fit-content;
@@ -137,7 +137,7 @@ export class Html {
137
137
  <header>
138
138
  ${this.headerBuilder()}
139
139
  </header>
140
- <main style="display: flex; flex-direction: column; padding: 2.25%;">
140
+ <main style="display: flex; flex-direction: column; padding: 2.25%; flex: 1;">
141
141
  ${this.messagesBuilder()}
142
142
  </main>
143
143
  ${options.watermark ? `<footer>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "discord-message-transcript-base",
3
- "version": "1.1.3",
3
+ "version": "1.1.4",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",