gatsby#Link TypeScript Examples

SideNav: React.FC = () => (
  <Flex
    flexDirection="column"
    justifyContent="space-between"
    minW={['5em', '14em']}
    bg="brand.warmGrey"
  >
    <Box>
      <Flex mt={12} justifyContent="center">
        <Box size={['5em', '7em']} p={2} mb={8}>
          <Link to="/">
            <Logo />
          </Link>
        </Box>
      </Flex>
      <Divider />
      <nav>
        <PrimaryNav />
      </nav>
    </Box>
  </Flex>
)

About = () => {
  return (
    <Wrapper color={color.background.dark}>
      <Info>
        <AboutTitle>O Poli</AboutTitle>
        <AboutText>
          Masz dość masówki globalnych koncernów? Szukasz lokalnych firm tworzących unikatowe produkty? Pola pomoże Ci
          odnaleźć polskie wyroby. Zabierając Polę na zakupy, odnajdujesz produkty „z duszą” i wspierasz polską
          gospodarkę.
        </AboutText>
        <Link to={urls.pola.about()}>
          <AboutButton
            label="Dowiedz się więcej... "
            styles={{ ...ButtonThemes[ButtonFlavor.WHITE], fontSize: fontSize.small }}
            fontSize={fontSize.small}
          />
        </Link>
      </Info>
      <MockUp>
        <ResponsiveImage imageSrc="1-prom-strona.png" />
      </MockUp>
    </Wrapper>
  );
}

Banner: React.FC<Props> = ({ title, subtitle, content, linkTo, linkText }) => (
  <Styled.Banner>
    <Container section>
      <TitleSection title={title} subtitle={subtitle} />
      <Styled.Content>{content}</Styled.Content>
      <Link to={linkTo}>
        <Button primary>{linkText}</Button>
      </Link>
    </Container>
  </Styled.Banner>
)

ButtonAsLink: FC<Props> = ({
  size = 'normal',
  children,
  theme = 'primary',
  className,
  ...rest
}: Props) => {
  return (
    <Link
      className={cx(
        'c-button',
        `c-button--${theme}`,
        {
          [`c-button--${size}`]: size !== 'normal',
        },
        className,
      )}
      {...rest}
    >
      {children}
    </Link>
  );
}

BlogListItem = ({ post, showTags = true }: BlogListItemProps) => (
  <Box mb={4}>
    <Styled.a as={Link} to={post.slug} sx={{ fontSize: [1, 2, 3], color: `text` }}>
      {post.title}
    </Styled.a>
    <p sx={{ color: `secondary`, mt: 1, a: { color: `secondary` }, fontSize: [1, 1, 2] }}>
      <time>{post.date}</time>
      {post.tags && showTags && (
        <React.Fragment>
          {` — `}
          <ItemTags tags={post.tags} />
        </React.Fragment>
      )}
    </p>
  </Box>
)

PageLink = (props: {
  className?: string
  to: string
  type?: string
  onClick?: () => void
  onMouseEnter?: () => void
  onMouseLeave?: () => void
  onMouseOver?: () => void
  children?: any
}) => (
  <Link
    type={props.type}
    className={props.className}
    activeClassName='active'
    onClick={props.onClick}
    onMouseEnter={props.onMouseEnter}
    onMouseLeave={props.onMouseLeave}
    onMouseOver={props.onMouseOver}
    to={props.to}>
    {props.children}
  </Link>
)

/**
   * React render method.
   * @return {React.ReactNode} the rendered component
   */
  render() {
    return (
      <header className="header">
        <Link to="/">
          <h1 aria-label="Defund Twelve .org">{this.props.siteTitle}</h1>
        </Link>
        <p className="divider">{this.props.subtitle}</p>
        <p aria-label="12 = Police">"12" = ?</p>
      </header>
    );
  }

export function TabLink(
  props: Omit<GatsbyLinkProps<unknown>, "ref">
): JSX.Element {
  return (
    <Link
      {...props}
      activeClassName="active"
      sx={{
        fontFamily: `sans`,
        fontSize: 0,
        fontWeight: 500,
        lineHeight: `default`,
        textDecoration: `none`,
        display: `flex`,
        alignItems: `center`,
        color: `whiteFade.60`,
        py: 3,
        pr: 2,
        pl: 3,
        "&.active": {
          backgroundColor: `purple.80`,
          color: `white`,
        },
        textOverflow: `ellipsis`,
        overflow: `hidden`,
        whiteSpace: `nowrap`,
        cursor: `pointer`,
      }}
      css={{ WebkitAppRegion: `no-drag` }}
    />
  )
}

TagLink = styled(Link)`
  position: relative;
  &:after {
    display: inline-flex;
    content: attr(data-count);
    border-radius: 10px;
    background: var(--radiantBlue);
    background-repeat: repeat-x;
    position: absolute;
    right: -1rem;
    font-size: 0.6rem;
    color: white;
    padding: 4px;
    top: -5px;
    line-height: 90%;
  }
  margin-left: 2rem;
`

LinkReference = (props: { reference: Reference}) => {
  const { reference } = props
  const { slug, title } = reference.referrer.parent?.fields!

  return (
    <div className="link-reference">
      <Link to={slug}>
        {title}
      </Link>
      <div className="link-refernce__context" dangerouslySetInnerHTML={{ __html: reference.contextLine }} />
    </div>
  );
}

Links = () => (
  <ul>
    <li>
      <Link to='/'>Default SEO</Link>
    </li>
    <li>
      <Link to='/article'>Article SEO</Link>
    </li>
    <li>
      <Link to='/book'>Book SEO</Link>
    </li>
    <li>
      <Link to='/profile'>Profile SEO</Link>
    </li>
    <li>
      <Link to='/overridden'>Overridden Seo</Link>
    </li>
    <li>
      <Link to='/jsonld'>All JSON-LD</Link>
    </li>
  </ul>
)

Policy = ({ children }: PropsWithChildren<PolicyProps>) => (
    <>
        <Header />
        <div className="main-container">
            <main className="main-container" style={{ paddingTop: 0 }}>
                <div className="policy-header">
                    <h2>协议中心</h2>
                    <div className="policy-tabs">
                        <Link to="policies/toc" className="policy-tab" activeClassName="active">用户使用协议</Link>
                        <Link to="policies/privacy" className="policy-tab" activeClassName="active">隐私协议</Link>
                        <Link to="policies/privacy-settings" className="policy-tab" activeClassName="active">隐私设置</Link>
                    </div>
                </div>
                {children}
            </main>
        </div>
    </>
)

NotFound = () => {
  return (
    <Row justify="center" align="middle" style={{ minHeight: "100vh" }}>
      <Result
        status="404"
        title="404"
        subTitle="Sorry, the page you visited does not exist."
        extra={
          <Link to="/">
            <Button type="primary">Back Home</Button>
          </Link>
        }
      />
    </Row>
  );
}

export default function StyledHeader(): JSX.Element {
  return (
    <StyledDiv>
      <h1
        style={{
          ...scale(1.3),
          marginBottom: rhythm(0),
          marginTop: 0,
        }}
      >
        <Link
          style={{
            boxShadow: `none`,
            color: `inherit`,
            textDecoration: `none`,
          }}
          to={`/`}
        />
      </h1>
      <Logo />
      <>
        <p style={{ bottom: 0 }}>
          <Clock />
          &nbsp;-&nbsp;
          <Week />
        </p>
      </>
    </StyledDiv>
  );
}

export function LinksGroup({ data, title }: LinksGroupProps) {
  const { classes } = useStyles();
  const links = data.map((link, index) => {
    const props = link.type === 'gatsby' ? { to: link.link } : { href: link.link };
    return (
      <Text<any>
        className={classes.link}
        component={link.type === 'gatsby' ? Link : 'a'}
        {...props}
        key={index}
      >
        {link.label}
      </Text>
    );
  });

  return (
    <div className={classes.wrapper}>
      <Text className={classes.title}>{title}</Text>
      {links}
    </div>
  );
}

SidebarMenuItem: React.FC<SidebarMenuItemProps> = ({
  pageLink,
  icon,
  text,
  triggerHandler,
  subItems = [],
}: SidebarMenuItemProps) => {
  const activeStyles = "bg-grey-10 text-violet-50"
  return (
    <Collapsible
      transitionTime={150}
      transitionCloseTime={150}
      {...triggerHandler()}
      trigger={
        <Link
          className={`py-1.5 px-3 my-0.5 rounded-base flex text-grey-90 hover:bg-grey-10 items-center`}
          activeClassName={activeStyles}
          to={pageLink}
          partiallyActive
        >
          <span className="items-start">{icon}</span>
          <span className="ml-3">{text}</span>
        </Link>
      }
    >
      {subItems?.length > 0 &&
        subItems.map(({ pageLink, text }) => (
          <SubItem pageLink={pageLink} text={text} />
        ))}
    </Collapsible>
  )
}

FullUsageExample = () => {
  const [activeExampleIndex, setActiveExampleIndex] = useState(0)
  const activeExample = useMemo(() => {
    return examples[activeExampleIndex]
  }, [activeExampleIndex])

  return (
    <Section>
      {examples.map((example, index) => (
        <TabItem
          active={index === activeExampleIndex}
          onClick={() => setActiveExampleIndex(index)}
        >
          {example.name}
        </TabItem>
      ))}
      <Box as={Container}>
        <>{activeExample.content()}</>
        <Box
          flex
          paddingVertical="1rem"
          paddingHorizontal="1rem"
          justifyContent="center"
        >
          <Link to={activeExample.readmoreUrl}>
            <Box
              as={InfoIcon}
              size={16}
              inline
              marginBottom={-3}
              marginRight={6}
            />
            <span>{activeExample.readmoreText}</span>
          </Link>
        </Box>
      </Box>
    </Section>
  )
}

export function ListItemTlObject({ node }: { node: ExtendedTlObject }) {
    return (
        <>
            <div style={{ padding: '16px 32px' }}>
                <MuiLink
                    component={Link}
                    to={`/${node.prefix}${node.type}/${node.name}`}
                >
                    <Typography variant="h5" color="textPrimary">
                        {node.prefix}
                        {node.name}
                    </Typography>
                </MuiLink>
                <Description description={node.description} />
            </div>
            <Divider />
        </>
    )
}

function TocItem({ data, level, active }: ItemProps) {
  if (data.children) {
    return <TocMenu data={data} level={level} active={active} />
  }
  if (data.link == null) throw new Error('plain text node is unsupported')
  return (
    <li className={navItem}>
      {data.link.startsWith('https://') ? (
        <a target="_blank" href={data.link}>
          <TocContent content={data.content} />
        </a>
      ) : (
        <Link to={data.link} className={clsx(data === active[0] && activeLink)}>
          <TocContent content={data.content} />
        </Link>
      )}
    </li>
  )
}

SectionLink = styled(Link)`
  text-decoration: none;
  font-size: 24px;
  color: hsl(240, 74%, 31%);
  border-bottom: none;
  border-bottom-style: none;
  border-bottom-color: initial;

  &:hover {
    color: hsl(240, 74%, 31%);
    border-bottom-color: hsl(240, 74%, 31%);
    border-bottom-width: 2px;
  }

  &:before {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    transition: width 420ms cubic-bezier(0.165, 0.84, 0.44, 1);
    position: absolute;
    bottom: -2px;
    width: 0;
    content: "";
  }

  &:hover::before {
    width: 100%;
    transition: width 420ms cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  &:after {
    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%206a.5.5%200%200%200%200%201V6zM12.854.646a.5.5%200%200%200-.708.708l.708-.708zM18%206.5l.354.354a.5.5%200%200%200%200-.708L18%206.5zm-5.854%205.146a.5.5%200%200%200%20.708.708l-.708-.708zM1%207h16.5V6H1v1zm16.646-.854l-5.5%205.5.708.708%205.5-5.5-.708-.708zm-5.5-4.792l2.75%202.75.708-.708-2.75-2.75-.708.708zm2.75%202.75l2.75%202.75.708-.708-2.75-2.75-.708.708z%22%20fill%3D%22%231264A3%22%2F%3E%3C%2Fsvg%3E);
    content: "";
    width: 19px;
    height: 13px;
    display: inline-block;
    margin-left: 0.5em;
  }
`

ItemTitle = styled(Link)`
  color: ${props => props.theme.colors.lightest};
  font-size: ${props => props.theme.fontSizes.medium};
  font-weight: ${props => props.theme.fontWeights.bold};
  border-bottom: none;
  &:hover {
    border-bottom: none;
  }
`

Card: VFC<Props> = ({ data }) => {
  if (data === undefined) {
    throw new Error("should be");
  }
  const { title, tags, visual, path, created } = data;
  if (
    path === undefined ||
    tags === undefined ||
    title === undefined ||
    visual === undefined ||
    created === undefined
  ) {
    throw new Error("should be");
  }
  // TODO: as 消したい
  const image = getImage(visual as ImageDataLike);
  if (image === undefined) {
    throw new Error("aa");
  }
  return (
    <Link key={path} to={`${path}/`} className={link}>
      <div className={card}>
        <GatsbyImage image={image} alt="thumbnail" className={imageWrapper} />
        <p>
          <time dateTime={created}>{created}</time>
        </p>
        <p>{title}</p>
      </div>
    </Link>
  );
}

UsingTypescript: React.FC<PageProps<DataProps>> = ({ data, path }) => (
  <Layout>
    <SEO title="Using TypeScript" />
    <h1>Gatsby supports TypeScript by default!</h1>
    <p>This means that you can create and write <em>.ts/.tsx</em> files for your pages, components etc. Please note that the <em>gatsby-*.js</em> files (like gatsby-node.js) currently don't support TypeScript yet.</p>
    <p>For type checking you'll want to install <em>typescript</em> via npm and run <em>tsc --init</em> to create a <em>.tsconfig</em> file.</p>
    <p>You're currently on the page "{path}" which was built on {data.site.buildTime}.</p>
    <p>To learn more, head over to our <a href="https://www.gatsbyjs.org/docs/typescript/">documentation about TypeScript</a>.</p>
    <Link to="/">Go back to the homepage</Link>
  </Layout>
)

rankLinker = (roster: any, rank: number, symbol: string, column: string, direction: string, search: string) => {
	if (roster) return (<>{rank}</>);
	const linkState = {
		search: search ?? '',
		column: column,
		direction: direction ?? 'ascending',
		highlight: symbol ?? ''
	};
	const baseUrl = '/';
	let params = '';
	Object.entries(linkState).forEach(entry => {
		if (entry[1] !== '') {
			if (params !== '') params += '&';
			params += entry[0]+'='+encodeURI(entry[1]);
		}
	});
	const url = params !== '' ? baseUrl+'?'+params : baseUrl;
	return (
		<Link to={url} onClick={(event) => clickLink(event)}>{rank}</Link>
	);

	// On left clicks, use state instead of URL params because it's a little faster and cleaner
	function clickLink(e) {
		if (e.button === 0) {
			e.preventDefault();
			navigate(baseUrl, { state: linkState });
		}
	}
}

ArticleListItemInner: React.FC<Props> = ({
  className,
  fields,
  frontmatter,
  excerpt,
}) => {
  const title = frontmatter.title || fields.slug
  return (
    <article className={className}>
      <header>
        <h3>
          <Link to={fields.slug}>{title}</Link>
        </h3>
        <div>
          <small>
            <ArticleDate {...frontmatter} />
          </small>
          {frontmatter.tags ? (
            <div>
              <Tags tags={frontmatter.tags} scale={-0.25} />
            </div>
          ) : null}
        </div>
      </header>
      <section>{excerpt}</section>
      <nav>
        <Link to={fields.slug}>全文を見る</Link>
      </nav>
    </article>
  )
}

ArticleLink = styled(Link)`
  text-decoration: none;
`

shortcodes = { a: Link }

Logo = styled(Link)`
  ${tw`flex items-center mr-auto text-indigo-900 hover:text-indigo-900`};
`

LinkBrand: FC<Props> = ({ className, children, activeClassName = 'is-active', ...rest }) => (
  <Link className={cx('c-link-brand', className)} activeClassName={activeClassName} {...rest}>
    {children}
  </Link>
)