use proper cache header

Author: skshetry

packages/gatsby-theme/src/components/HamburgerMenu/index.tsx

@@ -9,8 +9,10 @@ import {
 import menuData from '@dvcorg/gatsby-theme/src/data/menu'
 import { logEvent } from '@dvcorg/gatsby-theme/src/utils/front/plausible'
 
+import { ReactComponent as MailIcon } from '../../../../../static/img/community/icon-mail.svg'
 import HamburgerIcon from '../HamburgerIcon'
 import Link from '../Link'
+import { ReactComponent as DiscordSVG } from '../SocialIcon/discord.svg'
 import { ReactComponent as GithubIcon } from '../SocialIcon/github.svg'
 import { ReactComponent as TwitterIcon } from '../SocialIcon/twitter.svg'
 
@@ -154,11 +156,7 @@ export const HamburgerMenu: React.FC<
                 target="_blank"
                 onClick={() => handleItemClick('mail')}
               >
-                <img
-                  className={styles.subSectionLinkImage}
-                  src="/img/community/icon-mail.svg"
-                  alt=""
-                />
+                <MailIcon className={styles.subSectionLinkImage} />
                 <span className={styles.subSectionLinkTitle}>E-Mail</span>
               </Link>
             </li>
@@ -180,11 +178,7 @@ export const HamburgerMenu: React.FC<
                 onClick={() => handleItemClick('chat')}
                 target="_blank"
               >
-                <img
-                  className={styles.subSectionLinkImage}
-                  src="/img/community/icon-discord.svg"
-                  alt=""
-                />
+                <DiscordSVG className={styles.subSectionLinkImage} />
                 <span className={styles.subSectionLinkTitle}>Discord</span>
               </Link>
             </li>

scripts/heroku-deploy.sh

@@ -8,5 +8,4 @@ ln -s $NEWPWD $OLDPWD
 cd $NEWPWD
 yarn build
 rm -rf static .cache
-# Copy the 404 HTML file from public into the root dir for Heroku
 ./scripts/clear-cloudfront-cache.js

server/index.js

@@ -84,12 +84,36 @@ app.use(
 )
 app.use(helmet(helmetOptions))
 
+const mustRevalidate = 'public, max-age=0, must-revalidate'
+const cacheForever = 'public, max-age=31536000, immutable'
 const serveMiddleware = async (req, res) => {
   await serveHandler(req, res, {
     public: 'public',
     cleanUrls: true,
     trailingSlash: false,
-    directoryListing: false
+    directoryListing: false,
+    headers: [
+      {
+        source: '**/*.html',
+        headers: [{ key: 'Cache-Control', value: mustRevalidate }]
+      },
+      {
+        source: 'page-data/**',
+        headers: [{ key: 'Cache-Control', value: mustRevalidate }]
+      },
+      {
+        source: 'static/**',
+        headers: [{ key: 'Cache-Control', value: cacheForever }]
+      },
+      {
+        source: '**/*.@(css|js)',
+        headers: [{ key: 'Cache-Control', value: cacheForever }]
+      },
+      {
+        source: '**/*.@(jpg|jpeg|gif|png|svg)',
+        headers: [{ key: 'Cache-Control', value: 'max-age=86400' }]
+      }
+    ]
   })
 }
 app.use(serveMiddleware)