layout.hbs

  1<html>
  2
  3<head>
  4    <link rel="icon" href="/static/images/favicon.png">
  5    <link rel="stylesheet" href="/static/styles.css">
  6    <link rel="stylesheet" href="/static/prose.css">
  7
  8    <title>Zed – a lightning fast, collaborative code editor written natively in Rust</title>
  9
 10    <script>
 11        window.addEventListener("DOMContentLoaded", function () {
 12            let avatar = document.getElementById("avatar");
 13            let sign_out = document.getElementById("sign_out");
 14            if (avatar && sign_out) {
 15                avatar.addEventListener("click", function (event) {
 16                    sign_out.classList.toggle("hidden");
 17                    event.stopPropagation();
 18                });
 19                document.addEventListener("click", function (event) {
 20                    sign_out.classList.add("hidden");
 21                });
 22            }
 23        });
 24    </script>
 25</head>
 26
 27<body class="box-border font-body text-main font-light bg-black">
 28    <main class="container mx-auto max-w-screen-2xl min-h-full grid grid-cols-4 gap-x-px bg-white text-gray-50">
 29        <nav class="flex flex-col p-10 pt-20 bg-black font-extralight">
 30            <a href="/" class="font-display">
 31                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 32                <mask id="path-2-inside-1" fill="white">
 33                <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"/>
 34                </mask>
 35                <path d="M4 16C4 9.37258 9.37258 4 16 4V-4C4.95431 -4 -4 4.95431 -4 16H4ZM16 28C9.37258 28 4 22.6274 4 16H-4C-4 27.0457 4.9543 36 16 36V28ZM28 16C28 22.6274 22.6274 28 16 28V36C27.0457 36 36 27.0457 36 16H28ZM16 4C22.6274 4 28 9.37258 28 16H36C36 4.9543 27.0457 -4 16 -4V4ZM8 16C8 11.5817 11.5817 8 16 8V0C7.16344 0 0 7.16344 0 16H8ZM16 24C11.5817 24 8 20.4183 8 16H0C0 24.8366 7.16344 32 16 32V24ZM24 16C24 20.4183 20.4183 24 16 24V32C24.8366 32 32 24.8366 32 16H24ZM16 8C20.4183 8 24 11.5817 24 16H32C32 7.16344 24.8366 0 16 0V8Z" fill="white" mask="url(#path-2-inside-1)"/>
 36                <path fill-rule="evenodd" clip-rule="evenodd" d="M10 10L23.5 10L14.875 19H19L22 22H8.5L17.125 13H13L10 10Z" fill="white"/>
 37                </svg>
 38            </a>
 39            <div class="font-mono flex flex-col mt-10">
 40                <a href="/story" class="text-base lowercase no-underline hover:underline mt-2">
 41                    Our Story
 42                </a>
 43                <a href="/tech" class="text-base lowercase no-underline hover:underline mt-2">
 44                    The Tech
 45                </a>
 46                <a href="/team" class="text-base lowercase no-underline hover:underline mt-2">
 47                    Team
 48                </a>
 49                <a href="/community" class="text-base lowercase no-underline hover:underline mt-2">
 50                    Community
 51                </a>
 52            </div>
 53            
 54            <!-- If user is logged in AND -->
 55            <!-- If user is at least an insider -->
 56            {{#if current_user}}
 57            <div class="font-mono flex flex-col mt-10">
 58                <p class="text-xs tracking-widest uppercase">Insider Zone</p>
 59                <a href="/updates" class="text-base lowercase no-underline hover:underline mt-2">
 60                    Updates
 61                </a>
 62                <a href="/releases" class="text-base lowercase no-underline hover:underline mt-2">
 63                    Releases
 64                </a>
 65            </div>
 66
 67            <!-- AND If user is an admin -->
 68            {{#if current_user.is_admin }}
 69                <div class="font-mono flex flex-col mt-10">
 70                    <p class="text-xs tracking-widest uppercase">Admin Zone</p>
 71                    <a href="/admin" class="inline-block text-base lowercase no-underline hover:underline mt-2">
 72                        Admin
 73                    </a>
 74                </div>
 75            {{/if}}
 76       
 77            <div class="mt-10">
 78                <!-- TODO: Dropdown is linked to #avatar, just using it for now. Come back and clean up later -->
 79                <p id="avatar" class="text-base lowercase no-underline hover:underline">@{{current_user.github_login}}</p>
 80                <form id="sign_out" action="/sign_out" method="post">
 81                    <button class="text-base text-gray-400 lowercase no-underline hover:underline mt-2">Sign out</button>
 82                </form>
 83            </div>
 84
 85            {{else}}
 86            <!-- Otherwise let user log in -->
 87            <a href=" /sign_in"
 88                class="text-base lowercase no-underline hover:underline mt-10 text-gray-400">
 89                Log in
 90            </a>
 91            {{/if}}
 92        </nav>
 93
 94        <div class="bg-black col-span-3">
 95            {{> @partial-block}}
 96        </div>
 97    </main>
 98    <script src="/static/prism.js"></script>
 99</body>
100
101</html>