Adding a simple image expander instead of iframes.

- Fixes #91

README.md

@@ -87,8 +87,9 @@ and goto http://localhost:8536
 - [Ranking Algorithm](docs/ranking.md)
 
 ## Support
-Support the development, and help cover hosting costs.
-- [Patreon](https://www.patreon.com/dessalines)
+Lemmy is free, open-source software, meaning no advertising, monetizing, or venture capital, ever. Your donations directly support full-time development of the project.
+- [Support on Patreon](https://www.patreon.com/dessalines).
+- [Sponsor List](https://dev.lemmy.ml/#/sponsors).
 - bitcoin: `bc1queu73nwuheqtsp65nyh5hf4jr533r8rr5nsj75`
 - ethereum: `0x400c96c96acbC6E7B3B43B1dc1BB446540a88A01`
 

docs/goals.md

@@ -33,5 +33,10 @@
 - [Hierarchical tree building javascript](https://stackoverflow.com/a/40732240/1655478)
 - [Hot sorting discussion](https://meta.stackexchange.com/questions/11602/what-formula-should-be-used-to-determine-hot-questions) [2](https://medium.com/hacking-and-gonzo/how-reddit-ranking-algorithms-work-ef111e33d0d9)
 - [Classification types.](https://www.reddit.com/r/ModeratorDuck/wiki/subreddit_classification)
+- [RES expando - Possibly make this into a switching react component.](https://github.com/honestbleeps/Reddit-Enhancement-Suite/tree/d21f55c21e734f47d8ed03fe0ebce5b16653b0bd/lib/modules/hosts)
 - [Temp Icon](https://www.flaticon.com/free-icon/mouse_194242)
+- Activitypub guides
+  - https://blog.joinmastodon.org/2018/06/how-to-implement-a-basic-activitypub-server/
+  - https://raw.githubusercontent.com/w3c/activitypub/gh-pages/activitypub-tutorial.txt
+  - https://github.com/tOkeshu/activitypub-example
 

ui/src/components/post-listing.tsx

@@ -4,13 +4,13 @@ import { WebSocketService, UserService } from '../services';
 import { Post, CreatePostLikeForm, PostForm as PostFormI, SavePostForm, CommunityUser, UserView } from '../interfaces';
 import { MomentTime } from './moment-time';
 import { PostForm } from './post-form';
-import { mdToHtml, canMod, isMod } from '../utils';
+import { mdToHtml, canMod, isMod, isImage } from '../utils';
 
 interface PostListingState {
   showEdit: boolean;
   showRemoveDialog: boolean;
   removeReason: string;
-  iframeExpanded: boolean;
+  imageExpanded: boolean;
 }
 
 interface PostListingProps {
@@ -29,7 +29,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     showEdit: false,
     showRemoveDialog: false,
     removeReason: null,
-    iframeExpanded: false
+    imageExpanded: false
   }
 
   constructor(props: any, context: any) {
@@ -78,15 +78,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             }
           </h5>
           <small><a className="ml-2 text-muted font-italic" href={post.url} title={post.url}>{(new URL(post.url)).hostname}</a></small>
-          { !this.state.iframeExpanded
-            ? <span class="badge badge-light pointer ml-2 text-muted small" title="Expand here" onClick={linkEvent(this, this.handleIframeExpandClick)}>+</span>
-            : 
-            <span>
-              <span class="pointer ml-2 badge badge-light text-muted small" onClick={linkEvent(this, this.handleIframeExpandClick)}>-</span>
-              <div class="embed-responsive embed-responsive-1by1">
-                <iframe scrolling="yes" class="embed-responsive-item" src={post.url}></iframe>
-              </div>
-            </span>
+          { isImage(post.url) && 
+            <>
+              { !this.state.imageExpanded
+                ? <span class="badge badge-light pointer ml-2 text-muted small" title="Expand here" onClick={linkEvent(this, this.handleImageExpandClick)}>+</span>
+                : 
+                <span>
+                  <span class="pointer ml-2 badge badge-light text-muted small" onClick={linkEvent(this, this.handleImageExpandClick)}>-</span>
+                  <div>
+                    <img class="img-fluid" src={post.url} />
+                  </div>
+                </span>
+              }
+            </>
           }
         </div> 
           : <h5 className="mb-0"><Link className="text-white" to={`/post/${post.id}`}>{post.name}</Link>
@@ -292,8 +296,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     WebSocketService.Instance.editPost(form);
   }
 
-  handleIframeExpandClick(i: PostListing) {
-    i.state.iframeExpanded = !i.state.iframeExpanded;
+  handleImageExpandClick(i: PostListing) {
+    i.state.imageExpanded = !i.state.imageExpanded;
     i.setState(i.state);
   }
 }

ui/src/utils.ts

@@ -59,4 +59,11 @@ export function isMod(modIds: Array<number>, creator_id: number): boolean {
   return modIds.includes(creator_id);
 }
 
+
+var imageRegex = new RegExp(`(http)?s?:?(\/\/[^"']*\.(?:png|jpg|jpeg|gif|png|svg))`);
+
+export function isImage(url: string) {
+  return imageRegex.test(url);
+}
+
 export let fetchLimit: number = 20;