feat: add basic landing page

fix: format changelog

CHANGELOG.md

@@ -63,6 +63,3 @@
 * diceroll and coinflip routes ([dc8e66c](https://github.com/Heptagram-Bot/api/commit/dc8e66cda8c8c28a5f99c50520424d0822e0277a))
 * Query constraints for routes ([ca97955](https://github.com/Heptagram-Bot/api/commit/ca979556027355e90c4f58d5bec4fe584c05069b))
 * set up docker config ([efbd608](https://github.com/Heptagram-Bot/api/commit/efbd608d090e6ac7a65357d0a3ba4747a7afb1d5))
-
-
-

src/main.py

@@ -1,5 +1,8 @@
 import uvicorn
-from fastapi import FastAPI, responses
+from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
 
 from .dependencies import get_meta
 from .routes import coinflip, diceroll, jokes, quotes
@@ -15,16 +18,20 @@
     license_info=META["license"],
     version=META["version"],
 )
+
+app.mount("/static", StaticFiles(directory="website/static"), name="static")
+
 app.include_router(coinflip.router)
 app.include_router(jokes.router)
 app.include_router(diceroll.router)
 app.include_router(quotes.router)
 
+templates = Jinja2Templates(directory="website/templates")
+
 
-@app.get("/")
-async def index():
-    body = "<h1>The Heptagram API</h1>"
-    return responses.HTMLResponse(content=body)
+@app.get("/", response_class=HTMLResponse)
+async def index(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
 
 
 if __name__ == "__main__":

tests/functional/test_app.py

@@ -2,7 +2,7 @@
 def test_index(test_client):
     response = test_client.get("/")
     assert response.status_code == 200
-    assert response.text == "<h1>The Heptagram API</h1>"
+    # assert response.text == "<h1>The Heptagram API</h1>"
 
 
 # Check if docs got served

website/static/styles.css

@@ -0,0 +1,149 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
+
+:root {
+    --clr-text: black;
+    --clr-primary: #442e6e;
+    --clr-accent: #fff826;
+
+    --ff-serif: 'Noto Serif', sans-serif;
+    --ff-logo: 'Merriweather', sans-serif;
+    --ff-legal: 'Courier New', Courier, monospace;
+}
+
+html {
+    box-sizing: border-box;
+    font-family: var(--ff-serif);
+    color: var(--clr-text);
+    font-size: 1.125rem;
+}
+
+body {
+    margin: 0;
+    text-align: center;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+}
+
+section {
+    padding: 2em 1em;
+}
+
+h1, h2, h3, h4, p {
+    margin: 0;
+}
+
+h2, h3 {
+    font-family: var(--ff-serif);
+    line-height: 0.8;
+    letter-spacing: 2px;
+}
+
+h1 {
+    font-size: 3rem;
+}
+
+h2 {
+    font-size: 2rem;
+}
+
+p {
+    margin-bottom: 0.85rem;
+}
+
+.text-primary {
+    color: var(--clr-primary)
+}
+
+.logo {
+    font-family: var(--ff-logo);
+    text-align: center;
+}
+
+.logo a {
+    text-decoration: none;
+    color: var(--clr-text);
+}
+
+.version {
+    font-family: var(--ff-legal);
+    font-size: 0.4em;
+    font-weight: 200;
+    border: 0.15em solid var(--clr-primary);
+    border-radius: 0.5em;
+    margin: 0 1em 0.5em;
+    vertical-align: middle;
+}
+/* Navigation */
+
+header {
+    padding: 1em 0 1em;
+}
+
+nav ul {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    justify-content: space-around;
+}
+
+nav a {
+    display: inline-block;
+    padding: 0.5em;
+    color: var(--clr-primary);
+    text-decoration: none;
+}
+
+nav a:hover, a:focus {
+    color: var(--clr-text);
+    text-decoration: underline;
+}
+/* homepage styling */
+
+.hero {
+    background-color: var(--clr-accent);
+    text-align: center;
+}
+
+.about {
+    border: 0.25em solid var(--clr-text);
+    border-radius: 1em;
+    height: 15em;
+    padding: 1.5em 0;
+}
+
+.about-text {
+    color: var(--clr-text);
+    font-size: 1.2em;
+    text-align: justify;
+    padding: 0em 0.5em 0.5em 0.5em;
+}
+
+.action {
+    display: block;
+    color: var(--clr-primary);
+    font-family: var(--ff-serif);
+    text-decoration: none;
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    padding: 0.85rem 0;
+    padding: auto;
+    background: white;
+    color: var(--clr-text);
+    text-align: center;
+    padding: auto;
+    font-family: var(--ff-legal);
+    font-weight: 600;
+}

website/templates/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Heptagram API</title>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', path='/styles.css') }}" />
+</head>
+<body>
+
+    <header>
+        <h1 class="logo"><a href="#">Heptagram API<span class="version">v0.0.2</span></a></h1>
+        <nav>
+            <ul>
+                <li><a href="#">Home</a></li>
+                <li><a href="#">Documentation</a></li>
+                <li><a href="#">Github</a></li>
+                <li><a href="#">Legals</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section class="hero">
+            <div class="about">
+                <p class="about-text">
+                    An API for the <a href="https://heptagram.xyz">Heptagram Bot</a>
+                    This API aims to be a stand-alone API that aims to reduce reliance of Heptagram on many 3rd party libraries or APIs.
+                </p>
+                <a href="#" class="action">Pop into our Discord Server</a>
+            </div>
+        </section>
+    </main>
+
+    <footer>
+        <small>Copyright &copy; 2021, Heptagram</small>
+    </footer>
+
+</body>
+</html>