diff --git a/.eslintrc.yml b/.eslintrc.yml deleted file mode 100644 index 5fa882bb..00000000 --- a/.eslintrc.yml +++ /dev/null @@ -1,36 +0,0 @@ ---- -extends: -- airbnb -- prettier -rules: - camelcase: - - 'off' - import/no-extraneous-dependencies: - - 'off' - import/prefer-default-export: - - 'off' - import/no-unresolved: - - 'off' - jsx-a11y/anchor-is-valid: - - 'off' - no-undef: - - 'off' - react/destructuring-assignment: - - 'off' - react/forbid-prop-types: - - 'off' - react/jsx-filename-extension: - - 1 - - extensions: - - ".js" - - ".jsx" - react/jsx-one-expression-per-line: - - 'off' - react/no-array-index-key: - - 'off' - react/no-danger: - - 'off' - react/no-typos: - - 'off' -settings: - import/external-module-folders: [ 'assets', 'config', 'ui', 'lib'] diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 0094fddb..c8cd8476 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -8,12 +8,12 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout Code - uses: actions/checkout@v2.3.1 + uses: actions/checkout@v4 - name: Install Node.js - uses: actions/setup-node@v1 + uses: actions/setup-node@v4 with: - node-version: '16.x' + node-version: '22.x' - name: Install Project Dependencies run: yarn install diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 54f08bcc..40066fbb 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -10,12 +10,12 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout Code - uses: actions/checkout@v2.3.1 + uses: actions/checkout@v4 - name: Install Node.js - uses: actions/setup-node@v1 + uses: actions/setup-node@v4 with: - node-version: '16.x' + node-version: '22.x' - name: Install Project Dependencies run: yarn install diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 00000000..a916e664 --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,46 @@ +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import js from "@eslint/js"; +import { FlatCompat } from "@eslint/eslintrc"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +const compat = new FlatCompat({ + baseDirectory: __dirname, + recommendedConfig: js.configs.recommended, + allConfig: js.configs.all, +}); + +export default [ + ...compat.extends("airbnb", "prettier"), + { + settings: { + "import/external-module-folders": ["assets", "config", "ui", "lib"], + }, + + rules: { + camelcase: ["off"], + "import/no-extraneous-dependencies": ["off"], + "import/prefer-default-export": ["off"], + "import/no-unresolved": ["off"], + "jsx-a11y/anchor-is-valid": ["off"], + "no-undef": ["off"], + "react/destructuring-assignment": ["off"], + "react/forbid-prop-types": ["off"], + + "react/jsx-filename-extension": [ + 1, + { + extensions: [".js", ".jsx"], + }, + ], + + "react/jsx-one-expression-per-line": ["off"], + "react/jsx-props-no-spreading": ["off"], + "react/no-array-index-key": ["off"], + "react/no-danger": ["off"], + "react/no-typos": ["off"], + "react/require-default-props": ["off"], + }, + }, +]; diff --git a/gatsby-config.js b/gatsby-config.js index b6f98266..11c5f316 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -2,9 +2,10 @@ module.exports = { siteMetadata: {}, plugins: [ "gatsby-plugin-catch-links", + `gatsby-plugin-image`, "gatsby-plugin-react-helmet", + "gatsby-plugin-netlify", `gatsby-plugin-offline`, - `gatsby-plugin-netlify-cache`, `gatsby-plugin-sharp`, `gatsby-plugin-styled-components`, `gatsby-plugin-twitter`, diff --git a/lib/assets/fonts/index.js b/lib/assets/fonts/index.js index c962c85b..5362e619 100644 --- a/lib/assets/fonts/index.js +++ b/lib/assets/fonts/index.js @@ -1 +1 @@ -export { default as iconfont } from "./bif-iconfont/style.css"; +import "./bif-iconfont/style.css"; diff --git a/lib/ui/components/actions/Action.js b/lib/ui/components/actions/Action.js index 24c7c259..1d57fb11 100644 --- a/lib/ui/components/actions/Action.js +++ b/lib/ui/components/actions/Action.js @@ -1,5 +1,5 @@ import React from "react"; -import { bool, oneOfType, array, object, string } from "prop-types"; +import PropTypes from "prop-types"; import { withTheme } from "styled-components"; import Button from "./Button"; @@ -9,32 +9,23 @@ import withObfuscation from "./withObfuscation"; const ObfButton = withObfuscation(Button); const ObfLink = withObfuscation(Link); -const Action = props => { - const { obfuscated, button } = props; +function Action(props) { + const { obfuscated, button, ...restProps } = props; if (obfuscated) { if (button) { - return ; + return ; } - return ; + return ; } if (button) { - return ; + return ; } - return ; -}; + return ; +} Action.propTypes = { - button: bool, - children: oneOfType([array, object, string]), - href: string, - obfuscated: bool -}; - -Action.defaultProps = { - button: null, - children: null, - href: null, - obfuscated: null + button: PropTypes.bool, + obfuscated: PropTypes.bool }; export default withTheme(Action); diff --git a/lib/ui/components/actions/Button.js b/lib/ui/components/actions/Button.js index fa87a66a..6535c7bf 100644 --- a/lib/ui/components/actions/Button.js +++ b/lib/ui/components/actions/Button.js @@ -1,5 +1,3 @@ -/* eslint jsx-a11y/anchor-has-content: 0 */ -/* eslint react/button-has-type: 0 */ import { array, func, object, oneOfType, shape, string } from "prop-types"; import { Link as GatsbyButton } from "gatsby"; import React from "react"; @@ -11,11 +9,11 @@ import { setSpace } from "ui/mixins"; const ButtonEl = styled.a` ${setSpace("pam")}; - background-color: ${({ theme, primary }) => - primary ? theme.actionColor : `transparent`}; + background-color: ${({ theme, $primary }) => + $primary ? theme.actionColor || defaultThm.actionColor : `transparent`}; border: 2px solid ${({ theme }) => theme.decor}; - color: ${({ primary, theme }) => - primary ? theme.background : theme.actionColor}; + color: ${({ $primary, theme }) => + $primary ? theme.background || defaultThm.background : theme.actionColor || defaultThm.actionColor}; cursor: pointer; display: inline-block; font-family: ${font.sans}; @@ -36,16 +34,16 @@ const ButtonEl = styled.a` } `; -const Button = props => { - const { onClick, to } = props; +function Button(props) { + const { onClick, to, primary = false, ...restProps } = props; if (to) { - return ; + return ; } if (onClick) { - return ; + return ; } - return ; -}; + return ; +} Button.propTypes = { children: oneOfType([array, object, string]), @@ -57,15 +55,4 @@ Button.propTypes = { to: string }; -Button.defaultProps = { - children: null, - href: "", - onClick: null, - theme: { - background: defaultThm.background, - actionColor: defaultThm.actionColor - }, - to: null -}; - export default Button; diff --git a/lib/ui/components/actions/Link.js b/lib/ui/components/actions/Link.js index 1df8c074..abc9dc7e 100644 --- a/lib/ui/components/actions/Link.js +++ b/lib/ui/components/actions/Link.js @@ -1,6 +1,5 @@ /* eslint jsx-a11y/anchor-has-content: 0 */ -/* eslint react/button-has-type: 0 */ -import { array, func, object, oneOfType, shape, string } from "prop-types"; +import PropTypes from "prop-types"; import { Link as GatsbyLink } from "gatsby"; import React from "react"; import styled from "styled-components"; @@ -15,7 +14,7 @@ const LinkEl = styled.a` border-color: ${({ theme }) => theme.actionColorLt}; border-style: solid; border-width: 0 0 2px; - color: ${({ theme }) => theme.actionColor}; + color: ${({ theme }) => theme.actionColor ?? defaultThm.actionColor}; cursor: pointer; display: inline-block; font-family: ${font.sans}; @@ -28,46 +27,41 @@ const LinkEl = styled.a` transition: border ${time.s}, transform ${time.s}; white-space: nowrap; &:hover { - border-color: ${({ theme }) => theme.actionColor}; + border-color: ${({ theme }) => theme.actionColor ?? defaultThm.actionColor}; transform: translateX(-1px) translateY(-1px); } - ${({ isActive, theme }) => - isActive + ${({ $isActive, theme }) => + $isActive ? ` - border-color: ${theme.actionColor}; + border-color: ${theme.actionColor ?? defaultThm.actionColor}; ` : ``}; `; -const Link = props => { - const { onClick, to } = props; +function Link(props) { + const { onClick, to, isActive, ...restProps } = props; if (to) { - return ; + return ; } if (onClick) { - return ; + return ; } - return ; -}; + return ; +} Link.propTypes = { - children: oneOfType([array, object, string]), - href: string, - onClick: func, - theme: shape({ - actionColor: string + children: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.object, + PropTypes.string + ]), + href: PropTypes.string, + onClick: PropTypes.func, + theme: PropTypes.shape({ + actionColor: PropTypes.string }), - to: string -}; - -Link.defaultProps = { - children: null, - href: "", - onClick: null, - theme: { - actionColor: defaultThm.actionColor - }, - to: null + to: PropTypes.string, + isActive: PropTypes.bool }; export default Link; diff --git a/lib/ui/components/brandmarks/Logo.js b/lib/ui/components/brandmarks/Logo.js index 890a4e90..5dc77eba 100644 --- a/lib/ui/components/brandmarks/Logo.js +++ b/lib/ui/components/brandmarks/Logo.js @@ -6,23 +6,25 @@ import { defaultThm } from "ui/themes"; import { setHeight } from "ui/mixins"; const SVG = styled.svg` - ${({ size }) => setHeight(size)}; + ${({ $size }) => setHeight($size)}; `; -const BrandmarkLogo = ({ size, theme }) => ( - - Bad Idea Factory - - -); +function BrandmarkLogo({ size = 'm', theme = {} }) { + return ( + + Bad Idea Factory + + + ) +} BrandmarkLogo.propTypes = { size: string, @@ -31,11 +33,4 @@ BrandmarkLogo.propTypes = { }) }; -BrandmarkLogo.defaultProps = { - size: "m", - theme: { - svgFill: defaultThm.svgFill - } -}; - export default BrandmarkLogo; diff --git a/lib/ui/components/brandmarks/Symbol.js b/lib/ui/components/brandmarks/Symbol.js index 8a53e1e7..29054d6b 100644 --- a/lib/ui/components/brandmarks/Symbol.js +++ b/lib/ui/components/brandmarks/Symbol.js @@ -6,18 +6,18 @@ import { defaultThm } from "ui/themes"; import { setHeight } from "ui/mixins"; const SVG = styled.svg` - ${({ size }) => setHeight(size)}; + ${({ $size = 'm' }) => setHeight($size)}; `; const BrandmarkSymbol = ({ size, theme }) => ( Bad Idea Factory @@ -31,11 +31,4 @@ BrandmarkSymbol.propTypes = { }) }; -BrandmarkSymbol.defaultProps = { - size: "m", - theme: { - svgFill: defaultThm.svgFill - } -}; - export default BrandmarkSymbol; diff --git a/lib/ui/components/galleries/Gallery.js b/lib/ui/components/galleries/Gallery.js index 849604bb..9b14b1a3 100644 --- a/lib/ui/components/galleries/Gallery.js +++ b/lib/ui/components/galleries/Gallery.js @@ -1,7 +1,7 @@ import React, { Component } from "react"; import { array, object } from "prop-types"; import styled from "styled-components"; -import Img from "gatsby-image"; +import { GatsbyImage } from "gatsby-plugin-image"; import { time } from "../../settings"; @@ -38,30 +38,28 @@ class Gallery extends Component { const { current } = this.state; const { images, defaultImage } = this.props; if (images && images.length > 0) { - return ( - <> - - - - - {images.length > 1 - ? images.map((image, i) => ( - this.setState({ current: i })} - role="button" - > - - - )) - : null} - - > - ); + return <> + + + + + {images.length > 1 + ? images.map((image, i) => ( + this.setState({ current: i })} + role="button" + > + + + )) + : null} + + >; } return ( - + ); } diff --git a/lib/ui/components/icons/Icon.js b/lib/ui/components/icons/Icon.js index b4db2189..4834b5ce 100644 --- a/lib/ui/components/icons/Icon.js +++ b/lib/ui/components/icons/Icon.js @@ -1,19 +1,17 @@ -/* eslint no-unused-vars: 0 */ import { shape, string } from "prop-types"; import React from "react"; import styled from "styled-components"; import { FaLink } from "react-icons/fa"; import { SiBluesky, SiMastodon } from "react-icons/si"; -import { defaultThm } from "ui/themes"; -import { icomoon } from "assets/fonts"; +import "assets/fonts"; import { setType } from "ui/mixins"; const IconEl = styled.i` - ${({ size }) => setType(size)}; + ${({ size = 's' }) => setType(size)}; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: ${({ theme }) => theme.iconColor}; + color: ${({ theme }) => (theme.iconColor || 'inherit') }; font-family: "bif-iconfont"; font-style: normal; font-variant: normal; @@ -32,15 +30,16 @@ const IconEl = styled.i` } `; -const Icon = props => { - switch (props.name) { +function Icon(props) { + const { name, text, ...restProps } = props; + switch (name) { // I'm not going to generate a new IcoMoon font for these // and in any case they don't have Bluesky or Mastdon readily // available anyway. Generating icons with react-icons is 100% // more flexible case 'bluesky': return ( - @@ -49,7 +48,7 @@ const Icon = props => { ) case 'mastodon': return ( - @@ -58,7 +57,7 @@ const Icon = props => { ) case 'website': return ( - @@ -67,26 +66,20 @@ const Icon = props => { ) default: return ( - - {props.text ? {props.text} : null} + + {text ? {text} : null} ) } -}; +} Icon.propTypes = { name: string.isRequired, size: string, + text: string, theme: shape({ iconColor: string }) }; -Icon.defaultProps = { - size: "s", - theme: { - iconColor: "inherit" - } -}; - export default Icon; diff --git a/lib/ui/components/modals/Modal.js b/lib/ui/components/modals/Modal.js index 59226003..ce5f25bd 100644 --- a/lib/ui/components/modals/Modal.js +++ b/lib/ui/components/modals/Modal.js @@ -1,4 +1,4 @@ -import { func } from "prop-types"; +import PropTypes from "prop-types"; import React, { Component } from "react"; import styled, { ThemeProvider } from "styled-components"; @@ -69,15 +69,12 @@ class Modal extends Component { this.ref = React.createRef(); } - componentWillMount() { + componentDidMount() { document.addEventListener("keydown", this.handleKeyDown, false); document.documentElement.style.overflow = "hidden"; document.body.style.overflow = "hidden"; document.body.style.height = "100%"; document.body.style.position = "fixed"; - } - - componentDidMount() { this.ref.current.focus(); } @@ -100,46 +97,43 @@ class Modal extends Component { } render() { - const { children } = this.props; + const { children, toggleModal, ...restProps } = this.props; return ( - <> - - {({ BIFHEX }) => ( - - - e.stopPropagation()} - innerRef={this.getScrollArea} - height={this.scrollArea && this.scrollArea.clientHeight} - ref={this.ref} - > - - - - - - {children} - - - - )} - - > + + {({ BIFHEX }) => ( + + + e.stopPropagation()} + innerRef={this.getScrollArea} + height={this.scrollArea && this.scrollArea.clientHeight} + ref={this.ref} + > + + + + + + {children} + + + + )} + ); } } Modal.propTypes = { - toggleModal: func.isRequired + children: PropTypes.node, + toggleModal: PropTypes.func.isRequired }; -Modal.defaultProps = {}; - export default Modal; diff --git a/lib/ui/components/tabs/Tab.js b/lib/ui/components/tabs/Tab.js index 92160d2c..1c76faec 100644 --- a/lib/ui/components/tabs/Tab.js +++ b/lib/ui/components/tabs/Tab.js @@ -1,4 +1,4 @@ -import { bool, func } from "prop-types"; +import PropTypes from "prop-types"; import React from "react"; import styled from "styled-components"; @@ -9,8 +9,8 @@ const TabLink = styled.h2` ${setSpace("pvm")}; ${setSpace("phx")}; ${setType("m")}; - background: ${({ isActive }) => (isActive ? "white" : "transparent")}; - color: ${({ isActive, theme }) => (isActive ? theme.actionColor : "white")}; + background: ${({ $isActive }) => ($isActive ? "white" : "transparent")}; + color: ${({ $isActive, theme }) => ($isActive ? theme.actionColor : "white")}; cursor: pointer; display: block; font-weight: 800; @@ -21,25 +21,21 @@ const TabLink = styled.h2` } `; -const Tab = props => { - const { isActive, children, handleClick } = props; +function Tab(props) { + const { isActive, children, handleClick = () => {} } = props; return ( - + {children} ); -}; +} Tab.propTypes = { - isActive: bool, - handleClick: func -}; - -Tab.defaultProps = { - isActive: null, - handleClick: null + isActive: PropTypes.bool, + handleClick: PropTypes.func, + children: PropTypes.node }; export default Tab; diff --git a/lib/ui/components/tabs/Tabs.js b/lib/ui/components/tabs/Tabs.js index 21a25c2e..c7ab4539 100644 --- a/lib/ui/components/tabs/Tabs.js +++ b/lib/ui/components/tabs/Tabs.js @@ -1,9 +1,9 @@ -import {} from "prop-types"; +import PropTypes from "prop-types"; import React from "react"; import styled from "styled-components"; -import {} from "ui/themes"; -import {} from "ui/mixins"; +import "ui/themes"; +import "ui/mixins"; const TabsEl = styled.ol` display: flex; @@ -11,20 +11,21 @@ const TabsEl = styled.ol` width: 100%; overflow-x: auto; & > li { - flex: 0 0 ${({ count }) => 100 / count}%; + flex: 0 0 ${({ $count }) => 100 / $count}%; align-items: stretch; align-content: stretch; } `; -const Tabs = props => ( - - {props.children} +function Tabs({ children, count, ...restProps }) { + return + {children} -); +} -Tabs.propTypes = {}; - -Tabs.defaultProps = {}; +Tabs.propTypes = { + children: PropTypes.node, + count: PropTypes.number +}; export default Tabs; diff --git a/lib/ui/components/text/Copy.js b/lib/ui/components/text/Copy.js index 9a681ea5..5c081f5c 100644 --- a/lib/ui/components/text/Copy.js +++ b/lib/ui/components/text/Copy.js @@ -120,6 +120,4 @@ const Copy = styled.div` Copy.propTypes = {}; -Copy.defaultProps = {}; - export default Copy; diff --git a/lib/ui/components/tiles/Tile.js b/lib/ui/components/tiles/Tile.js index 2d408fb2..0e24e6e8 100644 --- a/lib/ui/components/tiles/Tile.js +++ b/lib/ui/components/tiles/Tile.js @@ -8,7 +8,7 @@ import { SharedHexConsumer } from "ui/contexts"; import { whiteThm } from "ui/themes"; const Element = styled.div` - ${({ space }) => setSpace(`pa${space}`)}; + ${({ $space = 'l'}) => setSpace(`pa${$space}`)}; background: ${({ theme }) => theme.background}; color: ${({ theme }) => theme.color}; display: block; @@ -30,24 +30,21 @@ const Element = styled.div` : ``}; `; -const Tile = props => ( - +function Tile(props) { + const { space, ...restProps } = props; + return {({ BIFHEX }) => ( - + )} -); +} Tile.propTypes = { space: string }; -Tile.defaultProps = { - space: "l" -}; - export default Tile; diff --git a/lib/ui/partials/Body.js b/lib/ui/partials/Body.js index 61615ef1..8ee6681a 100644 --- a/lib/ui/partials/Body.js +++ b/lib/ui/partials/Body.js @@ -1,3 +1,4 @@ +import PropTypes from "prop-types"; import React from "react"; import styled, { ThemeProvider } from "styled-components"; @@ -9,23 +10,23 @@ const BodyEl = styled.section` color: ${({ theme }) => theme.color}; `; -const Body = props => { - const { children } = props; +function Body(props) { + const { children, ...restProps } = props; return ( {({ BIFHEX }) => ( - {children} + {children} )} ); -}; - -Body.propTypes = {}; +} -Body.defaultProps = {}; +Body.propTypes = { + children: PropTypes.node +}; export default Body; diff --git a/lib/ui/partials/Header.js b/lib/ui/partials/Header.js index 71047b33..26743d15 100644 --- a/lib/ui/partials/Header.js +++ b/lib/ui/partials/Header.js @@ -43,8 +43,4 @@ const Header = styled.header` } */}; `; -Header.propTypes = {}; - -Header.defaultProps = {}; - export default Header; diff --git a/lib/ui/partials/Helmet.js b/lib/ui/partials/Helmet.js index 20e21a18..7bed3b9a 100644 --- a/lib/ui/partials/Helmet.js +++ b/lib/ui/partials/Helmet.js @@ -5,7 +5,7 @@ import React from "react"; import meta from "config/meta"; import { favicon } from "assets/images"; -const CustomHelmet = props => { +function CustomHelmet(props) { const { description, location, keywords, title } = props; return ( { ); -}; +} CustomHelmet.propTypes = { description: string, @@ -70,10 +70,4 @@ CustomHelmet.propTypes = { title: string }; -CustomHelmet.defaultProps = { - description: null, - keywords: null, - title: null -}; - export default CustomHelmet; diff --git a/lib/ui/partials/Layout.js b/lib/ui/partials/Layout.js index 59195db5..ec70d84a 100644 --- a/lib/ui/partials/Layout.js +++ b/lib/ui/partials/Layout.js @@ -163,12 +163,11 @@ class Layout extends Component { <> {children} - + ( - - - - +function Footer() { + return ( + + + - - - - - -); + + + + ) +} Footer.propTypes = {}; -Footer.defaultProps = {}; - export default Footer; diff --git a/lib/ui/partials/ofLayout/Main.js b/lib/ui/partials/ofLayout/Main.js index c17b36f3..109e8912 100644 --- a/lib/ui/partials/ofLayout/Main.js +++ b/lib/ui/partials/ofLayout/Main.js @@ -32,6 +32,4 @@ const Main = props => { Main.propTypes = {}; -Main.defaultProps = {}; - export default Main; diff --git a/lib/ui/partials/ofLayout/MobileMenu.js b/lib/ui/partials/ofLayout/MobileMenu.js index 81c51912..886bbc6a 100644 --- a/lib/ui/partials/ofLayout/MobileMenu.js +++ b/lib/ui/partials/ofLayout/MobileMenu.js @@ -1,4 +1,4 @@ -import {} from "prop-types"; +import PropTypes from "prop-types"; import React from "react"; import styled from "styled-components"; @@ -26,56 +26,56 @@ const MenuItem = styled.li` ${setType("l")}; `; -const MobileMenu = props => { - const { location } = props; +function MobileMenu(props) { + const { location, toggleModal, ...restProps } = props; const { pathname } = location; return ( - + - + Home - + Portfolol - + Blog - + About - + Fame - + FAQ - + People - + EOTM - + Contact @@ -84,10 +84,10 @@ const MobileMenu = props => { ); -}; - -MobileMenu.propTypes = {}; +} -MobileMenu.defaultProps = {}; +MobileMenu.propTypes = { + toggleModal: PropTypes.func +}; export default MobileMenu; diff --git a/lib/ui/partials/ofLayout/Parallax.js b/lib/ui/partials/ofLayout/Parallax.js index 01c4055b..0c176617 100644 --- a/lib/ui/partials/ofLayout/Parallax.js +++ b/lib/ui/partials/ofLayout/Parallax.js @@ -42,7 +42,7 @@ const ParallaxEl = styled.div` } `; -const Parallax = () => { +function Parallax() { const layer1plx = [ { easing: "easeInOutSine", @@ -164,10 +164,6 @@ const Parallax = () => { ); -}; - -Parallax.propTypes = {}; - -Parallax.defaultProps = {}; +} export default Parallax; diff --git a/lib/ui/partials/ofLayout/Topbar.js b/lib/ui/partials/ofLayout/Topbar.js index 83c36cdc..de8e1e7f 100644 --- a/lib/ui/partials/ofLayout/Topbar.js +++ b/lib/ui/partials/ofLayout/Topbar.js @@ -54,102 +54,100 @@ const MenuToggle = styled.div` } `; -const Topbar = props => { - const { controls, location } = props; +function Topbar(props) { + const { controls, location, ...restProps } = props; return ( - <> - - - - - - - - - - - - - - - - Portfolol - - - - - Blog - - - - - About - - - - - Fame - - - - - FAQ - - - - - People - - - - - EOTM - - - - - Contact - - - - - - + + + + + + + + + + + + + + + + Portfolol - - - - - - - > + + + + Blog + + + + + About + + + + + Fame + + + + + FAQ + + + + + People + + + + + EOTM + + + + + Contact + + + + + + + + + + + + + ); -}; +} Topbar.propTypes = { controls: shape({ @@ -157,6 +155,4 @@ Topbar.propTypes = { }).isRequired }; -Topbar.defaultProps = {}; - export default Topbar; diff --git a/lib/ui/templates/BlogListingTpl.js b/lib/ui/templates/BlogListingTpl.js index 1dccd693..78d16e8b 100644 --- a/lib/ui/templates/BlogListingTpl.js +++ b/lib/ui/templates/BlogListingTpl.js @@ -1,7 +1,7 @@ import { graphql, Link } from "gatsby"; import { object, shape } from "prop-types"; import React, { Component } from "react"; -import Img from "gatsby-image"; +import { GatsbyImage } from "gatsby-plugin-image"; import styled from "styled-components"; import { Icon, Tile } from "ui/components"; @@ -81,52 +81,47 @@ export default class BlogListingTpl extends Component { render() { const { posts } = this.props.data; const { frontmatter } = this.props.data.markdownRemark; - return ( - <> - - - - {frontmatter.heading} - {frontmatter.subheading} - - - - {posts.edges.map(({ node }) => { - const { timeToRead } = node; - const { cover, date, summary, title, uid } = node.frontmatter; - return ( - - - {cover ? ( - - - - ) : null} - - {title} - - - - - - {summary} - - - {date} - {timeToRead} min read - - - - ); - })} - - - - > - ); + return <> + + + + {frontmatter.heading} + {frontmatter.subheading} + + + + {posts.edges.map(({ node }) => { + const { timeToRead } = node; + const { cover, date, summary, title, uid } = node.frontmatter; + return ( + + + {cover ? ( + + + + ) : null} + + {title} + + + + + + {summary} + + + {date} + {timeToRead} min read + + + + ); + })} + + + + >; } } @@ -137,44 +132,41 @@ BlogListingTpl.propTypes = { }).isRequired }; -export const pageQuery = graphql` - query BlogTplQuery($uid: String!) { - markdownRemark(frontmatter: { uid: { eq: $uid } }) { - html - frontmatter { - uid - title - heading - subheading - } +export const pageQuery = graphql`query BlogTplQuery($uid: String!) { + markdownRemark(frontmatter: {uid: {eq: $uid}}) { + html + frontmatter { + uid + title + heading + subheading } - posts: allMarkdownRemark( - filter: { fileAbsolutePath: { regex: "/pages/tldr/.*post.md/" } } - sort: { order: DESC, fields: [frontmatter___date] } - ) { - edges { - node { - id - timeToRead - frontmatter { - uid - cover { - childImageSharp { - fluid( - maxHeight: 240 - quality: 100 - traceSVG: { color: "lightgray" } - ) { - ...GatsbyImageSharpFluid_withWebp_tracedSVG - } - } + } + posts: allMarkdownRemark( + filter: {fileAbsolutePath: {regex: "/pages/tldr/.*post.md/"}} + sort: {frontmatter: {date: DESC}} + ) { + edges { + node { + id + timeToRead + frontmatter { + uid + cover { + childImageSharp { + gatsbyImageData( + height: 240 + quality: 100 + placeholder: DOMINANT_COLOR + layout: FULL_WIDTH + ) } - date(formatString: "MMMM D, YYYY") - summary - title } + date(formatString: "MMMM D, YYYY") + summary + title } } } } -`; +}`; diff --git a/lib/ui/templates/BlogPostTpl.js b/lib/ui/templates/BlogPostTpl.js index 5dff1fde..ffca2176 100644 --- a/lib/ui/templates/BlogPostTpl.js +++ b/lib/ui/templates/BlogPostTpl.js @@ -1,7 +1,7 @@ import { graphql } from "gatsby"; import { object, shape } from "prop-types"; import React, { Component } from "react"; -import Img from "gatsby-image"; +import { GatsbyImage } from "gatsby-plugin-image"; import { Body, Header, Helmet, Layout } from "ui/partials"; import { Copy, Tile } from "ui/components"; @@ -12,11 +12,6 @@ export default class BlogPostTpl extends Component { const readingTime = Math.random() * 300; if (typeof window !== "undefined") { this.tick = this.tick.bind(this); - //setInterval(this.tick, 3000); - // Note the above line was removed because it was causing - // the page to flash every 3 seconds. - // See https://github.com/BadIdeaFactory/biffud.com/issues/99 - // for further details. } this.state = { readingTime @@ -33,34 +28,32 @@ export default class BlogPostTpl extends Component { const blogPost = this.props.data.markdownRemark; const { frontmatter, html } = blogPost; const { cover, date, title } = frontmatter; - return ( - <> - - - - - Reading Time: {this.state.readingTime.toFixed(2)} seconds - - {title} - {date} - - - {cover ? ( - - ) : null} - - - - - - > - ); + return <> + + + + + Reading Time: {this.state.readingTime.toFixed(2)} seconds + + {title} + {date} + + + {cover ? ( + + ) : null} + + + + + + >; } } @@ -70,26 +63,23 @@ BlogPostTpl.propTypes = { }).isRequired }; -export const pageQuery = graphql` - query BlogPostsByUID($uid: String!) { - markdownRemark(frontmatter: { uid: { eq: $uid } }) { - html - frontmatter { - uid - date(formatString: "MMMM DD, YYYY") - title - cover { - childImageSharp { - fluid( - maxWidth: 800 - quality: 90 - traceSVG: { color: "lightgray" } - ) { - ...GatsbyImageSharpFluid_withWebp_tracedSVG - } - } +export const pageQuery = graphql`query BlogPostsByUID($uid: String!) { + markdownRemark(frontmatter: {uid: {eq: $uid}}) { + html + frontmatter { + uid + date(formatString: "MMMM DD, YYYY") + title + cover { + childImageSharp { + gatsbyImageData( + width: 900 + quality: 90 + placeholder: DOMINANT_COLOR + layout: CONSTRAINED + ) } } } } -`; +}`; diff --git a/lib/ui/templates/FAQListingTpl.js b/lib/ui/templates/FAQListingTpl.js index eaaa4375..b7dc9e6c 100644 --- a/lib/ui/templates/FAQListingTpl.js +++ b/lib/ui/templates/FAQListingTpl.js @@ -9,7 +9,7 @@ import { setSpace } from "ui/mixins"; const Questions = styled(Tile)` ${setSpace("pah")}; - display: ${({ isActive }) => (isActive ? "block" : "none")}; + display: ${({ $isActive }) => ($isActive ? "block" : "none")}; margin-left: auto; margin-right: auto; max-width: 900px; @@ -61,12 +61,12 @@ export default class FAQListingTpl extends Component { {frontmatter.membershipTab} - + - +
{frontmatter.subheading}
{summary}