add additional pages and set base styles

This commit is contained in:
Nate 2021-09-15 18:28:38 -04:00
parent 51f0250466
commit fc7dc73f57
16 changed files with 187 additions and 283 deletions

View file

@ -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())
}

15
server/src/community.rs Normal file
View file

@ -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())
}

View file

@ -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);

15
server/src/releases.rs Normal file
View file

@ -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())
}

15
server/src/story.rs Normal file
View file

@ -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())
}

15
server/src/tech.rs Normal file
View file

@ -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())
}

15
server/src/updates.rs Normal file
View file

@ -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())
}

View file

@ -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');
@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;
}
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Spectral:ital,wght@0,200;0,300;1,800&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
@responsive {
.bg-dotgrid-sm {
background:
linear-gradient(90deg, theme('colors.gray.50') 38px, transparent 1%) center,
linear-gradient(theme('colors.gray.50') 38px, transparent 1%) center,
theme('colors.gray.600');
background-size: 40px 40px;
}
.bg-dotgrid-md {
background:
linear-gradient(90deg, theme('colors.gray.50') 58px, transparent 1%) center,
linear-gradient(theme('colors.gray.50') 58px, transparent 1%) center,
theme('colors.gray.600');
background-size: 60px 60px;
}
.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;
}
@layer base {
html {
font-size: 125%;
text-rendering: geometricPrecision;
}
h1 {
@apply text-4xl;
@apply tracking-tighter;
}
h2 {
@apply text-3xl;
@apply tracking-tighter;
}
h3 {
@apply text-2xl;
@apply tracking-tighter;
}
}

View file

@ -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 worlds 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,
hes
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}}

View file

@ -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}}

View file

@ -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="prose prose-xl md:prose-2xl text-gray-50 prose-gray-50 w-full lg:w-1/2">
<h1>Meet Zed, a lightning fast code editor written natively in Rust.</h1>
<p>
Level up your development process with
<ul>
<li>a lightning fast code editor</li>
<li>real time collaboration on any work tree</li>
<li>powerful code annotation tools</li>
<li>the ability to rewind time to any point</li>
</ul>
</p>
<p>Early access to Zed will open up mid-2022 for small teams and individuals. Be the first in line.</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 class="container mx-auto max-w-screen-md p-10 pt-20">
<h1 class="text-white text-4xl font-extralight mb-10">Meet Zed&mdash;A lightning fast code editor written natively in Rust.</h1>
<p class="text-xl leading-7">
Level up your development process with:
<ul class="mt-2 ml-5 list-disc text-xl leading-7">
<li>a lightning fast code editor</li>
<li>real time collaboration on any work tree</li>
<li>powerful code annotation tools</li>
<li>the ability to rewind time to any point</li>
</ul>
</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 class="text-xl mt-10 leading-7">Read our story.</p>
</div>
{{/layout}}

View file

@ -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">
<main class="flex text-gray-50 w-full h-screen m-px border border-white">
<nav class="flex-initial flex flex-col w-1/5 p-10 border-r border-white"">
<body class="box-border font-body bg-black flex w-full h-full overflow-hidden p-10">
<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">
<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">
About
<a href="/story" class="text-xl lowercase underline hover:no-underline mt-2">
Our Story
</a>
<a href="/team" class="text-xl lowercase underline hover:no-underline mt-2">
Tech
<a href="/tech" class="text-xl lowercase underline hover:no-underline mt-2">
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>

View file

@ -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}}
<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 worlds 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,
hes
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>
{{/if}}
</div>
{{/layout}}

View file

@ -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}}

View file

@ -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}}

View file

@ -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}}