From 20fce270a5a9692e365e55fe8b64fb6026ff8a6b Mon Sep 17 00:00:00 2001 From: m Date: Wed, 25 Mar 2026 05:03:29 +0100 Subject: [PATCH] inject css --- app.py | 22 +++++++++++++++++----- content | 2 +- static/css/components/image.css | 16 ++++++++++++++++ templates/base.html | 21 +-------------------- templates/post_detail.html | 6 ++++-- 5 files changed, 39 insertions(+), 28 deletions(-) create mode 100644 static/css/components/image.css diff --git a/app.py b/app.py index 29e0518..a323a6e 100644 --- a/app.py +++ b/app.py @@ -106,20 +106,32 @@ def about(): return render_template('about.html', about_txt = about_txt, blog_title = TITLE) - - @app.route('/post/') def post_detail(post_id): - # One call to get the data + the extra logic (templates/timelines) + context = {"used_components": set()} + post = get_enriched_post(post_id, BLOG_POSTS) - if not post: return "Post not found", 404 comments = get_comments_for_post(post_id) - return render_template('post_detail.html', post=post, comments=comments, blog_title = TITLE) + context["used_components"].add("image") + #processed_content = render_content(post['content'], context=context) + + css_files = [] + for comp in context["used_components"]: + css_files.append(f"css/components/{comp}.css") + + return render_template( + "post_detail.html", + post=post, + comments=comments, + blog_title = TITLE, + component_css=css_files + ) + @app.route('/content/image/') diff --git a/content b/content index bf7589d..e565d6f 160000 --- a/content +++ b/content @@ -1 +1 @@ -Subproject commit bf7589d017ab8d6b7dd82f5e2c3f395435153a5e +Subproject commit e565d6fc602e41267c4e2a1fa5d9ee6ee655c26c diff --git a/static/css/components/image.css b/static/css/components/image.css new file mode 100644 index 0000000..6722109 --- /dev/null +++ b/static/css/components/image.css @@ -0,0 +1,16 @@ +.image-container { + margin-top: 10px; + margin-bottom: 10px; + width: 100%; + height: 20vh; /* Show 20% of the viewport height */ + overflow: hidden; /* Hide parts of the image outside the container */ + position: relative; /* Position context for the image */ +} + +.image-container img { + width: 100%; /* Make the image fit the container width */ + height: auto; /* Maintain aspect ratio */ + position: absolute; /* Position image relative to container */ + top: 50%; /* Move image down by 50% of its height */ + transform: translateY(-50%); /* Pull it back up by 50% of its own height */ +} diff --git a/templates/base.html b/templates/base.html index 83fc7d7..d07776e 100644 --- a/templates/base.html +++ b/templates/base.html @@ -45,26 +45,7 @@ }; - + diff --git a/templates/post_detail.html b/templates/post_detail.html index a9d5869..da48e4e 100644 --- a/templates/post_detail.html +++ b/templates/post_detail.html @@ -1,5 +1,7 @@ -{% extends "base.html" %} {% block title %}{{ post.title }} - Simple Blog -Template{% endblock %} {% block content %} {% from +{% for css in component_css %} + +{% endfor %} {% extends "base.html" %} {% block title %}{{ post.title }} - +Simple Blog Template{% endblock %} {% block content %} {% from "components/post_renderer.html" import render_post %} {% from "components/comment_renderer.html" import render_comment %}