jevstrudel.git / website / src / components / HeadCommonNext.astro
HeadCommonNext.astro60 lines · 1.9 KB · raw
1---
2import { siteDescription, themeColor } from '../jev/site.mjs';
3import { pwaInfo } from 'virtual:pwa-info';
4import '../styles/index.css';
5
6const { BASE_URL } = import.meta.env;
7const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
8---
9
10<!-- Global Metadata -->
11<meta charset="utf-8" />
12<meta name="viewport" content="width=device-width" />
13<meta name="generator" content={Astro.generator} />
14
15<link rel="icon" type="image/svg+xml" href={`${baseNoTrailing}/favicon.ico`} />
16
17<meta
18  name="description"
19  content={siteDescription}
20/>
21<link rel="icon" href={`${baseNoTrailing}/favicon.ico`} />
22<link rel="apple-touch-icon" href={`${baseNoTrailing}/icons/apple-icon-180.png`} sizes="180x180" />
23<meta name="theme-color" content={themeColor} />
24
25<base href={BASE_URL} />
26
27<!-- Scrollable accessibility code helper -->
28<script src={`${baseNoTrailing}/make-scrollable-code-focusable.js`} is:inline></script>
29
30<script src="/src/pwa.ts"></script>
31<!-- this does not work for some reason: -->
32<!-- <style is:global define:vars={strudelTheme}></style> -->
33<!-- the following variables are just a fallback to make sure everything is readable without JS -->
34<style is:global>
35  :root {
36    color-scheme: dark;
37    --background: #222;
38    --lineBackground: #22222299;
39    --foreground: #fff;
40    --caret: #ffcc00;
41    --selection: rgba(128, 203, 196, 0.5);
42    --selectionMatch: #036dd626;
43    --lineHighlight: #00000050;
44    --gutterBackground: transparent;
45    --gutterForeground: #8a919966;
46  }
47</style>
48{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
49
50<script>
51  // https://medium.com/quick-code/100vh-problem-with-ios-safari-92ab23c852a8
52  const appHeight = () => {
53    const doc = document.documentElement;
54    doc.style.setProperty('--app-height', `${window.innerHeight - 1}px`);
55  };
56  if (typeof window !== 'undefined') {
57    window.addEventListener('resize', appHeight);
58    appHeight();
59  }
60</script>