Add an about page

This commit is contained in:
Maciej Pędzich 2024-04-29 11:38:14 +02:00
parent 25c81709ba
commit f262ca2ba5
Signed by: maciejpedzich
GPG Key ID: CE4A303D84882F0D
2 changed files with 41 additions and 8 deletions

35
src/pages/about.astro Normal file
View File

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

View File

@ -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>
<p>Find out which driver is the sport's Kevin Bacon</p>
<h1>Six Degrees of Formula 1</h1>
<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>
{
source !== '' && dest !== '' && (
<PathVisualiser source={source} dest={dest} />
)
}
{noEmptyParams && <PathVisualiser source={source} dest={dest} />}
</BaseLayout>
<style>