From a963ee690afc278504e85d872dec51b1db8fac20 Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Fri, 21 Jun 2024 12:13:06 -0400 Subject: [PATCH] style overrides for newsletter embed (#1718) --- package.json | 1 + pnpm-lock.yaml | 94 ++++++++++++++++++- .../snackpack/[issue_id]/+page.server.ts | 10 +- .../(site)/snackpack/[issue_id]/+page.svelte | 6 ++ src/routes/(site)/style.css | 4 +- 5 files changed, 108 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 55e9199c6..808cb9667 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 54bdef5cb..88b293ba6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,5 @@ lockfileVersion: '6.0' -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false - dependencies: '@anthropic-ai/sdk': specifier: ^0.6.2 @@ -68,6 +64,9 @@ dependencies: js-cookie: specifier: ^3.0.5 version: 3.0.5 + linkedom: + specifier: ^0.18.3 + version: 0.18.3 media-chrome: specifier: ^3.2.0 version: 3.2.0 @@ -2497,6 +2496,10 @@ packages: file-uri-to-path: 1.0.0 dev: false + /boolbase@1.0.0: + resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} + dev: false + /brace-expansion@1.1.11: resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==} dependencies: @@ -2791,6 +2794,16 @@ packages: postcss: 8.4.38 dev: true + /css-select@5.1.0: + resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} + dependencies: + boolbase: 1.0.0 + css-what: 6.1.0 + domhandler: 5.0.3 + domutils: 3.1.0 + nth-check: 2.1.1 + dev: false + /css-tree@2.3.1: resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} @@ -2798,6 +2811,11 @@ packages: mdn-data: 2.0.30 source-map-js: 1.0.2 + /css-what@6.1.0: + resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} + engines: {node: '>= 6'} + dev: false + /cssdb@8.0.0: resolution: {integrity: sha512-hfpm8VXc7/dhcEWpLvKDLwImOSk1sa2DxL36OEiY/4h2MGfKjPYIMZo4hnEEl+TCJr2GwcX46jF5TafRASDe9w==} dev: true @@ -2808,6 +2826,10 @@ packages: hasBin: true dev: true + /cssom@0.5.0: + resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==} + dev: false + /data-uri-to-buffer@4.0.1: resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==} engines: {node: '>= 12'} @@ -2950,6 +2972,33 @@ packages: esutils: 2.0.3 dev: true + /dom-serializer@2.0.0: + resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==} + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + entities: 4.5.0 + dev: false + + /domelementtype@2.3.0: + resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==} + dev: false + + /domhandler@5.0.3: + resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==} + engines: {node: '>= 4'} + dependencies: + domelementtype: 2.3.0 + dev: false + + /domutils@3.1.0: + resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==} + dependencies: + dom-serializer: 2.0.0 + domelementtype: 2.3.0 + domhandler: 5.0.3 + dev: false + /duplexer@0.1.2: resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==} dev: false @@ -3910,10 +3959,23 @@ packages: resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==} dev: false + /html-escaper@3.0.3: + resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==} + dev: false + /html-void-elements@3.0.0: resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} dev: false + /htmlparser2@9.1.0: + resolution: {integrity: sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==} + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + domutils: 3.1.0 + entities: 4.5.0 + dev: false + /http-proxy-agent@7.0.2: resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==} engines: {node: '>= 14'} @@ -4287,6 +4349,16 @@ packages: engines: {node: '>=14'} dev: true + /linkedom@0.18.3: + resolution: {integrity: sha512-z8i9nX5rbiO3keLJ+rJabVmJ/nCdYzQRONPU0L9c6buYErX5yxb0pQX+sWdX8r0QvpaZrjAtjM0scbX10xYH9Q==} + dependencies: + css-select: 5.1.0 + cssom: 0.5.0 + html-escaper: 3.0.3 + htmlparser2: 9.1.0 + uhyphen: 0.2.0 + dev: false + /load-json-file@4.0.0: resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==} engines: {node: '>=4'} @@ -5079,6 +5151,12 @@ packages: set-blocking: 2.0.0 dev: false + /nth-check@2.1.1: + resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} + dependencies: + boolbase: 1.0.0 + dev: false + /object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} @@ -6859,6 +6937,10 @@ packages: resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==} dev: true + /uhyphen@0.2.0: + resolution: {integrity: sha512-qz3o9CHXmJJPGBdqzab7qAYuW8kQGKNEuoHFYrBwV6hWIMcpAmxDLXojcHfFr9US1Pe6zUswEIJIbLI610fuqA==} + dev: false + /unbox-primitive@1.0.2: resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==} dependencies: @@ -7418,3 +7500,7 @@ packages: which: 3.0.1 yaml: 2.3.2 dev: false + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false diff --git a/src/routes/(site)/snackpack/[issue_id]/+page.server.ts b/src/routes/(site)/snackpack/[issue_id]/+page.server.ts index 0abca2244..3052e3c58 100644 --- a/src/routes/(site)/snackpack/[issue_id]/+page.server.ts +++ b/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}` } diff --git a/src/routes/(site)/snackpack/[issue_id]/+page.svelte b/src/routes/(site)/snackpack/[issue_id]/+page.svelte index 4b8fd87f2..9da4946b5 100644 --- a/src/routes/(site)/snackpack/[issue_id]/+page.svelte +++ b/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; + } } diff --git a/src/routes/(site)/style.css b/src/routes/(site)/style.css index dd834bcbf..d7ae2c7bd 100644 --- a/src/routes/(site)/style.css +++ b/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;