feat: feed feature, typescript, remove google, fix errs & warns

src/components/navibar/index.tsx

@@ -1,49 +1,34 @@
 import React from 'react'
-import { Link, PageProps } from 'gatsby'
+import { Link } from 'gatsby'
 
 import dcLogo from '../../images/dclogo.png'
 
 import { Container } from '../shared'
 import { logoStyles, CustomNavBar, ulStyles, Li, StyledLink } from './style'
 
-import { pathPrefix } from '../../../gatsby-config.js'
+import { pathPrefix } from '../../../gatsby-config'
 
-const naviLinks = [
-  {
-    name: 'Home',
-    url: '/',
-    active: 'no'
-  },
-  {
-    name: 'About',
-    url: '/about/',
-    active: 'no'
-  },
-  {
-    name: 'Blog',
-    url: '/blog/',
-    active: 'no'
-  },
-  {
-    name: 'FAQ',
-    url: '/faq/',
-    active: 'no'
-  },
+import type { NavibarProps } from '../../types'
+
+interface NaviLink {
+  name: string
+  url: string
+  active: 'yes' | 'no'
+}
+
+const naviLinks: NaviLink[] = [
+  { name: 'Home', url: '/', active: 'no' },
+  { name: 'About', url: '/about/', active: 'no' },
+  { name: 'Blog', url: '/blog/', active: 'no' },
+  { name: 'Feed', url: '/feed/', active: 'no' },
+  { name: 'FAQ', url: '/faq/', active: 'no' },
   {
     name: 'Documentation',
     url: 'https://docs.datacontroller.io/',
     active: 'no'
   },
-  {
-    name: 'Pricing',
-    url: '/pricing/',
-    active: 'no'
-  },
-  {
-    name: 'Book Demo',
-    url: '/contact/',
-    active: 'no'
-  },
+  { name: 'Pricing', url: '/pricing/', active: 'no' },
+  { name: 'Book Demo', url: '/contact/', active: 'no' },
   {
     name: 'Source Code',
     url: 'https://git.datacontroller.io/dc/dc',
@@ -51,11 +36,7 @@ const naviLinks = [
   }
 ]
 
-type DataProps = {
-  location: Location
-}
-
-const Navibar: React.FC<PageProps<DataProps>> = ({ location }) => {
+const Navibar: React.FC<NavibarProps> = ({ location }) => {
   naviLinks.forEach((link) => (link.active = 'no'))
   const currentLink = naviLinks.find(
     (link) => pathPrefix + link.url === location?.pathname

src/components/navibar/style.tsx

@@ -1,8 +1,7 @@
-import React from 'react'
+import * as React from 'react'
 import styled, { css } from 'styled-components'
 import { Link } from 'gatsby'
 
-// styles
 export const logoStyles = {
   height: '55px'
 }
@@ -295,7 +294,6 @@ const LinkUnderlineStyles = css`
   transition: opacity 0.3s ease;
 `
 
-// styled components
 export const Li = styled.li`
   position: relative;
   @media (min-width: 992px) {
@@ -315,7 +313,14 @@ export const Li = styled.li`
     }
   }
 `
-export const StyledLink = styled((props) => <Link {...props} />)`
+
+interface StyledLinkProps {
+  active?: string
+}
+
+export const StyledLink = styled(({ active, ...rest }: any) => (
+  <Link {...rest} />
+))<StyledLinkProps>`
   padding-right: 0.8rem !important;
   padding-left: 0.8rem !important;
   color: white !important;