LogalDeveloper/owncast
0
Fork 0
Code Activity

Inline some CSS upfront for performance. #2167

Browse Source
This commit is contained in:
Gabe Kangas
2023-01-10 00:33:54 -08:00
parent cfaeda94b0
commit 37cd19c567
1 changed files with 24 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/pages/_document.tsx
View File

@@ -1,9 +1,32 @@
/* eslint-disable react/no-danger */
import { Html, Head, Main, NextScript } from 'next/document'; import { Html, Head, Main, NextScript } from 'next/document';
import { readFileSync } from 'fs';
import { join } from 'path';
class InlineStylesHead extends Head {
getCssLinks: Head['getCssLinks'] = ({ allFiles }) => {
const { assetPrefix } = this.context;
if (!allFiles || allFiles.length === 0) return null;
return allFiles
.filter((file: any) => /\.css$/.test(file))
.map((file: any) => (
<style
key={file}
nonce={this.props.nonce}
data-href={`${assetPrefix}/_next/${file}`}
dangerouslySetInnerHTML={{
__html: readFileSync(join(process.cwd(), '.next', file), 'utf-8'),
}}
/>
));
};
}
export default function Document() { export default function Document() {
return ( return (
<Html lang="en"> <Html lang="en">
<Head /> <InlineStylesHead />
<body> <body>
<Main /> <Main />
<NextScript /> <NextScript />