From cf083d3288b2539dd48b57bc2c7eb5f2b24c223a Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 19 Nov 2022 15:09:13 +0000 Subject: [PATCH] remove react-helmet --- .jest/__mocks__/matchMedia.ts | 27 ++++ .jest/setup-test-env.ts | 1 + content/articles/2020-05-08-uses/index.md | 36 ++--- gatsby-config.ts | 6 +- package-lock.json | 130 ++---------------- package.json | 5 +- src/components/Layout.tsx | 6 - src/components/atoms/ExifMap.tsx | 3 +- src/components/atoms/HeadMeta/SchemaOrg.tsx | 62 +++++++++ src/components/atoms/HeadMeta/index.tsx | 72 ++++++++++ src/components/atoms/SEO/MetaTags.tsx | 75 ---------- src/components/atoms/SEO/index.tsx | 75 ---------- src/components/atoms/SEO/schemaOrg.tsx | 57 -------- src/components/atoms/Typekit.tsx | 33 ++--- src/components/molecules/Menu.tsx | 14 +- src/components/molecules/Search/index.tsx | 13 +- src/components/molecules/ThemeSwitch.test.tsx | 2 - src/components/molecules/ThemeSwitch.tsx | 86 ++++-------- src/components/templates/Archive.tsx | 46 ++++--- src/components/templates/Page.tsx | 11 +- src/components/templates/Photos.tsx | 41 +++--- src/components/templates/Post/index.tsx | 51 +++++-- src/global/global.css | 12 -- src/hooks/useDarkMode.ts | 46 +++++-- src/pages/404.tsx | 25 ++-- src/pages/index.tsx | 7 +- src/pages/tags.tsx | 21 ++- src/pages/thanks.tsx | 60 ++++---- vendor/polar-0.0.6.vsix | Bin 955804 -> 0 bytes 29 files changed, 432 insertions(+), 591 deletions(-) create mode 100644 .jest/__mocks__/matchMedia.ts create mode 100644 src/components/atoms/HeadMeta/SchemaOrg.tsx create mode 100644 src/components/atoms/HeadMeta/index.tsx delete mode 100644 src/components/atoms/SEO/MetaTags.tsx delete mode 100644 src/components/atoms/SEO/index.tsx delete mode 100644 src/components/atoms/SEO/schemaOrg.tsx delete mode 100644 vendor/polar-0.0.6.vsix diff --git a/.jest/__mocks__/matchMedia.ts b/.jest/__mocks__/matchMedia.ts new file mode 100644 index 00000000..e4341f4a --- /dev/null +++ b/.jest/__mocks__/matchMedia.ts @@ -0,0 +1,27 @@ +const matchMediaMock = Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest + .fn() + .mockImplementationOnce((query) => ({ + matches: false, + media: query, + onchange: null, + addListener: jest.fn(), // deprecated + removeListener: jest.fn(), // deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn() + })) + .mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // deprecated + removeListener: jest.fn(), // deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn() + })) +}) + +export default matchMediaMock diff --git a/.jest/setup-test-env.ts b/.jest/setup-test-env.ts index dda0d05e..46cea308 100644 --- a/.jest/setup-test-env.ts +++ b/.jest/setup-test-env.ts @@ -1,4 +1,5 @@ import '@testing-library/jest-dom/extend-expect' +import './__mocks__/matchMedia' import * as Gatsby from 'gatsby' const useStaticQuery = jest.spyOn(Gatsby, 'useStaticQuery') diff --git a/content/articles/2020-05-08-uses/index.md b/content/articles/2020-05-08-uses/index.md index c4ac957d..8c126c69 100644 --- a/content/articles/2020-05-08-uses/index.md +++ b/content/articles/2020-05-08-uses/index.md @@ -26,38 +26,29 @@ A continuously updated list of devices, tools, and services I use to get digital My office is where my MacBook is, all these devices go wherever I travel to: - **[MacBook Pro (16-inch, 2019)](https://www.apple.com/macbook-pro-16/)** - _Space Gray, 2.6GHz 6-Core Intel Core i7, 16 GB RAM, 512GB SSD, AMD Radeon Pro 5300M 4GB, US International keyboard_ - My main workhorse powering my daily work & play. Everything is pretty much amazing and it handles everything I throw at it. Love the screen, keyboard, and speakers. Still miss the SD card slot which Apple deemed not Pro enough. + _Space Gray, 2.6GHz 6-Core Intel Core i7, 16 GB RAM, 512GB SSD, AMD Radeon Pro 5300M 4GB, US International keyboard_ - **[iPhone 11 Pro](https://www.apple.com/iphone-11-pro/)** - _Space Gray, 256GB_ - My main camera and used for everything when I'm not on my Mac. I try to keep it only for personal communication and reading. I'm never quite sure what to do with all its unbelievable power, but the screen is the best display I ever looked at. Because of that, replaces a lot the iPad for reading. + _Space Gray, 256GB_ -- **[AirPods Pro](https://www.apple.com/airpods-pro/)** - Rocked the original AirPods since their introduction, one of the best products Apple has ever made. By now using the Pro variant pretty much all the time when talking into my devices and participating in online meetings, or listening to music on the go. +- **[AirPods Pro](https://www.apple.com/airpods-pro/)** - **[iPad Pro (12.9-inch) 2021](https://www.apple.com/ipad-pro/)** - _Space Gray, 512GB, WiFi + Cellular_ - My 4th iPad after the original iPad. Since that time used it as a paper document replacement for reading and research and it became my favorite device to browse and edit photos on. Until I can run a local web development environment on iPadOS it is rarely useful for me to get coding work done but still intrigued by the possibilities and cleanliness of iPadOS compared to macOS. + _Space Gray, 512GB, WiFi + Cellular_ - **[Logitech MX Master 3 for Mac](https://www.logitech.com/en-us/products/mice/mx-master-3-mac-wireless-mouse.910-005693.html)** - _Black & Space Gray_ - Still a fan of the simplicity and gestures of the Magic Mouse 2, but it's just no fit for working precisely, or for gaming. Logitech's MX Master 3 provides both, and has great macOS support, unlike the people over at Razer. + _Black & Space Gray_ - **[Satechi Slim X1 Bluetooth Backlit Keyboard](https://satechi.net/products/slim-x1-bluetooth-backlit-keyboard)** - _US, Space Gray_ - Great compact keyboard with black keys which have a great key travel. Packed with other welcome features over Apple's keyboards like backlit keys and easy switching between 3 paired devices. + _US, Space Gray_ - **[Apple Watch Series 5](https://www.apple.com/apple-watch-series-5/)** - _40mm Space Gray Aluminum Case, Black Solo Loop_ - Mainly used for its health & fitness features so I can go on a run without my iPhone, and track the shit out of me. I like to keep it unobtrusive, all notifications are turned off, except for calendar event & Activity.app notifications. + _40mm Space Gray Aluminum Case, Black Solo Loop_ - **[Raspberry Pi 4 Model B](https://www.raspberrypi.org/products/raspberry-pi-4-model-b/)** - _4GB RAM_ - The little Linux and local server playground performing some serious tasks for all devices within any network I arrive at: [Pi-Hole](https://pi-hole.net) keeps all browsing adventures clean, and every network device's DNS traffic is routed through the Raspberry Pi. [Plex](https://www.plex.tv) is delivering a video library, capable of playing 4K content. It runs a [Tor](https://www.torproject.org) non-exit relay. Has a 4 TB hard drive attached for [storage for all network devices](/raspberry-pi-file-and-screen-sharing-macos-ios). + _4GB RAM_ -- **[Kindle Voyage](https://www.amazon.com/Amazon-Kindle-Voyage-6-Inch-4GB-eReader/dp/B00IOY8XWQ)** - The best experience for long time reading. Almost all my non-technical books are Kindle books. +- **[Kindle Paperwhite 11th Gen](https://www.amazon.com/dp/B08KTZ8249)** ## Software @@ -77,7 +68,7 @@ I live with **automatic dark mode** where all my devices and apps have a light t - **[iCloud Drive, 2 TB](https://www.icloud.com)** I have used Dropbox Pro for many years but it became too clunky and Apple's version turned into what I wanted Dropbox to be. Most of my non-code related files live there and are happily synced. -- **[Tresorit Premium, 500 GB](https://tresorit.com)** +- **[Tresorit Premium, 1 TB](https://tresorit.com)** Holds all the personal and sensitive documents. Works like Dropbox or iCloud Drive but with end-to-end encryption with my own private keys, and some nicely paranoid sharing features. - **[Scanner Pro](https://readdle.com/scannerpro)** @@ -224,7 +215,7 @@ I live with **automatic dark mode** where all my devices and apps have a light t - **[GnuPG](https://gnupg.org)** Use it since I use email but its clunky and rarely anyone uses it. Interacting with it only in Terminal.app for decrypting and encrypting, and use it to sign Git commits. Yes, I'm aware of [GPG Suite](https://gpgtools.org) but the instability it introduces into the whole operating system is not worth the usage to me. -- **[Messages](https://support.apple.com/explore/messages) & [Telegram](https://telegram.org)** +- **[Messages](https://support.apple.com/explore/messages) & [WhatsApp](https://whatsapp.com)** The only messengers I use every day for personal stuff, mostly on my iPhone. - **[Signal](https://www.signal.org)** @@ -288,16 +279,13 @@ Except within Notes.app, everything I write is composed as [GitHub Flavored Mark - **[iCloud Backup](https://support.apple.com/en-us/HT203977)** All mobile devices simply use this to create their backups. -- **[Rclone](https://rclone.org)** - For moving large cloud data around within and between online storage services. Usually run from my remote web server. - ## Self Hosted - I host my **[blog](https://kremalicious.com)** (which also includes my photo stream) and **[portfolio](https://matthiaskretschmann.com)** on **[AWS S3](https://aws.amazon.com/s3/)**, with **[Cloudflare](https://www.cloudflare.com)** in front of it. - I run my own **web and development server**, a droplet on **[DigitalOcean](https://m.do.co/c/9882a054acf6)**, running **[Nginx](https://nginx.org)**. -- I run my own **analytics server** with **[Matomo](https://matomo.org)**. +- I run my own **analytics server** with **[Umami](https://umami.is)**. - I run my own **Git repository hosting** with **[Gitea](https://gitea.com)** for private projects, and for automatically mirroring every GitHub repository I touch into it. A VPS running within **[Amazon Lightsail](https://aws.amazon.com/lightsail/)**. diff --git a/gatsby-config.ts b/gatsby-config.ts index f063883f..7352651e 100644 --- a/gatsby-config.ts +++ b/gatsby-config.ts @@ -85,10 +85,7 @@ const config: GatsbyConfig = { parentSelector: { 'body.dark': 'Nord' } }, injectStyles: false, - extensions: [ - 'nord-visual-studio-code', - `${__dirname}/vendor/polar-0.0.6.vsix` - ], + extensions: ['nord-visual-studio-code', 'polar'], languageAliases: {} } } @@ -217,7 +214,6 @@ const config: GatsbyConfig = { excludes: ['/archive', '/archive/**/*', '/thanks', '/tags'] } }, - 'gatsby-plugin-react-helmet', 'gatsby-plugin-catch-links', 'gatsby-redirect-from', 'gatsby-plugin-meta-redirect', diff --git a/package-lock.json b/package-lock.json index 6d9a5630..69aa94cd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,6 @@ "gatsby-plugin-manifest": "^5.0.0", "gatsby-plugin-meta-redirect": "^1.1.1", "gatsby-plugin-offline": "^6.0.0", - "gatsby-plugin-react-helmet": "^6.0.0", "gatsby-plugin-sharp": "^5.0.0", "gatsby-plugin-sitemap": "^6.0.0", "gatsby-plugin-svgr": "^3.0.0-beta.0", @@ -48,7 +47,6 @@ "react": "^18.2.0", "react-clipboard.js": "^2.0.16", "react-dom": "^18.2.0", - "react-helmet": "^6.1.0", "react-transition-group": "^4.4.5", "rehype-react": "^7.1.1", "remark-parse": "^10.0.1", @@ -68,11 +66,9 @@ "@types/node": "^18.11.9", "@types/react": "^18.0.25", "@types/react-dom": "^18.0.8", - "@types/react-helmet": "^6.1.5", "@types/react-transition-group": "^4.4.5", "@typescript-eslint/eslint-plugin": "^5.42.1", "@typescript-eslint/parser": "^5.42.1", - "@welldone-software/why-did-you-render": "^7.0.1", "babel-preset-gatsby": "^3.0.0", "eslint": "^8.27.0", "eslint-config-prettier": "^8.5.0", @@ -89,6 +85,7 @@ "node-iptc": "^1.0.5", "npm-run-all": "^4.1.5", "ora": "^6.1.2", + "polar": "https://gitpkg.now.sh/mtyn/polar/vscode?master", "postcss": "^8.4.19", "prettier": "^2.7.1", "stylelint": "^14.14.1", @@ -9721,15 +9718,6 @@ "@types/react": "*" } }, - "node_modules/@types/react-helmet": { - "version": "6.1.5", - "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.5.tgz", - "integrity": "sha512-/ICuy7OHZxR0YCAZLNg9r7I9aijWUWvxaPR6uTuyxe8tAj5RL4Sw1+R6NhXUtOsarkGYPmaHdBDvuXh2DIN/uA==", - "dev": true, - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -11047,18 +11035,6 @@ "@xtuc/long": "4.2.2" } }, - "node_modules/@welldone-software/why-did-you-render": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-7.0.1.tgz", - "integrity": "sha512-Qe/8Xxa2G+LMdI6VoazescPzjjkHYduCDa8aHOJR50e9Bgs8ihkfMBY+ev7B4oc3N59Zm547Sgjf8h5y0FOyoA==", - "dev": true, - "dependencies": { - "lodash": "^4" - }, - "peerDependencies": { - "react": "^16 || ^17 || ^18" - } - }, "node_modules/@wry/context": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.6.1.tgz", @@ -18629,21 +18605,6 @@ "node": ">=10.0.0" } }, - "node_modules/gatsby-plugin-react-helmet": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-6.0.0.tgz", - "integrity": "sha512-uK+KManFE06oeWrZcxpmrpDT0dfDLMPtTxBiU1YPeQeP31IMSsR1vMDTYnQcB+8y8Jw7xwM59id+mwmAYz1fZA==", - "dependencies": { - "@babel/runtime": "^7.15.4" - }, - "engines": { - "node": ">=18.0.0" - }, - "peerDependencies": { - "gatsby": "^5.0.0-next", - "react-helmet": "^5.1.3 || ^6.0.0" - } - }, "node_modules/gatsby-plugin-sharp": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-5.0.0.tgz", @@ -30359,6 +30320,15 @@ "node": ">=10.13.0" } }, + "node_modules/polar": { + "version": "0.1.1", + "resolved": "https://gitpkg.now.sh/mtyn/polar/vscode?master", + "integrity": "sha512-2QrsAD1Xzewu+T4BJxOB1kIrtRibEdC+/xboP81ueu03/YHYGwdlGXz/YYvqQ09uLqHEPD0BgguWoq/YpCk6Xg==", + "dev": true, + "engines": { + "vscode": "^1.30.0" + } + }, "node_modules/posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", @@ -31686,25 +31656,6 @@ "react": "^18.2.0" } }, - "node_modules/react-fast-compare": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", - "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" - }, - "node_modules/react-helmet": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz", - "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==", - "dependencies": { - "object-assign": "^4.1.1", - "prop-types": "^15.7.2", - "react-fast-compare": "^3.1.1", - "react-side-effect": "^2.1.0" - }, - "peerDependencies": { - "react": ">=16.3.0" - } - }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -31822,14 +31773,6 @@ "react": "^16.0.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/react-side-effect": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz", - "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==", - "peerDependencies": { - "react": "^16.3.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/react-style-singleton": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", @@ -45057,15 +45000,6 @@ "@types/react": "*" } }, - "@types/react-helmet": { - "version": "6.1.5", - "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.5.tgz", - "integrity": "sha512-/ICuy7OHZxR0YCAZLNg9r7I9aijWUWvxaPR6uTuyxe8tAj5RL4Sw1+R6NhXUtOsarkGYPmaHdBDvuXh2DIN/uA==", - "dev": true, - "requires": { - "@types/react": "*" - } - }, "@types/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -46106,15 +46040,6 @@ "@xtuc/long": "4.2.2" } }, - "@welldone-software/why-did-you-render": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-7.0.1.tgz", - "integrity": "sha512-Qe/8Xxa2G+LMdI6VoazescPzjjkHYduCDa8aHOJR50e9Bgs8ihkfMBY+ev7B4oc3N59Zm547Sgjf8h5y0FOyoA==", - "dev": true, - "requires": { - "lodash": "^4" - } - }, "@wry/context": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.6.1.tgz", @@ -52439,14 +52364,6 @@ } } }, - "gatsby-plugin-react-helmet": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-6.0.0.tgz", - "integrity": "sha512-uK+KManFE06oeWrZcxpmrpDT0dfDLMPtTxBiU1YPeQeP31IMSsR1vMDTYnQcB+8y8Jw7xwM59id+mwmAYz1fZA==", - "requires": { - "@babel/runtime": "^7.15.4" - } - }, "gatsby-plugin-sharp": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-5.0.0.tgz", @@ -60605,6 +60522,11 @@ "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz", "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==" }, + "polar": { + "version": "https://gitpkg.now.sh/mtyn/polar/vscode?master", + "integrity": "sha512-2QrsAD1Xzewu+T4BJxOB1kIrtRibEdC+/xboP81ueu03/YHYGwdlGXz/YYvqQ09uLqHEPD0BgguWoq/YpCk6Xg==", + "dev": true + }, "posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", @@ -61521,22 +61443,6 @@ "scheduler": "^0.23.0" } }, - "react-fast-compare": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", - "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" - }, - "react-helmet": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz", - "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==", - "requires": { - "object-assign": "^4.1.1", - "prop-types": "^15.7.2", - "react-fast-compare": "^3.1.1", - "react-side-effect": "^2.1.0" - } - }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -61613,12 +61519,6 @@ "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0" } }, - "react-side-effect": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz", - "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==", - "requires": {} - }, "react-style-singleton": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", diff --git a/package.json b/package.json index 42e68f67..df5ff745 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,6 @@ "gatsby-plugin-manifest": "^5.0.0", "gatsby-plugin-meta-redirect": "^1.1.1", "gatsby-plugin-offline": "^6.0.0", - "gatsby-plugin-react-helmet": "^6.0.0", "gatsby-plugin-sharp": "^5.0.0", "gatsby-plugin-sitemap": "^6.0.0", "gatsby-plugin-svgr": "^3.0.0-beta.0", @@ -66,7 +65,6 @@ "react": "^18.2.0", "react-clipboard.js": "^2.0.16", "react-dom": "^18.2.0", - "react-helmet": "^6.1.0", "react-transition-group": "^4.4.5", "rehype-react": "^7.1.1", "remark-parse": "^10.0.1", @@ -86,11 +84,9 @@ "@types/node": "^18.11.9", "@types/react": "^18.0.25", "@types/react-dom": "^18.0.8", - "@types/react-helmet": "^6.1.5", "@types/react-transition-group": "^4.4.5", "@typescript-eslint/eslint-plugin": "^5.42.1", "@typescript-eslint/parser": "^5.42.1", - "@welldone-software/why-did-you-render": "^7.0.1", "babel-preset-gatsby": "^3.0.0", "eslint": "^8.27.0", "eslint-config-prettier": "^8.5.0", @@ -107,6 +103,7 @@ "node-iptc": "^1.0.5", "npm-run-all": "^4.1.5", "ora": "^6.1.2", + "polar": "https://gitpkg.now.sh/mtyn/polar/vscode?master", "postcss": "^8.4.19", "prettier": "^2.7.1", "stylelint": "^14.14.1", diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 3664df6c..017f10a6 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -4,12 +4,6 @@ import Header from './organisms/Header' import Footer from './organisms/Footer' import * as styles from './Layout.module.css' -// if (process.env.NODE_ENV !== 'production') { -// // eslint-disable-next-line -// const whyDidYouRender = require('@welldone-software/why-did-you-render/dist/no-classes-transpile/umd/whyDidYouRender.min.js') -// whyDidYouRender(React) -// } - export default function Layout({ children }: { children: any }): ReactElement { return ( <> diff --git a/src/components/atoms/ExifMap.tsx b/src/components/atoms/ExifMap.tsx index 59c6e24a..86b20a95 100644 --- a/src/components/atoms/ExifMap.tsx +++ b/src/components/atoms/ExifMap.tsx @@ -19,8 +19,7 @@ export default function ExifMap({ }: { gps: { latitude: number; longitude: number } }): ReactElement { - const { value } = useDarkMode() - const isDarkMode = value + const { isDarkMode } = useDarkMode() const [zoom, setZoom] = useState(12) const zoomIn = () => { diff --git a/src/components/atoms/HeadMeta/SchemaOrg.tsx b/src/components/atoms/HeadMeta/SchemaOrg.tsx new file mode 100644 index 00000000..1c5eb54c --- /dev/null +++ b/src/components/atoms/HeadMeta/SchemaOrg.tsx @@ -0,0 +1,62 @@ +import { ImageDataLike } from 'gatsby-plugin-image' +import React, { ReactElement } from 'react' +import { useSiteMetadata } from '../../../hooks/use-site-metadata' + +type SchemaOrgProps = { + post?: { + title: string + url: string + image: ImageDataLike + description: string + datePublished: string + dateModified: string + } +} + +export default function SchemaOrg({ post }: SchemaOrgProps): ReactElement { + const { siteTitle, siteUrl, author } = useSiteMetadata() + + const schemaOrgJsonLd: any = [ + { + '@context': 'http://schema.org', + '@type': 'Blog', + url: siteUrl, + name: siteTitle + } + ] + + if (post) { + schemaOrgJsonLd.push({ + '@context': 'http://schema.org', + '@type': 'BlogPosting', + author: { + '@type': 'Person', + name: author.name + }, + publisher: { + '@type': 'Organization', + name: author.name + }, + url: post.url, + name: post.title, + headline: post.title, + image: { + '@type': 'ImageObject', + url: post.image + }, + description: post.description, + datePublished: post.datePublished, + dateModified: post.dateModified || post.datePublished, + mainEntityOfPage: { + '@type': 'Blog', + '@id': siteUrl + } + }) + } + + return ( + + ) +} diff --git a/src/components/atoms/HeadMeta/index.tsx b/src/components/atoms/HeadMeta/index.tsx new file mode 100644 index 00000000..a047517d --- /dev/null +++ b/src/components/atoms/HeadMeta/index.tsx @@ -0,0 +1,72 @@ +import React, { ReactElement } from 'react' +import { graphql, useStaticQuery } from 'gatsby' +import { getSrc, ImageDataLike } from 'gatsby-plugin-image' +import { useSiteMetadata } from '../../../hooks/use-site-metadata' +import useDarkMode from '../../../hooks/useDarkMode' + +const query = graphql` + query Logo { + logo: allFile(filter: { name: { eq: "apple-touch-icon" } }) { + edges { + node { + relativePath + } + } + } + } +` + +export type HeadMetaProps = { + title?: string + description?: string + image?: ImageDataLike + slug: string + children?: ReactElement +} + +export default function HeadMeta(props: HeadMetaProps): ReactElement { + const data = useStaticQuery(query) + const logo = data.logo.edges[0].node.relativePath + const { siteTitle, siteUrl, siteDescription, author } = useSiteMetadata() + const { themeColor } = useDarkMode() + + const title = props.title + ? `${props.title} ¦ ${siteTitle}` + : `${siteTitle} ¦ ${siteDescription}` + const description = props.description + ? props.description.slice(0, 160) + : siteDescription + const url = props.slug ? `${siteUrl}${props.slug}` : siteUrl + const image = props.image + ? `${siteUrl}${getSrc(props.image)}` + : `${siteUrl}${logo}` + + return ( + <> + + + {title} + + + + + + + + + + + + + {props.children} + + ) +} diff --git a/src/components/atoms/SEO/MetaTags.tsx b/src/components/atoms/SEO/MetaTags.tsx deleted file mode 100644 index fa2758ef..00000000 --- a/src/components/atoms/SEO/MetaTags.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React, { ReactElement } from 'react' -import { Helmet } from 'react-helmet' -import { useSiteMetadata } from '../../../hooks/use-site-metadata' -import schemaOrg from './schemaOrg' - -function feedLinks(siteUrl: string) { - return ( - - ) -} - -export default function MetaTags({ - description, - image, - url, - postSEO, - title, - datePublished, - dateModified -}: { - description: string - image: string - url: string - postSEO: boolean - title: string - datePublished: string - dateModified: string -}): ReactElement { - const { siteTitle, siteDescription, siteUrl, author } = useSiteMetadata() - - return ( - - - - - - - - {schemaOrg( - siteUrl, - title, - postSEO, - url, - image, - description, - author.name, - datePublished, - dateModified - )} - - - - - - - {postSEO && } - - - - - {feedLinks(siteUrl)} - - ) -} diff --git a/src/components/atoms/SEO/index.tsx b/src/components/atoms/SEO/index.tsx deleted file mode 100644 index 17edb205..00000000 --- a/src/components/atoms/SEO/index.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React, { ReactElement } from 'react' -import { graphql, useStaticQuery } from 'gatsby' -import { getSrc } from 'gatsby-plugin-image' -import { useSiteMetadata } from '../../../hooks/use-site-metadata' -import MetaTags from './MetaTags' - -const query = graphql` - query Logo { - logo: allFile(filter: { name: { eq: "apple-touch-icon" } }) { - edges { - node { - relativePath - } - } - } - } -` - -export interface SeoPost { - frontmatter: { - title: string - description?: string - image?: any - updated?: string - } - fields?: { - date: string - } - excerpt?: string -} - -export default function SEO({ - post, - slug -}: { - post?: SeoPost - slug?: string -}): ReactElement { - const data = useStaticQuery(query) - const logo = data.logo.edges[0].node.relativePath - const { siteTitle, siteUrl, siteDescription } = useSiteMetadata() - - let title: string - let description: string - let image: string - let postURL: string - - if (post) { - const postMeta = post.frontmatter - title = `${postMeta.title} ¦ ${siteTitle}` - description = postMeta.description ? postMeta.description : post.excerpt - image = postMeta.image ? getSrc(postMeta.image) : `/${logo}` - postURL = `${siteUrl}${slug}` - } else { - title = `${siteTitle} ¦ ${siteDescription}` - description = siteDescription - image = `/${logo}` - } - - image = `${siteUrl}${image}` - const blogURL = siteUrl - const url = post ? postURL : blogURL - - return ( - - ) -} diff --git a/src/components/atoms/SEO/schemaOrg.tsx b/src/components/atoms/SEO/schemaOrg.tsx deleted file mode 100644 index fc6df7fa..00000000 --- a/src/components/atoms/SEO/schemaOrg.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, { ReactElement } from 'react' - -export default function schemaOrg( - blogURL: string, - title: string, - postSEO: boolean, - postURL: string, - image: string, - description: string, - author: string, - datePublished: string, - dateModified: string -): ReactElement { - const schemaOrgJSONLD: any = [ - { - '@context': 'http://schema.org', - '@type': 'Blog', - url: blogURL, - name: title - } - ] - - if (postSEO) { - schemaOrgJSONLD.push({ - '@context': 'http://schema.org', - '@type': 'BlogPosting', - author: { - '@type': 'Person', - name: author - }, - publisher: { - '@type': 'Organization', - name: author - }, - url: postURL, - name: title, - headline: title, - image: { - '@type': 'ImageObject', - url: image - }, - description, - datePublished, - dateModified: dateModified || datePublished, - mainEntityOfPage: { - '@type': 'Blog', - '@id': blogURL - } - }) - } - - return ( - - ) -} diff --git a/src/components/atoms/Typekit.tsx b/src/components/atoms/Typekit.tsx index a312340a..4246d2e9 100644 --- a/src/components/atoms/Typekit.tsx +++ b/src/components/atoms/Typekit.tsx @@ -1,26 +1,17 @@ +import { Script } from 'gatsby' import React from 'react' -import { Helmet } from 'react-helmet' -const getTypekitScript = () => ( - -) +const script = ` + (function(d) { + var config = { + kitId: '${process.env.GATSBY_TYPEKIT_ID}', + scriptTimeout: 3000, + async: true + }, + h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) + })(document); +` export default function Typekit(): JSX.Element { - return ( - - - {getTypekitScript()} - - ) + return