Move the scratch2 download page to /download/scratch2.

This commit is contained in:
picklesrus 2018-12-11 11:26:53 -05:00
parent 77c311ccea
commit 6dde3fa231
5 changed files with 440 additions and 2 deletions

View file

@ -245,6 +245,13 @@
"view": "scratch_1.4/scratch_1.4",
"title": "Scratch 1.4"
},
{
"name": "scratch2",
"pattern": "^/download/scratch2/?$",
"routeAlias": "/download/scratch2",
"view": "download/scratch2/download",
"title": "Scratch 2.0"
},
{
"name": "search",
"pattern": "^/search/:projects/?$",

View file

@ -215,7 +215,10 @@ class Download extends React.Component {
width="150"
/>
<p>
<a className="centered" href="/scratch_1.4">
<a
className="centered"
href="/scratch_1.4"
>
<FormattedMessage id="download.scratch1-4Desktop" />
<img src="images/download/r-arrow.svg" />
</a>
@ -230,7 +233,10 @@ class Download extends React.Component {
width="150"
/>
<p>
<a className="centered" href="/download/scratch2">
<a
className="centered"
href="/download/scratch2"
>
<FormattedMessage id="download.scratch2Desktop" />
<img src="images/download/r-arrow.svg" />
</a>

View file

@ -0,0 +1,265 @@
const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
const React = require('react');
const api = require('../../../lib/api');
const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const SubNavigation = require('../../../components/subnavigation/subnavigation.jsx');
const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
const Page = require('../../../components/page/www/page.jsx');
const render = require('../../../lib/render.jsx');
require('./download.scss');
require('../../../components/forms/button.scss');
class Download extends React.Component {
constructor (props) {
super(props);
this.state = {
swfVersion: ''
};
}
componentDidMount () {
let uri = '/scratchr2/static/sa/version.xml';
if (this.props.intl.locale === 'pt-br') {
uri = '/scratchr2/static/sa/pt-br/version.xml';
}
api({
host: '',
uri: uri,
responseType: 'string'
}, (err, body, res) => {
if (err || res.statusCode >= 400) {
return this.setState({
swfVersion: -1
});
}
const doc = new DOMParser().parseFromString(body, 'text/xml');
return this.setState({
swfVersion: doc.getElementsByTagName('versionNumber')[0].childNodes[0].nodeValue
});
});
}
render () {
let downloadPath = '/scratchr2/static/sa/Scratch-';
let downloadUrls = null;
if (this.props.intl.locale === 'pt-br') {
downloadPath = '/scratchr2/static/sa/pt-br/Scratch-';
}
if (this.state.swfVersion.length > 0 && this.state.swfVersion !== -1) {
downloadUrls = {
mac: `${downloadPath}${this.state.swfVersion}.dmg`,
mac105: `${downloadPath}${this.state.swfVersion}.air`,
windows: `${downloadPath}${this.state.swfVersion}.exe`
};
}
return (
<div className="download">
<TitleBanner className="masthead">
<div className="inner">
<h1 className="title-banner-h1">
<FormattedMessage id="download.title" />
</h1>
<p className="title-banner-p intro">
<FormattedMessage id="download.intro" />
</p>
</div>
<div className="band">
<SubNavigation className="inner">
<a
className="sub-nav-item"
href="#installation"
>
<li>
<FormattedMessage id="download.installation" />
</li>
</a>
<a
className="sub-nav-item"
href="#updates"
>
<li>
<FormattedMessage id="download.updatesTitle" />
</li>
</a>
<a
className="sub-nav-item"
href="#other"
>
<li>
<FormattedMessage id="download.otherVersionsTitle" />
</li>
</a>
<a
className="sub-nav-item"
href="#issues"
>
<li>
<FormattedMessage id="download.knownIssuesTitle" />
</li>
</a>
</SubNavigation>
</div>
</TitleBanner>
<div className="download-content">
<section
className="installation"
id="installation"
>
<div className="inner">
<p className="callout">
<FormattedHTMLMessage id="download.introMac" />
</p>
<FlexRow className="three-col-row">
<div className="installation-column">
<div className="installation-column-number">
<h2 className="installation-column-number-text">{'1'}</h2>
</div>
<h3><FormattedMessage id="download.airTitle" /></h3>
<p><FormattedHTMLMessage id="download.airBody" /></p>
<ul className="installation-downloads">
<li className="installation-downloads-item">
<FormattedMessage id="download.macOSX" /> -
{' '}<a href="http://get.adobe.com/air/">
<FormattedMessage id="download.download" />
</a>
</li>
<li className="installation-downloads-item">
<FormattedMessage id="download.macOlder" /> -
{' '}<a href="http://airdownload.adobe.com/air/mac/download/2.6/AdobeAIR.zip">
<FormattedMessage id="download.download" />
</a>
</li>
<li className="installation-downloads-item">
<FormattedMessage id="download.windows" /> -
{' '}<a href="http://get.adobe.com/air/">
<FormattedMessage id="download.download" />
</a>
</li>
</ul>
</div>
<div className="installation-column">
<div className="installation-column-number">
<h2 className="installation-column-number-text">{'2'}</h2>
</div>
<h3><FormattedMessage id="download.offlineEditorTitle" /></h3>
<p><FormattedMessage id="download.offlineEditorBody" /></p>
{downloadUrls === null ? [] : [
<ul
className="installation-downloads"
key="installation-downloads"
>
<li className="installation-downloads-item">
<FormattedMessage id="download.macOSX" /> -
{' '}<a href={downloadUrls.mac}>
<FormattedMessage id="download.download" />
</a>
</li>
<li className="installation-downloads-item">
<FormattedMessage id="download.macOlder" /> -
{' '}<a href={downloadUrls.mac105}>
<FormattedMessage id="download.download" />
</a>
</li>
<li className="installation-downloads-item">
<FormattedMessage id="download.windows" /> -
{' '}<a href={downloadUrls.windows}>
<FormattedMessage id="download.download" />
</a>
</li>
</ul>
]}
{this.state.swfVersion === -1 ? [
<p key="not-available">
<i><FormattedMessage id="download.notAvailable" /></i>
</p>
] : []}
</div>
<div className="installation-column">
<div className="installation-column-number">
<h2 className="installation-column-number-text">{'3'}</h2>
</div>
<h3><FormattedMessage id="download.supportMaterialsTitle" /></h3>
<p><FormattedMessage id="download.supportMaterialsBody" /></p>
<ul className="installation-downloads">
<li className="installation-downloads-item">
<FormattedMessage id="download.starterProjects" /> -
{' '}<a href="https://scratch.mit.edu/scratchr2/static/sa/Scratch2StarterProjects.zip">
<FormattedMessage id="download.download" />
</a>
</li>
<li className="installation-downloads-item">
<FormattedMessage id="download.gettingStarted" /> -
{' '}<a href="https://cdn.scratch.mit.edu/scratchr2/static/__709da8e5f3d72129538a4ccdbcbf5f2a__/pdfs/help/Getting-Started-Guide-Scratch2.pdf">
<FormattedMessage id="download.download" />
</a>
</li>
<li className="installation-downloads-item">
<FormattedMessage id="download.scratchCards" /> -
{' '}<a href="https://cdn.scratch.mit.edu/scratchr2/static/__709da8e5f3d72129538a4ccdbcbf5f2a__/pdfs/help/Scratch2Cards.pdf">
<FormattedMessage id="download.download" />
</a>
</li>
</ul>
</div>
</FlexRow>
</div>
</section>
<div className="inner">
<section id="updates">
<span className="nav-spacer" />
<h2><FormattedMessage id="download.updatesTitle" /></h2>
<p><FormattedMessage id="download.updatesBody" /></p>
{this.state.swfVersion === -1 ? [] : [
<p key="current-version">
<FormattedMessage
id="download.currentVersion"
values={{
version: this.state.swfVersion
}}
/>
</p>
]}
</section>
<section id="other">
<span className="nav-spacer" />
<h2><FormattedMessage id="download.otherVersionsTitle" /></h2>
<p><FormattedHTMLMessage id="download.otherVersionsOlder" /></p>
<p><FormattedHTMLMessage id="download.otherVersionsAdmin" /></p>
</section>
<section id="issues">
<span className="nav-spacer" />
<h2><FormattedMessage id="download.knownIssuesTitle" /></h2>
<p><FormattedMessage id="download.knownIssuesOne" /></p>
<p><FormattedMessage id="download.knownIssuesTwo" /></p>
<p><FormattedHTMLMessage id="download.knownIssuesThree" /></p>
<p><FormattedMessage id="download.knownIssuesFour" /></p>
<a
className="button mod-link"
href="https://scratch.mit.edu/discuss/3/"
>
<FormattedMessage id="download.reportBugs" />
</a>
</section>
</div>
</div>
</div>
);
}
}
Download.propTypes = {
intl: intlShape
};
const WrappedDownload = injectIntl(Download);
render(<Page><WrappedDownload /></Page>, document.getElementById('app'));

View file

@ -0,0 +1,128 @@
@import "../../../colors";
@import "../../../frameless";
#view {
padding: 0;
}
.download {
.title-banner {
&.masthead {
margin-bottom: 0;
background-color: $ui-blue-dark;
padding-bottom: 0;
h1 {
margin: 0 0 2rem 0;
text-align: left;
color: $ui-white;
}
p {
margin: 0;
text-align: left;
color: $ui-white;
a {
border-bottom: 1px solid $ui-white;
color: $ui-white;
}
}
.band {
margin-top: 2rem;
background-color: $ui-white-15percent;
padding: 1rem 0;
}
.sub-nav {
text-align: left;
justify-content: flex-start;
li {
margin: 0 .5rem 0 0;
}
}
}
}
.sub-nav-item {
margin: .5rem;
}
.callout {
text-align: center;
}
.download-content {
padding-bottom: 2rem;
}
.three-col-row {
align-items: flex-start;
}
.installation {
background-color: $ui-gray;
padding: 2rem;
}
.installation-column {
max-width: $cols4;
text-align: center;
p {
margin-right: .5rem;
margin-left: .5rem;
}
}
.installation-column-number {
margin: 2rem auto;
border: 2px solid $active-gray;
border-radius: 2rem;
background-color: $ui-blue;
width: 3.75rem;
height: 3.75rem;
}
.installation-column-number-text {
text-align: center;
line-height: 1.8em;
color: $type-white;
}
.installation-downloads {
padding-left: 0;
list-style: none;
}
.installation-downloads-item {
margin: .25rem;
padding: 0;
text-align: center;
}
section {
margin-bottom: 2rem;
}
.mod-link {
color: $ui-white;
}
@media #{$small} {
.inner {
.installation-column {
max-width: 100%;
}
}
}
@media #{$intermediate-and-smaller} {
.three-col-row {
flex-direction: column;
align-items: center;
}
}
}

View file

@ -0,0 +1,32 @@
{
"download.title": "Scratch 2.0 Offline Editor",
"download.intro": "You can install the Scratch 2.0 editor to work on projects without an internet connection. This version will work on Windows and MacOS.",
"download.introMac": "<b>Note for Mac Users:</b> the latest version of Scratch 2.0 Offline requires Adobe AIR 20. To upgrade to Adobe AIR 20 manually, go <a href=\"https://get.adobe.com/air/\">here</a>.",
"download.installation": "Installation",
"download.airTitle": "Adobe AIR",
"download.airBody": "If you don't already have it, download and install the latest <a href=\"http://get.adobe.com/air/\">Adobe AIR</a>",
"download.macOSX": "Mac OS X",
"download.macOlder": "Mac OS 10.5 & Older",
"download.windows": "Windows",
"download.download": "Download",
"download.offlineEditorTitle": "Scratch Offline Editor",
"download.offlineEditorBody": "Next download and install the Scratch 2.0 Offline Editor",
"download.supportMaterialsTitle": "Support Materials",
"download.supportMaterialsBody": "Need some help getting started? Here are some helpful resources.",
"download.starterProjects": "Starter Projects",
"download.gettingStarted": "Getting Started Guide",
"download.scratchCards": "Scratch Cards",
"download.updatesTitle": "Updates",
"download.updatesBody": "The Offline Editor can update itself (with user permission). It will check for updates at startup or you can use the \"Check for updates\" command in the file menu.",
"download.currentVersion": "The current version is {version}.",
"download.otherVersionsTitle": "Other Versions of Scratch",
"download.otherVersionsOlder": "If you have an older computer, or cannot install the Scratch 2.0 offline editor, you can try installing <a href=\"http://scratch.mit.edu/scratch_1.4/\">Scratch 1.4</a>.",
"download.otherVersionsAdmin": "If you are a network administrator: a Scratch 2.0 MSI has been created and maintained by a member of the community and hosted for public download <a href=\"http://llk.github.io/scratch-msi/\">here</a>.",
"download.knownIssuesTitle": "Known issues",
"download.knownIssuesOne": "If your offline editor is crashing directly after Scratch is opened, install the Scratch 2 offline editor again (see step 2 above). This issue is due to a bug introduced in Adobe AIR version 14 (released April 2014).",
"download.knownIssuesTwo": "Graphic effects blocks (in \"Looks\") may slow down projects due to a known Flash bug.",
"download.knownIssuesThree": "The <b>backpack</b> is not yet available.",
"download.knownIssuesFour": "On Mac OS you may see a prompt indicating that \"Scratch 2 is trying to install a new helper tool\" and asking for your user name and password. We are currently investigating a solution to this problem.",
"download.reportBugs": "Report Bugs and Glitches",
"download.notAvailable": "Hmm, editor downloads are not available right now - please refresh the page to try again."
}