Skip to content

Instantly share code, notes, and snippets.

@TheMuellenator

TheMuellenator/index.html

Forked from angelabauer/index.html
Last active May 2, 2025 14:14
Show Gist options
  • Save TheMuellenator/7c6a08a3df3b94a28d1a867628481910 to your computer and use it in GitHub Desktop.
Save TheMuellenator/7c6a08a3df3b94a28d1a867628481910 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for post in all_posts: %}
<div class="content">
<div class="card ">
<h2>{‌{ post.title }}</h2>
<p>{‌{ post.subtitle }}</p>
<a href="{‌{ url_for('show_post', index=post.id) }}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
Raw
main.py
from flask import Flask, render_template
from post import Post
import requests
posts = requests.get("https://api.npoint.io/c790b4d5cab58020d391").json()
post_objects = []
for post in posts:
post_obj = Post(post["id"], post["title"], post["subtitle"], post["body"])
post_objects.append(post_obj)
app = Flask(__name__)
@app.route('/')
def get_all_posts():
return render_template("index.html", all_posts=post_objects)
@app.route("/post/<int:index>")
def show_post(index):
requested_post = None
for blog_post in post_objects:
if blog_post.id == index:
requested_post = blog_post
return render_template("post.html", post=requested_post)
if __name__ == "__main__":
app.run(debug=True)
Raw
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h1> {‌{ post.title }}</h1>
<h2> {‌{ post.subtitle }}</h2>
<p> {‌{ post.body }}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
Raw
post.py
class Post:
def __init__(self, post_id, title, subtitle, body):
self.id = post_id
self.title = title
self.subtitle = subtitle
self.body = body
@Rens-M
Copy link

Rens-M commented Mar 12, 2025

I got stuck a bit I tried to use an if in the blog template to get the post id to match the post id passed thought the URL...

couldn't get it to work. Peeked at the sollution which imports posts but that was not addressed yet and there had to be an other way... ended up with the following and working:

main.py

from flask import Flask, render_template
import requests


app = Flask(__name__)

def get_blog():
    blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
    blog_response = requests.get(blog_url)
    all_posts = blog_response.json()
    return all_posts


@app.route('/')
def home():
    return render_template("index.html", posts=get_blog())

@app.route('/post/<blog_id>')
def post(blog_id):
    blog_entry=get_blog()[(int(blog_id) - 1)]
    return render_template("post.html", post=blog_entry)

if __name__ == "__main__":
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
    <div class="top">
        <div class="title"><h1>My Blog</h1></div>
    </div>
{% for blog_post in posts %}
     <div class="content">
        <div class="card">
            <h2>{{ blog_post["title"] }}</h2>
            <p class="text">{{ blog_post["subtitle"] }}</p>
            <a href="{{ url_for('post', blog_id=blog_post['id']) }}">Read</a>
        </div>
    </div>
{% endfor %}
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

post.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{  post['title']  }}</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
    <div class="top">
        <div class="title"><h1>My Blog</h1></div>
           </div>

        <div class="content">
            <div class="card">
                <h2>{{  post['title']  }}</h2>
                <p>{{  post['body']  }}</p>
        </div>


    </div>
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

@gillesvm
Copy link

gillesvm commented Mar 12, 2025 •
edited
Loading

I did not use the post.py file, I took a simpler route for me:

main.py

import requests

app = Flask(__name__)

blog_posts = requests.get("https://api.npoint.io/c790b4d5cab58020d391").json()

@app.route('/')
def home():
    return render_template("index.html", blog=blog_posts)

@app.route('/post/<id>')
def get_post(id):
    adjusted_id = int(id) -1
    post = blog_posts[adjusted_id]
    return render_template("post.html", post=post)

index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
    <div class="top">
        <div class="title"><h1>My Blog</h1></div>
    </div>
    {% for post in blog: %}
        <div class="content">
            <div class="card">
                <h2>{{post["title"]}}t</h2>
                <p class="text">{{post["subtitle"]}} </p>
                <a href="{{ url_for('get_post', id=post['id'])}}">Read</a>
            </div>
        </div>
    {% endfor %}
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>

post.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
    <div class="top">
        <div class="title"><h1>My Blog</h1></div>
           </div>
        <div class="content">
            <div class="card">
                <h2>{{post["title"]}}</h2>
                <p>{{post["body"]}}</p>
            </div>
    </div>
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

@PSarkodie
Copy link

main.py

from flask import Flask, render_template
import requests


app = Flask(__name__)
posts = requests.get("http://api.npoint.io/c790b4d5cab58020d391").json()

@app.route('/')
def home():
    return render_template("index.html", posts=posts)

@app.route('/post/<int:post_id>')
def get_posts(post_id):
    return render_template("post.html", posts=posts, id=post_id)
if __name__ == "__main__":
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
    <div class="top">
        <div class="title"><h1>My Blog</h1></div>
    </div>
    {% for post in posts %}
    <div class="content">
        <div class="card">
            <h2>{{ post["title"] }}</h2>
            <p class="text">{{ post["subtitle"] }}</p>
            <a href="post/{{post['id']}}">Read</a>
        </div>
    </div>
    {% endfor %}
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

post.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
    <div class="top">
        <div class="title"><h1>My Blog</h1></div>
           </div>
        <div class="content">
            {% for post in posts %}
                {% if post["id"] == id %}
                <div class="card">
                    <h1>{{ post["title"] }}</h1>
                    <h2>{{ post["subtitle"] }}</h2>
                    <p>{{ post["body"] }}</p>
                {% endif %}
            {% endfor %}
            </div>

    </div>
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

@pradaboots
Copy link

couldnt really figure out how to integrate the class into my code but what ive done stil works

from flask import Flask, render_template
import requests

app = Flask(name)

@app.route('/')
def home():
blogs_endpoint = "https://api.npoint.io/c790b4d5cab58020d391"
all_posts = requests.get(blogs_endpoint).json()
return render_template("index.html" , posts=all_posts)

@app.route("/post/<blog_id>")
def get_post(blog_id):
blogs_endpoint = "https://api.npoint.io/c790b4d5cab58020d391"
all_posts = requests.get(blogs_endpoint).json()
return render_template("post.html", post=all_posts[int(blog_id) - 1])

if name == "main":
app.run(debug=True)

@pradaboots
Copy link

<title>Title</title>

My Blog

{%for post in posts%}

{{post["title"]}}

{{post["subtitle"]}}

Read
{% endfor %}

Made with ♥️ in London.

@pradaboots
Copy link

<title>Title</title>

My Blog

{{post["title"]}}

{{ post["subtitle"] }}

{{post["body"]}}

</div>

Made with ♥️ in London.

@TamerC50
Copy link

I don't know what is the use of post.py file in this project? If we can do this without that file as I did. Below is the complete project code

main.py

from flask import Flask, render_template
import requests

app = Flask(__name__)

url = 'https://api.npoint.io/c790b4d5cab58020d391'
response = requests.get(url)
all_posts = response.json()


@app.route('/')
def home():
    return render_template("index.html", posts=all_posts)


@app.route('/post/<int:post_id>')
def blog(post_id):
    return render_template("post.html", post_id=post_id, posts=all_posts)


if __name__ == "__main__":
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
    <div class="top">
        <div class="title"><h1>My Blog</h1></div>
    </div>
    {% for post in posts: %}
    <div class="content">
        <div class="card">
            <h2>{{ post['title'] }}</h2>
            <p class="text"> {{ post['subtitle'] }} </p>
            <a href=" {{ url_for('blog', post_id=post['id']) }}">Read</a>
        </div>
    </div>
    {% endfor %}
<!--    <div class="content">-->
<!--        <div class="card">-->
<!--            <h2>Another blog post</h2>-->
<!--            <p class="text">Lorem ipsum dolor sit </p>-->
<!--            <a href="#">Read</a>-->
<!--        </div>-->
<!--    </div>-->
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

post.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
    <div class="top">
        <div class="title"><h1>My Blog</h1></div>
           </div>
    {% for post in posts: %}
    {% if post['id'] == post_id: %}
        <div class="content">
            <div class="card">
                <h1> {{ post['title'] }}</h1>
                <h2> {{ post['subtitle'] }}</h2>
                <p>{{ post['body'] }}</p>
            </div>

    </div>
    {% endif %}
    {% endfor %}
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

@TamerC50
Copy link

I loved your approach
thanks for sharing it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment