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