_document.tsx 3.0 KB

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