[infra] Add site updates for 2.0.0 (#178)

site/index.njk

@@ -0,0 +1,28 @@
+---
+title: Quicklink
+layout: layouts/base.njk
+description: Faster subsequent page-loads by prefetching in-viewport links during idle time.
+---
+{% include "components/heading.njk" %}
+
+{% include "components/why-quicklink.njk" %}
+
+{% include "components/copy-snippet.njk" %}
+
+{% include "components/download.njk" %}
+
+{% include "components/trusted-by.njk" %}
+
+{% include "components/installation.njk" %}
+
+{% include "components/usage.njk" %}
+
+{% include "components/over-prefetching.njk" %}
+
+{% include "components/react.njk" %}
+
+{% include "components/chrome-extension.njk" %}
+
+{% include "components/why-prefetch.njk" %}
+
+{% include "components/use-with.njk" %}

site/src/_data/site.json

@@ -4,7 +4,7 @@
   "description": "Faster subsequent page-loads by prefetching in-viewport links during idle time.",
   "logo": "/assets/images/logos/quicklink.svg",
   "quicklinkGithubURL": "https://github.com/GoogleChromeLabs/quicklink/",
-  "quicklinkVersion": "2.0.0-alpha",
+  "quicklinkVersion": "2.0.0-beta",
   "quicklinkSizeLimit": "1KB",
   "bottomResource": {
     "caption": "View source on GitHub"

site/src/_includes/components/heading.njk

@@ -1,6 +1,6 @@
 {% extends "layouts/highlighted-section-wrapper.njk" %}
 {% block section %}
 <h1 class="heading text-center">
-Speed up next page navigations by up to <em class="secondary-font-color">1 second</em> and improve conversions by up to <em class="secondary-font-color">10%</em>
+"We implemented Quicklink and saw a <em class="secondary-font-color">50%</em> increase in conversions and <em class="secondary-font-color">4x</em> faster page transitions" - NewEgg
 </h1>
 {% endblock %}

site/src/_includes/components/react.njk

@@ -0,0 +1,44 @@
+{% extends "layouts/normal-section-wrapper.njk" %}
+{% block section %}
+{% sectionTitle "Single page apps (React)" %}
+{% markdownConvert %}
+
+### Installation
+
+First, install the packages with [node](https://nodejs.org) and [npm](https://npmjs.com):
+
+```sh
+npm install quicklink webpack-route-manifest --save-dev
+```
+
+Then, configure Webpack route manifest into your project, as explained [here](https://github.com/lukeed/webpack-route-manifest).
+This will generate a map of routes and chunks called `rmanifest.json`. It can be obtained at:
+
+* URL: `site_url/rmanifest.json`
+* Window object: `window.__rmanifest`
+
+### Usage
+
+Import `quicklink` React HOC where want to add prefetching functionality. 
+Wrap your routes with the `withQuicklink()` HOC.
+
+Example:
+
+```sh
+import { withQuicklink } from 'quicklink/dist/react/hoc.js';
+
+const options = {
+  origins: []
+};
+
+<Suspense fallback={<div>Loading...</div>}>
+  <Route path="/" exact component={withQuicklink(Home, options)} />
+  <Route path="/blog" exact component={withQuicklink(Blog, options)} />
+  <Route path="/blog/:title" component={withQuicklink(Article, options)} />
+  <Route path="/about" exact component={withQuicklink(About, options)} />
+</Suspense>
+```
+
+{% endmarkdownConvert %}
+{% endblock %}
+

site/src/_includes/components/why-prefetch.njk

@@ -0,0 +1,8 @@
+{% extends "layouts/normal-section-wrapper.njk" %}
+{% block section %}
+{% sectionTitle "Why Quicklink\'s prefetch?" %}
+
+<div class="center">
+<img src="/assets/images/graphs/prefetch-improve-svgomg.svg" alt="Prefetch pages a user may need in the future to improve subsequent page loads"/>
+</div>
+{% endblock %}

site/src/approach.njk

@@ -13,14 +13,16 @@ sections:
 
 ## How it works
 
+![](/assets/images/graphs/what-is-prefetch-svgomg.svg)
+
 Quicklink attempts to make navigations to subsequent pages load faster. It:
 
 * **Detects links within the viewport** (using [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API))
 * **Waits until the browser is idle** (using [requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback))
 * **Checks if the user isn't on a slow connection** (using `navigator.connection.effectiveType`) or has data-saver enabled (using `navigator.connection.saveData`)
 * **Prefetches URLs to the links** (using [`<link rel=prefetch>`](https://www.w3.org/TR/resource-hints/#prefetch) or XHR). Provides some control over the request priority (can switch to `fetch()` if supported).
 
-![](/assets/images/graphs/prefetching.svg)
+![](/assets/images/graphs/prefetch-quicklink-svgomg.svg)
 
 ## Future: Double-keyed HTTP Cache
 

site/src/index.njk

@@ -19,6 +19,10 @@ description: Faster subsequent page-loads by prefetching in-viewport links durin
 
 {% include "components/over-prefetching.njk" %}
 
+{% include "components/react.njk" %}
+
 {% include "components/chrome-extension.njk" %}
 
+{% include "components/why-prefetch.njk" %}
+
 {% include "components/use-with.njk" %}