1<!DOCTYPE HTML>
2<html lang="{{ language }}" data-theme="{{ default_theme }}" data-color-scheme="{{ 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 {{#if print_enable}}
27 <link rel="stylesheet" href="{{ path_to_root }}css/print.css" media="print">
28 {{/if}}
29
30 <!-- Fonts -->
31 <link rel="stylesheet" href="{{ path_to_root }}FontAwesome/css/font-awesome.css">
32 {{#if copy_fonts}}
33 <link rel="stylesheet" href="{{ path_to_root }}fonts/fonts.css">
34 {{/if}}
35
36 <!-- Highlight.js Stylesheets -->
37 <link rel="stylesheet" href="{{ path_to_root }}highlight.css">
38 <link rel="stylesheet" href="{{ path_to_root }}tomorrow-night.css">
39 <link rel="stylesheet" href="{{ path_to_root }}ayu-highlight.css">
40
41 <!-- Custom theme stylesheets -->
42 {{#each additional_css}}
43 <link rel="stylesheet" href="{{ ../path_to_root }}{{ this }}">
44 {{/each}}
45
46 {{#if mathjax_support}}
47 <!-- MathJax -->
48 <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
49 {{/if}}
50 </head>
51 <body class="sidebar-visible no-js">
52 <div id="body-container">
53 <!-- Provide site root to javascript -->
54 <script>
55 var path_to_root = "{{ path_to_root }}";
56 var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "{{ preferred_dark_theme }}" : "{{ default_theme }}";
57 </script>
58
59 <!-- Support dark mode -->
60 <script>
61 var theme;
62 try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
63 if (theme === null || theme === undefined) {
64 theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
65 }
66 var html = document.querySelector('html');
67 html.classList.remove('light', 'dark')
68 html.classList.add(theme);
69 var body = document.querySelector('body');
70 body.classList.remove('no-js')
71 body.classList.add('js');
72 </script>
73
74 <input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
75
76 <!-- Hide / unhide sidebar before it is displayed -->
77 <script>
78 var body = document.querySelector('body');
79 var sidebar = null;
80 var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
81 if (document.body.clientWidth >= 1080) {
82 try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
83 sidebar = sidebar || 'visible';
84 } else {
85 sidebar = 'hidden';
86 }
87 sidebar_toggle.checked = sidebar === 'visible';
88 body.classList.remove('sidebar-visible');
89 body.classList.add("sidebar-" + sidebar);
90 </script>
91
92 <nav id="sidebar" class="sidebar" aria-label="Table of contents">
93 <div class="sidebar-scrollbox">
94 {{#toc}}{{/toc}}
95 </div>
96 <div style="display: none;" id="sidebar-resize-handle" class="sidebar-resize-handle">
97 <div class="sidebar-resize-indicator"></div>
98 </div>
99 </nav>
100
101 <!-- Track and set sidebar scroll position -->
102 <script>
103 var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox');
104 sidebarScrollbox.addEventListener('click', function(e) {
105 if (e.target.tagName === 'A') {
106 sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop);
107 }
108 }, { passive: true });
109 var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
110 sessionStorage.removeItem('sidebar-scroll');
111 if (sidebarScrollTop) {
112 // preserve sidebar scroll position when navigating via links within sidebar
113 sidebarScrollbox.scrollTop = sidebarScrollTop;
114 } else {
115 // scroll sidebar to current active section when navigating via "next/previous chapter" buttons
116 var activeSection = document.querySelector('#sidebar .active');
117 if (activeSection) {
118 activeSection.scrollIntoView({ block: 'center' });
119 }
120 }
121 </script>
122
123 <div id="page-wrapper" class="page-wrapper">
124 <div class="page">
125 {{> header}}
126 <div id="menu-bar-hover-placeholder"></div>
127 <div id="menu-bar" class="menu-bar sticky">
128 <div class="left-buttons">
129
130 <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">
131 <i class="fa fa-bars"></i>
132 </label>
133
134 <button 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">
135 <i class="fa fa-paint-brush"></i>
136 </button>
137 <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
138 <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
139 <li role="none"><button role="menuitem" class="theme" id="dark">Dark</button></li>
140 </ul>
141
142 <button id="copy-markdown-toggle" class="icon-button ib-hidden-mobile" type="button" title="Copy Page as Markdown" aria-label="Copy page as markdown">
143 <i class="fa fa-copy"></i>
144 </button>
145
146 {{#if search_enabled}}
147 <button id="search-toggle" class="icon-button" type="button" title="Search (s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
148 <i class="fa fa-search"></i>
149 </button>
150 {{/if}}
151 </div>
152
153 <header class="menu-title">
154 <a href="/">
155 <img src="https://zed.dev/logo_wordmark_1500.webp" class="large-logo-img" alt="Zed Industries" style="height: 28px;">
156 <img src="https://zed.dev/logo_icon.webp" class="icon-logo-img" alt="Zed Industries" style="height: 28px;">
157 </a>
158 </header>
159
160 <div class="right-buttons">
161 <a class="download-button" href="https://zed.dev/download" title="Download Zed" aria-label="Download Zed">
162 Download
163 </a>
164 {{#if git_repository_url}}
165 <a href="{{git_repository_url}}" title="Git repository" aria-label="Git repository">
166 <i id="git-repository-button" class="fa {{git_repository_icon}}"></i>
167 </a>
168 {{/if}}
169 {{#if git_repository_edit_url}}
170 <a href="{{git_repository_edit_url}}" title="Suggest an edit" aria-label="Suggest an edit">
171 <i id="git-edit-button" class="fa fa-edit"></i>
172 </a>
173 {{/if}}
174 </div>
175 </div>
176
177 {{#if search_enabled}}
178 <div id="search-wrapper" class="hidden">
179 <form id="searchbar-outer" class="searchbar-outer">
180 <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
181 </form>
182 <div id="searchresults-outer" class="searchresults-outer hidden">
183 <div id="searchresults-header" class="searchresults-header"></div>
184 <ul id="searchresults">
185 </ul>
186 </div>
187 </div>
188 {{/if}}
189
190 <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
191 <script>
192 document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
193 document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
194 Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
195 link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
196 });
197 </script>
198
199 <div id="content" class="content">
200 <main>
201 <div class="sidetoc">
202 <nav class="pagetoc">
203 <p class="toc-title">On this page</p>
204 </nav>
205 </div>
206 {{{ content }}}
207 <div class="footer-buttons">
208 {{#previous}}
209 <a rel="prev" href="{{ path_to_root }}{{link}}" class="footer-button" title="{{title}}">
210 <i class="fa fa-angle-left"></i>
211 {{title}}
212 </a>
213 {{/previous}}
214 {{#next}}
215 <a rel="next" href="{{ path_to_root }}{{link}}" class="footer-button" title="{{title}}">
216 {{title}}
217 <i class="fa fa-angle-right"></i>
218 </a>
219 {{/next}}
220 </div>
221 </main>
222 </div>
223 </div>
224 </div>
225
226 {{#if live_reload_endpoint}}
227 <!-- Livereload script (if served using the cli tool) -->
228 <script>
229 const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
230 const wsAddress = wsProtocol + "//" + location.host + "/" + "{{{live_reload_endpoint}}}";
231 const socket = new WebSocket(wsAddress);
232 socket.onmessage = function (event) {
233 if (event.data === "reload") {
234 socket.close();
235 location.reload();
236 }
237 };
238
239 window.onbeforeunload = function() {
240 socket.close();
241 }
242 </script>
243 {{/if}}
244
245 {{#if playground_line_numbers}}
246 <script>
247 window.playground_line_numbers = true;
248 </script>
249 {{/if}}
250
251 {{#if playground_copyable}}
252 <script>
253 window.playground_copyable = true;
254 </script>
255 {{/if}}
256
257 {{#if playground_js}}
258 <script src="{{ path_to_root }}ace.js"></script>
259 <script src="{{ path_to_root }}editor.js"></script>
260 <script src="{{ path_to_root }}mode-rust.js"></script>
261 <script src="{{ path_to_root }}theme-dawn.js"></script>
262 <script src="{{ path_to_root }}theme-tomorrow_night.js"></script>
263 {{/if}}
264
265 {{#if search_js}}
266 <script src="{{ path_to_root }}elasticlunr.min.js"></script>
267 <script src="{{ path_to_root }}mark.min.js"></script>
268 <script src="{{ path_to_root }}searcher.js"></script>
269 {{/if}}
270
271 <script src="{{ path_to_root }}clipboard.min.js"></script>
272 <script src="{{ path_to_root }}highlight.js"></script>
273 <script src="{{ path_to_root }}book.js"></script>
274
275 <!-- Custom JS scripts -->
276 {{#each additional_js}}
277 <script src="{{ ../path_to_root }}{{this}}"></script>
278 {{/each}}
279
280 {{#if is_print}}
281 {{#if mathjax_support}}
282 <script>
283 window.addEventListener('load', function() {
284 MathJax.Hub.Register.StartupHook('End', function() {
285 window.setTimeout(window.print, 100);
286 });
287 });
288 </script>
289 {{else}}
290 <script>
291 window.addEventListener('load', function() {
292 window.setTimeout(window.print, 100);
293 });
294 </script>
295 {{/if}}
296 {{/if}}
297
298 <script>
299 (function() {
300 var theme = localStorage.getItem('mdbook-theme');
301 var html = document.querySelector('html');
302 if (theme) {
303 html.setAttribute('data-theme', theme);
304 html.setAttribute('data-color-scheme', theme);
305 html.className = theme;
306 } else {
307 var systemPreference = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
308 html.setAttribute('data-theme', systemPreference);
309 html.setAttribute('data-color-scheme', systemPreference);
310 html.className = systemPreference;
311 }
312 })();
313 </script>
314
315 <!-- Amplitude Analytics -->
316 <script>
317 (function() {
318 var amplitudeKey = '#amplitude_key#';
319 if (amplitudeKey && amplitudeKey.indexOf('#') === -1) {
320 var script = document.createElement('script');
321 script.src = 'https://cdn.amplitude.com/script/' + amplitudeKey + '.js';
322 script.onload = function() {
323 window.amplitude.init(amplitudeKey, {
324 fetchRemoteConfig: true,
325 autocapture: true
326 });
327 };
328 document.head.appendChild(script);
329 }
330 })();
331 </script>
332 </div>
333 </body>
334</html>