Optimization (#50)

* Minor site content and layout fixes

* Update web manifest and icons

* Update Breadcrumbs Structured data

* Update merch structured data

* Update webpack config to reduce bundle size

client/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "build:dev": "webpack --env development",
-    "build:prod": "webpack -p --env production",
+    "build:prod": "webpack -p --mode production --env production",
     "dev": "webpack-dev-server --env development",
     "dev:firebase": "webpack --env development && firebase emulators:start",
     "test": "jest",
@@ -43,6 +43,7 @@
     "babel-polyfill": "^6.26.0",
     "babel-preset-react": "^6.24.1",
     "babel-register": "^6.26.0",
+    "brotli-webpack-plugin": "^1.1.0",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "6.3.2",
     "css-loader": "^5.0.1",

client/src/assets/placeholder/partner.js

@@ -20,7 +20,7 @@ export const PARTNER = Object.freeze({
     partners: [],
   },
   FOUR: {
-    title: 'Media Partners',
+    title: 'TEDx Partners',
     partners: [
       {
         img: PARTNERS.EVERWALL,
@@ -45,7 +45,7 @@ export const PARTNER = Object.freeze({
     ],
   },
   FIVE: {
-    title: 'Title Sponsors',
+    title: 'Title Sponsor',
     partners: [
       {
         img: PARTNERS.TATA,

client/src/assets/static/pwa.webmanifest

@@ -6,6 +6,11 @@
   "lang": "en-IN",
   "scope": "/",
   "icons": [
+    {
+      "src": "/favicon.ico",
+      "sizes": "48x48",
+      "type": "image/x-icon"
+    },
     {
       "src": "/android-chrome-192x192.png",
       "sizes": "192x192",
@@ -32,8 +37,8 @@
       "type": "image/png"
     },
     {
-      "src": "/logo-1536x1536.png",
-      "sizes": "1536x1536",
+      "src": "/logo.png",
+      "sizes": "1080x1080",
       "type": "image/png"
     }
   ],

client/src/assets/static/sitemap.xml

@@ -2,11 +2,11 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
 <url> <loc>https://tedxnitrourkela.com/</loc> </url>
 <url> <loc>https://tedxnitrourkela.com/about</loc> </url>
-<url> <loc>https://tedxnitrourkela.com/partners</loc> </url>
 <url> <loc>https://tedxnitrourkela.com/speakers</loc> </url>
+<url> <loc>https://tedxnitrourkela.com/partners</loc> </url>
 <url> <loc>https://tedxnitrourkela.com/tickets</loc> </url>
-<url> <loc>https://tedxnitrourkela.com/merchandise</loc> </url>
 <url> <loc>https://tedxnitrourkela.com/campus_ambassadors</loc> </url>
+<url> <loc>https://tedxnitrourkela.com/merchandise</loc> </url>
 <url> <loc>https://tedxnitrourkela.com/wall</loc> </url>
 <url> <loc>https://tedxnitrourkela.com/events</loc> </url>
 <url> <loc>https://tedxnitrourkela.com/community</loc> </url>

client/src/components/participate/Incentives.js

@@ -6,15 +6,15 @@ import CustomTable from '../shared/Table';
 // Assets
 import { PARTICIPATE } from '../../assets/placeholder/participate';
 
-function Participate() {
+function Incentives({ title }) {
   return (
     <CustomTable
-      title='Incentives'
+      title={title}
       rows={PARTICIPATE.INCENTIVES.TABLE.ROWS}
       headings={PARTICIPATE.INCENTIVES.TABLE.HEADINGS}
       columns={['column2', 'column3', 'column4', 'column5', 'column6']}
     />
   );
 }
 
-export default Participate;
+export default Incentives;

client/src/components/partner/Partners.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 // Libraries
-import { makeStyles, Container } from '@material-ui/core';
+import { makeStyles, Container, Typography } from '@material-ui/core';
 
 // Assets
 import { GRAPHICS } from '../../assets/img/graphics';
@@ -11,7 +11,13 @@ function Partner({ DATA, home, main = false }) {
 
   const renderPartnerContainer = (
     <div className={classes.wrapper}>
-      <div className={classes.title}>{DATA.title}</div>
+      <div className={classes.titleContainer}>
+        <Typography variant='h2' className={classes.title}>
+          {DATA.title}
+        </Typography>
+        <div className={classes.horizontalLine} />
+      </div>
+
       <div className={classes.partnerContainer}>
         {DATA.partners.map((sponsor) => (
           <a
@@ -50,15 +56,6 @@ const useStyles = makeStyles((theme) => ({
     top: 0,
     left: 0,
   },
-  title: {
-    marginBottom: '40px',
-    fontFamily: 'Zilla Slab',
-    fontWeight: 700,
-    fontSize: '36px',
-    lineHeight: '43.2px',
-    textAlign: 'center',
-    color: theme.palette.common.white,
-  },
   partnerContainer: {
     margin: '20px 0px',
     flex: 1,
@@ -73,4 +70,23 @@ const useStyles = makeStyles((theme) => ({
     width: 200,
     height: 'auto',
   },
+  titleContainer: {
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    flexDirection: 'column',
+  },
+  title: {
+    marginBottom: '10px',
+    fontFamily: 'Zilla Slab',
+    fontWeight: 700,
+    textAlign: 'center',
+    color: theme.palette.common.white,
+  },
+  horizontalLine: {
+    width: '20%',
+    height: '1px',
+    backgroundColor: '#ffffff',
+    opacity: 0.3,
+  },
 }));

client/src/components/shared/Table.js

@@ -13,7 +13,7 @@ import {
   Paper,
 } from '@material-ui/core';
 
-function CustomTable({ title, rows, headings, columns }) {
+function CustomTable({ title = 'Incentives', rows, headings, columns }) {
   const classes = useStyles();
 
   return (

client/src/config/firebase.js

@@ -1,12 +1,7 @@
 import firebase from 'firebase/app';
-import 'firebase/firestore';
 import 'firebase/analytics';
 
-// console.log(process.env.NODE_ENV)
 const configureFirebase = async () => {
-  // const response = await fetch('/__/firebase/init.json');
-  // const config = await response.json();
-  // firebase.initializeApp(config);
   if (process.env.NODE_ENV === 'production') {
     const response = await fetch('/__/firebase/init.json');
     const config = await response.json();
@@ -27,6 +22,6 @@ const configureFirebase = async () => {
   }
 };
 
-export const { firestore, analytics } = firebase;
+export const { analytics } = firebase;
 
 export default configureFirebase;

client/src/config/theme.js

@@ -101,7 +101,7 @@ const theme = createMuiTheme({
       fontSize: '2.25rem',
       lineHeight: '2.5rem',
       '@media (max-width:600px)': {
-        fontSize: '1.25rem',
+        fontSize: '1.50rem',
         lineHeight: '1.75rem',
       },
     },