diff --git a/gatsby-browser.js b/gatsby-browser.js index 53866174..45a69335 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -5,6 +5,9 @@ if (typeof window.IntersectionObserver === 'undefined') { import('intersection-observer') } +import wrapPageElementWithLayout from './src/helpers/wrapPageElement' +export const wrapPageElement = wrapPageElementWithLayout + // Display a message when a service worker updates // https://www.gatsbyjs.org/docs/add-offline-support-with-a-service-worker/#displaying-a-message-when-a-service-worker-updates export const onServiceWorkerUpdateReady = () => { diff --git a/gatsby-ssr.js b/gatsby-ssr.js new file mode 100644 index 00000000..15cbdcec --- /dev/null +++ b/gatsby-ssr.js @@ -0,0 +1,2 @@ +import wrapPageElementWithLayout from './src/helpers/wrapPageElement' +export const wrapPageElement = wrapPageElementWithLayout diff --git a/src/components/atoms/Modal.module.scss b/src/components/atoms/Modal.module.scss deleted file mode 100644 index 9bdb44da..00000000 --- a/src/components/atoms/Modal.module.scss +++ /dev/null @@ -1,124 +0,0 @@ -@import 'variables'; - -.modal { - position: fixed; - overflow: auto; - -webkit-overflow-scrolling: touch; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 9; - background: rgba($body-background-color, 0.95); - backdrop-filter: blur(5px); - animation: fadein 0.3s; - padding: $spacer; - - :global(.dark) & { - background: rgba($body-background-color--dark, 0.95); - } - - @media (min-width: $screen-sm) { - display: flex; - align-items: flex-start; - justify-content: center; - padding-top: 6vh; - } -} - -.modalContent { - outline: 0; - background: $body-background-color; - position: relative; - border-radius: $border-radius; - border: 1px solid rgba($brand-grey-light, 0.4); - box-shadow: 0 5px 30px rgba($brand-grey-light, 0.2); - padding: 0 $spacer / 2 $spacer / 2; - max-width: 100%; - - :global(.dark) & { - background: $body-background-color--dark; - box-shadow: 0 5px 30px rgba(darken($brand-main, 20%), 0.5); - } - - @media (min-width: $screen-md) { - max-width: $screen-sm; - padding: 0 $spacer $spacer; - } -} - -.modalClose { - display: block; - cursor: pointer; - background: transparent; - border: 0; - appearance: none; - padding: 4px; - position: absolute; - top: $spacer / 4; - right: ($spacer/4); - outline: 0; - - svg { - width: 24px; - height: 24px; - stroke: $brand-grey-light; - } - - &:hover, - &:focus { - svg { - stroke: $brand-cyan; - } - } -} - -.isModalOpen { - // Prevent background scrolling when modal is open - overflow: hidden; - - // more cross-browser backdrop-filter - // body > div:first-child { - // transition: filter .85s ease-out; - // filter: blur(5px); - // } -} - -.modalTitle { - font-size: $font-size-h4; - margin-top: $spacer / 2; - margin-bottom: $spacer / 2; - margin-left: -($spacer / 2); - margin-right: -($spacer / 2); - border-bottom: 1px solid rgba($brand-grey-light, 0.4); - padding: 0 $spacer; - padding-bottom: ($spacer/2); - - @media (min-width: $screen-md) { - margin-left: -($spacer); - margin-right: -($spacer); - } -} - -// -// Overlay/content animations -// -@keyframes fadein { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -@keyframes fadeout { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} diff --git a/src/components/atoms/Modal.test.tsx b/src/components/atoms/Modal.test.tsx deleted file mode 100644 index f777576c..00000000 --- a/src/components/atoms/Modal.test.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react' -import { render } from '@testing-library/react' -import Modal from './Modal' -import ReactModal from 'react-modal' - -describe('Modal', () => { - it('renders without crashing', () => { - ReactModal.setAppElement(document.createElement('div')) - - const { rerender } = render( - null}> - Hello - - ) - expect(document.querySelector('.ReactModalPortal')).toBeInTheDocument() - - rerender( - null}> - Hello - - ) - }) -}) diff --git a/src/components/atoms/Modal.tsx b/src/components/atoms/Modal.tsx deleted file mode 100644 index 57531001..00000000 --- a/src/components/atoms/Modal.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react' -import ReactModal from 'react-modal' -import Icon from './Icon' -import styles from './Modal.module.scss' - -if (process.env.NODE_ENV !== 'test') ReactModal.setAppElement('#___gatsby') - -export default function Modal({ - title, - isOpen, - handleCloseModal, - children, - ...props -}: { - title?: string - isOpen?: boolean - handleCloseModal(): void - children: any -}) { - if (!isOpen) return null - - return ( - - {title &&

{title}

} - {children} - - - ) -} diff --git a/src/components/atoms/Qr.module.scss b/src/components/atoms/Qr.module.scss index fb69efe3..2c4d58d8 100644 --- a/src/components/atoms/Qr.module.scss +++ b/src/components/atoms/Qr.module.scss @@ -5,10 +5,11 @@ } .code { - margin: 0; + margin: 0 auto; position: relative; padding: 0; padding-right: 2rem; + width: fit-content; code { padding: $spacer / 2; diff --git a/src/components/molecules/Web3Donation/Alerts.module.scss b/src/components/molecules/Web3Donation/Alerts.module.scss index d1803bb9..5e401f5f 100644 --- a/src/components/molecules/Web3Donation/Alerts.module.scss +++ b/src/components/molecules/Web3Donation/Alerts.module.scss @@ -24,6 +24,10 @@ composes: alert; color: darken($alert-error, 60%); + :global(.dark) & { + color: darken($alert-error, 40%); + } + &::after { display: none; } diff --git a/src/components/molecules/Web3Donation/Alerts.tsx b/src/components/molecules/Web3Donation/Alerts.tsx index 2c2aea7b..4f871049 100644 --- a/src/components/molecules/Web3Donation/Alerts.tsx +++ b/src/components/molecules/Web3Donation/Alerts.tsx @@ -9,7 +9,7 @@ export const alertMessages = ( 'Web3 detected, but no account. Are you logged into your MetaMask account?', noCorrectNetwork: `Please connect to Main network. You are on ${networkName} right now.`, noWeb3: - 'No Web3 detected. Install MetaMask, Brave, or Mist.', + 'No Web3 detected. Install MetaMask or Brave.', transaction: `See your transaction on etherscan.io.`, waitingForUser: 'Waiting for your confirmation', waitingConfirmation: 'Waiting for network confirmation, hang on', diff --git a/src/components/molecules/Web3Donation/index.module.scss b/src/components/molecules/Web3Donation/index.module.scss index 4d486c39..88f83785 100644 --- a/src/components/molecules/Web3Donation/index.module.scss +++ b/src/components/molecules/Web3Donation/index.module.scss @@ -1,14 +1,11 @@ @import 'variables'; -@import 'mixins'; .web3 { - @include divider; - width: 100%; text-align: center; margin-top: $spacer / 2; margin-bottom: $spacer; - padding-bottom: $spacer * 1.5; + padding-bottom: $spacer; small { color: darken($alert-info, 60%); diff --git a/src/components/molecules/Web3Donation/index.tsx b/src/components/molecules/Web3Donation/index.tsx index 9c573872..1ad8392c 100644 --- a/src/components/molecules/Web3Donation/index.tsx +++ b/src/components/molecules/Web3Donation/index.tsx @@ -88,7 +88,7 @@ export default class Web3Donation extends PureComponent< initAccountsPoll() { if (!this.interval) { - this.interval = setInterval(this.fetchAccounts, ONE_SECOND) + this.interval = setInterval(this.fetchAccounts, ONE_SECOND * 10) } } @@ -184,8 +184,8 @@ export default class Web3Donation extends PureComponent< return (
-

web3

-

Send Ether with MetaMask, Brave, or Mist.

+

Web3 Wallet

+

Send Ether with MetaMask or Brave.

diff --git a/src/components/organisms/Footer.tsx b/src/components/organisms/Footer.tsx index dac2a67d..6bab6a0f 100644 --- a/src/components/organisms/Footer.tsx +++ b/src/components/organisms/Footer.tsx @@ -1,20 +1,13 @@ -import React, { useState } from 'react' +import React from 'react' +import { Link } from 'gatsby' import Container from '../atoms/Container' import Icon from '../atoms/Icon' import Vcard from '../molecules/Vcard' import ThemeSwitch from '../molecules/ThemeSwitch' -import ModalThanks from './ModalThanks' - -import styles from './Footer.module.scss' import { useSiteMetadata } from '../../hooks/use-site-metadata' +import styles from './Footer.module.scss' -function Copyright({ - toggleModal, - showModal -}: { - toggleModal(): void - showModal: boolean -}) { +function Copyright() { const { name, uri, bitcoin, github } = useSiteMetadata().author const year = new Date().getFullYear() @@ -30,33 +23,23 @@ function Copyright({ View source - +

- - {showModal && ( - - )} ) } export default function Footer() { - const [showModal, setShowModal] = useState(false) - - const toggleModal = () => { - setShowModal(!showModal) - } - return (
- +
) diff --git a/src/components/organisms/ModalThanks.tsx b/src/components/organisms/ModalThanks.tsx deleted file mode 100644 index 642dd1eb..00000000 --- a/src/components/organisms/ModalThanks.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React, { lazy, Suspense } from 'react' -import shortid from 'shortid' -import { Author } from '../../@types/Site' -import { useSiteMetadata } from '../../hooks/use-site-metadata' -import Qr from '../atoms/Qr' -import Modal from '../atoms/Modal' -import styles from './ModalThanks.module.scss' - -const Web3Donation = lazy(() => import('../molecules/Web3Donation')) - -const Coin = ({ address, author }: { address: string; author: Author }) => ( -
- Loading...
}> - - -
-) - -export default function ModalThanks(props: any) { - const { author } = useSiteMetadata() - const coins = Object.keys(author).filter( - key => key === 'bitcoin' || key === 'ether' - ) - - return ( - -
- Loading...
}> - - - -
-

Any other wallets

-

Send Bitcoin or Ether from any wallet.

-
- - {coins.map((address: string) => ( - - ))} -
- - ) -} diff --git a/src/helpers/wrapPageElement.tsx b/src/helpers/wrapPageElement.tsx new file mode 100644 index 00000000..10b5b309 --- /dev/null +++ b/src/helpers/wrapPageElement.tsx @@ -0,0 +1,8 @@ +import React from 'react' +import Layout from '../components/Layout' + +const wrapPageElement = ({ element, props }: { element: any; props: any }) => ( + {element} +) + +export default wrapPageElement diff --git a/src/components/organisms/ModalThanks.module.scss b/src/pages/thanks.module.scss similarity index 69% rename from src/components/organisms/ModalThanks.module.scss rename to src/pages/thanks.module.scss index 5deb94d0..51241a3c 100644 --- a/src/components/organisms/ModalThanks.module.scss +++ b/src/pages/thanks.module.scss @@ -1,11 +1,18 @@ @import 'variables'; +@import 'mixins'; -.modalThanks { - @media (min-width: $screen-sm) { - display: flex; - justify-content: space-between; - flex-wrap: wrap; +.buttonBack { + svg { + stroke: $brand-grey-light; + display: inline-block; + margin-bottom: -0.15rem; } +} + +.thanks { + @include breakoutviewport; + + min-height: 100vh; h4 { text-align: center; @@ -41,6 +48,22 @@ } } +.title { + margin-top: 0; + margin-bottom: $spacer * 2; + font-size: $font-size-h2; +} + +.coins { + width: 100%; + + @media (min-width: $screen-sm) { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } +} + .coin { margin-top: $spacer; @@ -49,3 +72,8 @@ margin-top: 0; } } + +.loading { + width: 100%; + text-align: center; +} diff --git a/src/pages/thanks.tsx b/src/pages/thanks.tsx new file mode 100644 index 00000000..ea7c8da3 --- /dev/null +++ b/src/pages/thanks.tsx @@ -0,0 +1,69 @@ +import React, { lazy, Suspense } from 'react' +import shortid from 'shortid' +import Helmet from 'react-helmet' +import { Author } from '../@types/Site' +import { useSiteMetadata } from '../hooks/use-site-metadata' +import Typekit from '../components/atoms/Typekit' +import Qr from '../components/atoms/Qr' +import Icon from '../components/atoms/Icon' +import styles from './thanks.module.scss' + +const Web3Donation = lazy(() => import('../components/molecules/Web3Donation')) + +const Coin = ({ address, author }: { address: string; author: Author }) => ( +
+ +
+) + +const BackButton = () => ( + +) + +export default function Thanks() { + const { author } = useSiteMetadata() + const coins = Object.keys(author).filter( + key => key === 'bitcoin' || key === 'ether' + ) + + return ( + <> + + Say thanks + + + +
+ + +
+

Say Thanks

+
+ + Loading...}> + + +
+
+

Any other wallets

+

Send Bitcoin or Ether from any wallet.

+
+ + {coins.map((address: string) => ( + + ))} +
+ +
+ + ) +} diff --git a/src/templates/Page.tsx b/src/templates/Page.tsx index 336c3a0a..bb292925 100644 --- a/src/templates/Page.tsx +++ b/src/templates/Page.tsx @@ -2,7 +2,6 @@ import React from 'react' import { Helmet } from 'react-helmet' import { Post } from '../@types/Post' import SEO from '../components/atoms/SEO' -import Layout from '../components/Layout' import styles from './Page.module.scss' export default function Page({ @@ -23,10 +22,8 @@ export default function Page({ - -

{title}

- {section ?
{children}
: children} - +

{title}

+ {section ?
{children}
: children} ) } diff --git a/src/templates/Post/PostActions.tsx b/src/templates/Post/PostActions.tsx index 717a3f9d..60e642d8 100644 --- a/src/templates/Post/PostActions.tsx +++ b/src/templates/Post/PostActions.tsx @@ -1,5 +1,4 @@ import React, { useState } from 'react' -import ModalThanks from '../../components/organisms/ModalThanks' import { useSiteMetadata } from '../../hooks/use-site-metadata' import styles from './PostActions.module.scss' import Icon from '../../components/atoms/Icon' @@ -38,13 +37,8 @@ export default function PostActions({ githubLink: string }) { const { siteUrl } = useSiteMetadata() - const [showModal, setShowModal] = useState(false) const urlTwitter = `https://twitter.com/intent/tweet?text=@kremalicious&url=${siteUrl}${slug}` - const toggleModal = () => { - setShowModal(!showModal) - } - return ( ) } diff --git a/src/templates/Post/index.tsx b/src/templates/Post/index.tsx index 9324a37b..b882d28e 100644 --- a/src/templates/Post/index.tsx +++ b/src/templates/Post/index.tsx @@ -2,7 +2,6 @@ import React from 'react' import { Helmet } from 'react-helmet' import { graphql } from 'gatsby' import { Post as PostMetadata } from '../../@types/Post' -import Layout from '../../components/Layout' import Exif from '../../components/atoms/Exif' import SEO from '../../components/atoms/SEO' import RelatedPosts from '../../components/molecules/RelatedPosts' @@ -18,11 +17,9 @@ import { Image } from '../../components/atoms/Image' export default function Post({ data, - location, pageContext: { next, prev } }: { data: { post: PostMetadata } - location: Location pageContext: { next: { title: string; slug: string } prev: { title: string; slug: string } @@ -40,36 +37,34 @@ export default function Post({ - -
-
- - {type === 'post' && } -
+
+
+ + {type === 'post' && } +
- {type === 'photo' && } - {image && ( - {title} - )} - {type === 'photo' && image && image.fields && ( - - )} + {type === 'photo' && } + {image && ( + {title} + )} + {type === 'photo' && image && image.fields && ( + + )} - {type !== 'photo' && } + {type !== 'photo' && } - {type === 'link' && } - - -
+ {type === 'link' && } + + +
- + - - + ) } diff --git a/src/templates/Posts.tsx b/src/templates/Posts.tsx index d76145e2..1f8b42f8 100644 --- a/src/templates/Posts.tsx +++ b/src/templates/Posts.tsx @@ -1,7 +1,6 @@ import React from 'react' import { Link, graphql } from 'gatsby' import { Post } from '../@types/Post' -import Layout from '../components/Layout' import Pagination from '../components/molecules/Pagination' import Featured from '../components/molecules/Featured' import PostTitle from './Post/PostTitle' @@ -69,7 +68,7 @@ export default function Posts({ }) return ( - + <> {location.pathname === '/' && } {tag && ( @@ -85,7 +84,7 @@ export default function Posts({ )} {PostsList} {numPages > 1 && } - + ) }