Accelerated Mobile Pages (AMP)
This commit is contained in:
parent
c584fd1f29
commit
8187fb58bc
|
@ -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" />
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
export const csr = false;
|
Loading…
Reference in New Issue