Merge pull request #2889 from LLK/develop

Merge develop into the release candidate branch

package.json

@@ -101,7 +101,7 @@
     "react-responsive": "3.0.0",
     "react-slick": "0.16.0",
     "react-string-replace": "0.4.1",
-    "scratch-gui": "0.1.0-prerelease.20190404100408",
+    "scratch-gui": "0.1.0-prerelease.20190410204045",
     "react-telephone-input": "4.3.4",
     "redux": "3.5.2",
     "redux-thunk": "2.0.1",

src/lib/extensions.js

@@ -37,6 +37,11 @@ const EXTENSION_INFO = {
     makeymakey: {
         name: 'Makey Makey',
         icon: 'extension-makeymakey.svg'
+    },
+    gdxfor: {
+        name: 'Force and Acceleration',
+        icon: 'extension-gdxfor.svg',
+        hasStatus: true
     }
 };
 

src/routes.json

@@ -314,6 +314,13 @@
         "view": "microbit/microbit",
         "title": "micro:bit"
     },
+    {
+        "name": "vernier",
+        "pattern": "^/vernier/?$",
+        "routeAlias": "/vernier/?$",
+        "view": "gdxfor/gdxfor",
+        "title": "Vernier GoDirect Force and Acceleration"
+    },
     {
         "name":"3-faq-redirect",
         "pattern": "^/3faq/?$",

src/views/gdxfor/gdxfor.jsx

@@ -0,0 +1,270 @@
+const injectIntl = require('react-intl').injectIntl;
+const intlShape = require('react-intl').intlShape;
+const FormattedMessage = require('react-intl').FormattedMessage;
+const React = require('react');
+
+const Page = require('../../components/page/www/page.jsx');
+const render = require('../../lib/render.jsx');
+
+const FlexRow = require('../../components/flex-row/flex-row.jsx');
+
+const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
+
+const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx');
+const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx');
+const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
+const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
+const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
+const ProjectCard = require('../../components/extension-landing/project-card.jsx');
+
+const Steps = require('../../components/steps/steps.jsx');
+const Step = require('../../components/steps/step.jsx');
+
+require('../../components/extension-landing/extension-landing.scss');
+require('./gdxfor.scss');
+
+class GdxFor extends ExtensionLanding {
+    render () {
+        return (
+            <div className="extension-landing gdxfor">
+                <ExtensionHeader
+                    renderCopy={
+                        <FlexRow className="extension-copy">
+                            <h1><img
+                                alt=""
+                                src="/images/gdxfor/gdxfor.svg"
+                            />Vernier Force & Acceleration</h1>
+                            <FormattedMessage
+                                id="gdxfor.headerText"
+                                values={{
+                                    gdxforLink: (
+                                        <a
+                                            href="https://www.vernier.com/products/sensors/force-sensors/gdx-for/"
+                                            rel="noopener noreferrer"
+                                            target="_blank"
+                                        >
+                                            Vernier GoDirect Force & Acceleration
+                                        </a>
+                                    )
+                                }}
+                            />
+                        </FlexRow>
+                    }
+                    renderImage={<img
+                        alt={this.props.intl.formatMessage({id: 'gdxfor.imgAltGdxforIllustration'})}
+                        src="/images/gdxfor/gdxfor-header.svg"
+                    />}
+                    renderRequirements={
+                        <ExtensionRequirements>
+                            <span>
+                                <img
+                                    alt=""
+                                    src="/svgs/extensions/windows.svg"
+                                />
+                                            Windows 10 version 1709+
+                            </span>
+                            <span>
+                                <img
+                                    alt=""
+                                    src="/svgs/extensions/mac.svg"
+                                />
+                                            macOS 10.13+
+                            </span>
+                            <span>
+                                <img
+                                    alt=""
+                                    src="/svgs/extensions/bluetooth.svg"
+                                />
+                                            Bluetooth 4.0
+                            </span>
+                            <span>
+                                <img
+                                    alt=""
+                                    src="/svgs/extensions/scratch-link.svg"
+                                />
+                                            Scratch Link
+                            </span>
+                        </ExtensionRequirements>
+                    }
+                />
+                <OSChooser
+                    currentOS={this.state.OS}
+                    handleSetOS={this.onSetOS}
+                />
+                <InstallScratchLink
+                    currentOS={this.state.OS}
+                />
+                <ExtensionSection className="getting-started">
+                    <h2><FormattedMessage id="gdxfor.gettingStarted" /></h2>
+                    <FlexRow className="column getting-started-section">
+                        <h3><FormattedMessage id="gdxfor.connectingGdxfor" /></h3>
+                        <Steps>
+                            <Step number={1}>
+                                <div className="step-image">
+                                    <img
+                                        alt=""
+                                        src="/images/gdxfor/gdxfor-connect-1.svg"
+                                    />
+                                </div>
+                                <p><FormattedMessage id="gdxfor.powerGdxfor" /></p>
+                            </Step>
+                            <Step number={2}>
+                                <div className="step-image">
+                                    <img
+                                        alt=""
+                                        className="screenshot"
+                                        src="/images/gdxfor/gdxfor-connect-2.png"
+                                    />
+                                </div>
+                                <p>
+                                    <FormattedMessage
+                                        id="gdxfor.useScratch3"
+                                        values={{
+                                            scratch3Link: (
+                                                <a
+                                                    href="/projects/editor/"
+                                                    rel="noopener noreferrer"
+                                                    target="_blank"
+                                                >
+                                                            Scratch
+                                                </a>
+                                            )
+                                        }}
+                                    />
+                                </p>
+                            </Step>
+                            <Step number={3}>
+                                <div className="step-image">
+                                    <img
+                                        alt={this.props.intl.formatMessage({id: 'extensionInstallation.addExtension'})}
+                                        className="screenshot"
+                                        src="/images/gdxfor/gdxfor-connect-3.png"
+                                    />
+                                </div>
+                                <p><FormattedMessage id="gdxfor.addExtension" /></p>
+                            </Step>
+                        </Steps>
+                    </FlexRow>
+                </ExtensionSection>
+                <ExtensionSection className="blue things-to-try">
+                    <h2><FormattedMessage id="gdxfor.thingsToTry" /></h2>
+                    <h3><FormattedMessage id="gdxfor.pushToMakeASound" /></h3>
+                    <Steps>
+                        <Step
+                            compact
+                            number={1}
+                        >
+                            <span className="step-description">
+                                <FormattedMessage
+                                    id="gdxfor.connectForcePushedToPlaySound"
+                                    values={{
+                                        whenForceSensorPushed: (
+                                            <strong>
+                                                <FormattedMessage id="gdxfor.whenForceSensorPushed" />
+                                            </strong>
+                                        ),
+                                        startSound: (
+                                            <strong>
+                                                <FormattedMessage id="gdxfor.startSound" />
+                                            </strong>
+                                        )
+                                    }}
+                                />
+                            </span>
+                            <div className="step-image">
+                                <img
+                                    alt=""
+                                    src="/images/gdxfor/gdxfor-force-pushed-stack.png"
+                                />
+                            </div>
+                        </Step>
+                        <Step
+                            compact
+                            number={2}
+                        >
+                            <span className="step-description">
+                                <FormattedMessage id="gdxfor.pushOnForceSensor" />
+                            </span>
+                            <div className="step-image">
+                                <img
+                                    alt={this.props.intl.formatMessage({id: 'gdxfor.imgAltPushForce'})}
+                                    src="/images/gdxfor/gdxfor-push-force.svg"
+                                />
+                            </div>
+                        </Step>
+                    </Steps>
+                    <hr />
+                    <h3><FormattedMessage id="gdxfor.starterProjects" /></h3>
+                    <Steps>
+                        <ProjectCard
+                            cardUrl="/projects/301384031/editor"
+                            description={this.props.intl.formatMessage({id: 'gdxfor.frogBandDescription'})}
+                            imageAlt={this.props.intl.formatMessage({id: 'gdxfor.imgAltFrogBand'})}
+                            imageSrc="/images/gdxfor/gdxfor-starter1.png"
+                            title={this.props.intl.formatMessage({id: 'gdxfor.frogBand'})}
+                        />
+                        <ProjectCard
+                            cardUrl="/projects/301385019/editor"
+                            description={this.props.intl.formatMessage({id: 'gdxfor.dayAndNightDescription'})}
+                            imageAlt={this.props.intl.formatMessage({id: 'gdxfor.imgAltDayAndNight'})}
+                            imageSrc="/images/gdxfor/gdxfor-starter2.png"
+                            title={this.props.intl.formatMessage({id: 'gdxfor.dayAndNight'})}
+                        />
+                        <ProjectCard
+                            cardUrl="/projects/301385331/editor"
+                            description={this.props.intl.formatMessage({id: 'gdxfor.underwaterRocketDescription'})}
+                            imageAlt={this.props.intl.formatMessage({id: 'gdxfor.imgAltUnderwaterRocket'})}
+                            imageSrc="/images/gdxfor/gdxfor-starter3.png"
+                            title={this.props.intl.formatMessage({id: 'gdxfor.underwaterRocket'})}
+                        />
+                    </Steps>
+                </ExtensionSection>
+                <ExtensionSection className="faq">
+                    <h2><FormattedMessage id="gdxfor.troubleshootingTitle" /></h2>
+                    <h3 className="faq-title"><FormattedMessage id="gdxfor.checkOSVersionTitle" /></h3>
+                    <p>
+                        <FormattedMessage
+                            id="gdxfor.checkOSVersionText"
+                            values={{
+                                winOSVersionLink: (
+                                    <a
+                                        href="https://support.microsoft.com/en-us/help/13443/windows-which-operating-system"
+                                        rel="noopener noreferrer"
+                                        target="_blank"
+                                    >
+                                        <FormattedMessage id="gdxfor.winOSVersionLinkText" />
+                                    </a>
+                                ),
+                                macOSVersionLink: (
+                                    <a
+                                        href="https://support.apple.com/en-us/HT201260"
+                                        rel="noopener noreferrer"
+                                        target="_blank"
+                                    >
+                                        <FormattedMessage id="gdxfor.macOSVersionLinkText" />
+                                    </a>
+                                )
+                            }}
+                        />
+                    </p>
+                    <h3 className="faq-title"><FormattedMessage id="gdxfor.closeScratchCopiesTitle" /></h3>
+                    <p>
+                        <FormattedMessage id="gdxfor.closeScratchCopiesText" />
+                    </p>
+                    <h3 className="faq-title"><FormattedMessage id="gdxfor.otherComputerConnectedTitle" /></h3>
+                    <p>
+                        <FormattedMessage id="gdxfor.otherComputerConnectedText" />
+                    </p>
+                </ExtensionSection>
+            </div>
+        );
+    }
+}
+
+GdxFor.propTypes = {
+    intl: intlShape.isRequired
+};
+
+const WrappedGdxFor = injectIntl(GdxFor);
+
+render(<Page><WrappedGdxFor /></Page>, document.getElementById('app'));

src/views/gdxfor/gdxfor.scss

@@ -0,0 +1,9 @@
+@import "../../colors";
+@import "../../frameless";
+
+.gdxfor {
+    .extension-header {
+        background-color: $ui-blue;
+        background-image: url("/images/gdxfor/gdxfor-pattern.svg");
+    }
+}

src/views/gdxfor/l10n.json

@@ -0,0 +1,35 @@
+{
+    "gdxfor.headerText": "The {gdxforLink} sensor is a powerful scientific tool that unlocks new ways to connect the physical world to your Scratch projects. Measure force as you push and pull, and interact by shaking, spinning, free falling and more.",
+    "gdxfor.gettingStarted": "Getting Started",
+    "gdxfor.connectingGdxfor": "Connecting Force & Acceleration sensor to Scratch",
+    "gdxfor.powerGdxfor": "Turn on your sensor by pressing the power button.",
+    "gdxfor.useScratch3": "Use the {scratch3Link} editor.",
+    "gdxfor.addExtension": "Add the GoDirect Force & Acceleration extension.",
+    "gdxfor.thingsToTry": "Things to Try",
+    "gdxfor.pushToMakeASound": "Push to make a sound",
+    "gdxfor.connectForcePushedToPlaySound": "Connect the {whenForceSensorPushed} block to a {startSound} block.",
+    "gdxfor.whenForceSensorPushed": "“when force sensor pushed”",
+    "gdxfor.startSound": "“start sound”",
+    "gdxfor.pushOnForceSensor": "Push on the force sensor.",
+    "gdxfor.starterProjects": "Starter Projects",
+    "gdxfor.troubleshootingTitle": "Troubleshooting",
+    "gdxfor.checkOSVersionTitle": "Make sure your operating system is compatible with Scratch Link",
+    "gdxfor.checkOSVersionText": "The minimum operating system versions are listed at the top of this page. See instructions for checking your version of {winOSVersionLink} or {macOSVersionLink}.",
+    "gdxfor.winOSVersionLinkText": "Windows",
+    "gdxfor.macOSVersionLinkText": "Mac OS",
+    "gdxfor.closeScratchCopiesTitle": "Close other copies of Scratch",
+    "gdxfor.closeScratchCopiesText": "Only one copy of Scratch can connect with the Force and Acceleration sensor at a time. If you have Scratch open in other browser tabs, close it and try again.",
+    "gdxfor.otherComputerConnectedTitle": "Make sure no other computer is connected to your sensor",
+    "gdxfor.otherComputerConnectedText": "Only one computer can be connected to a Force and Acceleration sensor at a time. If you have another computer connected to your sensor, disconnect the sensor or close Scratch on that computer and try again.",
+    "gdxfor.imgAltGdxforIllustration": "Illustration of the Vernier GoDirect Force and Acceleration sensor.",
+    "gdxfor.imgAltPushForce": "A hand pushing the force sensor on the The Vernier GoDirect Force and Acceleration sensor.",
+    "gdxfor.frogBand": "Frog Band",
+    "gdxfor.frogBandDescription": "Shake, push and toss the sensor to make music.",
+    "gdxfor.imgAltFrogBand": "A Scratch project with a frog and musical instruments",
+    "gdxfor.dayAndNight": "Day and Night",
+    "gdxfor.dayAndNightDescription": "Turn the sensor face down to change day into night.",
+    "gdxfor.imgAltDayAndNight": "A Scratch project with an elf in a cloak",
+    "gdxfor.underwaterRocket": "Underwater Rocket",
+    "gdxfor.underwaterRocketDescription": "Spin and push the sensor to steer the ship.",
+    "gdxfor.imgAltUnderwaterRocket": "A Scratch project with an underwater rocket ship"
+}

static/images/gdxfor/gdxfor-connect-1.svg

@@ -0,0 +1 @@
+<svg width="106" height="166" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M84.8 63.2l-3.4 24.4a5 5 0 0 1-5.7 4.3 5 5 0 0 1-4.3-4.3L68 63.2h-7.6a2.4 2.4 0 0 1-1.7-4.2l16-16.3c1-1 2.6-1 3.5 0L94.3 59c1.5 1.5.4 4.2-1.7 4.2h-7.8z" id="b"/><filter x="-9.1%" y="-6.7%" width="118.2%" height="113.5%" filterUnits="objectBoundingBox" id="a"><feMorphology radius="1.4" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"/><feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/><feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" in="shadowOffsetOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><g transform="translate(3 2)"><g fill="#414757" fill-rule="nonzero" stroke="#414757" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"><path d="M52.5 0v3.7h-15V0h5.6v1.9H47V0zM43.1 3.7h3.8v7.5h-3.8z"/><path d="M43.1 3.7h-1.9l1 1-1 1 1 .9-1 .9h2z"/><path d="M43.1 7.5h-1.9l1 1-1 .9 1 .9-1 1h2zM46.9 2.8h1.9l-1 1 1 .9-1 1 1 .9h-2z"/><path d="M46.9 6.6h1.9l-1 .9 1 1-1 .9 1 .9-1 1h-1z"/><path d="M43.1 3.7h3.8v7.5h-3.8z"/><path d="M43.1 3.7h-1.9l1 1-1 1 1 .9-1 .9h2z"/><path d="M43.1 7.5h-1.9l1 1-1 .9 1 .9-1 1h2zM46.9 2.8h1.9l-1 1 1 .9-1 1 1 .9h-2z"/><path d="M46.9 6.6h1.9l-1 .9 1 1-1 .9 1 .9-1 1h-1z"/></g><g fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"><path d="M45 161a9.4 9.4 0 0 1-9.4-9.4 1.9 1.9 0 0 1 3.8 0 5.6 5.6 0 0 0 11.2 0v-.6c0-1.5-.6-3-1.6-4l-3.1-3a9.3 9.3 0 0 1-2.8-6.7V133a1.9 1.9 0 0 1 3.8 0v4.4c0 1.5.6 3 1.6 4l3.1 3a9.3 9.3 0 0 1 2.8 6.7v.6c0 5.2-4.2 9.4-9.4 9.4zM39.4 116h11.3v10.4H39.4z" stroke="#7C87A5" fill="#E6E7E8"/><path stroke="#231F20" fill="#231F20" opacity=".1" d="M39.4 116h2.8v10.4h-2.8zM47.8 116h2.8v10.4h-2.8z"/><path d="M52.5 132v1.9c0 .5-.4.9-1 .9h-13a1 1 0 0 1-1-1V132c0-.5.4-1 1-1h1.3c.8 0 1.5-.6 1.5-1.3 0-.8-.7-1.5-1.5-1.5h-.4v-1.8h11.2v1.8h-.4c-.8 0-1.5.7-1.5 1.5 0 .7.7 1.4 1.5 1.4h1.4c.5 0 .9.4.9.9z" stroke="#7C87A5" fill="#8592AF"/><path d="M39.8 131c.8 0 1.5-.6 1.5-1.3 0-.8-.7-1.5-1.5-1.5h-.4 11.2-.4c-.8 0-1.5.7-1.5 1.5 0 .7.7 1.4 1.5 1.4H39.8z" stroke="#7C87A5" fill="#7C87A5"/></g><path d="M88.1 11.2H2c-1 0-1.9.9-1.9 1.9v104.8c0 1 .8 2 1.9 2H88c1 0 1.9-1 1.9-2V13.1c0-1-.8-1.9-1.9-1.9zM50 49a5.2 5.2 0 0 1-9.8 0l-2.8-8.3a8.1 8.1 0 1 1 15.4 0L49.9 49z" stroke="#7C87A5" stroke-width="1.3" fill="#8592AF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.5 18.7v93.6h75V18.7h-75zM49.9 49a5.2 5.2 0 0 1-9.8 0l-2.8-8.3a8.1 8.1 0 1 1 15.4 0L49.9 49z" stroke="#7C87A5" stroke-width="1.3" fill="#8592AF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.3 22.5v86h67.5v-86H11.3zM45 30c5.5 0 9.4 5.4 7.7 10.6L49.9 49a5.2 5.2 0 0 1-9.8 0l-2.8-8.3A8.1 8.1 0 0 1 45 30z" stroke="#7C87A5" stroke-width="1.3" fill="#5CB1D6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"/><path stroke="#7C87A5" stroke-width="1.3" fill="#8592AF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" d="M78.8 108.6H11.3V86l67.5-15z"/><path d="M7.5 18.7L.9 12.2M82.5 18.7l6.6-6.5M1 118.9l6.5-6.6M89 118.9l-6.5-6.6M18.8 114.2v1.9M71.3 114.2v1.9M18.8 15v1.8M71.3 15v1.8M86.3 33.7h-2M86.3 101h-2M5.6 33.7H3.8M5.6 101H3.8" stroke="#7C87A5" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><ellipse fill="#FFBF00" fill-rule="nonzero" cx="45" cy="65.5" rx="5.6" ry="5.6"/><ellipse stroke="#7C87A5" stroke-width="1.3" fill="#8592AF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="31.9" cy="65.5" rx="1.9" ry="1.9"/><ellipse stroke="#7C87A5" stroke-width="1.3" fill="#8592AF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="58.1" cy="65.5" rx="1.9" ry="1.9"/><path d="M58.1 93.6H32c-1 0-1.9-.8-1.9-1.9 0-1 .8-1.8 1.9-1.8H58c1 0 1.9.8 1.9 1.8s-.8 1.9-1.9 1.9zM65.6 101H24.4c-1 0-1.9-.7-1.9-1.8 0-1 .8-1.9 1.9-1.9h41.2c1 0 1.9.9 1.9 2 0 1-.8 1.8-1.9 1.8z" fill="#FFBF00" fill-rule="nonzero"/><path d="M1.6 118.2l5.9-5.9h75V18.7l5.9-5.9a1 1 0 0 1 1.6.7v104.4c0 1-.8 2-1.9 2H2.3a1 1 0 0 1-.7-1.7z" stroke="#231F20" stroke-width="1.3" fill="#231F20" fill-rule="nonzero" opacity=".1" stroke-linecap="round" stroke-linejoin="round"/></g><g fill-rule="nonzero" transform="rotate(-90 76.5 67)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use stroke="#F35" stroke-width=".8" fill="#FF6680" xlink:href="#b"/></g></g></svg>

static/images/gdxfor/gdxfor-pattern.svg

@@ -0,0 +1 @@
+<svg width="1300" height="600" xmlns="http://www.w3.org/2000/svg"><path d="M819.2 24.9c-15.4 50.6-171.8 78.3-174.6 122.5-2.8 44.1 158.8-53.8 170.4-27.9 11.5 26-167 157-261.4 195.4-57 23-101.8-9.6-36.3-60 43.9-33.8 23.2-62.9-17.1-43-40.4 19.8-61.8-31.4-6-75.1 55.6-43.8 342.5-169.2 325-112zM395.1 155.3c-43.3 64.5-126 24.3-73.6-43.5C368 52 517-10.2 524.2 23.2c5.4 24.5-78.2 56-129.1 132zM39 24.9c70.5-68.3 130-135 172-132.9 43.5 2.2 4.6 85.5-69.3 149.4-52.4 45.3-1.3 68.3 49 41.3 60.7-32.7 108-10.8 29.7 60.8C142 215.2 23 268-41.7 254.4c-65-13.5 91.1-54.8 97.3-109.5 6-53.8-88.6 54.7-137.9 18.6-47.9-35 56-75 121.5-138.6zm789.7 203.2c-8-38.9 89.1-161.5 208.2-193.8 119.7-32.5 232.2-45.1 237-17 4.8 27.9-71 49-165.4 94.2-45.6 21.9 2.7 40.3 32.3 28.5 98.2-39 90.6 20.6 7.7 62.7a726 726 0 0 1-152 58c-47.1 11.5-57-18.9-30-36 52.4-33.5 27.2-64.5-19.8-38.5-29.7 16.5-105.2 104.9-118 42zm-43.9 33.5c27.9-11.2 35.1 9.3 35.1 25.8s-27.8 22.7-43.3 13.4c-15.5-9.3-11.1-31.5 8.2-39.2zM1.5 332c10.7-24.6 129.7-28.5 218.2-107.9 31.8-28.6 70.9 6.3 61.6 33.1-9.3 26.8-37.6 33.8-81.9 51-44.3 17.3 12 40.2 85.2 5.7 41.8-19.7 86.6 13.6 36 47.8-42.1 28.6-139.3 36.8-136.7 61.4 1.5 13.6 72-19.2 84.9 10.2 10.7 24.4-14.6 52.5-85.2 58.2-72 5.8-127.9-9-128.7-44.3-1-40 83.4-50.8 45.5-63.2-38.1-12.4-117.6-8.7-98.9-52zm427.2-85.6c14.2 9.9 14.7 22.5-.4 40-19.6 22.6-52.3 21.6-61.9 13.3-9.6-8.3 12.1-29.8 20.4-42.2 8.3-12.3 23.6-23.8 42-11.1zm-.8 136.2c84.2-20.1 131.7 13.6 112.8 36.7-20.4 25-69.2 24.9-73 73.7-7.2 91.3-97 107.4-58.7 43.7 13.4-22.3-6.3-36.5-17.8-8-7 17.3-40.1 41-57.6 49.7-79.3 39.6-142.6-18-85.8-34 36.9-10.4 70-35.5 91.3-93 11.2-30.5 51.7-60 88.8-68.8zm-251.2 185c32 40.9-66.7 43.1-103.1 55.4-36.5 12.3 38.6 18.5 104.7 17.8 66-.7 56 50-19 75C43.9 753.8-59 714.2 29.4 688.8c33-9.4 9.6-36.7-27-32.8-69.1 7.5-120.4-26.7-108.7-53.3 13-30 45.6-9.8 78.4-7.6 32.9 2.3 4.4-30-38.1-52.1-73-38-12-102.9 50.8-44.3 89.4 83.4 168 38.2 192 68.8zm331.5 99c-47.2 96.3-144 86.9-130.4 54 13.5-32.9-42.4-6.1-68.3-12-25.9-6-41.2-51.1 55-59.8 118.4-10.7 121.2-127.5 160.8-103.1 27.2 16.7.4 85.2-17.1 121zm707.4-435.9c79-13.5 96.5 13.7 63.6 35.4-20.4 13.5-99.8 56.6-41.8 60.8 58 4.2 14.8 59.4-53.4 110.8-68.1 51.3-217 79-210.4 35.7 6.5-43.3 181.7-64 150.2-109.7-13.7-19.9-80.8 62.4-110.5 15-29.8-47.3 152.8-139.5 202.3-148zM701.4 312c25.2-21.4 76.8 9.5 30.4 51.8-10.7 9.8-38.3 19.1-21.8 28.8 49.8 29.2 201.6-122.5 226.7-72.7 12 24-48.5 77.4-114.6 110.9-48.8 24.6-31 69.8 41.5 25.3 72.4-44.5 85.1 8 45 42.4-40 34.5-296.4 153.8-313.8 90-13.6-49.6 129.6-40.5 111.8-72.5-13.1-23.6-112.7 38.9-148-1.7-34-39.2 93.6-65.2 85.4-88.7-6.4-18.6-67.5 7.6-68.7-37.9-1-35.2 65-24 126.1-75.7zm354.3 317c15.3-80.6 157.4-155.8 211.9-176 85.7-31.8 175.3-21.2 124.7 4.8-50.6 26-183.5 112.2-115 118.1 33.6 3 71.7 27.9 0 87.2-45.6 37.6-204.4 89.6-213 56.3-8.7-33.2 182-91 122.8-96.8-59.2-5.8-138.6 44.1-131.4 6.4zm-209.2-29c46.3-23 89.1-51 138.4-61.6 64.2-13.8.9 73.1-60.8 101.3-27.7 12.6 5.4 29.5 32 16.6 72.2-35.1 103.7-8.2 29 41.5-18.5 12.3-75.8 41.5-145.4 50.4-70.2 9-68.4-16.8-46.7-26.5 31.3-14 52.7-44.2-31-18.7-149.9 45.7-238.6 38-204.5 0 31.8-35.5 139.2-28 289-103z" fill="#FFF" fill-rule="evenodd" opacity=".1"/></svg>

static/images/gdxfor/gdxfor.svg

@@ -0,0 +1 @@
+<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g transform="translate(8 .5)" fill="none" fill-rule="evenodd"><path d="M12 39a3 3 0 0 1-3-3c0-.6.4-1 1-1 .5 0 1 .4 1 1a1 1 0 1 0 2 0v-.2a1 1 0 0 0-.3-.7l-.8-.8a3 3 0 0 1-1-2.1V30c0-.6.5-1 1-1 .6 0 1 .4 1 1v2.2l.4.7.8.8c.6.6.9 1.3.9 2.1v.2a3 3 0 0 1-3 3z" stroke-opacity=".1" stroke="#000" fill="#E6E7E8"/><path d="M23.7.3A1 1 0 0 0 23 0H1a1 1 0 0 0-.7.3A1 1 0 0 0 0 1v26c0 .3.1.5.3.7.2.2.4.3.7.3h22c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7V1a1 1 0 0 0-.3-.7zM12 4c2 0 3.3 2 2.6 3.8L13.3 11a1.4 1.4 0 0 1-2.7 0L9.5 7.7l-.2-1C9.2 5.4 10.4 4 12 4z" stroke="#7C87A5" fill="#8592AF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 2v24h20V2H2zm10 2c2 0 3.3 2 2.6 3.8L13.3 11a1.4 1.4 0 0 1-2.7 0L9.5 7.7l-.2-1C9.2 5.4 10.4 4 12 4z" stroke="#7C87A5" fill="#5CB1D6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"/><path stroke="#7C87A5" fill="#8592AF" stroke-linecap="round" stroke-linejoin="round" d="M22 26H2v-6l20-4z"/><path d="M.3 27.7L2 26M.3.3L2 2M22 2L23.7.3M23.7 27.7L22 26" stroke="#7C87A5" stroke-linecap="round" stroke-linejoin="round"/><circle fill="#FFBF00" cx="12" cy="14.8" r="1.2"/><path stroke="#7C87A5" fill="#E6E7E8" stroke-linecap="round" stroke-linejoin="round" d="M10 28h4v4h-4z"/><path d="M15.5 22h-7a.5.5 0 0 1-.5-.5c0-.3.2-.5.5-.5h7c.3 0 .5.2.5.5s-.2.5-.5.5zM17.5 24h-11a.5.5 0 0 1-.5-.5c0-.3.2-.5.5-.5h11c.3 0 .5.2.5.5s-.2.5-.5.5z" fill="#FFBF00"/></g></svg>

static/svgs/project/extension-gdxfor.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
+    <title>vernier-force-block-icon</title>
+    <desc>Created with Sketch.</desc>
+    <g id="vernier-force-block-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Extensions/Hardware/Vernier-Force-Block">
+            <g id="vernier-force" transform="translate(8.000000, 0.500000)">
+                <path d="M11.98,39 C10.3238576,39 8.98,37.6561424 8.98,36 C8.98,35.4438576 9.42385763,35 9.98,35 C10.5361424,35 10.98,35.4438576 10.98,36 C10.98,36.5538576 11.4261424,37 11.98,37 C12.5338576,37 12.98,36.5538576 12.98,36 L12.98,35.83 C12.98,35.5708771 12.8714563,35.308563 12.6864466,35.1235534 L11.8564466,34.2935534 C11.2923853,33.729492 10.98,32.9721944 10.98,32.17 L10.98,30 C10.98,29.4438576 11.4238576,29 11.98,29 C12.5361424,29 12.98,29.4438576 12.98,30 L12.98,32.17 C12.98,32.4291229 13.0885437,32.691437 13.2735534,32.8764466 L14.1035534,33.7064466 C14.6676147,34.270508 14.98,35.0278056 14.98,35.83 L14.98,36 C14.98,37.6561424 13.6361424,39 11.98,39 Z" id="Path" stroke-opacity="0.15" stroke="#000000" fill="#E6E7E8"></path>
+                <path d="M23.71,0.29 C23.52,0.11 23.28,0 23,0 L1,0 C0.72,0 0.48,0.11 0.29,0.29 C0.11,0.48 0,0.72 0,1 L0,27 C0,27.28 0.11,27.52 0.29,27.71 C0.48,27.89 0.72,28 1,28 L23,28 C23.28,28 23.52,27.89 23.71,27.71 C23.89,27.52 24,27.28 24,27 L24,1 C24,0.72 23.89,0.48 23.71,0.29 Z M12,4 C13.93,4 15.27,5.93 14.59,7.75 L13.35,11.06 C13.14,11.63 12.6,12 12,12 C11.4,12 10.86,11.63 10.65,11.06 L9.4,7.74 C9.28,7.41 9.22,7.09 9.22,6.76 C9.22,5.3 10.41,4 12,4 Z" id="Shape" stroke="#7C87A5" fill="#8592AF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M2,2 L2,26 L22,26 L22,2 L2,2 Z M12,4 C13.93,4 15.27,5.93 14.59,7.75 L13.35,11.06 C13.14,11.63 12.6,12 12,12 C11.4,12 10.86,11.63 10.65,11.06 L9.4,7.74 C9.28,7.41 9.22,7.09 9.22,6.76 C9.22,5.3 10.41,4 12,4 Z" id="Shape" stroke="#7C87A5" fill="#5CB1D6" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path>
+                <polygon id="Path" stroke="#7C87A5" fill="#8592AF" stroke-linecap="round" stroke-linejoin="round" points="22 26 2 26 2 20 22 16"></polygon>
+                <path d="M0.29,27.7 L2,26" id="Path" stroke="#7C87A5" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M0.29,0.29 L2,2" id="Path" stroke="#7C87A5" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M22,2 L23.71,0.29" id="Path" stroke="#7C87A5" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M23.71,27.7 L22,26" id="Path" stroke="#7C87A5" stroke-linecap="round" stroke-linejoin="round"></path>
+                <circle id="Oval" fill="#FFBF00" cx="12" cy="14.82" r="1.18"></circle>
+                <rect id="Rectangle" stroke="#7C87A5" fill="#E6E7E8" stroke-linecap="round" stroke-linejoin="round" x="10" y="28" width="4" height="4"></rect>
+                <path d="M15.49,21.99 L8.48,21.99 C8.21,21.99 7.98,21.77 7.98,21.49 L7.98,21.49 C7.98,21.22 8.2,20.99 8.48,20.99 L15.49,20.99 C15.76,20.99 15.99,21.21 15.99,21.49 L15.99,21.49 C15.98,21.77 15.76,21.99 15.49,21.99 Z" id="Path" fill="#FFBF00"></path>
+                <path d="M17.49,24 L6.48,24 C6.21,24 5.98,23.78 5.98,23.5 L5.98,23.5 C5.98,23.23 6.2,23 6.48,23 L17.49,23 C17.76,23 17.99,23.22 17.99,23.5 L17.99,23.5 C17.98,23.77 17.76,24 17.49,24 Z" id="Path" fill="#FFBF00"></path>
+            </g>
+        </g>
+    </g>
+</svg>