import React from 'react'
import { Helmet } from 'react-helmet'
import styled from 'styled-components'
import Header from './Header'
import Footer from './Footer'
import 'prismjs/themes/prism-tomorrow.css'
import { GlobalStyle } from './Commons'
import { media } from '../tokens'

const SiteContent = styled.div`
  margin: 0 0;
  background-color: var(--color-siteBackground);

  @media ${media.medium} {
    padding: 60px 0;
  }
`

class Template extends React.Component {
  render() {
    const { children } = this.props

    return (
      <>
        <Helmet>
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link
            href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap"
            rel="stylesheet"
          />
        </Helmet>
        <GlobalStyle />
        <Header />
        <SiteContent>{children}</SiteContent>
        <Footer />
      </>
    )
  }
}

export default Template

@@ -621,16 +621,28 @@
 tic.com%22
+ crossorigin
  /%3E%0A    
@@ -653,16 +653,208 @@
   %3Clink%0A
+            rel=%22preload%22%0A            as=%22style%22%0A            href=%22https://fonts.googleapis.com/css?family=Lato:400,700&display=swap%22%0A          /%3E%0A          %3Clink%0A            rel=%22stylesheet%22%0A
         
@@ -938,39 +938,74 @@
             
-rel=%22stylesheet
+media=%22print%22%0A            onload=%22this.media='all'
 %22%0A          

improve font loading