introduce basic docs layout and zoomable images

Author: MykolaGolubyev

README.md

@@ -41,7 +41,7 @@ export function App() {
 
 It will work with your build system, the language of your choice and style processing.
 
-![screen example](img/screen-example.png)
+![screen example](documentation/rcv/static/screen-example.png)
 
 # Demo functions
 

documentation/rcv/package-lock.json

@@ -13,6 +13,8 @@
   },
   "dependencies": {
     "gatsby": "^2.0.76",
+    "marked": "^0.6.0",
+    "prismjs": "^1.15.0",
     "react": "^16.5.1",
     "react-dom": "^16.5.1"
   },

documentation/rcv/package.json

@@ -0,0 +1,4 @@
+.centered {
+    display: flex;
+    align-items: center;
+}

documentation/rcv/src/components/Centered.css

@@ -0,0 +1,10 @@
+import React from 'react'
+import './Centered.css'
+
+export function Centered({children}) {
+    return (
+        <div className="centered">
+            {children}
+        </div>
+    )
+}

documentation/rcv/src/components/Centered.js

@@ -0,0 +1,8 @@
+.image img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.image {
+    height: 100%;
+}

documentation/rcv/src/components/Image.css

@@ -0,0 +1,17 @@
+import React from "react"
+
+import {withPrefix} from 'gatsby'
+
+import {Zoomable} from "./Zoomable";
+
+import './Image.css'
+
+export function Image({path, description}) {
+    return (
+        <Zoomable>
+            <div className="image">
+                <img src={withPrefix(path)} alt={description}/>
+            </div>
+        </Zoomable>
+    )
+}

documentation/rcv/src/components/Image.js

@@ -0,0 +1,62 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Verdana, serif;
+
+    --rcv-doc-left-gap: 48px;
+}
+
+.layout {
+    display: grid;
+    grid-template-rows: 56px 1fr;
+    height: 100vh;
+}
+
+.layout .tool-name {
+    font-size: 18px;
+}
+
+.layout .guide-label {
+    color: #cccccc;
+    font-size: 14px;
+    margin-left: 16px;
+}
+
+.layout .top-panel {
+    display: flex;
+    align-items: center;
+    padding-left: var(--rcv-doc-left-gap);
+    background-color: #5b6271;
+    color: white;
+}
+
+.layout .content-panel {
+    padding-left: var(--rcv-doc-left-gap);
+    overflow: auto;
+}
+
+.layout .zoomed-in-overlay,
+.layout .zoomed-in-content {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+}
+
+.layout .zoomed-in-overlay {
+    background-color: #000;
+    opacity: 0.5;
+    z-index: 1000;
+}
+
+.layout .zoomed-in-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    opacity: 1;
+    margin: 24px;
+
+    z-index: 1001;
+}

documentation/rcv/src/components/Layout.css

@@ -0,0 +1,78 @@
+import React from 'react'
+
+import {zoomListeners} from "./ZoomListeners";
+
+import './Layout.css';
+
+export class Layout extends React.Component {
+    state = {
+        zoomedIn: undefined
+    }
+
+    render() {
+        const {children} = this.props
+
+        return (
+            <div className="layout">
+                <div className="top-panel">
+                    <div className="tool-name">React Component Viewer</div>
+                    <div className="guide-label">guide</div>
+                </div>
+
+                <div className="content-panel">
+                    {children}
+                </div>
+
+                {this.renderZoomedIn()}
+            </div>
+        )
+    }
+
+    renderZoomedIn() {
+        const {zoomedIn} = this.state
+
+        if (!zoomedIn) {
+            return null
+        }
+
+        return (
+            <>
+                <div className="zoomed-in-overlay" onClick={this.onZoomOverlayClick}/>
+                <div className="zoomed-in-content" onClick={this.onZoomOverlayClick}>
+                    {zoomedIn}
+                </div>
+            </>
+        )
+    }
+
+    onZoomOverlayClick = (e) => {
+        console.log('onZoomOverlayClick')
+
+        e.preventDefault()
+        this.removeZoom()
+    }
+
+    onZoomIn = (rendered) => {
+        this.setState({zoomedIn: rendered})
+    }
+
+    onKeyDown = (e) => {
+        if (e.code === 'Escape') {
+            this.removeZoom()
+        }
+    }
+
+    removeZoom = () => {
+        this.setState({zoomedIn: undefined})
+    }
+
+    componentDidMount() {
+        zoomListeners.addListener(this.onZoomIn)
+        document.addEventListener('keydown', this.onKeyDown)
+    }
+
+    componentWillUnmount() {
+        zoomListeners.removeListener(this.onZoomIn)
+        document.removeEventListener('keydown', this.onKeyDown)
+    }
+}

documentation/rcv/src/components/Layout.js

@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+import Prism from 'prismjs'
+
+import 'prismjs/components/prism-typescript'
+import 'prismjs/plugins/line-highlight/prism-line-highlight'
+
+import 'prismjs/themes/prism.css'
+import 'prismjs/plugins/line-highlight/prism-line-highlight.css'
+
+const marked = require('marked')
+
+export class MarkdownBlock extends React.Component {
+    render() {
+        const {markdown} = this.props
+
+        return (
+            <div className="MarkdownBlock" dangerouslySetInnerHTML={{__html: htmlFromVarValue(markdown)}}/>
+        )
+    }
+
+    componentDidMount() {
+        Prism.highlightAll()
+    }
+
+    componentDidUpdate() {
+        Prism.highlightAll()
+    }
+}
+
+export function htmlFromVarValue(value) {
+    return marked(value.trim())
+}