Skip to content

Instantly share code, notes, and snippets.

@TheMuellenator
Forked from angelabauer/index.html
Last active June 22, 2026 15:42
Show Gist options
  • Select an option

  • Save TheMuellenator/7c6a08a3df3b94a28d1a867628481910 to your computer and use it in GitHub Desktop.

Select an option

Save TheMuellenator/7c6a08a3df3b94a28d1a867628481910 to your computer and use it in GitHub Desktop.
<!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>
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)
<!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>
class Post:
def __init__(self, post_id, title, subtitle, body):
self.id = post_id
self.title = title
self.subtitle = subtitle
self.body = body
@viktoron-git

Copy link
Copy Markdown

post.py
image

main.py
image

post.html
image

@jordankrim

Copy link
Copy Markdown

I did not use the post.py but I had a problem with api.npoint.io which didn't work. I was getting an SSL error with regards to wrong version so AI saved the day and pointed me to jsonbin.io which has a stricter requirement for the json (needs [] around it) and seems to have another layer so needs to be accessed a bit differently as shown in my code below:

main.py

from flask import Flask, render_template
import requests


app = Flask(__name__)

@app.route('/')
def home():
    # No workie!!!
    # blog_url = "https://api.npoint.io/eb190554230558ceb788"
    blog_url = "https://api.jsonbin.io/v3/qs/6a393cc2f5f4af5e291d29d6"
    response = requests.get(blog_url, verify=False)
    print(response.text)
    all_posts = response.json()
    post = all_posts['record']
    print(post)
    return render_template('index.html', all_posts=post)

@app.route('/blog/<blog_id>')
def get_blog(blog_id):
    # No workie!!!
    # blog_url = "https://api.npoint.io/eb190554230558ceb788"
    blog_url = "https://api.jsonbin.io/v3/qs/6a393cc2f5f4af5e291d29d6"
    request = requests.get(blog_url, verify=False)
    print(request.text)
    all_posts = request.json()
    print(all_posts)
    post = all_posts['record'][int(blog_id)-1]
    print(post)
    return render_template('blog.html', post=post)


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 posts in all_posts: %}
    <div class="content">
        <div class="card">
            <h2>{{ posts.title }}</h2>
            <p class="text">{{ posts.subtitle }}</p>
            <a href="{{ url_for('get_blog', blog_id=posts.id) }}">Read</a>
        </div>
    </div>
    {% endfor %}
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

blog.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>

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