feat: load comments in gists view route and comment form

src/data/api/v1/render_html.rs

@@ -48,7 +48,10 @@ impl<'a> SourcegraphQuery<'a> {
         let c = theme.settings.background.unwrap_or(Color::WHITE);
         let mut num = 1;
         let mut output = format!(
-            "<div style=\"background-color:#{:02x}{:02x}{:02x};\">\n",
+            "<style>
+        .gist_file {{
+            background-color:#{:02x}{:02x}{:02x};
+        }}</style>",
             c.r, c.g, c.b
         );
 

src/pages/gists/view.rs

@@ -18,6 +18,7 @@ use std::cell::RefCell;
 
 use actix_identity::Identity;
 use actix_web::http::header::ContentType;
+use serde::*;
 use tera::Context;
 
 use db_core::prelude::*;
@@ -38,8 +39,11 @@ pub const GIST_TEXTFILE: TemplateFile =
 pub const GIST_FILENAME: TemplateFile =
     TemplateFile::new("gist_filename", "pages/gists/view/_filename.html");
 
+pub const GIST_COMMENT_INPUT: TemplateFile =
+    TemplateFile::new("gist_comment_input", "components/comments.html");
+
 pub fn register_templates(t: &mut tera::Tera) {
-    for template in [VIEW_GIST, GIST_FILENAME, GIST_TEXTFILE].iter() {
+    for template in [VIEW_GIST, GIST_FILENAME, GIST_TEXTFILE, GIST_COMMENT_INPUT].iter() {
         template.register(t).expect(template.name);
     }
 }
@@ -59,15 +63,21 @@ impl CtxError for ViewGist {
     }
 }
 
+#[derive(Debug, Default, Clone, Serialize)]
+pub struct Payload<'a> {
+    pub gist: Option<&'a GistInfo>,
+    pub comments: Option<&'a Vec<GistComment>>,
+}
+
 impl ViewGist {
-    pub fn new(username: Option<&str>, gist: Option<&GistInfo>, settings: &Settings) -> Self {
+    pub fn new(username: Option<&str>, payload: Payload, settings: &Settings) -> Self {
         let mut ctx = auth_ctx(username, settings);
         ctx.insert("visibility_private", GistVisibility::Private.to_str());
         ctx.insert("visibility_unlisted", GistVisibility::Unlisted.to_str());
         ctx.insert("visibility_public", GistVisibility::Public.to_str());
 
-        if let Some(gist) = gist {
-            ctx.insert(PAYLOAD_KEY, gist);
+        ctx.insert(PAYLOAD_KEY, &payload);
+        if let Some(gist) = payload.gist {
             ctx.insert(
                 "gist_owner_link",
                 &PAGES.gist.get_profile_route(GistProfilePathComponent {
@@ -76,6 +86,10 @@ impl ViewGist {
             );
         }
 
+        if let Some(comments) = payload.comments {
+            ctx.insert("gist_comments", comments);
+        }
+
         let ctx = RefCell::new(ctx);
         Self { ctx }
     }
@@ -86,8 +100,8 @@ impl ViewGist {
             .unwrap()
     }
 
-    pub fn page(username: Option<&str>, gist: Option<&GistInfo>, s: &Settings) -> String {
-        let p = Self::new(username, gist, s);
+    pub fn page(username: Option<&str>, payload: Payload, s: &Settings) -> String {
+        let p = Self::new(username, payload, s);
         p.render()
     }
 }
@@ -100,8 +114,18 @@ async fn view_preview(
 ) -> PageResult<impl Responder, ViewGist> {
     let username = id.identity();
 
-    let map_err = |e: ServiceError, g: Option<&GistInfo>| -> PageError<ViewGist> {
-        PageError::new(ViewGist::new(username.as_deref(), g, &data.settings), e)
+    let map_err = |e: ServiceError, gist: Option<&GistInfo>| -> PageError<ViewGist> {
+        PageError::new(
+            ViewGist::new(
+                username.as_deref(),
+                Payload {
+                    gist,
+                    comments: None,
+                },
+                &data.settings,
+            ),
+            e,
+        )
     };
 
     let gist = db.get_gist(&path.gist).await.map_err(|e| {
@@ -122,7 +146,21 @@ async fn view_preview(
 
     gist.files.iter_mut().for_each(|file| file.generate());
 
-    let page = ViewGist::page(username.as_deref(), Some(&gist), &data.settings);
+    log::info!("testing start");
+
+    let comments = db.get_comments_on_gist(&path.gist).await.map_err(|e| {
+        let e: ServiceError = e.into();
+        map_err(e, None)
+    })?;
+
+    log::info!("testing end");
+
+    let ctx = Payload {
+        gist: Some(&gist),
+        comments: Some(&comments),
+    };
+
+    let page = ViewGist::page(username.as_deref(), ctx, &data.settings);
     let html = ContentType::html();
     Ok(HttpResponse::Ok().content_type(html).body(page))
 }

static/cache/css/main.css

@@ -118,6 +118,7 @@ main {
   margin: auto;
 
   display: flex;
+  flex-direction: column;
   /*
   align-items: center;
   */
@@ -330,17 +331,19 @@ pre {
 }
 
 .gist_file {
-  background: #eeee;
   border-radius: 6px;
   padding-bottom: 0px;
   margin: 10px 0;
   border: 1px solid #ddd;
   border-radius: 6px;
   box-sizing: border-box;
+  overflow-x: scroll;
 }
 
 .gist__filename {
   padding: 8px;
+  background: #eeee;
+  margin-bottom: 10px;
 }
 
 .gist__meta-container {
@@ -390,3 +393,29 @@ pre {
   display: inline;
   width: auto;
 }
+
+.gist__comment-container {
+  width: 70%;
+  margin: auto;
+}
+
+.gist__comment-form {
+  width: 100%;
+}
+
+.form__label {
+  display: inline-block;
+  width: 100%;
+}
+
+.comment {
+  width: 100%;
+  min-height: 100px;
+}
+
+  
+.gist__comment-content {
+  width:  100%;
+  border: 1px solid #ddd;
+  padding: 5px;
+}

templates/components/comments.html

@@ -0,0 +1,27 @@
+<div class="gist__comment-container">
+  <form action="" class="gist__comment-form" method="post" accept-charset="utf-8">
+    <label class="form__label" for="comment" >
+      <textarea 
+          required
+          class="gist__comment-content"
+          name="comment"
+          id="comment"
+          type="text"
+          placeholder="Markdown supported"
+      ></textarea>
+      </label>
+    <div class="gist__button-group">
+      <div class="gist__button-container">
+        <button 
+          class="form__submit--secondary"
+          name="add_file"
+          value="true"
+          type="submit"
+        >Preview</button>
+      </div>
+      <div class="gist__button-container">
+        <button class="form__submit" type="submit">Comment</button>
+      </div>
+    </div>
+  </form>
+</div>

templates/pages/gists/view/index.html

@@ -3,37 +3,40 @@
     {% include "error_comp" %}
 	<div class="gist__container">
 		{% if payload %}
+          {% if "gist" in payload %}
 
-        <div class="gist__meta-container">
-            <div class="gist__name">
-			<a href={{ gist_owner_link }}><h2 class="gist__name-text">~{{ payload.owner }}</a>/<a href="">{{ payload.id | truncate(length=10, end="") }}</h2></a><span class="gist__visibility">{{ payload.visibility }}</span>
-            </div>
-		  {% if payload.description %}
-			<p class="gist__description">{{ payload.description}}</p>
-		  {% endif %}
-        </div>
-
-        <div class="gist__data-container">
-		  {% for payload_file in payload.files %}
-		  
-          <div class="gist_file">
-			{% include "gist_filename" %}
-			{% if "file" in payload_file.content %}
-				{% include "gist_textfile" %}
-			{% endif %}
+          <div class="gist__meta-container">
+              <div class="gist__name">
+              <a href={{ gist_owner_link }}><h2 class="gist__name-text">~{{ payload.gist.owner }}</a>/<a href="">{{ payload.gist.id | truncate(length=10, end="") }}</h2></a><span class="gist__visibility">{{ payload.gist.visibility }}</span>
+              </div>
+            {% if "description" in payload.gist %}
+              <p class="gist__description">{{ payload.gist.description}}</p>
+            {% endif %}
           </div>
 
-			{% if "dir" in payload_file.content %}
-			  {% for payload_file in payload_file.content.dir %}
-                <div class="gist_file">
-                  {% include "gist_filename" %}
-                  {% include "gist_textfile" %}
-                </div>
-			  {% endfor %}
-			{% endif %}
+          <div class="gist__data-container">
+            {% for payload_file in payload.gist.files %}
+            
+              <div class="gist_file">
+                {% include "gist_filename" %}
+                {% if "file" in payload_file.content %}
+                    {% include "gist_textfile" %}
+                {% endif %}
+              </div>
 
-		  {% endfor %}
-		{% endif %}
-      </div>
+              {% if "dir" in payload_file.content %}
+                {% for payload_file in payload_file.content.dir %}
+                  <div class="gist_file">
+                    {% include "gist_filename" %}
+                    {% include "gist_textfile" %}
+                  </div>
+                {% endfor %}
+              {% endif %}
+
+          {% endfor %}
+        </div>
+      {% endif %}
+	{% endif %}
     </div>
+    {% include "gist_comment_input" %}
 {% endblock %}