Adding a simple image expander instead of iframes.

- Fixes #91

diff --git a/README.md b/README.md
index 177d9ce23eb3083f05e26c3bc026fea5114a4704..94238136f2caea60b5b42f73c97dd01eaffd5a91 100644 (file)
--- a/README.md
+++ b/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`
 

diff --git a/docs/goals.md b/docs/goals.md
index e569b1f799458b425af2c949b7a6c7546a7efa9e..1c627df8387e81c9e6341e321f8e9d4583b72dbe 100644 (file)
--- a/docs/goals.md
+++ b/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
 

diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index 73395fa8e833cf5d75c8722b5702b56463a71aac..babb8605d9914c90c09fec3a55b4b158d64f6901 100644 (file)
--- a/ui/src/components/post-listing.tsx
+++ b/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);
   }
 }

diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 3a8e25760d6188cc480e32b2d6c91dd2c60f35a0..f8bf6ea6205401fe4a915da656b39e1e6d76edb9 100644 (file)
--- a/ui/src/utils.ts
+++ b/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;