Accelerated Mobile Pages (AMP)

This commit is contained in:
matthieu42morin 2024-03-24 14:36:58 +01:00
parent c584fd1f29
commit 8187fb58bc
3 changed files with 30 additions and 2 deletions

View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="light"> <html lang="en" class="light" amp>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />

View File

@ -1,5 +1,6 @@
import type { Handle } from '@sveltejs/kit'; import type { Handle } from '@sveltejs/kit';
import { sequence } from "@sveltejs/kit/hooks"; import { sequence } from "@sveltejs/kit/hooks";
import { handleErrorWithSentry, sentryHandle } from "@sentry/sveltekit"; import { handleErrorWithSentry, sentryHandle } from "@sentry/sveltekit";
import * as Sentry from '@sentry/sveltekit'; import * as Sentry from '@sentry/sveltekit';
import { import {
@ -10,6 +11,9 @@ import {
import { csp, rootDomain } from './cspDirectives'; import { csp, rootDomain } from './cspDirectives';
import * as amp from '@sveltejs/amp';
import dropcss from 'dropcss';
Sentry.init({ Sentry.init({
dsn: 'https://962a7ed3891a335e112746e5c6c6bf42@o4505828687478784.ingest.us.sentry.io/4506871754326016', dsn: 'https://962a7ed3891a335e112746e5c6c6bf42@o4505828687478784.ingest.us.sentry.io/4506871754326016',
tracesSampleRate: 1.0, tracesSampleRate: 1.0,
@ -40,8 +44,31 @@ export const cspHandle: Handle = async ({ event, resolve }) => {
return response; 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(/<style amp-custom([^>]*?)>([^]+?)<\/style>/, (match, attributes, contents) => {
css = contents;
return `<style amp-custom${attributes}></style>`;
});
css = dropcss({ css, html: markup }).css;
return markup.replace('</style>', `${css}</style>`);
}
},
});
};
// If you have custom handlers, make sure to place them after `sentryHandle()` in the `sequence` function. // 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` // If you have a custom error handler, pass it to `handleErrorWithSentry`
export const handleError = handleErrorWithSentry(); export const handleError = handleErrorWithSentry();

View File

@ -0,0 +1 @@
export const csr = false;