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  const selected = (path) => {
14    return location.pathname.endsWith(path) || location.pathname.endsWith(path + "/");
15  }
16
17  return (
18    <MDXProvider>
19      <Layout>
20          <SEO title="Stretch" keywords={[`rust`, `android`, `ios`, `web`, `flexbox`]} />
21          <section className="docs-header">
22            <div className="section-inner">
23              <h1>Documentation</h1>
24              <p>
25                Stretch is available for Rust, Kotlin, Swift, and JavaScript. We will be adding more language bindings over time.
26                For general help on using flexbox we suggest 
27                reading <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">css-tricks.com/snippets/css/a-guide-to-flexbox</a> and 
28                playing around with <a href="https://flexboxfroggy.com">flexboxfroggy.com</a>. Or you can always read the spec itself
29                at <a href="https://www.w3.org/TR/css-flexbox-1/">www.w3.org/TR/css-flexbox-1</a>
30              </p>
31              <div className="doc-pills">
32                <Link to="/docs/rust" className={`doc-pill ${selected("rust") ? "active" : ""}`}>Rust</Link>
33                <Link to="/docs/kotlin" className={`doc-pill ${selected("kotlin") ? "active" : ""}`}>Kotlin</Link>
34                <Link to="/docs/swift" className={`doc-pill ${selected("swift") ? "active" : ""}`}>Swift</Link>
35                <Link to="/docs/javascript" className={`doc-pill ${selected("javascript") ? "active" : ""}`}>JavaScript</Link>
36              </div>
37            </div>
38          </section>
39          <section className="mdx-content">
40            <div className="section-inner">
41              <div>
42                {children}
43              </div>
44            </div>
45          </section>
46        </Layout>
47    </MDXProvider>
48  );
49}
50
51export function Code({file, lang, children}) {
52  return (
53      <div className="code-block">
54          { file && <code>{file}</code> }
55          <div className="code-wrapper">
56            <SyntaxHighlighter language={lang} style={atomOneDark}>{children.trim()}</SyntaxHighlighter>
57          </div>
58      </div>
59  );
60}