cofacts / rumors-site Goto Github PK
View Code? Open in Web Editor NEWRumors list / creation UI, with server-side rendering
Home Page: https://cofacts.tw
License: MIT License
Rumors list / creation UI, with server-side rendering
Home Page: https://cofacts.tw
License: MIT License
需要登入。
讓網站使用者也能送出 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>
Ex: https://cofacts.g0v.tw/article/AV2Cz6QhyCdS-nWhudIG
latest reply should be put on top of old replies
Steps to reproduce:
Expected:
The article store should be reset when the user leaves the article page.
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'));
List:
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:
Related issues:
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 懶人包
"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 0919 meeting
target="_blank"
for external linksno referrer
check::after
pseudo-elementFact 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:
Blocked by cofacts/rumors-api#64
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.
Line bot 的顯示順序是:
或者是可以做成分頁的形式。
這樣可以讓不同立場的聲音更容易被拿來對比與看見。
Try out these ready-made solutions. Consider setting up an analytics site and invite other g0v projects if it is easy to use.
謠言列表�頁面設計開發:
as title.
As discussed in 0919 meeting
Displayed result:
https://cofacts.g0v.tw/article/AVwkCfYCyCdS-nWhuZIv
Notice that the two bit.ly links disappeared.
找一篇有回覆的文章,再點一篇沒有回覆的文章,會發現會把上一篇回覆帶到沒有回覆的文章上。
讓網站使用者可以登入之後送出「你覺得這個回應有用嗎」(ReplyFeedback
)
要使用的 API:CreateOrUpdateReplyConnectionFeedback
mutation
Doc: https://cofacts-api.hacktabl.org/graphql
現在的狀況是,我常常想要找含有「醫藥」或「年金」兩字的謠言,但網頁目前卻沒有搜尋框。
或許用現成 Search API 可行?
比較一下 ListArticle 與 Search 的差異,應該可以直接使用,不須在 Search 加一個 input 欄位。
往後端詢問的 API 會一直觸發登入視窗,只要回到文章列表就會出現,有點煩。
file-loader
to replace babel file loadersdangerouslyInsertInnerHtml
.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.
According to the discussions in "詢問爭點功能", we should reveal the reasons why a LINE user want to submit such article to the editors.
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
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:
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 & implementationreplyConnections
with articleReplies
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.
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.
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 好心神
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.
In the site header, show a progress bar with 3 racing indicators:
| ============================> Total articles: 16,321
| =======================:---> Replied by others: 15900 / by you: 321
With the following nice-to-have:
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:
As discussed in 20180207 "使用者發送過的文章列表" section, we should provide a list of articles a LINE user has submitted.
The API will support "Given an article, list all articles the current author has submitted" via the new
fromUserOfArticleId
filter in ListArticles
.
Index ArticleItem "HAVE READ" / "NOT ARTICLE" quick control widget.
很多人對回應評分的例子:
http://rumors.hacktabl.org/article/5486363872429-rumor http://rumors.hacktabl.org/article/AVr1lVhntKp96s659C1V
在前端允許使用者使用支援的 filter:
cofacts/rumors-api#35
網頁裡可能要做成在搜尋框裡加上 in: XXX 這樣的形式,像 gmail / github / slack 一樣⋯⋯?
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.
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
Native "share" on Google Chrome mobile:
https://developers.google.com/web/updates/2016/09/navigator-share
Cross-browser clipboard solution
https://clipboardjs.com/
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);
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.