codegenie-website/src/layouts/Layout.astro at 38957a53e5b26fb86257893291c5a4a6eed1870c · CodeGenieApp/codegenie-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
---
import { AstroFont } from 'astro-font'
import { SEO } from 'astro-seo'
// import codeGenieLogoLarge from '../assets/images/code-genie-logo-large.webp'
import codeGenieIntroVideoPoster from '../assets/videos/code-genie-intro-poster.jpg'
import codeGenieIntroVideo from '../assets/videos/code-genie-intro.mp4'

export interface Props {
  title: string
}

function removeTrailingSlash(str) {
  return str.replace(/\/$/, '')
}

const date = new Date()
const dateIso = date.toISOString()
const { title } = Astro.props
const canonicalURL = new URL(Astro.url.pathname, Astro.site)
const ogImage =
  removeTrailingSlash(canonicalURL.toString()) + codeGenieIntroVideoPoster.src
const ogVideo =
  removeTrailingSlash(canonicalURL.toString()) + codeGenieIntroVideo
const description =
  'Generate Full Stack Serverless AWS Apps based on your description or data model. Projects include Next.js, React, Express, Lambda, API Gateway, Cognito Auth, DynamoDB, and more.'
---

<!doctype html>
<html lang="en">
  <head>
    <SEO
      title={title}
      description={description}
      canonical={canonicalURL}
      openGraph={{
        basic: {
          title,
          type: 'website',
          image: ogImage,
        },
        optional: {
          siteName: 'Code Genie',
          description,
          // video: ogVideo,
        },
      }}
      twitter={{
        site: '@CodeGenieCodes',
        creator: '@AWSbrett',
        title: 'Code Genie',
        image: ogImage,
        card: 'summary_large_image',
        description,
        imageAlt: 'Code Genie',
      }}
      extend={{
        meta: [
          { name: 'og:updated_time', content: dateIso },
          { name: 'last-modified', content: dateIso },
        ],
      }}
    />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-8DF6WBB8HG" ></script>
    <script>
      window.dataLayer = window.dataLayer || []
      function gtag() {
        dataLayer.push(arguments)
      }
      gtag('js', new Date())

      gtag('config', 'G-8DF6WBB8HG')
    </script>
    <AstroFont
      config={[
        {
          src: [],
          name: "Inter",
          preload: false,
          display: "swap",
          fallback: "sans-serif",
          cssVariable: "font-inter",
          googleFontsURL: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900',
        },
      ]}
    />
  </head>
  <!-- Google tag (gtag.js) -->

  <body>
    <slot />
    <style is:global>
      html {
        font-family: Inter;
        background-color: #26272b;
        overflow-x: hidden;
        scroll-behavior: smooth;
      }
    </style>
  </body>
</html>