Revamp comments style like sql statements

6 files changed, 65 insertions, 38 deletions

diff --git a/blog.node5.net/static/comment_section.css b/blog.node5.net/static/comment_section.css
index ff190f6..5e74ab8 100644
--- a/blog.node5.net/static/comment_section.css
+++ b/blog.node5.net/static/comment_section.css
@@ -1,7 +1,18 @@
-input, textarea {
-    color: white;
-    background: black;
-    border-color: white;
-    border-width: 1px;
-    border-radius: 4px;
-}
\ No newline at end of file
+input, textarea, select {
+    background: transparent;
+    border: 0.2em solid #eee;
+    border-radius: 0.3em;
+    color:white;
+    padding: 0.5em;
+}
+
+textarea:focus, input:focus, select:focus {
+    outline: none;
+    border: 0.2em solid #00ffff;
+}
+
+#comment {
+  width: 90%;
+  margin: 1em 0;
+}
+
diff --git a/blog.node5.net/static/main.css b/blog.node5.net/static/main.css
index 86cd455..c7b153f 100644
--- a/blog.node5.net/static/main.css
+++ b/blog.node5.net/static/main.css
@@ -122,3 +122,12 @@ label{
 #motd img{
 max-height: 2em;
 }
+
+img {
+  border-radius: 0.2em;
+}
+
+/* Code highlight */
+pre:not(#comments) {
+	border-radius: 0.5em;
+}
diff --git a/blog.node5.net/templates/article.html b/blog.node5.net/templates/article.html
index 8c56a14..1164eb6 100644
--- a/blog.node5.net/templates/article.html
+++ b/blog.node5.net/templates/article.html
@@ -3,7 +3,6 @@
 {% block head %}
 	{{ super() }}
 	<link rel="stylesheet" type="text/css" href="/article.css">
-	<link rel="stylesheet" type="text/css" href="/pygmentize_code_highlight.css">
 	<link rel="stylesheet" type="text/css" href="/devicons.css">
 {% endblock %}
 {% block content %}
diff --git a/blog.node5.net/templates/base.html b/blog.node5.net/templates/base.html
index a872fb6..71335a5 100644
--- a/blog.node5.net/templates/base.html
+++ b/blog.node5.net/templates/base.html
@@ -4,6 +4,7 @@
     {% block head %}
     <link rel="stylesheet" href="/main.css"/>
     <link rel="stylesheet" type="text/css" href="/comment_section.css">
+    <link rel="stylesheet" type="text/css" href="/pygmentize_code_highlight.css">
     <title>{% block title_prefix %}{% endblock %}{{title}}</title>
     <link rel="icon" type="image/x-icon" href="https://node5.net/static/dmg_01.png">
     <meta charset="UTF-8">
@@ -25,29 +26,31 @@
     <h2>Comments</h2>
 
     <form action="/comment" method="post">
-        <label for="nickname">Nickname <span class="grey">(optional)</span></label><br>
-        <input type="text" id="nickname" name="nickname">
-        <br><br>
-
-        <label title="If you have a blog too, leave the url here to show it off"
-               for="visitor_url">Your website URL <span class="grey">(optional)</span></label><br>
-        <input type="text" id="visitor_url" name="visitor_url">
-        <br><br>
-
-        <label title="If you wish for me to be able to contact you, leave any means of contacting you here."
-               for="contact">Means of contacting you <span class="grey">(optional)</span></label><br>
-        <input type="text" id="contact" name="contact">
-        <label for="show_contact">Show publicly</label>
-        <input type="checkbox" id="show_contact" name="show_contact" checked>
-        <br><br>
-
-        <label for="comment">Comment, </label>
-        <label title="Or just post it to the person behind this website" for="public">Show publicly (entire comment)</label>
-        <input type="checkbox" id="public" name="public" checked><br>
-        <textarea class="width-100" rows="4" id="comment" required name="comment" id="comment"></textarea><br><br>
-        <input type="submit" value="Post comment" /> <small>(Will await approval before becoming public)</small>
+        {{ insert_sql_pretty | safe }}
+          <input placeholder="Nickname (optional)" type="text" id="nickname" name="nickname" title="Your name"><code>, </code>
+          <input placeholder="Your website URL" type="text" id="visitor_url" name="visitor_url"
+                 title="If you have a website too, leave the url here to show it off"><code>, </code>
+          <input placeholder="Means of contacting you" type="text" id="contact" name="contact"
+                 title="If you wish for me to be able to contact you, leave e.g: a phone number email or anything here."><code>, </code>
+          <select name="show_contact" id="show_contact">
+            <option value="">--Show contact publicly--</option>
+            <option value="on">TRUE</option>
+            <option value="off">FALSE</option>
+          </select><code>, </code>
+          <select name="public" id="public">
+            <option value="">--Show comment publicly--</option>
+            <option value="on">TRUE</option>
+            <option value="off">FALSE</option>
+          </select><code>, </code>
+          <br>
+          <textarea placeholder="Type your comment here" rows="4" id="comment" required name="comment" id="comment"></textarea>
+        <code>);</code><br>
+        <input type="submit" id="post-comment" value="Post comment" /> <small class="grey">(Will await approval before becoming public)</small>
     </form>
+
     <br>
+
+    {{ comments_sql | safe }}
     {% if comments and comments|length > 0 %}<pre id="comments">
 {{ comments }}
     </pre>{% else %}*No comments*{% endif %}
diff --git a/src/blog_node5_net.py b/src/blog_node5_net.py
index 5761fc1..0c2a865 100644
--- a/src/blog_node5_net.py
+++ b/src/blog_node5_net.py
@@ -94,14 +94,18 @@ except FileNotFoundError as ex:
 @app.context_processor  # Always inject site title to all render_templates
 def inject_common():
     url = strip_trailing_slash(flask.request.path)
-    comments, comment_headers = db.get_comments(url)
+    comments, comment_headers, comments_sql = db.get_comments(url)
     if comments:
         comments_formatted = tabulate.tabulate(comments, comment_headers, tablefmt="psql")
     else:
-        comments_formatted = f"""sqlite> SELECT COUNT(comment) FROM comment WHERE page_url = '{url}';
-0"""
+        comments_formatted = ""
+    insert_sql_pretty = markdown.markdown(f"```sql\nINSERT INTO comment(nickname, visitor_url, contact, show_contact, comment, public) VALUES (\n```", extensions=['fenced_code','codehilite'])
 
+    sql_pretty = markdown.markdown(f"```sql{ comments_sql }```", extensions=['fenced_code','codehilite'])
+    print(sql_pretty)
     args = {
+        'insert_sql_pretty': insert_sql_pretty,
+        'comments_sql': markupsafe.Markup(markdown.markdown(sql_pretty)),
         'comments': comments_formatted,
         'title': config['site_root_folder_path'],
         'motd': random.choice(motd_list)
diff --git a/src/db_handler.py b/src/db_handler.py
index 6789105..471154a 100644
--- a/src/db_handler.py
+++ b/src/db_handler.py
@@ -15,14 +15,15 @@ class DBHandler:
     def get_comments(self, url: str) -> list[dict]:
         with self.con_factory() as con:
             cur = con.cursor()
-            cur.execute(
-                '''
-                SELECT id, nickname, comment, page_url, visitor_url, (CASE WHEN show_contact THEN contact ELSE NULL END) as contact_info, created_at
-                FROM comment WHERE approved AND public AND page_url = ? ORDER BY created_at DESC;
-                ''', (url,))
+            comments_sql = '''
+SELECT id, nickname, comment, page_url, visitor_url, (CASE WHEN show_contact THEN contact ELSE NULL END) as contact_info, created_at
+FROM comment WHERE approved AND public AND page_url = ? ORDER BY created_at DESC;
+'''
+            cur.execute(comments_sql, (url,))
             comments = cur.fetchall()
             headers = list(map(lambda attr : attr[0], cur.description))
-            return comments, headers
+            comments_sql = comments_sql.replace('?', f"'{url}'")
+            return comments, headers, comments_sql
 
 
     def post_comment(self, comment: str, page_url: str, visitor_url: str=None, nickname: str=None, contact: str=None,