text: import React from 'react'
  import Document, { Html, Head, Main, NextScript } from 'next/document'
  
  import { themeStorageKey } from '@/lib/theme'
  import { GA_TRACKING_ID } from '@/lib/gtag'
  const bgVariableName = '--bg'
  
  class MyDocument extends Document {
    render() {
      return (
        <Html lang="en">
          <Head />
          <body>
            <script
              dangerouslySetInnerHTML={{
                __html: `(function() {
                  try {
                    var outdatedValue = localStorage.getItem('light-mode')
  
                    if (outdatedValue) {
                      localStorage.setItem('${themeStorageKey}', 'light')
                      localStorage.removeItem('light-mode')
                    }
  
                    var mode = localStorage.getItem('${themeStorageKey}')
                    if (!mode) return
                    document.documentElement.classList.add(mode)
                    var bgValue = getComputedStyle(document.documentElement)
                      .getPropertyValue('${bgVariableName}')
                    document.documentElement.style.background = bgValue
                  } catch (e) {}
                })()`
              }}
            />
            <script
              async
              src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
            />
            <script
              dangerouslySetInnerHTML={{
                __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', '${GA_TRACKING_ID}', {
                page_path: window.location.pathname,
              });
            `
              }}
            />
            <Main />
            <NextScript />
          </body>
        </Html>
      )
    }
  }
  
  export default MyDocument
  