user blog markdown preview WIP

app/controllers/Ublog.scala

@@ -129,6 +129,14 @@ final class Ublog(env: Env) extends LilaController(env) {
     }
   }
 
+  def preview(id: String) = AuthBody { implicit ctx => me =>
+    NotForKids {
+      OptionOk(env.ublog.api.find(UblogPost.Id(id)).map(_.filter(_.isBy(me)))) { post =>
+        html.ublog.form.edit(me, post, env.ublog.form.edit(post))
+      }
+    }
+  }
+
   private val ImageRateLimitPerIp = lila.memo.RateLimit.composite[lila.common.IpAddress](
     key = "ublog.image.ip"
   )(

app/views/ublog/form.scala

@@ -34,7 +34,7 @@ object form {
       moreJs = jsModule("ublog"),
       title = s"${trans.ublog.xBlog.txt(user.username)} blog • ${post.title}"
     ) {
-      main(cls := "box box-pad page page-small ublog-post-form")(
+      main(cls := "box box-pad page ublog-post-form")(
         h1(trans.ublog.editYourBlogPost()),
         imageForm(user, post),
         inner(user, f, post.some, none),
@@ -67,7 +67,7 @@ object form {
       )
     )
 
-  def formImage(post: UblogPost) = postView.thumbnail(post, _.Small)
+  def formImage(post: UblogPost) = postView.thumbnail(post, _.Large)
 
   private def inner(user: User, form: Form[UblogPostData], post: Option[UblogPost], captcha: Option[Captcha])(
       implicit ctx: Context
@@ -79,18 +79,25 @@ object form {
       )
     )(
       form3.globalError(form),
-      post.isDefined option form3.checkbox(
-        form("live"),
-        trans.ublog.publishOnYourBlog(),
-        help = trans.ublog.publishHelp().some
+      form3.split(
+        form3.group(form("title"), trans.ublog.postTitle(), half = true)(form3.input(_)(autofocus)),
+        post.isDefined option form3.checkbox(
+          form("live"),
+          trans.ublog.publishOnYourBlog(),
+          help = trans.ublog.publishHelp().some,
+          half = true
+        )
       ),
-      form3.group(form("title"), trans.ublog.postTitle())(form3.input(_)(autofocus)),
       form3.group(form("intro"), trans.ublog.postIntro())(form3.input(_)(autofocus)),
-      form3.group(
-        form("markdown"),
-        trans.ublog.postBody(),
-        help = frag(markdownAvailable, br, trans.embedsAvailable()).some
-      )(form3.textarea(_)(rows := 30)),
+      form3.split(
+        form3.group(
+          form("markdown"),
+          trans.ublog.postBody(),
+          help = frag(markdownAvailable, br, trans.embedsAvailable()).some,
+          half = true
+        )(form3.textarea(_)(rows := 30)),
+        div(cls := "form-group form-half ublog-post-form__markdown__preview")
+      )(cls := "half ublog-post-form__markdown"),
       captcha.fold(views.html.base.captcha.hiddenEmpty(form)) { c =>
         views.html.base.captcha(form, c)
       },

conf/routes

@@ -66,7 +66,8 @@ GET   /@/:username/blog/$id<\w{8}>/edit controllers.Ublog.edit(username: String,
 POST  /@/:username/blog/$id<\w{8}>/edit controllers.Ublog.update(username: String, id: String)
 POST  /@/:username/blog/$id<\w{8}>/del controllers.Ublog.delete(username: String, id: String)
 POST  /upload/image/ublog/$id<\w{8}>   controllers.Ublog.image(id: String)
-GET   /@/:username/blog/:slug/:id      controllers.Ublog.post(username: String, slug: String, id: String)
+GET   /@/:username/blog/:slug/$id<\w{8}> controllers.Ublog.post(username: String, slug: String, id: String)
+POST  /ublog/$id<\w{8}>/preview        controllers.Ublog.preview(id: String)
 
 # User
 GET   /api/stream/:username/mod        controllers.User.mod(username: String)

ui/site/css/ublog/_form.scss

@@ -23,4 +23,11 @@
     margin: 3em auto;
     max-width: 80ch;
   }
+  &__markdown {
+    &__preview {
+      @extend %box-neat;
+      background: $c-bg-zebra;
+      padding: 1em;
+    }
+  }
 }