<commit_before>import React from 'react';
import { PrismBlock } from './PrismBlocks';

const NPM = ({ name }) => (
  <div>
    <p>
      You can install the {name} package from NPM.
    </p>
    <PrismBlock lang='bash'>
      {`npm install @curi/${name}`}
    </PrismBlock>
  </div>
);

const Unpkg = ({ name, version, globalName }) => (
  <div>
    <p>
      If you prefer to use script tags, <a href='https://unpkg.com'>Unpkg</a> will
      always have the latest version of {name} available for you.
    </p>
    <PrismBlock lang='markup'>
      {
`<script src="https://unpkg.com/@curi/${name}@${version}/dist/curi-${name}.js" />`
      }
    </PrismBlock>
    <p>
      There is also a minimized version available if you change the filename to{' '}
      <code className='language-markup'>{name}.min.js</code>
    </p>
    <PrismBlock lang='javascript'>
      {
`// the package will be attached to the window
window.${globalName}`
      }
    </PrismBlock>
  </div>
);

export default ({ name, version, globalName }) => (
  <div id='installation' className='section'>
    <h2>Installation</h2>
    <NPM name={name} />
    <Unpkg name={name} version={version} globalName={globalName} />
  </div>
);<commit_msg>(Docs) Cleanup <Installation> component [ci skip]<commit_after>import React from 'react';
import {
  PrismBlock,
  InlineJS as IJS
} from './PrismBlocks';

const NPM = ({ name }) => (
  <div>
    <p>
      You can install the <IJS>{name}</IJS> package from NPM.
    </p>
    <PrismBlock lang='bash'>
      {`npm install @curi/${name}`}
    </PrismBlock>
  </div>
);

const Unpkg = ({ name, version, globalName }) => (
  <div>
    <p>
      If you prefer to use script tags, <a href='https://unpkg.com'>Unpkg</a> will
      always have the latest version of <IJS>{name}</IJS> available for you.
    </p>
    <PrismBlock lang='markup'>
      {
`<script src="https://unpkg.com/@curi/${name}@${version}/dist/curi-${name}.js" />`
      }
    </PrismBlock>
    <p>
      There is also a minimized version available if you change the filename to{' '}
      <IJS>{name}.min.js</IJS>. The package will be attached
      to the window as <IJS>window.{globalName}</IJS>.
    </p>
  </div>
);

export default ({ name, version, globalName }) => (
  <div id='installation' className='section'>
    <h2>Installation</h2>
    <NPM name={name} />
    <Unpkg name={name} version={version} globalName={globalName} />
  </div>
);
{'fraction_non_alphanumeric': 0.1796036333608588, 'fraction_numerical': 0.0016515276630883566, 'mean_word_length': 2.9721311475409835, 'pattern_counts': {'":': 0, '<': 62, '<?xml version=': 0, '>': 68, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '371829', 'n_tokens_mistral': 837, 'n_tokens_neox': 834, 'n_words': 221}