Update landing page

openworkers · Jun 22, 2023 · e3cb314 · e3cb314
1 parent a900468
commit e3cb314
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 81 deletions.
diff --git a/docs/examples/webrtc-chat.md b/docs/examples/webrtc-chat.md
@@ -0,0 +1,5 @@
+# Writing a WebRTC chat
+
+This guide will show you how to write a WebRTC chat using [WebRTC for the Curious](https://webrtcforthecurious.com/).
+
+## Introduction
diff --git a/docs/index.md b/docs/index.md
@@ -10,9 +10,9 @@ OpenWorkers is a serverless runtime environment that allows you to run your code
 
 ## Getting started
 
-To get started, you need to create an account. You can do this by clicking the "Login" button in the top right corner of the page.
+To get started, you need to create an account. You can do this by clicking the "Sign in" button in the top right corner of the page.
 
-You will then be redirected to the login page. Login with your GitHub account.
+You will then be redirected to the sign in page. Sign in with your GitHub account.
 
 After logging in, you will be redirected to the dashboard. Here you can see all your workers and create new ones.
 

diff --git a/src/app/app.server.module.ts b/src/app/app.server.module.ts
@@ -15,9 +15,6 @@ import { resolve } from 'path';
       useValue: {
         resolveMarkdown(url: string) {
           const path = resolve(url.replace('/static/', ''));
-
-          console.log('Resolving markdown', path);
-
           return from(
             new Promise<string>((resolve) => {
               readFile(path, { encoding: 'utf8' }, (err, data) => resolve(err ? err.code ?? '' : data));

diff --git a/src/app/main.component.html b/src/app/main.component.html
@@ -1,4 +1,4 @@
-<nav class="w-full fixed bg-white" [ngClass]="(isMainPage$ | async) ? '' : 'border-b shadow-sm'">
+<nav class="w-full bg-white px-4" [ngClass]="(isMainPage$ | async) ? '' : 'fixed border-b shadow-sm'">
   <div class="container max-w-8xl h-16 justify-between items-center">
     <div class="flex gap-2 flex-1">
       <a routerLink="/">
@@ -7,15 +7,15 @@
       </a>
     </div>
 
-    <div class="flex gap-2 font-semibold">
+    <div class="flex gap-8 font-semibold">
       <a class="link" routerLink="/docs" routerLinkActive="active"> Docs </a>
-      <a class="link" [href]="loginUrl" target="_blank">Login</a>
+      <a class="link" [href]="loginUrl" target="_blank">Sign in</a>
     </div>
   </div>
 </nav>
 
 <router-outlet></router-outlet>
 
-<div class="text-slate-500 fixed bottom-0 right-2 p-2">
+<div class="text-slate-500 right-2 p-2">
   <a class="hover:text-blue-500" [href]="projectUrl + buildId" target="_blank">build {{ buildId.slice(0, 7) }}</a>
 </div>
diff --git a/src/app/pages/docs/docs.page.ts b/src/app/pages/docs/docs.page.ts
@@ -123,6 +123,6 @@ export default class DocsPage {
       map((url) => flattenConfig(config).find(({ path, ghSource }) => (path ?? ghSource ?? '').includes(url)) ?? null)
     );
 
-    this.ghSource$ = config$.pipe(map((config) => config?.ghSource ?? null));
+    this.ghSource$ = config$.pipe(map((config) => (console.log({ config }), config?.ghSource ?? null)));
   }
 }
diff --git a/src/app/pages/main/main.page.html b/src/app/pages/main/main.page.html
@@ -1,60 +1,47 @@
-<div class="flex flex-col min-h-screen" style="font-family: Roboto, sans-serif">
-  <div class="h-[100vh] flex flex-col justify-around">
-    <div class="text-center max-w-xl mx-auto">
-      <div class="bg-white shadow-[0_0_8px_10px_white] mt-64">
-        <h1 class="text-6xl text-slate-800 mb-4 font-bold">Deploy&nbsp;<span class="text-blue-500">instantly</span></h1>
-        <h2 class="text-3xl text-slate-600">
-          OpenWorkers is a powerful javascript runtime to seamlessly deploy your applications on the edge
-        </h2>
-      </div>
-
-      <a [href]="loginUrl" target="_blank" class="btn btn-blue text-xl py-2 px-4 rounded max-w-xs my-32">
-        Get Started
-      </a>
-    </div>
-  </div>
-
+<div class="min-h-screen" style="font-family: Roboto, sans-serif">
   <!-- CODE -->
-  <div class="container max-w-7xl my-12 justify-between gap-8 flex-col lg:flex-row">
-    <div class="flex-1 max-w-xl">
-      <div>
-        <div class="uppercase font-bold text-slate-400 mb-4 text-2xl">Developer friendly</div>
-        <h2 class="text-2xl text-slate-800 mb-4 font-bold">Easy to use</h2>
-        <p class="text-lg text-slate-600">
-          OpenWorkers is a javascript runtime that allows you to deploy your applications instantly.
-        </p>
-
-        <br />
+  <div class="container flex-col my-24 max-w-7xl">
+    <div class="flex justify-between gap-8 flex-col lg:flex-row px-8 w-full">
+      <div class="flex-1 max-w-xl mx-auto">
+        <div>
+          <h1 class="text-4xl text-slate-800 mb-4 font-bold">
+            Deploy&nbsp;<span class="text-blue-500">instantly</span>
+          </h1>
+
+          <div class="my-12 flex">
+            <ul class="list-checkmark">
+              <li>Schedule jobs and build powerful flows</li>
+              <li>Built-in monitoring</li>
+              <li>Scale with ease</li>
+              <li>Open source ecosystem</li>
+              <li>Automate your deployments</li>
+              <li>Easily bind your domains to workers</li>
+            </ul>
+          </div>
+        </div>
+      </div>
 
-        <h2 class="text-2xl text-slate-800 mb-4 font-bold">Open Source project</h2>
-        <p class="text-lg text-slate-600">
-          Don't let your app rely on a black box. OpenWorkers is open source and allows you to deploy your code
-          anywhere: in-house for full control, or at the edge for optimal performance.
-        </p>
-        <div class="my-2">
-          <a href="https://github.com/openworkers-org" target="_blank" class="flex items-center underline w-fit">
-            <img src="/assets/github.svg" alt="github" class="h-6 mr-2" /> See on Github
+      <div class="flex-1 max-w-xl mx-auto">
+        <console [content]="content" title="hello.ts">
+          <a
+            role="footer"
+            routerLink="/docs/examples/poll"
+            class="flex items-center justify-center h-12 hover:bg-slate-50 hover:text-slate-800"
+          >
+            Check out more examples
           </a>
-        </div>
+        </console>
       </div>
     </div>
 
-    <div class="flex-1 max-w-fit">
-      <console [content]="content" title="hello.ts">
-        <a
-          role="footer"
-          routerLink="/docs/examples/poll"
-          class="flex items-center justify-center h-12 hover:bg-slate-50 hover:text-slate-800"
-        >
-          Check out more examples
-        </a>
-      </console>
+    <div class="mx-auto">
+      <a [href]="loginUrl" target="_blank" class="btn btn-blue text-xl px-6 py-4 rounded mt-16"> Get Started </a>
     </div>
   </div>
 
   <!-- DEPLOY -->
-  <div class="container max-w-7xl my-12">
-    <div class="w-full">
+  <div class="container my-12 max-w-7xl" *ngIf="false">
+    <div class="w-full px-8">
       <div class="uppercase font-bold text-slate-400 mb-4 text-2xl">NO MORE DEVOPS</div>
       <div class="flex gap-8 w-full">
         <div class="flex-1">
@@ -67,29 +54,14 @@ <h2 class="text-2xl text-slate-800 mb-4 font-bold">Easy to deploy</h2>
           <h2 class="text-2xl text-slate-800 mb-4 font-bold">Github integration</h2>
           <div>Automatically deploy your code on every push</div>
         </div>
-        <div class="flex-1 flex justify-between">
-          <img class="h-24 w-24" src="https://arq.pw/public/github-mark.svg" alt="Github logo" />
-
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="h-24 w-24"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
-          </svg>
-
-          <img class="h-24 w-24" src="https://arq.pw/public/icon-black.svg" alt="OpenWorkers logo" />
-        </div>
+        <div class="flex-1 flex justify-between"></div>
       </div>
     </div>
   </div>
 
   <!-- FUTURE -->
-  <div class="container max-w-7xl my-12">
-    <div class="w-full">
+  <div class="container my-12 max-w-7xl" *ngIf="false">
+    <div class="w-full px-8">
       <div class="uppercase font-bold text-slate-400 mb-4 text-2xl">future-proof</div>
       <div class="flex gap-8">
         <div class="flex-1">

diff --git a/src/app/routing.module.ts b/src/app/routing.module.ts
@@ -18,7 +18,7 @@ function hydrateMarkdownMeta(meta: IMarkdownMeta[], parentPath: string, ghSource
     name,
     path: `${parentPath}/${path === 'index' ? '' : path}`,
     ghSource:
-      ghSource && (meta.external ? meta.ghSource : `${ghSource}/${parentPath}/${path}.md`)?.replace(/\/\//g, '/'),
+      ghSource && (meta.external ? meta.ghSource : `${ghSource}/${parentPath}/${path}.md`)?.replace(/!:\/\//g, '/'),
     children: children && hydrateMarkdownMeta(children, `${parentPath}/${path}`, ghSource)
   }));
 }
@@ -68,7 +68,11 @@ const routes: Routes = [
     path: '',
     loadComponent: () => import('./pages/main/main.page')
   },
-  ...createRoutes('docs', docsUrl, docsConfig, 'https://github.com/openworkers-org/openworkers-website/tree/master')
+  ...createRoutes('docs', docsUrl, docsConfig, 'https://github.com/openworkers-org/openworkers-website/tree/master'),
+  {
+    path: '**',
+    redirectTo: '/'
+  }
 ];
 
 @NgModule({

diff --git a/src/app/services/markdown.service.ts b/src/app/services/markdown.service.ts
@@ -20,7 +20,6 @@ export class MarkdownService {
   }
 
   public resolveMarkdown(url: string): Observable<string> {
-    console.log('Resolving markdown', url);
     return this.getMarkdown(url);
   }
 }
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
@@ -1,3 +1,3 @@
-export const loginUrl = 'https://dash.openworkers.com/login';
+export const loginUrl = 'https://dash.openworkers.com/sign-in';
 export const docsUrl = '/static/docs';
 export const buildId = '<BUILD_ID>'; // This is replaced by the build script.
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
@@ -1,3 +1,3 @@
-export const loginUrl = 'https://dash.dev.localhost/login';
+export const loginUrl = 'https://dash.dev.localhost/sign-in';
 export const docsUrl = '/static/docs';
 export const buildId = 'dev';
diff --git a/src/styles.css b/src/styles.css
@@ -159,7 +159,6 @@
 
   .btn {
     @apply inline-flex items-center justify-center;
-    @apply px-4 py-2;
     @apply rounded-md;
     @apply transition-colors duration-150;
     @apply ease-in-out;
@@ -168,4 +167,17 @@
   .btn-blue {
     @apply bg-blue-500 text-white;
   }
+
+  ul.list-checkmark li {
+    @apply flex items-center p-1;
+  }
+
+  ul.list-checkmark li::before {
+    @apply bg-green-600/10 text-green-600 h-6 w-6 rounded-full flex items-center justify-center mr-2;
+    content: ' ';
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCA2MCI+PHBhdGggc3Ryb2tlPSIjMTZhMzRhIiBzdHJva2Utd2lkdGg9IjEwIiBmaWxsPSJub25lIiBkPSJNOCAzMCBMMjMgNDUgNTMgMTUiLz48L3N2Zz4=');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 50%;
+  }
 }