layout.hbs

  1<html>
  2
  3<head>
  4    <meta charset="utf-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
  6    
  7    <link rel="mask-icon" href="/static/images/favicon.svg" color="#000000">
  8    <link rel="alternate icon" type="image/png" href="/static/images/favicon.png">
  9    <link rel="shortcut icon" href="/static/images/favicon.svg">
 10    <link rel="apple-touch-icon" sizes="180x180" href="/static/images/apple-touch-icon.png">
 11    <link rel="manifest" href="/static/site.webmanifest">
 12
 13    <link rel="stylesheet" href="/static/styles.css">
 14    <link rel="stylesheet" href="/static/prose.css">
 15
 16    <link rel="mask-icon" href="/static/images/safari-pinned-tab.svg" color="#000000">
 17    <meta name="msapplication-TileColor" content="#000000">
 18    <meta name="msapplication-config" content="/static/browserconfig.xml">
 19    <meta name="theme-color" content="#000">
 20
 21    <!-- Open Graph stuff -->
 22    <meta name="twitter:card" content="summary" />
 23    <meta property="twitter:image" content="/static/images/zed-twitter-image.png" />
 24    <meta name="twitter:image:alt" content="An image of Zed's logo, sharp Z inside a circle, in white on a black background." />
 25    <meta property="og:url" content="https://zed.dev/" />
 26    <meta property="og:title" content="Introducing Zed" />
 27    <meta property="og:description" content="A lightning-fast, collaborative code editor written in Rust." />
 28    <meta property="og:image" content="/static/images/zed-og-image.png" />
 29    <meta property="og:type" content="website" />
 30
 31    <title>Zed</title>
 32
 33</head>
 34
 35<body class="box-border font-light bg-black font-body text-main">
 36    <main class="container flex flex-col mx-auto lg:bg-white lg:flex-none lg:grid lg:min-h-full lg:grid-cols-4 max-w-screen-2xl lg:gap-x-px text-gray-50">
 37        <nav id="mobile-nav" class="p-5 pt-10 pb-5 bg-black font-extralight lg:hidden site-mobile-nav">
 38            <div class="flex flex-row justify-between">
 39                <a href="/" class="block hover:opacity-80">
 40                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 41                    <path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0ZM16 4C9.37258 4 4 9.37258 4 16C4 22.6274 9.37258 28 16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4Z" fill="white"/>
 42                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10 10L23.5 10L14.875 19H19L22 22H8.5L17.125 13H13L10 10Z" fill="white"/>
 43                    </svg>
 44                </a>
 45                <div class="flex flex-row">
 46                    {{#if current_user}}
 47
 48                    <form id="sign_out" action="/sign_out" method="post" class="inline m-0 text-gray-500 font-extralight">
 49                        <button class="text-lg leading-relaxed √ no-underline font-extralight hover:underline">Log Out</button>
 50                    </form>
 51
 52                    {{else}}
 53
 54                    <!-- Otherwise let user log in -->
 55                    <a href=" /sign_in"
 56                        class="text-lg leading-relaxed text-gray-500">
 57                        Log in
 58                    </a>
 59                    {{/if}}
 60                </div>
 61            </div>
 62            
 63            <div class="flex flex-row flex-wrap mt-10">
 64                <a href="/" class="mr-2 text-lg leading-relaxed">
 65                    Meet Zed <span class="pt-1 mr-1 text-lg text-gray-500">·</span>
 66                </a>
 67                <a href="/team" class="mr-2 text-lg leading-relaxed">
 68                    The Team <span class="pt-1 mr-1 text-lg text-gray-500">·</span>
 69                </a>
 70                
 71                <a href="/community" class="mr-2 text-lg leading-relaxed">
 72                    Waitlist
 73                </a>
 74                {{#if current_user}}
 75                <a href="/releases" class="mr-2 text-lg leading-relaxed">
 76                    <span class="pt-1 mr-1 text-lg text-gray-500">·</span> Releases
 77                </a>
 78
 79                {{#if current_user.is_admin }}
 80                    <a href="/admin" class="inline-block mr-2 text-lg leading-relaxed">
 81                        <span class="pt-1 mr-1 text-lg text-gray-500">·</span> Manage Users
 82                    </a>
 83                {{/if}}
 84                {{/if}}
 85            </div>
 86
 87            <!-- If user is logged in AND -->
 88            <!-- If user is at least an insider -->
 89            {{#if current_user}}
 90
 91            <!-- AND If user is an admin -->
 92            
 93
 94            {{/if}}
 95        </nav>
 96
 97        <nav id="nav" class="hidden p-10 pt-20 bg-black lg:flex lg:flex-col font-extralight site-nav">
 98            <a href="/" class="block hover:opacity-80">
 99                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
100                <path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0ZM16 4C9.37258 4 4 9.37258 4 16C4 22.6274 9.37258 28 16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4Z" fill="white"/>
101                <path fill-rule="evenodd" clip-rule="evenodd" d="M10 10L23.5 10L14.875 19H19L22 22H8.5L17.125 13H13L10 10Z" fill="white"/>
102                </svg>
103            </a>
104            <div class="flex flex-col mt-10 font-mono">
105                <a href="/" class="relative mt-2 text-base no-underline lowercase hover:underline">
106                    <span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
107                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1594 12.1606C10.0309 12.0567 9.96803 11.8899 9.96803 11.7204C9.96803 11.5509 10.0321 11.3846 10.1603 11.2564L12.7596 8.65813H1.6562C1.29392 8.65813 1 8.36284 1 7.97732C1 7.63829 1.29392 7.34573 1.6562 7.34573H12.7596L10.1613 4.74747C9.90501 4.49114 9.90501 4.07596 10.1613 3.81949C10.4177 3.56303 10.8328 3.56317 11.0893 3.81949L14.8078 7.53794C15.0641 7.79427 15.0641 8.20945 14.8078 8.46592L11.0893 12.1844C10.832 12.4395 10.4164 12.4395 10.1594 12.1606Z" fill="white"/></svg>
108                    </span>
109                    Meet Zed
110                </a>
111                <a href="/team" class="relative mt-2 text-base no-underline lowercase hover:underline">
112                    <span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
113                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1594 12.1606C10.0309 12.0567 9.96803 11.8899 9.96803 11.7204C9.96803 11.5509 10.0321 11.3846 10.1603 11.2564L12.7596 8.65813H1.6562C1.29392 8.65813 1 8.36284 1 7.97732C1 7.63829 1.29392 7.34573 1.6562 7.34573H12.7596L10.1613 4.74747C9.90501 4.49114 9.90501 4.07596 10.1613 3.81949C10.4177 3.56303 10.8328 3.56317 11.0893 3.81949L14.8078 7.53794C15.0641 7.79427 15.0641 8.20945 14.8078 8.46592L11.0893 12.1844C10.832 12.4395 10.4164 12.4395 10.1594 12.1606Z" fill="white"/></svg>
114                    </span>
115                    The Team
116                </a>
117                <a href="/careers" class="relative mt-2 text-base no-underline lowercase hover:underline">
118                    <span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
119                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1594 12.1606C10.0309 12.0567 9.96803 11.8899 9.96803 11.7204C9.96803 11.5509 10.0321 11.3846 10.1603 11.2564L12.7596 8.65813H1.6562C1.29392 8.65813 1 8.36284 1 7.97732C1 7.63829 1.29392 7.34573 1.6562 7.34573H12.7596L10.1613 4.74747C9.90501 4.49114 9.90501 4.07596 10.1613 3.81949C10.4177 3.56303 10.8328 3.56317 11.0893 3.81949L14.8078 7.53794C15.0641 7.79427 15.0641 8.20945 14.8078 8.46592L11.0893 12.1844C10.832 12.4395 10.4164 12.4395 10.1594 12.1606Z" fill="white"/></svg>
120                    </span>
121                    Careers
122                </a>
123                <a href="/community" class="relative mt-2 text-base no-underline lowercase hover:underline">
124                    <span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
125                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1594 12.1606C10.0309 12.0567 9.96803 11.8899 9.96803 11.7204C9.96803 11.5509 10.0321 11.3846 10.1603 11.2564L12.7596 8.65813H1.6562C1.29392 8.65813 1 8.36284 1 7.97732C1 7.63829 1.29392 7.34573 1.6562 7.34573H12.7596L10.1613 4.74747C9.90501 4.49114 9.90501 4.07596 10.1613 3.81949C10.4177 3.56303 10.8328 3.56317 11.0893 3.81949L14.8078 7.53794C15.0641 7.79427 15.0641 8.20945 14.8078 8.46592L11.0893 12.1844C10.832 12.4395 10.4164 12.4395 10.1594 12.1606Z" fill="white"/></svg>
126                    </span>
127                    Waitlist
128                </a>
129            </div>
130            
131            <!-- If user is logged in AND -->
132            <!-- If user is at least an insider -->
133            {{#if current_user}}
134            <div class="flex flex-col mt-10 font-mono">
135                <p class="text-xs tracking-widest uppercase opacity-50">Insiders</p>
136                <a href="/releases" class="relative mt-2 text-base no-underline lowercase hover:underline">
137                    <span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
138                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1594 12.1606C10.0309 12.0567 9.96803 11.8899 9.96803 11.7204C9.96803 11.5509 10.0321 11.3846 10.1603 11.2564L12.7596 8.65813H1.6562C1.29392 8.65813 1 8.36284 1 7.97732C1 7.63829 1.29392 7.34573 1.6562 7.34573H12.7596L10.1613 4.74747C9.90501 4.49114 9.90501 4.07596 10.1613 3.81949C10.4177 3.56303 10.8328 3.56317 11.0893 3.81949L14.8078 7.53794C15.0641 7.79427 15.0641 8.20945 14.8078 8.46592L11.0893 12.1844C10.832 12.4395 10.4164 12.4395 10.1594 12.1606Z" fill="white"/></svg>
139                    </span>
140                    Releases
141                </a>
142            </div>
143
144            <!-- AND If user is an admin -->
145            {{#if current_user.is_admin }}
146                <div class="flex flex-col mt-10 font-mono">
147                    <p class="text-xs tracking-widest uppercase opacity-50">Admin</p>
148                    <a href="/admin" class="relative inline-block mt-2 text-base no-underline lowercase hover:underline">
149                        <span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
150                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1594 12.1606C10.0309 12.0567 9.96803 11.8899 9.96803 11.7204C9.96803 11.5509 10.0321 11.3846 10.1603 11.2564L12.7596 8.65813H1.6562C1.29392 8.65813 1 8.36284 1 7.97732C1 7.63829 1.29392 7.34573 1.6562 7.34573H12.7596L10.1613 4.74747C9.90501 4.49114 9.90501 4.07596 10.1613 3.81949C10.4177 3.56303 10.8328 3.56317 11.0893 3.81949L14.8078 7.53794C15.0641 7.79427 15.0641 8.20945 14.8078 8.46592L11.0893 12.1844C10.832 12.4395 10.4164 12.4395 10.1594 12.1606Z" fill="white"/></svg>
151                        </span>
152                        Manage
153                    </a>
154                </div>
155            {{/if}}
156       
157            <div class="mt-10">
158                <p class="text-base no-underline">@{{current_user.github_login}}</p>
159                <form id="sign_out" action="/sign_out" method="post">
160                    <button class="mt-2 text-xs no-underline lowercase opacity-50 font-extralight hover:opacity-100">Sign out</button>
161                </form>
162            </div>
163
164            {{else}}
165            <!-- Otherwise let user log in -->
166            <a href=" /sign_in"
167                class="mt-10 text-base text-gray-400 no-underline lowercase hover:underline">
168                Log in
169            </a>
170            {{/if}}
171        </nav>
172
173        <div class="col-span-3 pb-20 bg-black">
174            {{> @partial-block}}
175        </div>
176    </main>
177    <script src="/static/prism.js"></script>
178</body>
179
180<script>
181    const nav = document.getElementById('nav');
182    const links = nav.getElementsByTagName('a');
183    const currentPath = window.location.pathname;
184    for (const link of links) {
185        if (link.getAttribute('href') === currentPath) {
186            link.classList.add('active');
187        }
188    }
189    const mnav = document.getElementById('mobile-nav');
190    const mlinks = mnav.getElementsByTagName('a');
191    const mcurrentPath = window.location.pathname;
192    for (const mlink of mlinks) {
193        if (mlink.getAttribute('href') === mcurrentPath) {
194            mlink.classList.add('active');
195        }
196    }
197</script>
198
199</html>