Review on #235 Feature/dialogflow
LGTM! One minor nice-to-have comment is added. I am deploying this to staging so that everyone can try it out.
Review on #235 Feature/dialogflow
LGTM! One minor nice-to-have comment is added. I am deploying this to staging so that everyone can try it out.
Comment on #235 Feature/dialogflow
nit: seems that we can directly `return responses[0]` so that we don't need `intentResponse` variable anymore.
Comment on #232 user profile related api changes
`updatedAt` is returned by `GetUser` I'm checking that `updatedAt` shouldn't be changed since last test file, and that's why MockDate is different for all test cases (line 14 at *tests*/UpdateUser.js but let me change current time to a more readable time
Comment on #237 fix typo in openpeeps json
<https://coveralls.io/builds/35356033|Coverage Status> Coverage decreased (-0.06%) to 86.188% when pulling *<https://github.com/cofacts/rumors-api/commit/69cf776af03686833a0e63430f60e4da14b2437b|69cf776> on typo* into *<https://github.com/cofacts/rumors-api/commit/18c99cddf67f2292ef88e2cfa451fe7129bc4095|18c99cd> on master*.
reopen PR accidentally closed <https://github.com/cofacts/rumors-api/pull/173|#173>
Review on #238 fix typo in openpeeps json
Thanks for spotting the typo!
*storybook:* <https://user-images.githubusercontent.com/1817638/100747027-76b16d00-341c-11eb-847b-902d2d13d556.png|Screen Shot 2020-12-01 at 7 44 36 PM> *relies and feedbacks:* <https://user-images.githubusercontent.com/1817638/100747087-9052b480-341c-11eb-992f-0d069168f2ec.png|Screen Shot 2020-12-01 at 7 44 22 PM> *replyrequest:* <https://user-images.githubusercontent.com/1817638/100747127-9ea0d080-341c-11eb-93b1-b1d31a1315fe.png|Screen Shot 2020-12-01 at 7 29 52 PM> *reply list:* <https://user-images.githubusercontent.com/1817638/100747176-ac565600-341c-11eb-9515-572118ebdf5a.png|Screen Shot 2020-12-01 at 7 29 14 PM> <https://user-images.githubusercontent.com/1817638/100747177-ad878300-341c-11eb-98a9-a100804c9e4c.png|Screen Shot 2020-12-01 at 7 28 59 PM> *header:* <https://user-images.githubusercontent.com/1817638/100749591-d4938400-341f-11eb-8fcb-f42e748465da.png|Screen Shot 2020-12-01 at 9 46 41 PM>
Comment on #235 Feature/dialogflow
• 目的 • 建立「Cofacts 會如何在群組裡對話」的示範 • more _accurate_ view count • 功能 • 還是會在群組裡自動回話,但只限於: • 訊息相似度幾乎完全命中 • Category: 醫藥保健、COVID-19、資訊安全 • 狀態:has useful reply 且標為「含有錯誤訊息」、「含有個人意見」 > 過去收到的 feedback 是在群組裡回話會中斷討論流程,尤其是「不在查證範圍」 • 針對群組內「已經有人回報」的訊息 (不限於會自動回話的): • 送 google analytics viewed 數 • 若群組內有 5 人,一次要加幾個 view count? • 算是一個人、一次 view count [name=bil] • view 過 article 不代表有 view 過 reply • 還是算一次 view article [name=bil] • 自動送出 reply request (?) • 在群組裡被送入,不要送 reply request,因為這與「發問」不同 [name=bil] • 增加 google analytics count 就好 [name=bil] • 幫群組裡有加 cofacts 的人建立 `userArticleLink` • 放的話他可以收到新回應推播 [name=mrorz] • 「看過的訊息」是私人的體驗,放了會有點破壞。先不要 [name=bil] • 先不要功能 • 私訊群組裡有加 cofacts 的人 • <https://g0v.hackmd.io/-j-fAX0tS62amv9LejshOg#%E7%BE%A4%E7%B5%84%E8%A8%8A%E6%81%AF|原始提案>中的「hash 保存」 • 技術 • Job queue (open-source 版美玉姨的做法) • delay: reply token 到期之前能回就好 • 材料 • 自介 wording • 被 tag 時再自我介紹即可 • 回應時的 wording • FAQ:隱私疑慮、bot 誰做的、跟美玉姨的差別 • 放主頁置頂即可
Comment on #13 支援 LINE chatbot 群組聊天
<https://g0v.hackmd.io/Sl_84QO8TQ6WKKI0bT4pYw#TODO|20201104 Discussion>: • 目的 • 建立「Cofacts 會如何在群組裡對話」的示範 • more _accurate_ view count • 功能 • 還是會在群組裡自動回話,但只限於: • 訊息相似度幾乎完全命中 • Category: 醫藥保健、COVID-19、資訊安全 • 狀態:has useful reply 且標為「含有錯誤訊息」、「含有個人意見」 > 過去收到的 feedback 是在群組裡回話會中斷討論流程,尤其是「不在查證範圍」 • 針對群組內「已經有人回報」的訊息 (不限於會自動回話的): • 送 google analytics viewed 數 • 若群組內有 5 人,一次要加幾個 view count? • 算是一個人、一次 view count [name=bil] • view 過 article 不代表有 view 過 reply • 還是算一次 view article [name=bil] • 自動送出 reply request (?) • 在群組裡被送入,不要送 reply request,因為這與「發問」不同 [name=bil] • 增加 google analytics count 就好 [name=bil] • 幫群組裡有加 cofacts 的人建立 `userArticleLink` • 放的話他可以收到新回應推播 [name=mrorz] • 「看過的訊息」是私人的體驗,放了會有點破壞。先不要 [name=bil] • 先不要功能 • 私訊群組裡有加 cofacts 的人 • <https://g0v.hackmd.io/-j-fAX0tS62amv9LejshOg#%E7%BE%A4%E7%B5%84%E8%A8%8A%E6%81%AF|原始提案>中的「hash 保存」 • 技術 • Job queue (open-source 版美玉姨的做法) • delay: reply token 到期之前能回就好 • 材料 • 自介 wording • 被 tag 時再自我介紹即可 • 回應時的 wording • FAQ:隱私疑慮、bot 誰做的、跟美玉姨的差別 • 放主頁置頂即可
dev-zh.cofacts.org
Cofacts - Connecting facts and instant messages
「Cofacts 真的假的」是一套連結網路訊息與查證訊息的協作型系統,試圖對假訊息問題作出草根應對。
dev-en.cofacts.org
Cofacts - Connecting facts and instant messages
Cofacts is a collaborative system connecting instant messages and fact-check reports or different opinions together. It's a grass-root effort fighting mis/disinformation in Taiwan.
Review on #232 user profile related api changes
Thanks for the explanation! Let's merge this :+1:
I prefer not using `AppLayout` in `src/index` at all, instead of adding more logic to `AppLayout` to support the landing page. `AppLayout` is designed for application pages with header. It seems that the only common part between application pages and the landing page is the app footer and the login dialog. If that is the case, I suggest using `AppLayout/AppFooter` and `AppLayout/LoginModal` in `src/index` directly. Also, `LandingPageHeader` can be isolated from `AppLayout/AppHeader` and move to under `LandingPage` directory; since it's only used in `LandingPage`, it should be more straightforward to host it there.
Hello <https://github.com/hsiao19|@hsiao19> thanks for the implementation! After comparing the landing page with other pages in the application, I think it makes sense when we re-use `AppLayout/AppFooter.js` and `AppLayout/LoginModal.js`. Thank you for updating the style within these two components to the latest look! However, I think we don't need to apply the entire `AppLayout/AppLayout.js` in landing page (`src/index.js`), because landing page look and works differently from application content. I suggest that in `src/index.js`, we just import the components we want to re-use from `AppLayout` directory, but we do not need to wrap it with `<AppLayout>`, and `AppLayout` should not be modified to support the use in landing page.
I think the browser already handles scroll position across navigation. Why should we reset scroll here?
google.com
Find local businesses, view maps and get driving directions in Google Maps.
<https://github.com/cofacts/rumors-site/issues/285|#285> add reference in gql
Thanks for <https://github.com/hsiao19|@hsiao19> for fixing key errors and the `InputBox` storybook & design! JS review is completed, I am addressing CSS part in next review.
I think we can translate this~ Suggested change
As we don't use `<AppLayout>` in landing page anymore. I suggest reverting `pathname` related changes here as well.
Review on #235 Feature/dialogflow
Thanks for the fix! Let's merge this :+1:
Comment on #235 Feature/dialogflow
It's weird that I always got error1 if intent input > 256 characters.. error1 <https://user-images.githubusercontent.com/6376572/101439407-65ea8500-394f-11eb-9469-79ffbd820112.png|https://user-images.githubusercontent.com/6376572/101439407-65ea8500-394f-11eb-9469-79ffbd820112.png> error2 <https://user-images.githubusercontent.com/6376572/101439395-5ec37700-394f-11eb-806f-7e8728a65a74.png|https://user-images.githubusercontent.com/6376572/101439395-5ec37700-394f-11eb-806f-7e8728a65a74.png>
Comment on #235 Feature/dialogflow
> It's weird that I always got error1 if intent input > 256 characters.. > > error1 > <https://user-images.githubusercontent.com/6376572/101439407-65ea8500-394f-11eb-9469-79ffbd820112.png|https://user-images.githubusercontent.com/6376572/101439407-65ea8500-394f-11eb-9469-79ffbd820112.png> Would that error go away if we change <https://github.com/cofacts/rumors-line-bot/pull/235/files#diff-899b7ebc30d32f645a19cb6b425fd98b347ba981bed7091b3bd4c17daf07f034R23|`sessionId` generation> to be URL-safe? Such as `crypto.randomBytes(16).toString('hex')` instead of using raw bytes.
#359 iOS safari <= 12 cannot find intersection observer
Visiting cofacts article page using iPhone 6 (iOS 8, 11, 12) will show "An unexpected error has occurred". Intersection observer was <https://webkit.org/blog/8582/intersectionobserver-in-webkit/|delivered in iOS 12.2> *Compatibility* iOS 8, 11, 12: <https://user-images.githubusercontent.com/108608/101445284-30986400-395c-11eb-9253-9391b80f0765.png|image> <https://user-images.githubusercontent.com/108608/101445055-bec01a80-395b-11eb-97af-cadfd5329c72.png|image> <https://user-images.githubusercontent.com/108608/101445530-a0a6ea00-395c-11eb-9d11-465055d26458.png|image> iOS 13+ should work. <https://user-images.githubusercontent.com/108608/101445467-853bdf00-395c-11eb-84ef-fc93185a686e.png|image> *Regression* `IntersectionObserver` was introduced into Cofacts code base <https://github.com/cofacts/rumors-site/commits/76e947d115a69cdd7f593316547997fb8fa80cb9|6 months ago>, so the problem persisted for 6 months. *Browser support* 根據過去的<https://g0v.hackmd.io/@mrorz/rksKX45D8#LIFF-compatibility|會議記錄> 我們應該要盡量支援到 iOS Safari version 10.3,故應該要補上 <https://github.com/w3c/IntersectionObserver/tree/master/polyfill|polyfill>.
#360 Collapse long references text
According to <https://g0v.hackmd.io/vErWoVXYRTKnxpID610C-A?both#%E7%B6%B2%E7%AB%99-UX|20201202 discussion>, when reply is long, it's difficult to differentiate two references. We can collapse long text, reference section and hyperlink section together when • reply text + reference + hyperlink exceeds a certain height or line count. • there are multiple replies for the article. Need to see if `ExpandableText` supports such need.
g0v.hackmd.io
#240 Add consent check to ensure all developers agree with TOS
In order to perform <https://g0v.hackmd.io/@mrorz/cofacts-meeting-notes/%2FNqPf1SfPQEGOZ3Z6h7Q7wA|license change>, we are adding a custom HTTP header to ensure all API users acknowledge the license change. If `LICENSE_URL` is provided, it will look like this: <https://user-images.githubusercontent.com/108608/102010283-27523180-3d78-11eb-8015-7ed4929ea19d.png|image>
Comment on #240 Add consent check to ensure all developers agree with TOS
<https://coveralls.io/builds/35671336|Coverage Status> Coverage decreased (-0.5%) to 86.016% when pulling *<https://github.com/cofacts/rumors-api/commit/6ede84425bfc95e1b95e1478c5a9821a357708c3|6ede844> on cc-by* into *<https://github.com/cofacts/rumors-api/commit/5632c4532c11b30dd160c4dfab9adea500250d3c|5632c45> on master*.
#19 Change license text to CC BY-SA
• Remove CC0 sentences • Add CC BY-SA license attribution that is generated using <https://creativecommons.org/choose/|CC license chooser>
Sorry to keep you waiting. Here are the comments after reviewing the CSS.
Currently the button text looks a bit lower than expected: <https://user-images.githubusercontent.com/108608/102043913-af841580-3e10-11eb-8f2d-ecf7acd2a210.png|image> It's probably because of its line-height exceeding the space of the button. I suggest use top & bottom paddings instead of flexbox & height; this also applies to other buttons in other sections in the landing page.
1. On macs that hides scrollbars by default, 0 right padding causes the content directly touching right edge: <https://user-images.githubusercontent.com/108608/102044275-7304e980-3e11-11eb-8f09-a8828be00254.png|截圖 2020-12-14 下午1 36 10> 2. The top / bottom padding on `articleContainer` leaves space on top & bottom. I suggest 1. apply padding to `.scrollbarWrapper > *` instead of `articleContainer` so that no top / bottom empty space when scrolled 2. it is OK to use smaller right padding to accommodate scrollbar tracks; however, we should then • use `overflow-y: scroll` to ensure that scrollbar always shows • use <https://www.digitalocean.com/community/tutorials/css-scrollbars|`::-webkit-scrollbar` (for webkit browsers) and `scrollbar-width` (w3c spec)> to specify width of the scrollbar
We probably need to set a max width for tablet size, so that the text is not covered by images <https://user-images.githubusercontent.com/108608/102045382-dd1e8e00-3e13-11eb-9e15-238dce29cf62.png|image>
Not turning `item` to flexbox container seems to make its contents align better. *Current* <https://user-images.githubusercontent.com/108608/102045787-de03ef80-3e14-11eb-976e-babfcec2a83d.png|image> *After removing `display: flex` and related styles* <https://user-images.githubusercontent.com/108608/102045726-b1e86e80-3e14-11eb-8d13-b83cfa6d1cf6.png|image>
We can use `initial` to avoid syntax error <https://user-images.githubusercontent.com/108608/102045520-41d9e880-3e14-11eb-8d52-40d343186ceb.png|image> Suggested change
#361 Provide better placeholder for editors
Discussion see <https://g0v.hackmd.io/@mrorz/cofacts-meeting-notes/%2FNqPf1SfPQEGOZ3Z6h7Q7wA|20201209 meeting note> *As-is* Currently the editor UI shows `140 字以內` no matter what reply type the editor has chosen. When shown this UI, editors are not instructed to input useful reply here. <https://user-images.githubusercontent.com/108608/102174085-8d08ff80-3ed7-11eb-8232-27479d756b90.png|image> *To-be* Replace `140 字以內` placeholder with the following: *When `replyType === 'NOT_ARTICLE'`:* Please briefly explain why this message should not be processed in Cofacts 請簡單說明為何 Cofacts 不該處理這則訊息 *When `replyType === 'NOT_RUMOR'`:* As a brief intro for the references, please point out which part of the message is correct. 請簡單說明它哪個部分是正確的,作為「資料來源」的導讀 *When `replyType === 'OPINIONATED'`:* Please briefly: 1. explain which part of the message contains personal opinion 2. remind the audience that this is not factual 請簡單說明: 1. 它哪個部分含有主觀意見之處 2. 提醒讀者這不是客觀事實 (Note: textarea placeholders <https://stackoverflow.com/questions/7312623/insert-line-break-inside-placeholder-attribute-of-a-textarea|can include line breaks>. ) *When `replyType === 'RUMOR'`:* As a brief intro for the references, please point out which part of the message is incorrect. 請簡單說明不實之處,作為「資料來源」的導讀
#362 Provide better text for reference input
Discussion see <https://g0v.hackmd.io/@mrorz/cofacts-meeting-notes/%2FNqPf1SfPQEGOZ3Z6h7Q7wA|20201209 meeting note> *As-is* We just instruct editors to input 「資料來源」and provide「超連結與連結說明文字」in the placeholder. <https://user-images.githubusercontent.com/108608/102174552-b8d8b500-3ed8-11eb-901a-3ca37c51578a.png|image> *To-be* *Title* This title should apply to website editors and the reply section below: <https://user-images.githubusercontent.com/108608/102174699-05bc8b80-3ed9-11eb-80f3-c2e49fea1e31.png|截圖 2020-12-15 下午1 25 03> *When `replyType === 'OPINIONATED'`:* Opinion Sources 不同意見出處 *When `replyType` is other values:* References 資料佐證 *Placeholder* One line summary » Source URL 來源說明 » 連結網址 (Note: textarea placeholders <https://stackoverflow.com/questions/7312623/insert-line-break-inside-placeholder-attribute-of-a-textarea|can include line breaks>. )
Comment on #295 UX improvements of search function in desktop editor
Discussions on revamp of this issue is here <https://g0v.hackmd.io/NqPf1SfPQEGOZ3Z6h7Q7wA?both#%E6%90%9C%E5%B0%8B%E6%94%B9%E9%80%B2|https://g0v.hackmd.io/NqPf1SfPQEGOZ3Z6h7Q7wA?both#%E6%90%9C%E5%B0%8B%E6%94%B9%E9%80%B2> However the revamp is postponed until we deliver the bug fix described in this ticket.
#363 Fix editor RWD breakpoints
From <https://g0v.hackmd.io/NqPf1SfPQEGOZ3Z6h7Q7wA#mobile--desktop|20201209 meeting note>: Breakpoint 設定有誤,mobile 與 desktop 版中間有一個出處沒有標題的版本: <https://camo.githubusercontent.com/43c23fe77d7c81e76890461168eb8d8acc904aeb09ca956a6d50c36a2693ef0e/68747470733a2f2f73332d61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f6730762d6861636b6d642d696d616765732f75706c6f6164732f75706c6f61645f37613635306661303635346530646638353062616464383531666230633438392e706e67|https://camo.githubusercontent.com/43c23fe77d7c81e76890461168eb8d8acc904aeb09ca956a6d50c36a2693ef0e/68747470733a2f2f73332d61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f6730762d6861636b6d642d696d616765732f75706c6f6164732f75706c6f61645f37613635306661303635346530646638353062616464383531666230633438392e706e67> In this case please all go for desktop style.
HackMD
# Cofacts 會議記錄 ## 2020 - [20201216 會議記錄](/uJKukwUkSYy_FYI17SsYew) - [20201209 會議記錄](/NqPf1SfPQEGO
Review on #358 fetch reference in reply
Tested and works on my machine. Confirmed that this will fix <https://github.com/cofacts/rumors-site/issues/285|#285>. Thanks for the fix!
Comment on #285 “Add this reply to my reply” failed to copy reference
Fixed by <https://github.com/cofacts/rumors-site/pull/358|#358> . Kudos to <https://github.com/jojomango|@jojomango> !
Comment on #357 support openpeeps avatar
Should we drop `classes.avatar` as we specify `size={40}` in `<Avatar>`?
Comment on #357 support openpeeps avatar
is `mdSize` applied to this case as well?
Review on #357 support openpeeps avatar
Hello <https://github.com/ztsai|@ztsai> thanks for the contribution and sorry for the late reply. I have added comments regarding 1. use of `mdSize` and 2. colocating fragments.
Comment on #357 support openpeeps avatar
This actually comes from `Avatar` inside `AppHeader` and `AppSidebar`. Since we follow <https://www.apollographql.com/docs/react/data/fragments/#creating-colocated-fragments|fragment colocation> in this repo, we may need to • Declare static member `.fragments.User` for `AppSidebar` and `AppHeader` that includes `Avatar.fragments.AvatarData`, since these components are using `<Avatar>` • AppLayout should use `AppSidebar.fragments.User` here. (apollo-client will perform dedup on the fields) In this way the dependency of GraphQL fields can be tracked on component basis.
Ref: <https://github.com/cofacts/rumors-db/pull/50|/rumors-db/pull/50>
Comment on #50 Features/backup db
moved to <https://github.com/cofacts/rumors-deploy/pull/14|cofacts/rumors-deploy#14>
<https://github.com/MrOrz|@MrOrz> Both css and js have been revised, please check if there are any problems.
Comment on #19 Change license text to CC BY-SA
dataset ?
Comment on #240 Add consent check to ensure all developers agree with TOS
Do you need to trim space first before splitting to accommodate someone pass params with space after comma.
Comment on #240 Add consent check to ensure all developers agree with TOS
hmmm... should we expose all license to api page?
Comment on #240 Add consent check to ensure all developers agree with TOS
Good point. I trimmed each URL after splitting, because I think it's possible for developers to write something like `URL1, URL2`.
*For editors* Notice paragraph on login window. <https://user-images.githubusercontent.com/108608/102682007-f7d07880-4200-11eb-9317-d39110a66a53.png|image> *For site visitors* Notify visitors that the content is distributed under CC BY-SA. <https://user-images.githubusercontent.com/108608/102682178-81347a80-4202-11eb-926f-3673ea8239be.png|image> Copied text: ``` 說法一:端午節是屈原的忌日,故不能祝賀快樂,僅能祝福「端午安康」避免犯忌。 說法二:台灣民俗專家指出快樂、安康皆可。 說法三:當前已淡忘節日的文化意義,故端午節快樂已成為習慣。 📋 節錄自 Cofacts 真的假的:<http://localhost:3000/article/3g7kzwmea74z2> ℹ️ 此資訊 by Cofacts crowd-sourced fact-checking community is licensed under CC BY-SA 4.0. 🤔 在 LINE 看到可疑訊息?加「真的假的」好友,查謠言與詐騙 ➡️ <https://line.me/R/ti/p/%40cofacts> ``` "Share" button: ``` contains personal perspective 【Reason】⋯⋯的部分純屬個人價值觀,並非客觀事實。 見仁見智。 說法一:端午節是屈原的忌日,故不能祝賀快樂,僅能祝福「端午安康」避免犯忌。 說法二:台灣民俗專家指出快樂、安康皆可。 說法三:當前已淡忘節日的文化意義,故端午節快樂已成為習慣。 ↓Details↓ <http://localhost:3000/article/3g7kzwmea74z2> ↓Reference↓ 自由時報/端午節祝快樂犯大忌? 民俗專家指出快樂、安康皆可 <http://news.ltn.com.tw/news/life/breakingnews/2083224> 中國時報/名家觀點-端午節快樂? <http://www.chinatimes.com/newspapers/20160610000330-260109> -- ℹ️ 此資訊 by Cofacts crowd-sourced fact-checking community is licensed under CC BY-SA 4.0. 🤔 在 LINE 看到可疑訊息?加「真的假的」好友,查謠言與詐騙 ➡️ <https://line.me/R/ti/p/%40cofacts> ```
#236 Sends CC BY-SA license to server and add copyleft notice
• Sends `x-accept-license` along with HTTP requests when speaking to API server `/graphql` • Adds CC BY-SA license text in response *Screenshot* <https://user-images.githubusercontent.com/108608/102685121-25c1b700-4219-11eb-98f0-d0092a632f0e.png|image>
Comment on #236 Sends CC BY-SA license to server and add copyleft notice
*Pull Request Test Coverage Report for <https://coveralls.io/builds/35836629|Build 1234>* • *0* of *0* changed or added relevant lines in *0* files are covered. • No unchanged relevant lines lost coverage. • Overall coverage remained the same at *86.42%* * * * * * * *:yellow_heart: - <https://coveralls.io|Coveralls>*
Review on #364 Adding CC BY-SA notice
Forgot to run `npm run i18n:extract`? Share and copied text didn't translate.
LGTM! Let's ship this <https://github.githubassets.com/images/icons/emoji/shipit.png|:shipit:>
Spec <https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=912%3A384|https://www.figma.com/file/zpD45j8nqDB2XfA6m2QskO/Cofacts-website?node-id=912%3A384>
change landing page og image <https://user-images.githubusercontent.com/6726515/102687902-8d81fd00-422d-11eb-942f-843a4246400e.png|ogimage>
Review on #366 update og image
LGTM! Thanks for the change.
Comment on #365 Upgrade dialog
Please include variable `LEVEL_NAMES[nextLevel]` in the translation Suggested change
#367 Profile page header display
Implements user profile page's header • URL: `/user?id=xxx` or `/user/slug` (But no one has slug yet) • Links to user page: on reply's header • Edit function of profile page header is not implemented yet *Screenshots* *Clicking into user page* <https://user-images.githubusercontent.com/108608/102694202-858c8200-425a-11eb-91f5-c2b68888bc84.gif|user-page-enter> *Self* (Edit button exists but its behavior is not implemented yet) <https://user-images.githubusercontent.com/108608/102693951-ffbc0700-4258-11eb-80af-dd24964c1506.png|image> *Mobile* <https://user-images.githubusercontent.com/108608/102694268-d0a69500-425a-11eb-95e7-b044e9c04bbd.png|image>