feat(docs): swap Medium and videos sections (#2859)

datahub-project · Jul 12, 2021 · e22bd95 · e22bd95
1 parent 220dfe7
commit e22bd95
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 46 deletions.
diff --git a/docs-website/src/pages/index.js b/docs-website/src/pages/index.js
@@ -412,7 +412,7 @@ function Home() {
       <section className={clsx(styles.section)}>
         <div className="container">
           <h1 className={clsx(styles.centerText, styles.small_padding_bottom)}>
-            <span className={styles.larger_on_desktop}>Videos</span>
+            <span className={styles.larger_on_desktop}>Learn more</span>
           </h1>
           <div className={styles.carousel_container}>
             <Slider
@@ -429,6 +429,13 @@ function Home() {
               responsive={[
                 {
                   breakpoint: 1080,
+                  settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 2,
+                  },
+                },
+                {
+                  breakpoint: 960,
                   settings: {
                     slidesToShow: 2,
                     slidesToScroll: 1,
@@ -443,40 +450,39 @@ function Home() {
                 },
               ]}
             >
-              {videos.map((video) => {
+              {articles.map((article) => {
                 return (
-                  <div className={styles.carousel_logo_slide} key={video.id}>
-                    <YouTube
-                      videoId={video.id}
-                      opts={{
-                        playerVars: {
-                          // https://developers.google.com/youtube/player_parameters
-                          autoplay: 0,
-                        },
-                      }}
-                      containerClassName={styles.youtubeContainer}
-                    />
+                  <div
+                    className={styles.carousel_logo_slide_large}
+                    key={article.name}
+                  >
+                    <div className={styles.carousel_article_logo_frame}>
+                      <div className={styles.carousel_article_logo_center}>
+                        {article.image}
+                      </div>
+                      <div className={styles.carousel_article_title_center}>
+                        <Link to={article.link} className={styles.article_link}>
+                          {article.name}
+                        </Link>
+                      </div>
+                    </div>
                   </div>
                 );
               })}
             </Slider>
           </div>
           <div className={styles.sources_link}>
-            <Link
-              to={
-                "https://www.youtube.com/channel/UC3qFQC5IiwR5fvWEqi_tJ5w?sub_confirmation=1"
-              }
-            >
-              Subscribe for more!
+            <Link to={"https://medium.com/datahub-project"}>
+              Read our Medium for more!
             </Link>
           </div>
         </div>
       </section>
 
-      <section className={clsx(styles.section, styles.articles_section)}>
+      <section className={clsx(styles.section, styles.videos_section)}>
         <div className="container">
           <h1 className={clsx(styles.centerText, styles.small_padding_bottom)}>
-            <span className={styles.larger_on_desktop}>Learn more</span>
+            <span className={styles.larger_on_desktop}>Videos</span>
           </h1>
           <div className={styles.carousel_container}>
             <Slider
@@ -493,13 +499,6 @@ function Home() {
               responsive={[
                 {
                   breakpoint: 1080,
-                  settings: {
-                    slidesToShow: 2,
-                    slidesToScroll: 2,
-                  },
-                },
-                {
-                  breakpoint: 960,
                   settings: {
                     slidesToShow: 2,
                     slidesToScroll: 1,
@@ -514,30 +513,31 @@ function Home() {
                 },
               ]}
             >
-              {articles.map((article) => {
+              {videos.map((video) => {
                 return (
-                  <div
-                    className={styles.carousel_logo_slide_large}
-                    key={article.name}
-                  >
-                    <div className={styles.carousel_article_logo_frame}>
-                      <div className={styles.carousel_article_logo_center}>
-                        {article.image}
-                      </div>
-                      <div className={styles.carousel_article_title_center}>
-                        <Link to={article.link} className={styles.article_link}>
-                          {article.name}
-                        </Link>
-                      </div>
-                    </div>
+                  <div className={styles.carousel_logo_slide} key={video.id}>
+                    <YouTube
+                      videoId={video.id}
+                      opts={{
+                        playerVars: {
+                          // https://developers.google.com/youtube/player_parameters
+                          autoplay: 0,
+                        },
+                      }}
+                      containerClassName={styles.youtubeContainer}
+                    />
                   </div>
                 );
               })}
             </Slider>
           </div>
           <div className={styles.sources_link}>
-            <Link to={"https://medium.com/datahub-project"}>
-              Read our Medium for more!
+            <Link
+              to={
+                "https://www.youtube.com/channel/UC3qFQC5IiwR5fvWEqi_tJ5w?sub_confirmation=1"
+              }
+            >
+              Subscribe for more!
             </Link>
           </div>
         </div>

diff --git a/docs-website/src/pages/styles.module.css b/docs-website/src/pages/styles.module.css
@@ -130,7 +130,7 @@
   background-color: var(--ifm-color-emphasis-300);
 }
 
-.articles_section {
+.videos_section {
   background-color: var(--ifm-color-emphasis-300);
 }