MNEMONIC-717: Create webpage templates that can be shared and used for each section home pages
diff --git a/mnemonic-fastapi/app/main.py b/mnemonic-fastapi/app/main.py
index 442a92e..6ac9272 100644
--- a/mnemonic-fastapi/app/main.py
+++ b/mnemonic-fastapi/app/main.py
@@ -4,7 +4,7 @@
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
-from .library.helpers import *
+#from .library.helpers import *
app = FastAPI()
diff --git a/mnemonic-fastapi/templates/base.html b/mnemonic-fastapi/templates/base.html
new file mode 100644
index 0000000..2a11fda
--- /dev/null
+++ b/mnemonic-fastapi/templates/base.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ {% block head %}
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="description" content="FastAPI Starter">
+ <meta name="author" content="Shinichi Okada">
+
+ <title>{% block title %}{% endblock %} Welcome to Apache Mnemonic</title>
+ <link rel="icon" href="{{ url_for('static', path='/images/favicon.png') }}" sizes="32x32" />
+
+ <!-- Bootstrap CSS CDN -->
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
+ integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+ <!-- Custom CSS -->
+ <link href="{{ url_for('static', path='/css/style3.css') }}" rel="stylesheet">
+ <link href="{{ url_for('static', path='/css/mystyle.css') }}" rel="stylesheet">
+ <!-- Your Font Awesome kit -->
+ <script src="https://kit.fontawesome.com/543c4560e5.js" crossorigin="anonymous"></script>
+
+ {% endblock %}
+</head>
+
+<body>
+ <div class="wrapper">
+ {% include 'include/sidebar.html' %}
+ <!-- Page Content -->
+ <div id="content">
+ {% include 'include/topnav.html' %}
+ {% block page_content %}
+ {% endblock %}
+ </div>
+ </div>
+ <div class="overlay"></div>
+
+ {% block scripts %}
+
+ <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+ <!-- Popper.JS -->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
+ integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
+ crossorigin="anonymous"></script>
+ <!-- Bootstrap JS -->
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
+ integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
+ crossorigin="anonymous"></script>
+ <!-- jQuery Custom Scroller CDN -->
+ <script
+ src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function () {
+ $("#sidebar").mCustomScrollbar({
+ theme: "minimal"
+ });
+
+ $('#dismiss, .overlay').on('click', function () {
+ $('#sidebar').removeClass('active');
+ $('.overlay').removeClass('active');
+ });
+
+ $('#sidebarCollapse').on('click', function () {
+ $('#sidebar').addClass('active');
+ $('.overlay').addClass('active');
+ $('.collapse.in').toggleClass('in');
+ $('a[aria-expanded=true]').attr('aria-expanded', 'false');
+ });
+ });
+ </script>
+ {% endblock %}
+</body>
+
+</html>
\ No newline at end of file
diff --git a/mnemonic-fastapi/templates/include/sidebar.html b/mnemonic-fastapi/templates/include/sidebar.html
new file mode 100644
index 0000000..c88eb9d
--- /dev/null
+++ b/mnemonic-fastapi/templates/include/sidebar.html
@@ -0,0 +1,41 @@
+<!-- Sidebar -->
+<nav id="sidebar">
+ <div id="dismiss">
+ <i class="fas fa-arrow-left"></i>
+ </div>
+
+ <div class="sidebar-header">
+ <h3>FastAPI Web Starter</h3>
+ </div>
+
+ <ul class="list-unstyled components">
+ <li class="active">
+ <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Home</a>
+ <ul class="collapse list-unstyled" id="homeSubmenu">
+ <li>
+ <a href="/">Home</a>
+ </li>
+ <li>
+ <a href="https://google.com">Google</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
+ <ul class="collapse list-unstyled" id="pageSubmenu">
+ <li>
+ <a href="/page/about">About</a>
+ </li>
+ <li>
+ <a href="/page/info">Information</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="/page/portfolio">Portfolio</a>
+ </li>
+ <li>
+ <a href="/page/contact">Contact</a>
+ </li>
+ </ul>
+</nav>
\ No newline at end of file
diff --git a/mnemonic-fastapi/templates/include/topnav.html b/mnemonic-fastapi/templates/include/topnav.html
new file mode 100644
index 0000000..753e663
--- /dev/null
+++ b/mnemonic-fastapi/templates/include/topnav.html
@@ -0,0 +1,28 @@
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+ <div class="container-fluid">
+
+ <button type="button" id="sidebarCollapse" class="btn btn-info">
+ <i class="fas fa-align-left"></i>
+ <span>Toggle Sidebar</span>
+ </button>
+ <button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse"
+ data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+ aria-label="Toggle navigation">
+ <i class="fas fa-align-justify"></i>
+ </button>
+
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul class="nav navbar-nav ml-auto">
+ <li class="nav-item active">
+ <a class="nav-link" href="/unsplash">Unsplash</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="/twoforms">Two forms</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="/accordion">Accordion</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+</nav>
\ No newline at end of file
diff --git a/mnemonic-fastapi/templates/page.html b/mnemonic-fastapi/templates/page.html
index 12654c2..210e555 100644
--- a/mnemonic-fastapi/templates/page.html
+++ b/mnemonic-fastapi/templates/page.html
@@ -1,5 +1,30 @@
+{% extends "base.html" %}
+
+{% block title %}Welcome to Apache Mnemonic{% endblock %}
+{% block head %}
+{{ super() }}
+
+{% endblock %}
+
+{% block page_content %}
+{% include 'include/sidebar.html' %}
+
<h1>
Welcome to Apache Mnemonic!
</h1>
-{{data.page}}
\ No newline at end of file
+<main role="main" class="container">
+ <div class="row">
+ <div class="col">
+ {{data.text|safe}}
+ </div>
+ </div>
+</main><!-- /.container -->
+
+{% endblock %}
+
+{% block scripts %}
+{{ super() }}
+
+
+{% endblock %}
\ No newline at end of file
