Skip to content
Permalink
Browse files

feat: 🐴 hello preact, goodbye popper

  • Loading branch information
kitos committed Mar 22, 2020
1 parent 02b1c87 commit da932613b32bd40295f7420bc1b1b084b444426a
@@ -20,6 +20,7 @@ module.exports = {
},
plugins: [
'gatsby-plugin-reason',
'gatsby-plugin-preact',
'gatsby-plugin-react-helmet',
'gatsby-plugin-sitemap',
'gatsby-plugin-styled-components',

Some generated files are not rendered by default. Learn more.

@@ -22,6 +22,7 @@
"gatsby-plugin-manifest": "^2.3.1",
"gatsby-plugin-netlify-cms": "^4.2.0",
"gatsby-plugin-offline": "^3.1.0",
"gatsby-plugin-preact": "^3.2.0",
"gatsby-plugin-react-helmet": "^3.2.0",
"gatsby-plugin-sharp": "^2.5.1",
"gatsby-plugin-sitemap": "^2.3.0",
@@ -36,10 +37,10 @@
"intersection-observer": "^0.7.0",
"lodash.intersection": "^4.4.0",
"netlify-cms-app": "^2.11.32",
"preact": "^10.3.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-helmet": "^5.2.1",
"react-popper": "^1.3.7",
"react-spring": "^8.0.27",
"react-typography": "^0.16.19",
"reason-react": "^0.7.0",
@@ -1,14 +1,6 @@
import React, { useContext, useState } from 'react'
import React 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'
@@ -34,78 +26,25 @@ let StyledToc = styled(TableOfContent)`
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)
export let BlogPostContent = ({ post: { headings, html } }) => {
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} />
</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>
<div style={{ position: 'relative' }}>
<TocWrapper>
<StyledToc
headings={headings}
active={currentHeading}
slugify={s => slugger.slug(s, false)}
/>
</TocWrapper>

<div dangerouslySetInnerHTML={{ __html: html }} />
</div>
)
}
@@ -1,7 +1,7 @@
import React, { useRef } from 'react'
import styled from 'styled-components'
import { Flex } from '@rebass/grid'
import { Transition } from 'react-spring'
import { useTransition } from 'react-spring'
import { DialogContent, DialogOverlay } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'

@@ -24,17 +24,18 @@ let StyledOverlay = styled(DialogOverlay)`
justify-content: center;
`

let Dialog = ({ isOpen, onDismiss, initialFocusRef, title, children }) => (
<Transition
items={isOpen}
from={{ transform: 'translateY(-30px) scale(0.9)', opacity: 0 }}
enter={{ transform: 'translateY(0) scale(1)', opacity: 1 }}
leave={{ transform: 'translateY(-30px) scale(0.9)', opacity: 0 }}
>
{transitionIsOpen =>
transitionIsOpen &&
(({ opacity, ...transitionStyles }) => (
let Dialog = ({ isOpen, onDismiss, initialFocusRef, title, children }) => {
let transitions = useTransition(isOpen, null, {
from: { transform: 'translateY(-30px) scale(0.9)', opacity: 0 },
enter: { transform: 'translateY(0) scale(1)', opacity: 1 },
leave: { transform: 'translateY(-30px) scale(0.9)', opacity: 0 },
})

return transitions.map(
({ key, item, props: { opacity, ...transitionStyles } }) =>
item && (
<StyledOverlay
key={key}
style={{ opacity }}
isOpen={isOpen}
onDismiss={onDismiss}
@@ -60,10 +61,9 @@ let Dialog = ({ isOpen, onDismiss, initialFocusRef, title, children }) => (
{children}
</Popover>
</StyledOverlay>
))
}
</Transition>
)
)
)
}

let ConfirmationDialog = ({
title,
@@ -1,6 +1,6 @@
import React, { createContext, useState } from 'react'
import React, { createContext, useState, lazy, Suspense } from 'react'

import FeedbackDialog from './dialogs'
let FeedbackDialog = lazy(() => import('./dialogs'))

let feedbackContext = createContext(null)
let { Provider, Consumer } = feedbackContext
@@ -19,12 +19,14 @@ let FeedbackProvider = ({ children }) => {
{children}

{isDialogOpen && (
<FeedbackDialog
type={type}
isOpen={isDialogOpen}
payload={feedback}
onDismiss={() => toggleDialog(false)}
/>
<Suspense fallback={null}>
<FeedbackDialog
type={type}
isOpen={isDialogOpen}
payload={feedback}
onDismiss={() => toggleDialog(false)}
/>
</Suspense>
)}
</Provider>
)

This file was deleted.

This file was deleted.

0 comments on commit da93261

Please sign in to comment.
You can’t perform that action at this time.