add additional pages and set base styles

server/src/about_app.rs

@@ -1,15 +0,0 @@
-use crate::{AppState, Request, RequestExt};
-use std::sync::Arc;
-use tide::http::mime;
-
-pub fn add_routes(app: &mut tide::Server<Arc<AppState>>) {
-    app.at("/app").get(get_about_app);
-}
-
-async fn get_about_app(mut request: Request) -> tide::Result {
-    let data = request.layout_data().await?;
-    Ok(tide::Response::builder(200)
-        .body(request.state().render_template("about_app.hbs", &data)?)
-        .content_type(mime::HTML)
-        .build())
-}

server/src/community.rs

@@ -0,0 +1,15 @@
+use crate::{AppState, Request, RequestExt};
+use std::sync::Arc;
+use tide::http::mime;
+
+pub fn add_routes(community: &mut tide::Server<Arc<AppState>>) {
+    community.at("/community").get(get_community);
+}
+
+async fn get_community(mut request: Request) -> tide::Result {
+    let data = request.layout_data().await?;
+    Ok(tide::Response::builder(200)
+        .body(request.state().render_template("community.hbs", &data)?)
+        .content_type(mime::HTML)
+        .build())
+}

server/src/main.rs

@@ -9,7 +9,11 @@ mod github;
 mod home;
 mod rpc;
 mod team;
-mod about_app;
+mod story;
+mod tech;
+mod updates;
+mod releases;
+mod community;
 
 use self::errors::TideResultExt as _;
 use anyhow::Result;
@@ -174,7 +178,11 @@ pub async fn run_server(
     web.with(errors::Middleware);
     home::add_routes(&mut web);
     team::add_routes(&mut web);
-    about_app::add_routes(&mut web);
+    story::add_routes(&mut web);
+    releases::add_routes(&mut web);
+    updates::add_routes(&mut web);
+    community::add_routes(&mut web);
+    tech::add_routes(&mut web);
     admin::add_routes(&mut web);
     auth::add_routes(&mut web);
     assets::add_routes(&mut web);

server/src/releases.rs

@@ -0,0 +1,15 @@
+use crate::{AppState, Request, RequestExt};
+use std::sync::Arc;
+use tide::http::mime;
+
+pub fn add_routes(releases: &mut tide::Server<Arc<AppState>>) {
+    releases.at("/releases").get(get_releases);
+}
+
+async fn get_releases(mut request: Request) -> tide::Result {
+    let data = request.layout_data().await?;
+    Ok(tide::Response::builder(200)
+        .body(request.state().render_template("releases.hbs", &data)?)
+        .content_type(mime::HTML)
+        .build())
+}

server/src/story.rs

@@ -0,0 +1,15 @@
+use crate::{AppState, Request, RequestExt};
+use std::sync::Arc;
+use tide::http::mime;
+
+pub fn add_routes(story: &mut tide::Server<Arc<AppState>>) {
+    story.at("/story").get(get_story);
+}
+
+async fn get_story(mut request: Request) -> tide::Result {
+    let data = request.layout_data().await?;
+    Ok(tide::Response::builder(200)
+        .body(request.state().render_template("story.hbs", &data)?)
+        .content_type(mime::HTML)
+        .build())
+}

server/src/tech.rs

@@ -0,0 +1,15 @@
+use crate::{AppState, Request, RequestExt};
+use std::sync::Arc;
+use tide::http::mime;
+
+pub fn add_routes(tech: &mut tide::Server<Arc<AppState>>) {
+    tech.at("/tech").get(get_tech);
+}
+
+async fn get_tech(mut request: Request) -> tide::Result {
+    let data = request.layout_data().await?;
+    Ok(tide::Response::builder(200)
+        .body(request.state().render_template("tech.hbs", &data)?)
+        .content_type(mime::HTML)
+        .build())
+}

server/src/updates.rs

@@ -0,0 +1,15 @@
+use crate::{AppState, Request, RequestExt};
+use std::sync::Arc;
+use tide::http::mime;
+
+pub fn add_routes(updates: &mut tide::Server<Arc<AppState>>) {
+    updates.at("/updates").get(get_updates);
+}
+
+async fn get_updates(mut request: Request) -> tide::Result {
+    let data = request.layout_data().await?;
+    Ok(tide::Response::builder(200)
+        .body(request.state().render_template("updates.hbs", &data)?)
+        .content_type(mime::HTML)
+        .build())
+}

server/styles.css

@@ -1,108 +1,26 @@
 /* This file is compiled to /assets/styles/tailwind.css via script/tailwind */
 
-@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Spectral:ital,wght@0,200;0,400;1,800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Spectral:ital,wght@0,200;0,300;1,800&display=swap');
-
-@font-face {
-    font-family: 'Visby CF';
-    src:
-        url('/static/fonts/VisbyCF-Thin.woff2') format('woff2'),
-        url('/static/fonts/VisbyCF-Thin.woff') format('woff');
-    font-weight: 100;
-    font-style: normal;
-}
-
-
-@font-face {
-    font-family: 'Visby CF';
-    src:
-        url('/static/fonts/VisbyCF-Light.woff2') format('woff2'),
-        url('/static/fonts/VisbyCF-Light.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-}
- 
-@font-face {
-    font-family: 'Visby CF';
-    src:
-        url('/static/fonts/VisbyCF-Regular.woff2') format('woff2'),
-        url('/static/fonts/VisbyCF-Regular.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Visby CF';
-    src:
-        url('/static/fonts/VisbyCF-Medium.woff2') format('woff2'),
-        url('/static/fonts/VisbyCF-Medium.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Visby CF';
-    src:
-        url('/static/fonts/VisbyCF-DemiBold.woff2') format('woff2'),
-        url('/static/fonts/VisbyCF-DemiBold.woff') format('woff');
-    font-weight: 600;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Visby CF';
-    src:
-        url('/static/fonts/VisbyCF-Bold.woff2') format('woff2'),
-        url('/static/fonts/VisbyCF-Bold.woff') format('woff');
-    font-weight: 700;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Visby CF';
-    src:
-        url('/static/fonts/VisbyCF-ExtraBold.woff2') format('woff2'),
-        url('/static/fonts/VisbyCF-ExtraBold.woff') format('woff');
-    font-weight: 800;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Visby CF';
-    src:
-        url('/static/fonts/VisbyCF-Heavy.woff2') format('woff2'),
-        url('/static/fonts/VisbyCF-Heavy.woff') format('woff');
-    font-weight: 900;
-    font-style: normal;
-}
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@layer utilities {
+@layer base {
-    @responsive {
+    html {
-        .bg-dotgrid-sm {
+        font-size: 125%;
-            background:
+        text-rendering: geometricPrecision;
-                linear-gradient(90deg, theme('colors.gray.50') 38px, transparent 1%) center,
+    }
-                linear-gradient(theme('colors.gray.50') 38px, transparent 1%) center,
+    h1 {
-                theme('colors.gray.600');
+        @apply text-4xl;
-            background-size: 40px 40px;
+        @apply tracking-tighter;
-        }
+    }
-
+    h2 {
-        .bg-dotgrid-md {
+        @apply text-3xl;
-            background:
+        @apply tracking-tighter;
-                linear-gradient(90deg, theme('colors.gray.50') 58px, transparent 1%) center,
+    }
-                linear-gradient(theme('colors.gray.50') 58px, transparent 1%) center,
+    h3 {
-                theme('colors.gray.600');
+        @apply text-2xl;
-            background-size: 60px 60px;
+        @apply tracking-tighter;
-        }
-
-        .bg-dotgrid-lg {
-            background:
-                linear-gradient(90deg, theme('colors.gray.50') 88px, transparent 1%) center,
-                linear-gradient(theme('colors.gray.50') 88px, transparent 1%) center,
-                theme('colors.gray.600');
-            background-size: 90px 90px;
-        }       
     }
 }

server/templates/about_app.hbs

@@ -1,63 +0,0 @@
-{{#> layout }}
-
-<div class="bg-white">
-    <h1>TEST TEST</h1>
-    <div class="container mx-auto py-12 px-8 md:px-12 lg:flex lg:flex-row">
-        <div class="mb-16 lg:mb-0 lg:flex-1 lg:mr-8 xl:mr-16">
-            <img src="https://github.com/nathansobo.png?size=200" class="mx-auto mb-4 h-28 rounded-full">
-            <div>
-                <a href="https://github.com/nathansobo"
-                    class="block text-center mb-4 font-display text-2xl font-bold whitespace-nowrap hover:underline">
-                    TEST TEST TEST
-                </a>
-                <div class="prose md:prose-lg lg:prose xl:prose-lg">
-                    Nathan joined GitHub in late 2011 to build the <a href="https://atom.io">Atom text editor</a>, and
-                    he led the Atom team until 2018. He also co-led development of <a
-                        href="https://teletype.atom.io">Teletype for Atom</a>, pioneering one of the first production
-                    uses of conflict-free replicated data types for collaborative text editing. He's been dreaming about
-                    building the world’s best text editor since he graduated from college, and is excited to finally
-                    have
-                    the knowledge, tools, and resources to achieve this vision.
-                </div>
-            </div>
-        </div>
-        <div class="mb-16 lg:mb-0 lg:flex-1 lg:mr-8 xl:mr-16">
-            <img src="https://github.com/as-cii.png?size=200" class="mx-auto mb-4 h-28 rounded-full">
-            <div>
-                <a href="https://github.com/as-cii"
-                    class="block text-center mb-4 font-display text-2xl font-bold whitespace-nowrap hover:underline">
-                    ANTONIO SCANDURRA
-                </a>
-                <div class="prose md:prose-lg lg:prose xl:prose-lg">
-                    Antonio joined the Atom team in 2014 while still in university after his outstanding open source
-                    contributions caught the attention of the team. He later joined Nathan in architecting <a
-                        href="https://teletype.atom.io">Teletype for
-                        Atom</a> and researching the foundations of what has turned into Zed. For the last two years,
-                    he’s
-                    become an expert in distributed systems and conflict-free replicated data types through the
-                    development of a real-time, distributed, conflict-free database implemented in Rust for <a
-                        href="https://ditto.live">Ditto</a>.
-                </div>
-            </div>
-        </div>
-        <div class="mb-16 lg:mb-0 lg:flex-1">
-            <img src="https://github.com/maxbrunsfeld.png?size=200" class="mx-auto mb-4 h-28 rounded-full">
-            <div>
-                <a href="https://github.com/maxbrunsfeld"
-                    class="block text-center mb-4 font-display text-2xl font-bold whitespace-nowrap hover:underline">
-                    MAX BRUNSFELD
-                </a>
-                <div class="prose md:prose-lg lg:prose xl:prose-lg">
-                    Max joined the Atom team in 2013 after working at Pivotal Labs. While driving Atom towards its 1.0
-                    launch during the day, Max spent nights and weekends building <a
-                        href="https://tree-sitter.github.io">Tree-sitter</a>, a blazing-fast and
-                    expressive incremental parsing framework that currently powers all code analysis at GitHub. Before
-                    leaving to start Zed, Max helped GitHub's semantic analysis team integrate Tree-sitter to support
-                    syntax highlighting and code navigation on <a href="https://github.com">github.com</a>.
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-{{/layout}}

server/templates/community.hbs

@@ -0,0 +1,7 @@
+{{#> layout }}
+
+<div class="container mx-auto max-w-screen-md p-10 pt-20">
+    <h1 class="text-white text-4xl font-extralight mb-10">Community</h1>
+</div>
+
+{{/layout}}

server/templates/home.hbs

@@ -1,33 +1,18 @@
 {{#> layout }}
 
-<div class="container mx-auto py-24 lg:py-32 px-8 md:px-12 lg:flex lg:flex-row lg:items-center">
+<div class="container mx-auto max-w-screen-md p-10 pt-20">
-    <div class="prose prose-xl md:prose-2xl text-gray-50 prose-gray-50 w-full lg:w-1/2">
+    <h1 class="text-white text-4xl font-extralight mb-10">Meet Zed&mdash;A lightning fast code editor written natively in Rust.</h1>
-        <h1>Meet Zed, a lightning fast code editor written natively in Rust.</h1>
+    <p class="text-xl leading-7">
-        <p>
+        Level up your development process with:
-            Level up your development process with
+        <ul class="mt-2 ml-5 list-disc text-xl leading-7">
-            <ul>
+            <li>a lightning fast code editor</li>
-                <li>a lightning fast code editor</li>
+            <li>real time collaboration on any work tree</li>
-                <li>real time collaboration on any work tree</li>
+            <li>powerful code annotation tools</li>
-                <li>powerful code annotation tools</li>
+            <li>the ability to rewind time to any point</li>
-                <li>the ability to rewind time to any point</li>
+        </ul>
-            </ul>
+    </p>
-        </p>
+    <p class="text-xl mt-10 leading-8">Early access to Zed will open up mid-2022 for small teams and individuals. Be the first in line.</p>
-        <p>Early access to Zed will open up mid-2022 for small teams and individuals. Be the first in line.</p>
+    <p class="text-xl mt-10 leading-7">Read our story.</p>
-        <p>Read our story.</p>
-    </div>
-
-    <form class="my-16 lg:my-0 lg:ml-16 flex-1 text-xl md:text-2xl" action="/signups" method="post">
-        <input name="github_login" placeholder="@github_handle"
-            class="w-3/5 xl:w-1/2 p-3 mb-8 block bg-gray-50 placeholder-gray-500">
-        <input name="email_address" placeholder="email@addre.ss"
-            class="w-4/5 xl:w-3/4 p-3 my-8 block bg-gray-50 placeholder-gray-500">
-        <textarea name="about" class="block w-full xl:w-full h-48 p-3 my-8 bg-gray-50 placeholder-gray-500 my-6"
-            placeholder="Please tell us a bit about you and why you're interested in Zed. What code editor do you use today? What do you love and hate about it?"></textarea>
-        <button
-            class="p-4 rounded-md text-gray-50 bg-gray-500 inline-block cursor-pointer hover:bg-gray-400 font-display">
-            ENGAGE
-        </button>
-    </form>
 </div>
 
 {{/layout}}

server/templates/partials/layout.hbs

@@ -1,4 +1,4 @@
-<html class="w-full">
+<html>
 
 <head>
     <link rel="icon" href="/static/images/favicon.png">
@@ -22,9 +22,9 @@
     </script>
 </head>
 
-<body class="box-border font-body bg-black w-full">
+<body class="box-border font-body bg-black flex w-full h-full overflow-hidden p-10">
-    <main class="flex text-gray-50 w-full h-screen m-px border border-white">
+    <main class="flex-1 flex text-gray-50 border border-white">
-        <nav class="flex-initial flex flex-col w-1/5 p-10 border-r border-white"">
+        <nav class="flex-initial flex flex-col w-1/5 p-10 border-r border-white">
             <a href="/" class="font-display">
                 <svg width="57" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <mask id="path-2-inside-1" fill="white">
@@ -48,16 +48,16 @@
                 </svg>
             </a>
             <div class="font-mono flex flex-col mt-10">
-                <a href="/app" class="text-xl lowercase underline hover:no-underline mt-2">
+                <a href="/story" class="text-xl lowercase underline hover:no-underline mt-2">
-                    About
+                    Our Story
                 </a>
-                <a href="/team" class="text-xl lowercase underline hover:no-underline mt-2">
+                <a href="/tech" class="text-xl lowercase underline hover:no-underline mt-2">
-                    Tech
+                    The Tech
                 </a>
                 <a href="/team" class="text-xl lowercase underline hover:no-underline mt-2">
                     Team
                 </a>
-                <a href="/team" class="text-xl lowercase underline hover:no-underline mt-2">
+                <a href="/community" class="text-xl lowercase underline hover:no-underline mt-2">
                     Community
                 </a>
             </div>
@@ -67,10 +67,10 @@
             {{#if current_user}}
             <div class="font-mono flex flex-col mt-10">
                 <p class="text-xs tracking-widest uppercase">Insider Zone</p>
-                <a href="/another" class="text-xl lowercase underline hover:no-underline mt-2">
+                <a href="/updates" class="text-xl lowercase underline hover:no-underline mt-2">
                     Updates
                 </a>
-                <a href="/another" class="text-xl lowercase underline hover:no-underline mt-2">
+                <a href="/releases" class="text-xl lowercase underline hover:no-underline mt-2">
                     Releases
                 </a>
             </div>
@@ -104,7 +104,7 @@
             {{/if}}
         </nav>
 
-        <div class="flex-1">
+        <div class="flex-1 max-w-screen-xl border-r border-white">
             {{> @partial-block}}
         </div>
     </main>

server/templates/releases.hbs

@@ -1,7 +1,8 @@
 {{#> layout }}
-{{#if releases}}
 
-<div class="bg-white">
+<div class="container mx-auto max-w-screen-md p-10 pt-20">
+    <h1 class="text-white text-4xl font-extralight mb-10">Releases</h1>
+    {{#if releases}}
     <div class="container mx-auto py-12 px-8 md:px-12">
         {{#each releases}}
         <div class="md:flex md:flex-row mb-32 md:mb-12">
@@ -21,70 +22,11 @@
         </div>
         {{/each}}
     </div>
-</div>
+    {{else}}
 
-{{else}}
+    <p>You can't access this without <a href=" /sign_in">logging in</a>.</p>
 
-<p>You can't access this without <a href=" /sign_in">logging in</a>.</p>
+    {{/if}}
-
-{{/if}}
-<div class="bg-white">
-    <div class="container mx-auto py-12 px-8 md:px-12 lg:flex lg:flex-row">
-        <div class="mb-16 lg:mb-0 lg:flex-1 lg:mr-8 xl:mr-16">
-            <img src="https://github.com/nathansobo.png?size=200" class="mx-auto mb-4 h-28 rounded-full">
-            <div>
-                <a href="https://github.com/nathansobo"
-                    class="block text-center mb-4 font-display text-2xl font-bold whitespace-nowrap hover:underline">
-                    NATHAN SOBO
-                </a>
-                <div class="prose md:prose-lg lg:prose xl:prose-lg">
-                    Nathan joined GitHub in late 2011 to build the <a href="https://atom.io">Atom text editor</a>, and
-                    he led the Atom team until 2018. He also co-led development of <a
-                        href="https://teletype.atom.io">Teletype for Atom</a>, pioneering one of the first production
-                    uses of conflict-free replicated data types for collaborative text editing. He's been dreaming about
-                    building the world’s best text editor since he graduated from college, and is excited to finally
-                    have
-                    the knowledge, tools, and resources to achieve this vision.
-                </div>
-            </div>
-        </div>
-        <div class="mb-16 lg:mb-0 lg:flex-1 lg:mr-8 xl:mr-16">
-            <img src="https://github.com/as-cii.png?size=200" class="mx-auto mb-4 h-28 rounded-full">
-            <div>
-                <a href="https://github.com/as-cii"
-                    class="block text-center mb-4 font-display text-2xl font-bold whitespace-nowrap hover:underline">
-                    ANTONIO SCANDURRA
-                </a>
-                <div class="prose md:prose-lg lg:prose xl:prose-lg">
-                    Antonio joined the Atom team in 2014 while still in university after his outstanding open source
-                    contributions caught the attention of the team. He later joined Nathan in architecting <a
-                        href="https://teletype.atom.io">Teletype for
-                        Atom</a> and researching the foundations of what has turned into Zed. For the last two years,
-                    he’s
-                    become an expert in distributed systems and conflict-free replicated data types through the
-                    development of a real-time, distributed, conflict-free database implemented in Rust for <a
-                        href="https://ditto.live">Ditto</a>.
-                </div>
-            </div>
-        </div>
-        <div class="mb-16 lg:mb-0 lg:flex-1">
-            <img src="https://github.com/maxbrunsfeld.png?size=200" class="mx-auto mb-4 h-28 rounded-full">
-            <div>
-                <a href="https://github.com/maxbrunsfeld"
-                    class="block text-center mb-4 font-display text-2xl font-bold whitespace-nowrap hover:underline">
-                    MAX BRUNSFELD
-                </a>
-                <div class="prose md:prose-lg lg:prose xl:prose-lg">
-                    Max joined the Atom team in 2013 after working at Pivotal Labs. While driving Atom towards its 1.0
-                    launch during the day, Max spent nights and weekends building <a
-                        href="https://tree-sitter.github.io">Tree-sitter</a>, a blazing-fast and
-                    expressive incremental parsing framework that currently powers all code analysis at GitHub. Before
-                    leaving to start Zed, Max helped GitHub's semantic analysis team integrate Tree-sitter to support
-                    syntax highlighting and code navigation on <a href="https://github.com">github.com</a>.
-                </div>
-            </div>
-        </div>
-    </div>
 </div>
 
 {{/layout}}

server/templates/story.hbs

@@ -0,0 +1,7 @@
+{{#> layout }}
+
+<div class="container mx-auto max-w-screen-md p-10 pt-20">
+    <h1 class="text-white text-4xl font-extralight mb-10">Our Story</h1>
+</div>
+
+{{/layout}}

server/templates/tech.hbs

@@ -0,0 +1,7 @@
+{{#> layout }}
+
+<div class="container mx-auto max-w-screen-md p-10 pt-20">
+    <h1 class="text-white text-4xl font-extralight mb-10">The Tech</h1>
+</div>
+
+{{/layout}}

server/templates/updates.hbs

@@ -0,0 +1,33 @@
+{{#> layout }}
+
+
+<div class="container mx-auto max-w-screen-md p-10 pt-20">
+    <h1 class="text-white text-4xl font-extralight mb-10">Updates</h1>
+    {{#if releases}}
+    <div class="container mx-auto py-12 px-8 md:px-12">
+        {{#each releases}}
+        <div class="md:flex md:flex-row mb-32 md:mb-12">
+            <div class="font-display mb-8 md:mb-0 md:text-right w-48">
+                <div class="text-2xl font-bold whitespace-nowrap">
+                    VERSION {{name}}
+                </div>
+                <a class="text-md underline text-yellow-600 hover:text-yellow-700"
+                    href="/releases/{{tag_name}}/{{assets.0.name}}">
+                    DOWNLOAD
+                </a>
+            </div>
+            <div
+                class="prose prose-lg xl:prose-xl border-t md:border-t-0 pt-8 md:border-l border-gray-400 md:ml-8 md:pl-8 md:pt-0 xl:ml-16 xl:pl-16 max-w-5xl font-body">
+                {{{body}}}
+            </div>
+        </div>
+        {{/each}}
+    </div>
+    {{else}}
+
+    <p>You can't access this without <a href=" /sign_in">logging in</a>.</p>
+
+    {{/if}}
+</div>
+
+{{/layout}}