gitignore update

README.md

@@ -1 +1,5 @@
-# Fastapi-starter
+# Fastapi Web Starter
+
+You can find the Medium article at [https://shinichiokada.medium.com/](https://shinichiokada.medium.com/).
+
+

app/lib/helpers.py

@@ -0,0 +1,14 @@
+import os.path
+import markdown
+
+
+def openfile(filename):
+    filepath = os.path.join("app/pages/", filename)
+    with open(filepath, "r", encoding="utf-8") as input_file:
+        text = input_file.read()
+
+    html = markdown.markdown(text)
+    data = {
+        "text": html
+    }
+    return data

app/main.py

@@ -3,24 +3,29 @@
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 
+from .lib.helpers import *
+from app.routers import twoforms, unsplash, accordion
+
+
 app = FastAPI()
 
+
 templates = Jinja2Templates(directory="templates")
 
 app.mount("/static", StaticFiles(directory="static"), name="static")
 
+app.include_router(unsplash.router)
+app.include_router(twoforms.router)
+app.include_router(accordion.router)
+
 
 @app.get("/", response_class=HTMLResponse)
 async def home(request: Request):
-    data = {
-        "page": "Home page"
-    }
+    data = openfile("home.md")
     return templates.TemplateResponse("page.html", {"request": request, "data": data})
 
 
 @app.get("/page/{page_name}", response_class=HTMLResponse)
-async def page(request: Request, page_name: str):
-    data = {
-        "page": page_name
-    }
+async def show_page(request: Request, page_name: str):
+    data = openfile(page_name+".md")
     return templates.TemplateResponse("page.html", {"request": request, "data": data})

app/pages/about.md

@@ -0,0 +1,4 @@
+# About
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse velit nunc, tincidunt sed tempus eget, luctus venenatis ex. Morbi et felis pharetra, rhoncus erat et, feugiat ipsum. Nunc lorem elit, pellentesque ac magna et, luctus volutpat odio. Suspendisse potenti. Praesent interdum ligula nunc, non tempor mi congue et. Pellentesque tellus neque, lacinia vitae auctor ac, interdum ac mauris. Suspendisse et nunc in nibh iaculis semper vel ac sem. In vel eros eget ipsum semper dapibus vel in nibh. Nunc ac augue id nulla ultrices porta. Nullam consectetur sed purus eu congue.

app/pages/contact.md

@@ -0,0 +1,3 @@
+# Contact
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse velit nunc, tincidunt sed tempus eget, luctus venenatis ex. Morbi et felis pharetra, rhoncus erat et, feugiat ipsum. Nunc lorem elit, pellentesque ac magna et, luctus volutpat odio. Suspendisse potenti. Praesent interdum ligula nunc, non tempor mi congue et. Pellentesque tellus neque, lacinia vitae auctor ac, interdum ac mauris. Suspendisse et nunc in nibh iaculis semper vel ac sem. In vel eros eget ipsum semper dapibus vel in nibh. Nunc ac augue id nulla ultrices porta. Nullam consectetur sed purus eu congue.

app/pages/home.md

@@ -1,4 +1,7 @@
 # Welcome to FastAPI Starter
 
+
 This project uses [FastAPI](https://fastapi.tiangolo.com/), [Jinja2](https://jinja.palletsprojects.com/en/2.11.x/), and [Bootstrap4](https://getbootstrap.com/docs/4.1/getting-started/introduction/).
 
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.

app/pages/info.md

@@ -0,0 +1,4 @@
+# Information
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse velit nunc, tincidunt sed tempus eget, luctus venenatis ex. Morbi et felis pharetra, rhoncus erat et, feugiat ipsum. Nunc lorem elit, pellentesque ac magna et, luctus volutpat odio. Suspendisse potenti. Praesent interdum ligula nunc, non tempor mi congue et. Pellentesque tellus neque, lacinia vitae auctor ac, interdum ac mauris. Suspendisse et nunc in nibh iaculis semper vel ac sem. In vel eros eget ipsum semper dapibus vel in nibh. Nunc ac augue id nulla ultrices porta. Nullam consectetur sed purus eu congue.

app/pages/portfolio.md

@@ -0,0 +1,3 @@
+# Portfolio
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse velit nunc, tincidunt sed tempus eget, luctus venenatis ex. Morbi et felis pharetra, rhoncus erat et, feugiat ipsum. Nunc lorem elit, pellentesque ac magna et, luctus volutpat odio. Suspendisse potenti. Praesent interdum ligula nunc, non tempor mi congue et. Pellentesque tellus neque, lacinia vitae auctor ac, interdum ac mauris. Suspendisse et nunc in nibh iaculis semper vel ac sem. In vel eros eget ipsum semper dapibus vel in nibh. Nunc ac augue id nulla ultrices porta. Nullam consectetur sed purus eu congue.

app/routers/accordion.py

@@ -0,0 +1,18 @@
+from fastapi import FastAPI, Request, Form, APIRouter
+from fastapi.responses import HTMLResponse
+from fastapi.templating import Jinja2Templates
+
+router = APIRouter()
+templates = Jinja2Templates(directory="templates/")
+
+
+@router.get("/accordion", response_class=HTMLResponse)
+def get_accordion(request: Request):
+    result = "Type a number"
+    return templates.TemplateResponse('accordion.html', context={'request': request, 'result': result})
+
+
+@router.post("/accordion", response_class=HTMLResponse)
+def post_accordion(request: Request, tag: str = Form(...)):
+
+    return templates.TemplateResponse('accordion.html', context={'request': request, 'tag': tag})

app/routers/twoforms.py

@@ -0,0 +1,27 @@
+from fastapi import FastAPI, Request, Form, APIRouter
+from fastapi.responses import HTMLResponse
+from fastapi.templating import Jinja2Templates
+import os
+
+router = APIRouter()
+templates = Jinja2Templates(directory="templates/")
+
+
+@router.get("/twoforms", response_class=HTMLResponse)
+def form_get(request: Request):
+    key = os.getenv("unsplash_key")
+    print(key)
+    result = "Type a number"
+    return templates.TemplateResponse('twoforms.html', context={'request': request, 'result': result})
+
+
+@router.post("/form1", response_class=HTMLResponse)
+def form_post1(request: Request, number: int = Form(...)):
+    result = number + 2
+    return templates.TemplateResponse('twoforms.html', context={'request': request, 'result': result, 'yournum': number})
+
+
+@router.post("/form2", response_class=HTMLResponse)
+def form_post2(request: Request, number: int = Form(...)):
+    result = number + 100
+    return templates.TemplateResponse('twoforms.html', context={'request': request, 'result': result, 'yournum': number})

app/routers/unsplash.py

@@ -0,0 +1,18 @@
+import os
+from fastapi import Request, APIRouter, Depends
+from fastapi.responses import HTMLResponse
+from fastapi.templating import Jinja2Templates
+
+from dotenv import load_dotenv
+load_dotenv()
+
+templates = Jinja2Templates(directory="templates")
+
+router = APIRouter()
+
+
+@router.get("/unsplash", response_class=HTMLResponse)
+async def unsplash_home(request: Request):
+    key = os.getenv("unsplash_key")
+    print(key)
+    return templates.TemplateResponse("unsplash.html", {"request": request})

requirements.txt

@@ -1,7 +1,7 @@
 requests==2.25.0
 fastapi==0.62.0
-python-dotenv==0.15.0
 uvicorn==0.12.3
+python-dotenv==0.15.0
 aiofiles==0.6.0
 python-multipart==0.0.5
 jinja2==2.11.2

runtime.txt

@@ -0,0 +1 @@
+python-3.8.6

static/css/mystyle.css

@@ -0,0 +1,35 @@
+body {
+    min-height: 100vh;
+    position: relative;
+    margin: 0;
+    padding-bottom: 100px; 
+    box-sizing: border-box;
+}
+
+.wrapper{
+    max-width: 960px;
+}
+
+footer {
+    position: absolute;
+    bottom: 0;
+    height: 100px;
+    padding-top:50px;
+}
+
+.responsive{
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#content{
+    position: relative;
+}
+
+.active {
+    background-color: rgb(202, 249, 255);
+    color: white;
+  }

templates/accordion.html

@@ -0,0 +1,101 @@
+{% extends "base.html" %}
+{% set active_page = "accordion" %}
+
+{% block title %}Accordion{% endblock %}
+
+{% block head %}
+{{ super() }}
+
+
+{% endblock %}
+
+{% block page_content %}
+<h1 class="cap">Accordion</h1>
+
+{% if tag %}
+<h2>You selected {{tag}}</h2>
+{% endif %}
+
+{% set flora = ['flower','tree','fruit','garden'] %}
+{% set fauna = [ 'cat', 'dog', 'bird', 'fish'] %}
+
+<form method="post" id="category">
+    <div class="accordion" id="accordionExample">
+        <div class="card">
+            <div class="card-header" id="headingOne">
+                <h2 class="mb-0">
+                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
+                        aria-controls="collapseOne">
+                        FLORA
+                    </button>
+
+                </h2>
+            </div>
+
+            <div id="collapseOne" class="collapse 
+            {% for  name in flora %}
+            {% if name==tag %}
+            show 
+            {% endif %}
+            {% endfor %}
+            " aria-labelledby="headingOne" data-parent="#accordionExample">
+                <div class="card-body">
+                    {% for name in flora %}
+                    {% if tag == name %}
+                    {% set checked="checked" %}
+                    {% endif %}
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" name="tag" id="radio-{{name}}" value="{{name}}"
+                            {{ checked }}>
+                        <label class="form-check-label" for="radio-{{name}}">
+                            {{ name | capitalize}}
+                        </label>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-header" id="headingTwo">
+                <h2 class="mb-0">
+                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
+                        data-target="#collapseTwo" aria-controls="collapseTwo">
+                        FAUNA
+                    </button>
+                </h2>
+            </div>
+            <div id="collapseTwo" class="collapse
+            {% for  name in fauna %}
+            {% if name==tag %}
+            show 
+            {% endif %}
+            {% endfor %}
+            " aria-labelledby="headingTwo" data-parent="#accordionExample">
+                <div class="card-body">
+                    {% for name in fauna %}
+                    {% if tag == name %}
+                    {% set checked="checked" %}
+                    {% endif %}
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" name="tag" id="radio-{{name}}" value="{{name}}"
+                            {{ checked }}>
+                        <label class="form-check-label" for="radio-{{name}}">
+                            {{ name | capitalize}}
+                        </label>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </div>
+    <button type="submit" class="submit btn btn-primary btn-xl">Submit</button>
+</form>
+
+{% endblock %}
+
+{% block scripts %}
+{{ super() }}
+
+
+{% endblock %}

templates/base.html

@@ -10,22 +10,17 @@
     <meta name="author" content="Shinichi Okada">
 
     <title>{% block title %}{% endblock %} FastAPI Starter</title>
-    <link rel="icon" href="{{ url_for('static', path='/images/favicon.png') }}" sizes="32x32" />
+    <link rel="icon" href="{{ url_for('static', path='/images/favicon.ico') }}" sizes="32x32" />
 
     <!-- Bootstrap CSS CDN -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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">
-
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <!-- Font Awesome JS -->
-    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
-        integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
-        crossorigin="anonymous"></script>
-    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
-        integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
-        crossorigin="anonymous"></script>
+    <script src="https://kit.fontawesome.com/543c4560e5.js" crossorigin="anonymous"></script>
 
     {% endblock %}
 </head>

templates/include/footer.html

@@ -0,0 +1,4 @@
+<footer class="container">
+    <a href="#"><i class="fa fa-facebook">Facebook</i></a>
+    <a href="#"><i class="fa fa-twitter">Twitter</i></a>
+</footer>

templates/include/sidebar.html

@@ -5,39 +5,37 @@
     </div>
 
     <div class="sidebar-header">
-        <h3>Bootstrap Sidebar</h3>
+        <h3>FastAPI Web Starter</h3>
     </div>
 
     <ul class="list-unstyled components">
-        <p>Dummy Heading</p>
         <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 1</a>
+                    <a href="/">Home</a>
                 </li>
                 <li>
-                    <a href="#">Home 2</a>
+                    <a href="https://google.com">Google</a>
                 </li>
             </ul>
         </li>
         <li>
-            <a href="#">About</a>
             <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
             <ul class="collapse list-unstyled" id="pageSubmenu">
                 <li>
-                    <a href="#">Page 1</a>
+                    <a href="/page/about">About</a>
                 </li>
                 <li>
-                    <a href="#">Page 2</a>
+                    <a href="/page/info">Information</a>
                 </li>
             </ul>
         </li>
         <li>
-            <a href="#">Portfolio</a>
+            <a href="/page/portfolio">Portfolio</a>
         </li>
         <li>
-            <a href="#">Contact</a>
+            <a href="/page/contact">Contact</a>
         </li>
     </ul>
 </nav>