LemmyNet
/
lemmy
3
2
Fork 3
Code Pull Requests 1 Releases Wiki Activity

Initial post-listing community non-local.

This commit is contained in:
Dessalines 2020-04-14 15:43:58 -04:00
parent 26ad37a8c0
commit f040dac647
2 changed files with 52 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
ui/src/components/post-listing.tsx vendored
View File

@ -30,6 +30,7 @@ import {
showAvatars, showAvatars,
pictshareImage, pictshareImage,
setupTippy, setupTippy,
hostname,
} from '../utils'; } from '../utils';
import { i18n } from '../i18next'; import { i18n } from '../i18next';
@ -149,9 +150,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
let post = this.props.post; let post = this.props.post;
return ( return (
<img <img
className={`img-fluid thumbnail rounded ${(post.nsfw || className={`img-fluid thumbnail rounded ${
post.community_nsfw) && (post.nsfw || post.community_nsfw) && 'img-blur'
'img-blur'}`} }`}
src={src} src={src}
/> />
); );
@ -311,22 +312,21 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</Link> </Link>
)} )}
</h5> </h5>
{post.url && {post.url && !(hostname(post.url) == window.location.hostname) && (
!(new URL(post.url).hostname == window.location.hostname) && ( <small class="d-inline-block">
<small class="d-inline-block"> <a
<a className="ml-2 text-muted font-italic"
className="ml-2 text-muted font-italic" href={post.url}
href={post.url} target="_blank"
target="_blank" title={post.url}
title={post.url} >
> {hostname(post.url)}
{new URL(post.url).hostname} <svg class="ml-1 icon icon-inline">
<svg class="ml-1 icon icon-inline"> <use xlinkHref="#icon-external-link"></use>
<use xlinkHref="#icon-external-link"></use> </svg>
</svg> </a>
</a> </small>
</small> )}
)}
{(isImage(post.url) || this.props.post.thumbnail_url) && ( {(isImage(post.url) || this.props.post.thumbnail_url) && (
<> <>
{!this.state.imageExpanded ? ( {!this.state.imageExpanded ? (
@ -447,9 +447,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{this.props.showCommunity && ( {this.props.showCommunity && (
<span> <span>
<span> {i18n.t('to')} </span> <span> {i18n.t('to')} </span>
<Link to={`/c/${post.community_name}`}> {post.local ? (
{post.community_name} <Link to={`/c/${post.community_name}`}>
</Link> {post.community_name}
</Link>
) : (
<a href={post.community_actor_id} target="_blank">
{hostname(post.ap_id)}/{post.community_name}
</a>
)}
</span> </span>
)} )}
</li> </li>
@ -531,8 +537,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
} }
> >
<svg <svg
class={`icon icon-inline ${post.saved && class={`icon icon-inline ${
'text-warning'}`} post.saved && 'text-warning'
}`}
> >
<use xlinkHref="#icon-star"></use> <use xlinkHref="#icon-star"></use>
</svg> </svg>
@ -575,8 +582,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
} }
> >
<svg <svg
class={`icon icon-inline ${post.deleted && class={`icon icon-inline ${
'text-danger'}`} post.deleted && 'text-danger'
}`}
> >
<use xlinkHref="#icon-trash"></use> <use xlinkHref="#icon-trash"></use>
</svg> </svg>
@ -607,8 +615,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
data-tippy-content={i18n.t('view_source')} data-tippy-content={i18n.t('view_source')}
> >
<svg <svg
class={`icon icon-inline ${this.state class={`icon icon-inline ${
.viewSource && 'text-success'}`} this.state.viewSource && 'text-success'
}`}
> >
<use xlinkHref="#icon-file-text"></use> <use xlinkHref="#icon-file-text"></use>
</svg> </svg>
@ -628,8 +637,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
} }
> >
<svg <svg
class={`icon icon-inline ${post.locked && class={`icon icon-inline ${
'text-danger'}`} post.locked && 'text-danger'
}`}
> >
<use xlinkHref="#icon-lock"></use> <use xlinkHref="#icon-lock"></use>
</svg> </svg>
@ -646,8 +656,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
} }
> >
<svg <svg
class={`icon icon-inline ${post.stickied && class={`icon icon-inline ${
'text-success'}`} post.stickied && 'text-success'
}`}
> >
<use xlinkHref="#icon-pin"></use> <use xlinkHref="#icon-pin"></use>
</svg> </svg>

14
ui/src/utils.ts vendored
View File

@ -109,11 +109,11 @@ export const md = new markdown_it({
typographer: true, typographer: true,
}) })
.use(markdown_it_container, 'spoiler', { .use(markdown_it_container, 'spoiler', {
validate: function(params: any) { validate: function (params: any) {
return params.trim().match(/^spoiler\s+(.*)$/); return params.trim().match(/^spoiler\s+(.*)$/);
}, },
render: function(tokens: any, idx: any) { render: function (tokens: any, idx: any) {
var m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/); var m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/);
if (tokens[idx].nesting === 1) { if (tokens[idx].nesting === 1) {
@ -129,7 +129,7 @@ export const md = new markdown_it({
defs: objectFlip(emojiShortName), defs: objectFlip(emojiShortName),
}); });
md.renderer.rules.emoji = function(token, idx) { md.renderer.rules.emoji = function (token, idx) {
return twemoji.parse(token[idx].content); return twemoji.parse(token[idx].content);
}; };
@ -275,7 +275,7 @@ export function debounce(
let timeout: any; let timeout: any;
// Calling debounce returns a new anonymous function // Calling debounce returns a new anonymous function
return function() { return function () {
// reference the context and args for the setTimeout function // reference the context and args for the setTimeout function
var context = this, var context = this,
args = arguments; args = arguments;
@ -291,7 +291,7 @@ export function debounce(
clearTimeout(timeout); clearTimeout(timeout);
// Set the new timeout // Set the new timeout
timeout = setTimeout(function() { timeout = setTimeout(function () {
// Inside the timeout function, clear the timeout variable // Inside the timeout function, clear the timeout variable
// which will let the next execution run when in 'immediate' mode // which will let the next execution run when in 'immediate' mode
timeout = null; timeout = null;
@ -823,3 +823,7 @@ function hsl(num: number) {
function randomHsl() { function randomHsl() {
return `hsla(${Math.random() * 360}, 100%, 50%, 1)`; return `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
} }
export function hostname(url: string): string {
return new URL(url).hostname;
}