@fortawesome/free-brands-svg-icons#faGithub JavaScript Examples

Footer = () => {
  return (
    <div data-testid="footer" id="footer">
      <div className="footerElement">
        <b data-testid="footer-dev"><FormattedMessage id="DevTeam"/> </b> Viade_en1b{" "}
      </div>
      <div className="footerElement">
        <a
          data-testid="footer-github"
          href="https://github.com/Arquisoft/viade_en1b"
          target="_blank"
          rel="noopener noreferrer"
        >
          <FontAwesomeIcon id="githubIcon" icon={faGithub} />
        </a>
      </div>
      <div className="footerElement">
        <a
          data-testid="footer-react"
          href="https://lamasumas.github.io/Solid/"
          target="_blank"
          rel="noopener noreferrer"
        >
          <FontAwesomeIcon id="githubIcon" icon={faBook} />
        </a>
      </div>
      <div className="footerElement">
        <a
          data-testid="footer-react"
          href="https://reactjs.org/"
          target="_blank"
          rel="noopener noreferrer"
        >
          <FontAwesomeIcon id="githubIcon" icon={faReact} />
        </a>
      </div>
    </div>
  );
}

Footer = () => (
  <footer className={cn(styles.footer, 'text-center p-3')}>
    <div className="container">
      <FooterLink
        url="https://github.com/nk11dev"
        textBefore="© 2021,"
        textAfter={revisionText || ';'}
        cls="mr-2"
      >
        <FontAwesomeIcon
          className="mx-1"
          icon={faGithub}
        />
        nk11dev
      </FooterLink>

      <FooterLink
        url="https://www.themoviedb.org/"
        textBefore="This product uses the TMDb API but is not endorsed or certified by TMDb "
        cls={styles.tmdbLogo}
      >
        <img
          width="85"
          height="12"
          className="ml-1"
          src={tmdbLogo}
        />
      </FooterLink>
    </div>
  </footer>
)

Footer = () => {
  return (
    <footer id="footer">
      <div className="flex-row-container flex-center small smallest">
        <div className="footer-links">
          <a href="https://github.com/philgresh/">
            <FontAwesomeIcon icon={faGithub} color="inherit" />
          </a>
          <a href="https://www.linkedin.com/in/philgresham">
            <FontAwesomeIcon icon={faLinkedin} color="inherit" />
          </a>
          <a href="https://gresham.dev">
            <FontAwesomeIcon icon={faHome} color="inherit" />
          </a>
          <EmailObfuscation>
            <FontAwesomeIcon icon={faEnvelope} color="inherit" />
          </EmailObfuscation>
          <a href="https://github.com/philgresh/signdocs">
            <FontAwesomeIcon icon={faCodeBranch} color="inherit" />
          </a>
        </div>
      </div>
    </footer>
  );
}

Footer = () => (
    <FlexContainer flexDirection="column" pb="8px">
        <Box mb="4px" textAlign="center">
            Powered by Ethereum & Loopring &middot; v{version} &middot;{"  "}
            <UndecoratedLink
                href="https://github.com/luzzif/loopring-swap"
                target="_blank"
                rel="noreferrer noopener"
            >
                <FontAwesomeIcon icon={faGithub} />
            </UndecoratedLink>
        </Box>
        <Box textAlign="center">
            <WarningText>
                <FormattedMessage id="footer.warning" />
            </WarningText>
        </Box>
    </FlexContainer>
)

GithubLogin = ({ isAbsolute }) => {
  const isLoggedIn = localStorage.getItem('githubToken') || false

  const callOAuth = async () => {
    window.location.href = 'https://github.com/login/oauth/authorize?client_id=' + OAuthClientID;
  }

  return (
    <ButtonContainer absolute={isAbsolute}>
      {!isLoggedIn
       ? (
          <Button onClick={callOAuth}>
            <FontAwesomeIcon icon={faGithub} /> Log in
          </Button>
         )
       : <Text>Logged in as {localStorage.getItem('githubUsername')}</Text>
      }
    </ButtonContainer>
  )
}

Footer = ({mainText, socialLinks = {} }) => {
  const { 
    facebook,
    gitter,
    twitter,
    github,
    linkedin,
    medium
  } = socialLinks

  return (
    <div className="footer-component">
      <Container>
          <Row>
            <Col>
              <div className="social-icons-container">
                {!facebook || <a href={facebook}><FontAwesomeIcon icon={faFacebook} className="icon" /></a>}
                {!gitter || <a href={gitter}><FontAwesomeIcon icon={faGitter} className="icon" /></a>}
                {!medium || <a href={medium}><FontAwesomeIcon icon={faMedium} className="icon" /></a>}
                {!twitter || <a href={twitter}><FontAwesomeIcon icon={faTwitter} className="icon" /></a>}
                {!github || <a href={github}><FontAwesomeIcon icon={faGithub} className="icon" /></a>}
                {!linkedin || <a href={linkedin}><FontAwesomeIcon icon={faLinkedin} className="icon" /></a>}
              </div>
              <p className="main-text">{mainText} {(new Date().getFullYear())}</p>
            </Col>
          </Row>
      </Container>
    </div>
  )
}

function ProfileInfo(props) {
    return (
        <div className='profileInfo'>
            <div><img className='profilePhoto' src={images(props.bio.profilePhoto)} alt='No Photo'></img></div>
            <div className='profileName'> {props.bio.name}</div>
            <div className='profileID'><span> <FontAwesomeIcon icon={faGithub} /> </span> {props.bio.username} </div>
            <div className='profileDesc'>{props.bio.description}</div>
        </div>
    )
}

Footer = () => (
  <>
    <Divider />
    <FooterElement>
      <LinkContainer>
        {links.map((link, idx) => {
          return (
            <LinkAndBar key={idx}>
              <StyledLink to={link.to}>{link.text}</StyledLink>
              {/* Add bar except after last link */}
              {idx !== links.length - 1 && <Bar>|</Bar>}
            </LinkAndBar>
          )
        })}
      </LinkContainer>
      <IconContainer>
        <IconLink to="https://github.com/ethereum">
          <Icon icon={faGithub} />
        </IconLink>
      </IconContainer>
      <Legal>
        © {new Date().getFullYear()} Ethereum Foundation. <BR />
        All rights reserved.
      </Legal>
    </FooterElement>
  </>
)

function TitleBar() {
    const closeWindow = () => {
        window.close();
    }

    return (
        <TitleBarDiv>
            <ButtonsDiv>
                <CloseButton onClick={closeWindow}>X</CloseButton>
            </ButtonsDiv>
            <TitleDiv>
                <a href='https://github.com/aavshr/aava.sh'>aava.sh</a>
            </TitleDiv>
            <LinksDiv>
                <a href="https://github.com/aavshr">
                    <FontAwesomeIcon icon={faGithub}/>
                </a>
                <a href="https://twitter.com/aav_shr">
                    <FontAwesomeIcon icon={faTwitter}/>
                </a>
                <a href="https://linkedin.com/in/aavshr">
                    <FontAwesomeIcon icon={faLinkedin}/>
                </a>
                <a href="mailto:[email protected]">
                    <FontAwesomeIcon icon={faEnvelope}/>
                </a>
            </LinksDiv>
        </TitleBarDiv>
    );
}

Footer = ({post}) => (
    <div>
    <footer class="page-footer font-small special-color-dark pt-4">
      <div class="container">
        <ul class="list-unstyled list-inline text-center">

          <li class="list-inline-item">
            <a class="btn-floating btn-fb mx-1" href="https://github.com/Jackbaude/tmc-wiki" target="_blank"rel="noreferrer noopener">
              <FontAwesomeIcon icon={faGithub} size="2x"/>
            </a>
          </li>

          <li class="list-inline-item">
            <a class="btn-floating btn-tw mx-1" href="https://discord.gg/FcTFg2E" target="_blank"rel="noreferrer noopener">
              <FontAwesomeIcon icon={faDiscord} size="2x"/>
            </a>
          </li>

          <li class="list-inline-item">
            <a class="btn-floating btn-gplus mx-1" href="https://www.youtube.com/channel/UCf9SYal_h3WSoksvxLYruuQ"target="_blank"rel="noreferrer noopener">
              <FontAwesomeIcon icon={faYoutube} size="2x"/>
            </a>
          </li>
        </ul>

      </div>

      <div class="footer-copyright text-center py-3">© 2020 Copyright:
        <a href="www.technicalmc.xyz/"> technicalmc.xyz</a>
      </div>
    </footer>
    </div>
)

render() {
    return (
      <section className="resume-section p-3 p-lg-5 d-flex align-items-center" id="about">
        <div className="w-100">
          <h1 className="mb-0">{this.landingData.firstName}
            <span className="text-primary">{this.landingData.lastName}</span>
          </h1>
          <div className="subheading mb-5">{this.landingData.phoneNumber} ·
            <a href="mailto:[email protected]">{this.landingData.email}</a>
          </div>
          <p className="lead mb-5">{this.landingData.bio}</p>
          <div className="social-icons">
            <a href={this.landingData.linkedin}>
              <FontAwesomeIcon icon={faLinkedin} />
            </a>
            <a href={this.landingData.github}>
              <FontAwesomeIcon icon={faGithub} />
            </a>
          </div>
        </div>
      </section>
    );
  }

function Header() {
  return (
    <header>
      <a href="http://chatsociety.netlify.app/">
        <h1>Chat Society</h1>
      </a>
      <a
        href="https://github.com/swapnilsparsh/ChatSociety"
        className="git-icn"
        target="_blank"
        rel="noreferrer"
      >
        <FontAwesomeIcon size="3x" icon={faGithub} />
      </a>
      <Signout />
    </header>
  );
}

GithubUser = ({username, title, auth_token}) => {

  const [loading, setLoading] = useState(true)
  const [user, setUser] = useState(null)

  useEffect(() => {
    const userFetchUrl = `https://api.github.com/users/${username}?access_token=${auth_token}`
    setLoading(true)
    fetch(userFetchUrl, { 
      method: 'GET', 
      headers: new Headers({
        'Authorization': auth_token, 
        'Content-Type': 'application/json'
    })})
    .then((res) => res.json()).then((data) => {
      setUser(data)
      setLoading(false)
    })
    .catch((err) => { throw err });
  }, [username, auth_token])

  return (
    <div className="github-user-component">
      {title ? <div className="header-component">
        <h2><FontAwesomeIcon className="icon-h2" icon={faGithub} /> <span className="h2-title">{title}</span></h2>
      </div> : null}
      {user && !user.message ? 
      <Container>
        {loading && <p>Fetching the profile</p>}
        {user ? 
          <GithubCard name={user.name} description={user.bio} 
                      twitter={user.twitter_username} image={user.avatar_url}
                      username={user.login} url={user.html_url}
                      location={user.location} repo={user.public_repos}
                      from={user.created_at} blog={user.blog} /> 
        : null}
      </Container>  
      : <div style={{textAlign: "center"}}><h2>User Not Found, Please Check the Username or the Auth Token</h2></div>}   
    </div>
  )
}

GithubOrgMembers = ({orgname, title, auth_token, limit, showSearchBar}) => {

  const [loading, setLoading] = useState(true)
  const [members, setMembers] = useState(null)
  const [searchItem, setSearchItem] = useState("");
  const [searchResults, setSearchResults] = useState(members)

  useEffect(() => {
    const membersFetchUrl = `https://api.github.com/orgs/${orgname}/members?access_token=${auth_token}`
    setLoading(true)
    fetch(membersFetchUrl, { 
      method: 'GET', 
      headers: new Headers({
        'Authorization': auth_token, 
        'Content-Type': 'application/json'
    })})
    .then((res) => res.json()).then((data) => {
      setMembers(data)
      setSearchResults(data)
      setLoading(false)
    })
    .catch((err) => { throw err });
  }, [orgname, auth_token])

  const handleSearch = async (searchItem) => {
    const results = members.filter(member =>
      member.login.toLowerCase().includes(searchItem)
    );
    setSearchItem(searchItem);
    setSearchResults(results);
  }

  return (
    <div className="github-members-component">
      {title ? <div className="header-component">
        <h2>
          <FontAwesomeIcon className="icon-h2" icon={faGithub} /> <span className="h2-title">{title} {orgname}</span>
        </h2>
      </div> : null}
      {members && !members.message ? 
      <Container>
        {loading && <p>Fetching the profile</p>}
        <div className="contributors-search">
           {showSearchBar ? 
             <SearchBar input={searchItem} handleSearch={handleSearch} placeHolder="Search Members" />
            : null}
        </div>

        <Row>
            {searchResults &&  searchResults.map((member, index) => {
                if(index < limit){
                    return (
                        <div className="member-card" key={index} onClick={() => window.open(member.html_url, "_blank")}>
                            <div>
                              <img src={member.avatar_url} alt="Profile-img" className="member-img" />
                            </div>                      
                            <p className="member-title">{member.login}</p>
                        </div>
                    )
                }               
            })}
        </Row>
        <div style={{textAlign: "center", paddingBottom: "10px"}}>
            <p className="member-para">
              <FontAwesomeIcon className="icon" icon={faCubes} /> The Building Blocks of {orgname}
            </p>
        </div>
      </Container>  
      : <div style={{textAlign: "center"}}>
          <h2>Organization Not Found, Please Check the orgname or the Auth-Token</h2>
        </div>}   
    </div>
  )
}

GithubContributors = ({projectname, title, auth_token, limit, showSearchBar}) => {

  const [loading, setLoading] = useState(true)
  const [contributors, setContributors] = useState(null)
  const [searchItem, setSearchItem] = useState("");
  const [searchResults, setSearchResults] = useState(contributors)

  useEffect(() => {
    const contributorsFetchUrl = `https://api.github.com/repos/${projectname}/contributors?access_token=${auth_token}`
    setLoading(true)
    fetch(contributorsFetchUrl, { 
      method: 'GET', 
      headers: new Headers({
        'Authorization': auth_token, 
        'Content-Type': 'application/json'
    })})
    .then((res) => res.json()).then((data) => {
      setContributors(data)
      setSearchResults(data)
      setLoading(false)
    })
    .catch((err) => { throw err });
  }, [projectname, auth_token])

  const handleSearch = async (searchItem) => {
    const results = contributors.filter(contributor =>
      contributor.login.toLowerCase().includes(searchItem)
    );
    setSearchItem(searchItem);
    setSearchResults(results);
  }

  return (
    <div className="github-contributors-component">
      {title ? <div className="header-component">
        <h2><FontAwesomeIcon className="icon-h2" icon={faGithub} /> <span className="h2-title">{title} {projectname}</span></h2>
      </div> : null}
      {contributors && !contributors.message ? 
      <Container>
        {loading && <p>Fetching the profile</p>}
        <div className="contributors-search">{showSearchBar ? <SearchBar input={searchItem} handleSearch={handleSearch} placeHolder="Search Contributors" />: null}</div>
        <Row>
            {searchResults && searchResults.map((member, index) => {
                if(index < limit){
                    return (
                        <div className="member-card" key={index} onClick={() => window.open(member.html_url, "_blank")}>
                            <div><img src={member.avatar_url} alt="Profile-img" className="member-img" /></div>                      
                            <p className="member-title">{member.login}</p>
                        </div>
                    )
                }               
            })}
        </Row>
        <div style={{textAlign: "center"}}>
            <p className="member-para"><FontAwesomeIcon className="icon" icon={faCodeBranch} /> We value our Contributors!</p>
        </div>
      </Container>  
      : <div style={{textAlign: "center"}}><h2>Project Not Found, Please Check the Project name or the Auth-Token</h2></div>}   
    </div>
  )
}

function ProfileCardComponent(props){

    const [currentComponent, setCurrentComponent] = useState('MarkDownDesign');

    const switchDesign = () =>{
        if (currentComponent === 'MarkDownDesign'){
            setCurrentComponent('MarkDownCode');
        }else if (currentComponent === 'MarkDownCode'){
            setCurrentComponent('MarkDownDesign');
        }
    }

    return(
        <React.Fragment>
            <div className={styles.ProfileCard}>
                <div className={styles.CardHeader}>
                    <div className={styles.chipLeft}>
                        <a className={styles.icon} href={`https://github.com/${props.profileDetails.githubUserName}`} rel="noopener noreferrer" target="_blank">
                            <div className={styles.icon__github}>
                                <FontAwesomeIcon name="search" icon={faGithub}></FontAwesomeIcon>
                            </div>
                        </a>
                        <h3>{props.profileDetails.githubUserName}</h3>
                    </div>
                    <div className={styles.chipRight}>
                        <h3>Show Code</h3>
                        <div className={styles.switch}>                    
                            <div className={styles.switch__toggle}>
                                <input id={props.index} type="checkbox"  onClick={switchDesign}/>
                                <label htmlFor={props.index}></label>
                            </div>
                        </div>
                    </div>    
                </div>  
            { 
                (currentComponent === 'MarkDownDesign') 
                ?  <MDEditor.Markdown source={props.markDown} />
                : <SyntaxHighlighter language="markdown" style={darcula}>
                    {props.markDown}
                    </SyntaxHighlighter>
            }
        </div>
        

        </React.Fragment>
        
    )

}

library.add(faGithub);

function AppNav() {
    const { t, i18n } = useTranslation();

    return (
        <Navbar bg="light" expand="lg" className="mb-3 navbar-mobile-thin">
            <Navbar.Brand href="/" className="title">
                <img
                    src={MaskMapLogo}
                    width="24px"
                    alt="공적 마스크 지도 로고"
                    className="mr-2"
                />
                {t("appName")}
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav">
                <span></span>
                <span></span>
                <span></span>
            </Navbar.Toggle>
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="ml-auto">
                    <NavDropdown title="? Language">
                        <NavDropdown.Item
                            onClick={() => i18n.changeLanguage("ko")}>
                            한국어
                        </NavDropdown.Item>
                        <NavDropdown.Item
                            onClick={() => i18n.changeLanguage("en")}>
                            English
                        </NavDropdown.Item>
                        <NavDropdown.Item
                            onClick={() => i18n.changeLanguage("zh")}>
                            中文
                        </NavDropdown.Item>
                    </NavDropdown>
                    <Nav.Link href="https://livecorona.co.kr">
                        <FontAwesomeIcon icon={faChartArea} size="lg" />{" "}
                        {t("covid19Dashboard")}
                    </Nav.Link>
                    <Nav.Link href="https://github.com/LiveCoronaDetector/">
                        <FontAwesomeIcon icon={faGithub} size="lg" />{" "}
                        {t("github")}
                    </Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    );
}

export default function () {
  library.add(faGithub, faWindows, faLinux, faTwitter, faReddit, faTelegram, faCheckCircle, faMicrochip, faTrashAlt,
    faPaperPlane, faSpinner, faFlask, faInfoCircle, faPen, faTools, faCheck, faPlus, faCog, faExclamationTriangle,
    faQuestionCircle, faSyncAlt, faInfinity, faDownload, faCopy, faPlug, faTimesCircle);
}

UserLinks = (props) => {
  const { config } = props;

  const getLinkIcons = (icon) => {
    switch (icon) {
      case 'faGithub':
        return <FontAwesomeIcon icon={faGithub} />;
      case 'faTwitter':
        return <FontAwesomeIcon icon={faTwitter} />;
      case 'faEnvelope':
        return <FontAwesomeIcon icon={faEnvelope} />;
      case 'faMedium':
        return <FontAwesomeIcon icon={faMedium} />;
      case 'faDev':
        return <FontAwesomeIcon icon={faDev} />;
    }
  };

  const getLinkElements = () => {
    const { userLinks } = config;
    return userLinks.map((link) => (
      <a
        href={link.url}
        target="_blank"
        rel="noopener noreferrer"
        key={link.label}
      >
        {getLinkIcons(link.iconClassName)}
        <div className="user-link-text">{link.label}</div>
      </a>
    ));
  };

  const { userLinks, siteRss } = config;
  if (!userLinks) {
    return null;
  }
  return (
    <div className="user-links">
      {getLinkElements()}
      <a href={siteRss} target="_blank" rel="noopener noreferrer">
        <FontAwesomeIcon icon={faRssSquare} />
        <div>RSS</div>
      </a>
    </div>
  );
}

export default function Links() {
  return (
    <ul className="list-group list-group-horizontal">
      <li className="list-group-item">
        <a
          href="mailto:[email protected]"
          target="_blank"
          rel="noreferrer"
          alt="email link"
        >
          <FontAwesomeIcon icon={faEnvelope} />
        </a>
      </li>
      <li className="list-group-item">
        <a
          href="https://github.com/yezz123"
          target="_blank"
          rel="noreferrer"
          alt="github link"
        >
          <FontAwesomeIcon icon={faGithub} />
        </a>
      </li>
      <li className="list-group-item">
        <a
          href="https://linkedin.com/in/yezz123"
          target="_blank"
          rel="noreferrer"
          alt="linkedin link"
        >
          <FontAwesomeIcon icon={faLinkedin} />
        </a>
      </li>
      <li className="list-group-item">
        <a
          href="https://twitter.com/THyasser1"
          target="_blank"
          rel="noreferrer"
          alt="twitter link"
        >
          <FontAwesomeIcon icon={faTwitter} />
        </a>
      </li>
    </ul>
  )
}

library.add(faGithub);

function footer() {
  return (
    <footer>
      <nav className={componentStyles.footerNav}>
        <Connect className={componentStyles.connectLogo} alt={`Connect Logo`} />
        <div className={componentStyles.socials}>
          <a
            href="https://www.meetup.com/freeCodeCamp-Nashville/"
            aria-label="Meetup"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faMeetup} size="1x" color="#444444" />
          </a>
          <a
            href="https://discord.gg/cX9BkKrAPV"
            aria-label="Discord"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faDiscord} size="1x" color="#444444" />
          </a>
          <a
            href="https://nashdev.com/"
            aria-label="Slack"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faSlack} size="1x" color="#444444" />
          </a>
          <a
            href="https://github.com/nashvillefcc/"
            aria-label="GitHub"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faGithub} size="1x" color="#444444" />
          </a>
          <a
            href="https://twitter.com/nashvillefcc/"
            aria-label="Twitter"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faTwitter} size="1x" color="#444444" />
          </a>
          <a
            href="https://www.facebook.com/groups/free.code.camp.nashville/permalink/1479740658703738/"
            aria-label="Facebook"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faFacebook} size="1x" color="#444444" />
          </a>
        </div>
        <div className={componentStyles.emailAndCopyright}>
          <div>
            <a
              href="mailto:[email protected]"
              className={componentStyles.emailLink}
            >
              <FontAwesomeIcon icon={faEnvelope} size="2x" color="white" />
              <p className={componentStyles.emailName}>[email protected]</p>{' '}
              {/* This will change to something else once we setup a domain */}
            </a>
            <p>© 2021 FreeCodeCamp Nashville</p>
          </div>

          <a href="https://www.netlify.com">
            <img
              src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg"
              alt="Deploys by Netlify"
            />
          </a>
        </div>
      </nav>
    </footer>
  );
}

function FooterSmall() {
  const [showFooter, setShowFooter] = useState(false)
  window.addEventListener('scroll', (e) => {
    myFunction()
  })
  function myFunction() {
    // console.log(window.pageYOffset);
    if (window.pageYOffset < 100) {
      setShowFooter(false)
    } else {
      setShowFooter(true)
    }
  }

  return (
    <div
      id="myfooter"
      className={`footerSmall m-0 ${
        showFooter || window.pageYOffset === 0 ? '' : 'hide'
      }`}
    >
      <div className="container-fluid p-4 m-0">
        <div className="row justify-content-center">
          <div className="col-6 col-sm-6">
            <p
              style={{
                fontSize: '18px',
                padding: '0px',
                margin: '0px',
              }}
            >
              © Copyright Codedigger 2021
            </p>
          </div>

          <div className="col-6 col-sm-6 m-0">
            <div className="float-right m-0">
              <a
                className="social_media"
                target="_blank"
                href="https://www.facebook.com/practicewithcodedigger"
              >
                <FontAwesomeIcon icon={faFacebook} size="2x" />
              </a>
              <a
                className="social_media"
                target="_blank"
                href="https://www.linkedin.com/company/codedigger"
              >
                <FontAwesomeIcon icon={faLinkedin} size="2x" />
              </a>
              <a
                className="social_media"
                target="_blank"
                href="https://github.com/Code-dig-ger"
              >
                <FontAwesomeIcon icon={faGithub} size="2x" />
              </a>
              <a
                className="social_media"
                target="_blank"
                href="https://www.youtube.com/channel/UCY5XRYpEGKT9cpzZmfWvh6A"
              >
                <FontAwesomeIcon icon={faYoutube} size="2x" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

library.add(faGithub)

Header = ({ siteTitle, showTitle, isPostTemplate }) => {
  return (
    <StyledMainHeader className="main-header">
      {/* Google AdSense */}
      {config.googleAdSenseId && config.googleAdSenseId !== "" && (
        <script
          data-ad-client={config.googleAdSenseId}
          async
          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
        ></script>
      )}

      {isPostTemplate && config.useScrollIndicator && <ProgressBar />}

      <StyledMainHeaderInner className="main-header-inner">
        <h1 style={{ fontSize: "1.5rem" }}>
          {showTitle && <Link to="/">{`${siteTitle}`}</Link>}
        </h1>
        <StyledMediaIcons>
          <HeaderIcon
            accountInfo={config.socialMediaLinks.email}
            mediaName={"email"}
            preHref={"mailto:"}
            icon={faEnvelope}
          />

          <HeaderIcon
            accountInfo={config.socialMediaLinks.github}
            mediaName={"github"}
            preHref={"https://github.com/"}
            icon={faGithub}
          />

          <HeaderIcon
            accountInfo={config.socialMediaLinks.facebook}
            mediaName={"facebook"}
            preHref={"https://facebook.com/"}
            icon={faFacebook}
          />

          <HeaderIcon
            accountInfo={config.socialMediaLinks.instagram}
            mediaName={"instagram"}
            preHref={"https://instagram.com/"}
            icon={faInstagram}
          />

          <HeaderIcon
            accountInfo={config.socialMediaLinks.twitter}
            mediaName={"twitter"}
            preHref={"https://twitter.com/"}
            icon={faTwitter}
          />

          <HeaderIcon
            accountInfo={config.socialMediaLinks.linkedIn}
            mediaName={"linkedin"}
            preHref={"https://linkedin.com/"}
            icon={faLinkedin}
          />

          <HeaderIcon
            accountInfo={config.socialMediaLinks.medium}
            mediaName={"medium"}
            preHref={"https://medium.com/@"}
            icon={faMedium}
          />
        </StyledMediaIcons>
      </StyledMainHeaderInner>
    </StyledMainHeader>
  )
}

render () {
    return (
      <section id='footer'>
        <Row className='footer-container'>
          <Col md={5} className='footer-section'>
            <Row>
              <Col md={12} className='mb-1'>
                <p className='section-tittle'>Produced By</p>

                <a
                  href={siteConfig.hostUrl}
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {siteConfig.hostText}
                </a>
              </Col>
              <Col md={12}>
                <p className='section-tittle'>Source Code</p>
                <FontAwesomeIcon className='' size='lg' icon={faGithub} />
                <a
                  href={siteConfig.sourceCode}
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  Github
                </a>
              </Col>
            </Row>
          </Col>
          <Col md={7} className='footer-section'>
            <div className='pull-right'>
              <p className='section-tittle'>Ways to access this web-app</p>
              <ul>
                <li id='web'>
                  <span>
                    <b>Web</b>
                  </span>
                  <b className='bar-space'>|</b>
                  <a href={siteConfig.clearWebUrl}>{siteConfig.clearWebUrl}</a>
                </li>

                <li id='tor'>
                  <span>
                    <b>Tor</b>
                  </span>
                  <b className='bar-space'>|</b>
                  <a href={`http://${siteConfig.torUrl}`}>
                    {siteConfig.torUrl}
                  </a>
                </li>

                <li id='ipfs'>
                  <span>
                    <b>IPFS</b>
                  </span>
                  <b className='bar-space'>|</b>
                  <a href={_this.state.ipfsHashLink}>{this.state.ipfsHash}</a>
                </li>

                <li id='memo'>
                  <span>
                    <b>Memo</b>
                  </span>
                  <b className='bar-space'>|</b>
                  <a
                    href={`https://memo.cash/profile/${siteConfig.memoAddr}`}
                    target='_blank'
                    rel='noopener noreferrer'
                  >
                    {siteConfig.memoAddr}
                  </a>
                </li>
              </ul>
            </div>
          </Col>
        </Row>
      </section>
    )
  }

library.add(fab, faGithub);

Nav = ({ post }) => (
  <nav className="navbar navbar-expand-lg">
    <a className="navbar-brand" href="/"><h5 className="brand-name display-4 animate__animated animate__flipInX"></h5></a>
    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>

    <div className="collapse navbar-collapse" id="navbarSupportedContent">
      <ul className="navbar-nav mr-auto">
        <li className="nav-item active">
          <a className="nav-link" href="/posts">Posts<span className="sr-only">(current)</span></a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href="https://github.com/Jackbaude/tmc-wiki" target="_blank"rel="noreferrer noopener"><FontAwesomeIcon icon={faGithub}/> Github</a>
        </li>
        <li className="nav-item dropdown">
          <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            More
          </a>
          <div className="dropdown-menu" aria-labelledby="navbarDropdown">
            <a className="dropdown-item" href="https://discord.gg/FcTFg2E" target="_blank"rel="noreferrer noopener"><FontAwesomeIcon icon={faDiscord}/> Discord</a>
            <div className="dropdown-divider"></div>
            <a className="dropdown-item" href="https://www.youtube.com/channel/UCf9SYal_h3WSoksvxLYruuQ"target="_blank"rel="noreferrer noopener"> <FontAwesomeIcon icon={faYoutube}/> Youtube</a>


          </div>
        </li>
      </ul>
      <StaticQuery
    query={graphql`
        query SearchIndexQuery {
          siteSearchIndex {
            index
          }
        }
      `}
    render={data => (
      <Search searchIndex={data.siteSearchIndex.index}/>
    )}
  />
    </div>
  </nav>
)