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
|
import * as React from "react";
import styled, { createGlobalStyle } from "styled-components";
import logo from "../images/logo.svg";
import logoPng from "../images/logo.png";
import tile from "../images/banner_pattern.svg";
const GlobalStyle = createGlobalStyle`
body {
margin: 0;
padding: 0;
background: url(${tile});
background-size: 128px;
font-family: 'Titillium Web', Arial, sans-serif;
margin-left: 5vw;
margin-right: 5vw;
color: #fff;
margin-bottom: 50px;
}
a {
color: #fff;
text-decoration: underline;
}
`;
const CenterImage = styled.img`
display: block;
margin: 0 auto;
margin-top: 10px;
width: 70%;
height: auto;
max-width: 600px;
`
const Header = styled.h1`
font-size: 3em;
margin: 0;
@media (max-width: 600px) {
font-size: 2em;
}
`
const SubHeader = styled.h2`
margin: 0;
line-height: 1em;
`
const HeaderDiv = styled.div`
margin-bottom: 20px;
`
type PageLayoutProps = {
children: React.ReactNode;
header?: string;
subheader?: string;
}
const PageLayout: React.FC<PageLayoutProps> = ({ children, header, subheader }) => {
return (
<>
<GlobalStyle />
<main>
<CenterImage src={logo} alt="DevOps Logo" />
<HeaderDiv>
{header && <Header>{header}</Header>}
{subheader && <SubHeader>{subheader}</SubHeader>}
</HeaderDiv>
{children}
</main >
</>
);
}
export default PageLayout;
export const generateHeader = (title: string, description: string) => {
return () => <>
<html lang="en" />
<title>{title} • PyDis Ops</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet"></link>
<meta name="description" content={description} />
<meta name="og:description" content={description} />
<meta name="og:title" content={title} />
<meta name="og:image" content={logoPng} />
<meta name="theme-color" content="#a0cef3" />
</>;
}
|
