Skip to content

Commit d2c6033

Browse files
jslvtrjslvtr
authored
Merge pull request #73 from tecladocode/master
2 parents 22f85f1 + 5e398dd commit d2c6033

File tree

116 files changed

+3712
-9
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

116 files changed

+3712
-9
lines changed

‎curriculum/section07/lectures/08_setting_up_microblog_with_flask/README.md

+4
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,7 @@ draft: false
1212
---
1313

1414
# Setting up the Microblog project with Flask
15+
16+
::: tip
17+
List of all code changes made in this lecture: [https://diff-store.com/diff/60ac442d39c7427d815e1d4abd74526d](https://diff-store.com/diff/60ac442d39c7427d815e1d4abd74526d)
18+
:::

‎curriculum/section07/lectures/08_setting_up_microblog_with_flask/end/.env.example

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
MONGODB_URI=

‎curriculum/section07/lectures/08_setting_up_microblog_with_flask/end/.flaskenv

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
FLASK_APP=app
2+
FLASK_ENV=development
3+
FLASK_RUN_PORT=5002

‎curriculum/section07/lectures/08_setting_up_microblog_with_flask/end/.python-version

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
3.9.0

‎curriculum/section07/lectures/08_setting_up_microblog_with_flask/end/app.py

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
from flask import Flask, render_template
2+
3+
4+
app = Flask(__name__)
5+
6+
7+
@app.route("/", methods=["GET"])
8+
def home():
9+
return render_template("home.html")

‎curriculum/section07/lectures/08_setting_up_microblog_with_flask/end/requirements.txt

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
flask
2+
python-dotenv
3+
pymongo[srv]

‎curriculum/section07/lectures/08_setting_up_microblog_with_flask/end/static/css/styles.css

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
html {
2+
font-family: Lato, sans-serif;
3+
}
4+
5+
*,
6+
*::after,
7+
*::before {
8+
box-sizing: inherit;
9+
}
10+
11+
body {
12+
box-sizing: border-box;
13+
margin: 0;
14+
}
15+
16+
.navbar {
17+
max-width: 640px;
18+
margin: 50px auto;
19+
padding: 0 20px;
20+
display: flex;
21+
flex-direction: row;
22+
justify-content: space-between;
23+
font-size: 24px;
24+
}
25+
26+
.navbar__brand {
27+
display: flex;
28+
align-items: center;
29+
}
30+
31+
.navbar__logo {
32+
margin-right: 30px;
33+
}
34+
35+
.navbar__navigation {
36+
display: flex;
37+
flex-direction: row;
38+
padding: 0;
39+
list-style: none;
40+
color: #5c6b70;
41+
}
42+
43+
.navbar__navigation-item {
44+
margin-left: 50px;
45+
}
46+
47+
.navbar__link {
48+
text-decoration: none;
49+
color: inherit;
50+
}
51+
52+
.main {
53+
max-width: 450px;
54+
margin: 0 auto;
55+
padding: 0 20px;
56+
}
57+
58+
.form {
59+
display: flex;
60+
flex-direction: column;
61+
align-items: flex-end;
62+
}
63+
64+
.form__input {
65+
width: 100%;
66+
}
67+
68+
.form__label {
69+
display: block;
70+
margin-bottom: 10px;
71+
}
72+
73+
.form__textarea {
74+
width: inherit;
75+
font-size: 18px;
76+
padding: 12px 20px;
77+
border: none;
78+
background-color: #f3f6f6;
79+
margin-bottom: 10px;
80+
resize: none;
81+
}
82+
83+
.form__submit {
84+
background-color: #3cd0ff;
85+
border: none;
86+
font-size: 18px;
87+
font-weight: bold;
88+
padding: 5px 30px;
89+
border-radius: 20px;
90+
color: white;
91+
cursor: pointer;
92+
}
93+
94+
.form__submit:hover {
95+
background-color: #18c1e1;
96+
}
97+
98+
.entry {
99+
margin-top: 50px;
100+
}
101+
102+
.entry__title {
103+
display: inline;
104+
font-size: 18px;
105+
}
106+
107+
.entry__date {
108+
color: #5c6b70;
109+
}
110+
111+
.entry__content {
112+
font-size: 16px;
113+
line-height: 150%;
114+
}
115+
116+
.footer {
117+
background-color: #323f43;
118+
padding: 40px 0;
119+
margin-top: 50px;
120+
border-top: 4px solid black;
121+
color: white;
122+
font-size: 12px;
123+
}
124+
125+
.footer__content {
126+
max-width: 640px;
127+
margin: 0 auto;
128+
padding: 0 20px;
129+
display: flex;
130+
flex-direction: row;
131+
}
132+
133+
.footer .left {
134+
flex-grow: 2;
135+
display: flex;
136+
flex-direction: column;
137+
}
138+
139+
.footer .right {
140+
flex-grow: 1;
141+
display: flex;
142+
flex-direction: row;
143+
}
144+
145+
.footer__column {
146+
display: flex;
147+
flex-direction: column;
148+
margin-left: 50px;
149+
}
150+
151+
.footer__item {
152+
margin-bottom: 5px;
153+
color: inherit;
154+
text-decoration: none;
155+
}
156+
157+
.footer__item:hover {
158+
text-decoration: underline;
159+
}

‎curriculum/section07/lectures/08_setting_up_microblog_with_flask/end/static/logo.svg

+5
Loading

‎curriculum/section07/lectures/08_setting_up_microblog_with_flask/end/templates/home.html

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Microblog</title>
7+
<link rel="stylesheet" href="/static/css/styles.css" />
8+
</head>
9+
<body>
10+
<header class="navbar">
11+
<div class="navbar__brand">
12+
<img class="navbar__logo" src="/static/logo.svg" alt="The Microblog logo" />Microblog
13+
</div>
14+
<ul class="navbar__navigation">
15+
<li class="navbar__navigation-item">
16+
<a href="#" class="navbar__link">Recent</a>
17+
</li>
18+
<li class="navbar__navigation-item">
19+
<a href="#" class="navbar__link">Calendar</a>
20+
</li>
21+
</ul>
22+
</header>
23+
<main class="main">
24+
<section>
25+
<h1>Add new entry</h1>
26+
<form class="form" action="/entry" method="POST">
27+
<p class="form__input">
28+
<label for="entry" class="form__label">Entry contents:</label>
29+
<textarea name="content" id="entry" class="form__textarea"></textarea>
30+
</p>
31+
<button type="submit" class="form__submit">Add entry</button>
32+
</form>
33+
</section>
34+
<section>
35+
<h1>Recent posts</h1>
36+
<article class="entry">
37+
<div>
38+
<h2 class="entry__title">A bit of a chill day today</h2>
39+
<time class="entry__date" datetime="24-10-2019">• Oct 24</time>
40+
</div>
41+
<p class="entry__content">
42+
Today I couldn't do much programming, but that's OK! Can't be too awesome every day now!
43+
</p>
44+
</article>
45+
</section>
46+
</main>
47+
<footer class="footer">
48+
<div class="footer__content">
49+
<section class="left">
50+
<a class="footer__item">Made by Jose Salvatierra</a>
51+
<a class="footer__item">Check out my other projects</a>
52+
</section>
53+
<section class="right">
54+
<div class="footer__column">
55+
<a class="footer__item">Recent</a>
56+
<a class="footer__item">Calendar</a>
57+
</div>
58+
<div class="footer__column">
59+
<a class="footer__item" href="#">About</a>
60+
<a class="footer__item">How this was made</a>
61+
</div>
62+
</section>
63+
</div>
64+
</footer>
65+
</body>
66+
</html>

‎curriculum/section07/lectures/08_setting_up_microblog_with_flask/start/home.html

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Microblog</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<header class="navbar">
11+
<div class="navbar__brand">
12+
<img class="navbar__logo" src="logo.svg" alt="The Microblog logo" />Microblog
13+
</div>
14+
<ul class="navbar__navigation">
15+
<li class="navbar__navigation-item">
16+
<a href="#" class="navbar__link">Recent</a>
17+
</li>
18+
<li class="navbar__navigation-item">
19+
<a href="#" class="navbar__link">Calendar</a>
20+
</li>
21+
</ul>
22+
</header>
23+
<main class="main">
24+
<section>
25+
<h1>Add new entry</h1>
26+
<form class="form" action="/entry" method="POST">
27+
<p class="form__input">
28+
<label for="entry" class="form__label">Entry contents:</label>
29+
<textarea name="content" id="entry" class="form__textarea"></textarea>
30+
</p>
31+
<button type="submit" class="form__submit">Add entry</button>
32+
</form>
33+
</section>
34+
<section>
35+
<h1>Recent posts</h1>
36+
<article class="entry">
37+
<div>
38+
<h2 class="entry__title">A bit of a chill day today</h2>
39+
<time class="entry__date" datetime="24-10-2019">• Oct 24</time>
40+
</div>
41+
<p class="entry__content">
42+
Today I couldn't do much programming, but that's OK! Can't be too awesome every day now!
43+
</p>
44+
</article>
45+
</section>
46+
</main>
47+
<footer class="footer">
48+
<div class="footer__content">
49+
<section class="left">
50+
<a class="footer__item">Made by Jose Salvatierra</a>
51+
<a class="footer__item">Check out my other projects</a>
52+
</section>
53+
<section class="right">
54+
<div class="footer__column">
55+
<a class="footer__item">Recent</a>
56+
<a class="footer__item">Calendar</a>
57+
</div>
58+
<div class="footer__column">
59+
<a class="footer__item" href="#">About</a>
60+
<a class="footer__item">How this was made</a>
61+
</div>
62+
</section>
63+
</div>
64+
</footer>
65+
</body>
66+
</html>

‎curriculum/section07/lectures/08_setting_up_microblog_with_flask/start/logo.svg

+5
Loading

0 commit comments

Comments
 (0)