Rename all Conference 2020 folders to 2021

This is both to reduce confusion in the future, and so that Transifex sees what it expects, with the name of the resource corresponding to the path to the l10n file.

src/components/footer/conference/2021/footer.jsx

@@ -145,8 +145,8 @@ const ConferenceFooter = props => (
             </div>
         </FlexRow>
         <LanguageChooser locale={props.intl.locale} />
-        <div className="conf2020-organized">
-            <FormattedMessage id="conference-2020.organizedBy" />
+        <div className="conf2021-organized">
+            <FormattedMessage id="conference-2021.organizedBy" />
         </div>
     </FooterBox>
 );

src/components/navigation/conference/2021/navigation.jsx

@@ -6,9 +6,9 @@ require('./navigation.scss');
 
 const Navigation = () => (
     <NavigationBox>
-        <ul className="ul mod-2020">
-            <li className="li-left mod-logo mod-2020">
-                <ul className="li-left-ul mod-2020">
+        <ul className="ul mod-2021">
+            <li className="li-left mod-logo mod-2021">
+                <ul className="li-left-ul mod-2021">
                     <li>
                         <a
                             className="logo-a"

src/components/navigation/conference/2021/navigation.scss

@@ -2,8 +2,8 @@
 @import "../../../../frameless";
 
 #navigation {
-    .ul.mod-2020,
-    .li-left-ul.mod-2020 {
+    .ul.mod-2021,
+    .li-left-ul.mod-2021 {
         display: flex;
         justify-content: space-between;
         flex-flow: row nowrap;
@@ -11,7 +11,7 @@
         list-style-type: none;
     }
 
-    .li-left-ul.mod-2020 {
+    .li-left-ul.mod-2021 {
         padding-left: 0;
     }
 
@@ -57,7 +57,7 @@
     @media #{$medium-and-smaller} {
         height: 100px;
 
-        .ul.mod-2020 {
+        .ul.mod-2021 {
             justify-content: center;
             flex-flow: row wrap;
         }

src/components/page/conference/2021/page.jsx

@@ -1,8 +1,8 @@
 const PropTypes = require('prop-types');
 const React = require('react');
 
-const Navigation = require('../../../navigation/conference/2020/navigation.jsx');
-const Footer = require('../../../footer/conference/2020/footer.jsx');
+const Navigation = require('../../../navigation/conference/2021/navigation.jsx');
+const Footer = require('../../../footer/conference/2021/footer.jsx');
 
 require('../page.scss');
 

src/routes.json

@@ -89,7 +89,7 @@
         "name": "conference-index-2021",
         "pattern": "^/conference/2021/?$",
         "routeAlias": "/conference(?!/201[4-9])",
-        "view": "conference/2020/index/index",
+        "view": "conference/2021/index/index",
         "title": "Scratch Conferences",
         "viewportWidth": "device-width"
     },

src/views/conference/2020/index/l10n.json

@@ -1,18 +0,0 @@
-{
-    "conference-2020.title": "Scratch Around the World:",
-    "conference-2020.subtitle": "An Online Conference",
-    "conference-2020.dateDesc": "July 22, 2021",
-    "conference-2020.locationDetails": "Online",
-
-    "conference-2020.date": "When:",
-    "conference-2020.location": "Where:",
-
-    "conference-2020.desc1": "Join us for Scratch Around the World, an online conference for educators interested in creative learning with Scratch.",
-    "conference-2020.desc1a": "Although we are not able to meet in person this year, we are excited to find ways to connect and share with others in the global Scratch educator community.",
-    "conference-2020.desc3": "The conference will be free of charge.",
-
-    "conference-2020.register": "Go to registration page",
-
-    "conference-2020.stayDesc2": "For additional questions, contact the Scratch Conference Team at {emailLink}",
-    "conference-2020.organizedBy": "The Scratch Conference is organized by the Lifelong Kindergarten group at the MIT Media Lab in collaboration with the Scratch Foundation."
-}

src/views/conference/2021/index/index.jsx

@@ -3,47 +3,47 @@ const FormattedMessage = require('react-intl').FormattedMessage;
 const React = require('react');
 const render = require('../../../../lib/render.jsx');
 
-const Page = require('../../../../components/page/conference/2020/page.jsx');
+const Page = require('../../../../components/page/conference/2021/page.jsx');
 const TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
 
 require('../../../../components/forms/button.scss');
 require('./index.scss');
 
 const ConferenceSplash = () => (
-    <div className="index mod-2020">
-        <TitleBanner className="mod-conference mod-2020">
-            <div className="title-banner-image mod-2020" />
-            <h1 className="title-banner-h1 mod-2020">
+    <div className="index mod-2021">
+        <TitleBanner className="mod-conference mod-2021">
+            <div className="title-banner-image mod-2021" />
+            <h1 className="title-banner-h1 mod-2021">
                 <center>
-                    <FormattedMessage id="conference-2020.title" />
+                    <FormattedMessage id="conference-2021.title" />
                     <br />
-                    <FormattedMessage id="conference-2020.subtitle" />
+                    <FormattedMessage id="conference-2021.subtitle" />
                 </center>
             </h1>
-            <h3 className="title-banner-h3 mod-2020">
-                <FormattedMessage id="conference-2020.dateDesc" />
+            <h3 className="title-banner-h3 mod-2021">
+                <FormattedMessage id="conference-2021.dateDesc" />
             </h3>
         </TitleBanner>
         <div className="inner">
-            <section className="conf2020-panel mod-desc">
-                <p className="conf2020-panel-desc">
-                    <FormattedMessage id="conference-2020.desc1" />{' '}
-                    <strong><FormattedMessage id="conference-2020.desc1a" /></strong>
+            <section className="conf2021-panel mod-desc">
+                <p className="conf2021-panel-desc">
+                    <FormattedMessage id="conference-2021.desc1" />{' '}
+                    <strong><FormattedMessage id="conference-2021.desc1a" /></strong>
                     <br />
                     <br />
-                    <FormattedMessage id="conference-2020.desc3" />
+                    <FormattedMessage id="conference-2021.desc3" />
                 </p>
-                <table className="conf2020-panel-details">
+                <table className="conf2021-panel-details">
                     <tbody>
-                        <tr className="conf2020-panel-row">
-                            <td className="conf2020-panel-row-icon">
+                        <tr className="conf2021-panel-row">
+                            <td className="conf2021-panel-row-icon">
                                 <img
                                     alt="Calendar Icon"
-                                    className="conf2020-panel-row-icon-image"
+                                    className="conf2021-panel-row-icon-image"
                                     src="/svgs/conference/index/calendar-icon-solid.svg"
                                 />
                             </td>
-                            <td><FormattedMessage id="conference-2020.date" /></td>
+                            <td><FormattedMessage id="conference-2021.date" /></td>
                             <td>
                                 <FormattedDate
                                     day="2-digit"
@@ -53,31 +53,31 @@ const ConferenceSplash = () => (
                                 />
                             </td>
                         </tr>
-                        <tr className="conf2020-panel-row">
-                            <td className="conf2020-panel-row-icon">
+                        <tr className="conf2021-panel-row">
+                            <td className="conf2021-panel-row-icon">
                                 <img
                                     alt="Map Icon"
-                                    className="conf2020-panel-row-icon-image"
+                                    className="conf2021-panel-row-icon-image"
                                     src="/svgs/conference/index/map-icon-solid.svg"
                                 />
                             </td>
-                            <td><FormattedMessage id="conference-2020.location" /></td>
-                            <td><FormattedMessage id="conference-2020.locationDetails" /></td>
+                            <td><FormattedMessage id="conference-2021.location" /></td>
+                            <td><FormattedMessage id="conference-2021.locationDetails" /></td>
                         </tr>
                     </tbody>
                 </table>
                 <a
-                    className="button mod-2020-panel"
+                    className="button mod-2021-panel"
                     href="http://scratch2021.eventbrite.com/"
                 >
-                    <FormattedMessage id="conference-2020.register" />
+                    <FormattedMessage id="conference-2021.register" />
                 </a>
 
             </section>
-            <section className="conf2020-panel mod-stay">
-                <p className="conf2020-panel-desc">
+            <section className="conf2021-panel mod-stay">
+                <p className="conf2021-panel-desc">
                     <FormattedMessage
-                        id="conference-2020.stayDesc2"
+                        id="conference-2021.stayDesc2"
                         values={{
                             emailLink: <a href="mailto:conference@scratch.mit.edu">
                                 conference@scratch.mit.edu
@@ -86,7 +86,7 @@ const ConferenceSplash = () => (
                     />
                     <br />
                     <br />
-                    <FormattedMessage id="conference-2020.organizedBy" />
+                    <FormattedMessage id="conference-2021.organizedBy" />
                 </p>
             </section>
         </div>

src/views/conference/2021/index/index.scss

@@ -1,53 +1,53 @@
 @import "../../../../colors";
 @import "../../../../frameless";
 
-.title-banner.mod-conference.mod-2020 {
+.title-banner.mod-conference.mod-2021 {
     padding-top: 0;
 }
 
-.title-banner-image.mod-2020 {
+.title-banner-image.mod-2021 {
     opacity: .75;
     margin-bottom: 1.75rem;
-    background-image: url("/images/conference/index/2020/title-banner.jpg");
+    background-image: url("/images/conference/index/2021/title-banner.jpg");
     background-position: center;
     background-size: cover;
     width: 100%;
     height: 20rem;
 }
 
-.title-banner-h1.mod-2020 {
+.title-banner-h1.mod-2021 {
     line-height: 1.25em;
 }
 
-.conf2020-panel,
-.title-banner-h3.mod-2020  {
+.conf2021-panel,
+.title-banner-h3.mod-2021  {
     width: 48.75rem;
     margin: auto;
 }
 
-.title-banner-h3.mod-2020 {
+.title-banner-h3.mod-2021 {
     margin: 2rem auto 0;
 }
 
-.title-banner-h3.mod-2020 {
+.title-banner-h3.mod-2021 {
     text-align: center;
     color: $type-white;
 }
 
-.conf2020-panel {
+.conf2021-panel {
     border-bottom: 1px solid $ui-border;
 }
 
-.conf2020-panel.mod-last {
+.conf2021-panel.mod-last {
     border-bottom: 0;
 }
 
-.flex-row.conf2020-panel-title {
+.flex-row.conf2021-panel-title {
     justify-content: flex-start;
     align-items: center;
 }
 
-.conf2020-panel-desc {
+.conf2021-panel-desc {
     margin: 2rem 0;
 }
 
@@ -60,14 +60,14 @@ td {
     vertical-align: middle;
 }
 
-.conf2020-panel-row-icon-image {
+.conf2021-panel-row-icon-image {
     width: 1.5rem;
     height: 1.5rem;
 }
-.mod-registration .conf2020-panel-desc {
+.mod-registration .conf2021-panel-desc {
     margin-bottom: 0;
 }
-.button.mod-2020-panel {
+.button.mod-2021-panel {
     display: block;
     margin: 2rem auto 0;
     background-color: $ui-orange;
@@ -76,7 +76,7 @@ td {
     text-align: center;
     color: $type-white;
 }
-.conf2020-organized {
+.conf2021-organized {
     font-size: .875rem;
     margin: 0 auto;
     text-align: center;
@@ -85,93 +85,93 @@ td {
 }
 
 @media only screen and (max-width: $mobile - 1) {
-    .index.mod-2020 {
+    .index.mod-2021 {
         text-align: left;
     }
 
-    .title-banner-image.mod-2020 {
+    .title-banner-image.mod-2021 {
         height: 10rem;
     }
 
-    .conf2020-panel,
-    .title-banner-h3.mod-2020 {
+    .conf2021-panel,
+    .title-banner-h3.mod-2021 {
         width: initial;
     }
 
-    .conf2020-panel {
+    .conf2021-panel {
         margin: auto .5rem;
     }
 
-    .title-banner-h3.mod-2020 {
+    .title-banner-h3.mod-2021 {
         margin: 1rem .5rem .5rem;
         font-size: 1.1rem;
     }
 
-    .flex-row.conf2020-panel-title {
+    .flex-row.conf2021-panel-title {
         flex-direction: row;
     }
 
-    .conf2020-panel-title-text {
+    .conf2021-panel-title-text {
         max-width: 14rem;
     }
 
-    .conf2020-panel-row > td {
+    .conf2021-panel-row > td {
         padding: .75rem .375rem .75rem 0;
     }
 }
 
 @media only screen and (min-width: $mobile) and (max-width: $tabletPortrait - 1) {
-    .index.mod-2020 {
+    .index.mod-2021 {
         text-align: left;
     }
 
-    .title-banner-image.mod-2020 {
+    .title-banner-image.mod-2021 {
         height: 10rem;
     }
 
-    .conf2020-panel,
-    .title-banner-h3.mod-2020 {
+    .conf2021-panel,
+    .title-banner-h3.mod-2021 {
         margin: auto .5rem ;
         width: initial;
     }
 
-    .title-banner-h3.mod-2020 {
+    .title-banner-h3.mod-2021 {
         font-size: 1.1rem;
     }
 
-    .flex-row.conf2020-panel-title {
+    .flex-row.conf2021-panel-title {
         flex-direction: row;
     }
 
-    .conf2020-panel-title-text {
+    .conf2021-panel-title-text {
         max-width: 18.75rem;
     }
 
-    .button.mod-2020-panel {
+    .button.mod-2021-panel {
         width: 5.75rem;
     }
 }
 
 @media only screen and (min-width: $tabletPortrait) and (max-width: $desktop - 1) {
-    .index.mod-2020 {
+    .index.mod-2021 {
         text-align: left;
     }
 
-    .title-banner-image.mod-2020 {
+    .title-banner-image.mod-2021 {
         height: 15rem;
     }
 
-    .conf2020-panel,
-    .title-banner-h3.mod-2020 {
+    .conf2021-panel,
+    .title-banner-h3.mod-2021 {
         margin: auto;
         width: 38.75rem;
     }
 
-    .title-banner-h3.mod-2020 {
+    .title-banner-h3.mod-2021 {
         font-size: 1.1rem;
     }
 
-    .button.mod-2020-panel {
+    .button.mod-2021-panel {
         width: 8.75rem;
     }
 }

src/views/conference/2021/index/l10n.json

@@ -0,0 +1,18 @@
+{
+    "conference-2021.title": "Scratch Around the World:",
+    "conference-2021.subtitle": "An Online Conference",
+    "conference-2021.dateDesc": "July 22, 2021",
+    "conference-2021.locationDetails": "Online",
+
+    "conference-2021.date": "When:",
+    "conference-2021.location": "Where:",
+
+    "conference-2021.desc1": "Join us for Scratch Around the World, an online conference for educators interested in creative learning with Scratch.",
+    "conference-2021.desc1a": "Although we are not able to meet in person this year, we are excited to find ways to connect and share with others in the global Scratch educator community.",
+    "conference-2021.desc3": "The conference will be free of charge.",
+
+    "conference-2021.register": "Go to registration page",
+
+    "conference-2021.stayDesc2": "For additional questions, contact the Scratch Conference Team at {emailLink}",
+    "conference-2021.organizedBy": "The Scratch Conference is organized by the Lifelong Kindergarten group at the MIT Media Lab in collaboration with the Scratch Foundation."
+}