import Layout from '../../components/layout'
import Link from '../../components/link'
import Title from '../../components/title'

export default () => (
  <Layout title="Installing Wilderness">
    <Title>
      Installation
    </Title>

    <p>
      Wilderness can be used as <Link href="#es2015-module">an ES2015
      module</Link>, <Link href="#commonjs">required with commonjs</Link> or
      {' '} <Link href="#umd">loaded with a script element</Link>.
    </p>

    <p>
      Get Wilderness by installing the npm distribution:
    </p>

    <pre>{`
      yarn add wilderness
    `}</pre>

    <p>
      or
    </p>

    <pre>{`
      npm --save wilderness
    `}</pre>

    <p>
      Alternatively you can link to, or download, the distribution from
      the <Link href="https://unpkg.com/wilderness-core/">unpkg CDN</Link>.
    </p>

    <h2 id="es2015-module">
      ES2015 module
    </h2>

    <pre>{`
      import { shape, timeline, render, play } from 'wilderness'
    `}</pre>

    <h2 id="commonjs">
      commonjs
    </h2>

    <pre>{`
      const { shape, timeline, render, play } = require('wilderness')
    `}</pre>

    <h2 id="umd">
      UMD
    </h2>

    <p>
      If you just want to drop a javascript file onto your page, then this is
      the method for you.
    </p>

    <p>
      Look in the `dist` directory of the distribution and select either the
      [development](https://unpkg.com/wilderness/dist/wilderness.development.js)
      or
      [production](https://unpkg.com/wilderness/dist/wilderness.production.js)
      file.
    </p>

    <p>
      Add a `script` tag linking to the file into your HTML layout, and you
      will then have access to the global `Wilderness` object.
    </p>

    <pre>{`
      const shape = Wilderness.shape
      const timeline = Wilderness.timeline
      const render = Wilderness.render
      const play = Wilderness.play
    `}</pre>

    <hr />

    <p>
      Now that we have Wilderness all ready to go, it's about time we learned
      how to use it!
    </p>

    <Link href="/getting-started/create-a-shape" prefetch button>
      Next lesson: Create a shape
    </Link>
  </Layout>
)

@@ -1324,14 +1324,25 @@
 the 
-%60dist%60
+%3Ccode%3Edist%3C/code%3E
  dir
@@ -1378,16 +1378,22 @@
 d select
+%0A     
  either 
@@ -1399,29 +1399,33 @@
  the
+ %7B' '%7D
 %0A      
-%5Bdevelopment%5D(
+%3CLink href=%22
 http
@@ -1483,38 +1483,68 @@
 t.js
-)%0A      or%0A      %5Bproduction%5D(
+%22%3Edevelopment%3C/Link%3E%0A      %7B' '%7D or %7B' '%7D%0A      %3CLink href=%22
 http
@@ -1601,15 +1601,39 @@
 n.js
-)%0A     
+%22%3Eproduction%3C/Link%3E%0A      %7B' '%7D
  fil
@@ -1669,16 +1669,27 @@
 d a 
-%60script%60
+%3Ccode%3Escript%3C/code%3E
  tag
@@ -1735,16 +1735,22 @@
 out,
+%0A     
  and you
 %0A   
@@ -1745,22 +1745,16 @@
  and you
-%0A     
  will th
@@ -1782,17 +1782,22 @@
  global 
-%60
+%3Ccode%3E
 Wilderne
@@ -1798,17 +1798,35 @@
 lderness
-%60
+%3C/code%3E %7B' '%7D%0A     
  object.

remove markdown