"Expiration Date" feature for Community Hero and Events

src/components/Community/data.json → content/community.json

@@ -1,9 +1,12 @@
 {
-  "hero": {
-    "pictureDesktop": "/img/community/header_mailing_list_skinny.png",
-    "pictureMobile": "/img/community/mobile_header_mailing_list_skinny.png",
-    "url": "#subscribe"
-  },
+  "hero": [
+    {
+      "pictureDesktop": "/img/community/default-banner.png",
+      "pictureMobile": "/img/community/default-mobile-banner.png",
+      "url": "#subscribe",
+      "expires": false
+    }
+  ],
   "section": {
     "contribute": {
       "title": "Contribute",
@@ -52,7 +55,7 @@
       "pictureUrl": "/img/community/ugc/medium_logo.png"
     },
     {
-      "url": "https://blog.codecentric.de/en/2020/01/remote-training-gitlab-ci-dvc/",
+      "url": "https://mribeirodantas.xyz/blog/index.php/2020/03/05/r-dvc-and-rmarkdown/",
       "title": "Manage your Data Science Project in R",
       "author": "Marcel Ribeiro-Dantas",
       "date": "2020-03-05",
@@ -72,7 +75,7 @@
       "title": "Women in Data Science San Diego",
       "description": "Elle O'Brien is talking about data catalogs and feature stores.",
       "city": "San Diego",
-      "date": "2020-05-10"
+      "date": "2020-03-27"
     },
     {
       "url": "https://www.mlprague.com/#schedule-saturday",

package.json

@@ -55,6 +55,7 @@
     "iso-url": "^0.4.7",
     "isomorphic-fetch": "^2.2.1",
     "lodash": "^4.17.15",
+    "moment": "^2.25.3",
     "nanoid": "^3.0.2",
     "node-cache": "^5.1.0",
     "perfect-scrollbar": "^1.5.0",

scripts/deploy-with-s3.js

@@ -2,7 +2,6 @@
 'use strict'
 require('dotenv').config()
 const path = require('path')
-const crypto = require('crypto')
 const PRODUCTION_PREFIX = 'dvc-org-prod'
 
 const { DEPLOY_OPTIONS } = process.env
@@ -61,8 +60,6 @@ const cacheDirs = [
   ['.cache', '-cache/']
 ]
 
-const fs = require('fs')
-
 const { s3Prefix, withEntries, prefixIsEmpty } = require('./s3-utils')
 const { move } = require('fs-extra')
 const { downloadAllFromS3, uploadAllToS3, cleanAllLocal } = withEntries(

scripts/s3-utils.js

@@ -3,7 +3,7 @@
 const path = require('path')
 const s3 = require('s3-client')
 const { s3Prefix, s3Bucket } = require('../src/server/config')
-const { remove, move, ensureDir } = require('fs-extra')
+const { remove, ensureDir } = require('fs-extra')
 
 const {
   AWS_REGION,

src/components/Community/Contribute/index.tsx

@@ -7,17 +7,23 @@ import CommunityBlock from '../Block'
 import CommunitySection from '../Section'
 import { logEvent } from '../../../utils/front/ga'
 
-import data from '../data.json'
+import { useCommunityData } from '../../../utils/front/community'
 import sharedStyles from '../styles.module.css'
 
-const { description, mobileDescription, title } = data.section.contribute
-
 const logPR = (): void => logEvent('community', 'contribute-pr')
 const logBlogpost = (): void => logEvent('community', 'contribute-blogpost')
 const logTalk = (): void => logEvent('community', 'contribute-talk')
 const logAmbassador = (): void => logEvent('community', 'contribute-ambassador')
 
 const Contribute: React.FC<{ theme: ICommunitySectionTheme }> = ({ theme }) => {
+  const {
+    rest: {
+      section: {
+        contribute: { description, mobileDescription, title }
+      }
+    }
+  } = useCommunityData()
+
   return (
     <LayoutWidthContainer className={sharedStyles.wrapper}>
       <CommunitySection

src/components/Community/Events/index.tsx

@@ -8,12 +8,12 @@ import Link from '../../Link'
 import Block from '../Block'
 import Section from '../Section'
 import { logEvent } from '../../../utils/front/ga'
+import { useCommunityData } from '../../../utils/front/community'
 
-import data from '../data.json'
 import sharedStyles from '../styles.module.css'
 import styles from './styles.module.css'
 
-interface IEvent {
+export interface IEvent {
   theme: ICommunitySectionTheme
   city: string
   date: string
@@ -23,19 +23,6 @@ interface IEvent {
   url: string
 }
 
-const { description, mobileDescription, title } = data.section.events
-const { events } = data
-const eventsItems = ((): Array<IEvent | null> => {
-  const items: Array<IEvent | null> = events.slice(0, 3) as Array<IEvent>
-  const itemLength = items.length
-
-  for (let i = itemLength; i < 3; i++) {
-    items.push(null)
-  }
-
-  return items
-})()
-
 const Event: React.FC<IEvent> = ({
   theme,
   city,
@@ -97,9 +84,14 @@ const Event: React.FC<IEvent> = ({
 }
 
 const Events: React.FC<{ theme: ICommunitySectionTheme }> = ({ theme }) => {
-  if (!events.length) {
-    return null
-  }
+  const {
+    events,
+    rest: {
+      section: {
+        events: { description, mobileDescription, title }
+      }
+    }
+  } = useCommunityData()
 
   return (
     <LayoutWidthContainer className={sharedStyles.wrapper}>
@@ -112,11 +104,20 @@ const Events: React.FC<{ theme: ICommunitySectionTheme }> = ({ theme }) => {
         title={title}
       >
         <div className={sharedStyles.items}>
-          {eventsItems.map((event, key) => (
-            <div className={sharedStyles.item} key={key}>
-              {event && <Event {...event} theme={theme} key={event.url} />}
+          {events ? (
+            events.map((event, key) => (
+              <div className={sharedStyles.item} key={key}>
+                {event && <Event {...event} theme={theme} key={event.url} />}
+              </div>
+            ))
+          ) : (
+            <div className={styles.eventsPlaceholder}>
+              No upcoming events. Subscribe to be up to date!{' '}
+              <span role="img" aria-label="Subscribe below">
+                👇
+              </span>
             </div>
-          ))}
+          )}
         </div>
       </Section>
     </LayoutWidthContainer>

src/components/Community/Events/styles.module.css

@@ -11,3 +11,13 @@
   display: block;
   margin: -10px -20px 0;
 }
+
+.eventsPlaceholder {
+  text-align: center;
+  margin: auto;
+  font-size: 1rem;
+
+  @media screen and (min-width: 480px) {
+    font-size: 1.25rem;
+  }
+}

src/components/Community/Hero/index.tsx

@@ -2,63 +2,44 @@ import React from 'react'
 
 import LayoutWidthContainer from '../../LayoutWidthContainer'
 import ShowOnly from '../../ShowOnly'
-import Link, { ILinkProps } from '../../Link'
+import Link from '../../Link'
+import { useCommunityData } from '../../../utils/front/community'
 import { logEvent } from '../../../utils/front/ga'
-import { scrollIntoLayout } from '../../../utils/front/scroll'
 
-import data from '../data.json'
 import styles from './styles.module.css'
 
 const logHero = (): void => logEvent('community', 'hero')
 
-// This special link component will smooth-scroll on local fragment links
-const MaybeSmoothLink: React.FC<ILinkProps> = props => {
-  const { href, children } = props
-  if (href.startsWith('#')) {
-    // Intercept local fragment links and turn them into a special
-    // smooth-scrolling `a` element
-    return (
-      <Link
-        {...props}
-        onClick={(): void => {
-          logHero()
-          scrollIntoLayout(document.getElementById(href.slice(1)), {
-            smooth: true
-          })
-        }}
-      >
-        {children}
-      </Link>
-    )
-  } else {
-    // Pass through all props to a normal link otherwise
-    return <Link {...props} />
-  }
+export interface IHero {
+  url: string
+  pictureDesktop: string
+  pictureMobile: string
 }
 
 const Hero: React.FC = () => {
-  if (!data.hero) {
+  const { hero } = useCommunityData()
+
+  if (!hero) {
     return null
   }
 
   return (
     <LayoutWidthContainer className={styles.container}>
-      <MaybeSmoothLink className={styles.link} href={data.hero.url}>
+      <Link
+        className={styles.link}
+        href={hero.url}
+        onClick={logHero}
+        scrollOptions={{
+          smooth: true
+        }}
+      >
         <ShowOnly on="desktop">
-          <img
-            className={styles.picture}
-            src={data.hero.pictureDesktop}
-            alt=""
-          />
+          <img className={styles.picture} src={hero.pictureDesktop} alt="" />
         </ShowOnly>
         <ShowOnly on="mobile">
-          <img
-            className={styles.picture}
-            src={data.hero.pictureMobile}
-            alt=""
-          />
+          <img className={styles.picture} src={hero.pictureMobile} alt="" />
         </ShowOnly>
-      </MaybeSmoothLink>
+      </Link>
     </LayoutWidthContainer>
   )
 }

src/components/Community/Learn/index.tsx

@@ -11,16 +11,14 @@ import Section from '../Section'
 import { logEvent } from '../../../utils/front/ga'
 import { getFirstPage } from '../../../utils/shared/sidebar'
 import { useCommentsCount } from '../../../utils/front/api'
+import { useCommunityData } from '../../../utils/front/community'
 import getPosts from '../../../queries/posts'
 import { pluralizeComments } from '../../../utils/front/i18n'
 
-import data from '../data.json'
 import sharedStyles from '../styles.module.css'
 import styles from './styles.module.css'
 
 const docsPage = getFirstPage()
-const { description, mobileDescription, title } = data.section.learn
-const { documentation, userContent } = data
 
 const logPostAll = (): void => logEvent('community', 'blog', 'all')
 const logDocumentationAll = (): void =>
@@ -92,7 +90,7 @@ const BlogPost: React.FC<ICommunityBlogPost> = ({
   )
 }
 
-interface ICommunityUserContentProps {
+export interface ICommunityUserContentProps {
   author: string
   color: string
   date: string
@@ -147,7 +145,7 @@ const UserContent: React.FC<ICommunityUserContentProps> = ({
   )
 }
 
-interface ICommunityDocumentationProps {
+export interface ICommunityDocumentationProps {
   color: string
   description: string
   title: string
@@ -182,6 +180,15 @@ const Documentation: React.FC<ICommunityDocumentationProps> = ({
 
 const Learn: React.FC<{ theme: ICommunitySectionTheme }> = ({ theme }) => {
   const posts = getPosts()
+  const {
+    rest: {
+      documentation,
+      userContent,
+      section: {
+        learn: { description, mobileDescription, title }
+      }
+    }
+  } = useCommunityData()
 
   return (
     <LayoutWidthContainer className={sharedStyles.wrapper}>

src/components/Community/Meet/index.tsx

@@ -15,11 +15,10 @@ import {
   IDiscussTopic
 } from '../../../utils/front/api'
 
-import data from '../data.json'
+import { useCommunityData } from '../../../utils/front/community'
 import sharedStyles from '../styles.module.css'
 import styles from './styles.module.css'
 
-const { description, mobileDescription, title } = data.section.meet
 const logIssueAll = (): void => logEvent('community', 'issue', 'all')
 const logTopicAll = (): void => logEvent('community', 'topic', 'all')
 const logDiscord = (): void => logEvent('community', 'discord')
@@ -99,6 +98,8 @@ const Issue: React.FC<{ color: string } & IGithubIssue> = ({
 }
 
 const Meet: React.FC<{ theme: ICommunitySectionTheme }> = ({ theme }) => {
+  const data = useCommunityData().rest
+  const { description, mobileDescription, title } = data.section.meet
   const { error: issuesError, ready: issuesReady, result: issues } = useIssues()
   const { error: topicsError, ready: topicsReady, result: topics } = useTopics()
 

src/components/Community/Section/index.tsx

@@ -9,7 +9,7 @@ import { screens } from '../../../../config/postcss/media'
 
 import styles from './styles.module.css'
 
-interface ICommunitySection {
+export interface ICommunitySection {
   anchor: string
   background?: string
   color: string