feat: Link @/#

src/components/Utils.js

@@ -1,3 +1,6 @@
+/**
+ *
+ */
 export function logAndReturn(e) {
 	console.warn(e)
 	return e
@@ -18,11 +21,7 @@ export class XHR {
 	}
 
 	static fetch(url, options) {
-		return window
-			.fetch(url, options)
-			.then(XHR.checkStatus)
-			.then(XHR.parseJSON)
-			.catch(logAndReturn)
+		return window.fetch(url, options).then(XHR.checkStatus).then(XHR.parseJSON).catch(logAndReturn)
 	}
 }
 
@@ -53,26 +52,18 @@ class Storage {
 
 	set(key, value) {
 		return this.promise((resolve, reject) =>
-			chrome.storage[this.STORAGE].set({ [key]: value }, data =>
-				Storage.check(data, resolve, reject)
-			)
+			chrome.storage[this.STORAGE].set({ [key]: value }, data => Storage.check(data, resolve, reject))
 		)
 	}
 
 	get(key, defaultValue) {
 		return this.promise((resolve, reject) =>
-			chrome.storage[this.STORAGE].get({ [key]: defaultValue }, data =>
-				Storage.check(data[key], resolve, reject)
-			)
+			chrome.storage[this.STORAGE].get({ [key]: defaultValue }, data => Storage.check(data[key], resolve, reject))
 		)
 	}
 
 	remove(key) {
-		return this.promise((resolve, reject) =>
-			chrome.storage[this.STORAGE].remove(key, data =>
-				Storage.check(data, resolve, reject)
-			)
-		)
+		return this.promise((resolve, reject) => chrome.storage[this.STORAGE].remove(key, data => Storage.check(data, resolve, reject)))
 	}
 
 	static check(data, resolve, reject) {
@@ -94,11 +85,7 @@ export class Chrome {
 			index = search.indexOf('tabid')
 		if (index !== -1) {
 			console.log('sending req', action, additional)
-			chrome.tabs.sendMessage(
-				+search[index + 1],
-				{ action, ...additional },
-				null
-			)
+			chrome.tabs.sendMessage(+search[index + 1], { action, ...additional }, null)
 			return true
 		}
 		return false
@@ -112,11 +99,17 @@ export class Chrome {
 export const i18n = Chrome.i18n
 
 //const regex = /-fr[atx]\d-\d/
+/**
+ *
+ */
 export function updateCDN(url) {
 	return url
 	// return url.replace(regex, '-frt3-1') // 10.08.2017
 }
 
+/**
+ *
+ */
 export function shallowDiffers(a, b) {
 	for (const key in a) if (a[key] !== b[key]) return true
 	for (const key in b) if (!(key in a)) return true
@@ -136,24 +129,23 @@ self.addEventListener('message', event => {
 })
 `
 
+/**
+ *
+ */
 export function documentReady() {
 	return new Promise((resolve, reject) => {
-		if (
-			document.readyState === 'interactive' ||
-			document.readyState === 'complete'
-		)
-			resolve()
+		if (document.readyState === 'interactive' || document.readyState === 'complete') resolve()
 		else document.addEventListener('DOMContentLoaded', resolve)
 	})
 }
 
 let workerBlob
+/**
+ *
+ */
 export async function getWorkerBlob() {
 	await documentReady() // creating a blob is synchronous and takes around 120ms on a powerful machine
-	if (workerBlob === undefined)
-		workerBlob = URL.createObjectURL(
-			new Blob([webWorkerScript], { type: 'application/javascript' })
-		)
+	if (workerBlob === undefined) workerBlob = URL.createObjectURL(new Blob([webWorkerScript], { type: 'application/javascript' }))
 	return workerBlob
 }
 
@@ -164,14 +156,8 @@ const formReducer = (data, element) => {
 	else if (type === 'checkbox')
 		// option
 		data[element.name] = element.checked
-	else if (type.indexOf('select') !== -1)
-		data[element.name] = [].reduce.call(element.options, formReducer, [])
-	else if (
-		type === 'button' ||
-		element.name.indexOf('_add') !== -1 ||
-		type === 'submit'
-	)
-		undefined
+	else if (type.indexOf('select') !== -1) data[element.name] = [].reduce.call(element.options, formReducer, [])
+	else if (type === 'button' || element.name.indexOf('_add') !== -1 || type === 'submit') undefined
 	else if (type === 'number') data[element.name] = +element.value
 	else data[element.name] = element.value // number, text, etc
 
@@ -222,3 +208,11 @@ export function debounce(fn, delay) {
 		inDebounce = setTimeout(() => fn.apply(this, args), delay)
 	}
 }
+
+/**
+ *
+ */
+export function markAtsAndHashtags(text) {
+	const ats = text.replace(/(\s)@([\w-]+)/g, '$1<a href="/$2/">@$2</a>')
+	return ats.replace(/(\s)#([\w-]+)/g, '$1<a href="/explore/tags/$2/">@$2</a>')
+}

src/components/feed/Comments.js

@@ -1,6 +1,7 @@
 import Heart from './Heart'
 import PropTypes from 'prop-types'
 import { Component, h } from 'preact'
+import { markAtsAndHashtags } from '../Utils'
 
 const Comments = props => (
 	<div class="ige_post-comments mb-8">
@@ -9,10 +10,10 @@ const Comments = props => (
 			return (
 				<div class="d-block p-relative">
 					<div class="d-block mr-1em">
-						<a class="" title={username} href={'/' + username + '/'}>
+						<a class="ige_username" title={username} href={'/' + username + '/'}>
 							{username}
 						</a>
-						<span class="pl-2 ige_text">{v.node.text}</span>
+						<span class="pl-2 ige_text">{markAtsAndHashtags(v.node.text)}</span>
 					</div>
 					{/*<button type="button" class="ige_button">
 						<Heart width={12} height={12} fill="#8e8e8e" active={v.node.viewer_has_liked} />

src/components/feed/Post.js

@@ -8,6 +8,7 @@ import PostMedia from './PostMedia' // @todo: when handleEvent works again, remo
 import Save from './Save'
 import bind from 'autobind-decorator'
 import { Fragment, h } from 'preact'
+import { markAtsAndHashtags } from '../Utils'
 
 export default class Post extends FetchComponent {
 	state = {
@@ -174,10 +175,10 @@ export default class Post extends FetchComponent {
 				<div class="ige_post-content px-12">
 					{text !== undefined ? (
 						<div class="ige_post-text d-block">
-							<a class="" title={owner.username} href={'/' + owner.username + '/'}>
+							<a class="ige_username" title={owner.username} href={'/' + owner.username + '/'}>
 								{owner.username}
 							</a>
-							<span class="pl-2 ige_text">{text}</span>
+							<span class="pl-2 ige_text">{markAtsAndHashtags(text)}</span>
 						</div>
 					) : null}
 					<Comments data={comments} />

src/components/feed/feed.css

@@ -2,11 +2,12 @@
 	--boxWidth: 23vw;
 	--boxMarginRight: 10px;
 	--primary: white;
+	--navHeight: 54px;
 }
 
 #ige_feed {
 	position: fixed;
-	top: 7vh;
+	top: var(--navHeight);
 	bottom: 0;
 	right: 3vw;
 	left: 9px;
@@ -17,6 +18,8 @@
 }
 
 .ige_virtual {
+	padding-top: 10px;
+
 	overflow-y: scroll;
 	max-height: 100%;
 	height: 100%;
@@ -48,6 +51,29 @@
 	background-color: red;
 }
 
+.sentinel {
+	position: absolute;
+	pointer-events: none;
+	height: 1000px;
+	width: 100%;
+	visibility: hidden;
+	bottom: 0;
+	z-index: 9999;
+}
+.sentinel-start {
+	position: absolute;
+	pointer-events: none;
+	height: 1000px;
+	width: 100%;
+	visibility: hidden;
+	top: 0;
+	z-index: 9999;
+}
+.sentinel-start.disabled,
+.sentinel.disabled {
+	display: none;
+}
+
 .sentinel-top {
 	top: 0;
 }
@@ -65,7 +91,7 @@
 	width: var(--boxWidth);
 	min-width: var(--boxWidth);
 	max-width: var(--boxWidth);
-	max-height: 70rem;
+	max-height: calc(70vh - var(--navHeight));
 	margin-right: var(--boxMarginRight);
 	margin-bottom: 10px;
 	contain: layout style;
@@ -81,7 +107,7 @@
 	display: grid;
 	grid-template-rows: 53px auto 40px 1fr 45px;
 
-	height: auto; /* 100% */
+	height: auto;
 }
 
 .ige_textarea {
@@ -215,11 +241,6 @@
 	overflow-y: auto;
 }
 
-.ige_post-content a {
-	color: rgba(var(--anchor-color, 38, 38, 38), 1);
-	font-weight: 600;
-}
-
 .ige_post-text {
 	overflow-wrap: break-word;
 	max-width: 100%;
@@ -252,15 +273,15 @@
 }
 
 .ige_username {
-	color: rgba(var(--anchor-color, 38, 38, 38), 1);
+	color: rgba(var(--anchor-color, 38, 38, 38), 1) !important;
 	font-weight: 600;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
 .ige_location {
-	color: rgba(var(--anchor-color, 38, 38, 38), 1);
+	color: rgba(var(--anchor-color, 38, 38, 38), 1) !important;
 	line-height: 15px;
 	font-size: 12px;
 	overflow: hidden;
@@ -480,6 +501,12 @@
 	}
 }
 
+@keyframes fadeIn {
+	100% {
+		opacity: 1;
+	}
+}
+
 .ige_add_comment {
 	display: flex;
 	flex-grow: 1;