From 3229db8143c7179ff24b4ca433d540cbceacacfa Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 2 Oct 2019 15:32:01 +0200 Subject: [PATCH] hooks refactoring --- gatsby/feeds.js | 40 ++++---- src/components/Post/PostActions.tsx | 35 +++---- src/components/Post/PostMeta.tsx | 8 +- src/components/atoms/Hamburger.test.tsx | 2 +- src/components/atoms/SEO.tsx | 112 ++++++++++------------ src/components/atoms/Typekit.tsx | 15 +-- src/components/molecules/Menu.tsx | 20 +--- src/components/molecules/ModalThanks.tsx | 30 ++---- src/components/molecules/Subscribe.tsx | 16 +--- src/components/molecules/Vcard.tsx | 15 +-- src/components/organisms/Footer.tsx | 115 ++++++++--------------- src/hooks/use-site-metadata.ts | 38 ++++++++ src/templates/Post.tsx | 15 +-- 13 files changed, 191 insertions(+), 270 deletions(-) create mode 100644 src/hooks/use-site-metadata.ts diff --git a/gatsby/feeds.js b/gatsby/feeds.js index 1ad0ede9..667e88a9 100644 --- a/gatsby/feeds.js +++ b/gatsby/feeds.js @@ -15,8 +15,8 @@ const feedContent = edge => { : `${html}${footer}` } -const generateJsonFeed = async posts => { - const jsonItems = await posts.map(edge => { +async function jsonItems(posts) { + return await posts.map(edge => { const { frontmatter, fields, excerpt } = edge.node const { slug, date } = fields @@ -33,27 +33,29 @@ const generateJsonFeed = async posts => { content_html: feedContent(edge) } }) +} - const jsonFeed = { - version: 'https://jsonfeed.org/version/1', - title: siteTitle, - description: siteDescription, - home_page_url: siteUrl, - feed_url: path.join(siteUrl, 'feed.json'), - user_comment: - 'This feed allows you to read the posts from this site in any feed reader that supports the JSON Feed format. To add this feed to your reader, copy the following URL — https://kremalicious.com/feed.json — and add it your reader.', - favicon: path.join(siteUrl, 'favicon.ico'), - icon: path.join(siteUrl, 'apple-touch-icon.png'), - author: { - name: author.name, - url: author.uri - }, - items: jsonItems - } +const createJsonFeed = posts => ({ + version: 'https://jsonfeed.org/version/1', + title: siteTitle, + description: siteDescription, + home_page_url: siteUrl, + feed_url: path.join(siteUrl, 'feed.json'), + user_comment: + 'This feed allows you to read the posts from this site in any feed reader that supports the JSON Feed format. To add this feed to your reader, copy the following URL — https://kremalicious.com/feed.json — and add it your reader.', + favicon: path.join(siteUrl, 'favicon.ico'), + icon: path.join(siteUrl, 'apple-touch-icon.png'), + author: { + name: author.name, + url: author.uri + }, + items: jsonItems(posts) +}) +const generateJsonFeed = async posts => { await writeFile( path.join('./public', 'feed.json'), - JSON.stringify(jsonFeed), + JSON.stringify(createJsonFeed(posts)), 'utf8' ).catch(err => { throw Error('\nFailed to write JSON Feed file: ', err) diff --git a/src/components/Post/PostActions.tsx b/src/components/Post/PostActions.tsx index 5411d793..0b5e159e 100644 --- a/src/components/Post/PostActions.tsx +++ b/src/components/Post/PostActions.tsx @@ -5,6 +5,7 @@ import styles from './PostActions.module.scss' import { ReactComponent as Twitter } from '../../images/twitter.svg' import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg' import { ReactComponent as GitHub } from '../../images/github.svg' +import { useSiteMetadata } from '../../hooks/use-site-metadata' const ActionContent = ({ title, @@ -23,19 +24,23 @@ const ActionContent = ({ ) -const ActionTwitter = ({ url, slug }: { url: string; slug: string }) => ( - - - - -) +const ActionTwitter = ({ slug }: { slug: string }) => { + const { siteUrl } = useSiteMetadata() + + return ( + + + + + ) +} const ActionCrypto = ({ toggleModal }: { toggleModal(): void }) => ( +

- return ( - - ) - }} - /> - ) - } + {showModal && ( + + )} + + + + ) } diff --git a/src/hooks/use-site-metadata.ts b/src/hooks/use-site-metadata.ts new file mode 100644 index 00000000..48110ebe --- /dev/null +++ b/src/hooks/use-site-metadata.ts @@ -0,0 +1,38 @@ +import { useStaticQuery, graphql } from 'gatsby' + +const query = graphql` + query { + site { + siteMetadata { + siteTitle + siteTitleShort + siteDescription + siteUrl + author { + name + email + uri + twitter + github + facebook + bitcoin + ether + } + typekitID + menu { + title + link + } + rss + jsonfeed + itemsPerPage + repoContentPath + } + } + } +` + +export const useSiteMetadata = () => { + const { site } = useStaticQuery(query) + return site.siteMetadata +} diff --git a/src/templates/Post.tsx b/src/templates/Post.tsx index c690d704..db634e94 100644 --- a/src/templates/Post.tsx +++ b/src/templates/Post.tsx @@ -22,7 +22,6 @@ export default function Post({ location: Location }) { const { markdownRemark: post } = data - const meta = data.site.siteMetadata const { title, image, type, linkurl, style, tags } = post.frontmatter const { slug, githubLink } = post.fields @@ -47,8 +46,8 @@ export default function Post({ {type !== 'photo' && } {type === 'link' && } - - + + {type === 'post' && } @@ -100,15 +99,5 @@ export const pageQuery = graphql` } rawMarkdownBody } - - site { - siteMetadata { - siteUrl - author { - name - uri - } - } - } } `