zed/server/templates/partials/layout.hbs
2021-09-23 15:43:35 -04:00

184 lines
12 KiB
Handlebars
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
<link rel="shortcut icon" href="/static/favicon.png">
<link rel="shortcut icon" href="/static/favicon.svg">
<link rel="stylesheet" href="/static/styles.css">
<link rel="stylesheet" href="/static/prose.css">
<!-- Social stuff -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
<link rel="manifest" href="/static/site.webmanifest">
<link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#000000">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-config" content="/static/browserconfig.xml">
<meta name="theme-color" content="#000">
<title>Zed a lightning fast, collaborative code editor written natively in Rust</title>
</head>
<body class="box-border font-light bg-black font-body text-main">
<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">
<nav class="p-10 pb-0 bg-black font-extralight lg:hidden">
<a href="/" class="block hover:opacity-80">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 10L23.5 10L14.875 19H19L22 22H8.5L17.125 13H13L10 10Z" fill="white"/>
</svg>
</a>
<div class="flex flex-row flex-wrap mt-10">
<a href="/team" class="mr-2 text-lg leading-loose no-underline lowercase hover:underline">
Team
</a>
<p class="pt-1 mr-2 text-lg text-gray-500">·</p>
<a href="/story" class="relative mr-2 text-lg leading-loose no-underline lowercase nav-active hover:underline">
Our Story
</a>
<p class="pt-1 mr-2 text-lg text-gray-500">·</p>
<a href="/community" class="mr-2 text-lg leading-loose no-underline lowercase hover:underline">
Community
</a>
<p class="pt-1 mr-2 text-lg text-gray-500">·</p>
{{#if current_user}}
<a href="/updates" class="mr-2 text-lg leading-loose no-underline lowercase hover:underline">
Updates
</a>
<p class="pt-1 mr-2 text-lg text-gray-500">·</p>
<a href="/releases" class="mr-2 text-lg leading-loose no-underline lowercase hover:underline">
Releases
</a>
{{#if current_user.is_admin }}
<p class="pt-1 mr-2 text-lg text-gray-500">·</p>
<a href="/admin" class="inline-block mr-2 text-lg leading-loose no-underline lowercase hover:underline">
Manage Users
</a>
{{/if}}
<p class="pt-1 mr-2 text-lg text-gray-500">·</p>
<form id="sign_out" action="/sign_out" method="post" class="inline m-0 mr-2 font-extralight">
<button class="text-lg leading-loose no-underline lowercase font-extralight hover:underline">Log out</button>
</form>
{{else}}
<!-- Otherwise let user log in -->
<a href=" /sign_in"
class="mr-2 text-lg leading-loose no-underline lowercase hover:underline">
Log in
</a>
{{/if}}
</div>
<!-- If user is logged in AND -->
<!-- If user is at least an insider -->
{{#if current_user}}
<!-- AND If user is an admin -->
{{/if}}
</nav>
<nav id="nav" class="hidden p-10 pt-20 bg-black lg:flex lg:flex-col font-extralight site-nav">
<a href="/" class="block hover:opacity-80">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 10L23.5 10L14.875 19H19L22 22H8.5L17.125 13H13L10 10Z" fill="white"/>
</svg>
</a>
<div class="flex flex-col mt-10 font-mono">
<a href="/team" class="relative mt-2 text-base no-underline lowercase hover:underline">
<span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
<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>
</span>
The Team
</a>
<a href="/story" class="relative mt-2 text-base no-underline lowercase hover:underline">
<span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
<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>
</span>
Our Story
</a>
<a href="/community" class="relative mt-2 text-base no-underline lowercase hover:underline">
<span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
<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>
</span>
Community
</a>
</div>
<!-- If user is logged in AND -->
<!-- If user is at least an insider -->
{{#if current_user}}
<div class="flex flex-col mt-10 font-mono">
<p class="text-xs tracking-widest uppercase opacity-50">Insiders</p>
<a href="/updates" class="relative mt-2 text-base no-underline lowercase hover:underline">
<span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
<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>
</span>
Updates
</a>
<a href="/releases" class="relative mt-2 text-base no-underline lowercase hover:underline">
<span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
<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>
</span>
Releases
</a>
</div>
<!-- AND If user is an admin -->
{{#if current_user.is_admin }}
<div class="flex flex-col mt-10 font-mono">
<p class="text-xs tracking-widest uppercase opacity-50">Admin</p>
<a href="/admin" class="relative inline-block mt-2 text-base no-underline lowercase hover:underline">
<span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
<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>
</span>
Manage
</a>
</div>
{{/if}}
<div class="mt-10">
<p class="text-base no-underline lowercase hover:underline">@{{current_user.github_login}}</p>
<form id="sign_out" action="/sign_out" method="post">
<button class="mt-2 text-xs no-underline lowercase opacity-50 hover:underline">Sign out</button>
</form>
</div>
{{else}}
<!-- Otherwise let user log in -->
<a href=" /sign_in"
class="mt-10 text-base text-gray-400 no-underline lowercase hover:underline">
Log in
</a>
{{/if}}
</nav>
<div class="col-span-3 bg-black">
{{> @partial-block}}
</div>
</main>
<script src="/static/prism.js"></script>
</body>
<script>
const nav = document.getElementById('nav');
const links = nav.getElementsByTagName('a');
const currentPath = window.location.pathname;
for (const link of links) {
if (link.getAttribute('href') === currentPath) {
link.classList.add('active');
console.log('activating', link)
}
}
</script>
</html>