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    <link rel="icon" href="/static/images/favicon.png">
  7    <link rel="stylesheet" href="/static/styles.css">
  8    <link rel="stylesheet" href="/static/prose.css">
  9
 10    <title>Zed – a lightning fast, collaborative code editor written natively in Rust</title>
 11
 12</head>
 13
 14<body class="box-border font-light bg-black font-body text-main">
 15    <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">
 16        <nav class="p-10 pb-0 bg-black font-extralight lg:hidden">
 17            <a href="/" class="block hover:opacity-80">
 18                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 19                <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"/>
 20                <path fill-rule="evenodd" clip-rule="evenodd" d="M10 10L23.5 10L14.875 19H19L22 22H8.5L17.125 13H13L10 10Z" fill="white"/>
 21                </svg>
 22            </a>
 23            
 24            <div class="flex flex-row flex-wrap mt-10">
 25                <a href="/team" class="mr-2 text-lg leading-loose no-underline lowercase hover:underline">
 26                    Team
 27                </a>
 28                <p class="pt-1 mr-2 text-lg text-gray-500">·</p>
 29                <a href="/story" class="relative mr-2 text-lg leading-loose no-underline lowercase nav-active hover:underline">
 30                    Our Story
 31                </a>
 32                <p class="pt-1 mr-2 text-lg text-gray-500">·</p>
 33                <a href="/community" class="mr-2 text-lg leading-loose no-underline lowercase hover:underline">
 34                    Community
 35                </a>
 36                <p class="pt-1 mr-2 text-lg text-gray-500">·</p>
 37                {{#if current_user}}
 38                <a href="/updates" class="mr-2 text-lg leading-loose no-underline lowercase hover:underline">
 39                    Updates
 40                </a>
 41                <p class="pt-1 mr-2 text-lg text-gray-500">·</p>
 42                <a href="/releases" class="mr-2 text-lg leading-loose no-underline lowercase hover:underline">
 43                    Releases
 44                </a>
 45
 46                {{#if current_user.is_admin }}
 47                    <p class="pt-1 mr-2 text-lg text-gray-500">·</p>
 48                    <a href="/admin" class="inline-block mr-2 text-lg leading-loose no-underline lowercase hover:underline">
 49                        Manage Users
 50                    </a>
 51                {{/if}}
 52
 53                <p class="pt-1 mr-2 text-lg text-gray-500">·</p>
 54                <form id="sign_out" action="/sign_out" method="post" class="inline m-0 mr-2 font-extralight">
 55                    <button class="text-lg leading-loose no-underline lowercase font-extralight hover:underline">Log out</button>
 56                </form>
 57
 58                {{else}}
 59
 60                <!-- Otherwise let user log in -->
 61                <a href=" /sign_in"
 62                    class="mr-2 text-lg leading-loose no-underline lowercase hover:underline">
 63                    Log in
 64                </a>
 65                {{/if}}
 66            </div>
 67
 68            <!-- If user is logged in AND -->
 69            <!-- If user is at least an insider -->
 70            {{#if current_user}}
 71
 72            <!-- AND If user is an admin -->
 73            
 74
 75            {{/if}}
 76        </nav>
 77
 78        <nav id="nav" class="hidden p-10 pt-20 bg-black lg:flex lg:flex-col font-extralight site-nav">
 79            <a href="/" class="block hover:opacity-80">
 80                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 81                <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"/>
 82                <path fill-rule="evenodd" clip-rule="evenodd" d="M10 10L23.5 10L14.875 19H19L22 22H8.5L17.125 13H13L10 10Z" fill="white"/>
 83                </svg>
 84            </a>
 85            <div class="flex flex-col mt-10 font-mono">
 86                <a href="/team" class="relative mt-2 text-base no-underline lowercase hover:underline">
 87                    <span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
 88                        <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>
 89                    </span>
 90                    The Team
 91                </a>
 92                <a href="/story" class="relative mt-2 text-base no-underline lowercase hover:underline">
 93                    <span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
 94                        <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>
 95                    </span>
 96                    Our Story
 97                </a>
 98                <a href="/community" class="relative mt-2 text-base no-underline lowercase hover:underline">
 99                    <span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
100                        <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>
101                    </span>
102                    Community
103                </a>
104            </div>
105            
106            <!-- If user is logged in AND -->
107            <!-- If user is at least an insider -->
108            {{#if current_user}}
109            <div class="flex flex-col mt-10 font-mono">
110                <p class="text-xs tracking-widest uppercase opacity-50">Insiders</p>
111                <a href="/updates" 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                    Updates
116                </a>
117                <a href="/releases" 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                    Releases
122                </a>
123            </div>
124
125            <!-- AND If user is an admin -->
126            {{#if current_user.is_admin }}
127                <div class="flex flex-col mt-10 font-mono">
128                    <p class="text-xs tracking-widest uppercase opacity-50">Admin</p>
129                    <a href="/admin" class="relative inline-block mt-2 text-base no-underline lowercase hover:underline">
130                        <span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
131                            <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>
132                        </span>
133                        Manage
134                    </a>
135                </div>
136            {{/if}}
137       
138            <div class="mt-10">
139                <p class="text-base no-underline lowercase hover:underline">@{{current_user.github_login}}</p>
140                <form id="sign_out" action="/sign_out" method="post">
141                    <button class="mt-2 text-xs no-underline lowercase opacity-50 hover:underline">Sign out</button>
142                </form>
143            </div>
144
145            {{else}}
146            <!-- Otherwise let user log in -->
147            <a href=" /sign_in"
148                class="mt-10 text-base text-gray-400 no-underline lowercase hover:underline">
149                Log in
150            </a>
151            {{/if}}
152        </nav>
153
154        <div class="col-span-3 bg-black">
155            {{> @partial-block}}
156        </div>
157    </main>
158    <script src="/static/prism.js"></script>
159</body>
160
161<script>
162    const nav = document.getElementById('nav');
163    const links = nav.getElementsByTagName('a');
164    const currentPath = window.location.pathname;
165    for (const link of links) {
166        if (link.getAttribute('href') === currentPath) {
167            link.classList.add('active');
168            console.log('activating', link)
169        }
170    }
171</script>
172
173</html>