Add an about page

src/pages/about.astro

@@ -0,0 +1,35 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro';
+---
+
+<BaseLayout>
+  <h1>About</h1>
+  <p>
+    Inspired by <a href="https://www.sixdegreesofwikipedia.com" target="_blank"
+      >Six Degrees of Wikipedia</a
+    >, Six Degress of Formula 1 stores data of over 800 drivers, who are
+    connected together by about 5000 links. If two drivers competed for the same
+    team in at least one race, there's a link between them.
+  </p>
+  <p>
+    Simply enter the names of two F1 drivers, and you'll be shown how to get
+    from one to the other using as few connections as possible.
+  </p>
+  <p>
+    The aforementioned data was sourced from <a
+      href="http://ergast.com/mrd"
+      target="_blank">Ergast</a
+    >. The website was built with <a href="https://astro.build" target="_blank"
+      >Astro</a
+    >, <a href="https://picocss.com/" target="_blank">PicoCSS</a>, <a
+      href="https://neo4j.com"
+      target="_blank">Neo4j</a
+    >, and <a href="https://visjs.org" target="_blank">vis.js</a>.
+  </p>
+</BaseLayout>
+
+<style>
+  p {
+    text-align: left;
+  }
+</style>

src/pages/index.astro

@@ -6,14 +6,16 @@ import PathVisualiser from '@/components/PathVisualiser.astro';
 const source = (Astro.url.searchParams.get('source')! || '').trim();
 const dest = (Astro.url.searchParams.get('dest')! || '').trim();
 
+const noEmptyParams = source !== '' && dest !== '';
+
 // Cache the page for 2 weeks
 Astro.response.headers.set('Cache-Control', 'public, max-age=1209600');
 ---
 
 <BaseLayout>
   <hgroup>
-    <h1>Six Degrees of F1</h1>
+    <h1>Six Degrees of Formula 1</h1>
-    <p>Find out which driver is the sport's Kevin Bacon</p>
+    <p>Find out who's the sport's Kevin Bacon</p>
   </hgroup>
   <p id="prompt">Get all the shortest paths from/to:</p>
   <form action="/" method="GET">
@@ -40,13 +42,9 @@ Astro.response.headers.set('Cache-Control', 'public, max-age=1209600');
       />
       <DriversList />
     </fieldset>
-    <button type="submit">Submit</button>
+    <button type="submit">Search</button>
   </form>
-  {
+  {noEmptyParams && <PathVisualiser source={source} dest={dest} />}
-    source !== '' && dest !== '' && (
-      <PathVisualiser source={source} dest={dest} />
-    )
-  }
 </BaseLayout>
 
 <style>