gp200-studio/guide.html at PRODUCTION · kabir0st/gp200-studio · 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
<!doctype html>
<html lang="en">
  <head>
    <!-- Shell for the fourteen prerendered guide pages. Everything between the
         seo markers is replaced per route by scripts/prerender.mjs; the
         placeholders below only ever show up in `npm run dev`. -->
    <!--seo:start-->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title>GP200 Studio Guide: Valeton GP-200, End to End</title>
    <meta
      name="description"
      content="The complete GP200 Studio guide: the pedalboard editor, the multi-layer loop station, footswitch and expression assignment, patch management and .prst files."
    />
    <meta name="author" content="Kabir Tamari" />
    <meta name="theme-color" content="#17181a" />
    <link rel="canonical" href="https://gp200studio.com/guide" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="manifest" href="/site.webmanifest" />
    <!--seo:end-->

    <!-- The stylesheet is linked here rather than imported from guide-main.ts.
         These pages ship their DOM prerendered, and CSS pulled in by a module
         only lands once that module has run: in `vite dev` the whole guide
         painted unstyled first — blue underlined links on a white page — and
         then snapped into place on every navigation. A real <link> is
         render-blocking, so the first paint is the finished page, and the guide
         stays styled with JavaScript switched off. Vite rewrites this to the
         hashed bundle at build time. -->
    <link rel="stylesheet" href="/src/index.css" />

    <!-- Same pre-paint theme script as index.html. It is what makes the light
         or dark screenshot correct on the very first paint of a static page
         with no React on it. See the note there about the theme-color tag. -->
    <script>
      (function () {
        // Dark is the default, so it is the starting value rather than a
        // branch: a blocked localStorage, a cleared one, or a value that is
        // neither 'light' nor 'dark' all leave it in place.
        var t = 'dark';
        try {
          var stored = localStorage.getItem('gp200:theme');
          if (stored === 'light' || stored === 'dark') t = stored;
        } catch (e) {
          /* blocked storage: keep the default */
        }
        document.documentElement.dataset.theme = t;
        var meta = document.querySelector('meta[name="theme-color"]');
        if (meta) meta.setAttribute('content', t === 'dark' ? '#17181a' : '#e8e9eb');
      })();
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/guide-main.ts"></script>
  </body>
</html>