added infrastructure for images

2 years ago · 83f8c30219
parent 5d056645c6
commit 83f8c30219
5 changed files with 79 additions and 20 deletions
--- a/make-website.py
+++ b/make-website.py
@ -2,6 +2,7 @@ import datetime
 import json
 import re
 import shutil
+import hashlib

 with open('web/templates/review.html', 'r') as f:
    REVIEW_TEMPLATE = f.read()
@ -25,7 +26,8 @@ def generate_website(website_source: str, json_source: str, dest: str):
    website = populate_template_str(website_content, {
        'index': generate_index(data['reviews']),
        'pesto_ratings': '\n\n'.join(generate_review_html(review) for review in data['reviews']),
-        'current_year': str(datetime.date.today().year)
+        'current_year': str(datetime.date.today().year),
+        'css_hash': stylesheet_hash(),
    })

    with open(dest, 'w') as f:
@ -46,6 +48,7 @@ def generate_review_html(review: dict) -> str:
        , 'rating_price': review['rating_value']['price']
        , 'rating_size': review['rating_value']['size']
        , 'rating': review['final_verdict']['string']
+        , 'image_items': generate_image_items(review)
    })

 def generate_index(reviews):
@ -61,6 +64,23 @@ def populate_template_str(templatestr, fields: dict[str, str]):

    return re.sub(r'{([A-Z_]+)}', fill, templatestr)

+def generate_image_items(review: dict) -> str:
+    return '\n'.join(
+        '<div class="image-item"><img src="img/{}" /></div>'.format(img) 
+        for img in review.get('images', [])
+    )
+
+def stylesheet_hash():
+    hash = hashlib.sha256()
+    with open("web/style.css", 'rb') as f:
+        while True:
+            chunk = f.read(hash.block_size)
+            if not chunk:
+                break
+            hash.update(chunk)
+    return hash.hexdigest()
+
+
 if __name__ == '__main__':
    generate_website('web/templates/index.html', 'reviews.json', 'web/index.html')
    shutil.copy('reviews.json', 'web/reviews.json')
--- a/parse-md.py
+++ b/parse-md.py
@ -303,6 +303,11 @@ class ReviewPostprocessor:
            x.strip() for x in ingredients.rstrip('.').split(',')
        ]

+    def images(self, images: str):
+        return [ 
+            x.strip() for x in images.split(',')
+        ]
+
    def rating_value(self, table: Dict[str, str]):
        new = dict()
        for key, value in table.items():
--- a/web/style.css
+++ b/web/style.css
@ -30,6 +30,7 @@ h1, h2, h3, h4, h5 {

 p {
    font-family: 'Times New Roman', Times, serif;
+    text-align: justify;
 }

 header {
@ -49,7 +50,7 @@ header h1 span {
 .thin {
    font-weight: 300;
 } 
-.final-raiting {
+.final-rating {
    font-size: 2rem;
 }

@ -63,6 +64,14 @@ footer {
    width: 90vw;
 }

+footer p {
+    text-align: left;
+}
+
+footer p:last-child {
+    text-align: right;
+}
+
 table, tr, td, th {
    border-collapse: collapse;
 }
@ -107,6 +116,22 @@ body.dark-theme a {
    color: darkturquoise;
 }

+.image-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.image-item {
+    flex-shrink: 1;
+    flex-basis: 260px;
+    margin: 8px;
+    float: left;
+}
+
+.image-container img {
+    width: 100%;
+}
+
@media (prefers-color-scheme: dark) {
    body {
        --table-border-color: #222;
@ -128,4 +153,8 @@ body.dark-theme a {
    table {
        width: 100%;
    }
+
+    .final-rating {
+        font-size: 1.5rem;
+    }
 }
--- a/web/templates/index.html
+++ b/web/templates/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="style.css"/>
+    <link rel="stylesheet" href="style.css?v={CSS_HASH}"/>
    <title>Blog of Pesto</title>
 </head>
 <body>
--- a/web/templates/review.html
+++ b/web/templates/review.html
@ -1,23 +1,28 @@
 <h1 id="{REVIEW_ID}">{TITLE}</h1>
+<div class="review-body">
+    <div class="image-container">
+        {IMAGE_ITEMS}        
+    </div>

-<p><em>Date:</em> {DATE}</p>
+    <p><em>Date:</em> {DATE}</p>

-<p><em>Notes:</em> {NOTES}</p>
+    <p><em>Notes:</em> {NOTES}</p>

-<p><em>Ingredients:</em> {INGREDIENTS}</p>
+    <p><em>Ingredients:</em> {INGREDIENTS}</p>

-<table>
-    <tr>
-        <th>Category</th> <th>Score / Value</th>
-    </tr>
+    <table>
+        <tr>
+            <th>Category</th> <th>Score / Value</th>
+        </tr>
        
-    <tr> <td>Taste</td> <td>{RATING_TASTE}</td> </tr>
-    <tr> <td>Consistency</td> <td>{RATING_CONSISTENCY}</td> </tr>
-    <tr> <td>Ingredients</td> <td>{RATING_INGREDIENTS}</td> </tr>
-    <tr> <td>Price</td> <td>{RATING_PRICE}</td> </tr>
-    <tr> <td>Size</td> <td>{RATING_SIZE}</td> </tr>
-</table>
+        <tr> <td>Taste</td> <td>{RATING_TASTE}</td> </tr>
+        <tr> <td>Consistency</td> <td>{RATING_CONSISTENCY}</td> </tr>
+        <tr> <td>Ingredients</td> <td>{RATING_INGREDIENTS}</td> </tr>
+        <tr> <td>Price</td> <td>{RATING_PRICE}</td> </tr>
+        <tr> <td>Size</td> <td>{RATING_SIZE}</td> </tr>
+    </table>

-<p class="final-raiting">Final raiting: {RATING}</p>
+    <p class="final-rating">Final rating: {RATING}</p>

-<hr/>
+    <hr/>
+</div>