_document.tsx 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  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. <script src="static/analytics.js" />
  72. </Head>
  73. <body
  74. style={{
  75. margin: 0,
  76. backgroundColor: Colors.Bg,
  77. font: '16px/1.45 "Nunito", sans-serif',
  78. overflowX: "hidden",
  79. color: Colors.Text
  80. }}
  81. >
  82. <Main />
  83. <NextScript />
  84. </body>
  85. </html>
  86. );
  87. }
  88. }
  89. export default AppDocument;