tawasuyu/taffy

1import React from "react";
2import {Link} from "gatsby";
3import {MDXProvider} from '@mdx-js/react'
4
5import Layout from "../components/layout"
6import SEO from "../components/seo"
7import './docs.css'
8
9import SyntaxHighlighter from 'react-syntax-highlighter';
10import { atomOneDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
11
12export default ({children, location}) => (
13  <MDXProvider>
14    <Layout>
15        <SEO title="Stretch" keywords={[`rust`, `android`, `ios`, `web`, `flexbox`]} />
16        <section className="docs-header">
17          <div className="section-inner">
18            <h1>Documentation</h1>
19            <p>
20              Stretch is available for Rust, Kotlin, Swift, and JavaScript. We will be adding more language bindings over time.
21              For general help on using flexbox we suggest 
22              reading <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">css-tricks.com/snippets/css/a-guide-to-flexbox</a> and 
23              playing around with <a href="https://flexboxfroggy.com">flexboxfroggy.com</a>. Or you can always read the spec itself
24              at <a href="https://www.w3.org/TR/css-flexbox-1/">www.w3.org/TR/css-flexbox-1</a>
25            </p>
26            <div className="doc-pills">
27              <Link to="/docs/rust" className={`doc-pill ${location.pathname.endsWith("rust") ? "active" : ""}`}>Rust</Link>
28              <Link to="/docs/kotlin" className={`doc-pill ${location.pathname.endsWith("kotlin") ? "active" : ""}`}>Kotlin</Link>
29              <Link to="/docs/swift" className={`doc-pill ${location.pathname.endsWith("swift") ? "active" : ""}`}>Swift</Link>
30              <Link to="/docs/javascript" className={`doc-pill ${location.pathname.endsWith("javascript") ? "active" : ""}`}>JavaScript</Link>
31            </div>
32          </div>
33        </section>
34        <section className="mdx-content">
35          <div className="section-inner">
36            <div>
37              {children}
38            </div>
39          </div>
40        </section>
41      </Layout>
42  </MDXProvider>
43);
44
45export function Code({file, lang, children}) {
46  return (
47      <div className="code-block">
48          { file && <code>{file}</code> }
49          <div className="code-wrapper">
50            <SyntaxHighlighter language={lang} style={atomOneDark}>{children.trim()}</SyntaxHighlighter>
51          </div>
52      </div>
53  );
54}