Update materials

Author: acsany

code-image-generator/source_code_step_01/templates/base.html

@@ -4,7 +4,9 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>
-      Code to Image {% block title %}{% endblock %}
+      Code to Image
+      {% block title %}
+      {% endblock title %}
     </title>
     <link rel="stylesheet"
           type="text/css"

code-image-generator/source_code_step_02/templates/base.html

@@ -4,7 +4,9 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>
-      Code to Image {% block title %}{% endblock %}
+      Code to Image
+      {% block title %}
+      {% endblock title %}
     </title>
     <link rel="stylesheet"
           type="text/css"

code-image-generator/source_code_step_03/app.py

@@ -38,15 +38,6 @@ def reset_session():
     return redirect(url_for("code"))
 
 
-@app.route("/save_style", methods=["POST"])
-def save_style():
-    if request.form.get("style") is not None:
-        session["style"] = request.form.get("style")
-    if request.form.get("code") is not None:
-        session["code"] = request.form.get("code")
-    return redirect(url_for("style"))
-
-
 @app.route("/style", methods=["GET"])
 def style():
     if session.get("style") is None:
@@ -56,10 +47,19 @@ def style():
         "message": "Select Your Style 🎨",
         "code": session["code"],
         "all_styles": list(get_all_styles()),
-        "style_bg_color": formatter.style.background_color,
         "style_definitions": formatter.get_style_defs(),
+        "style_bg_color": formatter.style.background_color,
         "highlighted_code": highlight(
             session["code"], Python3Lexer(), formatter
         ),
     }
     return render_template("style_selection.html", **context)
+
+
+@app.route("/save_style", methods=["POST"])
+def save_style():
+    if request.form.get("style") is not None:
+        session["style"] = request.form.get("style")
+    if request.form.get("code") is not None:
+        session["code"] = request.form.get("code")
+    return redirect(url_for("style"))

code-image-generator/source_code_step_03/templates/base.html

@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>
       Code to Image {% block title %}{% endblock %}
+      Code to Image
+      {% block title %}
+      {% endblock title %}
     </title>
     <link rel="stylesheet"
           type="text/css"

code-image-generator/source_code_step_04/app.py

@@ -6,7 +6,7 @@
 from pygments.lexers import Python3Lexer
 from pygments.styles import get_all_styles
 
-from utils import take_screenshot
+from utils import take_screenshot_from_url
 
 app = Flask(__name__)
 app.secret_key = "mysecretkey"
@@ -42,15 +42,6 @@ def reset_session():
     return redirect(url_for("code"))
 
 
-@app.route("/save_style", methods=["POST"])
-def save_style():
-    if request.form.get("style") is not None:
-        session["style"] = request.form.get("style")
-    if request.form.get("code") is not None:
-        session["code"] = request.form.get("code")
-    return redirect(url_for("style"))
-
-
 @app.route("/style", methods=["GET"])
 def style():
     if session.get("style") is None:
@@ -60,24 +51,33 @@ def style():
         "message": "Select Your Style 🎨",
         "code": session["code"],
         "all_styles": list(get_all_styles()),
-        "style_bg_color": formatter.style.background_color,
         "style_definitions": formatter.get_style_defs(),
+        "style_bg_color": formatter.style.background_color,
         "highlighted_code": highlight(
             session["code"], Python3Lexer(), formatter
         ),
     }
     return render_template("style_selection.html", **context)
 
 
+@app.route("/save_style", methods=["POST"])
+def save_style():
+    if request.form.get("style") is not None:
+        session["style"] = request.form.get("style")
+    if request.form.get("code") is not None:
+        session["code"] = request.form.get("code")
+    return redirect(url_for("style"))
+
+
 @app.route("/image", methods=["GET"])
 def image():
-    session_dict = {
+    session_data = {
         "name": app.config["SESSION_COOKIE_NAME"],
         "value": request.cookies.get(app.config["SESSION_COOKIE_NAME"]),
         "url": request.host_url,
     }
     target_url = request.host_url + url_for("style")
-    image_bytes = take_screenshot(target_url, session_dict)
+    image_bytes = take_screenshot_from_url(target_url, session_data)
     context = {
         "message": "Done! 🎉",
         "image_b64": base64.b64encode(image_bytes).decode("utf-8"),

code-image-generator/source_code_step_04/static/styles.css

@@ -60,11 +60,11 @@ select {
     line-height: 1.4em;
 }
 
-.code_picture {
+.code-picture {
     text-align: center;
 }
 
-img {
+.code-picture img {
     margin: 1em 0;
     border: 1px solid #cecece;
     max-width: 80%;

code-image-generator/source_code_step_04/templates/base.html

@@ -4,7 +4,9 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>
-      Code to Image {% block title %}{% endblock %}
+      Code to Image
+      {% block title %}
+      {% endblock title %}
     </title>
     <link rel="stylesheet"
           type="text/css"

code-image-generator/source_code_step_04/utils.py

@@ -1,14 +1,14 @@
 from playwright.sync_api import sync_playwright
 
 
-def take_screenshot(target, session_dict):
+def take_screenshot_from_url(url, session_data):
     with sync_playwright() as playwright:
         webkit = playwright.webkit
         browser = webkit.launch()
         browser_context = browser.new_context(device_scale_factor=2)
-        browser_context.add_cookies([session_dict])
+        browser_context.add_cookies([session_data])
         page = browser_context.new_page()
-        page.goto(target)
+        page.goto(url)
         screenshot_bytes = page.locator(".code").screenshot()
         browser.close()
         return screenshot_bytes