feat: add VSCode.js page (#135)

flix · Dec 29, 2023 · 23ba2bb · 23ba2bb
1 parent 7ba1fd3
commit 23ba2bb
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 0 deletions.
diff --git a/src/App.js b/src/App.js
@@ -3,6 +3,7 @@ import './App.css';
 
 import Home from "./page/Home";
 import GetStarted from "./page/GetStarted";
+import VSCode from "./page/VSCode";
 import Documentation from "./page/Documentation";
 import Principles from "./page/Principles";
 import Contribute from "./page/Contribute";
@@ -87,6 +88,10 @@ class App extends Component {
                             <NavLink tag={Link} to="/get-started/">Get Started</NavLink>
                         </NavItem>
 
+                        <NavItem className="pl-1 pr-1">
+                            <NavLink tag={Link} to="/vscode/">VSCode</NavLink>
+                        </NavItem>
+
                         <NavItem className="pl-1 pr-1">
                             <NavLink tag={Link}
                                      to="/principles/">Principles</NavLink>
@@ -116,6 +121,7 @@ class App extends Component {
 
                 <Route path="/" exact render={() => this.getHome()}/>
                 <Route path="/get-started/" component={GetStarted}/>
+                <Route path="/vscode/" component={VSCode}/>
                 <Route path="/principles/" component={Principles}/>
                 <Route path="/documentation/" component={Documentation}/>
                 <Route path="/faq/" component={Faq}/>

diff --git a/src/gif/autoComplete.png b/src/gif/autoComplete.png
diff --git a/src/gif/codelens.png b/src/gif/codelens.png
diff --git a/src/gif/hover.png b/src/gif/hover.png
diff --git a/src/gif/inlineDiagnostics.png b/src/gif/inlineDiagnostics.png
diff --git a/src/gif/quickfix.png b/src/gif/quickfix.png
diff --git a/src/gif/rename.png b/src/gif/rename.png
diff --git a/src/gif/snippetComplete.png b/src/gif/snippetComplete.png
diff --git a/src/page/VSCode.js b/src/page/VSCode.js
@@ -0,0 +1,114 @@
+import React, {Component} from 'react';
+import {Card, CardImg, Col, Container, Row} from "reactstrap";
+import inlineDiagnostics from '../gif/inlineDiagnostics.png'
+import autoComplete from '../gif/autoComplete.png'
+import snippetComplete from '../gif/snippetComplete.png'
+import hover from '../gif/hover.png'
+import rename from '../gif/rename.png'
+import quickfix from '../gif/quickfix.png'
+import codelens from '../gif/codelens.png'
+
+class VSCode extends Component {
+
+    componentDidMount() {
+        document.title = "Flix | Visual Studio Code Features";
+    }
+
+    render() {
+        return (<Container>
+            <Row className="mb-3">
+                <Col md={12}>
+                    <h1>Visual Studio Code Features</h1>
+                </Col>
+            </Row>
+
+            <Row className="mb-5">
+                <Col md={6}>
+                    <h4>Inline Diagnostics</h4>
+                    <p>
+                        Flix shows inline diagnostics.
+                    </p>
+                    <Card>
+                        <CardImg top src={inlineDiagnostics}/>
+                    </Card>
+                </Col>
+            </Row>
+
+            <Row className="mb-5">
+                <Col md={6}>
+                    <h4>Auto Completion</h4>
+                    <p>
+                        Flix supports auto-completion of a range of program elements.
+                    </p>
+                    <Card>
+                        <CardImg top src={autoComplete}/>
+                    </Card>
+                </Col>
+            </Row>
+
+            <Row className="mb-5">
+                <Col md={6}>
+                    <h4>Snippet Completion</h4>
+                    <p>
+                        Flix supports snippet completion for large program fragments.
+                        For example, we can auto-complete trait instances.
+                    </p>
+                    <Card>
+                        <CardImg top src={snippetComplete}/>
+                    </Card>
+                </Col>
+            </Row>
+
+            <Row className="mb-5">
+                <Col md={6}>
+                    <h4>Hover</h4>
+                    <p>
+                        Flix supports hovering over program fragments to show their documentation, type, effect, and kind.
+                    </p>
+                    <Card>
+                        <CardImg top src={hover}/>
+                    </Card>
+                </Col>
+            </Row>
+
+            <Row className="mb-5">
+                <Col md={6}>
+                    <h4>Rename</h4>
+                    <p>
+                        Flix supports automatic renaming of most program elements.
+                    </p>
+                    <Card>
+                        <CardImg top src={rename}/>
+                    </Card>
+                </Col>
+            </Row>
+
+            <Row className="mb-5">
+                <Col md={6}>
+                    <h4>Quick Fixes</h4>
+                    <p>
+                        Flix supports some quick fixes for simple program errors.
+                        Here we automatically derive a missing <code>eq</code> instance.
+                    </p>
+                    <Card>
+                        <CardImg top src={quickfix}/>
+                    </Card>
+                </Col>
+            </Row>
+
+            <Row className="mb-5">
+                <Col md={6}>
+                    <h4>Code Lens</h4>
+                    <p>
+                        Flix supports code lenses for running main, functions, and tests.
+                    </p>
+                    <Card>
+                        <CardImg top src={codelens}/>
+                    </Card>
+                </Col>
+            </Row>
+        </Container>);
+    }
+}
+
+export default VSCode;