From 8187fb58bc7db087d57ea08df77c6a5339c81e57 Mon Sep 17 00:00:00 2001 From: matthieu42morin Date: Sun, 24 Mar 2024 14:36:58 +0100 Subject: [PATCH] Accelerated Mobile Pages (AMP) --- src/app.html | 2 +- src/hooks.server.ts | 29 ++++++++++++++++++++++++++++- src/routes/+layout.server.ts | 1 + 3 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 src/routes/+layout.server.ts diff --git a/src/app.html b/src/app.html index 0414e6d..2a33d3e 100644 --- a/src/app.html +++ b/src/app.html @@ -1,5 +1,5 @@ - + diff --git a/src/hooks.server.ts b/src/hooks.server.ts index edb6b0b..5b1c2df 100644 --- a/src/hooks.server.ts +++ b/src/hooks.server.ts @@ -1,5 +1,6 @@ import type { Handle } from '@sveltejs/kit'; import { sequence } from "@sveltejs/kit/hooks"; + import { handleErrorWithSentry, sentryHandle } from "@sentry/sveltekit"; import * as Sentry from '@sentry/sveltekit'; import { @@ -10,6 +11,9 @@ import { import { csp, rootDomain } from './cspDirectives'; +import * as amp from '@sveltejs/amp'; +import dropcss from 'dropcss'; + Sentry.init({ dsn: 'https://962a7ed3891a335e112746e5c6c6bf42@o4505828687478784.ingest.us.sentry.io/4506871754326016', tracesSampleRate: 1.0, @@ -40,8 +44,31 @@ export const cspHandle: Handle = async ({ event, resolve }) => { return response; } +export const ampHandle: Handle = async ({ event, resolve }) => { + let buffer = ''; + return await resolve(event, { + transformPageChunk: ({ html, done }) => { + buffer += html; + + if (done) { + let css = ''; + const markup = amp + .transform(buffer) + .replace('⚡', 'amp') // dropcss can't handle this character + .replace(/`; + }); + + css = dropcss({ css, html: markup }).css; + return markup.replace('', `${css}`); + } + }, + }); +}; + // If you have custom handlers, make sure to place them after `sentryHandle()` in the `sequence` function. -export const handle: Handle = sequence(sentryHandle(), cspHandle); +export const handle: Handle = sequence(sentryHandle(), cspHandle, ampHandle); // If you have a custom error handler, pass it to `handleErrorWithSentry` export const handleError = handleErrorWithSentry(); diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts new file mode 100644 index 0000000..26bb568 --- /dev/null +++ b/src/routes/+layout.server.ts @@ -0,0 +1 @@ +export const csr = false;