mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 01:25:52 -05:00
Add Boost landing page
This commit is contained in:
Eric Rosenbaum
parent
a6a0f5138b
commit
a5a725322f
3 changed files with 299 additions and 0 deletions
256
src/views/boost/boost.jsx
Normal file
256
src/views/boost/boost.jsx
Normal file
|
|
@ -0,0 +1,256 @@
|
|||
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('./boost.scss');
|
||||
|
||||
class Boost extends ExtensionLanding {
|
||||
render () {
|
||||
return (
|
||||
<div className="extension-landing boost">
|
||||
<ExtensionHeader
|
||||
renderCopy={
|
||||
<FlexRow className="extension-copy">
|
||||
<h1><img
|
||||
alt=""
|
||||
src="/images/boost/boost.svg"
|
||||
/>LEGO BOOST</h1>
|
||||
<FormattedMessage
|
||||
id="boost.headerText"
|
||||
values={{
|
||||
boostLink: (
|
||||
<a
|
||||
href="https://www.lego.com/en-us/themes/boost"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
LEGO BOOST
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</FlexRow>
|
||||
}
|
||||
renderImage={<img
|
||||
alt={this.props.intl.formatMessage({id: 'boost.imgAltBoostIllustration'})}
|
||||
src="/images/boost/boost-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="boost.gettingStarted" /></h2>
|
||||
<FlexRow className="column getting-started-section">
|
||||
<h3><FormattedMessage id="boost.connectingBoost" /></h3>
|
||||
<Steps>
|
||||
<Step number={1}>
|
||||
<div className="step-image">
|
||||
<img
|
||||
alt=""
|
||||
className="screenshot"
|
||||
src="/images/boost/boost-connect-1.png"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="boost.useScratch3"
|
||||
values={{
|
||||
scratch3Link: (
|
||||
<a
|
||||
href="/projects/editor/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Scratch
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</Step>
|
||||
<Step number={2}>
|
||||
<div className="step-image">
|
||||
<img
|
||||
alt={this.props.intl.formatMessage({id: 'extensionInstallation.addExtension'})}
|
||||
className="screenshot"
|
||||
src="/images/boost/boost-connect-2.png"
|
||||
/>
|
||||
</div>
|
||||
<p><FormattedMessage id="boost.addExtension" /></p>
|
||||
</Step>
|
||||
</Steps>
|
||||
</FlexRow>
|
||||
</ExtensionSection>
|
||||
<ExtensionSection className="blue things-to-try">
|
||||
<h2><FormattedMessage id="boost.thingsToTry" /></h2>
|
||||
<h3><FormattedMessage id="boost.makeAMotorMove" /></h3>
|
||||
<Steps>
|
||||
<Step
|
||||
compact
|
||||
number={1}
|
||||
>
|
||||
<span className="step-description">
|
||||
<FormattedMessage
|
||||
id="boost.findTurnMotorOnForSeconds"
|
||||
values={{
|
||||
turnMotorOnForSeconds: (
|
||||
<strong>
|
||||
<FormattedMessage id="boost.turnMotorOnForSeconds" />
|
||||
</strong>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
<div className="step-image">
|
||||
<img
|
||||
alt=""
|
||||
src="/images/boost/boost-turn-motor-on-block.png"
|
||||
/>
|
||||
</div>
|
||||
</Step>
|
||||
<Step
|
||||
compact
|
||||
number={2}
|
||||
>
|
||||
<span className="step-description">
|
||||
<FormattedMessage id="boost.connectALegoBeam" />
|
||||
</span>
|
||||
<div className="step-image">
|
||||
<img
|
||||
alt={this.props.intl.formatMessage({id: 'boost.imgAltConnectALegoBeam'})}
|
||||
src="/images/boost/boost-connect-lego-beam.svg"
|
||||
/>
|
||||
</div>
|
||||
</Step>
|
||||
</Steps>
|
||||
<hr />
|
||||
<h3><FormattedMessage id="boost.starterProjects" /></h3>
|
||||
<Steps>
|
||||
<ProjectCard
|
||||
cardUrl="/projects/301384031/editor"
|
||||
description={this.props.intl.formatMessage({id: 'boost.frogBandDescription'})}
|
||||
imageAlt={this.props.intl.formatMessage({id: 'boost.imgAltFrogBand'})}
|
||||
imageSrc="/images/boost/boost-starter1.png"
|
||||
title={this.props.intl.formatMessage({id: 'boost.frogBand'})}
|
||||
/>
|
||||
<ProjectCard
|
||||
cardUrl="/projects/301385019/editor"
|
||||
description={this.props.intl.formatMessage({id: 'boost.dayAndNightDescription'})}
|
||||
imageAlt={this.props.intl.formatMessage({id: 'boost.imgAltDayAndNight'})}
|
||||
imageSrc="/images/boost/boost-starter2.png"
|
||||
title={this.props.intl.formatMessage({id: 'boost.dayAndNight'})}
|
||||
/>
|
||||
<ProjectCard
|
||||
cardUrl="/projects/301385331/editor"
|
||||
description={this.props.intl.formatMessage({id: 'boost.underwaterRocketDescription'})}
|
||||
imageAlt={this.props.intl.formatMessage({id: 'boost.imgAltUnderwaterRocket'})}
|
||||
imageSrc="/images/boost/boost-starter3.png"
|
||||
title={this.props.intl.formatMessage({id: 'boost.underwaterRocket'})}
|
||||
/>
|
||||
</Steps>
|
||||
</ExtensionSection>
|
||||
<ExtensionSection className="faq">
|
||||
<h2><FormattedMessage id="boost.troubleshootingTitle" /></h2>
|
||||
<h3 className="faq-title"><FormattedMessage id="boost.checkOSVersionTitle" /></h3>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="boost.checkOSVersionText"
|
||||
values={{
|
||||
winOSVersionLink: (
|
||||
<a
|
||||
href="https://support.microsoft.com/en-us/help/13443/windows-which-operating-system"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FormattedMessage id="boost.winOSVersionLinkText" />
|
||||
</a>
|
||||
),
|
||||
macOSVersionLink: (
|
||||
<a
|
||||
href="https://support.apple.com/en-us/HT201260"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FormattedMessage id="boost.macOSVersionLinkText" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<h3 className="faq-title"><FormattedMessage id="boost.closeScratchCopiesTitle" /></h3>
|
||||
<p>
|
||||
<FormattedMessage id="boost.closeScratchCopiesText" />
|
||||
</p>
|
||||
<h3 className="faq-title"><FormattedMessage id="boost.otherComputerConnectedTitle" /></h3>
|
||||
<p>
|
||||
<FormattedMessage id="boost.otherComputerConnectedText" />
|
||||
</p>
|
||||
</ExtensionSection>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Boost.propTypes = {
|
||||
intl: intlShape.isRequired
|
||||
};
|
||||
|
||||
const WrappedBoost = injectIntl(Boost);
|
||||
|
||||
render(<Page><WrappedBoost /></Page>, document.getElementById('app'));
|
||||
9
src/views/boost/boost.scss
Normal file
9
src/views/boost/boost.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@import "../../colors";
|
||||
@import "../../frameless";
|
||||
|
||||
.boost {
|
||||
.extension-header {
|
||||
background-color: $ui-blue;
|
||||
background-image: url("/images/boost/boost-pattern.svg");
|
||||
}
|
||||
}
|
||||
34
src/views/boost/l10n.json
Normal file
34
src/views/boost/l10n.json
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"boost.headerText": "The {boostLink} kit brings your LEGO creations to life with powerful motors, a color sensor and more. By combining it with Scratch, you can build your own robotic creatures, tell physical-digital stories, invent new game controllers, or whatever else you can imagine.",
|
||||
"boost.gettingStarted": "Getting Started",
|
||||
"boost.connectingBoost": "Connecting BOOST to Scratch",
|
||||
"boost.powerBoost": "Turn on your sensor by pressing the power button.",
|
||||
"boost.useScratch3": "Use the {scratch3Link} editor.",
|
||||
"boost.addExtension": "Add the BOOST extension.",
|
||||
"boost.thingsToTry": "Things to Try",
|
||||
"boost.makeAMotorMove": "Make a motor move",
|
||||
"boost.findTurnMotorOnForSeconds": "Find the {turnMotorOnForSeconds} block and click on it.",
|
||||
"boost.turnMotorOnForSeconds": "“turn motor A on for 1 seconds”",
|
||||
"boost.connectALegoBeam": "Connect a LEGO beam with an axle to motor A and click the block again to make it spin.",
|
||||
"boost.starterProjects": "Starter Projects",
|
||||
"boost.troubleshootingTitle": "Troubleshooting",
|
||||
"boost.checkOSVersionTitle": "Make sure your operating system is compatible with Scratch Link",
|
||||
"boost.checkOSVersionText": "The minimum operating system versions are listed at the top of this page. See instructions for checking your version of {winOSVersionLink} or {macOSVersionLink}.",
|
||||
"boost.winOSVersionLinkText": "Windows",
|
||||
"boost.macOSVersionLinkText": "Mac OS",
|
||||
"boost.closeScratchCopiesTitle": "Close other copies of Scratch",
|
||||
"boost.closeScratchCopiesText": "Only one copy of Scratch can connect with a BOOST at a time. If you have Scratch open in other browser tabs, close it and try again.",
|
||||
"boost.otherComputerConnectedTitle": "Make sure no other computer is connected to your sensor",
|
||||
"boost.otherComputerConnectedText": "Only one computer can be connected to a BOOST at a time. If you have another computer connected to your sensor, disconnect the sensor or close Scratch on that computer and try again.",
|
||||
"boost.imgAltBoostIllustration": "Illustration of the LEGO BOOST.",
|
||||
"boost.imgAltConnectALegoBeam": "A LEGO BOOST hub with an axle and a short beam connected to motor A.",
|
||||
"boost.frogBand": "Frog Band",
|
||||
"boost.frogBandDescription": "Shake, push and toss the sensor to make music.",
|
||||
"boost.imgAltFrogBand": "A Scratch project with a frog and musical instruments",
|
||||
"boost.dayAndNight": "Day and Night",
|
||||
"boost.dayAndNightDescription": "Turn the sensor face down to change day into night.",
|
||||
"boost.imgAltDayAndNight": "A Scratch project with an elf in a cloak",
|
||||
"boost.underwaterRocket": "Underwater Rocket",
|
||||
"boost.underwaterRocketDescription": "Spin and push the sensor to steer the ship.",
|
||||
"boost.imgAltUnderwaterRocket": "A Scratch project with an underwater rocket ship"
|
||||
}
|
||||
Loading…
Reference in a new issue