重現步驟

找一篇有回覆的文章，再點一篇沒有回覆的文章，會發現會把上一篇回覆帶到沒有回覆的文章上。

Cause

As discussed in 20180207 "使用者發送過的文章列表" section, we should provide a list of articles a LINE user has submitted.

Requirements

• Add a "Author of article" text box in the filter section of current article list page, which allows the user to input an article ID.
• Add a link to "list all submitted articles of this user" in single article page -- @LucienLee please help determine where the link should be put on page
• The user clicks the link, the the user will be directed to article page, with a filter "Author of article" checked and filled with the ID of the visited article.

Resources

The API will support "Given an article, list all articles the current author has submitted" via the new
fromUserOfArticleId filter in ListArticles.

• Related issue: cofacts/rumors-api#65
• The new API PR: cofacts/rumors-api#68

Index ArticleItem "HAVE READ" / "NOT ARTICLE" quick control widget.

List:

1. latest replies added to the database (sorting)
2. My replies (filtering)

Example: https://github.com/zeit/next.js/tree/canary/examples/with-hashed-statics

This can be used for <img> tags as well as *.style.css files, which contains styled-jsx CSS.

Cause

According to the discussions in "詢問爭點功能", we should reveal the reasons why a LINE user want to submit such article to the editors.

Requirement

• In the article page, list the reasons for each reply requests
• For each reason, allow editors to upvote / downvote. Ask the editor if the reason is useful for you to understand the question / where the controversy is.
• Allow users to edit their upvote / downvote

Resources

The article object type will soon support replyrequests field, in which has reason field and the feedback voting fields. Also, we will support CreateReplyRequestFeedback API.

Related API: cofacts/rumors-api#69

現在的狀況是，我常常想要找含有「醫藥」或「年金」兩字的謠言，但網頁目前卻沒有搜尋框。

或許用現成 Search API 可行？

比較一下 ListArticle 與 Search 的差異，應該可以直接使用，不須在 Search 加一個 input 欄位。

As discussed in 0919 meeting

• Add target="_blank" for external links
• Disable eslint for no referrer check
• Display "open new window" icon using ::after pseudo-element

API:
cofacts/rumors-api#36

往後端詢問的 API 會一直觸發登入視窗，只要回到文章列表就會出現，有點煩。

Fact checks micro-format
https://developers.google.com/search/docs/data-types/factcheck

According to comments in https://blog.haroen.me/json-ld-with-react , may require dangerouslyInsertInnerHTML when doing SSR.

Discussion: https://hackmd.io/s/rkdgg_aKb

Examples of reused replies:

• https://cofacts.g0v.tw/article/5479897474154-rumor (with modifications)
• https://cofacts.g0v.tw/article/5478326489098-rumor (direct re-use)

We will collect hyperlinks & their info in DB it should be accessible via API ( cofacts/rumors-api#41 ).

We should show part of such info in article page so that the editors can have a glimpse of the content of the page without clicking into the site.

在前端允許使用者使用支援的 filter：
cofacts/rumors-api#35

網頁裡可能要做成在搜尋框裡加上 in: XXX 這樣的形式，像 gmail / github / slack 一樣⋯⋯？

Use cases

1. Users found the desired reply on cofacts.g0v.tw and want to share to LINE or other places.
2. Editors found a reply to copy from when replying other articles.

Currently, the user will have to copy "含有真實訊息" / "含有不實訊息", the reasons and the references separately. When the URL in the references are too long, the URLs gets truncated, and will become unusable after paste.

Proposed solution

Add a "Share" or "Copy to clipboard" button to each replies. (Article page)

For example, in an article page like this:
https://cofacts.g0v.tw/article/AV_pZ0PPyCdS-nWhujrf

When the 'share' or 'copy to clipboard' button is pressed, the following text should be shared or put in to the clipboard:

⭕ 含有正確訊息

理由：
尋人持續進行中。

出處：
https://www.facebook.com/permalink.php?story_fbid=1677448952276114&id=100000330760687
尋人
https://www.youtube.com/watch?v=yad0JzYfzuY&feature=youtu.be
女大生離家失蹤4天

---
看看其他回應：https://cofacts.g0v.tw/article/AV_pZ0PPyCdS-nWhujrf

Tech reference

Native "share" on Google Chrome mobile:
https://developers.google.com/web/updates/2016/09/navigator-share

Cross-browser clipboard solution
https://clipboardjs.com/

Requested by editors in the editors' meeting: http://beta.hackfoldr.org/cofacts/https%253A%252F%252Fhackmd.io%252Fs%252FHJy19V-E-

Also we've discussed about possibilities of creating a wizard or an opt-in tutorial : https://hackmd.io/s/SJfHUZO7-#first-draft-visual-verification-guideline-可以帶給我們什麼

Currently a floating action button to FB 懶人包

The total number of 2nd ajax loaded article page is wrong. It shows "0 articles" and Prev/Next link disappears.

Note that reply page does not have such bug.

• Simplify app() HOC: should invoke page components' getInitialProps instead of initFn, directly put bootstrapFn in page component's componentDidMount. Integrate redux stuff to _app.js, since we are migrating to next6 in #106 . Reference: _app usage , next-redux-wrapper integration & implementation
• Add storybook for components. Document the properties and setup snapshots. Add the following addons:
  • storyshots
  • storysource
  • info
  • jest
• Replace all replyConnections with articleReplies

需要登入。
讓網站使用者也能送出 replyRequest。

按鈕位置：

點按過後：

copy:

    <p>請告訴其他編輯：<strong>您為何覺得這是一則謠言</strong>？</p>
    <textarea placeholder="例：我用 OO 關鍵字查詢 Facebook，發現⋯⋯ / 我在 XX 官網上找到不一樣的說法如下⋯⋯"></textarea>
    <details>
    <summary>送出理由小撇步</summary>
你可以試著：<br>
A. 闡述更多想法<br>
B. 去 google 查查看<br>
C. 把全文複製貼上到 Facebook 搜尋框看看<br><br>
把你的結果傳給其他編輯參考吧！
</details>
    <button disabled="">字數太少，無法送出</button>

</div>

Line bot 的顯示順序是：

1. 有幾則回應認為含有真實訊息、有幾則認為含有不實訊息
2. 先列出認為真實的
3. 然後列出認為不實的

或者是可以做成分頁的形式。

這樣可以讓不同立場的聲音更容易被拿來對比與看見。

• 改名「不在查證範圍」
• 新增樣板「這是廣告活動，活動期間到⋯⋯」引導編輯填寫活動時間，但編輯也可以不填。
• 新增樣板「訊息僅含有失效連結」
• 編輯界面增加「查證範圍」連結（for 編輯）；當有回應是「不在查證範圍」時，提供使用者一個連結說「查證範圍是什麼」（for 使用者）

1. Change CORS rule to use https for rumors.hacktabl.org
2. Redirect http ones to https using cloudflare page rules

謠言列表�頁面設計開發：

• Filter/ Sort
• Search bar
• Article Summary
• Tags

View details in Rollbar: https://rollbar.com/mrorz/rumors-site/items/3/

URIError: URI malformed
  File "<anonymous>", line unknown, in decodeURIComponent
  File "/srv/www/node_modules/next-routes/dist/index.js", line 233, in <unknown>
            return Object.assign(params, _defineProperty({}, _this4.keys[i].name, decodeURIComponent(val)));
  File "<anonymous>", line unknown, in Array.reduce
  File "/srv/www/node_modules/next-routes/dist/index.js", line 231, in Route.valuesToParams
          return values.reduce(function (params, val, i) {
  File "/srv/www/node_modules/next-routes/dist/index.js", line 223, in Route.match
            return this.valuesToParams(values.slice(1));
  File "/srv/www/node_modules/next-routes/dist/index.js", line 96, in routes.reduce.query
            var params = route.match(pathname);
  File "<anonymous>", line unknown, in Array.reduce
  File "/srv/www/node_modules/next-routes/dist/index.js", line 94, in Routes.match
          return this.routes.reduce(function (result, route) {
  File "/srv/www/node_modules/next-routes/dist/index.js", line 126, in <unknown>
            var _match2 = _this.match(req.url),
  File "/srv/www/server.js", line 60, in server.use
        handler(ctx.req, ctx.res);

as title.

Data:
https://cofacts-api.g0v.tw/graphql?query=%7B%0A%20%20GetArticle(id%3A%20%22AVwkCfYCyCdS-nWhuZIv%22)%20%7B%0A%20%20%20%20text%0A%20%20%7D%0A%7D

Displayed result:
https://cofacts.g0v.tw/article/AVwkCfYCyCdS-nWhuZIv

Notice that the two bit.ly links disappeared.

Visit: https://cofacts.g0v.tw/article/AWEET-BFyCdS-nWhunGr

TypeError: Cannot read property 'set' of null
    at /srv/www/.next/dist/ducks/articleDetail.js:182:35
    at /srv/www/node_modules/immutable/dist/immutable.js:3016:46
    at List.__iterate (/srv/www/node_modules/immutable/dist/immutable.js:2206:13)
    at IndexedIterable.mappedSequence.__iterateUncached (/srv/www/node_modules/immutable/dist/immutable.js:3015:23)
    at seqIterate (/srv/www/node_modules/immutable/dist/immutable.js:604:16)
    at IndexedIterable.IndexedSeq.__iterate (/srv/www/node_modules/immutable/dist/immutable.js:320:14)
    at IndexedIterable.toArray (/srv/www/node_modules/immutable/dist/immutable.js:4258:23)
    at List [as constructor] (/srv/www/node_modules/immutable/dist/immutable.js:2065:62)
    at reify (/srv/www/node_modules/immutable/dist/immutable.js:3570:37)
    at List.map (/srv/www/node_modules/immutable/dist/immutable.js:4401:14)

L172 - 197

return state.withMutations(function (s) {
    return s.updateIn(['data', 'article'], function (article) {
      return (article || (0, _immutable.Map)()).merge(payload.remove('replyConnections').remove('relatedArticles'));
    }).setIn(['data', 'replyConnections'], payload.get('replyConnections')).updateIn(['data', 'relatedArticles'], function (articles) {
      return !relatedArticleEdges.size ? articles : relatedArticleEdges.map(function (edge) {
        return edge.get('node').remove('replyConnections');
      });
    }).updateIn(['data', 'relatedReplies'], function (replies) {
      return !relatedArticleEdges.size ? replies : relatedArticleEdges.flatMap(function (edge) {
        return edge.getIn(['node', 'replyConnections']).map(function (conn) {
          return conn.get('reply').set('article', edge.get('node').remove('replyConnections'));
        }).filter(function (reply) {
          // Filter-out replies that is already re-used.
          return reply && !replyIds.contains(reply.get('id'));
        });
      })
      // De-duping replies using replyId, taking the reply with more relavant article
      // (which should come first)
      //
      .groupBy(function (reply) {
        return reply.get('id');
      }).map(function (replyGroup) {
        return replyGroup.first();
      }).toList();
    });
  });

L182: return conn.get('reply').set('article', edge.get('node').remove('replyConnections'));

5

https://zeit.co/blog/next5

• Use webpack file-loader to replace babel file loaders
• Use next-css to include normalize.css and global CSS, remove the dangerouslyInsertInnerHtml.

5.1

https://zeit.co/blog/next5-1

• Move environments to next.config.js, maybe remove env vars in deploy script & use mounts instead

In the site header, show a progress bar with 3 racing indicators:

1. The number of articles that has been replied
2. The number of total articles
3. The number of articles the user has replied ( API: cofacts/rumors-api#74 )

| ============================> Total articles: 16,321
| =======================:---> Replied by others: 15900 / by you: 321

With the following nice-to-have:

• When the user submits an article, show a "+1" effect on the "The number of articles that has been replied" or "The number of articles the user has replied"
• The number is updated whenever the user changes page. (No +1 effect in this case)

Package: https://www.npmjs.com/package/next-routes
Example: https://github.com/zeit/next.js/tree/master/examples/with-next-routes
Discussion: https://g0v-tw.slackarchive.io/cofacts/page-2/ts-1491444865437335

If an user clicks "X", display a prompt for the user to input reason.

API: cofacts/rumors-api#75

Ex: https://cofacts.g0v.tw/article/AV2Cz6QhyCdS-nWhudIG
latest reply should be put on top of old replies

Currently we apply a strong filter (reply request >= 2) to the article list. We should let the users know that there is such a filter, and provide a link to the unfiltered version.

Discussion: http://beta.hackfoldr.org/cofacts/https%253A%252F%252Fdocs.google.com%252Fdocument%252Fd%252Fe%252F2PACX-1vQTgQtH5W-Co4UX--1bV8CBRbklr_kSYppCIlLpJ0W3x0BnPET0zJN50lx0P_MyyK-KHVCYuO2RkWyG%252Fpub (Last section)

Steps to reproduce:

1. Visit this page, which has lots of related replies: https://cofacts.g0v.tw/article/AV_Nfed_yCdS-nWhujXH
2. In the same window, click "真的假的" to go back to article list
3. pick one article and enter its article page
4. If the article has no related articles, then it will show the related replies of the previous article.

Expected:
The article store should be reset when the user leaves the article page.

https://analytics.usa.gov/

Try out these ready-made solutions. Consider setting up an analytics site and invite other g0v projects if it is easy to use.

• website https://github.com/18F/analytics.usa.gov
• crawler https://github.com/18F/analytics-reporter

According to the analytics, 45% of our traffic comes from organic search on mobile devices.

We surely have enough incentive to support AMP. However, the restrictions are huge.

The Next.JS's official example for amp also contains bugs: vercel/next.js#3155

We may need some discussion on whether and how we should support AMP.

As discussed in the design decision and mentioned in editor feedbacks, we should add a new reply type to handle opinionated articles, providing users with different point of view.

Tasks required in rumors-site are:

• New reply type in selection. Needs string copies for name and description.
• The new type should be properly displayed in the reply list.

Related issues:

• cofacts/rumors-line-bot#17
• cofacts/rumors-api#38

Blocked by cofacts/rumors-api#64

• 各文章最近一次被回報的時間 (文章列表、文章頁面)

"Show only articles with <input> reply requests"
「只顯示至少 <input> 人回報的文章」

Implements as a checkbox below "Not replied yet / Replied / All" radio buttons

This is blocked by cofacts/rumors-api#54, which will implement the API needed for this function.

As discussed in http://beta.hackfoldr.org/cofacts/https%253A%252F%252Fhackmd.io%252Fs%252FB15v54U0Z

Using "真的假的" in google basically cannot find this project.

We should try the following SEO techniques in our homepage:

• Add 真的假的 to page title
• Add subtitle
• etc

I think maybe we are doing "fact-check tags" wrong. We should first remove the tags and see if this error goes away, then re-implements the fact-check tags in a different manner.

讓網站使用者可以登入之後送出「你覺得這個回應有用嗎」（ReplyFeedback）

要使用的 API：CreateOrUpdateReplyConnectionFeedback mutation
Doc: https://cofacts-api.hacktabl.org/graphql

Ex: https://cofacts.g0v.tw/reply/AWB5eu1iyCdS-nWhullA

The "O" "X" on the bottom right corner is not functional, while these buttons actually work in article pages.

As discussed in 0919 meeting

• Put editor tutorial & facebook group to the left of the top banner
• Add contact email in the footer of the website

Display a 7-day trend line to visualize the popularity of an article.

Use reply requests counts, reply feedback counts and LINE bot searches counts (via Google analytics API) to build up the chart.

We can use this to make charts:
https://aftertheflood.co/projects/sparks/

Reference:

"24HR trend" in rollbar item list page

This reply is used in multiple articles, but currently they are not listed anywhere.

https://cofacts.g0v.tw/reply/1R64K2MBSH_MLFhIol5t

https://cofacts.g0v.tw/reply/ux4g2GMBSH_MLFhI0WQ6

It should be in the same form as "related article" in the article page.

• Show level, level name in the top right corner of the site
• When hovering over an editor's name, show a info card with their level name
• When the user "levels up", show a small popup prompting the user about it

API for level: cofacts/rumors-api#73

Level name list:

lv0 從零開始的主人公
lv1 鄉民
lv2 站得前面一點的鄉民
lv3 好心人
lv4 很好心的人
lv5 好人
lv6 大好人
lv7 謠民（背號11，要改11嗎）
lv8 童貞魔法師
lv9 老司機
lv10 闢謠天行者
lv11 魔法少女(200得貼圖)
lv12 闢謠天師（闢謠太帥）
lv13 謠言大覺者(400有貼圖)
lv14 謠言終結者(800送貼圖)
lv15 滅謠師太
lv16 闢謠小女警
lv17 闢謠小飛俠
lv18 闢謠鐵金剛
lv19 從零開始的魔法旋轉花花
lv20 變態的好人
lv21 超能孟獲
lv22 熱血傲嬌律師
lv23 初號機
lv24 貳號機
lv25 好心神

• 顯示幾人覺得這回應有用、幾人覺得沒有用

很多人對回應評分的例子：
http://rumors.hacktabl.org/article/5486363872429-rumor http://rumors.hacktabl.org/article/AVr1lVhntKp96s659C1V