-
Notifications
You must be signed in to change notification settings - Fork 0
/
Default.astro
114 lines (109 loc) · 3.24 KB
/
Default.astro
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
107
108
109
110
111
112
113
114
---
import type { DefaultLayoutQuery, Site, SiteLocale, Tag } from '@lib/types/datocms';
import { datocmsRequest } from '@lib/datocms';
import { defaultLocale, t } from '@lib/i18n';
import { datocmsNoIndex, getSearchPathname } from '@lib/search';
import { siteName } from '@lib/seo';
import type { PageUrl } from '@lib/seo';
import query from './default.query.graphql';
import Breadcrumbs from '@components/Breadcrumbs/Breadcrumbs.astro';
import type { Breadcrumb } from '@components/Breadcrumbs';
import IconSprite from '@components/Icon/IconSprite.astro';
import LocaleSelector from '@components/LocaleSelector/LocaleSelector.astro';
import PreviewModeProvider from '@components/PreviewMode/PreviewModeProvider.astro';
import StructuredData from '@components/StructuredData/StructuredData.astro';
import SeoHead from '@components/SeoHead.astro';
import SkipLink from '@components/SkipLink/SkipLink.astro';
import '@assets/a11y.css';
interface Props {
breadcrumbs?: Breadcrumb[];
pageUrls: PageUrl[];
seoMetaTags: Tag[];
}
const { locale = defaultLocale } = Astro.params as { locale?: SiteLocale };
const data = await datocmsRequest<DefaultLayoutQuery>({ query, variables: { locale } }) as { site: Site };
const { breadcrumbs = [], pageUrls, seoMetaTags } = Astro.props;
const mainContentId = 'content';
---
<!DOCTYPE html>
<html lang={ locale }>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<StructuredData />
<SeoHead
pageUrls={ pageUrls }
tags={[...data.site.faviconMetaTags, ...seoMetaTags]}
/>
</head>
<body>
<PreviewModeProvider>
<SkipLink targetId={ mainContentId } />
<header { ...datocmsNoIndex }>
{ /* accessible home link, inspired by https://www.gov.uk/; with Microformats rel */ }
<a rel="home" href={ `/${ locale }/` } aria-label={ t('go_to_home_page', { siteName }) }>[Logo]</a>
<div>
<LocaleSelector pageUrls={ pageUrls } />
<a rel="search" href={ getSearchPathname(locale) }>{ t('search') }</a>
</div>
</header>
{ (breadcrumbs.length > 0) && (
<Breadcrumbs items={breadcrumbs} />
) }
{ /* main element requires tabindex to be focusable, see SkipLink/README.md */ }
<main id={ mainContentId } tabindex="-1">
<slot />
</main>
<footer { ...datocmsNoIndex }>
<p>Footer</p>
</footer>
</PreviewModeProvider>
<IconSprite />
</body>
</html>
<style is:global>
/* very basic reset */
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
figure {
margin: 0;
}
</style>
<style>
/* Sticky footer. @see https://css-tricks.com/a-clever-sticky-footer-technique/ */
html, body {
height: 100%;
}
footer {
position: sticky;
top: 100vh;
}
/* Basic layout: header, main, footer */
header {
display: flex;
justify-content: space-between;
padding: 1rem;
border-bottom: 2px solid black;
}
header div {
display: flex;
}
main {
margin: auto;
padding: 1rem;
width: 800px;
max-width: calc(100% - 2rem);
font-size: 20px;
line-height: 1.6;
}
footer {
padding: 1rem;
border-top: 2px solid black;
}
</style>