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
<%# The whole page shell — head, header, sidebar, footer. One file, because
    there is exactly one shell and it is not going to grow a second one.
    Rendered by lib/build.rb#render_shell, which sets local variables
    title/description/url/body before evaluating this template; NAV and
    VERSION are constants from lib/build.rb, and relative_url/escape are
    plain top-level methods. %>
<!DOCTYPE html>
<html lang="<%= LANG %>">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#faf9f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0e0d0b" media="(prefers-color-scheme: dark)">

<title><%= title %> | <%= TITLE %></title>
<meta name="description" content="<%= escape(description) %>">
<link rel="canonical" href="<%= SITE_URL %><%= relative_url(url) %>">
<meta property="og:title" content="<%= escape(title) %>">
<meta property="og:site_name" content="<%= escape(TITLE) %>">
<meta property="og:url" content="<%= SITE_URL %><%= relative_url(url) %>">
<meta property="og:description" content="<%= escape(description) %>">

<!-- The system's one loaded webfont — see assets/css/tokens.css. Sans is a
     web-safe system stack; nothing is fetched for it. -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap">

<link rel="stylesheet" href="<%= relative_url('/assets/css/tokens.css') %>">
<link rel="stylesheet" href="<%= relative_url('/assets/css/base.css') %>">
<link rel="stylesheet" href="<%= relative_url('/assets/css/components.css') %>">
<link rel="stylesheet" href="<%= relative_url('/assets/css/docs.css') %>">
<link rel="stylesheet" href="<%= relative_url('/assets/css/patterns.css') %>">
<link rel="icon" href="<%= relative_url('/assets/favicon.svg') %>" type="image/svg+xml">

<!-- Applied before first paint so an explicit theme choice never flashes. -->
<script>
  (function () {
    try {
      var stored = localStorage.getItem("gl-theme");
      if (stored === "dark" || stored === "light") {
        document.documentElement.setAttribute("data-theme", stored);
      }
    } catch (error) {
      /* Private windows and blocked storage are fine; the media query covers us. */
    }
  })();
</script>
</head>
<body>
  <a class="gl-doc-skip" href="#main">Skip to content</a>

  <header class="gl-doc-header">
    <div class="gl-doc-header__inner">
      <a class="gl-doc-wordmark" href="<%= relative_url('/') %>">
        <svg class="gl-doc-wordmark__mark" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <rect x="1.5" y="1.5" width="21" height="21" rx="5" stroke="currentColor" stroke-width="2"/>
          <path d="M7 16.5 12 7l5 9.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M9.2 13.4h5.6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <span>Gloss</span>
        <span class="gl-doc-wordmark__version">v<%= VERSION %></span>
      </a>
      <div class="gl-doc-header__actions">
        <button data-variant="ghost" data-size="sm" data-theme-toggle
                aria-label="Switch color theme" title="Switch color theme">
          <span class="gl-visually-hidden" data-theme-label>Theme</span>
        </button>
        <a class="btn" data-size="sm" href="https://github.com/<%= REPOSITORY %>">Source</a>
      </div>
    </div>
  </header>

  <div class="gl-doc-layout">
    <aside class="gl-doc-sidebar" data-sidebar data-collapsed="true">
      <button class="gl-doc-nav-toggle" data-size="sm"
              data-nav-toggle aria-expanded="false" aria-controls="gl-doc-nav">
        <span>Browse the system</span>
        <span aria-hidden="true">☰</span>
      </button>

      <nav class="gl-doc-nav" id="gl-doc-nav" aria-label="Design system">
        <% NAV.each do |group| -%>
        <div class="gl-doc-nav__group">
          <h2 class="gl-doc-nav__heading"><%= group["title"] %></h2>
          <% group["links"].each do |link| -%>
          <a class="gl-doc-nav__link" href="<%= relative_url(link["url"]) %>"
             <% if url == link["url"] %>aria-current="page"<% end %>><%= link["text"] %></a>
          <% end -%>
        </div>
        <% end -%>
      </nav>
    </aside>

    <main class="gl-doc-main" id="main">
      <%= body %>
    </main>
  </div>

  <footer class="gl-doc-footer">
    <div class="gl-doc-footer__inner">
      <p><%= TITLE %> v<%= VERSION %> — built with Ruby <%= RUBY_VERSION %>.</p>
      <p><a href="https://github.com/<%= REPOSITORY %>">View the source</a></p>
    </div>
  </footer>

  <script src="<%= relative_url('/assets/js/system.js') %>" defer></script>
</body>
</html>