cofacts

#340 Add instructions to add LINE as friend in article detail page

Closes <https://github.com/cofacts/rumors-site/issues/339|#339>.

#339 Cofacts website redirect to Cofacts LINE bot

From: <https://g0v.hackmd.io/GhVhBlK_QwKT3E5clAfkJw#Owned-media-mitigation|https://g0v.hackmd.io/GhVhBlK_QwKT3E5clAfkJw#Owned-media-mitigation> • 用類似客服按鈕的方式黏在旁邊 • google 來大部分是手機使用者，所以用連結連到 <https://line.me/R/ti/p/@cofacts|https://line.me/R/ti/p/@cofacts> • 分享文案加入 Cofacts LINE bot • article detail「複製」按鈕 / share 功能的文字 • 在 Cofacts 複製文字時，加上 Cofacts 網站網址（如<https://www.ettoday.net/news/20200930/1821415.htm|ETToday>）

#341 Trusted site

Comment on #341 Trusted site

Hi <https://github.com/Debyanshu|@Debyanshu> would you elaborate more about this issue?

#342 &lt;Card&gt; for detail pages

*Refactor* This PR introduces `&lt;Card&gt;`, a common layout that can be seen in <https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=1273%3A176|article detail>, and will be applied to <https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=912%3A190|reply detail> and <https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=912%3A385|profile page> in the future. <https://user-images.githubusercontent.com/108608/94900490-a8af5d00-04c7-11eb-8dc9-e721aede8e10.png|image> <https://user-images.githubusercontent.com/108608/94900528-ba910000-04c7-11eb-9295-f06ccd23c9fd.png|image> <https://user-images.githubusercontent.com/108608/94900553-c67cc200-04c7-11eb-913a-61b3e7cfa45a.png|image> Also I add I add `forwardRef` to `Card` and `Ribbon` because in future PRs we are going to need them.

#343 Adjust global border-radius and primary color palatte

This PR adjusts Material-UI theme used theme in Cofacts to better match <https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=681%3A0|figma> <https://user-images.githubusercontent.com/108608/94903082-d1d1ec80-04cb-11eb-9659-eb476b6a55cf.gif|button> • Global border radius raised to 8px (default 4px) • This affects dropdowns, pop-overs, etc. • Remove incorrect primary dark / light color setup • The incorrect setup causes buttons in primary color turns grey when hovering on the button • Remove the color so that Material-UI can handle hovering color by themselves. • Set primary button text color in global CSS • Material-UI uses `rgba(0,0,0,0.88)` by default • Set to #fff to match <https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=890%3A586|figma> • Apply app.css to Storybook to reflect this change • Use Material-UI `Button` in `ArticleReplyFeedbackControl` to see primary color setup

#344 Article detail revamp using &lt;Card&gt;

Rewrite Article detail page layout using `&lt;Card&gt;` and related components introduced in

Review on #342 &lt;Card&gt; for detail pages

Review on #343 Adjust global border-radius and primary color palatte

Bram.us

Prevent content from being hidden underneath a fixed header by using scroll-margin-top

MDN Web Docs

scroll-behavior

The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.

#344 Article detail revamp using &lt;Card&gt;

#18 Add categories data

#18 Add categories data

#226 migration script to create backend users referenced in the db

Review on #344 Article detail revamp using &lt;Card&gt;

#340 Add instructions to add LINE as friend in article detail page

#226 migration script to create backend users referenced in the db

Comment on #49 create users from existing entities

<https://github.com/cofacts/rumors-api/pull/226|cofacts/rumors-api#226>

Review on #340 Add instructions to add LINE as friend in article detail page

Figma

Cofacts website

Created with Figma

Comment on #340 Add instructions to add LINE as friend in article detail page

我發現 article page copy-paste 在我撰寫的回應、在新回應區利用剪下貼上重新編排回應文字的時候，也會跑出 `在 LINE 看到可疑訊息？加「真的假的」好友，查謠言與詐騙` 我覺得滿惱人的，所以改成讓「文字插入剪貼簿」這件事情只會發生在訊息文字與已經回應的文字囉。

#345 Similar messages side section in article detail

Rewrite "similar messages" side section. • Figma: <https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=890%3A585|https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=890%3A585> • Mobile / desktop differs a lot, thus `Card` cannot be reused here. • use explicit class name for each component in the similar messages section

#339 Cofacts website redirect to Cofacts LINE bot

#340 Add instructions to add LINE as friend in article detail page

#344 Article detail revamp using &lt;Card&gt;

Rewrite Article detail page layout using `&lt;Card&gt;` and related components introduced in <https://github.com/cofacts/rumors-site/pull/342|#342> • Mix the use of `&lt;Card&gt;`, `--card-px`, `&lt;CardHeader&gt;` `&lt;CardContent&gt;` to compose basic layout of the article detail page ("related article" section excluded) • Converts `button` to Material-UI `&lt;Button&gt;` to cut extra CSS styles &amp; provide better look &amp; feel for the buttons *Per-file / section summary* *`/page/article/[id].js`* • Apply `&lt;Card&gt;`, `&lt;CardContent&gt;` and `&lt;CardHeader&gt;` • Make margin / padding adjustments at page component level • More adhere to <https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=1236%3A1272|figma> • Similar to <https://mxstbr.com/thoughts/margin|'layout' component> • Each sub-component is adjusted to have 0 margin / padding to maximize their reusability • Add header to comments to that it does not confuse users -- Fix <https://github.com/cofacts/rumors-site/issues/336|#336> <https://user-images.githubusercontent.com/108608/94984787-8f1f1b80-0582-11eb-8a5d-b35d589038f7.png|localhost_3000_article_3fczhzr31y8ap> <https://user-images.githubusercontent.com/108608/94984792-a1995500-0582-11eb-9ff1-79b6169e8204.png|image> *`TrendPlot`* • Simply CSS • Make the left most label align left edge, the right most label align right edge <https://user-images.githubusercontent.com/108608/94961064-8d276f00-0526-11eb-949a-07e375c0a670.png|image> *`ReplyRequstReason`* • Simplify DOM • Use Material-UI `Button` to remove custom CSS <https://user-images.githubusercontent.com/108608/94962038-636f4780-0528-11eb-841e-b72a18594a2d.png|image> <https://user-images.githubusercontent.com/108608/94962028-5eaa9380-0528-11eb-8aa8-7e041c6a9ddb.png|image> *`CreateReplyRequestForm`* • Use different button for "Reply to this message" button for mobile &amp; desktop. This simplifies CSS logic a lot. • Remove avatar on mobile, as <https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=1236%3A1314|Figma> suggests. • Use <https://material-ui.com/components/textarea-autosize/|TextareaAutosize> for reason input • Remove focus logic and fix <https://github.com/cofacts/rumors-site/issues/310|#310> • Figma 裡面「<https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=1019%3A0|碰到『送出』上緣就自動多一行>」根本做不出來啦（翻桌） 不做了不做了～ • Simplify "new reply" floating action button style • Now uses Material UI FAB style only • Move the pen icon to component/icons • Show button only for users that is logged in (so that it does not interfere with add new LINE FAB) <https://user-images.githubusercontent.com/108608/94961284-f0190600-0526-11eb-8f20-f75ca7feb2a2.png|image> <https://user-images.githubusercontent.com/108608/94961344-0b841100-0527-11eb-8c44-4f6ee2aec94c.png|image> <https://user-images.githubusercontent.com/108608/95045335-5911a100-0714-11eb-98ee-bfb787b12fa0.png|image> *`NewReplySection`* • Use `&lt;Card&gt;` for desktop and `&lt;Dialog fullscreen&gt;` for mobile • This may fix some issue <https://github.com/cofacts/rumors-site/issues/279|#279> since we are using Material UI `Dialog` • We are render this only on browser, thus we can use `useMediaQuery` here <https://user-images.githubusercontent.com/108608/94961688-b4327080-0527-11eb-9f4f-f1aadd6a5db0.png|image> <https://user-images.githubusercontent.com/108608/94961769-e6dc6900-0527-11eb-9ff7-3d19ca5e85b6.gif|new reply section> *`CurrentReplies`* • Use `&lt;CardHeader&gt;` for header to match <https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=1273%3A190|figma> • Each article reply is a `&lt;CardContent&gt;` • Fix deleted reply dialog <https://user-images.githubusercontent.com/108608/94984852-4025b600-0583-11eb-8c85-0f7cf3c361a7.png|image> <https://user-images.githubusercontent.com/108608/94984858-516ec280-0583-11eb-9b1b-2608c9549437.png|image> <https://user-images.githubusercontent.com/108608/94984860-57fd3a00-0583-11eb-8a0d-3c969eeaf73f.png|image> <https://user-images.githubusercontent.com/108608/94984877-76633580-0583-11eb-8546-92984e8be21b.png|image> <https://user-images.githubusercontent.com/108608/94984879-811dca80-0583-11eb-9088-8ba951249dc3.png|image>

#345 Similar messages side section in article detail

#346 Add favicon and article detail banner

• Add favicon that • uses dark-theme aware SVG by default • uses PNG with white background as fallback • Add banner to article detail that redirects user to LINE <https://user-images.githubusercontent.com/108608/95110867-3f527700-0771-11eb-82d5-28a46a6d5083.png|image> <https://user-images.githubusercontent.com/108608/95112122-21861180-0773-11eb-9d47-c27c338bd2cd.png|image>

Review on #346 Add favicon and article detail banner

#347 SEO for Mandarin content

In <https://g0v.hackmd.io/GhVhBlK_QwKT3E5clAfkJw#%E5%B0%8F%E8%81%9A%E8%A7%80%E5%AF%9F%E8%88%87%E6%AA%A2%E8%A8%8E|20200930 meeting note>, we found that "Cofacts" won't score the first in Google when the google language is set to Traditional Chinese (Taiwan); Medium with Mandarin content comes the first. 要看這個 <https://support.google.com/webmasters/answer/182192?hl=en|https://support.google.com/webmasters/answer/182192?hl=en> &gt; In addition, the crawler sends HTTP requests without setting Accept-Language in the request header. 可能要在 HTML 裡加上不同語言的 link <https://support.google.com/webmasters/answer/189077|https://support.google.com/webmasters/answer/189077>

#225 Similar replies API and revamp related artitle API

This PR adds `similarReplies` to `Reply` object type to display <https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=894%3A85|similar reply section in reply page>. Given that replies are often copied over to another, this function should be useful when finding duplicated replies. Several refactors to `Article` object type's `relatedArticles` are also added, including: • Default to sort by score (high to low) • Add hyperlink title / summary matching • Test highlights are generated in unit tests

Review on #225 Similar replies API and revamp related artitle API

#225 Similar replies API and revamp related artitle API

#341 Trusted site

#348 Add hash to new reply section &amp; each reply in article detail page

From slack discussion: <https://user-images.githubusercontent.com/108608/95320328-eba87080-08cb-11eb-96f0-d871a6384fba.png|image> Related material: • <https://www.bram.us/2020/03/01/prevent-content-from-being-hidden-underneath-a-fixed-header-by-using-scroll-margin-top/|https://www.bram.us/2020/03/01/prevent-content-from-being-hidden-underneath-a-fixed-header-by-using-scroll-margin-top/> • <https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior|https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior> Alternative: • Seems that scroll-margin also works for currently used `scrollIntoView()`: <https://stackoverflow.com/a/59611245|https://stackoverflow.com/a/59611245>

Comment on #216 On-boarding tutorial

「模擬傳訊息」`displayText` <https://developers.line.biz/en/reference/messaging-api/#postback-action|https://developers.line.biz/en/reference/messaging-api/#postback-action> max 300 characters &gt; 只要每天早上一杯地瓜葉牛奶。不僅有效降低三高，甚至連痛風也沒了；此外，地瓜葉牛奶的作法也很簡單，只要先將地瓜葉川燙過後，再加入鮮奶打成汁即可。 Reply: Use <https://cofacts.org/reply/QB6mgGMBSH_MLFhI2GNi|https://cofacts.org/reply/QB6mgGMBSH_MLFhI2GNi>

#342 &lt;Card&gt; for detail pages

#343 Adjust global border-radius and primary color palatte

#310 Reply request submission button jumps around when clicking

#336 Differentiate comment section of article detail page

#344 Article detail revamp using &lt;Card&gt;

#345 Similar messages side section in article detail

#346 Add favicon and article detail banner

helloeveryone.taipei

來我跟你說

群組裡晨昏定省的長輩圖總令你難以招架嗎？開口說愛其實沒這麼難，就讓最可愛有趣的晚輩圖產生器，陪你一起傳遞友善問候與溫柔宣言，分享彩虹多元平權價值觀點！心中有愛，晚輩圖就給他做起來！

Comment on #226 migration script to create backend users referenced in the db

We can add some text for this `<http://console.info|console.info>` so that we know what this number means when we see it in the terminal.

Review on #226 migration script to create backend users referenced in the db

Sorry it has been a week and I am still consuming `src/scripts/migrations/createBackendUsers.js`. Other files are reviewed and looks good to me :)

Comment on #226 migration script to create backend users referenced in the db

I am not familiar with painless. Can painless omit `return` ?

Comment on #226 migration script to create backend users referenced in the db

I think we can use camel case (`batchSize`) here

Comment on #226 migration script to create backend users referenced in the db

<https://www.elastic.co/guide/en/elasticsearch/painless/6.2/painless-syntax.html|https://www.elastic.co/guide/en/elasticsearch/painless/6.2/painless-syntax.html> It's not really well documented but from the look of the example and the fact it actually runs as expected, I think it does if the return type is not void.

Review on #226 migration script to create backend users referenced in the db

LGTM! The process is very well-written and clear. Thanks for the script! :+1: I will start arranging SOPs and apply it first on DB backups &amp; staging environments. Please help resolve the conflict then we can merge this PR.

#228 Hint user to turn on notification to get updates

• Tell the user that Cofacts can notify them if they turn on notification setting • Timing: after displaying a reply, and after submitting new reply requests • Adjust the wording of notification to be more clear and concise Closes <https://github.com/cofacts/rumors-line-bot/issues/217|#217>. *After displaying a reply* <https://user-images.githubusercontent.com/108608/95684283-30613e00-0c23-11eb-9614-b9e861b3f6ce.png|image> *After providing source* (This step also sends a reply request without reason) In this step, the priority should be: providing more reason &gt; turn on notification &gt; ask friends. <https://user-images.githubusercontent.com/108608/95684307-51299380-0c23-11eb-8482-2c59095cd4aa.png|image> *After providing reason* In this step, the priority should be: turn on notification &gt; ask friends &gt; update reason <https://user-images.githubusercontent.com/108608/95684319-60a8dc80-0c23-11eb-984f-9278ab841b1d.png|image>

Comment on #228 Hint user to turn on notification to get updates

*Pull Request Test Coverage Report for <https://coveralls.io/builds/34095248|Build 1157>* • *9* of *9* *(100.0%)* changed or added relevant lines in *4* files are covered. • No unchanged relevant lines lost coverage. • Overall coverage increased (+*0.02%*) to *84.727%* * * * * * * *:yellow_heart: - <https://coveralls.io|Coveralls>*

YouTube

LINE-ifttt

#349 Reply detail page and side section

#349 Reply detail page and side section

Comment on #226 migration script to create backend users referenced in the db

<https://coveralls.io/builds/34136730|Coverage Status> Coverage increased (+0.9%) to 88.156% when pulling *<https://github.com/cofacts/rumors-api/commit/865dc58dabafa214d838e7c46bea9f390e45e50b|865dc58> on createUsers* into *<https://github.com/cofacts/rumors-api/commit/77f009788e5f011eb1a8acf7a56d5d1ebc5a6208|77f0097> on master*.

#49 create users from existing entities

#226 migration script to create backend users referenced in the db

#227 index user if not existed and log last active time for user accessing apis via backend apps

closes <https://github.com/cofacts/rumors-api/issues/220|#220>

Comment on #227 index user if not existed and log last active time for user accessing apis via backend apps

<https://coveralls.io/builds/34136941|Coverage Status> Coverage decreased (-2.1%) to 85.923% when pulling *<https://github.com/cofacts/rumors-api/commit/4d92870af049290dd50d72e380818b43d7ff7e04|4d92870> on backendUsers* into *<https://github.com/cofacts/rumors-api/commit/c678c946517685dd8b0a6764a0bd9af295a71def|c678c94> on master*.

YouTube

在 LINE 接收 Cofacts 真的假的的熱門訊息

YouTube

在 Slack 接收 Cofacts 真的假的的熱門訊息

YouTube

在 Telegram 接收 Cofacts 真的假的熱門訊息

g0v.hackmd.io

20201014 會議記錄 - HackMD

#350 Don't insert friend link to clipboard for logged-in users

From <https://g0v.hackmd.io/CCecwMdhT_eTPQmNfzQTzQ#%E6%9C%AA%E7%AB%9F%E9%A0%85%E7%9B%AE|1007 testing feedback> In <https://github.com/cofacts/rumors-site/pull/340|#340> we insert add-friend link at the end of clipboard when user copies text from reply. However, for logged-in editors, it will interfere the fact-checking process, thus should be removed. We can safely assume that logged-in users are not the target of the add-friend link.

Comment on #282 Font size adjustments

Per <https://g0v.hackmd.io/CCecwMdhT_eTPQmNfzQTzQ?both#%E6%9C%AA%E7%AB%9F%E9%A0%85%E7%9B%AE|2020/10/07 testing feedback> The share button should have same height as reason buttons. Currently "Share" is slightly higher and its font is slightly bigger: <https://user-images.githubusercontent.com/108608/95948152-9b2c9800-0e22-11eb-9f2a-c26b27e3a52a.png|image>

#351 [RSS] Implement new IFTTT UI

Figma : <https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=3146%3A351|https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=3146%3A351> Discussion : <https://g0v.hackmd.io/GhVhBlK_QwKT3E5clAfkJw?view#Cofacts-Next-%E8%BF%BD%E8%B9%A4|https://g0v.hackmd.io/GhVhBlK_QwKT3E5clAfkJw?view#Cofacts-Next-%E8%BF%BD%E8%B9%A4> Screenshots : <https://user-images.githubusercontent.com/6376572/95965599-b1dfe880-0e3c-11eb-8a0a-f34fbfc26ed4.gif|ifttt>

Comment on #228 Hint user to turn on notification to get updates

Typo

Review on #228 Hint user to turn on notification to get updates

LGTM! Just some minor issues: 1. typo： `ㄌㄛ` 2. Some lines aren't covered by test : <https://coveralls.io/builds/34095250/source?filename=src/webhook/handlers/askingReplyRequestReason.js#L74|https://coveralls.io/builds/34095250/source?filename=src/webhook/handlers/askingReplyRequestReason.js#L74> <https://coveralls.io/builds/34095250/source?filename=src/webhook/handlers/askingArticleSubmissionConsent.js#L103|https://coveralls.io/builds/34095250/source?filename=src/webhook/handlers/askingArticleSubmissionConsent.js#L103>

Review on #349 Reply detail page and side section

Comment on #351 [RSS] Implement new IFTTT UI

We can move the definition of `CustomTab` and `CustomCopyButton` to outside of `DialogBody`'s render function

Comment on #351 [RSS] Implement new IFTTT UI

Wrapping `t` to Chinese characters will cause it to be used as translation keys when we extract translation in the future. Suggest remove `t` from these copies.

Review on #351 [RSS] Implement new IFTTT UI

Overall LGTM, thanks for the update! Some little suggestions before merge is appended.

Comment on #228 Hint user to turn on notification to get updates

&gt; LGTM! &gt; &gt; Just some minor issues: &gt; &gt; 1. typo： `ㄌㄛ` &gt; 2. Some lines aren't covered by test : &gt; <https://coveralls.io/builds/34095250/source?filename=src/webhook/handlers/askingReplyRequestReason.js#L74|https://coveralls.io/builds/34095250/source?filename=src/webhook/handlers/askingReplyRequestReason.js#L74> &gt; <https://coveralls.io/builds/34095250/source?filename=src/webhook/handlers/askingArticleSubmissionConsent.js#L103|https://coveralls.io/builds/34095250/source?filename=src/webhook/handlers/askingArticleSubmissionConsent.js#L103> Branches are covered in latest unit test case. Should be ready to merge now~

#217 Ask user to turn on notification after submission

#228 Hint user to turn on notification to get updates

#227 index user if not existed and log last active time for user accessing apis via backend apps

#228 untangle test dependencies

some fixtures aren't wiped properly, so db query will have different results depending on the order of the tests ran; this is introducing unnecessary dependencies and causing some tests to be flaky.

Review on #351 [RSS] Implement new IFTTT UI

LGTM! Thanks a million!

#351 [RSS] Implement new IFTTT UI

Comment on #216 On-boarding tutorial

Images: <https://www.dropbox.com/sh/y3mt06zvahge4cd/AACwWy77wDd9La0ICViOC56Ea?dl=0|https://www.dropbox.com/sh/y3mt06zvahge4cd/AACwWy77wDd9La0ICViOC56Ea?dl=0> • 1: Greeting • 2~5: Flex message carousel • 6: Thank you