chore(website): add rudimentary router an pages

atlasland · Jul 15, 2022 · 6c1da02 · 6c1da02
1 parent e228862
commit 6c1da02
Show file tree

Hide file tree

Showing 9 changed files with 249 additions and 85 deletions.
diff --git a/website/404.html b/website/404.html
@@ -0,0 +1,9 @@
+<!-- title: Page Not Found — Atlas -->
+<!-- meta_description:  -->
+<main class="prose prose-neutral dark:prose-invert flex flex-col items-start space-y-4 px-4 py-2 md:py-4 lg:px-8 lg:py-6">
+  <header>
+    <h1>Page not found</h1>
+  </header>
+
+  <p>We couldn't find the page you requested.</p>
+</main>
diff --git a/website/500.html b/website/500.html
@@ -0,0 +1,9 @@
+<!-- title: Internal Server Error — Atlas -->
+<!-- description:  -->
+<main class="prose prose-neutral dark:prose-invert flex flex-col items-start space-y-4 px-4 py-2 md:py-4 lg:px-8 lg:py-6">
+  <header>
+    <h1>Server Error</h1>
+  </header>
+
+  <p>Something went wrong in our side, we apologise. Please try again later.</p>
+</main>
diff --git a/website/changelog/index.html b/website/changelog/index.html
@@ -0,0 +1,9 @@
+<!-- title: Changelog — Atlas -->
+<!-- meta_description: The latest changelog information for the Atlas framework -->
+<main class="prose prose-neutral dark:prose-invert flex flex-col items-start space-y-4 px-4 py-2 md:py-4 lg:px-8 lg:py-6">
+  <header>
+    <h1>Changelog</h1>
+  </header>
+
+  <p><code>// TODO</code></p>
+</main>
diff --git a/website/community.html b/website/community.html
@@ -0,0 +1,9 @@
+<!-- title: Community — Atlas -->
+<!-- meta_description: The latest changelog information for the Atlas framework -->
+<main class="prose prose-neutral dark:prose-invert flex flex-col items-start space-y-4 px-4 py-2 md:py-4 lg:px-8 lg:py-6">
+  <header>
+    <h1>Community</h1>
+  </header>
+
+  <p><code>// TODO</code></p>
+</main>
diff --git a/website/guide.html b/website/guide.html
@@ -0,0 +1,9 @@
+<!-- title: Guide — Atlas -->
+<!-- meta_description: Learn how to use the Atlas framework and start delivering value in minutes! -->
+<main class="prose prose-neutral dark:prose-invert flex flex-col items-start space-y-4 px-4 py-2 md:py-4 lg:px-8 lg:py-6">
+  <header>
+    <h1>Guide</h1>
+  </header>
+
+  <p><code>// TODO</code></p>
+</main>
diff --git a/website/index.html b/website/index.html
@@ -1,67 +1,20 @@
-<!doctype html>
-<html lang="en" dir="ltr">
-<head>
-  <meta charset="utf-8">
-  <title>Atlas — The Web Application Framework for Deno</title>
-  <meta http-equiv="x-ua-compatible" content="ie=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-  <meta name="description" content="Atlas is a web application framework for Deno. It let's you focus on delivering value while taking care of everything else." />
-  <link rel="canonical" href="https://atlas.land" />
-  <!-- open graph -->
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://atlas.land" />
-  <meta property="og:title" content="Atlas — The Web Application Framework for Deno" />
-  <meta property="og:description" content="Atlas is a web application framework for Deno. It let's you focus on delivering value while taking care of everything else." />
-  <meta property="og:image" content="https://atlas.land/public/og-image.jpg" />
-  <!-- twitter -->
-  <meta property="twitter:card" content="summary_large_image" />
-  <meta property="twitter:url" content="https://atlas.land" />
-  <meta property="twitter:site" content="@atlasframework" />
-  <meta property="twitter:creator" content="@atlasframework" />
-  <meta property="twitter:title" content="Atlas — The Web Application Framework for Deno" />
-  <meta property="twitter:description" content="Atlas is a web application framework for Deno. It let's you focus on delivering value while taking care of everything else." />
-  <meta property="twitter:image" content="https://atlas.land/public/og-image.jpg" />
-  <!-- favicon -->
-  <link rel="apple-touch-icon" sizes="180x180" href="/public/img/favicon/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/public/img/favicon/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/public/img/favicon/favicon-16x16.png">
-  <link rel="manifest" href="/public/img/favicon/site.webmanifest">
-  <link rel="mask-icon" href="/public/img/favicon/safari-pinned-tab.svg" color="#ff2d20">
-  <link rel="shortcut icon" href="/public/img/favicon/favicon.ico">
-  <meta name="msapplication-TileColor" content="#ff2d20">
-  <meta name="msapplication-config" content="/public/img/favicon/browserconfig.xml">
-  <meta name="theme-color" content="#ffffff">
-</head>
-<body>
+<!-- title: Atlas — The Web Application Framework for Deno -->
+<!-- meta_description: Atlas is a web application framework for Deno. It let's you focus on delivering value while taking care of everything else. -->
+<main class="flex flex-col items-start space-y-4 px-4 py-2 md:py-4 lg:px-8 lg:py-6">
+  <h1 class="text-4xl tracking-tight font-extrabold dark:text-neutral-100 text-neutral-800 sm:text-5xl md:text-6xl" >Atlas</h1>
+  <span class="block xl:inline">The Web Application Framework for Deno 🦕</span>
+  <a href="/guide" class="flex rounded items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-orange-600 hover:bg-orange-700">Get Started</a>
+</main>
+
+<section id="about" class="prose prose-neutral dark:prose-invert flex flex-col items-start space-y-4 px-4 py-2 md:py-4 lg:px-8 lg:py-6">
   <header>
-    <h1>Atlas</h1>
-    <p>The Web Application Framework for Deno</p>
-    <p><a href="#guide">Get Started</a></p>
+    <h1>About</h1>
   </header>
 
-  <section id="guide">
-    <header>
-      <h1>Guide</h1>
-    </header>
-
-    <p><code>// TODO</code></p>
-  </section>
-
-  <section id="about">
-    <header>
-      <h1>About</h1>
-    </header>
-
-    <p>The Atlas framework was born out of the desire to have a batteries-included application framework to run on a modern runtime like Deno.</p>
-    <p>A force multiplier that allows engineers to focus on delivering value, while letting the framework do the heavy lifting support work.</p>
-    <p>Atlas' goal is to be for Deno what <a href="https://laravel.com">Laravel</a> is for PHP, or <a href="https://rubyonrails.org">Rails</a> is for Ruby.</p>
-
-    <h2>The name Atlas</h2>
-    <p>Atlas gets its name from <a href="https://en.wikipedia.org/wiki/Atlas_(mythology)">the Greek mythology Titan</a>. It comes from the Ancient Greek work <span title="Ancient Greek (to 1453)-language text"><span lang="grc">Ἄτλας</span></span>, roughly means "to uphold, support", which is a fitting descripton for a framework.</p>
-  </section>
+  <p>The Atlas framework was born out of the desire to have a batteries-included application framework to run on a modern runtime like <a href="https://deno.land">Deno</a>.</p>
+  <p>A force multiplier that allows engineers to focus on delivering value, while letting the framework do the heavy lifting support work.</p>
+  <p>Atlas' goal is to be for Deno what <a href="https://laravel.com">Laravel</a> is for PHP, or <a href="https://rubyonrails.org">Rails</a> is for Ruby.</p>
 
-  <footer>
-    Copyright &copy; 2021—2022 the Atlas authors.
-  </footer>
-</body>
-</html>
+  <h2>The name Atlas</h2>
+  <p>Atlas gets its name from <a href="https://en.wikipedia.org/wiki/Atlas_(mythology)">the Greek mythology Titan</a>. It comes from the Ancient Greek work <span title="Ancient Greek (to 1453)-language text"><span lang="grc">Ἄτλας</span></span>, roughly means "to uphold, support", which is a fitting descripton for a framework.</p>
+</section>
diff --git a/website/main.ts b/website/main.ts
@@ -1,44 +1,108 @@
 import { contentType, extname, serve } from "./deps.ts";
 
+// TODO: replace with log module
+const logger = console;
+
+// set cwd for deno deploy
 const cwd = Deno.cwd().includes("website")
   ? Deno.cwd()
   : `${Deno.cwd()}/website`;
 
 async function handler(request: Request): Promise<Response> {
-  const { pathname } = new URL(request.url);
+  const { pathname, search } = new URL(request.url);
 
   // infer the content-type from the file extension
   const extension = extname(pathname);
   const type = contentType(extension) ?? "text/html";
 
-  try {
-    let file = await Deno.readTextFile(`${cwd}/index.html`);
+  // response status
+  let status = 200;
+
+  // response headers
+  let headers: Record<string, string> = {
+    "content-type": type,
+  };
 
+  // response body
+  let body: string | null = null;
+
+  try {
     // static assets
     if (pathname.startsWith("/public/")) {
-      file = await Deno.readTextFile(`${cwd}/public${pathname}`);
-    }
-
-    console.info(200, `${request.method} ${pathname} (${type})`);
+      body = await Deno.readTextFile(`${cwd}/${pathname}`);
+      headers = {
+        ...headers,
+        // TODO: fingerprint assets for longer cache TTL + immutable
+        "cache-control": "public, max-age=900, stale-while-revalidate=900",
+      };
+    } // home
+    else if (["/", "/index.html"].includes(pathname)) {
+      body = await Deno.readTextFile(`${cwd}/index.html`);
+      headers = {
+        ...headers,
+        "cache-control": "public, max-age=900, stale-while-revalidate=900",
+      };
+    } // docs
+    else if (["/docs", "/documentation"].includes(pathname)) {
+      status = 307;
+      headers = {
+        ...headers,
+        "location": "https://doc.deno.land/https://deno.land/x/atlas",
+      };
+    } // other routes
+    else {
+      try {
+        body = await Deno.readTextFile(`${cwd}/${pathname}.html`);
+      } // fallback to `/[route]/index.html`
+      catch (_) {
+        body = await Deno.readTextFile(`${cwd}/${pathname}/index.html`);
+      }
 
-    return new Response(file, {
-      headers: {
-        "content-type": type,
-        // 15 minutes cache TTL
+      headers = {
+        ...headers,
         "cache-control": "public, max-age=900, stale-while-revalidate=900",
-      },
-    });
+      };
+    }
   } catch (error: unknown) {
-    console.info(404, `${request.method} ${pathname} (${type})`);
-    console.error((error as Error).message);
-
-    return new Response(null, {
-      status: 404,
-      headers: {
-        "content-type": type,
-      },
+    logger.error((error as Error).message);
+
+    // 404
+    if ((error as Error).name === "NotFound") {
+      status = 404;
+      body = await Deno.readTextFile(`${cwd}/404.html`);
+    } // 500
+    else {
+      status = 500;
+      body = await Deno.readTextFile(`${cwd}/500.html`);
+    }
+  } finally {
+    logger.info(`${status} ${request.method} ${pathname}${search}`);
+
+    const template = await Deno.readTextFile(`${cwd}/template.html`);
+
+    // parse meta data
+    const title = body?.match(/<!-- title: (.*) -->/);
+    const meta_description = body?.match(/<!-- meta_description: (.*) -->/);
+
+    // inject meta data into template
+    const payload = template
+      .replaceAll("{{ title }}", title?.at(1) ?? "{{ title }}")
+      .replaceAll(
+        "{{ meta_description }}",
+        meta_description?.at(1) ?? "{{ meta_description }}",
+      )
+      .replaceAll("{{ content }}", body ?? "");
+
+    // deno-lint-ignore no-unsafe-finally
+    return new Response(payload, {
+      status,
+      headers,
     });
   }
 }
 
-await serve(handler);
+await serve(handler, {
+  onListen: ({ hostname, port }) => {
+    logger.info(`Listening on http://${hostname}:${port}`);
+  },
+});
diff --git a/website/public/browserconfig.xml b/website/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/public/img/favicon/mstile-150x150.png"/>
+            <TileColor>#ff2d20</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/website/template.html b/website/template.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>{{ title }}</title>
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <meta name="description" content="{{ meta_description }}" />
+  <link rel="canonical" href="https://atlas.land" />
+  <!-- open graph -->
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://atlas.land" />
+  <meta property="og:title" content="{{ title }}" />
+  <meta property="og:description" content="{{ meta_description }}" />
+  <meta property="og:image" content="https://atlas.land/public/og-image.jpg" />
+  <!-- twitter -->
+  <meta property="twitter:card" content="summary_large_image" />
+  <meta property="twitter:url" content="https://atlas.land" />
+  <meta property="twitter:site" content="@atlasframework" />
+  <meta property="twitter:creator" content="@atlasframework" />
+  <meta property="twitter:title" content="{{ title }}" />
+  <meta property="twitter:description" content="{{ meta_description }}" />
+  <meta property="twitter:image" content="https://atlas.land/public/og-image.jpg" />
+  <!-- favicon -->
+  <link rel="apple-touch-icon" sizes="180x180" href="/public/favicon/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/public/favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/public/favicon/favicon-16x16.png">
+  <link rel="mask-icon" href="/public/favicon/safari-pinned-tab.svg" color="#ff2d20">
+  <link rel="shortcut icon" href="/public/favicon/favicon.ico">
+  <!-- manifest -->
+  <link rel="manifest" href="/public/site.webmanifest">
+  <meta name="msapplication-config" content="/public/browserconfig.xml">
+  <meta name="msapplication-TileColor" content="#ff2d20">
+  <meta name="theme-color" content="#ffffff">
+  <!-- tailwind -->
+  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
+  <script>
+    tailwind.config = {
+      content: ['./src/**/*.{html,ts}'],
+      theme: {
+        extend: {
+          fontFamily: {
+            sans: ['Inter var', 'Inter', ...tailwind.defaultTheme.fontFamily.sans],
+          },
+        }
+      }
+    }
+  </script>
+  <style type="text/tailwindcss">
+    @layer base {
+      a {
+        @apply text-orange-300;
+      }
+    }
+  </style>
+</head>
+<body class="flex flex-col dark:bg-neutral-900 dark:text-neutral-200 bg-white text-neutral-800 font-sans space-y-8">
+  <header class="flex items-center space-x-4 px-4 py-2 md:py-4 lg:px-8 lg:py-6">
+    <a href="/">[Logo]</a>
+    <nav class="flex items-center flex-1 space-x-4">
+      <a href="/guide">Guide</a>
+      <a href="/docs">Documentation</a>
+      <a href="/changelog">Changelog</a>
+      <a href="/community">Community</a>
+      <span class="flex-1"></span>
+      <a href="https://github.com/atlasland" target="_blank" class="hidden md:inline">
+        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="w-5 h-5 dark:text-neutral-400 text-neutral-500" fill="currentColor">
+          <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
+        </svg>
+        <span class="hidden">Github</span>
+      </a>
+      <a href="https://discord.gg/3TWUmV4Wmg" target="_blank" class="hidden md:inline">
+        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="w-5 h-5 dark:text-neutral-400 text-neutral-500" fill="currentColor">
+          <path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z"></path>
+        </svg>
+        <span class="hidden">Discord</span>
+      </a>
+      <a href="https://twitter.com/atlasframework" target="_blank" class="hidden md:inline">
+        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="w-5 h-5 dark:text-neutral-400 text-neutral-500" fill="currentColor">
+          <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path>
+        </svg>
+        <span class="hidden">Twitter</span>
+      </a>
+    </nav>
+  </header>
+
+  {{ content }}
+
+  <footer class="flex flex-col items-start space-y-4 px-4 py-2 md:py-4 lg:px-8 lg:py-6 text-sm text-neutral-400">
+    Copyright &copy; 2021—2022 the Atlas authors.
+  </footer>
+</body>
+</html>