Add a first set of templates

ROVI-org · Feb 3, 2025 · a1bc62d · a1bc62d
1 parent 93ef8d8
commit a1bc62d
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 1 deletion.
diff --git a/roviweb/api/__init__.py b/roviweb/api/__init__.py
@@ -1,8 +1,10 @@
 """Define the web application"""
+from pathlib import Path
 import logging
 
-from fastapi import FastAPI
+from fastapi import FastAPI, Request
 from fastapi.middleware.cors import CORSMiddleware
+from starlette.templating import Jinja2Templates
 
 from . import db, online
 
@@ -17,3 +19,11 @@
 )
 app.include_router(db.router)
 app.include_router(online.router)
+
+templates = Jinja2Templates(directory=Path(__file__).parent / "templates")
+
+@app.get("/")
+async def home(request: Request):
+    return templates.TemplateResponse(
+        request=request, name="home.html"
+    )
diff --git a/roviweb/api/templates/home.html b/roviweb/api/templates/home.html
@@ -0,0 +1,6 @@
+{% extends "layout.html" %}
+{% block content %}
+<h1>ROVI Web Services Demo</h1>
+
+<p>A simple web page showing what kind of dashboards we plan to provide./p>
+{% endblock %}
diff --git a/roviweb/api/templates/layout.html b/roviweb/api/templates/layout.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>ROVI Services Demo</title>
+
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#27518F">
+
+    <!-- Load the Font-Awesome Icons (CDN), Academicons (local), and Bootstrap-Icon (CDN) packages -->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+          integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
+          crossorigin="anonymous"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
+
+    <!-- Boostrap Imports -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
+            crossorigin="anonymous"></script>
+
+    <!-- jQuery Import -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+
+    <link rel="shortcut icon" href="images/favicon.ico?v=2">
+
+</head>
+
+
+<body>
+
+{% set current = request.path.lower().split("/")[-1] %}
+
+<!--
+  NAVIGATION BAR GOES HERE.
+-->
+<nav id="navbar" class="navbar navbar-expand-lg sticky-top mb-3 navbar-dark bg-primary">
+    <div class="container">
+
+        <a class="navbar-brand" href="#">
+            <b>ROVI Web</b>
+        </a>
+
+        <link rel="shortcut icon" href="/images/favicon.ico?v=2">
+
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                aria-controls="navbarNav" aria-expanded="false"
+                aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a{% if request.url == '/' %} class="nav-link active"{% else %} class="nav-link" {% endif %}
+                    href="/">Home</a>
+                </li>
+                <li class="nav-item">
+                    <a href="https://github.com/ROVI-org/services-demonstration" class="nav-link">GitHub</a>
+                </li>
+            </ul>
+        </div>
+
+    </div>
+
+</nav>
+
+
+<!--
+  CONTENT GOES HERE.
+-->
+<main class="container">
+    {% block content %}
+    {% endblock %}
+</main>
+</body>
+
+</html>