Update site with more technical information

ellenhp · Feb 11, 2024 · 88bd44d · 88bd44d
1 parent 82aa152
commit 88bd44d
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 36 deletions.
diff --git a/airmail_site/src/App.vue b/airmail_site/src/App.vue
@@ -1,6 +1,7 @@
 <script setup>
 import Header from "./components/Header.vue";
 import Hero from "./components/Hero.vue";
+import Explanation from "./components/Explanation.vue";
 import Features from "./components/Features.vue";
 import Roadmap from "./components/Roadmap.vue";
 import Demo from "./components/Demo.vue";
@@ -9,6 +10,7 @@ import Demo from "./components/Demo.vue";
 <template>
   <Header />
   <Hero />
+  <Explanation />
   <Features />
   <Roadmap />
   <Demo />

diff --git a/airmail_site/src/components/Demo.vue b/airmail_site/src/components/Demo.vue
@@ -40,7 +40,7 @@ async function fetchSearchResults(query) {
 </script>
 
 <template>
-  <div class="untree_co-section bg-light" id="demo-section">
+  <div class="untree_co-section" id="demo-section">
     <div class="container">
       <div class="row justify-content-between">
         <div class="mb-4" data-aos="fade-up" data-aos-delay="0">

diff --git a/airmail_site/src/components/Explanation.vue b/airmail_site/src/components/Explanation.vue
@@ -0,0 +1,29 @@
+<template>
+    <div class="untree_co-hero" id="home-section">
+        <div class="untree_co-section bg-light" id="features-section">
+            <div class="container">
+                <div class="feature-section-header">
+                    <h1>
+                        Airmail is different.
+                    </h1>
+                </div>
+                <div class="col-lg-9">
+                    <p>
+                        Airmail has a couple really unique features. It's designed to query against a remote
+                        index and run on a relatively affordable VPS. The demo server is running on a t3a.medium with 4GB of
+                        RAM. The main search index lives on S3 and is queried with range requests. The total cost of the
+                        planet demo server is about $35/month, which is fairly low for a self-hosted planet geocoder on AWS.
+                        The smallest x86_64 EC2 instance you could reasonably run a global Nominatim instance on is a
+                        r5a.2xlarge, which costs about $325/month, and you have to pay for around 500GB of storage attached
+                        to each serving instance as well. Pelias is cheaper than Nominatim, but still costs about $100/month
+                        to run on EC2 after storage costs, if you use the recommended 8GB of RAM for Elasticsearch. These
+                        cost savings are not without downsides. Latency on an Airmail request is pretty high, anywhere from
+                        100-1000ms, depending on how hot the cache is. There's some low hanging fruit for optimization, but
+                        S3 range queries are always going to be slower than an SSD random read.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
diff --git a/airmail_site/src/components/Features.vue b/airmail_site/src/components/Features.vue
@@ -35,7 +35,7 @@ const total = 4;
 </script>
 
 <template>
-  <div class="untree_co-section bg-light" id="features-section">
+  <div class="untree_co-section" id="features-section">
     <div class="container">
       <div class="feature-section-header">
         <h1>
@@ -44,18 +44,18 @@ const total = 4;
       </div>
       <div class="row justify-content-between">
         <div class="col-lg-5 order-lg-2 js-custom-dots">
-          <a v-for="item in items" href="#" class="service link horizontal d-flex active" data-aos="fade-left"
+          <p v-for="item in items" href="#" class="service link horizontal d-flex active" data-aos="fade-left"
             data-aos-delay="0">
-            <div class="service-icon mb-4" :style=item.color>
-              <div class="service-icon-center">
-                <v-icon :icon=item.icon></v-icon>
-              </div>
+          <div class="service-icon mb-4" :style=item.color>
+            <div class="service-icon-center">
+              <v-icon :icon=item.icon></v-icon>
             </div>
-            <div class="service-contents">
-              <h3>{{ item.name }}</h3>
-              <p>{{ item.des }}</p>
-            </div>
-          </a>
+          </div>
+          <div class="service-contents">
+            <h3>{{ item.name }}</h3>
+            <p>{{ item.des }}</p>
+          </div>
+          </p>
         </div>
       </div>
     </div>

diff --git a/airmail_site/src/components/Hero.vue b/airmail_site/src/components/Hero.vue
@@ -18,26 +18,28 @@ const buttonGithub = "GitHub";
             <div class="col-lg-5">
               <h1 class="heading" data-aos="fade-up" data-aos-delay="0">
                 <p>
-                  Geocode the planet with <span style="
-                      color: themeColor;
-                    ">Airmail</span>
+                  Search the planet with Airmail.
                 </p>
               </h1>
               <div class="excerpt" data-aos="fade-up" data-aos-delay="100">
                 <p>
-                  Airmail is an extremely lightweight, open-source geocoder written in Rust.
-                  Airmail is currently able to parse English queries like "1600 Pennsylvania Ave NW" and POI queries like
-                  "Seattle Starbucks".
+                  Airmail is an extremely lightweight, open-source geocoder written in Rust. A search engine for the
+                  planet. Airmail is currently able to parse English queries like "1600 Pennsylvania Ave NW" and POI
+                  queries like "Seattle Starbucks". Result quality is fair for English queries in North America, and
+                  support for more regions and languages is next on the roadmap.
                 </p>
               </div>
               <p data-aos="fade-up" data-aos-delay="200">
-                <a href="#features-section" class="btn btn-primary smoothscroll" style="margin-right: 5px" :style="[
-                  { background: themeColor },
-                  { borderColor: themeColor },
-                ]">{{ buttonSeeFeatures }}</a>
-                <a href="#roadmap-section" class="btn btn-outline-primary smoothscroll roadmap" style="margin-right: 5px"
+                <a href="#features-section" class="btn btn-primary smoothscroll"
+                  style="margin-right: 10px; margin-bottom: 10px;" :style="[
+                    { background: themeColor },
+                    { borderColor: themeColor },
+                  ]">{{ buttonSeeFeatures }}</a>
+                <a href="#roadmap-section" class="btn btn-outline-primary smoothscroll roadmap"
+                  style="margin-right: 10px; margin-bottom: 10px;"
                   :style="[{ color: themeColor }, { borderColor: themeColor }]">{{ buttonRoadmap }}</a>
-                <a href="#demo-section" class="btn btn-outline-primary smoothscroll roadmap" style="margin-right: 5px"
+                <a href="#demo-section" class="btn btn-outline-primary smoothscroll roadmap"
+                  style="margin-right: 5px; margin-bottom: 10px;"
                   :style="[{ color: themeColor }, { borderColor: themeColor }]">Demo</a>
               </p>
             </div>

diff --git a/airmail_site/src/components/Roadmap.vue b/airmail_site/src/components/Roadmap.vue
@@ -34,8 +34,8 @@ const total = 4;
 </script>
 
 <template>
-  <div class="untree_co-section" id="roadmap-section">
-    <div class="container">
+  <div class="untree_co-section bg-light" id="roadmap-section">
+    <div class="container ">
       <div class="feature-section-header">
         <h1>
           Roadmap
@@ -44,18 +44,18 @@ const total = 4;
       <div class="row justify-content-between">
 
         <div class="col-lg-5 order-lg-2 js-custom-dots">
-          <a v-for="item in items" href="#" class="service link horizontal d-flex active" data-aos="fade-left"
+          <p v-for="item in items" href="#" class="service link horizontal d-flex active" data-aos="fade-left"
             data-aos-delay="0">
-            <div class="service-icon mb-4" :style=item.color>
-              <div class="service-icon-center">
-                <v-icon :icon=item.icon></v-icon>
-              </div>
+          <div class="service-icon mb-4" :style=item.color>
+            <div class="service-icon-center">
+              <v-icon :icon=item.icon></v-icon>
             </div>
-            <div class="service-contents">
-              <h3>{{ item.name }}</h3>
-              <p>{{ item.des }}</p>
-            </div>
-          </a>
+          </div>
+          <div class="service-contents">
+            <h3>{{ item.name }}</h3>
+            <p>{{ item.des }}</p>
+          </div>
+          </p>
         </div>
       </div>
     </div>