Welcome.js

//@flow

/*******************************************************************************
 * Imports
 *******************************************************************************/

import React from 'react'

import Tldr from './Tldr'
import Link from './Link'
import { Markdown, Cr } from './Markdown'

import hello from '../lib/hello'

/*******************************************************************************
 * Private 
 *******************************************************************************/

let random = (list) => list[Math.floor(Math.random()*list.length)]

let salutation = random(hello)

/*******************************************************************************
 * Public API
 *******************************************************************************/

export default () => (
  <Markdown className="content">
    # {salutation}!
{Cr}
    We tried to learn other languages, but since we didn't find a <Tldr size="small" /> for them it might not say "Welcome". We extend our deepest apologies.
{Cr}
    ### How do I use this thing?
{Cr}
    See the input box by the logo? Just type in a command and see the magic happen!
{Cr}
    Try <code>osx/say</code>, <code>linux/du</code>, or simply <code>man</code>.
{Cr}
    Some commands are widely available with the same interface, some other have variants per operating system. Currently the <code>tldr-pages</code> project splits commands into 4 categories: common, linux, osx, and sunos.
{Cr}
    <code>du</code>, for example, is available under both <code>linux</code> and <code>osx</code>.
{Cr}
    ### What is <Tldr size="small" />?
{Cr}
    This is a web client for a project called <code>tldr-pages</code>; they are a community effort to simplify the beloved man pages with practical examples.
{Cr}
    Nifty indeed.
{Cr}
    Read more and join the tldr wagon at <Link href="https://tldr-pages.github.io/" text="tldr-pages.github.io" />
{Cr}
    ### Do you have any unwanted pieces of trivia for me?
{Cr}
Well, this small app was built with ES6, type-checked using FlowType, the amazing reactivity is provided by RxJS, and all the rendering is done with React. It's got a nice 12-LOC long Markdown component that works _great_ with nested React components. See these links? <Link href="https://github.com/ostera/tldr.jsx/blob/master/src/components/Welcome.js" text="Check the source" />
{Cr}
    Have a <Link href="https://github.com/ostera/tldr.jsx" text="look inside" /> and feel free to <Link href="https://github.com/ostera/tldr.jsx/fork" text="fork" />
  </Markdown>
)