fix(site): render local assets, change email, and render press

next.config.js

@@ -1,21 +1,16 @@
-/* eslint-disable */
-const withLess = require('@zeit/next-less');
-
-module.exports = withLess({
+module.exports = {
   distDir: 'build/dist',
   generateBuildId: async () => 'api-homepage',
-  webpack: (config, { isServer }) => {
+  plugins: [],
+  webpack: (config) => {
     config.module.rules.push({
       test: /\.svg$/,
-      use: ['@svgr/webpack']
+      use: ['@svgr/webpack'],
     });
-    // Fixes npm packages that depend on `fs` module
-    if (!isServer) {
-      config.node = {
-        fs: 'empty'
-      }
-    }
-
-    return config
-  }
-});
+    config.module.rules.push({
+      test: /\.(png|jpe?g|gif|woff|woff2|eot|ttf|otf)$/,
+      use: 'file-loader',
+    });
+    return config;
+  },
+};

package.json

@@ -69,8 +69,6 @@
     "@material-ui/core": "^4.11.0",
     "@sendgrid/mail": "^7.4.0",
     "@testing-library/cypress": "^7.0.3",
-    "@zeit/next-css": "^1.0.1",
-    "@zeit/next-less": "^1.0.1",
     "antd": "^4.14.0",
     "autoprefixer": "^9.8.6",
     "axios": "^0.21.1",
@@ -85,12 +83,12 @@
     "express-rate-limit": "^5.2.3",
     "heroku-ssl-redirect": "^0.1.1",
     "joi": "^17.4.0",
-    "less": "^4.1.1",
     "lodash": "^4.17.20",
     "migrate-mongo": "^8.1.4",
     "mongoose": "^5.10.7",
     "morgan": "^1.10.0",
-    "next": "^9.5.5",
+    "next": "12.0.7",
+    "next-react-svg": "^1.1.3",
     "node-cron": "^2.0.3",
     "nodemon": "^2.0.4",
     "prop-types": "^15.7.2",
@@ -106,7 +104,7 @@
     "shelljs": "^0.8.4",
     "string-similarity": "^4.0.2",
     "swagger-ui-express": "^4.1.4",
-    "tailwindcss": "^1.9.5",
+    "tailwindcss": "3",
     "unicharadata": "^9.0.0-alpha.6",
     "uuid": "^8.3.2",
     "yarn": "^1.22.10"
@@ -142,6 +140,7 @@
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.21.3",
     "esm": "^3.2.25",
+    "file-loader": "^6.2.0",
     "husky": "^4.3.0",
     "lint-staged": "^10.4.0",
     "mocha": "^8.1.3",

postcss.config.js

@@ -1,7 +1,8 @@
-/* eslint-disable */
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
 module.exports = {
-  plugins: [
-    require('tailwindcss'),
-    require('autoprefixer'),
-  ],
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 };

src/config.js

@@ -74,7 +74,7 @@ export const API_ROUTE = process.env.NODE_ENV === 'production' ? '' : `http://lo
 // SendGrid API
 export const SENDGRID_API_KEY = process.env.SENDGRID_API_KEY || '';
 export const NEW_DEVELOPER_ACCOUNT_TEMPLATE = process.env.NEW_DEVELOPER_ACCOUNT_TEMPLATE || '';
-export const API_FROM_EMAIL = process.env.API_FROM_EMAIL || 'igboapi@gmail.com';
+export const API_FROM_EMAIL = process.env.API_FROM_EMAIL || 'kedu@nkowaokwu.com';
 
 if (sgMail) {
   sgMail.setApiKey(SENDGRID_API_KEY);

src/fonts.css

@@ -0,0 +1,36 @@
+@font-face {
+  font-family: 'Silka';
+  src: url('./public/fonts/silka-regular-webfont.eot');
+  src: url('./public/fonts/silka-regular-webfont.eot?#iefix') format('embedded-opentype'),
+       url('./public/fonts/silka-regular-webfont.woff2') format('woff2'),
+       url('./public/fonts/silka-regular-webfont.woff') format('woff'),
+       url('./public/fonts/silka-regular-webfont.ttf') format('truetype');
+  font-weight: normal;
+
+}
+
+@font-face {
+  font-family: 'Silka';
+  src: url('./public/fonts/silka-bold-webfont.eot');
+  src: url('./public/fonts/silka-bold-webfont.eot?#iefix') format('embedded-opentype'),
+       url('./public/fonts/silka-bold-webfont.woff2') format('woff2'),
+       url('./public/fonts/silka-bold-webfont.woff') format('woff'),
+       url('./public/fonts/silka-bold-webfont.ttf') format('truetype');
+  font-weight: 700;
+
+}
+
+@font-face {
+  font-family: 'Silka';
+  src: url('./public/fonts/silka-black-webfont.eot');
+  src: url('./public/fonts/silka-black-webfont.eot?#iefix') format('embedded-opentype'),
+       url('./public/fonts/silka-black-webfont.woff2') format('woff2'),
+       url('./public/fonts/silka-black-webfont.woff') format('woff'),
+       url('./public/fonts/silka-black-webfont.ttf') format('truetype');
+  font-weight: 900;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('./public/fonts/Inter/Inter-VariableFont_slnt\,wght.ttf');
+}

src/pages/general.less → src/general.css

@@ -1,7 +1,7 @@
 /* Style sheet dedicated to element tag styling */
 html {
   width: 100vw;
-  font-family: sans-serif;
+  font-family: 'Inter', sans-serif;
   font-weight: normal;
 }
 

src/pages/404.js

@@ -1,3 +1,5 @@
 import React from 'react';
 
-export default () => <div>whoops</div>;
+const Error = () => <div>whoops</div>;
+
+export default Error;

src/pages/App.js

@@ -8,7 +8,8 @@ import Demo from './components/Demo';
 import Card from './components/Card';
 import Footer from './components/Footer';
 import WorkersAroundHeart from './assets/workers-around-heart.svg';
-import Statistics from './components/Statistics/Statistics';
+import Statistics from './components/Statistics';
+import MentionedIn from './components/MentionedIn';
 import { GITHUB_REPO, DICTIONARY_APP_URL } from '../siteConstants';
 
 const App = ({ searchWord, words }) => {
@@ -54,7 +55,7 @@ const App = ({ searchWord, words }) => {
                 </button>
                 <button
                   type="button"
-                  className="mt-4 rounded-full border-green-500 border-2 bg-transparent
+                  className="mt-4 rounded-full border-green-500 border-2 bg-transparent py-3
                   hover:bg-green-500 hover:text-white py-2 px-4 transition-all duration-200"
                   style={{ minWidth: '18rem' }}
                   onClick={() => router.push('/signup')}
@@ -125,13 +126,19 @@ const App = ({ searchWord, words }) => {
           </p>
         </div>
         <Demo searchWord={searchWord} words={words} />
+        <div className="lg:w-7/12 lg:ml-20 w-full text-center lg:text-left my-6">
+          <h2 id="try-it-out" className="text-4xl text-green-500">
+            Mentioned In
+          </h2>
+        </div>
+        <MentionedIn />
         <div className="lg:w-7/12 lg:ml-20 w-full text-center lg:text-left my-6">
           <h2 id="try-it-out" className="text-4xl text-green-500">
             Community Growth
           </h2>
         </div>
         <div className="text-xl md:text-1xl w-full lg:ml-20 mb-4 mt-8 leading-10">
-          <p className="px-6 lg:px-0">
+          <p className="px-6 lg:px-0 lg:pb-12">
             {'Want to see how this data is getting used? Take a look at the '}
             <a className="link" href={DICTIONARY_APP_URL}>
               Nkọwa okwu

src/pages/_app.js

@@ -6,8 +6,8 @@ import queryString from 'query-string';
 import Head from 'next/head';
 import App from 'next/app';
 import { API_ROUTE } from '../siteConstants';
-import './fonts.less';
-import './styles.less';
+import '../fonts.css';
+import '../styles.css';
 
 const MainApp = ({ Component, pageProps, searchWord, words }) => {
   return (

src/pages/about.js

@@ -39,8 +39,8 @@ const About = () => (
         <h1 className="text-3xl">Contact</h1>
         <p>
           {'Email: '}
-          <a className="link" href="mailto:igboapi@gmail.com">
-            igboapi@gmail.com
+          <a className="link" href="mailto:kedu@nkowaokwu.com">
+            kedu@nkowaokwu.com
           </a>
         </p>
       </div>

src/pages/components/Demo/Demo.js

@@ -81,8 +81,8 @@ const Demo = ({ searchWord, words }) => {
               data-test="try-it-out-input"
               defaultValue={searchWord}
             />
-            <div className="flex">
-              <div className="mr-8">
+            <div className="flex space-x-8">
+              <div>
                 <Checkbox
                   className="flex items-center space-x-2"
                   defaultChecked={initialQueries.dialects}
@@ -92,7 +92,7 @@ const Demo = ({ searchWord, words }) => {
                   Dialects
                 </Checkbox>
               </div>
-              <div className="ml-8">
+              <div>
                 <Checkbox
                   className="flex items-center space-x-2"
                   defaultChecked={initialQueries.examples}
@@ -104,7 +104,10 @@ const Demo = ({ searchWord, words }) => {
               </div>
             </div>
             <Input disabled value={constructRequestUrl()} className="w-full py-3 px-5" />
-            <button type="submit" className="primary-button w-full">
+            <button
+              type="submit"
+              className="primary-button w-full transition-all duration-100"
+            >
               Submit
             </button>
             <p className="text-l text-center text-gray-700 self-center mb-24">
@@ -118,7 +121,7 @@ const Demo = ({ searchWord, words }) => {
         <div className="flex flex-col w-full lg:w-auto -mt-32">
           <h3
             className="text-center lg:text-left self-center w-full
-          lg:w-auto lg:self-start text-2xl mb-5 mt-16 lg:mt-0 mt-4"
+          lg:w-auto lg:self-start text-2xl mb-5 mt-28 lg:mt-0 text-white lg:text-gray-800"
           >
             Response
           </h3>

src/pages/components/MentionedIn/MentionedIn.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import NigerianTribune from '../../../public/icons/nigerianTribune.svg';
+import UmuIgboUnite from '../../../public/icons/umuIgboUnite.svg';
+import BuiltInAfrica from '../../../public/icons/builtInAfrica.svg';
+import Nuesroom from '../../../public/icons/nuesroom.svg';
+import WeDeyCode from '../../../public/icons/weDeyCode.svg';
+
+const NIGERIAN_TRIBUNE = (
+  `https://tribuneonlineng.com/why-i-created-first-igbo-english-
+  online-open-to-contribute-dictionary-app-ijemma-onwuzulike/`
+);
+const UIU = (
+  'https://www.ozisco.com/tag/nkowa-okwu/'
+);
+const BUILT_IN_AFRICA = (
+  'https://www.builtinafrica.io/blog-post/ijemma-onwuzulike-igbo-api'
+);
+const NUESROOM = (
+  'https://neusroom.com/her-igbo-parents-didnt-teach-her-the-language-so-ijemma-onwuzulike-built-her-own-dictionary/'
+);
+const WEDEYCODE = (
+  'https://www.youtube.com/watch?v=kjHi7p1j-ts'
+);
+
+const MentionedIn = () => (
+  <div className="mentioned-in w-full flex justify-center items-center lg:py-24">
+    <div
+      className={`w-full lg:w-10/12 flex flex-col md:flex-row 
+    flex-wrap items-center justify-evenly`}
+    >
+      <a href={NIGERIAN_TRIBUNE} target="_blank" rel="noreferrer">
+        <NigerianTribune alt="Nigerian Tribune logo" />
+      </a>
+      <a href={UIU} target="_blank" rel="noreferrer">
+        <UmuIgboUnite alt="Umu Igbo Unite logo" />
+      </a>
+      <a href={BUILT_IN_AFRICA} target="_blank" rel="noreferrer">
+        <BuiltInAfrica alt="Built in Africa logo" />
+      </a>
+      <a href={NUESROOM} target="_blank" rel="noreferrer">
+        <Nuesroom alt="Nuesroom logo" />
+      </a>
+      <a href={WEDEYCODE} target="_blank" rel="noreferrer">
+        <WeDeyCode alt="WeDeyCode logo" />
+      </a>
+    </div>
+  </div>
+);
+
+export default MentionedIn;

src/pages/components/MentionedIn/index.js

@@ -0,0 +1,3 @@
+import MentionedIn from './MentionedIn';
+
+export default MentionedIn;

src/pages/components/Navbar/Navbar.js

@@ -6,7 +6,7 @@ import SubMenu from './SubMenu';
 import IgboAPI from '../../assets/igboAPI.svg';
 import downchevron from '../../assets/downchevron.svg';
 
-const menuIcon = process.env.NODE_ENV !== 'production' ? downchevron : '/assets/downchevron.svg';
+const MenuIcon = process.env.NODE_ENV !== 'production' ? downchevron : '/assets/downchevron.svg';
 
 const Navbar = ({ to, isHomepage, transparent }) => {
   const [isMenuVisible, setIsMenuVisible] = useState(false);
@@ -40,14 +40,14 @@ const Navbar = ({ to, isHomepage, transparent }) => {
           className={`transition-element mr-5 lg:mr-0 ${isMenuVisible ? 'transform rotate-90' : ''}`}
           onClick={() => setIsMenuVisible(!isMenuVisible)}
         >
-          <img src={menuIcon} alt="down arrow as menu icon" />
+          <MenuIcon alt="down arrow as menu icon" />
         </button>
       ) : null}
-      {matchesLargeScreenQuery ? (
-        <SubMenu isHomepage={isHomepage} transparent={transparent} />
-      ) : isMenuVisible ? (
-        <SubMenu isHomepage={isHomepage} transparent={transparent} />
-      ) : null}
+      <SubMenu
+        isVisible={matchesLargeScreenQuery || isMenuVisible}
+        isHomepage={isHomepage}
+        transparent={transparent}
+      />
     </div>
   );
 };

src/pages/components/Navbar/SubMenu.js

@@ -3,15 +3,19 @@ import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { Link } from 'react-scroll';
 
-const SubMenu = ({ isHomepage, transparent }) => {
+const SubMenu = ({ isVisible, isHomepage, transparent }) => {
   const router = useRouter();
   const navigate = (e, url) => {
     e.preventDefault();
     router.push(url);
   };
 
   return (
-    <nav className={`navbar ${transparent ? 'transparent-navbar' : ''} space-y-5 lg:space-y-0 lg:space-x-5`}>
+    <nav
+      className={`navbar ${transparent ? 'transparent-navbar' : ''} 
+      ${isVisible ? 'visible opacity-1' : 'hidden opacity-0'}
+      space-y-5 lg:space-y-0 lg:space-x-5 transition-all duration-100`}
+    >
       {isHomepage ? (
         <>
           <li className="transition-element">
@@ -70,6 +74,7 @@ const SubMenu = ({ isHomepage, transparent }) => {
 };
 
 SubMenu.propTypes = {
+  isVisible: PropTypes.bool.isRequired,
   isHomepage: PropTypes.bool,
   transparent: PropTypes.bool,
 };

src/pages/components/Statistics/Stat.js

@@ -15,7 +15,7 @@ const Stat = ({ value, header, children }) => (
 Stat.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   header: PropTypes.string.isRequired,
-  children: PropTypes.shape({}),
+  children: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.arrayOf(PropTypes.shape({}))]),
 };
 
 Stat.defaultProps = {

src/pages/components/Statistics/Statistics.js

@@ -28,7 +28,7 @@ const Statistics = () => {
           <Stat value={contributorDetails.length} header="GitHub Contributors">
             <div className="flex flex-row flex-wrap justify-center items-center">
               {contributorDetails.slice(0, 10).map((contributor) => (
-                <div>
+                <div key={contributor.avatar_url}>
                   <img
                     src={contributor.avatar_url}
                     className=" text-gray-700 bg-gray-400  w-12  m-2 rounded-full"