From 2db6f35b7c961c50f2320dea6ea71eeecf60f824 Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Fri, 8 May 2020 13:36:52 -0400
Subject: [PATCH 1/2] Removing button wrapper for comment context. Fixes #702

---
 ui/src/components/comment-node.tsx | 48 ++++++++++++++++--------------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index ba4301e1..4a063307 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -142,9 +142,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
           }
         >
           <div
-            class={`${!this.props.noIndent &&
+            class={`${
+              !this.props.noIndent &&
               this.props.node.comment.parent_id &&
-              'ml-2'}`}
+              'ml-2'
+            }`}
           >
             <div class="d-flex flex-wrap align-items-center mb-1 mt-1 text-muted small">
               <span class="mr-2">
@@ -249,8 +251,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                         this.loadingIcon
                       ) : (
                         <svg
-                          class={`icon icon-inline ${node.comment.read &&
-                            'text-success'}`}
+                          class={`icon icon-inline ${
+                            node.comment.read && 'text-success'
+                          }`}
                         >
                           <use xlinkHref="#icon-check"></use>
                         </svg>
@@ -302,8 +305,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                           this.loadingIcon
                         ) : (
                           <svg
-                            class={`icon icon-inline ${node.comment.saved &&
-                              'text-warning'}`}
+                            class={`icon icon-inline ${
+                              node.comment.saved && 'text-warning'
+                            }`}
                           >
                             <use xlinkHref="#icon-star"></use>
                           </svg>
@@ -350,8 +354,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                             data-tippy-content={i18n.t('view_source')}
                           >
                             <svg
-                              class={`icon icon-inline ${this.state
-                                .viewSource && 'text-success'}`}
+                              class={`icon icon-inline ${
+                                this.state.viewSource && 'text-success'
+                              }`}
                             >
                               <use xlinkHref="#icon-file-text"></use>
                             </svg>
@@ -380,8 +385,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                                 }
                               >
                                 <svg
-                                  class={`icon icon-inline ${node.comment
-                                    .deleted && 'text-danger'}`}
+                                  class={`icon icon-inline ${
+                                    node.comment.deleted && 'text-danger'
+                                  }`}
                                 >
                                   <use xlinkHref="#icon-trash"></use>
                                 </svg>
@@ -700,19 +706,15 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   get linkBtn() {
     let node = this.props.node;
     return (
-      <button className="btn btn-link btn-animate">
-        <Link
-          class="text-muted"
-          to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}
-          title={
-            this.props.showContext ? i18n.t('show_context') : i18n.t('link')
-          }
-        >
-          <svg class="icon icon-inline">
-            <use xlinkHref="#icon-link"></use>
-          </svg>
-        </Link>
-      </button>
+      <Link
+        class="btn btn-link btn-animate text-muted"
+        to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}
+        title={this.props.showContext ? i18n.t('show_context') : i18n.t('link')}
+      >
+        <svg class="icon icon-inline">
+          <use xlinkHref="#icon-link"></use>
+        </svg>
+      </Link>
     );
   }
 

From e6717c86acd3156c04355a0797dc0c802d87ea6b Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Fri, 8 May 2020 14:02:06 -0400
Subject: [PATCH 2/2] Adding support for webp images on the front end. Fixes
 #703

---
 ui/src/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 2256a0c1..f18d996e 100644
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -210,7 +210,7 @@ export function isMod(modIds: Array<number>, creator_id: number): boolean {
 }
 
 const imageRegex = new RegExp(
-  /(http)?s?:?(\/\/[^"']*\.(?:jpg|jpeg|gif|png|svg))/
+  /(http)?s?:?(\/\/[^"']*\.(?:jpg|jpeg|gif|png|svg|webp))/
 );
 const videoRegex = new RegExp(`(http)?s?:?(\/\/[^"']*\.(?:mp4))`);