react-feather#ExternalLink JavaScript Examples

Section = ({ icon, children, id, name }) => {
  let numChildren = 1
  if (Array.isArray(children)) {
    numChildren = Math.min(2, children.length)
  }

  let book = undefined
  if (id === "core") {
    let url = "https://www.manning.com/books/vertx-in-action"
    book = (
      <div className="docs-index-section-book">
        <a href={url} target="_blank" rel="noopener noreferrer">
          <img src={require("../../assets/book-cover-medium.jpg")} width="230"
            alt="Vert.x in Action book cover" />
        </a><br />
        <a href={url} target="_blank" rel="noopener noreferrer">
          Get the book ... <ExternalLink className="external-link-icon" size="1em" />
        </a>
      </div>
    )
  }

  return (
    <section className="docs-index-section" id={id}>
      <div className="docs-index-section-wrapper">
        <div className="docs-index-section-header">
          <h3>{icon} {name}</h3>
        </div>
        <div className={`docs-index-section-content docs-index-section-content-${numChildren}`}>
          {children}
        </div>
      </div>
      {book}
    </section>
  )
}

function Member({className, style, name, bio, link, image, socials = {}}) {
  const [loaded, setLoaded] = useState(false);

  const socialIcons = useMemo(
    () => ({
      github: <GitHub size={16} />,
      linkedin: <Linkedin size={16} />,
      twitter: <Twitter size={16} />,
      instagram: <Instagram size={16} />,
    }),
    []
  );

  return (
    <animated.div className={classnames('Member', className)} {...{style}}>
      {link && <a href={link} target="_blank" rel="noopener noreferrer"></a>}
      {!loaded && (
        <div className="image">
          <ContentLoader
            backgroundColor="#888"
            foregroundColor="#888"
            backgroundOpacity={0.2}
            foregroundOpacity={0.4}
          >
            <rect x="0" y="0" width="256" height="256" />
          </ContentLoader>
        </div>
      )}
      <img
        className="image"
        src={`${VOLUNTEERS_DOMAIN}/images/${image ? image : PLACEHOLDER_IMG}`}
        alt={name}
        onLoad={setLoaded.bind(this, true)}
        style={{display: loaded ? 'block' : 'none'}}
      />
      <div className="details">
        <h2 className="name">{name}</h2>
        <p className="bio">{bio}</p>
        <div className="socials">
          {Object.entries(socialIcons).map(
            ([social, icon]) =>
              socials[social] && (
                <a
                  key={social}
                  className={classnames('icon', social)}
                  href={socials[social]}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {icon}
                </a>
              )
          )}
        </div>
      </div>
      {link && (
        <div className="link-external">
          <ExternalLink size={16} />
        </div>
      )}
    </animated.div>
  );
}

SidebarLayout = ({ location }) => (
  <StaticQuery
    query={graphql`
      query {
        allMdx {
          edges {
            node {
              fields {
                slug
                title
              }
            }
          }
        }
      }
    `}
    render={({ allMdx }) => {
      return (
        <Sidebar>
          {config.sidebar.title ? (
            <div
              className={'sidebarTitle hiddenMobile'}
              dangerouslySetInnerHTML={{ __html: config.sidebar.title }}
            />
          ) : null}
          <ul className={'sideBarUL'}>
            <Tree edges={allMdx.edges} />
            {config.sidebar.links && config.sidebar.links.length > 0 && (
              <Divider />
            )}
            {config.sidebar.links.map((link, key) => {
              if (link.link !== '' && link.text !== '') {
                return (
                  <ListItem key={key} to={link.link}>
                    {link.text}
                    <ExternalLink size={14} />
                  </ListItem>
                )
              }
            })}
          </ul>
        </Sidebar>
      )
    }}
  />
)

SidebarLayout = ({ location }) => (
  <StaticQuery
    query={graphql`
      query {
        allMdx {
          edges {
            node {
              fields {
                slug
                title
              }
            }
          }
        }
      }
    `}
    render={({ allMdx }) => {
      return (
        <Sidebar>
          {config.sidebar.title ? (
            <div
              className={'sidebarTitle hiddenMobile'}
              dangerouslySetInnerHTML={{ __html: config.sidebar.title }}
            />
          ) : null}
          <ul className={'sideBarUL'}>
            <Tree edges={allMdx.edges} />
            {config.sidebar.links && config.sidebar.links.length > 0 && <Divider />}
            {config.sidebar.links.map((link, key) => {
              if (link.link !== '' && link.text !== '') {
                return (
                  <ListItem key={key} to={link.link}>
                    {link.text}
                    <ExternalLink size={14} />
                  </ListItem>
                );
              }
            })}
          </ul>
        </Sidebar>
      );
    }}
  />
)

NavBar = () => {
  const refNavBar = useRef()
  const refRight = useRef()
  const [collapse, setCollapse] = useState(false)
  const [rightMaxHeight, setRightMaxHeight] = useState(undefined)
  const setNavBarState = useContext(NavBarContext.Dispatch)
  const currentVersion = useContext(VersionContext.State)

  useEffect(() => {
    function updateHeight() {
      let height = refNavBar.current.clientHeight
      setNavBarState({ height })
    }

    updateHeight()

    let throttledUpdateheight = throttle(updateHeight, 100)
    window.addEventListener("resize", throttledUpdateheight)

    return () => {
      window.removeEventListener("resize", throttledUpdateheight)
    }
  }, [setNavBarState])

  const onClick = () => {
    let height = 0
    for (let c of refRight.current.children) {
      height += c.offsetHeight
    }

    if (collapse) {
      setCollapse(false)
      setRightMaxHeight(undefined)
    } else {
      setCollapse(true)
      setRightMaxHeight(height)
    }
  }

  return (
    <div className="navbar" ref={refNavBar}>
      <div className="navbar-content container">
        <div className="navbar-logo">
          <Link href="/">
            <a><img src={require("../assets/logo.svg")} alt="Vert.x Logo" /></a>
          </Link>
        </div>

        <div className="navbar-collapse-button" onClick={onClick}>
          <span></span>
          <span></span>
          <span></span>
        </div>

        <div className={classNames("navbar-right", { collapse })}
            ref={refRight} style={{ maxHeight: rightMaxHeight }}>
          <div className="navbar-menu">
            <span className="navbar-menu-item with-drop-down">
              <DropDown title="Start">
                <Link href="/introduction-to-vertx-and-reactive/">
                  <a><DropDownItem>Intro to reactive</DropDownItem></a>
                </Link>
                <Link href="/get-started/">
                  <a><DropDownItem>Get started</DropDownItem></a>
                </Link>
                <a href="https://start.vertx.io/" target="_blank" rel="noreferrer">
                  <DropDownItem>App generator <ExternalLink className="external-link-icon"
                    size="1em" /></DropDownItem>
                </a>
              </DropDown>
            </span>
            {currentVersion.version ? (
              <Link href={`/docs/${currentVersion.version}/`}>
                <a className="navbar-menu-item">Docs</a>
              </Link>
            ) : (
              <Link href="/docs/">
                <a className="navbar-menu-item">Docs</a>
              </Link>
            )}
            <span className="navbar-menu-item with-drop-down">
              <DropDown title="Resources">
                <Link href="/faq/">
                  <a><DropDownItem>FAQ</DropDownItem></a>
                </Link>
                <Link href="/channels/">
                  <a><DropDownItem>Channels</DropDownItem></a>
                </Link>
                <a href="https://how-to.vertx.io/" target="_blank" rel="noreferrer">
                  <DropDownItem>How-To’s <ExternalLink className="external-link-icon"
                    size="1em" /></DropDownItem>
                </a>
                <a href="https://github.com/vert-x3/vertx-eventbus-bridge-clients" target="_blank" rel="noreferrer">
                  <DropDownItem>EventBus Bridge Clients <ExternalLink className="external-link-icon"
                    size="1em" /></DropDownItem>
                </a>
                <a href="https://github.com/vert-x3/advanced-vertx-guide" target="_blank" rel="noreferrer">
                  <DropDownItem>Advanced Vert.x Guide <ExternalLink className="external-link-icon"
                    size="1em" /></DropDownItem>
                </a>
              </DropDown>
            </span>
            <Link href="/blog/">
              <a className="navbar-menu-item">Blog</a>
            </Link>
            <Link href="/community/">
              <a className="navbar-menu-item">Community</a>
            </Link>
          </div>

          <div className="navbar-social">
            <Tooltip title="Awesome Vert.x">
              <a href="https://github.com/vert-x3/vertx-awesome" className="navbar-social-link" target="_blank" rel="noopener noreferrer">
                <SimpleIcon icon={siAwesomelists} aria-label="List of awesome Vert.x projects" title="" />
              </a>
            </Tooltip>
            <Tooltip title="Stack Overflow">
              <a href="https://stackoverflow.com/questions/tagged/vert.x" className="navbar-social-link" target="_blank" rel="noopener noreferrer">
                <SimpleIcon icon={siStackoverflow} aria-label="Stack Overflow questions related to Vert.x" title="" />
              </a>
            </Tooltip>
            <Tooltip title="YouTube">
              <a href="https://www.youtube.com/channel/UCGN6L3tRhs92Uer3c6VxOSA" className="navbar-social-link" target="_blank" rel="noopener noreferrer">
                <SimpleIcon icon={siYoutube} aria-label="YouTube channel of Vert.x" title="" />
              </a>
            </Tooltip>
            <Tooltip title="Discord">
              <a href="https://discord.gg/6ry7aqPWXy" className="navbar-social-link" target="_blank" rel="noopener noreferrer">
                <SimpleIcon icon={siDiscord} aria-label="Eclipse Vert.x channel on Discord" title="" />
              </a>
            </Tooltip>
            <Tooltip title="Vert.x User Group">
              <a href="https://groups.google.com/forum/?fromgroups#!forum/vertx" className="navbar-social-link" target="_blank" rel="noopener noreferrer">
                <SimpleIcon icon={siGooglemessages} aria-label="A Google group for Vert.x users" title="" />
              </a>
            </Tooltip>
          </div>
        </div>
      </div>
      <style jsx>{styles}</style>
    </div>
  )
}