Add sample project

Author: acsany

code-image-generator/README.md

@@ -0,0 +1,41 @@
+# Build a Code Image Generator with Flask, Pygments, and Playwright
+
+Follow the [step-by-step instructions](https://realpython.com/code-image-generator/) on Real Python.
+
+## Setup
+
+You can run the provided example project on your local machine by following the steps outlined below.
+
+Create a new virtual environment:
+
+```bash
+python3 -m venv venv/
+```
+
+Activate the virtual environment:
+
+```bash
+source ./venv/bin/activate
+```
+
+Navigate to the folder for the step you're currently on.
+
+Install the dependencies for this project if you haven't installed them yet:
+
+```bash
+(venv) $ python -m pip install -r requirements.txt
+```
+
+Next, you need to install Playwright:
+
+```bash
+(venv) $  playwright install
+```
+
+Finally, run the Flask development server
+
+```bash
+(venv) $ flask run
+```
+
+Now you can navigate to the address that's shown in the output when you start the server. Commonly, that's `http://localhost:5000/`.

code-image-generator/source_code_final/app.py

@@ -0,0 +1,91 @@
+import base64
+
+from flask import Flask, render_template, request, session, url_for
+from pygments import highlight
+from pygments.formatters import HtmlFormatter
+from pygments.lexers import Python3Lexer
+from pygments.styles import get_all_styles
+
+from utils import make_screenshot
+
+app = Flask(__name__)
+app.secret_key = "mysecretkey"
+
+
+DEFAULT_CODE = "print('Hello, World!')"
+DEFAULT_THEME = "default"
+
+
+@app.route("/", methods=["POST", "GET"])
+def code():
+    if request.method == "POST" and "reset" in request.form.keys():
+        session["code"] = DEFAULT_CODE
+    code = session.get("code") or DEFAULT_CODE
+    lines = code.split("\n")
+    context = {
+        "message": "Add Python Code 🐍",
+        "code": code,
+        "num_lines": len(lines),
+        "max_chars": len(max(lines, key=len)),
+    }
+    app.logger.info(context)
+    return render_template("code_input.html", **context)
+
+
+@app.route("/theme", methods=["POST", "GET"])
+def theme():
+    if request.method == "POST":
+        session["code"] = request.form.get("code") or session.get("code")
+        session["theme"] = request.form.get("theme") or session.get("theme")
+    theme = session.get("theme") or DEFAULT_THEME
+    formatter = HtmlFormatter(style=theme)
+    context = {
+        "message": "Select Your Theme 🎨",
+        "code": session["code"],
+        "all_themes": list(get_all_styles()),
+        "theme": theme,
+        "theme_bg_color": formatter.style.background_color,
+        "style": formatter.get_style_defs(),
+        "code_highlighted": highlight(
+            session["code"], Python3Lexer(), formatter
+        ),
+    }
+    return render_template("theme_selection.html", **context)
+
+
+@app.route("/preview", methods=["POST", "GET"])
+def preview():
+    if request.method == "POST":
+        session["theme"] = request.form.get("theme") or session.get("theme")
+    theme = session.get("theme")
+    formatter = HtmlFormatter(style=theme)
+    context = {
+        "message": "Preview Your Picture 🖼️",
+        "code": session["code"],
+        "all_themes": list(get_all_styles()),
+        "theme": theme,
+        "theme_bg_color": formatter.style.background_color,
+        "style": formatter.get_style_defs(),
+        "code_highlighted": highlight(
+            session["code"], Python3Lexer(), formatter
+        ),
+    }
+    return render_template("preview.html", **context)
+
+
+@app.route("/screenshot", methods=["POST", "GET"])
+def screenshot():
+    context = {"message": "No screenshot yet 👀"}
+    if request.method == "POST":
+        session["theme"] = request.form.get("theme") or session.get("theme")
+        session_dict = {
+            "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("theme")
+        screenshot_bytes = make_screenshot(target_url, session_dict)
+        context["message"] = "Done! 🎉"
+        context["screenshot_b64"] = base64.b64encode(screenshot_bytes).decode()
+    return render_template("screenshot.html", **context)
+    return render_template("screenshot.html", **context)

code-image-generator/source_code_final/requirements.txt

@@ -0,0 +1,12 @@
+blinker==1.6.2
+click==8.1.3
+Flask==2.3.2
+greenlet==2.0.2
+itsdangerous==2.1.2
+Jinja2==3.1.2
+MarkupSafe==2.1.3
+playwright==1.35.0
+pyee==9.0.4
+Pygments==2.15.1
+typing_extensions==4.7.1
+Werkzeug==2.3.6

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

@@ -0,0 +1,74 @@
+* {
+    box-sizing: border-box;
+
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+    font-size: 20px;
+    line-height: 1.3em;
+}
+
+textarea,
+pre {
+    font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+}
+
+h1 {
+    font-size: 2em;
+    text-align: center;
+}
+
+h1 a {
+    text-decoration: none;
+    color: inherit;
+}
+
+span {
+    color: deepskyblue;
+}
+
+button,
+select {
+    cursor: pointer;
+    font-size: 100%;
+    margin: 0.25em;
+    min-width: 8em;
+}
+
+.columns {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+
+.code_input,
+.highlight {
+    box-shadow: #767676 0px 20px 30px -10px;
+    border-radius: 0.5em;
+    padding: 1em 2em;
+    min-width: 32em;
+    max-width: 100%;
+    display: inline-block;
+    min-height: 12em;
+    text-align: left;
+    border: 1px solid #cecece;
+    margin: 1em;
+    line-height: 1.4em;
+    overflow:scroll;
+}
+
+.code_picture {
+    text-align: center;
+    margin-bottom: 1em;
+}
+
+img {
+    margin: 1em;
+    display: block;
+    border: 1px solid #cecece;
+    max-width: 100%;
+}
+

code-image-generator/source_code_final/templates/_code_block.html

@@ -0,0 +1,14 @@
+<div class="code_block">
+    <style>
+        {{ style }}
+
+        .highlight {
+            background-color: {{ theme_bg_color }};
+        }
+
+        pre {
+            line-height: inherit;
+        }
+    </style>
+    {{ code_highlighted | safe }}
+</div>

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

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
+        <title>
+            {% block title %}Code Picture{% endblock %}
+        </title>
+        <link rel="stylesheet"
+              type="text/css"
+              href="{{ url_for('static', filename='styles.css') }}"/>
+    </head>
+    <body>
+        <h1>
+            <a href="{{ url_for('code') }}">Code Picture</a>: <span>{{ message }}</span>
+        </h1>
+        <main>
+            {% block content %}
+            {% endblock content %}
+        </main>
+    </body>
+</html>

code-image-generator/source_code_final/templates/code_input.html

@@ -0,0 +1,17 @@
+{% extends "base.html" %}
+{% block title %}
+    01 - Code Input
+{% endblock title %}
+{% block content %}
+    <style>
+        .code_input {
+            min-height: calc({{ num_lines }}em * 1.4 + 2 * 1em);
+            min-width: calc({{ max_chars }}ch + 2 * 2em);
+        } 
+    </style>
+    <form class="columns">
+        <button name="reset" formmethod="post">Reset ♻️</button>
+        <textarea class="code_input" name="code">{{ code }}</textarea>
+        <button formmethod="post" formaction="{{ url_for("theme") }}">Next ➡️</button>
+    </form>
+{% endblock content %}

code-image-generator/source_code_final/templates/preview.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+{% block title %}
+    03 - Preview
+{% endblock title %}
+{% block content %}
+    <form method="post" class="columns">
+        <button formmethod="get" formaction="{{ url_for("theme") }}">⬅️ Back</button>
+        {% include "_code_block.html" %}
+        <button formaction="{{ url_for("screenshot") }}">Take Photo 📸</button>
+    </form>
+{% endblock content %}

code-image-generator/source_code_final/templates/screenshot.html

@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+{% block title %}
+    04 - Your Screenshot
+{% endblock title %}
+{% block content %}
+    <form class="columns">
+        <button formmethod="get" formaction="{{ url_for("preview") }}">⬅️ Back</button>
+        {% if screenshot_b64 %}
+            <div class="code_picture">
+                <img src="data:image/png;base64,{{ screenshot_b64 | safe }}"
+                     alt="Website Screenshot"/>
+                <a href="data:image/png;base64,{{ screenshot_b64 | safe }}"
+                   download="screenshot.png">Download Your Code Picture ⤵️</a>
+            </div>
+        {% endif %}
+        <button formmethod="get" formaction="{{ url_for("code") }}">🔄 Back to Start</button>
+    </form>
+{% endblock content %}

code-image-generator/source_code_final/templates/theme_selection.html

@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+{% block title %}
+    02 - Theme Selection
+{% endblock title %}
+{% block content %}
+    <form method="post" class="columns">
+        <button formaction="{{ url_for("code") }}">⬅️ Back</button>
+        <div>
+            <div class="columns">
+                <select name="theme">
+                    {% for theme_name in all_themes %}
+                        <option value="{{ theme_name }}"
+                                {% if theme_name == theme %}selected{% endif %}>
+                            {{ theme_name }}
+                        </option>
+                    {% endfor %}
+                </select>
+                <button>Reload</button>
+            </div>
+            {% include "_code_block.html" %}
+        </div>
+        <div>
+            <button formaction="{{ url_for("preview") }}">Next ➡️</button>
+        </div>
+    </form>
+{% endblock content %}