thematters / matters-web

Implementation of the Matters.Town website

matters-web

Getting Started

Start local dev

• Install commitizen globally: npm install commitizen -g
• Install dependencies: npm i
• Environment variables: cp .env.local.example .env.local
• Run npm run gen:type
• Run npm run dev, then go to http://localhost:3000/

Build and run production server

npm run build && npm run start

Start local dev with Docker

• Environment variables: cp .env.local.example .env
• Set command alias: source bin/dc-alias
• Build docker image: dc build
• Run:
  • dc up or dc run --service-ports web npm run dev
  • then go to http://localhost:3000/

NOTE: If new packages are added to package.json, dc up will use npm i to install those packages. But if you are using dc run --service-ports web npm run dev, you need to run dc run web npm i manually to make sure that new packages are installed.

Build with docker

• Set command alias: source bin/dc-alias
• dc run web npm run build

Push and pull docker image

• Set command alias: source bin/dc-alias
• Build docker image: dc build
• aws configure, then input your access key and secret
• Login AWS ECR with $(aws ecr get-login --no-include-email --region ap-southeast-1)
• Push:
  • docker push 903380195283.dkr.ecr.ap-southeast-1.amazonaws.com/matters-web:latest
  • docker tag matters-web:latest 903380195283.dkr.ecr.ap-southeast-1.amazonaws.com/matters-web:latest
• Pull:
  • docker pull 903380195283.dkr.ecr.ap-southeast-1.amazonaws.com/matters-web:latest
  • docker tag 903380195283.dkr.ecr.ap-southeast-1.amazonaws.com/matters-web:latest matters-web:latest

Testing

See Playwright Testing Guide.

Conventions

See Conventions.

Static Files

./public/static/
├── apple-touch-icon.png # favicons
├── favicon-16x16.png
├── icon-96x96.png
├── icons # icons in different sizes
│   ├── 12px
│   │   ├── ...
│   │   └── draft-edit.svg
│   ├── 72px
│   │   ├── ...
│   │   └── empty-warning.svg
│   └── stripe.svg
├── images # illustrations
│   ├── ...
│   └── publish-4.svg
├── manifest.json # configurations
└── opensearch.xml

Icon

We use SVGR to transform SVGs into React components. For reusability and bundle optimization:

• If the icon color isn't static:
  • Replace the values of fill and stroke attributes with currentColor, and
  • Add fill="none" to <svg>.

Tools

VS Code

Settings

See .vscode/settings.json

Extensions

See .vscode/extensions.json

Vim

Settings

For vim users, you might want to see .vim/.vimrc (using vim-plug).

matters-web's Issues

P2P browser design proposal

P2P browser design proposal for discussion with protocol lab, and design on how Matters frontend could write and read from IPFS.

User events in following feeds are incorrect

• Events in following tag feed are not sending back.
• contentType sent from following articles, comments and donations are incorrect. For example, it always sends contentType: article no matter what you click in following article feed.

related: https://mattersnews.slack.com/archives/GEA06UT2L/p1602236999011500

When a user sends the 100th donation, get a badge

Moving to JAMstack

Background

We are suffering from website instability caused by traffic grows. And it's hard to keep it fast without putting more cloud resources, like adding more servers.

Ideally, we should make as much request resources as possible as static, and served by CDN. That's what JAMstack for:

...building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.

Architecture

We mainly use these two frameworks to build and run matters.news:

• Next.js: building the frontend web app
• Apollo GraphQL: building the backend GraphQL API

In our current architecture,

• Static assets (JS bundles, CSS, SVG, etc.) are generated by Next.js at build-time, uploaded to AWS S3, then served & cached by CDN in a long TTL.
• Dynamic pages (/:username, /follow, etc.) are rendered (SSR) by Next.js server on-demand, at runtime, with API calls, then served & cached by CDN in a short TTL.

Because the CDN cache pages by token (user-specific data) and short TTL (fresh data), the hit rate is low.

Solutions

Guiding by the philosophy of JAMstack, based on the restrictions [1][2] of the tech stack we used, we can do the optimization in stages.

Stage 1

• Separate public and user-specific data into different API queries;
• Serving dynamic pages only with public data in SSR (server-side rendering), and queries user-specific data in CSR (client-side rendering);
• Increase the TTL and remove the token-based cache strategy from CDN;

Stage 2

• Use getStaticProps and getStaticPaths (with fallback: true) to serve dynamic pages in iSSG (Incremental Static Site Generation);

References

[1] iSSG may bad for SEO: loading indicator will be shown if the page has never been rendered before;

[2] Need to refactor API queries: next-with-apollo uses getInitialProps and still not support for getStatic* methods

[3] https://nextjs.org/blog/next-9-3#fallback-true

[4] https://static-tweet.now.sh/

Unable to copy and paste pictures into the editor

Describe the bug
Unable to copy and paste pictures into the editor

To Reproduce
Steps to reproduce the behavior:

1. go to the editor and create a draft
2. paste one picture copied before
3. error toast occurred

Screenshots

Show author name in <head> for article detail page

Is your feature request related to a problem? Please describe.
To highlight the article author in social sharing

Describe the solution you'd like
Instead of showing - Matters, we should show - displayName (@userName) for the article detail page.

[Web] Using local cache to replace refetch mechanism

Describe the bug
Currently we are using refetch to update comment thread after an user publish a comment. This result in a bug where the comment is displayed twice.

To Reproduce

Steps to reproduce the behavior:

1. Go to any article
2. Reply to a comment
3. Verify that the comment thread is displayed twice.
4. Refresh the article, and verify that the duplication is gone.

Expected behavior

We should not see a duplicated comment.

Additional context

We should be able to avoid this type of bug by updating local cache instead of refetching from server.

UED problem: view articles when writing comments

When I am writing comment on an article, it is hard to view the article in the meanwhile.
It is important because I wish to review on many viewpoints of the article.
Thansk.

Users are prohibited from only using punctuation marks to name or rename tags

When I name a tag or try to revise a tag's name,
Then I enter only punctuations into the text box.
Then I cannot save or submit it,
And there will be an error warning under the text box.

It's Time to Kill `react-responsive`

Background

Currently, we use react-responsive in our useResponsive hook, to deal with responsive components. But it has some issues:

1. Rendering Issues

SSR & CSR doesn't always render as the same, for instance:

const CloseButton = () => {
  const isSmallUp = useResponsive({ type: 'sm-up' })()

  if (isSmallUp) {
    return <ButtonA />
  }

  return (
    <ButtonB />
  )
}

Since the server doesn't know the size of the client's viewport, <CloseButton /> will always render as<ButtonB /> in SSR, and may rerender as <ButtonA /> in CSR.

Which will cause some UI bugs, like <SearchBar /> will be flashed when CSR, <RelatedArticles /> will missing cover, etc.

What we got:

What we expect:

2. It's overkill

It's almost 20K (gzipped: 6.6K).

We only useminWidth & maxWidth features to match queries, others like orientation and aspectRatio are wasted.

Solutions

1. Predict the viewport sizes via the client's UA with ua-parser-js, then pass it down to our React App from server request.

2. Use useWindowResize instead of react-responsive.

Update user default avatar

Enable Content Security Policy (CSP)

• Setup Content-Security-Policy to whitelist domains and endpoints
• Optionally setup report endpoint (report-uri and report-to)

Redesign registration flow

This issue involves:

• Simplify registration
• Handler of link in registration email
• Retire old verification

The article authors shouldn't be allowed to appreciate their own articles

Describe the bug
As title.

To Reproduce
Steps to reproduce the behavior:

1. Open a viewer's article
2. Click appreciation button

Expected behavior
The appreciation button should be disabled.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS 10.15.6
• Browser: Edge
• Version: 84.0.522.44

Storybook for component library

Is your feature request related to a problem? Please describe.

As our component library and platform functionality grows, we need an easier way to visualize our components for both designers and developers.

Describe the solution you'd like

We can setup Storybook for frontend repo. We can start with running Storybook locally, then push the static version it to s3 and serve it via matters url if needed.

Firebase loaded more than once

Describe the bug
As title, firebase loaded from both <script> and node module (for web push).

To Reproduce
Steps to reproduce the behavior:

1. Open website
2. Open Console Tab from DevTool

Expected behavior
Only loaded once.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser Edge
• Version 84

Revise query logic of following authors for new registered user

Show the amount of donation the article has received

Is your feature request related to a problem? Please describe.
Users would like to see how much donation an article has received.

Describe the solution you'd like
When the donation amount exceeds 100 HKD, the number will be displayed in the upper right corner of the article page.

Additional context
Call for design...

Remove valued feed for anonymous users

Tag management system

A tag management system that allows:

• Tag owner to invite and manage tag collaborators
• User to claim tag when a tag has not been claimed
• Notify corresponding users for changes in collaborators

Prevent re-rendering of the layout when the page route change

We use <Layout> on every page for customizing <Layout.Header> or right side, but some components under <Layout> are static.

For instance, <SideNav />, <NavBar> & <SearchBar>. These components shouldn't be re-rendered in most route change.

Display tags on article cards and expand tags without opening article

Is your feature request related to a problem? Please describe.
Only click into the article page to see tags.

Describe the solution you'd like
Tags showed on the article card so readers can view and click tags before opening the article page.

Additional context
Call for designs.

[Server] Archive user account

Users need a way to archive their own account.

Issue involves:

• Entry of commencing archive process
• Notes and reasons of archive
• Cleanup of crypto and fiat
• Confirm of archive

[Client] Onboarding Tasks: tags recommendation

#1556

This issue might would be blocked by issue.

Onboarding Tasks

Uncollapse comment button doesn't work

Describe the bug
Uncollapse a collapsed comment doesn't work.

To Reproduce
Steps to reproduce the behavior:

1. Collapse a comment
2. Uncollapse it

Expected behavior
Collapsed comment should be reactivated

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Edge
• Version: 84

Editor: horizontal overflow

Describe the bug
The editor will horizontal overflow when inserting figures like image.

To Reproduce
Steps to reproduce the behavior:

1. Create a draft
2. Upload an image with fullwidth size

Expected behavior
No overflow

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Edge
• Version: 86

Upgrade the donation button

• donation button
• call for donation text
• donator list

Set the font size

Is your feature request related to a problem? Please describe.
Users would like to change the font size when editing an article.

Describe the solution you'd like
When I select the text I want to set, I see the button to set the font size in the toolbar.
Then I choose the font size I want to set, and the text changes its size accordingly.

Position of bottom toolbar in article page is wrong

Position of bottom toolbar in article page is wrong, and sometimes toolbar of editor in the middle of page. Moreover, editor bottom toolbar is disappeared. It might only occurred on iPad.

Article detail go-back button works incorrectly

After publish, the back-button in article detail page brings user back to draft page with pop-up.

Set default feed as「精華」for new users

New users defined as registration within 7 days.

New UX for draft page

Update user flow of sidebar editors.

Test /github subscribe thematters/matters-web +label:ready

Click the notification button to reload and refresh updates.

Is your feature request related to a problem? Please describe.
Users would like to refresh the notification page by clicking the notification button instead of refreshing the browser.

Describe the solution you'd like
When I click the notification button, the notification page will be reloaded and refreshed.

[UI] Spacing of related articles were collapsed

In-site link that appears in the article detail cannot be clicked

Describe the bug
In-site link that appears in the article detail cannot be clicked.

To Reproduce
Steps to reproduce the behavior:

1. Open this article
2. Click "Matters第四季：「我們這個時代的自由課」"

Expected behavior
Redirect to the corresponding page

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser Edge
• Version 84

Edit article buttons are disappearing

Buttons for editing article in profile page are disappearing.

New UI for draft page sidebar & cover photo upload

Unable to login with Matters at Liker Land

Describe the bug
When users try to log in with Matters at Liker Land's Android App, the PWA version of matters.news will be opened, and it will fail the login progress.

To Reproduce
Steps to reproduce the behavior:

1. Install the PWA version of matters.news on Android
2. Open Liker Land's Android App
3. Sign Up or Log In
4. Click Matters Logo

Expected behavior
PWA shouldn't be opened.

Screenshots

Smartphone (please complete the following information):
Android

Additional context
Add another domain for OAuth Authorization

[Web] Login user always triggers client side rendering on page load

Describe the bug
Whenever a login user load the home page, client side rendering for all feeds is triggered after page load.

Expected behavior
Home page should not refetch all feeds, but only refetch the information that is private, and should not tigger loader/spinner.

Newly registered users couldn't complete setting password due to incorrect verification code

Users are able to receive email links, but some parts of them will encounter error message stating verification code is invalid.

[Web] Ship web app with IPFS

Is your feature request related to a problem? Please describe.
After we moved to JAMstack, we can now utilize Next.js's static export functionality and ship the web app to users with IPFS. The web app will function as a SPA, and still fetch data from server.

• Configure Next.js for static export.
• Store and retrieve token from localStorage when transporting via IPFS, since cookie are restricted by domain.
• Solve CORS restriction for API calls when transporting via IPFS
• Pin webapp on IPFS network, self-hosted or via Pinata
• Update DNSLink of matters.news

Note on CORS restriction for API calls when transporting via IPFS:

Our server currently only allows localhost and *.matters.news domain for browser access, so browsers block API calls when initiated from IPFS public gateway. We can either relax the CORS restrictions on backend (security implications uncertain), or we can setup a lambda function that act as a proxy to our server (similar to this example). The later has the additional benefit of masking the traffic to our server.

Add tag management policy in Community Regulation

8. 成為公共標籤管理者 [2]，但不按照公正、客觀立場維護標籤，且拒絕交出標籤主理權。（關於公共標籤的社區討論，請點擊這裡。）

[2] 公共標籤是指創建日期在主理標籤功能上線之前（即2020年7月27日），使用這個標籤的作者數達到40人或以上的標籤。

Merge queries of article detail page

Is your feature request related to a problem? Please describe.
Currently, we separate multiple queries for donators, collections, responses, and article details. It's not good for SEO and cache hit rate.

Describe the solution you'd like
Merge these queries into the query of article details

Let the creation start with an empty draft

Is your feature request related to a problem? Please describe.
So many empty drafts in my draft basket and they don’t seem to be useful at all...

Describe the solution you'd like
If there is an empty draft in my draft list, then when I click the create button, I will jump to the latest empty draft to continue editing.

Describe alternatives you've considered
Maybe just don’t save a completely empty draft？

Moving Forward: GraphQL Caching

Recaptcha loading issue

Got an error Uncaught TypeError: window.grecaptcha.execute is not a function when using recaptcha. This is my understanding:

When Signup modal mounted, it will load script from Google:

  useEffect(() => {
    if (!document.getElementById(recaptchaScriptId)) {
      const script = document.createElement('script')
      script.src = `https://www.google.com/recaptcha/api.js?render=${RECAPTCHA_KEY}`
      script.addEventListener('load', handleRecaptcha)
      script.id = recaptchaScriptId

      document.body.appendChild(script)
    }
  }, [])

And then, it will fire the callback on load event

  const handleRecaptcha = () => {

    const getToken = () => {
      window.grecaptcha
        .execute(RECAPTCHA_KEY, { action: 'homepage' })
        .then((newToken) => {
          setToken(newToken)
        })
    }

    setRefreshToken(getToken)

    window.grecaptcha.ready(() => {
      getToken()
      ...
  }

However, the first script we loaded https://www.google.com/recaptcha/api.js is not Recaptcha library. In fact, it's a service initializer and will inject another script recaptcha__en.js which is real Recaptha library. Therefore, when the first script is ready, the window.grecaptcha doesn't have execute method because the Recaptcha is still downloading or initializing.

@guoliu
is it possible to load the service initializer earlier? Or, set interval to check if window.grecaptcha is really ready?

Edit article content

Restricted to 50 characters. Blocked by: thematters/matters-server#1495 thematters/matters-server#1496

Rethinking Component Design