Roadmap to becoming a developer in 2022
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

81 lines
1.5 KiB

import React from 'react';
import styled from 'styled-components';
import LinkIcon from 'components/icons/link.svg';
const linkify = (Component: React.FunctionComponent<any>) => {
return function EnrichedHeading(props: { children: string }): React.ReactNode {
const text = props.children;
const id = text.toLowerCase && text
.toLowerCase()
.replace(/[^\x00-\x7F]/g, '')
.replace(/\s+/g, '-')
.replace(/[?!]/g, '');
return (
<Component id={id}>
<HeaderLink href={`#${id}`}>
<LinkIcon />
</HeaderLink>
{props.children}
</Component>
);
};
};
const HeaderLink = styled.a`
position: absolute;
top: 0;
left: -25px;
width: 25px;
display: none;
height: 100%;
align-items: center;
justify-content: flex-start;
`;
const H1 = styled.h1`
position: relative;
font-size: 32px;
line-height: 40px;
font-weight: 700;
margin: 20px 0 10px !important;
&:hover ${HeaderLink} {
display: flex;
}
`;
const H2 = styled(H1).attrs({ as: 'h2' })`
font-size: 30px;
`;
const H3 = styled(H1).attrs({ as: 'h3' })`
margin: 22px 0 8px;
font-size: 28px;
`;
const H4 = styled(H1).attrs({ as: 'h4' })`
margin: 18px 0 8px;
font-size: 24px;
`;
const H5 = styled(H1).attrs({ as: 'h5' })`
margin: 14px 0 8px;
font-size: 18px;
`;
const H6 = styled(H1).attrs({ as: 'h6' })`
margin: 12px 0 8px;
font-size: 18px;
`;
const Headings = {
h1: linkify(H1),
h2: linkify(H2),
h3: linkify(H3),
h4: linkify(H4),
h5: linkify(H5),
h6: linkify(H6)
};
export default Headings;