Skip to content

Commit

Permalink
Merge pull request #73 from tecladocode/master
Browse files Browse the repository at this point in the history
  • Loading branch information
jslvtr authored May 25, 2022
2 parents 22f85f1 + 5e398dd commit d2c6033
Show file tree
Hide file tree
Showing 116 changed files with 3,712 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,7 @@ draft: false
---

# Setting up the Microblog project with Flask

::: tip
List of all code changes made in this lecture: [https://diff-store.com/diff/60ac442d39c7427d815e1d4abd74526d](https://diff-store.com/diff/60ac442d39c7427d815e1d4abd74526d)
:::
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
MONGODB_URI=
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
FLASK_APP=app
FLASK_ENV=development
FLASK_RUN_PORT=5002
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
3.9.0
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
from flask import Flask, render_template


app = Flask(__name__)


@app.route("/", methods=["GET"])
def home():
return render_template("home.html")
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
flask
python-dotenv
pymongo[srv]
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
html {
font-family: Lato, sans-serif;
}

*,
*::after,
*::before {
box-sizing: inherit;
}

body {
box-sizing: border-box;
margin: 0;
}

.navbar {
max-width: 640px;
margin: 50px auto;
padding: 0 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 24px;
}

.navbar__brand {
display: flex;
align-items: center;
}

.navbar__logo {
margin-right: 30px;
}

.navbar__navigation {
display: flex;
flex-direction: row;
padding: 0;
list-style: none;
color: #5c6b70;
}

.navbar__navigation-item {
margin-left: 50px;
}

.navbar__link {
text-decoration: none;
color: inherit;
}

.main {
max-width: 450px;
margin: 0 auto;
padding: 0 20px;
}

.form {
display: flex;
flex-direction: column;
align-items: flex-end;
}

.form__input {
width: 100%;
}

.form__label {
display: block;
margin-bottom: 10px;
}

.form__textarea {
width: inherit;
font-size: 18px;
padding: 12px 20px;
border: none;
background-color: #f3f6f6;
margin-bottom: 10px;
resize: none;
}

.form__submit {
background-color: #3cd0ff;
border: none;
font-size: 18px;
font-weight: bold;
padding: 5px 30px;
border-radius: 20px;
color: white;
cursor: pointer;
}

.form__submit:hover {
background-color: #18c1e1;
}

.entry {
margin-top: 50px;
}

.entry__title {
display: inline;
font-size: 18px;
}

.entry__date {
color: #5c6b70;
}

.entry__content {
font-size: 16px;
line-height: 150%;
}

.footer {
background-color: #323f43;
padding: 40px 0;
margin-top: 50px;
border-top: 4px solid black;
color: white;
font-size: 12px;
}

.footer__content {
max-width: 640px;
margin: 0 auto;
padding: 0 20px;
display: flex;
flex-direction: row;
}

.footer .left {
flex-grow: 2;
display: flex;
flex-direction: column;
}

.footer .right {
flex-grow: 1;
display: flex;
flex-direction: row;
}

.footer__column {
display: flex;
flex-direction: column;
margin-left: 50px;
}

.footer__item {
margin-bottom: 5px;
color: inherit;
text-decoration: none;
}

.footer__item:hover {
text-decoration: underline;
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Microblog</title>
<link rel="stylesheet" href="/static/css/styles.css" />
</head>
<body>
<header class="navbar">
<div class="navbar__brand">
<img class="navbar__logo" src="/static/logo.svg" alt="The Microblog logo" />Microblog
</div>
<ul class="navbar__navigation">
<li class="navbar__navigation-item">
<a href="#" class="navbar__link">Recent</a>
</li>
<li class="navbar__navigation-item">
<a href="#" class="navbar__link">Calendar</a>
</li>
</ul>
</header>
<main class="main">
<section>
<h1>Add new entry</h1>
<form class="form" action="/entry" method="POST">
<p class="form__input">
<label for="entry" class="form__label">Entry contents:</label>
<textarea name="content" id="entry" class="form__textarea"></textarea>
</p>
<button type="submit" class="form__submit">Add entry</button>
</form>
</section>
<section>
<h1>Recent posts</h1>
<article class="entry">
<div>
<h2 class="entry__title">A bit of a chill day today</h2>
<time class="entry__date" datetime="24-10-2019">• Oct 24</time>
</div>
<p class="entry__content">
Today I couldn't do much programming, but that's OK! Can't be too awesome every day now!
</p>
</article>
</section>
</main>
<footer class="footer">
<div class="footer__content">
<section class="left">
<a class="footer__item">Made by Jose Salvatierra</a>
<a class="footer__item">Check out my other projects</a>
</section>
<section class="right">
<div class="footer__column">
<a class="footer__item">Recent</a>
<a class="footer__item">Calendar</a>
</div>
<div class="footer__column">
<a class="footer__item" href="#">About</a>
<a class="footer__item">How this was made</a>
</div>
</section>
</div>
</footer>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Microblog</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="navbar">
<div class="navbar__brand">
<img class="navbar__logo" src="logo.svg" alt="The Microblog logo" />Microblog
</div>
<ul class="navbar__navigation">
<li class="navbar__navigation-item">
<a href="#" class="navbar__link">Recent</a>
</li>
<li class="navbar__navigation-item">
<a href="#" class="navbar__link">Calendar</a>
</li>
</ul>
</header>
<main class="main">
<section>
<h1>Add new entry</h1>
<form class="form" action="/entry" method="POST">
<p class="form__input">
<label for="entry" class="form__label">Entry contents:</label>
<textarea name="content" id="entry" class="form__textarea"></textarea>
</p>
<button type="submit" class="form__submit">Add entry</button>
</form>
</section>
<section>
<h1>Recent posts</h1>
<article class="entry">
<div>
<h2 class="entry__title">A bit of a chill day today</h2>
<time class="entry__date" datetime="24-10-2019">• Oct 24</time>
</div>
<p class="entry__content">
Today I couldn't do much programming, but that's OK! Can't be too awesome every day now!
</p>
</article>
</section>
</main>
<footer class="footer">
<div class="footer__content">
<section class="left">
<a class="footer__item">Made by Jose Salvatierra</a>
<a class="footer__item">Check out my other projects</a>
</section>
<section class="right">
<div class="footer__column">
<a class="footer__item">Recent</a>
<a class="footer__item">Calendar</a>
</div>
<div class="footer__column">
<a class="footer__item" href="#">About</a>
<a class="footer__item">How this was made</a>
</div>
</section>
</div>
</footer>
</body>
</html>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit d2c6033

Please sign in to comment.