_document.page.tsx 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. /* eslint-disable @next/next/google-font-display */
  2. import React, { type JSX } from 'react';
  3. import type { Locale } from '@growi/core/dist/interfaces';
  4. import type { DocumentContext, DocumentInitialProps } from 'next/document';
  5. import Document, {
  6. Html, Head, Main, NextScript,
  7. } from 'next/document';
  8. import type { GrowiPluginResourceEntries } from '~/features/growi-plugin/server/services';
  9. import type { CrowiRequest } from '~/interfaces/crowi-request';
  10. import loggerFactory from '~/utils/logger';
  11. import { getLocaleAtServerSide } from './utils/locale';
  12. const logger = loggerFactory('growi:page:_document');
  13. type HeadersForGrowiPluginProps = {
  14. pluginResourceEntries: GrowiPluginResourceEntries;
  15. }
  16. const HeadersForGrowiPlugin = (props: HeadersForGrowiPluginProps): JSX.Element => {
  17. const { pluginResourceEntries } = props;
  18. return (
  19. <>
  20. { pluginResourceEntries.map(([installedPath, href]) => {
  21. if (href.endsWith('.js')) {
  22. // eslint-disable-next-line @next/next/no-sync-scripts
  23. return <script type="module" key={`script_${installedPath}`} src={href} />;
  24. }
  25. if (href.endsWith('.css')) {
  26. // eslint-disable-next-line @next/next/no-sync-scripts
  27. return <link rel="stylesheet" key={`link_${installedPath}`} href={href} />;
  28. }
  29. return <></>;
  30. }) }
  31. </>
  32. );
  33. };
  34. interface GrowiDocumentProps {
  35. themeHref: string,
  36. customScript: string | null,
  37. customCss: string | null,
  38. customNoscript: string | null,
  39. pluginResourceEntries: GrowiPluginResourceEntries;
  40. locale: Locale;
  41. }
  42. declare type GrowiDocumentInitialProps = DocumentInitialProps & GrowiDocumentProps;
  43. class GrowiDocument extends Document<GrowiDocumentInitialProps> {
  44. static override async getInitialProps(ctx: DocumentContext): Promise<GrowiDocumentInitialProps> {
  45. const initialProps: DocumentInitialProps = await Document.getInitialProps(ctx);
  46. const req = ctx.req as CrowiRequest;
  47. const { crowi } = req;
  48. const { customizeService } = crowi;
  49. const { themeHref } = customizeService;
  50. const customScript: string | null = customizeService.getCustomScript();
  51. const customCss: string | null = customizeService.getCustomCss();
  52. const customNoscript: string | null = customizeService.getCustomNoscript();
  53. // retrieve plugin manifests
  54. const growiPluginService = await import('~/features/growi-plugin/server/services').then(mod => mod.growiPluginService);
  55. const pluginResourceEntries = await growiPluginService.retrieveAllPluginResourceEntries();
  56. const locale = getLocaleAtServerSide(req);
  57. return {
  58. ...initialProps,
  59. themeHref,
  60. customScript,
  61. customCss,
  62. customNoscript,
  63. pluginResourceEntries,
  64. locale,
  65. };
  66. }
  67. renderCustomScript(customScript: string | null): JSX.Element {
  68. if (customScript == null || customScript.length === 0) {
  69. return <></>;
  70. }
  71. return <script id="customScript" dangerouslySetInnerHTML={{ __html: customScript }} />;
  72. }
  73. renderCustomCss(customCss: string | null): JSX.Element {
  74. if (customCss == null || customCss.length === 0) {
  75. return <></>;
  76. }
  77. return <style dangerouslySetInnerHTML={{ __html: customCss }} />;
  78. }
  79. renderCustomNoscript(customNoscript: string | null): JSX.Element {
  80. if (customNoscript == null || customNoscript.length === 0) {
  81. return <></>;
  82. }
  83. return <noscript dangerouslySetInnerHTML={{ __html: customNoscript }} />;
  84. }
  85. override render(): JSX.Element {
  86. const {
  87. customCss, customScript, customNoscript,
  88. themeHref, pluginResourceEntries,
  89. locale,
  90. } = this.props;
  91. return (
  92. <Html lang={locale}>
  93. <Head>
  94. {this.renderCustomScript(customScript)}
  95. <link rel="stylesheet" key="link-theme" href={themeHref} />
  96. <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  97. <link rel="alternate icon" href="/favicon.ico" />
  98. <HeadersForGrowiPlugin pluginResourceEntries={pluginResourceEntries} />
  99. {this.renderCustomCss(customCss)}
  100. </Head>
  101. <body>
  102. {this.renderCustomNoscript(customNoscript)}
  103. <Main />
  104. <NextScript />
  105. </body>
  106. </Html>
  107. );
  108. }
  109. }
  110. export default GrowiDocument;