feat: link Scratch Link landing page from extension pages

This commit is contained in:
Christopher Willis-Ford 2023-07-10 12:10:13 -07:00
parent 2c7afbce08
commit 48e62c4caf
2 changed files with 75 additions and 41 deletions

View file

@ -17,52 +17,53 @@ const InstallScratchLink = ({
<FlexRow className="inner column">
<h2><FormattedMessage id="installScratchLink.installHeaderTitle" /></h2>
<Steps>
<div className="step">
<Step
compact
number={1}
>
<span className="step-description">
<FormattedMessage id="installScratchLink.downloadAndInstall" />
</span>
<div className="downloads-container">
<a
href={
currentOS === OS_ENUM.WINDOWS ?
'https://www.microsoft.com/store/productId/9N48XLLCZH0X' :
'https://itunes.apple.com/us/app/scratch-link/id1408863490'
}
rel="noopener noreferrer"
target="_blank"
>
<img
alt=""
className="store-badge"
src={`/images/badges/${
currentOS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
}-store-badge.svg`}
/>
</a>
<span className="horizontal-divider">
<FormattedMessage id="installScratch.or" />
</span>
<a
href={`https://downloads.scratch.mit.edu/link/${
<Step
compact
number={1}
>
<span className="step-description">
<FormattedMessage id="installScratchLink.downloadAndInstall" />
</span>
<div className="downloads-container">
<a
href={
currentOS === OS_ENUM.WINDOWS ?
'https://www.microsoft.com/store/productId/9N48XLLCZH0X' :
'https://itunes.apple.com/us/app/scratch-link/id1408863490'
}
rel="noopener noreferrer"
target="_blank"
>
<img
alt=""
className="store-badge"
src={`/images/badges/${
currentOS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
}.zip`}
>
<FormattedMessage id="installScratch.directDownload" />
</a>
</div>
</Step>
</div>
}-store-badge.svg`}
/>
</a>
<span className="horizontal-divider">
<FormattedMessage id="installScratch.or" />
</span>
<a
href={`https://downloads.scratch.mit.edu/link/${
currentOS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
}.zip`}
>
<FormattedMessage id="installScratch.directDownload" />
</a>
</div>
</Step>
<Step
compact
number={2}
>
<span className="step-description">
<FormattedMessage id="installScratchLink.startScratchLink" />
<FormattedMessage
id={`installScratchLink.startScratchLink.${
currentOS === OS_ENUM.WINDOWS ? 'Windows' : 'macOS'
}`}
/>
</span>
<div className="step-image">
<img
@ -73,6 +74,34 @@ const InstallScratchLink = ({
}-toolbar.png`}
/>
</div>
<p className="step-description">
<FormattedMessage
id={`installScratchLink.startScratchLink2.${
currentOS === OS_ENUM.WINDOWS ? 'Windows' : 'macOS'
}`}
/>
</p>
</Step>
<Step
compact
number={3}
>
<span className="step-description">
<FormattedMessage
id="installScratchLink.learnMore.bodyText"
values={{
linkText: (
<a
href="/download/scratch-link"
rel="noopener noreferrer"
target="_blank"
>
<FormattedMessage id="installScratchLink.learnMore.linkText" />
</a>
)
}}
/>
</span>
</Step>
</Steps>
</FlexRow>

View file

@ -167,7 +167,12 @@
"installScratchLink.installHeaderTitle": "Install Scratch Link",
"installScratchLink.downloadAndInstall": "Download and install Scratch Link.",
"installScratchLink.startScratchLink": "Start Scratch Link and make sure it is running. It should appear in your toolbar.",
"installScratchLink.startScratchLink.macOS": "Start Scratch Link and make sure it is running. It should appear in your menu bar.",
"installScratchLink.startScratchLink.Windows": "Start Scratch Link and make sure it is running. It should appear in your notification area (system tray).",
"installScratchLink.startScratchLink2.macOS": "If it does not appear, run Scratch Link from your Applications folder.",
"installScratchLink.startScratchLink2.Windows": "If it does not appear, run Scratch Link from your Start menu.",
"installScratchLink.learnMore.bodyText": "To learn more about Scratch Link, click {linkText}.",
"installScratchLink.learnMore.linkText": "here",
"parents.FaqAgeRangeA": "While Scratch is primarily designed for 8 to 16 year olds, it is also used by people of all ages, including younger children with their parents.",
"parents.FaqAgeRangeQ": "What is the age range for Scratch?",