feat: apply notification and footer banner to website pages

components/AppLayout/AppLayout.js

@@ -26,11 +26,22 @@ const USER_QUERY = gql`
   ${AppHeader.fragments.AppHeaderUserData}
 `;
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   container: {
     flex: 1,
   },
-});
+  mgp: {
+    color: '#fff',
+    background: theme.palette.secondary[500],
+    display: 'flex',
+    gap: 8,
+    padding: 8,
+    justifyContent: 'center',
+    '& > a': {
+      color: theme.palette.primary[500],
+    },
+  },
+}));
 
 const apiLogout = () => {
   return fetchAPI('/logout').then(resp => resp.json());
@@ -86,6 +97,13 @@ function AppLayout({ children, container = true }) {
 
   return (
     <Fragment>
+      <div className={classes.mgp}>
+        🏆 謠言惑眾獎 🏆 投票到 4/12 唷！
+        <a href="https://www.mygopen.com/p/award_22.html?utm_source=cofacts&utm_medium=site-notif">
+          活動詳情
+        </a>
+        <a href="https://cofacts.tw/mgp">用 LINE 投票去</a>
+      </div>
       <AppHeader
         user={data?.GetUser}
         showProgress={isRouteChanging}

pages/article/[id].js

@@ -47,6 +47,9 @@ import CooccurrenceSection, {
   fragments as CooccurrenceSectionFragments,
 } from 'components/CooccurrenceSection';
 
+const MGP_URL =
+  'https://www.mygopen.com/p/award_22.html??utm_source=cofacts&utm_medium=footer';
+
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex',
@@ -562,11 +565,11 @@ function ArticlePage() {
           )}
 
           <Hidden smDown implementation="css">
-            <a href={LINE_URL}>
+            <a href={MGP_URL}>
               <img
                 className={classes.bannerImage}
-                src="/line-banner-desktop@2x.png"
-                alt={t`Add Cofacts as friend in LINE`}
+                src="/mgp.jpg"
+                alt="第四屆謠言惑眾獎投票中！"
               />
             </a>
           </Hidden>
@@ -620,11 +623,11 @@ function ArticlePage() {
         </Box>
       </div>
       <Hidden mdUp implementation="css">
-        <a href={LINE_URL}>
+        <a href={MGP_URL}>
           <img
             className={classes.bannerImage}
-            src="/line-banner-mobile@2x.png"
-            alt={t`Add Cofacts as friend in LINE`}
+            src="/mgp.jpg"
+            alt="第四屆謠言惑眾獎投票中！"
             style={{ marginBottom: 24 }}
           />
         </a>