originprotocol / website-frontend Goto Github PK

We need to cache the Github contributors call, otherwise we'll hit rate limits quickly and have 0 contributors show up in the page

There are several places where the layout is problematic on small screens. Here are a couple of examples:

There is big empty space at the top of the article page.

For example see: https://origin-website-staging.herokuapp.com/blog/website-post-3

If I upload a headshot that isn't a square, it will get distorted when displayed on the community page. We probably don't want to crop the images on upload to the media library, but we should be able to constrain them to squares when rendered.

Change the footer link from "Team" to "Community" so that it matches the top nav.

Currently if somehow the user tries to access an inexistent page on the site, we show a blank page with an error.
https://origin-website-staging.herokuapp.com/doesnotexist

We should handle these error and display a more user friendly page. See for example
https://www.originprotocol.com/en/doesnotexit

I'm not aware of any vulnerability. But as good security hygiene we should set security headers on the HTTP responses returned by all our marketing sites (originprotocol.com; ousd.com; story.xyz).
I took a quick inventory by manually inspecting the responses we are currently returning and also by using one of the many tools returned when googling "security header scanner".

Here are my suggestions.

1. strict-transport-security
   See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security
   => Let's set: strict-transport-security: max-age=31536000; includeSubdomains

2. x-xss-protection
   See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-XSS-Protection
   => Let's set: x-xss-protection: 1; mode=block

3. Cross-Origin-Opener-Policy
   See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy
   => Let's set: cross-origin-opener-policy-report-only: same-origin-allow-popups

4. X-Content-Type-Options: nosniff
   See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options
   => Let's set: X-Content-Type-Options: nosniff

5. Referrer policy
   See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
   => No action needed. The default is strict-origin-when-cross-origin which I think should be fine.

6. Content-Security-Policy
   See https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
   That one is complicated. Our sites do load some data, img assets and scripts from 3rd party sites. We could take an inventory and add all of them but I'm not positive it's the best way to go. I'd be interested in feedback from our team on what CSP we should use.

• On originprotocol.com we load:
  • Json data from api.coingecko.com
  • JSON data from api.originprotocol.com
  • img.youtube.com
  • *.ingest.sentry.io
  • www.google-analytics.com
  • www.googletagmanager.com
  • www.google.com
• On ousd.com we load:
  • Json data from api.coingecko.com
  • JSON data from api.originprotocol.com
  • JSON data from analytics.ousd.com
  • Img assets from cmsmediaproduction.s3.amazonaws.com
• On story.xyz
  • img.youtube.com

Add a job listing collection type on the CMS, from which to pull data on the website

We added sitemap support to Strapi in this PR
We now need to integrate the client with it to pull the list of dynamic URLs + add the static pages and finally generate the sitemap.xml

Fix order of articles on homepage and blog page to show latest first

Unless I'm misunderstanding the role of the order field here, I don't think it's working as intended. I set Origin Ether to position 2 and Origin Story to position 3. But Story was still displayed above Ether until I used the drag feature to literally move it up higher inside the CMS.

When a blog page is linked from Facebook, Twitter, Discord, etc, the preview image should be populated with the primary image at the top of the blog post. Compare these two tweets; the first involves a Medium link and the second involves our blog:

We should not allow any of our new marketing sites to get embedded as an iframe:

• originprotocol.com
• ousd.com
• story.xyz

Let's disallow that by adding the proper headers:

X-Frame-Options: DENY
Content-Security-Policy: frame-ancestors 'none'

When I first get to any page on the site, there is some flickering. Like the raw content shows up but not properly formatted/styled. Then after like a half second the styling/formatting gets applied.

@nickick mentioned: "The loading flicker is probably related to how the storybook components are being rendered serverside"

@shahthepro mentioned: "The flickering could also be because the stylesheets are loaded a bit late while the DOM structure is already in place (due to SSR)"

Non-CMS pages

Legacy URLs

• /team -> redirect to /company
• /es/team -> redirect to /team (but ideally directly to /company)
• Note: implement as pass-thru via Next.js
  • Client requests https://www.originprotocol.com/total-ogn
  • DNS resolves to the Next.js server
  • Server gets the request
  • Server issues a request to the old Python stack at https://api.originprotocol.com/total-ogn
  • Server receives the response and sends it back to the client
  • Note: we can leverage Next.js's native URL rewrite: https://nextjs.org/docs/api-reference/next.config.js/rewrites

New URLs

• /company -> english version
• /en/company -> /company
• /<locale>/company -> /company (for v1 until we localize, then support localized content in v2)

CMS pages

• For v1
  • /article/
• For v2 (after the launch)
  • /article/<locale>/
    • We'll have to do a lookup to get the <locale> article based on the english slug
  • Assuming the translated articles are tied to the original

Let's vertically align the text on each of these cards. Due to the varying text length, there is currently some excess space above "Origin Logo" on the first card. The headings and the descriptions should all be pinned to the top of the card while the Download links should be pinned to the bottom. Basically, we want space between instead of space before the content.

The text is also quite redundant. The headings almost exactly match the images and the text below them. Each description starts with the word "Download" and then is followed by a "Download" link. How about losing the headings entirely and then either replacing the download links with a visual icon or making the descriptions sentence fragments without the word (e.g. "The Origin Protocol logo")?

On the landing page at https://origin-website-staging.herokuapp.com/

• "Meet the team": currently points to https://story.xyz. It should point to the team section of the new company page at https://origin-website-staging.herokuapp.com/company
• "View careers": As opposed to pointing to https://story.xyz it should point our jobs on angelist

Make this entire card clickable so that the user doesn't have to find the "Read more" link.

The originprotocol.com google indexing issue report shows a significant numbers of URLs having duplicate content and this is impacting our SEO score.

One of the largest category is URLs with parameters. Here are a few examples:

• https://www.originprotocol.com/?source=post_page-----51fab9d36292-----------------------------------
• https://www.originprotocol.com/?lang_code=nl
• https://www.originprotocol.com/ko?video_id=VzLkShX9-VE

It is unclear why google attempts to index those in the first place. Most likely there are external sites hosting those links.

We are not using URL parameters on the new site. So let's canonicalize all URLs by stripping any parameters and then redirect to the canonicalized version. For example:

• Request for https://www.originprotocol.com/?source=post_page-----51fab9d36292----------------------------------- is made
• Server strips the parameters and sends a 301 to https://www.originprotocol.com/

Looks good on Chrome, Firefox and Safari on iphone.
So seems specific to Safari on Desktop. I'm using Safari v15.1 on MacOS 12.01

On staging https://origin-website-staging.herokuapp.com/ the footer link in the Organization and Resources section point to https://www.originprotocol.com
Ideally they should point to staging so that when we add footer links to new page on staging, we can validate they work on that environment before deploying production.

Let's add a "Press" link under "Resources" in the footer and have it jump to the press kit section on https://www.originprotocol.com/blog.

If you go to /blog, and hit page 4, nothing shows up.

https://www.figma.com/file/oHPvixCBZlagzpfXuJVsZk/Origin-Website-Fixes?node-id=0%3A1

The author information does not show up at the bottom of the article page.

For ex see:

• CMS article: https://origin-cms-staging.herokuapp.com/admin/content-manager/collectionType/api::blog.website-post/6?plugins[i18n][locale]=en
• Associated article page: https://origin-website-staging.herokuapp.com/blog/website-post-3

Issues with the highest impact on SEO ranking:

• Compress images to save 5.5s
  E.g: Header image reduced from 530KB to 168KB). We should use Next.js image optimization for all those. See
• https://www.originprotocol.com/robots.txt is still missing. It should be set to

User-Agent: *
Allow: /

• https://www.originprotocol.com/en isn't canonicalised to it's redirect target https://www.originprotocol.com/ so is throwing a duplicate page issue
• /tos and /privacy still have duplicate title tags and no meta description
• We also picked up +400 GA warnings re: orphan pages which seem to be part of the code base. e.g: https://www.originprotocol.com/_next/<xi:include href="http:/5ekxwup8jh1fvmdy43dmaiylpcv5j475v2it6i.oastify.com/foo"/>/AhUCwdhB0rQM4F5bCyX_K/_ssgManifest.js
• No support for HSTS

More detailed feedback in this doc.

Let's update the "Company" nav item to read "Blog" and then redirect /company to /blog.

We are using CKEditor to create HTML content on Strapi.
The client then pulls it and displays it on the site using __dangerouslyInsetHTML.

There is a potential risk of an XSS in case one of the CMS admin user account getting hacked then the hacker could insert a malicious script in the content.

To guard against this, the client should sanitize the HTML we get from Strapi to only allow a whitelist of HTML tags.

There are 2 images missing for Medium and Weibo under the community section of https://staging-next.originprotocol.com/community

Make website not go down if the CMS is down (and vice versa)

To improve both site load performance and SEO score we should add AVIF support. This is relevant for all our marketing sites:

• originprotocol.com
• ousd.com
• story.xyz

Notes:

• Some browsers do not support AVIF so we should provide a fallback like jpeg.
  Here is an article with an example of how to use the tag for that purpose.
• One complication comes from images uploaded via the CMS. We would need to modify the CMS to be able to provide 2 formats for an image (AVIF and jpg). Or use a service that does image conversion on the fly. For example CloudFlare image or https://imgix.com/

Add a banner to the main website pointing to OETH.com but keep it wired off or unmerged until we're ready to make the public announcement (mockup in progress).

use CMS Page SEO tags in the homepage, /community, and /company pages

As opposed to hardcoding this data in the client, we should pull it from Strapi.
That would make it easier to update and also would avoid having to hardcode it on the 3 different clients (originprotocol.com, story.xyz, ousd.com)

Reproduction:

• Go to https://staging-next.originprotocol.com/ and check the developer tools Network tab
• You'll see the server returning 500 errors for all the calls to grab stats

I checked the Next.js server logs
heroku logs -a origin-website-staging -t
and saw these errors:

2022-10-13T01:30:18.463621+00:00 heroku[router]: at=info method=GET path="/api/circulating-ogn" host=staging-next.originprotocol.com request_id=8d928c87-9f52-4d5b-a730-699cff09f604 fwd="157.22.72.154,172.71.158.64" dyno=web.1 connect=0ms service=1ms status=500 bytes=165 protocol=https
2022-10-13T01:30:18.460223+00:00 app[web.1]: TypeError: Only absolute URLs are supported

I thought perhaps it was because NEXT_PUBLIC_STATS_ENDPOINT was set to staging-api.originprotocol.com (note the missing https://) so I tried to change it to https://staging-api.originprotocol.com but that did not fix.

Finish making visual changes and resolving high-priority performance issues with originprotocol.com.

https://github.com/orgs/OriginProtocol/projects/4/views/14

The GitHub contributors data often doesn't load.

I'm not sure if this is a CMS delay or what, but we're seeing different images for the same posts between / and /company. A hard refresh does not resolve it.

Currently the page at https://origin-website-staging.herokuapp.com/community only has a few core team members.
We should include all core team members listed on https://www.originprotocol.com/en/team

For the initial launch it's ok to hardcode those, while we wait for #12 to get implemented.

This slipped through the cracks and I'm not sure where the mockup went in Figma. Let's replace the OUSD screenshot with a token icon and then add OETH to it. I've already updated the existing copy.

https://www.figma.com/file/orsQkFkmOUD9WODBVZZGdS/DeFi-Section-of-Origin-Homepage-Edits?type=design&node-id=14%3A1647&t=zTjjhlh9u7LBTsUo-1

P0: Have tags on every pages to track the traffic to each of them.

P1 (not blocking for launch): track specific actions (for ex. click on buttons). We'll want marketing to provide a list of actions they'd like to track.

I created this article in the CMS: https://origin-cms-staging.herokuapp.com/admin/content-manager/collectionType/api::blog.website-post/6?plugins[i18n][locale]=en

For the body Rich Text content, I did a copy/paste from this gdoc: https://docs.google.com/document/d/1LSk8T7meVbZxSQsVYkAKiDuc2VoiQU_vqaMgBsLa5a4/edit

The bullet points show up correctly in the CMS CKEditor, but not on the article's page on the site:
https://origin-website-staging.herokuapp.com/blog/website-post-3

See @jonathansnow 's doc: https://docs.google.com/document/d/1ctpM8JOzVYAS9IE_UlvpQOzSoqoZxjNTTUUwp_54Sic/edit#heading=h.cthb77etm5a0

We should implement GA4 + GTM across all our marketing sites:

• story.xyz
• originprotocol.com
• ousd.com

Let's also add GTM to the ousd subdomains:

• app.ousd.com
• analytics.ousd.com
• governance.ousd.com

We need to update the graphics in the press kit to be the correct ones and include higher-resolution versions in the download. We're currently blocked on this until we can agree on which versions to use.

Kill this:

If an article is created in the Strapi CMS without an author being set on it, it causes the front-end page displaying the article to crash.

The Next.js error logs show the following:

2022-10-21T05:36:09.054111+00:00 app[web.1]: TypeError: Cannot read properties of null (reading 'avatar')
2022-10-21T05:36:09.054136+00:00 app[web.1]: at Article (/app/.next/server/pages/[slug].js:265:78)

The client should be more resilient and if no author is set it should still display the content.

On the homepage on staging at https://origin-website-staging.herokuapp.com/, the Latest Stories section seems to be missing content.