_document.tsx 3.1 KB

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