Skip to content

Instantly share code, notes, and snippets.

@TheMuellenator
Forked from angelabauer/index.html
Last active June 23, 2024 17:30
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.
<!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
@parkook
Copy link

parkook commented Jun 3, 2024

I had this challenge to use as less code in html as possible. But now realised the purpose of this challenge was to practice jinja :D so I am going to write it again using more jinja and also I like the way she used her post.py so am going to do it that way.

main.py

from flask import Flask, render_template
from post import Post

post = Post()
blog_title = post.get_data("title")
blog_subtitle = post.get_data("subtitle")
blog_body = post.get_data("body")
blog_id = post.get_data("id")
blogs_qty = len(blog_id)
print(blogs_qty)

app = Flask(__name__)


@app.route('/')
def home():
    return render_template("index.html", title=blog_title, subtitle=blog_subtitle, blogs=blogs_qty)


@app.route('/post/<num>')
def blog_post(num):  # (num) is a string when it comes from url_for() of Jinja from index.html
    number = int(num) - 1
    return render_template("post.html", title=blog_title[number],
                           subtitle=blog_subtitle[number], body=blog_body[number],
                           id=blog_id[number])


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

post.py

import requests


class Post:
    def __init__(self):
        response = requests.get("https://api.npoint.io/ec033ad7c14afde7ce19")
        response.raise_for_status()
        self.data = response.json()

    def get_data(self, enq):
        data_enquiry = [post[enq] for post in self.data]
        return data_enquiry

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Blog</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 range(blogs) %}
    <div class="content">
        <div class="card">
            <h2>{{ title[0 + post] }}</h2>
            <p class="text">{{ subtitle[0 + post] }} </p>
            <a href="{{ url_for('blog_post', num=1+post) }}">Read</a> <!-- num=1 is a string -->
        </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>My Blog {{ id }}</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 {{ id }}</h1></div>
           </div>
        <div class="content">
            <div class="card">
                <h1>{{ title }}</h1>
                <h2>{{ subtitle }}</h2>
                <p> {{ body }}</p>
            </div>
    </div>
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

@NicoChrz
Copy link

NicoChrz commented Jun 8, 2024

I made it a bit different, is it ok?

main.py

from flask import Flask, render_template
from post import Post

app = Flask(__name__)


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


@app.route('/post/<n>')
def blog(n):
    post = Post()
    return render_template('post.html', n=n, Post=post)


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

post.py

import requests


class Post:
    def __init__(self, url='https://api.npoint.io/c790b4d5cab58020d391'):
        self.url = url
        response = requests.get(self.url)
        self.data = response.json()

    def title(self, id_):
        id_ = int(id_)
        for article in self.data:
            if article['id'] == id_:
                return article['title']

    def subtitle(self, id_: int):
        id_ = int(id_)
        for article in self.data:
            if article['id'] == id_:
                return article['subtitle']

    def body(self, id_: int):
        id_ = int(id_)
        for article in self.data:
            if article['id'] == id_:
                return article['body']

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PaninoBlog</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(id_=1) }}</h2>
            <p class="text">{{ Post.subtitle(id_=1) }}</p>
            <a href="http://127.0.0.1:5000/post/1">Read</a>
        </div>
    </div>
    <div class="content">
        <div class="card">
            <h2>{{ Post.title(id_=2) }}</h2>
            <p class="text">{{ Post.subtitle(id_=2) }}</p>
            <a href="http://127.0.0.1:5000/post/2">Read</a>
        </div>
    </div>
</div>
</body>
<footer>
    <p>Made with ♥️ in Aosta.</p>
</footer>
</html>

post.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PaninoBlog</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 style="font-weight:bold">{{ Post.title(id_=n) }}</h2>
                <h3 style="font-weight:normal">{{ Post.subtitle(id_=n) }}</h3>
                <p>{{ Post.body(id_=n) }}</p>
            </div>

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

@TheBrown
Copy link

TheBrown commented Jun 9, 2024

Here is my solution. This also handles the IndexOfRanged error if the blog_id is not found and helps prevent unnecessary API requests .

main.py

from flask import Flask, render_template
import requests

URL = "https://api.npoint.io/c790b4d5cab58020d391"

all_posts = []


def get_all_posts():
    response = requests.get(URL)
    response.raise_for_status()
    data = response.json()
    for post in data:
        all_posts.append(post)


app = Flask(__name__)


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


@app.route('/post/<int:post_id>')
def get_post(post_id):
    if not all_posts:
        get_all_posts()

    try:
        post = [post for post in all_posts if post['id'] == post_id][0]
    except IndexError:
        post = []
        print(f"Not found id: {post_id}")
        pass

    return render_template("post.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 post in all_posts %}
        <div class="content">
            <div class="card">
                <h2>{{ post.title }}</h2>
                <p class="text">{{ post.subtitle }}</p>
                <a href="{{ url_for('get_post', post_id=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">
            <div class="card">
                {% if post %}
                    <h2>{{ post.title }}</h2>
                    <p>{{ post.body }}</p>
                {% else %}
                    <div>No data found.</div>
                {% endif %}
            </div>
        </div>
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

@Rimon83
Copy link

Rimon83 commented Jun 23, 2024

This is my solution, I used only one HTML file to render all blogs or one blog details by using if condition in HTML file:

server.py

from flask import Flask, render_template, url_for
import requests

app = Flask(__name__)

url = "https://api.npoint.io/5956e24d0b30106f8263"
response = requests.get(url=url)
response.raise_for_status()
blogs = response.json()


@app.route("/")
def blog_page():
    return render_template("blog.html", blogs=blogs)


@app.route("/blog/<int:blog_id>")
def show_blog(blog_id):
    index = blog_id - 1
    print(blog_id)
    return render_template("blog.html", blog=blogs[index],
                           blog_id=blog_id)


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

blog.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blogs</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="header">
    <h1>Blogs</h1>
</div>

<div class="container">
    {% if blog_id %}
    <div class="card">
        <h2>{{blog["title"]}}</h2>
        <h4>{{blog["subtitle"]}}</h4>
        <p>{{blog["body"]}}</p>
    </div>

    {% else %}
    {% for blog in blogs %}
    <div class="card">
        <h2>{{blog.title}}</h2>
        <h4>{{blog.subtitle}}</h4>
        <a href="{{ url_for('show_blog', blog_id=blog.id) }}">Read</a>
    </div>
    {% endfor %}
    {% endif %}

</div>
</body>
</html>

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