Merge pull request '#91 added preference to highlight controversial comments' (#97) from juzz/teddit:controversial into main

Reviewed-on: https://codeberg.org/teddit/teddit/pulls/97

app.js

@@ -118,6 +118,12 @@ const preferencesMiddleware = (req, res, next) => {
     res.cookie('nsfw_enabled', nsfwEnabledOverride, { maxAge: 31536000, httpOnly: true })
   }
 
+  let highlightControversialOverride = req.query.highlight_controversial
+  if(highlightControversialOverride) {
+    req.cookies.highlight_controversial = highlightControversialOverride
+    res.cookie('highlight_controversial', highlightControversialOverride, { maxAge: 31536000, httpOnly: true })
+  }
+  
   next()
 }
 

config.js.template

@@ -4,6 +4,7 @@ const config = {
   cert_dir: process.env.CERT_DIR || '', // For example '/home/teddit/letsencrypt/live/teddit.net', if you are using https. No trailing slash.
   theme: process.env.THEME || 'dark', // One of: 'dark', ''
   flairs_enabled: process.env.FLAIRS_ENABLED !== 'true' || true, // Enables the rendering of user and link flairs on teddit
+  highlight_controversial: process.env.HIGHLIGHT_CONTROVERSIAL !== 'true' || true, // Enables controversial comments to be indicated by a typographical dagger (†)
   api_enabled: process.env.API_ENABLED !== 'true' || true, // Teddit API feature. Might increase loads significantly on your instance.
   video_enabled: process.env.VIDEO_ENABLED !== 'true' || true,
   redis_enabled: process.env.REDIS_ENABLED !== 'true' || true, // If disabled, does not cache Reddit API calls

inc/compilePostComments.js

@@ -17,6 +17,7 @@ module.exports = function() {
           let moderator = false
           let submitter = false
           let edited_span = ''
+          let controversial_span = ''
 
           if(post_author === comments.author) {
             classlist.push('submitter')
@@ -36,6 +37,9 @@ module.exports = function() {
           if(comments.edited) {
             edited_span = `<span title="this comment is edited">*</span>`
           }
+          if(comments.controversiality > 0) {
+            controversial_span = `<span class="controversial">†</span>`
+          }
           comments_html = `
             <div class="comment ${comments.depth % 2 === 0 ? 'even-depth' : 'odd-depth'}" id="${comments.id}">
               <details open>
@@ -48,7 +52,7 @@ module.exports = function() {
               <div class="meta">
                 <p class="author">${commentAuthor(comments, classlist, submitter && submitter_link, moderator && moderator_badge)}</p>
                 <p>${comments.user_flair}</p>
-                <p class="ups">${ups}</p>
+                <p class="ups">${ups}${controversial_span}</p>
                 <p class="created" title="${toUTCString(comments.created)}">
                    <a href="${comments.permalink}">${timeDifference(comments.created)}${edited_span}</a>
                 </p>
@@ -109,6 +113,7 @@ module.exports = function() {
               let submitter = false
               let ups = ''
               let edited_span = ''
+              let controversial_span = ''
 
               if(post_author === comment.author) {
                 classlist.push('submitter')
@@ -128,6 +133,9 @@ module.exports = function() {
               if(comment.edited) {
                 edited_span = `<span title="this comment is edited">*</span>`
               }
+              if(comment.controversiality > 0) {
+                controversial_span = `<span class="controversial">†</span>`
+              }
               comments_html += `
                 <div class="comment ${comment.depth % 2 === 0 ? 'even-depth' : 'odd-depth'}" id="${comment.id}">
                 <details open>
@@ -140,7 +148,7 @@ module.exports = function() {
                   <div class="meta">
                     <p class="author">${commentAuthor(comment, classlist, submitter && submitter_link, moderator && moderator_badge)}</p>
                     <p>${comment.user_flair}</p>
-                    <p class="ups">${ups}</p>
+                    <p class="ups">${ups}${controversial_span}</p>
                     <p class="created" title="${toUTCString(comment.created)}">
                       <a href="${comment.permalink}">${timeDifference(comment.created)}${edited_span}</a>
                     </p>

inc/processJsonPost.js

@@ -153,7 +153,8 @@ module.exports = function(fetch) {
               edited: comment.edited,
               replies: [],
               depth: 0,
-              user_flair: (user_preferences.flairs != 'false' ? await formatUserFlair(comment) : '')
+              user_flair: (user_preferences.flairs != 'false' ? await formatUserFlair(comment) : ''),
+              controversiality: (user_preferences.highlight_controversial != 'false' ? comment.controversiality : '')
             }
           } else {
             obj = {
@@ -231,7 +232,8 @@ module.exports = function(fetch) {
           edited: reply.edited,
           replies: [],
           depth: depth,
-          user_flair: (user_preferences.flairs != 'false' ? await formatUserFlair(reply) : '')
+          user_flair: (user_preferences.flairs != 'false' ? await formatUserFlair(reply) : ''),
+          controversiality: (user_preferences.highlight_controversial != 'false' ? reply.controversiality : '')
         }
       } else {
         obj = {
@@ -267,7 +269,8 @@ module.exports = function(fetch) {
                 distinguished: comment.edited,
                 replies: [],
                 depth: depth + 1,
-                user_flair: (user_preferences.flairs != 'false' ? await formatUserFlair(comment) : '')
+                user_flair: (user_preferences.flairs != 'false' ? await formatUserFlair(comment) : ''),
+                controversiality: (user_preferences.highlight_controversial != 'false' ? comment.controversiality : '')
               }
             } else {
               objct = {

routes.js

@@ -22,6 +22,7 @@ module.exports = (app, redis, fetch, RedditAPI) => {
     res.clearCookie('theme')
     res.clearCookie('flairs')
     res.clearCookie('nsfw_enabled')
+    res.clearCookie("highlight_controversial")
     return res.redirect('/preferences')
   })
 
@@ -783,6 +784,7 @@ module.exports = (app, redis, fetch, RedditAPI) => {
     let theme = req.body.theme
     let flairs = req.body.flairs
     let nsfw_enabled = req.body.nsfw_enabled
+    let highlight_controversial = req.body.highlight_controversial
 
     res.cookie('theme', theme, { maxAge: 365 * 24 * 60 * 60 * 1000, httpOnly: true })
     
@@ -798,6 +800,12 @@ module.exports = (app, redis, fetch, RedditAPI) => {
       nsfw_enabled = 'false'
     res.cookie('nsfw_enabled', nsfw_enabled, { maxAge: 365 * 24 * 60 * 60 * 1000, httpOnly: true })
 
+    if(highlight_controversial === 'on')
+      highlight_controversial = 'true'
+    else
+      highlight_controversial = 'false'
+    res.cookie('highlight_controversial', highlight_controversial, { maxAge: 365 * 24 * 60 * 60 * 1000, httpOnly: true })
+
     return res.redirect('/preferences')
   })
 

static/css/styles.css

@@ -640,6 +640,13 @@ footer a {
 .comment .meta .created a {
 	color: var(--graytext);
 }
+.comment .meta span.controversial {
+	font-size: var(--sm-font);
+	display:inline-block;
+	vertical-align: baseline;
+	position: relative;
+	top: -0.4em;
+}
 .comment .body {
 	float: left;
 	width: 100%;

views/preferences.pug

@@ -25,6 +25,12 @@ html
                 input(type="checkbox", name="flairs", id="flairs", checked="checked")
               else
                 input(type="checkbox", name="flairs", id="flairs")
+          .setting
+            label(for="highlight_controversial") Show a dagger (†) on comments voted controversial: 
+              if(!user_preferences.highlight_controversial || user_preferences.highlight_controversial == 'true')
+                input(type="checkbox", name="highlight_controversial", id="highlight_controversial", checked="checked")
+              else
+                input(type="checkbox", name="highlight_controversial", id="highlight_controversial")
           .setting
             label(for="nsfw_enabled") Show NSFW content: 
               if (instance_config.nsfw_enabled === false && user_preferences.nsfw_enabled != 'true') || user_preferences.nsfw_enabled === 'false'