style overrides for newsletter embed (#1718)

package.json

@@ -83,6 +83,7 @@
 		"gpt-3-encoder": "^1.1.4",
 		"gray-matter": "^4.0.3",
 		"js-cookie": "^3.0.5",
+		"linkedom": "^0.18.3",
 		"media-chrome": "^3.2.0",
 		"npm-run-all": "^4.1.5",
 		"openai": "^3.3.0",

src/routes/(site)/snackpack/[issue_id]/+page.server.ts

@@ -2,6 +2,7 @@ import { error, json } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 import { env } from '$env/dynamic/private';
 import type { Broadcast } from '../proxy+page.server';
+import { parseHTML } from 'linkedom';
 
 export const load: PageServerLoad = async function ({ setHeaders, params, locals }) {
 	// 1. Fetch a broadcast by this ID
@@ -22,11 +23,18 @@ export const load: PageServerLoad = async function ({ setHeaders, params, locals
 		'cache-control': 'public, max-age=2592000, s-maxage=2592000'
 	});
 
+	// Scope the CSS in the returned HTML
+	const { document } = parseHTML(response.broadcast.content);
+	const styleTags = document.querySelectorAll('style');
+	styleTags.forEach((style) => {
+		style.innerHTML = `.newsletter-output { ${style.innerHTML} }`;
+	});
+
 	return {
 		subject: response.broadcast.subject,
 		published_at: response.broadcast.published_at,
 		id: response.broadcast.id,
-		html: response.broadcast.content,
+		html: document.toString(),
 		meta: {
 			title: `Syntax Newsletter - Issue ${response.broadcast.id}`
 		}

src/routes/(site)/snackpack/[issue_id]/+page.svelte

@@ -30,5 +30,11 @@
 		:global(img) {
 			max-width: 100%;
 		}
+		:global(.ck-inner-section) {
+			border: 0 !important;
+		}
+		:global(table) {
+			border: 0 !important;
+		}
 	}
 </style>

src/routes/(site)/style.css

@@ -1,4 +1,4 @@
-/* 
+/*
 ░██████╗██╗░░░██╗███╗░░██╗
 ██╔════╝╚██╗░██╔╝████╗░██║
 ╚█████╗░░╚████╔╝░██╔██╗██║
@@ -53,7 +53,7 @@ html::view-transition-new() {
 	border-radius: var(--brad);
 }
 
-table {
+table:not(.newsleter-output table) {
 	border: 1px solid black;
 	border-collapse: collapse;
 	position: relative;