feat: mvp

pythoninthegrass · pythoninthegrass · commit 88dedafdd858 · 2024-01-22T02:33:03.000-06:00
Correctly render the quotes and authors w/css and htmx
diff --git a/Dockerfile b/Dockerfile
@@ -32,5 +32,4 @@ COPY . .
 
 EXPOSE 8000
 
-ENTRYPOINT [ "gunicorn" ]
-CMD ["-k", "uvicorn.workers.UvicornWorker", "-b", "0.0.0.0:8000", "app:app", "--reload"]
+ENTRYPOINT [ "/app/startup.sh" ]
diff --git a/app.py b/app.py
@@ -1,16 +1,25 @@
 #!/usr/bin/env python
 
 import sqlite3
-from fastapi import FastAPI, Query,Request
+from fastapi import FastAPI, Query, Request, status
+from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
-from typing import List, Optional
+from typing import Optional
 
 app = FastAPI()
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+app.mount("/static", StaticFiles(directory="static"), name="static")
 templates = Jinja2Templates(directory="templates")
 
 
-@app.get('/')
+@app.get('/', response_class=HTMLResponse)
 def home(request: Request):
     return templates.TemplateResponse("index.html", {"request": request})
 
@@ -41,6 +50,8 @@ def get_quotes_by_limit(request: Request, limit: int) -> JSONResponse:
     db = sqlite3.connect("db.sqlite")
     c = db.cursor()
     c.execute(f"SELECT * FROM quotes ORDER BY RANDOM() LIMIT {limit}")
-    quotes = c.fetchall()
+    quotes = [{"id": id,
+               "quote": quote,
+               "author": author} for id, quote, author in c.fetchall()]
     db.close()
     return JSONResponse(content={"quotes": quotes})
diff --git a/startup.sh b/startup.sh
@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+gunicorn \
+	-k uvicorn.workers.UvicornWorker \
+	-b 0.0.0.0:8000 \
+	--reload \
+	--reload-extra-file="templates/index.html" \
+	--reload-extra-file="static/styles.css" \
+	app:app
diff --git a/static/.gitkeep b/static/.gitkeep
diff --git a/static/styles.css b/static/styles.css
@@ -0,0 +1,34 @@
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background-color: lightblue;
+}
+
+#quote-placeholder {
+  height: 100px;
+}
+
+#quote-display {
+  position: absolute;
+  /* 50% is the vertical center of the viewport, and 50px is half the height of the #quote-placeholder div */
+  top: calc(50% + 50px);
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+#quote-text {
+  color: black;
+  font-size: 2em;
+  padding-top: 10px;
+}
+
+#author-text {
+  color: rgb(45, 45, 45);
+  font-size: 1.5em;
+  padding-top: 20px;
+}
diff --git a/templates/index.html b/templates/index.html
@@ -6,13 +6,34 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>QaaS</title>
   <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
+  <link href="/static/styles.css" rel="stylesheet">
+  <script src="https://unpkg.com/htmx.org@1.9.10"></script>
 </head>
 
 <body class="bg-gray-200">
   <div class="container mx-auto">
     <h1 class="text-4xl text-center py-5">Welcome to QaaS</h1>
-    <p class="text-center">This is a boilerplate index page rendered by FastAPI and styled with Tailwind CSS.</p>
+    <p class="text-center">Quotes as a Service is happy to serve 🤙</p>
+    <br>
+    <div class="flex justify-center">
+      <button hx-get="/quotes/1" hx-trigger="click" hx-target="#quote-display"
+        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Get a Quote</button>
+    </div>
+    <div id="quote-placeholder" class="text-center mt-4">
+      <!-- This is a placeholder for the quote -->
+    </div>
+    <div id="quote-display" class="text-center mt-4">
+      <!-- The quote will be inserted here -->
+    </div>
   </div>
+  <script>
+    document.body.addEventListener('htmx:afterSwap', function (event) {
+      var quotes = JSON.parse(event.detail.xhr.response).quotes;
+      var quote = quotes[0]; // Get the first quote object from the array
+      var quoteElement = document.getElementById('quote-display');
+      quoteElement.innerHTML = `<p id="quote-text" class="text-center text-2xl">${quote.quote}</p><p id="author-text" class="text-center text-xl">- ${quote.author}</p>`;
+    });
+  </script>
 </body>
 
 </html>
