_document.tsx 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. import Document, { Head, Main, NextScript } from "next/document";
  2. import { ServerStyleSheet } from "styled-components";
  3. import getConfig from "next/config";
  4. import React from "react";
  5. import { Colors } from "../consts";
  6. const { publicRuntimeConfig } = getConfig();
  7. interface Props {
  8. styleTags: any;
  9. }
  10. class AppDocument extends Document<Props> {
  11. static getInitialProps({ renderPage }) {
  12. const sheet = new ServerStyleSheet();
  13. const page = renderPage(App => props =>
  14. sheet.collectStyles(<App {...props} />)
  15. );
  16. const styleTags = sheet.getStyleElement();
  17. return { ...page, styleTags };
  18. }
  19. render() {
  20. return (
  21. <html lang="en">
  22. <Head>
  23. <meta charSet="utf-8" />
  24. <meta
  25. name="viewport"
  26. content="width=device-width, initial-scale=1, viewport-fit=cover"
  27. />
  28. <meta
  29. name="description"
  30. content={`${publicRuntimeConfig.SITE_NAME} is a free and open source URL shortener with custom domains and stats.`}
  31. />
  32. <link
  33. href="https://fonts.googleapis.com/css?family=Nunito:300,400,700"
  34. rel="stylesheet"
  35. />
  36. <link rel="icon" sizes="196x196" href="/images/favicon-196x196.png" />
  37. <link rel="icon" sizes="32x32" href="/images/favicon-32x32.png" />
  38. <link rel="icon" sizes="16x16" href="/images/favicon-16x16.png" />
  39. <link rel="apple-touch-icon" href="/images/favicon-196x196.png" />
  40. <link rel="mask-icon" href="/images/icon.svg" color="blue" />
  41. <link rel="manifest" href="manifest.webmanifest" />
  42. <meta name="theme-color" content="#f3f3f3" />
  43. <meta property="fb:app_id" content="123456789" />
  44. <meta
  45. property="og:url"
  46. content={`https://${publicRuntimeConfig.DEFAULT_DOMAIN}`}
  47. />
  48. <meta property="og:type" content="website" />
  49. <meta property="og:title" content={publicRuntimeConfig.SITE_NAME} />
  50. <meta
  51. property="og:image"
  52. content={`https://${publicRuntimeConfig.DEFAULT_DOMAIN}/images/card.png`}
  53. />
  54. <meta
  55. property="og:description"
  56. content="Free & Open Source Modern URL Shortener"
  57. />
  58. <meta
  59. name="twitter:url"
  60. content={`https://${publicRuntimeConfig.DEFAULT_DOMAIN}`}
  61. />
  62. <meta name="twitter:title" content={publicRuntimeConfig.SITE_NAME} />
  63. <meta
  64. name="twitter:description"
  65. content="Free & Open Source Modern URL Shortener"
  66. />
  67. <meta
  68. name="twitter:image"
  69. content={`https://${publicRuntimeConfig.DEFAULT_DOMAIN}/images/card.png`}
  70. />
  71. {this.props.styleTags}
  72. <script
  73. dangerouslySetInnerHTML={{
  74. __html: `window.recaptchaCallback = function() { window.isCaptchaReady = true; }`
  75. }}
  76. />
  77. <script
  78. src="https://www.google.com/recaptcha/api.js?render=explicit"
  79. async
  80. defer
  81. />
  82. </Head>
  83. <body
  84. style={{
  85. margin: 0,
  86. backgroundColor: Colors.Bg,
  87. font: '16px/1.45 "Nunito", sans-serif',
  88. overflowX: "hidden",
  89. color: Colors.Text
  90. }}
  91. >
  92. <Main />
  93. <NextScript />
  94. </body>
  95. </html>
  96. );
  97. }
  98. }
  99. export default AppDocument;