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

src/components/footer/index.tsx

@@ -1,7 +1,11 @@
 import React from 'react'
+import { FaRss } from 'react-icons/fa'
 import { Section } from '../shared'
 import { SolidButton } from '../shared/styledComponents'
 import { StyledHeading, StyledDesc, InputStyled, StyledAnchor } from './style'
+import { siteMetadata } from '../../../gatsby-config'
+
+const rssFeedUrl = `${siteMetadata.siteUrl}rss.xml`
 
 const anchorStyles = {
   color: '#888'
@@ -13,42 +17,39 @@ const Footer = () => (
       <div className="col-md-3 me-md-5">
         <StyledHeading>Data Controller</StyledHeading>
         <StyledDesc>
-          Data Controller is the product of a UK company with a singular focus on{' '}
-          <StyledAnchor
-            href="https://sasapps.io"
-            target="_blank"
-            rel="noopener"
-          >
-            SAS Web Apps
-          </StyledAnchor>.
+          Data Controller is the product of a UK company with a singular focus
+          on <StyledAnchor href="https://sasapps.io">SAS Web Apps</StyledAnchor>
+          .
         </StyledDesc>
       </div>
       <div className="col-md-3">
         <StyledHeading>Source Code</StyledHeading>
         <StyledDesc>
-          All our source code can be found on our self-hosted{' '}
-          <StyledAnchor
-            href="https://git.datacontroller.io"
-            target="_blank"
-            rel="noopener"
-          >
+          Data Controller source is on our self-hosted{' '}
+          <StyledAnchor href="https://git.datacontroller.io">
             Gitea Repository
           </StyledAnchor>
-          .
+          ; the underlying SASjs framework is on{' '}
+          <StyledAnchor href="https://github.com/sasjs">GitHub</StyledAnchor>.
         </StyledDesc>
       </div>
       <div className="col-md-3">
         <StyledHeading>Other Resources</StyledHeading>
         <StyledDesc>
-          Leverage our underlying tech stack on{' '}
-          <StyledAnchor
-            href="https://github.com/sasjs"
-            target="_blank"
-            rel="noopener"
-          >
-            Github
+          Connect on{' '}
+          <StyledAnchor href={siteMetadata.social.linkedin}>
+            LinkedIn
+          </StyledAnchor>
+          , read the{' '}
+          <StyledAnchor href="https://docs.datacontroller.io">
+            docs
+          </StyledAnchor>
+          , or subscribe to the{' '}
+          <StyledAnchor href={rssFeedUrl}>
+            <FaRss style={{ marginRight: '6px', verticalAlign: 'middle' }} />
+            RSS feed
           </StyledAnchor>{' '}
-          and build your own SAS Powered Web Apps.
+          for updates.
         </StyledDesc>
       </div>
     </div>

src/components/footer/style.tsx

@@ -1,6 +1,8 @@
-import React from 'react'
+import * as React from 'react'
 import styled from 'styled-components'
 
+import type { StyledAnchorProps } from '../../types'
+
 export const StyledHeading = styled.h6`
   margin-bottom: 0.8rem;
   text-transform: uppercase;
@@ -33,7 +35,10 @@ const Anchor = styled.a`
   }
 `
 
-export const StyledAnchor = ({ children, href }) => (
+export const StyledAnchor: React.FC<StyledAnchorProps> = ({
+  children,
+  href
+}) => (
   <Anchor href={href} target="_blank" rel="noopener">
     {children}
   </Anchor>

src/components/herosection/index.tsx

@@ -1,21 +1,15 @@
 import React from 'react'
-import { PageProps, Link } from 'gatsby'
-
-import styled from 'styled-components'
+import { Link } from 'gatsby'
 
 import { Hero, HeroHeading, HeroDesc } from './style'
 import { BottomSectionArrow, OutlineButton } from '../shared/styledComponents'
 import { Container } from '../shared'
 
-import { pathPrefix } from '../../../gatsby-config.js'
+import { pathPrefix } from '../../../gatsby-config'
 
-type DataProps = {
-  location: Location
-  heading: string
-  desc: string
-}
+import type { HeroSectionProps } from '../../types'
 
-const HeroSection: React.FC<PageProps<DataProps>> = ({
+const HeroSection: React.FC<HeroSectionProps> = ({
   location,
   heading,
   desc

src/components/herosection/style.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 import background from '../../images/home_hero_bg.png'
 
-export const Hero = styled.main`
+export const Hero = styled.main<{ bg?: boolean }>`
   position: relative;
   padding: 50px 0;
   color: white;
@@ -13,7 +13,8 @@ export const Hero = styled.main`
 `
 
 export const HeroHeading = styled.h1`
-  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+  font-family:
+    'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
     sans-serif;
   text-transform: uppercase;
 `

src/components/layout.tsx

@@ -1,16 +1,12 @@
 import React, { useEffect } from 'react'
-import { PageProps } from 'gatsby'
 
 import Navibar from './navibar'
 import HeroSection from './herosection'
 import Footer from './footer'
 
-type DataProps = {
-  children?: React.ReactNode
-  heroSection: boolean
-}
+import type { LayoutProps } from '../types'
 
-const Layout: React.FC<PageProps<DataProps>> = ({
+const Layout: React.FC<LayoutProps> = ({
   location,
   children,
   heroSection = true,

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;

src/components/seo.tsx

@@ -1,9 +1,16 @@
 import * as React from 'react'
-import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
 import { useStaticQuery, graphql } from 'gatsby'
 
-const Seo = ({ description, lang, meta, title, previewImg = undefined }) => {
+import type { SeoProps } from '../types'
+
+const Seo: React.FC<SeoProps> = ({
+  description = '',
+  lang = 'en',
+  meta = [],
+  title = '',
+  previewImg
+}) => {
   const { site } = useStaticQuery(graphql`
     query {
       site {
@@ -37,44 +44,36 @@ const Seo = ({ description, lang, meta, title, previewImg = undefined }) => {
         lang
       }}
       title={pageTitle}
-      meta={[
-        { name: 'author', property: 'author', content: author },
+      link={[
         {
-          name: 'description',
-          property: 'og:description',
-          content: metaDescription
-        },
-        // { name: 'facebook:site', content: '', },
-        { name: 'image', property: 'og:image', content: image },
-        {
-          name: `linkedin:site`,
-          content: site.siteMetadata?.social?.linkedin || ``
-        },
-        { name: `twitter:card`, content: `summary` },
-        // { name: `twitter:creator`, content: site.siteMetadata?.social?.twitter || `` },
-        { name: `twitter:description`, content: metaDescription },
-        // { name: 'twitter:site', content: `${site?.twitter}`, },
-        { name: `twitter:title`, content: title },
-        // { name: 'youtube:site', content: `${site?.youtube}`, },
-        { property: `og:title`, content: title },
-        { property: `og:type`, content: `website` }
-      ].concat(meta)}
+          rel: 'alternate',
+          type: 'application/rss+xml',
+          title: `${defaultTitle} RSS Feed`,
+          href: `${siteUrl}rss.xml`
+        }
+      ]}
+      meta={(
+        [
+          { name: 'author', property: 'author', content: author },
+          {
+            name: 'description',
+            property: 'og:description',
+            content: metaDescription
+          },
+          { name: 'image', property: 'og:image', content: image },
+          {
+            name: `linkedin:site`,
+            content: site.siteMetadata?.social?.linkedin || ``
+          },
+          { name: `twitter:card`, content: `summary` },
+          { name: `twitter:description`, content: metaDescription },
+          { name: `twitter:title`, content: title },
+          { property: `og:title`, content: title },
+          { property: `og:type`, content: `website` }
+        ] as Array<{ name?: string; property?: string; content?: string }>
+      ).concat(meta)}
     />
   )
 }
 
-Seo.defaultProps = {
-  lang: `en`,
-  meta: [],
-  description: ``,
-  title: ``
-}
-
-Seo.propTypes = {
-  description: PropTypes.string,
-  lang: PropTypes.string,
-  meta: PropTypes.arrayOf(PropTypes.object),
-  title: PropTypes.string
-}
-
 export default Seo

src/components/shared/container.tsx

@@ -1,10 +1,7 @@
-import React from 'react'
+import * as React from 'react'
 import styled from 'styled-components'
-import { PageProps } from 'gatsby'
 
-type DataProps = {
-  children?: React.ReactNode
-}
+import type { ContainerProps } from '../../types'
 
 const StyledDiv = styled.div`
   @media (min-width: 576px) {
@@ -13,6 +10,6 @@ const StyledDiv = styled.div`
   }
 `
 
-export const Container: React.FC<PageProps<DataProps>> = ({ children }) => {
+export const Container: React.FC<ContainerProps> = ({ children }) => {
   return <StyledDiv className="container">{children}</StyledDiv>
 }

src/components/shared/scheduleDemo.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 
 import { FaEnvelope } from 'react-icons/fa'
 
-export const StyledLink = styled((props) => <Link {...props} />)`
+export const StyledLink = styled(Link)`
   color: rgb(255, 255, 255);
   background-color: rgb(144, 196, 69);
   border-radius: 0px;

src/components/shared/section.tsx

@@ -1,25 +1,19 @@
-import React from 'react'
+import * as React from 'react'
 import styled from 'styled-components'
 
-import { PageProps } from 'gatsby'
 import { BottomSectionArrow } from './styledComponents'
 import { Container } from './'
 
-type DataProps = {
-  children?: React.ReactNode
-  color?: string
-  bgColor?: string
-  bottomArrow?: boolean
-}
+import type { SectionProps } from '../../types'
 
-const StyledSection = styled.div`
+const StyledSection = styled.div<{ color?: string; bgColor?: string }>`
   position: relative;
   padding: 50px 0;
   color: ${(props) => props.color || 'white'};
   background-color: ${(props) => props.bgColor || '#314351'};
 `
 
-export const Section: React.FC<PageProps<DataProps>> = ({
+export const Section: React.FC<SectionProps> = ({
   children,
   bgColor,
   color,

src/components/shared/styledComponents.tsx

@@ -1,6 +1,8 @@
-import React from 'react'
+import * as React from 'react'
 import styled from 'styled-components'
 
+import type { SolidButtonProps, OutlineButtonProps } from '../../types'
+
 const BottomArrow = styled.div`
   width: 50px;
   height: 50px;
@@ -9,9 +11,6 @@ const BottomArrow = styled.div`
   background: inherit;
   transform: translateX(-50%) rotate(45deg);
   left: 50%;
-  // right: 0;
-  // margin-left: auto;
-  // margin-right: auto;
   z-index: 10;
 `
 const BottomArrowWrapper = styled.div`
@@ -29,16 +28,17 @@ export const BottomSectionArrow = () => (
   </BottomArrowWrapper>
 )
 
-export const SectionHeading = styled.h2`
+export const SectionHeading = styled.h2<{ center?: string }>`
   text-align: ${(props) => (props.center === 'no' ? 'left' : 'center')};
   letter-spacing: 1px;
   font-weight: 400;
-  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+  font-family:
+    'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
     sans-serif;
   text-transform: uppercase;
 `
 
-export const SectionDesc = styled.p`
+export const SectionDesc = styled.p<{ center?: string; opacity?: string }>`
   text-align: ${(props) => (props.center === 'no' ? 'left' : 'center')};
   opacity: ${(props) => props.opacity ?? 0.6};
   a {
@@ -59,12 +59,12 @@ const StyledSolidButton = styled.button`
   }
 `
 
-export const SolidButton = ({
+export const SolidButton: React.FC<SolidButtonProps> = ({
   children,
   theme = 'light',
   type = 'submit',
   disabled = false,
-  onClick = undefined
+  onClick
 }) => (
   <StyledSolidButton
     type={type}
@@ -83,7 +83,7 @@ const StyledOutlineButton = styled.button`
   border-width: 2px;
 `
 
-export const OutlineButton = ({ children }) => (
+export const OutlineButton: React.FC<OutlineButtonProps> = ({ children }) => (
   <StyledOutlineButton type="button" className="btn btn-outline-light">
     {children}
   </StyledOutlineButton>