gatsby#Link JavaScript Examples

NavLink = React.forwardRef(({ item, ...props }, ref) => {
  const docs = useDocs()
  const current = useCurrentDoc()

  if (item.hidden) {
    return null
  }

  const to = item.route.startsWith('/') ? item.route : '/' + item.route;
  const headings = docs && getHeadings(item.route, docs)
  const isCurrent = item.route === current.route
  const showHeadings = isCurrent && headings && headings.length > 0
  const currentHash = getCurrentHash()
  return (
    <React.Fragment>
      <Link
        {...props}
        to={to}
        sx={styles.link}
        activeClassName="active"
        ref={ref}
      />
      {showHeadings &&
        headings.map(heading => (
          <Link
            key={heading.slug}
            to={`${to}#${heading.slug}`}
            sx={styles.smallLink}
            className={currentHash === `#${heading.slug}` ? 'active' : ''}
          >
            {heading.value}
          </Link>
        ))}
    </React.Fragment>
  )
})

// import { ThemeManagerContext } from '../styles/themeManager'

function Dropdown(props) {
  const items = props.links.map(node => {
    const title = node.name
    return (
      <StyledFooterLink key={node.name}>
        {node.link.split('.').slice(-1)[0] === 'pdf' ? (
          <a href={node.link} target="_blank" rel="noopener noreferrer">
            {title}
          </a>
        ) : node.link.split('/')[0] === '' ? (
          <Link to={node.link}>{title}</Link>
        ) : (
          <a href={node.link}>{title}</a>
        )}
      </StyledFooterLink>
    )
  })
  return <StyledFooterLinkSection>{items}</StyledFooterLinkSection>
}

export default function PanoramaInicio() {
  return (
    <header className="bg-img">
      <Navbar usarTransparencia={true} />
      <div className="contenedor contenido-header">
        <h1>
          El secreto para salir adelante <br /> es simplemente empezar
        </h1>
        <Link className="boton boton-header-curso" to="/courses">
          Cursos
        </Link>
      </div>
    </header>
  )
}

ArticlePreview = (props) => {
  const author = props.author;
  const date = props.date;
  const postPath = props.postPath;
  const title = props.title;
  const description = props.description;
  const excerpt = props.excerpt;
  const identifier = props.identifier;

  return (
    <article>
      <header>
        <h3
          style={{
            marginBottom: rhythm(1 / 4),
          }}
        >
          <Link style={{ boxShadow: "none" }} to={postPath}>
            {title}
          </Link>
        </h3>
        <Byline author={author} date={date} identifier={identifier}/>
      </header>
      <section>
        <p>
          {description || excerpt} <Link to={postPath}>Read more</Link>
        </p>
      </section>
    </article>
  );
}

NavLink = styled(Link)`
  color: #222;
  font-size: 1rem;
  font-weight: ${props => props.fontWeight || "normal"};
  line-height: 1;
  margin: 0 0.5rem 0 0;
  padding: 0.25rem;
  text-decoration: none;
  background-image: none;

  &.current-page {
    border-bottom: 2px solid #222;
  }

  &:last-of-type {
    margin-right: 0;
  }
`

CtaLink = ({
  to,
  children,
  centered = false,
  extraMargin = false,
  bold = false,
  className,
}) => (
  <Link
    to={to}
    className={classnames(
      ctaLinkStyle.cta,
      centered && ctaLinkStyle.centered,
      bold && ctaLinkStyle.bold,
      extraMargin && ctaLinkStyle.extraMargin,
      className,
    )}
  >
    {children}
    <Arrow />
  </Link>
)

MeetupPost = ({ data }) => {
  const { body, frontmatter, parent } = data.mdx;

  return (
    <MeetupLayout title={frontmatter.title}>
      <Stack spacing={8}>
        <A as={Link} to="/meetups">
          Retour à la liste des meetups
        </A>
        <MeetupTitle metadata={frontmatter} />
        <MeetupRegistration metadata={frontmatter} />
        <Box>
          <MDXRenderer>{body}</MDXRenderer>
        </Box>
        <MeetupRegistration metadata={frontmatter} />
        <Button
          variant="outline"
          as="a"
          href={`https://github.com/CodeursEnSeine/codeursenseine-new/edit/master/content/meetups/${parent.base}`}
          leftIcon={<FaGithub />}
        >
          Modifier cette page
        </Button>
      </Stack>
    </MeetupLayout>
  );
}

render() {
    return (
      <nav className={styles.navbar}>
        <ul className={styles.dropdownContent}>
          {usecases.map(usecase => {
            return (
              <Link
                spy={true}
                smooth={true}
                to={`#${usecase}-title`}
                onClick={() => {
                  this.boldButton(usecase)
                }}
                className={classNames(styles.listSet, {
                  [styles.listSetBold]: this.state.bold === usecase,
                })}
              >
                <div>
                  {this.state.bold === usecase ? (
                    <FontAwesomeIcon
                      icon={faArrowRight}
                      className={styles.selectorArrow}
                    />
                  ) : (
                    ""
                  )}
                  {usecase}
                </div>
              </Link>
            )
          })}
        </ul>
      </nav>
    )
  }

AboutLink = () => {
  return (
    <>
      {enabled ? (
        <StyledMainCardName className="main-card-name">
          <h2>
            <Link to="/about">{author}</Link>
          </h2>
        </StyledMainCardName>
      ) : (
        <StyledMainCardNameAboutDisabled>
          <h2>{author}</h2>
        </StyledMainCardNameAboutDisabled>
      )}
    </>
  )
}

BlogIndex = ({ data, location }) => {
  const siteTitle = data.site.siteMetadata.title
  const posts = data.allMarkdownRemark.edges

  return (
    <Layout location={location} title={siteTitle}>
      <SEO title="All posts" />
      {posts.map(({ node }) => {
        const title = node.frontmatter.title || node.frontmatter.path
        return (
          <article key={node.frontmatter.path}>
            <header>
              <h3
                style={{
                  marginBottom: 10,
                }}
              >
                <Link style={{ boxShadow: `none` }} to={node.frontmatter.path}>
                  {title}
                </Link>
              </h3>
              <small>{node.frontmatter.date}</small>
            </header>
            <section>
              <p
                dangerouslySetInnerHTML={{
                  __html: node.frontmatter.description || node.excerpt,
                }}
              />
            </section>
          </article>
        )
      })}
    </Layout>
  )
}

function Header({ clickMe, toggle }) {
  const data = useStaticQuery(graphql`
    query {
      utahjs: file(relativePath: { eq: "utahjs-logo.png" }) {
        childImageSharp {
          fixed(height: 65, width: 51) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `);
  return (
    <Wrapper>
      <div className="header-content">
        <div className="header-main">
          <Link to="/">
            <Img fixed={data.utahjs.childImageSharp.fixed} alt="UtahJS Logo" />
          </Link>
          <h1>UtahJS - JavaScript Engineers of Utah</h1>
        </div>
        <Hamburger clickMe={clickMe} toggle={toggle} />
      </div>
    </Wrapper>
  );
}

Header = ({ siteTitle }) => (
  <header className="border-top bg-transparent flex items-center justify-between flex-wrap p-6">
    <div className="flex items-center flex-no-shrink text">
      <h1 className="text-red font-bold font-display lg:text-3xl s:text-xl">
        <Link
          to="/"
          style={{
            textDecoration: `none`,
          }}
        >
          <img src={FSGQLogo} alt="github icon" className="w-16" />
        </Link>
      </h1>
    </div>
    <span>
      <a
        className="flex flex-row"
        target="_blank"
        rel="noopener noreferrer"
        href="https://github.com/Fullstack-Serverless-GraphQL/fullstack-serverless-graphql-docs"
      >
        <img src={Github} alt="github icon" />
      </a>
    </span>
  </header>
)

PageMessage = ({ title, large, mail, message }) => {
  const metadata = useSiteMetadata();
  const largeStyles = large ? styles.large : null;

  return (
    <div className={styles.container}>
      <h2 className={`${styles.title} ${largeStyles}`}>{title}</h2>
      <p className={`${styles.description} ${largeStyles}`}>{message}</p>

      {mail ? (
        <p className={styles.description}>
          If you have any additional questions, mail us:{' '}
          <a className={styles.link} href={`mailto:${metadata.email}`}>
            {metadata.email}
          </a>
        </p>
      ) : null}

      <Link className={styles.button} to="/portfolio">
        view projects
      </Link>
    </div>
  );
}

NavLink = ({ release, onClick = null, ...props }) => {
  // Note:  Internal links use Gatsby <Link˘
  //        External links use vanilla <a>
  const Component = isExternalUrl(props.to) ? ExternalLink : Link;
  return (
    <Component
      {...props}
      className={cx('nav-link', styles.NavLink)}
      activeClassName={styles.NavLinkCurrent}
      onClick={() => {
        // Track Navigation Click
        trackEvent(trackEvent.EVENT__CONVERSION__NAV_CLICK, {
          release,
        });
        // Callback
        onClick && onClick();
      }}
    />
  );
}

FourOhFour = ({ links, location }) => (
  <Layout homepage location={location}>
    <div className={container}>
      <h2 className={heading}>Something’s gone wrong...</h2>
      <p className={paragraph}>
        Sorry, we can’t find the page you are looking for.
        {links && ' Maybe some of these most visited links will help you?'}
      </p>
      {links && (
        <ul className={list}>
          {links.map(({ href, text }, i) => (
            <li key={i}>
              <Link className={link} to={href}>
                {text}
              </Link>
            </li>
          ))}
        </ul>
      )}
      <span className={fourOhFour}>404</span>
    </div>
  </Layout>
)

NotFoundPage = ({ data, location }) => {
  const siteTitle = data.site.siteMetadata.title

  return (
    <Layout location={location} title={siteTitle}>
      <SEO title="404: Not Found" />
      <h1>404 Not Found ?</h1>
      <p>You Sleepy Head ! You Got it wrong...</p>
      <Link to={"/"}>Go Back To Home ?</Link>
    </Layout>
  )
}

PostLink = ({ post }) => (
  <div className="post-link-container">
    <Link className="post-link" to={post.frontmatter.path}>
      {post.frontmatter.title}
    </Link>

    <p className="post-link-date">{post.frontmatter.date}</p>
    <p className="post-link-tags">{post.frontmatter.tags}</p>
  </div>
)

StyledLink = styled(Link)({
  display: 'flex',
  alignItems: 'center',
  color: 'inherit',
  textDecoration: 'none',
  svg: size(16),
  ':hover': {
    opacity: colors.hoverOpacity
  }
})

render() {
    const menu = this.props.data

    const menuBlock = (
      <ul className="menu__list">
        {menu.elements.menu_items.value.map((item) => (
          <li className="menu__list-item" key={item.id}>
            <Link
              to={`${item.elements.slug.value.startsWith('/') ? '' : '/'}${
                item.elements.slug.value
              }`}
              className="menu__list-item-link"
              activeClassName="menu__list-item-link menu__list-item-link--active"
            >
              {item.elements.label.value}
            </Link>
          </li>
        ))}
      </ul>
    )

    return <nav className="menu">{menuBlock}</nav>
  }

Header = ({ siteTitle }) => (
  <header
    style={{
      background: `rebeccapurple`,
      marginBottom: `1.45rem`,
    }}
  >
    <div
      style={{
        margin: `0 auto`,
        maxWidth: 960,
        padding: `1.45rem 1.0875rem`,
      }}
    >
      <h1 style={{ margin: 0 }}>
        <Link
          to="/"
          style={{
            color: `white`,
            textDecoration: `none`,
          }}
        >
          {siteTitle}
        </Link>
      </h1>
    </div>
  </header>
)

Bio = () => (
  <StaticQuery
    query={bioQuery}
    render={data => {
      const { author, social, introduction, othersite } = data.site.siteMetadata

      return (
        <div className="bio">
          <div className="author">
            <div className="author-description">
              <Image
                className="author-image"
                fixed={data.avatar.childImageSharp.fixed}
                alt={author}
                style={{
                  borderRadius: `100%`,
                }}
              />
              <div className="author-name">
                <span className="author-name-prefix">Written by</span>
                <Link to={social.portfolio} className="author-name-content">
                  <span>{author}</span>
                </Link>
                <div className="author-introduction">{introduction}</div>
                <p className="author-socials">
                  {othersite.map((val, idx) => (
                    <a href={val.url} key={`othersite_a_tag_` + idx}>
                      {`#` + val.name}
                    </a>
                  ))}
                </p>
              </div>
            </div>
          </div>
        </div>
      )
    }}
  />
)

StyledLink = styled(props => (
  <Link
    {...props}
    getProps={({ isCurrent }) => {
      return {
        style: {
          color: isCurrent ? "#ff9900" : "",
        },
      }
    }}
  />
))`
  width: 0;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;

  &:active {
    color: gray;
  }

  &:hover {
    color: #ff9900;
  }
`

export default function NotFound() {
  return (
    <Layout>
      <h1>Page Not Found</h1>
      <p>Oops! A monster seems to have eaten this page. Or maybe you fell down the wrong wormhole?!</p>
      <Link to='/'>Go back</Link>
    </Layout>
  );
}

DefaultLink = props => {
  const { activeStyle, newTab, children, styleOverride, to, ...rest } = props
  if (!to) {
    return <div {...rest}>{children}</div>
  }

  // checks if relative url "about/" or "/about/"
  // otherwise treats as external link
  const isInternal = /^\/(?!\/)/.test(to)
  const newTabHtmlAttributes = {
    target: newTab ? '_blank' : null,
    rel: newTab ? 'noopener' : null,
  }

  return isInternal ? (
    <Link to={to} activeStyle={activeStyle} {...newTabHtmlAttributes} {...rest}>
      {children}
    </Link>
  ) : (
    <a
      style={{ textDecoration: 'none' }}
      href={to}
      {...newTabHtmlAttributes}
      {...rest}
    >
      {children}
    </a>
  )
}

Example = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <div id="topNav">
      <Navbar color="light" className="topNav" light expand="md">
        <Link to="banner" smooth="true" duration={1000}>
          <img alt="Palembang Digital" src={"/logo.jpg"} width="50px" />
        </Link>
        <NavbarToggler onClick={toggle} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="ml-auto" navbar>
            <NavItem>
              <Link to={`/`} smooth="true" duration={1000} className="NavLink">
                Acara
              </Link>
              <Link to={`/`} smooth="true" duration={1000} className="NavLink">
                Tentang
              </Link>
              <Link to={`/`} smooth="true" duration={1000} className="NavLink">
                Kontak
              </Link>
              <NavLink href="/patal-team" className="NavLink">
                Team
              </NavLink>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
}

Navigation = () => {
  return (
    <nav>
      <div>
        Navigation:
      </div>
      <ul style={{marginLeft: 0}}>
        <li style={style}><Link to={"/dashboard/login/"} >Login</Link></li>
        <li style={style}><Link to={"/dashboard/signup/"} >SignUp</Link></li>
        <li style={style}><Link to={"/dashboard/"} >Dashboard</Link></li>
      </ul>
    </nav>
  )
}

Item = ({ children, slug, className, active }) => (
  <Link
    className={`my-1 p-4 hover:bg-purple-600 hover:text-white ${
      active ? "bg-purple-600 font-bold text-white" : "text-dark-gray"
    } ${className}`}
    to={slug}
  >
    {children}
  </Link>
)

Logo = () => {
  const [hover, setHover] = useState(false);
  const textStyle = hover ?
    {fill: '#000000', fillOpacity: 1, transition: 'fill-opacity 0.3s ease-in 0.5s'} :
    {fill: '#000000', fillOpacity: 0};
  const arrowStyleUp = hover ?
    {fill: '#f9ac00', fillOpacity: 0, transform: 'translate(0, -175%)', transition: 'all 0.5s ease-out'} :
    {fill: '#f9ac00', fillOpacity: 1};
  const arrowStyleDown = hover ?
    {fill: '#f9ac00', fillOpacity: 0, transform: 'translate(0, 175%)', transition: 'all 0.5s ease-out'} :
    {fill: '#f9ac00', fillOpacity: 1};

  return (
    <Link to="/" style={{textDecoration: 'none'}}>
      <div
        onMouseEnter={() => {
        setHover(true);
        }}
        onMouseLeave={() => {
        setHover(false);
        }}
      >
        <svg
          viewBox="0 0 33.142164 8.08943"
          height="30.574223"
          width="125.26172"
        >
          <g aria-label="MDXP">
            <path
              d="M2.2903.264584l1.932698 5.457031L6.145362.264584h2.036051v7.524088H6.625952V5.731951l.15503-3.550171-2.030884 5.606892H3.685564L1.659847 2.186947l.15503 3.545004v2.056721H.264584V.264584z"
              fill="#000000"
            />
            <path
              d="M10.868588 7.788672V.264584h2.315104q.992187 0 1.772501.449585.785482.444417 1.224732 1.27124.439249.821656.439249 1.870687v.346232q0 1.049032-.434082 1.865519-.428914.816488-1.214396 1.266073-.785481.449585-1.772501.454752zm1.550293-6.268351v5.02295h.749308q.909505 0 1.390096-.594279t.490926-1.700155v-.397909q0-1.147216-.475423-1.736328-.475423-.594279-1.390096-.594279z"
              style={textStyle}
            />
            <path
              d="M21.767147 2.858741L23.177913.264584h1.782837l-2.191081 3.731038 2.247925 3.79305h-1.803507l-1.44694-2.635497-1.44694 2.635497h-1.803508l2.247925-3.79305L18.573543.264584h1.782837z"
              fill="#000000"
            />
            <path
              d="M28.665951 5.137672v2.651h-1.550293V.264584h2.935221q.847494 0 1.488281.310059.645956.310058.992188.883667.346232.56844.346232 1.297078 0 1.105876-.759643 1.746664-.754476.63562-2.092896.63562zm0-1.255738h1.384928q.61495 0 .935344-.289388.325561-.289388.325561-.826823 0-.552937-.325561-.894002-.325562-.341064-.89917-.3514h-1.421102z"
              style={textStyle}
            />
          </g>
        
          <path
            d="M27.17157 2.144572L29.910421.264583h.14986l2.73885 1.879989v1.281576l-2.043288-1.443839v5.842537h-1.540987V1.982309L27.17157 3.426148z"
            style={arrowStyleUp}
          />
          <path
            d="M10.897262 5.908683l2.738851 1.879989h.14986l2.73885-1.879989V4.627107l-2.043288 1.443839V.264583h-1.540987v5.806363l-2.043286-1.443839z"
            style={arrowStyleDown}
          />
        </svg>
      </div>
    </Link>
  );
}

StyledCard = styled(Link)`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  max-width: 300px;
  border-radius: 20px;
  text-decoration: none;
  transform: scale(0.99);
  background-color: ${({ theme }) => theme.cardBG};
  opacity: 0.9;
  transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform;
  /* backdrop-filter: blur(40px); */
  cursor: pointer;

  @media (max-width: 960px) {
    margin-bottom: 2rem;
    padding: 1rem;
    max-width: 100%;
    width: 100%;
  }

  :hover {
    transform: scale(1);
  }

  ::after {
    content: '';
    position: absolute;
    border-radius: 20px;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: ${({ theme }) => theme.shadows.huge};
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: opacity;
  }

  :hover::after {
    opacity: 1;
  }
`