Merge pull request #346 from cofacts/banner

Add favicon and article detail banner

pages/_document.js

@@ -32,6 +32,10 @@ class MyDocument extends Document {
             name="viewport"
             content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
           />
+
+          <link rel="icon" href="/favicon.png" type="image/png" />
+          <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+
           {/* PWA primary color */}
           <meta name="theme-color" content={lightTheme.palette.primary.main} />
           <link

pages/article/[id].js

@@ -2,7 +2,7 @@ import gql from 'graphql-tag';
 import Link from 'next/link';
 import { useEffect, useRef, useCallback, useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { Box, Snackbar } from '@material-ui/core';
+import { Box, Hidden, Snackbar } from '@material-ui/core';
 import { ngettext, msgid, t } from 'ttag';
 
 import { useRouter } from 'next/router';
@@ -174,6 +174,10 @@ const useStyles = makeStyles(theme => ({
     lineHeight: '20px',
     margin: '0 12px',
   },
+  bannerImage: {
+    width: '100%',
+    borderRadius: theme.shape.borderRadius,
+  },
 }));
 
 const LOAD_ARTICLE = gql`
@@ -460,6 +464,16 @@ function ArticlePage() {
             </CardHeader>
             <CurrentReplies articleReplies={article.articleReplies} />
           </Card>
+
+          <Hidden smDown implementation="css">
+            <a href={LINE_URL}>
+              <img
+                className={classes.bannerImage}
+                src="/[email protected]"
+                alt={t`Add Cofacts as friend in LINE`}
+              />
+            </a>
+          </Hidden>
         </div>
 
         <aside className={classes.aside}>
@@ -484,6 +498,16 @@ function ArticlePage() {
           )}
         </aside>
       </div>
+      <Hidden mdUp implementation="css">
+        <a href={LINE_URL}>
+          <img
+            className={classes.bannerImage}
+            src="/[email protected]"
+            alt={t`Add Cofacts as friend in LINE`}
+            style={{ marginBottom: 24 }}
+          />
+        </a>
+      </Hidden>
       <Snackbar
         open={!!flashMessage}
         onClose={() => setFlashMessage('')}