1<!DOCTYPE HTML>
2<html lang="{{ language }}" class="{{ default_theme }}" dir="{{ text_direction }}">
3 <head>
4 <!-- Book generated using mdBook -->
5 <meta charset="UTF-8">
6 <title>{{ title }}</title>
7 {{#if is_print }}
8 <meta name="robots" content="noindex">
9 {{/if}}
10 {{#if base_url}}
11 <base href="{{ base_url }}">
12 {{/if}}
13
14
15 <!-- Custom HTML head -->
16 {{> head}}
17
18 <meta name="description" content="{{ description }}">
19 <meta name="viewport" content="width=device-width, initial-scale=1">
20 <meta name="theme-color" content="#ffffff">
21
22 <link rel="shortcut icon" href="{{ path_to_root }}favicon.png">
23 <link rel="stylesheet" href="{{ path_to_root }}css/variables.css">
24 <link rel="stylesheet" href="{{ path_to_root }}css/general.css">
25 <link rel="stylesheet" href="{{ path_to_root }}css/chrome.css">
26 <link rel="stylesheet" href="{{ path_to_root }}plugins.css">
27 {{#if print_enable}}
28 <link rel="stylesheet" href="{{ path_to_root }}css/print.css" media="print">
29 {{/if}}
30
31 <!-- Fonts -->
32 <link rel="stylesheet" href="{{ path_to_root }}FontAwesome/css/font-awesome.css">
33 {{#if copy_fonts}}
34 <link rel="stylesheet" href="{{ path_to_root }}fonts/fonts.css">
35 {{/if}}
36
37 <!-- Highlight.js Stylesheets -->
38 <link rel="stylesheet" href="{{ path_to_root }}highlight.css">
39 <link rel="stylesheet" href="{{ path_to_root }}tomorrow-night.css">
40 <link rel="stylesheet" href="{{ path_to_root }}ayu-highlight.css">
41
42 <!-- Custom theme stylesheets -->
43 {{#each additional_css}}
44 <link rel="stylesheet" href="{{ ../path_to_root }}{{ this }}">
45 {{/each}}
46
47 {{#if mathjax_support}}
48 <!-- MathJax -->
49 <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
50 {{/if}}
51 </head>
52 <body class="sidebar-visible no-js">
53 <div id="body-container">
54 <!-- Provide site root to javascript -->
55 <script>
56 var path_to_root = "{{ path_to_root }}";
57 var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "{{ preferred_dark_theme }}" : "{{ default_theme }}";
58 </script>
59
60 <!-- Set the theme before any content is loaded, prevents flash -->
61 <script>
62 var theme;
63 try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
64 if (theme === null || theme === undefined) { theme = default_theme; }
65 var html = document.querySelector('html');
66 html.classList.remove('{{ default_theme }}')
67 html.classList.add(theme);
68 var body = document.querySelector('body');
69 body.classList.remove('no-js')
70 body.classList.add('js');
71 </script>
72
73 <input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
74
75 <!-- Hide / unhide sidebar before it is displayed -->
76 <script>
77 var body = document.querySelector('body');
78 var sidebar = null;
79 var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
80 if (document.body.clientWidth >= 1080) {
81 try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
82 sidebar = sidebar || 'visible';
83 } else {
84 sidebar = 'hidden';
85 }
86 sidebar_toggle.checked = sidebar === 'visible';
87 body.classList.remove('sidebar-visible');
88 body.classList.add("sidebar-" + sidebar);
89 </script>
90
91 <nav id="sidebar" class="sidebar" aria-label="Table of contents">
92 <div class="sidebar-scrollbox">
93 {{#toc}}{{/toc}}
94 </div>
95 <div style="display: none;" id="sidebar-resize-handle" class="sidebar-resize-handle">
96 <div class="sidebar-resize-indicator"></div>
97 </div>
98 </nav>
99
100 <!-- Track and set sidebar scroll position -->
101 <script>
102 var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox');
103 sidebarScrollbox.addEventListener('click', function(e) {
104 if (e.target.tagName === 'A') {
105 sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop);
106 }
107 }, { passive: true });
108 var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
109 sessionStorage.removeItem('sidebar-scroll');
110 if (sidebarScrollTop) {
111 // preserve sidebar scroll position when navigating via links within sidebar
112 sidebarScrollbox.scrollTop = sidebarScrollTop;
113 } else {
114 // scroll sidebar to current active section when navigating via "next/previous chapter" buttons
115 var activeSection = document.querySelector('#sidebar .active');
116 if (activeSection) {
117 activeSection.scrollIntoView({ block: 'center' });
118 }
119 }
120 </script>
121
122 <div id="page-wrapper" class="page-wrapper">
123 <div class="page">
124 {{> header}}
125 <div id="menu-bar-hover-placeholder"></div>
126 <div id="menu-bar" class="menu-bar sticky">
127 <div class="left-buttons">
128 <label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
129 <i class="fa fa-bars"></i>
130 </label>
131 <button style="display: none;" id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
132 <i class="fa fa-paint-brush"></i>
133 </button>
134 <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
135 <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
136 <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
137 <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
138 <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
139 <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
140 </ul>
141 {{#if search_enabled}}
142 <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
143 <i class="fa fa-search"></i>
144 </button>
145 {{/if}}
146 </div>
147
148 <header class="menu-title">
149 <a href="/">
150 <img src="https://zed.dev/logo_wordmark_36.webp" alt="Zed Industries" style="height: 28px;">
151 </a>
152 </header>
153
154 <div class="right-buttons">
155 <a class="download-button" href="https://zed.dev/download" title="Download Zed" aria-label="Download Zed">
156 Download
157 </a>
158 {{#if git_repository_url}}
159 <a href="{{git_repository_url}}" title="Git repository" aria-label="Git repository">
160 <i id="git-repository-button" class="fa {{git_repository_icon}}"></i>
161 </a>
162 {{/if}}
163 {{#if git_repository_edit_url}}
164 <a href="{{git_repository_edit_url}}" title="Suggest an edit" aria-label="Suggest an edit">
165 <i id="git-edit-button" class="fa fa-edit"></i>
166 </a>
167 {{/if}}
168 </div>
169 </div>
170
171 {{#if search_enabled}}
172 <div id="search-wrapper" class="hidden">
173 <form id="searchbar-outer" class="searchbar-outer">
174 <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
175 </form>
176 <div id="searchresults-outer" class="searchresults-outer hidden">
177 <div id="searchresults-header" class="searchresults-header"></div>
178 <ul id="searchresults">
179 </ul>
180 </div>
181 </div>
182 {{/if}}
183
184 <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
185 <script>
186 document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
187 document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
188 Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
189 link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
190 });
191 </script>
192
193 <div id="content" class="content">
194 <main>
195 <div class="sidetoc">
196 <nav class="pagetoc">
197 <p class="toc-title">On this page</p>
198 </nav>
199 </div>
200 {{{ content }}}
201 </main>
202 </div>
203 </div>
204 </div>
205
206 {{#if live_reload_endpoint}}
207 <!-- Livereload script (if served using the cli tool) -->
208 <script>
209 const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
210 const wsAddress = wsProtocol + "//" + location.host + "/" + "{{{live_reload_endpoint}}}";
211 const socket = new WebSocket(wsAddress);
212 socket.onmessage = function (event) {
213 if (event.data === "reload") {
214 socket.close();
215 location.reload();
216 }
217 };
218
219 window.onbeforeunload = function() {
220 socket.close();
221 }
222 </script>
223 {{/if}}
224
225 {{#if playground_line_numbers}}
226 <script>
227 window.playground_line_numbers = true;
228 </script>
229 {{/if}}
230
231 {{#if playground_copyable}}
232 <script>
233 window.playground_copyable = true;
234 </script>
235 {{/if}}
236
237 {{#if playground_js}}
238 <script src="{{ path_to_root }}ace.js"></script>
239 <script src="{{ path_to_root }}editor.js"></script>
240 <script src="{{ path_to_root }}mode-rust.js"></script>
241 <script src="{{ path_to_root }}theme-dawn.js"></script>
242 <script src="{{ path_to_root }}theme-tomorrow_night.js"></script>
243 {{/if}}
244
245 {{#if search_js}}
246 <script src="{{ path_to_root }}elasticlunr.min.js"></script>
247 <script src="{{ path_to_root }}mark.min.js"></script>
248 <script src="{{ path_to_root }}searcher.js"></script>
249 {{/if}}
250
251 <script src="{{ path_to_root }}clipboard.min.js"></script>
252 <script src="{{ path_to_root }}highlight.js"></script>
253 <script src="{{ path_to_root }}book.js"></script>
254
255 <!-- Custom JS scripts -->
256 {{#each additional_js}}
257 <script src="{{ ../path_to_root }}{{this}}"></script>
258 <script src="{{ path_to_root }}plugins.js"></script>
259 {{/each}}
260
261 {{#if is_print}}
262 {{#if mathjax_support}}
263 <script>
264 window.addEventListener('load', function() {
265 MathJax.Hub.Register.StartupHook('End', function() {
266 window.setTimeout(window.print, 100);
267 });
268 });
269 </script>
270 {{else}}
271 <script>
272 window.addEventListener('load', function() {
273 window.setTimeout(window.print, 100);
274 });
275 </script>
276 {{/if}}
277 {{/if}}
278
279 </div>
280 </body>
281</html>