/
blog-post-content.js
111 lines (98 loc) · 3.07 KB
/
blog-post-content.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React, { useContext, useState } from 'react'
import styled from 'styled-components/macro'
import { Flex } from '@rebass/grid'
import { Manager } from 'react-popper'
import GHSlugger from 'github-slugger'
import { SelectionReference, Tooltip } from '../tooltip'
import { TwitterIcon } from '../icons'
import { UnstyledButton } from '../button'
import { useOuterClickHandler } from '../outer-click-hook'
import { feedbackContext } from '../feedback'
import { useLazyIframe } from '../lazy-iframe-hook'
import { media } from '../../utils'
import TableOfContent from './TableOfContent.bs'
import './prismjs-dan-abramov-theme.css'
import { useCurrentHeading } from '../current-heading.hook'
let TocWrapper = styled.div`
display: none;
${media.wide`
display: block;
`};
position: absolute;
height: 100%;
min-width: 200px;
top: 30px;
left: calc(100% + 50px);
`
let StyledToc = styled(TableOfContent)`
position: sticky;
top: 50px;
`
let tooltipClassname = 'tooltip'
let slugger = new GHSlugger()
export let BlogPostContent = ({ post: { title, postUrl, headings, html } }) => {
let shareFeedback = useContext(feedbackContext)
let [selectedText, setSelectedText] = useState(null)
let currentHeading = useCurrentHeading('h2,h3')
slugger.reset()
useOuterClickHandler(() => setSelectedText(null), `.${tooltipClassname}`)
useLazyIframe()
return (
<Manager>
<SelectionReference
onSelect={selection => {
if (selection && !selection.isCollapsed) {
setSelectedText(selection.toString())
}
}}
>
{getProps => (
<div style={{ position: 'relative' }}>
<TocWrapper>
<StyledToc
headings={headings}
active={currentHeading}
slugify={s => slugger.slug(s, false)}
/>
</TocWrapper>
<div {...getProps()} dangerouslySetInnerHTML={{ __html: html }} />
</div>
)}
</SelectionReference>
<Tooltip isOpen={!!selectedText} className={tooltipClassname}>
<Flex>
<a
href={`https://twitter.com/intent/tweet?text=“${selectedText}” — @kitos_kirsanov&url=${postUrl}`}
target="_blank"
rel="noopener noreferrer"
title="tweet"
aria-label="tweet"
css={`
display: block;
line-height: 0;
padding-right: 5px;
margin-right: 10px;
border-right: 1px solid lightgray;
`}
style={{ lineHeight: 0, display: 'block' }}
>
<TwitterIcon width={30} mode="blueOnWhite" />
</a>
<UnstyledButton
title="Report typo/mistake"
aria-label="Report typo/mistake"
onClick={() =>
shareFeedback({
type: 'typo',
post: { title, link: postUrl },
typo: selectedText,
})
}
>
✏️
</UnstyledButton>
</Flex>
</Tooltip>
</Manager>
)
}