Introduce transition page while preserving meta tags for crawlers

[liangyuanruo]

Problem

Provide a transition page on redirect for browsers, whilst preserving meta tags for social media crawlers.

Closes #10

Solution

Detecting a crawler

Crawlers tend to have fairly unique user-agent (UA) strings, which are either terse or have the word "bot" embedded (see Telegram, Facebook and Google).

To discern between bots/crawlers and human users, we rely on the popular ua-parser-js library to parse the user-agent string and determine additional metadata such as

• Operating system
• Browser
• Browser engine

which would be readily available for common browsers but not for crawler UAs. The server only serves the transition page if all three pieces of metadata can be determined with confidence. This method leans towards safety - the server should prefer immediately redirecting when operating under uncertainty, rather than risk serving a transition page to a crawler.

TODOs

• CSS tweaks
• Mobile view
• Set a cookie to determine if a browser has been served a transition page recently e.g. last 48h.
• Adjust design based on user tests (currently 3s automatic transition)

Tests

• LinkedIn
• Twitter
• Facebook
• Slack

Also see metatags.io.

Features:

• Transition page for non-crawler user agents

Improvements:

• Server-side views moved into src which can take advantage of hot-reloading

Screenshots

Desktop

Deploy Notes

New dependencies:

• ua-parser-js : User-agent string parsing library

New dev dependencies:

• copyfiles : Used to move server-side EJS template files into /build after Typescript compilation

[kylerwsm]

Looks good to me. Added a couple of comments.