From 2a31adc585aa6c52b119f33a1cd6c080ad0f7072 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 28 Oct 2019 23:00:55 +0100 Subject: [PATCH] refactor & restyling --- README.md | 18 ++--- .../2009-12-17-wordpress-post-thumbnails.md | 6 +- .../2018-11-01-gatsby-plugin-matomo/index.md | 2 + gatsby-config.js | 1 - gatsby/createPages.js | 2 +- package.json | 40 +++++------ src/@types/Image.d.ts | 30 +++++++++ src/@types/Post.d.ts | 32 +++++++++ src/@types/PostMetadata.d.ts | 53 --------------- src/@types/{SiteMetadata.d.ts => Site.d.ts} | 2 +- src/components/Post/PostImage.tsx | 22 ------- src/components/atoms/Exif.tsx | 4 +- src/components/atoms/Image.module.scss | 2 +- src/components/atoms/Image.tsx | 39 +++++------ src/components/atoms/SEO.tsx | 4 +- src/components/molecules/Featured.module.scss | 44 ++----------- src/components/molecules/Featured.tsx | 8 +-- src/components/molecules/Menu.tsx | 2 +- .../molecules/RelatedPosts.module.scss | 2 - src/components/molecules/RelatedPosts.tsx | 17 ++--- .../Search/SearchButton.module.scss | 0 .../{ => molecules}/Search/SearchButton.tsx | 2 +- .../Search/SearchInput.module.scss | 2 +- .../{ => molecules}/Search/SearchInput.tsx | 2 +- .../Search/SearchResults.module.scss | 0 .../{ => molecules}/Search/SearchResults.tsx | 13 ++-- .../Search/SearchResultsEmpty.module.scss | 0 .../Search/SearchResultsEmpty.tsx | 0 .../{ => molecules}/Search/index.module.scss | 0 .../{ => molecules}/Search/index.tsx | 0 .../Web3Donation/Account.module.scss | 0 .../{ => molecules}/Web3Donation/Account.tsx | 0 .../Web3Donation/Alerts.module.scss | 0 .../{ => molecules}/Web3Donation/Alerts.tsx | 0 .../Web3Donation/Conversion.module.scss | 0 .../Web3Donation/Conversion.tsx | 0 .../Web3Donation/InputGroup.module.scss | 0 .../Web3Donation/InputGroup.tsx | 2 +- .../Web3Donation/index.module.scss | 0 .../{ => molecules}/Web3Donation/index.tsx | 0 .../{ => molecules}/Web3Donation/utils.ts | 0 src/components/organisms/Footer.tsx | 2 +- src/components/organisms/Header.tsx | 2 +- .../ModalThanks.module.scss | 0 .../{molecules => organisms}/ModalThanks.tsx | 27 +++++--- src/hooks/use-site-metadata.ts | 4 +- src/pages/goodies.tsx | 8 +-- src/pages/photos.tsx | 8 +-- src/styles/_content.scss | 32 --------- src/styles/_mixins.scss | 66 ------------------- src/styles/_variables.scss | 4 +- src/styles/global.scss | 26 ++------ src/templates/Page.tsx | 4 +- src/templates/Post.module.scss | 26 -------- .../Post/PostActions.module.scss | 0 .../Post/PostActions.tsx | 2 +- .../Post/PostContent.tsx | 6 +- .../Post/PostImage.module.scss | 7 +- src/templates/Post/PostImage.tsx | 13 ++++ .../Post/PostLead.module.scss | 0 .../Post/PostLead.tsx | 4 +- .../Post/PostLinkActions.module.scss | 0 .../Post/PostLinkActions.tsx | 0 .../Post/PostMeta.module.scss | 0 .../Post/PostMeta.tsx | 6 +- .../Post/PostMore.module.scss | 0 .../Post/PostMore.tsx | 0 .../Post/PostTeaser.module.scss | 0 .../Post/PostTeaser.tsx | 6 +- .../Post/PostTitle.module.scss | 0 .../Post/PostTitle.tsx | 0 src/templates/Post/index.module.scss | 63 ++++++++++++++++++ src/templates/{Post.tsx => Post/index.tsx} | 34 +++++----- src/templates/Posts.module.scss | 15 ----- src/templates/Posts.tsx | 23 +++---- 75 files changed, 309 insertions(+), 430 deletions(-) create mode 100644 src/@types/Image.d.ts create mode 100644 src/@types/Post.d.ts delete mode 100644 src/@types/PostMetadata.d.ts rename src/@types/{SiteMetadata.d.ts => Site.d.ts} (93%) delete mode 100644 src/components/Post/PostImage.tsx rename src/components/{ => molecules}/Search/SearchButton.module.scss (100%) rename src/components/{ => molecules}/Search/SearchButton.tsx (76%) rename src/components/{ => molecules}/Search/SearchInput.module.scss (84%) rename src/components/{ => molecules}/Search/SearchInput.tsx (94%) rename src/components/{ => molecules}/Search/SearchResults.module.scss (100%) rename src/components/{ => molecules}/Search/SearchResults.tsx (84%) rename src/components/{ => molecules}/Search/SearchResultsEmpty.module.scss (100%) rename src/components/{ => molecules}/Search/SearchResultsEmpty.tsx (100%) rename src/components/{ => molecules}/Search/index.module.scss (100%) rename src/components/{ => molecules}/Search/index.tsx (100%) rename src/components/{ => molecules}/Web3Donation/Account.module.scss (100%) rename src/components/{ => molecules}/Web3Donation/Account.tsx (100%) rename src/components/{ => molecules}/Web3Donation/Alerts.module.scss (100%) rename src/components/{ => molecules}/Web3Donation/Alerts.tsx (100%) rename src/components/{ => molecules}/Web3Donation/Conversion.module.scss (100%) rename src/components/{ => molecules}/Web3Donation/Conversion.tsx (100%) rename src/components/{ => molecules}/Web3Donation/InputGroup.module.scss (100%) rename src/components/{ => molecules}/Web3Donation/InputGroup.tsx (96%) rename src/components/{ => molecules}/Web3Donation/index.module.scss (100%) rename src/components/{ => molecules}/Web3Donation/index.tsx (100%) rename src/components/{ => molecules}/Web3Donation/utils.ts (100%) rename src/components/{molecules => organisms}/ModalThanks.module.scss (100%) rename src/components/{molecules => organisms}/ModalThanks.tsx (55%) delete mode 100644 src/styles/_content.scss delete mode 100644 src/templates/Post.module.scss rename src/{components => templates}/Post/PostActions.module.scss (100%) rename src/{components => templates}/Post/PostActions.tsx (96%) rename src/{components => templates}/Post/PostContent.tsx (78%) rename src/{components => templates}/Post/PostImage.module.scss (89%) create mode 100644 src/templates/Post/PostImage.tsx rename src/{components => templates}/Post/PostLead.module.scss (100%) rename src/{components => templates}/Post/PostLead.tsx (79%) rename src/{components => templates}/Post/PostLinkActions.module.scss (100%) rename src/{components => templates}/Post/PostLinkActions.tsx (100%) rename src/{components => templates}/Post/PostMeta.module.scss (100%) rename src/{components => templates}/Post/PostMeta.tsx (89%) rename src/{components => templates}/Post/PostMore.module.scss (100%) rename src/{components => templates}/Post/PostMore.tsx (100%) rename src/{components => templates}/Post/PostTeaser.module.scss (100%) rename src/{components => templates}/Post/PostTeaser.tsx (84%) rename src/{components => templates}/Post/PostTitle.module.scss (100%) rename src/{components => templates}/Post/PostTitle.tsx (100%) create mode 100644 src/templates/Post/index.module.scss rename src/templates/{Post.tsx => Post/index.tsx} (73%) diff --git a/README.md b/README.md index f36922b9..a63e16f2 100644 --- a/README.md +++ b/README.md @@ -68,12 +68,12 @@ As a fallback, QR codes are generated with [react-qr-svg](https://github.com/no2 If you want to know how this works, have a look at the respective components under -- [`src/components/Web3Donation/index.jsx`](src/components/Web3Donation/index.jsx) -- [`src/components/Web3Donation/Account.jsx`](src/components/Web3Donation/Account.jsx) -- [`src/components/Web3Donation/InputGroup.jsx`](src/components/Web3Donation/InputGroup.jsx) -- [`src/components/Web3Donation/Conversion.jsx`](src/components/Web3Donation/Conversion.jsx) -- [`src/components/Web3Donation/Alerts.jsx`](src/components/Web3Donation/Alerts.jsx) -- [`src/components/Web3Donation/utils.jsx`](src/components/Web3Donation/utils.jsx) +- [`src/components/molecules/Web3Donation/index.jsx`](src/components/molecules/Web3Donation/index.jsx) +- [`src/components/molecules/Web3Donation/Account.jsx`](src/components/molecules/Web3Donation/Account.jsx) +- [`src/components/molecules/Web3Donation/InputGroup.jsx`](src/components/molecules/Web3Donation/InputGroup.jsx) +- [`src/components/molecules/Web3Donation/Conversion.jsx`](src/components/molecules/Web3Donation/Conversion.jsx) +- [`src/components/molecules/Web3Donation/Alerts.jsx`](src/components/molecules/Web3Donation/Alerts.jsx) +- [`src/components/molecules/Web3Donation/utils.jsx`](src/components/molecules/Web3Donation/utils.jsx) - [`src/components/atoms/Qr.jsx`](src/components/atoms/Qr.jsx) ### 🔍 Search @@ -84,9 +84,9 @@ A global search is provided with [gatsby-plugin-lunr](https://github.com/humanse If you want to know how this works, have a look at the respective components under -- [`src/components/Search/Search.jsx`](src/components/Search/Search.jsx) -- [`src/components/Search/SearchResults.jsx`](src/components/Search/SearchResults.jsx) -- more in [`src/components/Search/`](src/components/Search/) +- [`src/components/molecules/Search/Search.jsx`](src/components/molecules/Search/Search.jsx) +- [`src/components/molecules/Search/SearchResults.jsx`](src/components/molecules/Search/SearchResults.jsx) +- more in [`src/components/molecules/Search/`](src/components/molecules/Search/) ### 🕸 Related Posts diff --git a/content/posts/2009-12-17-wordpress-post-thumbnails.md b/content/posts/2009-12-17-wordpress-post-thumbnails.md index 30acdc97..a305a9da 100644 --- a/content/posts/2009-12-17-wordpress-post-thumbnails.md +++ b/content/posts/2009-12-17-wordpress-post-thumbnails.md @@ -140,9 +140,9 @@ So it's a pretty good idea to make this backwards compatible with some quick if if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { the_post_thumbnail(); } else { - $postimage = get_post_meta($post->ID, 'post-image', true); - if ($postimage) { - echo ''; + $Image = get_post_meta($post->ID, 'post-image', true); + if ($Image) { + echo ''; } } ``` diff --git a/content/posts/2018-11-01-gatsby-plugin-matomo/index.md b/content/posts/2018-11-01-gatsby-plugin-matomo/index.md index 8d313578..f03551b5 100644 --- a/content/posts/2018-11-01-gatsby-plugin-matomo/index.md +++ b/content/posts/2018-11-01-gatsby-plugin-matomo/index.md @@ -10,6 +10,8 @@ tags: - goodies - gatsby - matomo + +featured: true --- Plugin for [Gatsby](https://www.gatsbyjs.org) to add tracking with the open-source analytics platform [Matomo](https://matomo.org) (formerly Piwik) onto a site, prioritizing user experience & privacy with sensible defaults. diff --git a/gatsby-config.js b/gatsby-config.js index 38d69478..8c44afcd 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -35,7 +35,6 @@ module.exports = { options: { maxWidth: 630, quality: 80, - withWebp: true, linkImagesToOriginal: true, showCaptions: true, backgroundColor: 'none', diff --git a/gatsby/createPages.js b/gatsby/createPages.js index d1567926..653a097e 100644 --- a/gatsby/createPages.js +++ b/gatsby/createPages.js @@ -7,7 +7,7 @@ const redirects = [ ] exports.generatePostPages = (createPage, posts, numPages) => { - const postTemplate = path.resolve('src/templates/Post.tsx') + const postTemplate = path.resolve('src/templates/Post/index.tsx') // Create Post pages posts.forEach(post => { diff --git a/package.json b/package.json index e14d72f4..14f88a9c 100644 --- a/package.json +++ b/package.json @@ -35,18 +35,18 @@ "dms2dec": "^1.1.0", "fast-exif": "^1.0.1", "fraction.js": "^4.0.12", - "gatsby": "^2.17.1", - "gatsby-image": "^2.2.29", + "gatsby": "^2.17.5", + "gatsby-image": "^2.2.30", "gatsby-plugin-catch-links": "^2.1.15", "gatsby-plugin-feed": "^2.3.19", "gatsby-plugin-lunr": "^1.5.2", - "gatsby-plugin-manifest": "^2.2.23", + "gatsby-plugin-manifest": "^2.2.24", "gatsby-plugin-matomo": "^0.7.2", "gatsby-plugin-meta-redirect": "^1.1.1", - "gatsby-plugin-offline": "^3.0.16", + "gatsby-plugin-offline": "^3.0.17", "gatsby-plugin-react-helmet": "^3.1.13", "gatsby-plugin-sass": "^2.1.20", - "gatsby-plugin-sharp": "^2.2.32", + "gatsby-plugin-sharp": "^2.2.33", "gatsby-plugin-sitemap": "^2.2.19", "gatsby-plugin-svgr": "^2.0.2", "gatsby-plugin-typescript": "^2.1.15", @@ -58,10 +58,10 @@ "gatsby-remark-images": "^3.1.28", "gatsby-remark-smartypants": "^2.1.14", "gatsby-remark-vscode": "^1.2.0", - "gatsby-source-filesystem": "^2.1.33", - "gatsby-source-graphql": "^2.1.20", - "gatsby-transformer-remark": "^2.6.30", - "gatsby-transformer-sharp": "^2.3.0", + "gatsby-source-filesystem": "^2.1.34", + "gatsby-source-graphql": "^2.1.21", + "gatsby-transformer-remark": "^2.6.31", + "gatsby-transformer-sharp": "^2.3.1", "graphql": "^14.5.8", "intersection-observer": "^0.7.0", "js-scrypt": "^0.2.0", @@ -73,7 +73,7 @@ "react-clipboard.js": "^2.0.13", "react-dom": "^16.11.0", "react-helmet": "^5.2.1", - "react-modal": "^3.10.1", + "react-modal": "^3.11.1", "react-pose": "^4.0.9", "react-qr-svg": "^2.2.1", "react-transition-group": "^4.3.0", @@ -88,25 +88,25 @@ "@babel/preset-env": "^7.6.3", "@babel/preset-typescript": "^7.6.0", "@svgr/webpack": "^4.3.3", - "@testing-library/jest-dom": "^4.1.2", + "@testing-library/jest-dom": "^4.2.0", "@testing-library/react": "^9.3.0", "@types/classnames": "^2.2.9", - "@types/jest": "^24.0.19", + "@types/jest": "^24.0.20", "@types/lunr": "^2.3.2", - "@types/node": "^12.11.5", - "@types/react": "^16.9.9", - "@types/react-dom": "^16.9.2", + "@types/node": "^12.11.7", + "@types/react": "^16.9.11", + "@types/react-dom": "^16.9.3", "@types/react-helmet": "^5.0.13", "@types/react-modal": "^3.10.0", "@types/react-transition-group": "^4.2.3", "@types/shortid": "0.0.29", "@types/web3": "^1.0.20", - "@typescript-eslint/eslint-plugin": "^2.5.0", - "@typescript-eslint/parser": "^2.5.0", + "@typescript-eslint/eslint-plugin": "^2.6.0", + "@typescript-eslint/parser": "^2.6.0", "babel-eslint": "^10.0.3", "babel-jest": "^24.9.0", - "eslint": "^6.5.1", - "eslint-config-prettier": "^6.4.0", + "eslint": "^6.6.0", + "eslint-config-prettier": "^6.5.0", "eslint-loader": "^3.0.2", "eslint-plugin-graphql": "^3.1.0", "eslint-plugin-jsx-a11y": "^6.2.3", @@ -117,7 +117,7 @@ "jest": "^24.9.0", "markdownlint-cli": "^0.19.0", "node-iptc": "^1.0.5", - "node-sass": "^4.12.0", + "node-sass": "^4.13.0", "npm-run-all": "^4.1.5", "ora": "^4.0.0", "pify": "^4.0.1", diff --git a/src/@types/Image.d.ts b/src/@types/Image.d.ts new file mode 100644 index 00000000..a95ec8b9 --- /dev/null +++ b/src/@types/Image.d.ts @@ -0,0 +1,30 @@ +import { FixedObject, FluidObject } from 'gatsby-image' + +export interface ImageProps { + title?: string + fluid?: FluidObject + fixed?: FixedObject + alt: string + original?: { src: string } +} + +export interface ImageNode { + childImageSharp: ImageProps + fields: { + exif: Exif + } +} + +export interface Exif { + iso: string + model: string + fstop: string + shutterspeed: string + focalLength: string + lensModel: string + exposure: string + gps: { + latitude: string + longitude: string + } +} diff --git a/src/@types/Post.d.ts b/src/@types/Post.d.ts new file mode 100644 index 00000000..a94b69b6 --- /dev/null +++ b/src/@types/Post.d.ts @@ -0,0 +1,32 @@ +import { ImageNode } from './Image' + +export interface Fields { + slug: string + date: string + githubLink?: string +} + +export interface Frontmatter { + title: string + type?: string + description?: string + image?: ImageNode + author?: string + updated?: string + tags?: string[] + linkurl?: string + style?: { + publicURL?: string + } + changelog?: string +} + +export interface Post { + id?: string + html?: string + excerpt?: string + frontmatter: Frontmatter + fields?: Fields + rawMarkdownBody?: string + fileAbsolutePath?: string +} diff --git a/src/@types/PostMetadata.d.ts b/src/@types/PostMetadata.d.ts deleted file mode 100644 index 4166e3e1..00000000 --- a/src/@types/PostMetadata.d.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { FluidObject } from 'gatsby-image' - -export interface PostMetadataFields { - slug: string - date: string - githubLink: string -} - -export interface PostMetadataImageExif { - iso: string - model: string - fstop: string - shutterspeed: string - focalLength: string - lensModel: string - exposure: string - gps: { - latitude: string - longitude: string - } -} - -export interface PostMetadataImage { - childImageSharp: { fluid: FluidObject } - fields: { - exif: PostMetadataImageExif - } -} - -export interface PostMetadataFrontmatter { - type?: string - title: string - description?: string - image?: PostMetadataImage - author?: string - updated?: string - tags?: string[] - linkurl?: string - style?: { - publicURL?: string - } - changelog?: string -} - -export interface PostMetadata { - id?: string - html?: string - excerpt?: string - frontmatter: PostMetadataFrontmatter - fields?: PostMetadataFields - rawMarkdownBody?: string - fileAbsolutePath?: string -} diff --git a/src/@types/SiteMetadata.d.ts b/src/@types/Site.d.ts similarity index 93% rename from src/@types/SiteMetadata.d.ts rename to src/@types/Site.d.ts index 94789fb3..1f6491dc 100644 --- a/src/@types/SiteMetadata.d.ts +++ b/src/@types/Site.d.ts @@ -14,7 +14,7 @@ export interface Author { ether: string } -export interface SiteMetadata { +export interface Site { siteTitle: string siteTitleShort: string siteDescription: string diff --git a/src/components/Post/PostImage.tsx b/src/components/Post/PostImage.tsx deleted file mode 100644 index 36108a58..00000000 --- a/src/components/Post/PostImage.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react' -import Image from '../atoms/Image' -import styles from './PostImage.module.scss' -import { FluidObject, FixedObject } from 'gatsby-image' - -interface PostImageProps { - title?: string - fluid?: FluidObject - fixed?: FixedObject - alt: string -} - -const PostImage = ({ title, fluid, fixed, alt }: PostImageProps) => ( -
- {alt} - {title && ( -
{title}
- )} -
-) - -export default PostImage diff --git a/src/components/atoms/Exif.tsx b/src/components/atoms/Exif.tsx index 962e445b..83f9cdea 100644 --- a/src/components/atoms/Exif.tsx +++ b/src/components/atoms/Exif.tsx @@ -1,9 +1,9 @@ import React from 'react' import ExifMap from './ExifMap' import styles from './Exif.module.scss' -import { PostMetadataImageExif } from '../../@types/PostMetadata' +import { Exif as ExifMeta } from '../../@types/Post' -export default function Exif({ exif }: { exif: PostMetadataImageExif }) { +export default function Exif({ exif }: { exif: ExifMeta }) { const { iso, model, fstop, shutterspeed, focalLength, exposure, gps } = exif return ( diff --git a/src/components/atoms/Image.module.scss b/src/components/atoms/Image.module.scss index c8770970..f1d7b3e3 100644 --- a/src/components/atoms/Image.module.scss +++ b/src/components/atoms/Image.module.scss @@ -10,7 +10,7 @@ @media (min-width: 940px) { max-width: 940px; - border-radius: 0.25rem; + border-radius: $border-radius; overflow: hidden; } diff --git a/src/components/atoms/Image.tsx b/src/components/atoms/Image.tsx index a2019b15..0916c3cc 100644 --- a/src/components/atoms/Image.tsx +++ b/src/components/atoms/Image.tsx @@ -1,30 +1,24 @@ import React from 'react' import { graphql } from 'gatsby' -import Img, { FixedObject, FluidObject } from 'gatsby-image' +import Img from 'gatsby-image' import styles from './Image.module.scss' +import { ImageProps } from '../../@types/Image' -export default function Image({ - fluid, - fixed, - alt -}: { - fluid?: FluidObject - fixed?: FixedObject - alt: string -}) { - return ( - {alt} - ) -} +export const Image = ({ fluid, fixed, alt }: ImageProps) => ( + {alt} +) export const imageSizeDefault = graphql` fragment ImageFluid on ImageSharp { + original { + src + } fluid(maxWidth: 940, quality: 85) { ...GatsbyImageSharpFluid_withWebp_noBase64 } @@ -33,7 +27,10 @@ export const imageSizeDefault = graphql` export const imageSizeThumb = graphql` fragment ImageFluidThumb on ImageSharp { - fluid(maxWidth: 200, maxHeight: 85, quality: 85, cropFocus: CENTER) { + original { + src + } + fluid(maxWidth: 400, maxHeight: 170, quality: 85, cropFocus: CENTER) { ...GatsbyImageSharpFluid_withWebp_noBase64 } } diff --git a/src/components/atoms/SEO.tsx b/src/components/atoms/SEO.tsx index 57f58c53..10bffcd4 100644 --- a/src/components/atoms/SEO.tsx +++ b/src/components/atoms/SEO.tsx @@ -2,7 +2,7 @@ import React from 'react' import { graphql, useStaticQuery } from 'gatsby' import { Helmet } from 'react-helmet' import { useSiteMetadata } from '../../hooks/use-site-metadata' -import { PostMetadata } from '../../@types/PostMetadata' +import { Post } from '../../@types/Post' const query = graphql` query { @@ -117,7 +117,7 @@ export default function SEO({ slug, postSEO }: { - post?: PostMetadata + post?: Post slug?: string postSEO?: boolean }) { diff --git a/src/components/molecules/Featured.module.scss b/src/components/molecules/Featured.module.scss index 342fc162..bba61492 100644 --- a/src/components/molecules/Featured.module.scss +++ b/src/components/molecules/Featured.module.scss @@ -2,26 +2,16 @@ @import 'mixins'; .featured { - @include breakoutviewport; @include divider; - display: flex; - justify-content: space-between; - flex-wrap: wrap; - padding-left: $spacer; - padding-right: $spacer; - margin-bottom: -($spacer); - padding-bottom: $spacer * $line-height; - - @media (min-width: $screen-xs) { - padding-bottom: $spacer * 3; - margin-top: $spacer * $line-height; - } + display: grid; + gap: $spacer; + grid-template-columns: 1fr 1fr; + padding-bottom: $spacer * 3; + margin-bottom: -($spacer / 2); @media (min-width: $screen-md) { - padding-left: 0; - padding-right: 0; - justify-content: initial; + @include breakoutviewport; } } @@ -44,28 +34,6 @@ .featuredItem { position: relative; - max-width: 12rem; - flex: 0 0 48%; - margin-bottom: $spacer / 2; - - &:last-child { - margin-bottom: 0; - display: none; - } - - @media (min-width: $screen-xs) { - flex: 1; - max-width: none; - margin-left: $spacer / 2; - - &:last-child { - display: block; - } - - &:first-child { - margin-left: 0; - } - } a { display: block; diff --git a/src/components/molecules/Featured.tsx b/src/components/molecules/Featured.tsx index 8251d057..ec429412 100644 --- a/src/components/molecules/Featured.tsx +++ b/src/components/molecules/Featured.tsx @@ -1,17 +1,17 @@ import React from 'react' import { Link, graphql, useStaticQuery } from 'gatsby' -import Image from '../atoms/Image' +import { Image } from '../atoms/Image' import styles from './Featured.module.scss' -import { PostMetadata } from '../../@types/PostMetadata' +import { Post } from '../../@types/Post' function FeaturedPure({ data }: { - data: { allMarkdownRemark: { edges: [{ node: PostMetadata }] } } + data: { allMarkdownRemark: { edges: [{ node: Post }] } } }) { return (
- {data.allMarkdownRemark.edges.map(({ node }: { node: PostMetadata }) => { + {data.allMarkdownRemark.edges.map(({ node }: { node: Post }) => { const { title, image } = node.frontmatter const { slug } = node.fields diff --git a/src/components/molecules/Menu.tsx b/src/components/molecules/Menu.tsx index 4de1cf2e..b885a3b2 100644 --- a/src/components/molecules/Menu.tsx +++ b/src/components/molecules/Menu.tsx @@ -4,7 +4,7 @@ import { Link } from 'gatsby' import Hamburger from '../atoms/Hamburger' import styles from './Menu.module.scss' import { useSiteMetadata } from '../../hooks/use-site-metadata' -import { MenuItem } from '../../@types/SiteMetadata' +import { MenuItem } from '../../@types/Site' export default function Menu() { const [menuOpen, setMenuOpen] = useState(false) diff --git a/src/components/molecules/RelatedPosts.module.scss b/src/components/molecules/RelatedPosts.module.scss index 86c70a95..831aa675 100644 --- a/src/components/molecules/RelatedPosts.module.scss +++ b/src/components/molecules/RelatedPosts.module.scss @@ -52,8 +52,6 @@ } .title { - @include heading-band; - font-size: $font-size-h3; } diff --git a/src/components/molecules/RelatedPosts.tsx b/src/components/molecules/RelatedPosts.tsx index 0d40d38f..c1a77948 100644 --- a/src/components/molecules/RelatedPosts.tsx +++ b/src/components/molecules/RelatedPosts.tsx @@ -1,11 +1,8 @@ import React, { useState } from 'react' import { graphql, useStaticQuery } from 'gatsby' -import PostTeaser from '../Post/PostTeaser' +import PostTeaser from '../../templates/Post/PostTeaser' import styles from './RelatedPosts.module.scss' -import { - PostMetadata, - PostMetadataFrontmatter -} from '../../@types/PostMetadata' +import { Post, Frontmatter } from '../../@types/Post' const query = graphql` query { @@ -36,11 +33,11 @@ const query = graphql` ` function postsWithDataFilter( - posts: [{ node: PostMetadata }], - key: keyof PostMetadataFrontmatter, + posts: [{ node: Post }], + key: keyof Frontmatter, valuesToFind: string[] ) { - const newArray = posts.filter(({ node }: { node: PostMetadata }) => { + const newArray = posts.filter(({ node }: { node: Post }) => { const frontmatterKey = node.frontmatter[key] as [] if ( @@ -54,7 +51,7 @@ function postsWithDataFilter( } function photosWithDataFilter(posts: []) { - const newArray = posts.filter((post: { node: PostMetadata }) => { + const newArray = posts.filter((post: { node: Post }) => { const { fileAbsolutePath } = post.node if (fileAbsolutePath.includes('content/photos')) { @@ -93,7 +90,7 @@ export default function RelatedPosts({ {filteredPosts .sort(() => 0.5 - Math.random()) .slice(0, 6) - .map(({ node }: { node: PostMetadata }) => ( + .map(({ node }: { node: Post }) => ( ))} diff --git a/src/components/Search/SearchButton.module.scss b/src/components/molecules/Search/SearchButton.module.scss similarity index 100% rename from src/components/Search/SearchButton.module.scss rename to src/components/molecules/Search/SearchButton.module.scss diff --git a/src/components/Search/SearchButton.tsx b/src/components/molecules/Search/SearchButton.tsx similarity index 76% rename from src/components/Search/SearchButton.tsx rename to src/components/molecules/Search/SearchButton.tsx index 8f08217f..a1a490e0 100644 --- a/src/components/Search/SearchButton.tsx +++ b/src/components/molecules/Search/SearchButton.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { ReactComponent as SearchIcon } from '../../images/magnifying-glass.svg' +import { ReactComponent as SearchIcon } from '../../../images/magnifying-glass.svg' import styles from './SearchButton.module.scss' const SearchButton = (props: any) => ( diff --git a/src/components/Search/SearchInput.module.scss b/src/components/molecules/Search/SearchInput.module.scss similarity index 84% rename from src/components/Search/SearchInput.module.scss rename to src/components/molecules/Search/SearchInput.module.scss index bad30172..2c2a6242 100644 --- a/src/components/Search/SearchInput.module.scss +++ b/src/components/molecules/Search/SearchInput.module.scss @@ -1,7 +1,7 @@ @import 'variables'; .searchInput { - composes: input from '../atoms/Input.module.scss'; + composes: input from '../../atoms/Input.module.scss'; &::-webkit-search-cancel-button { display: none; diff --git a/src/components/Search/SearchInput.tsx b/src/components/molecules/Search/SearchInput.tsx similarity index 94% rename from src/components/Search/SearchInput.tsx rename to src/components/molecules/Search/SearchInput.tsx index 0ee9427e..42741e3b 100644 --- a/src/components/Search/SearchInput.tsx +++ b/src/components/molecules/Search/SearchInput.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Input from '../atoms/Input' +import Input from '../../atoms/Input' import styles from './SearchInput.module.scss' export default function SearchInput({ diff --git a/src/components/Search/SearchResults.module.scss b/src/components/molecules/Search/SearchResults.module.scss similarity index 100% rename from src/components/Search/SearchResults.module.scss rename to src/components/molecules/Search/SearchResults.module.scss diff --git a/src/components/Search/SearchResults.tsx b/src/components/molecules/Search/SearchResults.tsx similarity index 84% rename from src/components/Search/SearchResults.tsx rename to src/components/molecules/Search/SearchResults.tsx index f1d27c4e..705c1038 100644 --- a/src/components/Search/SearchResults.tsx +++ b/src/components/molecules/Search/SearchResults.tsx @@ -1,11 +1,11 @@ import React from 'react' import ReactDOM from 'react-dom' import { graphql, useStaticQuery } from 'gatsby' -import Container from '../atoms/Container' -import PostTeaser from '../Post/PostTeaser' +import Container from '../../atoms/Container' +import PostTeaser from '../../../templates/Post/PostTeaser' import SearchResultsEmpty from './SearchResultsEmpty' import styles from './SearchResults.module.scss' -import { PostMetadata } from '../../@types/PostMetadata' +import { Post } from '../../../@types/Post' export interface Results { slug: string @@ -40,7 +40,7 @@ function SearchResultsPure({ toggleSearch, posts }: { - posts: [{ node: PostMetadata }] + posts: [{ node: Post }] searchQuery: string results: Results[] toggleSearch(): void @@ -53,10 +53,9 @@ function SearchResultsPure({ {results.map((page: { slug: string }) => posts .filter( - ({ node }: { node: PostMetadata }) => - node.fields.slug === page.slug + ({ node }: { node: Post }) => node.fields.slug === page.slug ) - .map(({ node }: { node: PostMetadata }) => ( + .map(({ node }: { node: Post }) => ( import('../Web3Donation')) +const Web3Donation = lazy(() => import('../molecules/Web3Donation')) const Qr = lazy(() => import('../atoms/Qr')) +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 ( Send Bitcoin or Ether from any wallet.

- {Object.keys(author) - .filter(key => key === 'bitcoin' || key === 'ether') - .map((address: string, i: number) => ( -
- Loading...
}> - - - - ))} + {coins.map((address: string) => ( + + ))} ) diff --git a/src/hooks/use-site-metadata.ts b/src/hooks/use-site-metadata.ts index db1be781..f42e88ad 100644 --- a/src/hooks/use-site-metadata.ts +++ b/src/hooks/use-site-metadata.ts @@ -1,7 +1,7 @@ import { useStaticQuery, graphql } from 'gatsby' -import { SiteMetadata } from '../@types/SiteMetadata' +import { Site } from '../@types/Site' -export function useSiteMetadata(): SiteMetadata { +export function useSiteMetadata(): Site { const query = graphql` query { site { diff --git a/src/pages/goodies.tsx b/src/pages/goodies.tsx index 3c228606..62d70744 100644 --- a/src/pages/goodies.tsx +++ b/src/pages/goodies.tsx @@ -1,9 +1,9 @@ import React from 'react' import { graphql, Link } from 'gatsby' -import PostImage from '../components/Post/PostImage' +import PostImage from '../templates/Post/PostImage' import Page from '../templates/Page' import styles from './goodies.module.scss' -import { PostMetadata } from '../@types/PostMetadata' +import { Post } from '../@types/Post' const page = { frontmatter: { @@ -13,7 +13,7 @@ const page = { } } -const GoodiesThumb = ({ post }: { post: PostMetadata }) => { +const GoodiesThumb = ({ post }: { post: Post }) => { const { title, image } = post.frontmatter const { slug } = post.fields @@ -33,7 +33,7 @@ export default function Goodies({ data, location }: { - data: { goodies: { edges: [{ node: PostMetadata }] } } + data: { goodies: { edges: [{ node: Post }] } } location: Location }) { return ( diff --git a/src/pages/photos.tsx b/src/pages/photos.tsx index 4b4e3fa2..6d686749 100644 --- a/src/pages/photos.tsx +++ b/src/pages/photos.tsx @@ -1,9 +1,9 @@ import React from 'react' import { graphql, Link } from 'gatsby' import Page from '../templates/Page' -import PostImage from '../components/Post/PostImage' +import PostImage from '../templates/Post/PostImage' import styles from './photos.module.scss' -import { PostMetadata } from '../@types/PostMetadata' +import { Post } from '../@types/Post' const page = { frontmatter: { @@ -12,7 +12,7 @@ const page = { } } -const PhotoThumb = ({ photo }: { photo: PostMetadata }) => { +const PhotoThumb = ({ photo }: { photo: Post }) => { const { title, image } = photo.frontmatter const { slug } = photo.fields const { fluid } = image.childImageSharp @@ -32,7 +32,7 @@ export default function Photos({ data, location }: { - data: { photos: { edges: [{ node: PostMetadata }] } } + data: { photos: { edges: [{ node: Post }] } } location: Location }) { return ( diff --git a/src/styles/_content.scss b/src/styles/_content.scss deleted file mode 100644 index ef912b3d..00000000 --- a/src/styles/_content.scss +++ /dev/null @@ -1,32 +0,0 @@ -.gatsby-resp-image-figure, -.gatsby-resp-image-wrapper { - margin-bottom: $spacer; -} - -.anchor { - margin-top: $spacer / 3; - font-size: $font-size-large; - color: $brand-grey-light; - font-weight: 700; - - span { - transition: opacity 0.2s ease-out; - } -} - -h1, -h2, -h3, -h4, -h5, -h6 { - .anchor span { - opacity: 0; - } - - &:hover { - .anchor span { - opacity: 1; - } - } -} diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index ea23e298..3c0f86f6 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -1,57 +1,5 @@ @import 'variables'; -// Centering Blocks -///////////////////////////////////// - -@mixin aligncenter() { - display: block; - margin-left: auto; - margin-right: auto; -} - -// Toggling content -///////////////////////////////////// - -// Hide from both screenreaders and browsers: h5bp.com/u -@mixin hide() { - display: none !important; - visibility: hidden; -} - -@mixin show() { - display: block; - visibility: visible; -} - -// Hide only visually, but have it available for screenreaders: h5bp.com/v -@mixin visuallyhidden() { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - - // Extends the .visuallyhidden class to allow the - // element to be focusable when navigated to via the keyboard: h5bp.com/p - &.focusable:active, - &.focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - width: auto; - } -} - -// Hide visually and from screenreaders, but maintain layout -@mixin invisible() { - visibility: hidden; -} - // CSS image replacement ///////////////////////////////////// @@ -132,20 +80,6 @@ } } -// Heading band -///////////////////////////////////// - -@mixin heading-band() { - display: inline-block; - background: rgba(255, 255, 255, 0.5); - padding: ($spacer/2) $spacer ($spacer/2) 100%; - margin-left: -100%; - - :global(.dark) & { - background: darken($body-background-color--dark, 2%); - } -} - // Layout breakout ///////////////////////////////////// diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index e5e4e2b2..ba2e7949 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -68,7 +68,7 @@ $font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas, $font-family-headings: 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif; -$font-weight-headings: 500; +$font-weight-headings: 700; $line-height-headings: 1.1; $color-headings: $brand-main; @@ -81,7 +81,7 @@ $spacer: ($font-size-base * $line-height); $padding-base-vertical: 0.75rem; $padding-base-horizontal: 1.25rem; -$border-radius: 3px; +$border-radius: 0.25rem; // Code ///////////////////////////////////// diff --git a/src/styles/global.scss b/src/styles/global.scss index 27b99334..3c040bd3 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -26,10 +26,7 @@ body { line-height: $line-height; color: $text-color; text-rendering: optimizeLegibility; - letter-spacing: -0.01em; font-feature-settings: 'liga', 'kern'; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; min-height: 100vh; transition: background 0.4s $easing; background: $body-background-color; @@ -105,20 +102,6 @@ a { // Headings ///////////////////////////////////// -h1, -h2 { - margin-top: $spacer * $line-height; - margin-bottom: $spacer * 2; -} - -h3, -h4, -h5, -h6 { - margin-top: $spacer * $line-height; - margin-bottom: $spacer; -} - h1 { font-size: $font-size-h2; @@ -128,8 +111,6 @@ h1 { } h2 { - @include heading-band(); - font-size: $font-size-h3; @media (min-width: $screen-xs) { @@ -174,7 +155,11 @@ h6 { font-family: $font-family-headings; line-height: $line-height-headings; font-weight: $font-weight-headings; - letter-spacing: -0.02em; + letter-spacing: -0.01em; + margin-top: $spacer * $line-height; + margin-bottom: $spacer; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; // stylelint-disable no-descending-specificity &, @@ -376,4 +361,3 @@ blockquote { @import 'code'; @import 'buttons'; @import 'alerts'; -@import 'content'; diff --git a/src/templates/Page.tsx b/src/templates/Page.tsx index 79600ad3..f0326d26 100644 --- a/src/templates/Page.tsx +++ b/src/templates/Page.tsx @@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet' import SEO from '../components/atoms/SEO' import Layout from '../components/Layout' import styles from './Page.module.scss' -import { PostMetadata } from '../@types/PostMetadata' +import { Post } from '../@types/Post' export default function Page({ title, @@ -16,7 +16,7 @@ export default function Page({ children: any section?: string location?: Location - post?: PostMetadata + post?: Post }) { return ( <> diff --git a/src/templates/Post.module.scss b/src/templates/Post.module.scss deleted file mode 100644 index 466c1022..00000000 --- a/src/templates/Post.module.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import 'variables'; -@import 'mixins'; - -.hentry { - width: 100%; - padding-top: $spacer; - padding-bottom: $spacer * 3; - - > a { - display: block; - } - - &:only-child { - padding-bottom: $spacer; - } -} - -.postImageWrap { - @include breakoutviewport(); - - figure { - max-width: none; - margin-top: $spacer * 1.5; - margin-bottom: 0; - } -} diff --git a/src/components/Post/PostActions.module.scss b/src/templates/Post/PostActions.module.scss similarity index 100% rename from src/components/Post/PostActions.module.scss rename to src/templates/Post/PostActions.module.scss diff --git a/src/components/Post/PostActions.tsx b/src/templates/Post/PostActions.tsx similarity index 96% rename from src/components/Post/PostActions.tsx rename to src/templates/Post/PostActions.tsx index 03dce2c2..0b587f25 100644 --- a/src/components/Post/PostActions.tsx +++ b/src/templates/Post/PostActions.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import ModalThanks from '../molecules/ModalThanks' +import ModalThanks from '../../components/organisms/ModalThanks' import styles from './PostActions.module.scss' import { ReactComponent as Twitter } from '../../images/twitter.svg' diff --git a/src/components/Post/PostContent.tsx b/src/templates/Post/PostContent.tsx similarity index 78% rename from src/components/Post/PostContent.tsx rename to src/templates/Post/PostContent.tsx index 3319bef5..3e80450d 100644 --- a/src/components/Post/PostContent.tsx +++ b/src/templates/Post/PostContent.tsx @@ -1,9 +1,9 @@ import React from 'react' -import Changelog from '../atoms/Changelog' -import { PostMetadata } from '../../@types/PostMetadata' +import Changelog from '../../components/atoms/Changelog' +import { Post } from '../../@types/Post' // Remove lead paragraph from content -const PostContent = ({ post }: { post: PostMetadata }) => { +const PostContent = ({ post }: { post: Post }) => { const separator = '' const changelog = post.frontmatter.changelog diff --git a/src/components/Post/PostImage.module.scss b/src/templates/Post/PostImage.module.scss similarity index 89% rename from src/components/Post/PostImage.module.scss rename to src/templates/Post/PostImage.module.scss index e486a81b..e0435419 100644 --- a/src/components/Post/PostImage.module.scss +++ b/src/templates/Post/PostImage.module.scss @@ -1,7 +1,7 @@ @import 'variables'; @import 'mixins'; -.postImageTitle { +.imageTitle { transition: 0.1s ease-out; font-size: $font-size-h3; font-family: $font-family-headings; @@ -9,7 +9,6 @@ font-weight: $font-weight-headings; font-style: normal; text-align: left; - letter-spacing: -0.02em; margin: 0; position: absolute; top: 10%; @@ -22,7 +21,7 @@ transform: translate3d(0, -20px, 0); } -.postImage { +.image { display: block; a & { @@ -31,7 +30,7 @@ } a:hover & { - .postImageTitle { + .imageTitle { opacity: 1; transform: translate3d(0, 0, 0); } diff --git a/src/templates/Post/PostImage.tsx b/src/templates/Post/PostImage.tsx new file mode 100644 index 00000000..b7ed31c5 --- /dev/null +++ b/src/templates/Post/PostImage.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import { Image } from '../../components/atoms/Image' +import styles from './PostImage.module.scss' +import { ImageProps } from '../../@types/Image' + +const PostImage = ({ title, fluid, fixed, alt, original }: ImageProps) => ( +
+ {alt} + {title &&
{title}
} +
+) + +export default PostImage diff --git a/src/components/Post/PostLead.module.scss b/src/templates/Post/PostLead.module.scss similarity index 100% rename from src/components/Post/PostLead.module.scss rename to src/templates/Post/PostLead.module.scss diff --git a/src/components/Post/PostLead.tsx b/src/templates/Post/PostLead.tsx similarity index 79% rename from src/components/Post/PostLead.tsx rename to src/templates/Post/PostLead.tsx index f7efd094..8f3c0d80 100644 --- a/src/components/Post/PostLead.tsx +++ b/src/templates/Post/PostLead.tsx @@ -1,10 +1,10 @@ import React from 'react' import styles from './PostLead.module.scss' -import { PostMetadata } from '../../@types/PostMetadata' +import { Post } from '../../@types/Post' // Extract lead paragraph from content // Grab everything before more tag, or just first paragraph -const PostLead = ({ post, index }: { post: PostMetadata; index?: boolean }) => { +const PostLead = ({ post, index }: { post: Post; index?: boolean }) => { let lead const content = post.html const separator = '' diff --git a/src/components/Post/PostLinkActions.module.scss b/src/templates/Post/PostLinkActions.module.scss similarity index 100% rename from src/components/Post/PostLinkActions.module.scss rename to src/templates/Post/PostLinkActions.module.scss diff --git a/src/components/Post/PostLinkActions.tsx b/src/templates/Post/PostLinkActions.tsx similarity index 100% rename from src/components/Post/PostLinkActions.tsx rename to src/templates/Post/PostLinkActions.tsx diff --git a/src/components/Post/PostMeta.module.scss b/src/templates/Post/PostMeta.module.scss similarity index 100% rename from src/components/Post/PostMeta.module.scss rename to src/templates/Post/PostMeta.module.scss diff --git a/src/components/Post/PostMeta.tsx b/src/templates/Post/PostMeta.tsx similarity index 89% rename from src/components/Post/PostMeta.tsx rename to src/templates/Post/PostMeta.tsx index c51a5ca3..17e0534b 100644 --- a/src/components/Post/PostMeta.tsx +++ b/src/templates/Post/PostMeta.tsx @@ -1,12 +1,12 @@ import React from 'react' import { Link } from 'gatsby' import slugify from 'slugify' -import Time from '../atoms/Time' +import Time from '../../components/atoms/Time' import { useSiteMetadata } from '../../hooks/use-site-metadata' import styles from './PostMeta.module.scss' -import { PostMetadata } from '../../@types/PostMetadata' +import { Post } from '../../@types/Post' -export default function PostMeta({ post }: { post: PostMetadata }) { +export default function PostMeta({ post }: { post: Post }) { const siteMeta = useSiteMetadata() const { author, updated, tags, type } = post.frontmatter const { date } = post.fields diff --git a/src/components/Post/PostMore.module.scss b/src/templates/Post/PostMore.module.scss similarity index 100% rename from src/components/Post/PostMore.module.scss rename to src/templates/Post/PostMore.module.scss diff --git a/src/components/Post/PostMore.tsx b/src/templates/Post/PostMore.tsx similarity index 100% rename from src/components/Post/PostMore.tsx rename to src/templates/Post/PostMore.tsx diff --git a/src/components/Post/PostTeaser.module.scss b/src/templates/Post/PostTeaser.module.scss similarity index 100% rename from src/components/Post/PostTeaser.module.scss rename to src/templates/Post/PostTeaser.module.scss diff --git a/src/components/Post/PostTeaser.tsx b/src/templates/Post/PostTeaser.tsx similarity index 84% rename from src/components/Post/PostTeaser.tsx rename to src/templates/Post/PostTeaser.tsx index c61a155c..53dcbc2d 100644 --- a/src/components/Post/PostTeaser.tsx +++ b/src/templates/Post/PostTeaser.tsx @@ -1,14 +1,14 @@ import React from 'react' import { Link } from 'gatsby' -import Image from '../atoms/Image' +import { Image } from '../../components/atoms/Image' import styles from './PostTeaser.module.scss' -import { PostMetadata } from '../../@types/PostMetadata' +import { Post } from '../../@types/Post' export default function PostTeaser({ post, toggleSearch }: { - post: PostMetadata + post: Post toggleSearch?: () => void }) { const { image, title } = post.frontmatter diff --git a/src/components/Post/PostTitle.module.scss b/src/templates/Post/PostTitle.module.scss similarity index 100% rename from src/components/Post/PostTitle.module.scss rename to src/templates/Post/PostTitle.module.scss diff --git a/src/components/Post/PostTitle.tsx b/src/templates/Post/PostTitle.tsx similarity index 100% rename from src/components/Post/PostTitle.tsx rename to src/templates/Post/PostTitle.tsx diff --git a/src/templates/Post/index.module.scss b/src/templates/Post/index.module.scss new file mode 100644 index 00000000..b7cf1329 --- /dev/null +++ b/src/templates/Post/index.module.scss @@ -0,0 +1,63 @@ +@import 'variables'; +@import 'mixins'; + +.hentry { + width: 100%; + padding-top: $spacer; + padding-bottom: $spacer * 3; + + > a { + display: block; + } + + &:only-child { + padding-bottom: $spacer; + } + + .gatsby-resp-image-figure, + .gatsby-resp-image-wrapper { + margin-bottom: $spacer; + } + + :global(.anchor) { + margin-top: $spacer / 3; + font-size: $font-size-large; + color: $brand-grey-light; + + &:hover, + &:focus { + color: $link-color; + } + + span { + transition: opacity 0.2s ease-out; + } + } + + h1, + h2, + h3, + h4, + h5, + h6 { + :global(.anchor) span { + opacity: 0; + } + + &:hover { + :global(.anchor) span { + opacity: 1; + } + } + } +} + +.imageWrap { + @include breakoutviewport(); + + figure { + max-width: none; + margin-top: $spacer * 1.5; + margin-bottom: 0; + } +} diff --git a/src/templates/Post.tsx b/src/templates/Post/index.tsx similarity index 73% rename from src/templates/Post.tsx rename to src/templates/Post/index.tsx index 6001f45e..2ff31c9a 100644 --- a/src/templates/Post.tsx +++ b/src/templates/Post/index.tsx @@ -1,19 +1,19 @@ import React from 'react' import { Helmet } from 'react-helmet' import { graphql } from 'gatsby' -import Layout from '../components/Layout' -import PostImage from '../components/Post/PostImage' -import PostTitle from '../components/Post/PostTitle' -import PostLead from '../components/Post/PostLead' -import PostContent from '../components/Post/PostContent' -import PostActions from '../components/Post/PostActions' -import PostLinkActions from '../components/Post/PostLinkActions' -import SEO from '../components/atoms/SEO' -import PostMeta from '../components/Post/PostMeta' -import Exif from '../components/atoms/Exif' -import RelatedPosts from '../components/molecules/RelatedPosts' -import styles from './Post.module.scss' -import { PostMetadata } from '../@types/PostMetadata' +import Layout from '../../components/Layout' +import PostImage from './PostImage' +import PostTitle from './PostTitle' +import PostLead from './PostLead' +import PostContent from './PostContent' +import PostActions from './PostActions' +import PostLinkActions from './PostLinkActions' +import SEO from '../../components/atoms/SEO' +import PostMeta from './PostMeta' +import Exif from '../../components/atoms/Exif' +import RelatedPosts from '../../components/molecules/RelatedPosts' +import styles from './index.module.scss' +import { Post as PostMetadata } from '../../@types/Post' export default function Post({ data, @@ -40,8 +40,12 @@ export default function Post({ {type === 'post' && } {type === 'photo' && } {image && ( -
- +
+
)} {image && image.fields && } diff --git a/src/templates/Posts.module.scss b/src/templates/Posts.module.scss index 5867385a..913835ba 100644 --- a/src/templates/Posts.module.scss +++ b/src/templates/Posts.module.scss @@ -9,28 +9,13 @@ padding-top: $spacer * 2; padding-bottom: $spacer * 2; - @media (min-width: $screen-sm) { - padding-top: $spacer * 3; - padding-bottom: $spacer * 3; - - &:first-of-type { - padding-top: $spacer * 4; - } - } - :global(.gatsby-image-wrapper) { max-height: 100vh; } } .archiveTitle { - @include heading-band(); - font-size: $font-size-h3; margin-top: 0; margin-bottom: 0; - - @media (min-width: $screen-md) { - margin-left: -117%; - } } diff --git a/src/templates/Posts.tsx b/src/templates/Posts.tsx index d47c51d1..740a25cf 100644 --- a/src/templates/Posts.tsx +++ b/src/templates/Posts.tsx @@ -1,25 +1,25 @@ import React from 'react' import { Link, graphql } from 'gatsby' import Layout from '../components/Layout' -import PostImage from '../components/Post/PostImage' -import PostTitle from '../components/Post/PostTitle' -import PostLead from '../components/Post/PostLead' -import PostContent from '../components/Post/PostContent' -import PostMore from '../components/Post/PostMore' -import PostLinkActions from '../components/Post/PostLinkActions' +import PostImage from './Post/PostImage' +import PostTitle from './Post/PostTitle' +import PostLead from './Post/PostLead' +import PostContent from './Post/PostContent' +import PostMore from './Post/PostMore' +import PostLinkActions from './Post/PostLinkActions' import SEO from '../components/atoms/SEO' import Pagination from '../components/molecules/Pagination' import Featured from '../components/molecules/Featured' import styles from './Posts.module.scss' -import stylesPost from './Post.module.scss' -import { PostMetadata } from '../@types/PostMetadata' +import stylesPost from './Post/index.module.scss' +import { Post } from '../@types/Post' export default function Posts({ data, location, pageContext }: { - data: { allMarkdownRemark: { edges: [{ node: PostMetadata }] } } + data: { allMarkdownRemark: { edges: [{ node: Post }] } } location: Location pageContext: { tag: string @@ -31,7 +31,7 @@ export default function Posts({ const edges = data.allMarkdownRemark.edges const { tag, currentPageNumber, numPages, nextPage } = pageContext - const PostsList = edges.map(({ node }: { node: PostMetadata }) => { + const PostsList = edges.map(({ node }: { node: Post }) => { const { type, linkurl, title, image } = node.frontmatter const { slug } = node.fields @@ -43,11 +43,12 @@ export default function Posts({ {image && ( -
+