Forum improvements

mixins/Postable.pixy

@@ -7,7 +7,7 @@ component Postable(post arn.Postable, highlightAuthorID string)
 			//- 	a.user.post-recipient(href="/+" + post.recipient.nick, title=post.recipient.nick)
 			//- 		img.user-image(src=post.recipient.avatar ? (post.recipient.avatar + "?s=100&r=x&d=mm") : "/images/elements/no-gravatar.svg", alt=post.recipient.nick)
 		.post-content
-			div(id="render-" + post.ID())!= aero.Markdown(post.Text())
+			div(id="render-" + post.ID())!= post.HTML()
 
 			//- if user && user.ID === post.authorId
 			//- 	textarea.post-input.hidden(id="source-" + post.ID)= post.text

pages/animelistitem/animelistitem.scarlet

@@ -1,7 +1,3 @@
-.anime-list-item-view
-	textarea
-		height 10rem
-
 .anime-list-item-view-image
 	max-width 55px
 	margin-bottom 1rem

pages/profile/profile.pixy

@@ -79,7 +79,7 @@ component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList,
 					.post-author
 						Avatar(post.Author())
 					.post-content
-						div!= aero.Markdown(post.Text)
+						div!= post.HTML()
 						.post-toolbar.active
 							.spacer
 							.post-likes= len(post.Likes)

pages/threads/threads.go

@@ -1,29 +1,59 @@
 package threads
 
 import (
+	"strings"
+
 	"github.com/aerogo/aero"
 	"github.com/animenotifier/arn"
 	"github.com/animenotifier/notify.moe/components"
+	"github.com/animenotifier/notify.moe/utils"
 )
 
 // Get thread.
 func Get(ctx *aero.Context) string {
 	id := ctx.Get("id")
 	thread, err := arn.GetThread(id)
+	user := utils.GetUser(ctx)
 
 	if err != nil {
 		return ctx.Error(404, "Thread not found", err)
 	}
 
 	replies, filterErr := arn.FilterPosts(func(post *arn.Post) bool {
+		post.Text = strings.Replace(post.Text, "http://", "https://", -1)
 		return post.ThreadID == thread.ID
 	})
 
 	arn.SortPostsLatestLast(replies)
 
+	for i := 0; i < 7; i++ {
+		replies = append(replies, replies...)
+	}
+
+	println(len(replies))
+
+	// Pre-render markdown
+	// flow.Parallel(func() {
+	// 	for _, reply := range replies[0:256] {
+	// 		reply.HTML()
+	// 	}
+	// }, func() {
+	// 	for _, reply := range replies[256:512] {
+	// 		reply.HTML()
+	// 	}
+	// }, func() {
+	// 	for _, reply := range replies[512:768] {
+	// 		reply.HTML()
+	// 	}
+	// }, func() {
+	// 	for _, reply := range replies[768:1024] {
+	// 		reply.HTML()
+	// 	}
+	// })
+
 	if filterErr != nil {
 		return ctx.Error(500, "Error fetching thread replies", err)
 	}
 
-	return ctx.HTML(components.Thread(thread, replies))
+	return ctx.HTML(components.Thread(thread, replies, user))
 }

pages/threads/threads.pixy

@@ -1,4 +1,4 @@
-component Thread(thread *arn.Thread, posts []*arn.Post)
+component Thread(thread *arn.Thread, posts []*arn.Post, user *arn.User)
 	h2.thread-title= thread.Title
 
 	.thread
@@ -7,3 +7,12 @@ component Thread(thread *arn.Thread, posts []*arn.Post)
 
 			each post in posts
 				Postable(post.ToPostable(), thread.Author().ID)
+			
+			// Reply
+			if user != nil
+				.post.mountable
+					.post-author
+						Avatar(user)
+					
+					.post-content
+						textarea(id="new-reply", placeholder="Reply...")

scripts/AnimeNotifier.ts

@@ -136,19 +136,19 @@ export class AnimeNotifier {
 
 	modifyDelayed(className: string, func: (element: HTMLElement) => void) {
 		const delay = 20
-		const maxDelay = 1000
+		const maxDelay = 500
 		
 		let time = 0
 
 		for(let element of findAll(className)) {
-			setTimeout(() => {
-				window.requestAnimationFrame(() => func(element))
-			}, time)
-
 			time += delay
 
 			if(time > maxDelay) {
-				time = maxDelay
+				func(element)
+			} else {
+				setTimeout(() => {
+					window.requestAnimationFrame(() => func(element))
+				}, time)
 			}
 		}
 	}

styles/include/config.scarlet

@@ -8,10 +8,10 @@ post-highlight-color = rgba(248, 165, 130, 0.7)
 bg-color = rgb(246, 246, 246)
 
 // UI
-ui-border = 1px solid rgba(0, 0, 0, 0.1)
+ui-border-color = rgba(0, 0, 0, 0.1)
-ui-hover-border = 1px solid rgba(0, 0, 0, 0.15)
+ui-hover-border-color = rgba(0, 0, 0, 0.15)
 ui-background = rgb(254, 254, 254)
-ui-hover-background = rgb(255, 255, 255)
+// ui-hover-background = rgb(254, 254, 254)
 // ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%)
 // ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
 ui-disabled-color = rgb(224, 224, 224)

styles/include/mixins.scarlet

@@ -18,13 +18,13 @@ mixin vertical-wrap
 	flex-flow column wrap
 
 mixin ui-element
-	border ui-border
+	border 1px solid ui-border-color
 	background ui-background
 	border-radius 3px
 	default-transition
 	:hover
-		border ui-hover-border
+		border-color ui-hover-border-color
-		background ui-hover-background
+		// background ui-hover-background
 		// box-shadow outline-shadow-medium
 
 mixin ui-disabled

styles/input.scarlet

@@ -16,19 +16,26 @@ input, textarea
 	border ui-border
 	background white
 	box-shadow none
+	width 100%
 	input-focus
-
-	:active
-		transform translateY(3px)
 	
 	:disabled
 		ui-disabled
 
+input
+	default-transition
+
+	:active
+		transform translateY(3px)
+
 // We need this to have a selector with a higher priority than .widget-element:focus
 input.widget-element,
 textarea.widget-element
 	input-focus
 
+textarea
+	height 10rem
+
 button, .button
 	ui-element
 	horizontal

styles/layout.scarlet

@@ -5,4 +5,5 @@
 #content-container
 	flex 1
 	overflow-x hidden
-	overflow-y scroll
+	overflow-y scroll
+	// will-change transform