diff --git a/components/ArticleReply/index.js b/components/ArticleReply/index.js
index 2ca8514d..26fd2150 100644
--- a/components/ArticleReply/index.js
+++ b/components/ArticleReply/index.js
@@ -4,6 +4,7 @@ import gql from 'graphql-tag';
import { Box, Divider } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
+import { LINE_URL } from 'constants/urls';
import { nl2br, linkify } from 'lib/text';
import { TYPE_NAME } from 'constants/replyType';
import ExpandableText from 'components/ExpandableText';
@@ -130,13 +131,18 @@ const ArticleReply = React.memo(
const classes = useStyles({ replyType });
const renderFooter = () => {
+ const articleUrl =
+ typeof window !== 'undefined'
+ ? // Construct Article URL without search strings (usually gibberish 1st-party trackers)
+ window.location.origin + window.location.pathname
+ : '';
const copyText =
typeof window !== 'undefined'
? `${TYPE_NAME[reply.type]} \n【${t`Reason`}】${(
reply.text || ''
- ).trim()}\n↓${t`Details`}↓\n${
- window.location.href
- }\n↓${t`Reference`}↓\n${reply.reference}`
+ ).trim()}\n↓${t`Details`}↓\n${articleUrl}\n↓${t`Reference`}↓\n${
+ reply.reference
+ }\n--\n🤔 在 LINE 看到可疑訊息?加「真的假的」好友,查謠言與詐騙 ➡️ ${LINE_URL}`
: '';
return (
@@ -209,7 +215,9 @@ const ArticleReply = React.memo(
)}
- {nl2br(linkify(reply.text))}
+
+ {nl2br(linkify(reply.text))}
+
{renderReference()}
diff --git a/pages/article/[id].js b/pages/article/[id].js
index 632c1749..e380b1ab 100644
--- a/pages/article/[id].js
+++ b/pages/article/[id].js
@@ -16,7 +16,10 @@ import { usePushToDataLayer } from 'lib/gtm';
import { format, formatDistanceToNow } from 'lib/dateWithLocale';
import isValid from 'date-fns/isValid';
+import { LINE_URL } from 'constants/urls';
+import AddIcon from '@material-ui/icons/AddCircleOutline';
+import Fab from '@material-ui/core/Fab';
import AppLayout from 'components/AppLayout';
import Ribbon from 'components/Ribbon';
import Hyperlinks from 'components/Hyperlinks';
@@ -127,6 +130,24 @@ const useStyles = makeStyles(theme => ({
textOverflow: 'ellipsis',
lineClamp: 5,
},
+ lineFab: {
+ position: 'fixed',
+ zIndex: theme.zIndex.speedDial,
+ right: 20,
+ bottom: 20,
+ background: theme.palette.common.green1,
+ color: '#fff',
+ height: 52,
+ borderRadius: 32,
+
+ '&:hover': {
+ background: theme.palette.common.green2,
+ },
+ },
+ lineFabText: {
+ lineHeight: '20px',
+ margin: '0 12px',
+ },
}));
const LOAD_ARTICLE = gql`
@@ -246,6 +267,18 @@ function ArticlePage() {
setFlashMessage(error.toString());
}, []);
+ const handleCopy = useCallback(e => {
+ const selection = document.getSelection();
+ const articleUrl = window.location.origin + window.location.pathname;
+
+ e.clipboardData.setData(
+ 'text/plain',
+ selection.toString() +
+ `\n📋 節錄自 Cofacts 真的假的:${articleUrl}\n🤔 在 LINE 看到可疑訊息?加「真的假的」好友,查謠言與詐騙 ➡️ ${LINE_URL}`
+ );
+ e.preventDefault();
+ }, []);
+
const handleFormClose = () => setShowForm(false);
const article = data?.GetArticle;
@@ -322,7 +355,7 @@ function ArticlePage() {
)}
-
+
{nl2br(
linkify(text, {
props: {
@@ -390,6 +423,7 @@ function ArticlePage() {
mt={3}
id="current-replies"
ref={replySectionRef}
+ onCopy={handleCopy}
>
{t`${article.articleReplies.length} replies to the message`}
@@ -430,6 +464,24 @@ function ArticlePage() {
onClose={() => setFlashMessage('')}
message={flashMessage}
/>
+ {!currentUser && (
+
+
+
+ LINE 機器人
+
+ 查謠言詐騙
+
+
+ )}
);
}