src/server/utils/create-ssr-html.tsx

   1 import { Helmet } from "inferno-helmet";
   2 import { renderToString } from "inferno-server";
   3 import serialize from "serialize-javascript";
   4 import sharp from "sharp";
   5 import { favIconPngUrl, favIconUrl } from "../../shared/config";
   6 import { ILemmyConfig, IsoDataOptionalSite } from "../../shared/interfaces";
   7 import { fetchIconPng } from "./fetch-icon-png";
   8
   9 const customHtmlHeader = process.env["LEMMY_UI_CUSTOM_HTML_HEADER"] || "";
  10
  11 let appleTouchIcon: string | undefined = undefined;
  12
  13 export async function createSsrHtml(
  14   root: string,
  15   isoData: IsoDataOptionalSite
  16 ) {
  17   const site = isoData.site_res;
  18
  19   if (!appleTouchIcon) {
  20     appleTouchIcon = site?.site_view.site.icon
  21       ? `data:image/png;base64,${sharp(
  22           await fetchIconPng(site.site_view.site.icon)
  23         )
  24           .resize(180, 180)
  25           .extend({
  26             bottom: 20,
  27             top: 20,
  28             left: 20,
  29             right: 20,
  30             background: "#222222",
  31           })
  32           .png()
  33           .toBuffer()
  34           .then(buf => buf.toString("base64"))}`
  35       : favIconPngUrl;
  36   }
  37
  38   const erudaStr =
  39     process.env["LEMMY_UI_DEBUG"] === "true"
  40       ? renderToString(
  41           <>
  42             <script src="//cdn.jsdelivr.net/npm/eruda"></script>
  43             <script>eruda.init();</script>
  44           </>
  45         )
  46       : "";
  47
  48   const helmet = Helmet.renderStatic();
  49
  50   const config: ILemmyConfig = { wsHost: process.env.LEMMY_UI_LEMMY_WS_HOST };
  51
  52   return `
  53     <!DOCTYPE html>
  54     <html ${helmet.htmlAttributes.toString()}>
  55     <head>
  56     <script>window.isoData = ${serialize(isoData)}</script>
  57     <script>window.lemmyConfig = ${serialize(config)}</script>
  58
  59     <!-- A remote debugging utility for mobile -->
  60     ${erudaStr}
  61
  62     <!-- Custom injected script -->
  63     ${customHtmlHeader}
  64
  65     ${helmet.title.toString()}
  66     ${helmet.meta.toString()}
  67
  68     <!-- Required meta tags -->
  69     <meta name="Description" content="Lemmy">
  70     <meta charset="utf-8">
  71     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
  72     <link
  73        id="favicon"
  74        rel="shortcut icon"
  75        type="image/x-icon"
  76        href=${site?.site_view.site.icon ?? favIconUrl}
  77      />
  78
  79     <!-- Web app manifest -->
  80     <link rel="manifest" href="/manifest.webmanifest" />
  81     <link rel="apple-touch-icon" href=${appleTouchIcon} />
  82     <link rel="apple-touch-startup-image" href=${appleTouchIcon} />
  83
  84     <!-- Styles -->
  85     <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
  86
  87     <!-- Current theme and more -->
  88     ${helmet.link.toString()}
  89
  90     </head>
  91
  92     <body ${helmet.bodyAttributes.toString()}>
  93       <noscript>
  94         <div class="alert alert-danger rounded-0" role="alert">
  95           <b>Javascript is disabled. Actions will not work.</b>
  96         </div>
  97       </noscript>
  98
  99       <div id='root'>${root}</div>
 100       <script defer src='/static/js/client.js'></script>
 101     </body>
 102   </html>
 103   `;
 104 }