From 9b54fe84ef168a9c3bd38e42c8400c6755c31949 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 14 Dec 2019 15:46:43 +0100 Subject: [PATCH] refactorings and fixes --- config.js | 6 ++- ...4-london-police-afraid-of-photographers.md | 14 +++---- ...8-04-11-photographers-strike-back-in-uk.md | 2 +- gatsby-config.js | 3 +- gatsby/createPages.js | 2 +- jest/__fixtures__/link.json | 25 +++++++++++ jest/__fixtures__/postWithMore.json | 41 +++++++++++++++++++ src/@types/Site.d.ts | 4 ++ src/components/atoms/Transitions.ts | 31 -------------- src/components/molecules/Featured.test.tsx | 10 +++++ src/components/molecules/Networks.test.tsx | 16 ++++++++ src/components/molecules/PostTeaser.test.tsx | 13 ++++++ .../molecules/RelatedPosts.test.tsx | 16 ++++++++ src/components/molecules/ThemeSwitch.test.tsx | 4 +- src/components/molecules/ThemeSwitch.tsx | 7 ++-- .../Web3Donation/InputGroup.test.tsx | 21 ++++++++++ src/components/organisms/Header.test.tsx | 16 +++++++- .../organisms/Post/Actions.module.scss} | 0 .../organisms/Post/Actions.tsx} | 6 +-- .../organisms/Post/Content.tsx} | 6 +-- .../organisms/Post/Lead.module.scss} | 0 .../organisms/Post/Lead.tsx} | 4 +- .../organisms/Post/LinkActions.module.scss} | 0 .../organisms/Post/LinkActions.tsx} | 6 +-- .../organisms/Post/Meta.module.scss} | 0 .../organisms/Post/Meta.tsx} | 10 ++--- .../organisms/Post/More.module.scss} | 0 .../organisms/Post/More.tsx} | 4 +- .../organisms}/Post/PrevNext.module.scss | 0 .../organisms}/Post/PrevNext.tsx | 2 +- .../organisms/Post/Title.module.scss} | 0 .../organisms/Post/Title.tsx} | 4 +- .../organisms/Post/Toc.module.scss} | 0 .../organisms/Post/Toc.tsx} | 2 +- src/helpers/wrapPageElement.test.tsx | 12 ++++++ src/hooks/use-site-metadata.ts | 4 ++ .../index.module.scss => Post.module.scss} | 0 src/templates/Post.test.tsx | 24 +++++++++++ src/templates/{Post/index.tsx => Post.tsx} | 26 ++++++------ src/templates/Post/index.test.tsx | 17 -------- src/templates/Posts.tsx | 10 ++--- 41 files changed, 259 insertions(+), 109 deletions(-) create mode 100644 jest/__fixtures__/link.json create mode 100644 jest/__fixtures__/postWithMore.json delete mode 100644 src/components/atoms/Transitions.ts create mode 100644 src/components/molecules/Featured.test.tsx create mode 100644 src/components/molecules/Networks.test.tsx create mode 100644 src/components/molecules/PostTeaser.test.tsx create mode 100644 src/components/molecules/RelatedPosts.test.tsx create mode 100644 src/components/molecules/Web3Donation/InputGroup.test.tsx rename src/{templates/Post/PostActions.module.scss => components/organisms/Post/Actions.module.scss} (100%) rename src/{templates/Post/PostActions.tsx => components/organisms/Post/Actions.tsx} (89%) rename src/{templates/Post/PostContent.tsx => components/organisms/Post/Content.tsx} (84%) rename src/{templates/Post/PostLead.module.scss => components/organisms/Post/Lead.module.scss} (100%) rename src/{templates/Post/PostLead.tsx => components/organisms/Post/Lead.tsx} (86%) rename src/{templates/Post/PostLinkActions.module.scss => components/organisms/Post/LinkActions.module.scss} (100%) rename src/{templates/Post/PostLinkActions.tsx => components/organisms/Post/LinkActions.tsx} (74%) rename src/{templates/Post/PostMeta.module.scss => components/organisms/Post/Meta.module.scss} (100%) rename src/{templates/Post/PostMeta.tsx => components/organisms/Post/Meta.tsx} (83%) rename src/{templates/Post/PostMore.module.scss => components/organisms/Post/More.module.scss} (100%) rename src/{templates/Post/PostMore.tsx => components/organisms/Post/More.tsx} (74%) rename src/{templates => components/organisms}/Post/PrevNext.module.scss (100%) rename src/{templates => components/organisms}/Post/PrevNext.tsx (94%) rename src/{templates/Post/PostTitle.module.scss => components/organisms/Post/Title.module.scss} (100%) rename src/{templates/Post/PostTitle.tsx => components/organisms/Post/Title.tsx} (89%) rename src/{templates/Post/PostToc.module.scss => components/organisms/Post/Toc.module.scss} (100%) rename src/{templates/Post/PostToc.tsx => components/organisms/Post/Toc.tsx} (85%) create mode 100644 src/helpers/wrapPageElement.test.tsx rename src/templates/{Post/index.module.scss => Post.module.scss} (100%) create mode 100644 src/templates/Post.test.tsx rename src/templates/{Post/index.tsx => Post.tsx} (77%) delete mode 100644 src/templates/Post/index.test.tsx diff --git a/config.js b/config.js index c1ce4b3d..2f162f58 100644 --- a/config.js +++ b/config.js @@ -34,5 +34,9 @@ module.exports = { title: 'Tags', link: '/tags' } - ] + ], + darkModeConfig: { + classNameDark: 'dark', + classNameLight: 'light' + } } diff --git a/content/posts/2008-04-04-london-police-afraid-of-photographers.md b/content/posts/2008-04-04-london-police-afraid-of-photographers.md index 4dca37cb..eec1d519 100644 --- a/content/posts/2008-04-04-london-police-afraid-of-photographers.md +++ b/content/posts/2008-04-04-london-police-afraid-of-photographers.md @@ -1,27 +1,27 @@ --- -type: post +type: link title: London police afraid of photographers author: Matthias Kretschmann - +linkurl: http://www.met.police.uk/campaigns/campaign_ct_2008.htm date: 2008-04-04 19:01:09+00:00 tags: - photography + +redirect_from: + - /2008/04/london-police-afraid-of-photographers/ --- ![London cops](../media/londonpolice.jpg) - - > Thousands of people take photos every day. What if one of them seems odd? Terrorists use surveillance to help plan attacks, taking photos and making notes about security measures like the location of CCTV cameras. If you see someone doing that, we need to know. Let experienced officers decide what action to take. -yeah, i'm guilty. i took several photos of cctv cameras: -[At Agentur Ahron](http://www.agentur-ahron.de/bild_db/details.php?image_id=552) -[At Panthermedia](http://www.panthermedia.net/index2.php?page=image_preview.php&image=441619) +Yeah, i'm guilty. I took several photos of cctv cameras. And there are more in my photo archive... Guess you have no other choice than informing the London cops cause they just "need to know". You can find the campaign website of the london police here: [Metropolitan Police 2008 Counter-Terrorism advertising campaign launched](http://www.met.police.uk/campaigns/campaign_ct_2008.htm) + You will be surprised what other things they are afraid of... diff --git a/content/posts/2008-04-11-photographers-strike-back-in-uk.md b/content/posts/2008-04-11-photographers-strike-back-in-uk.md index 22494a9a..61f7fb9e 100644 --- a/content/posts/2008-04-11-photographers-strike-back-in-uk.md +++ b/content/posts/2008-04-11-photographers-strike-back-in-uk.md @@ -13,7 +13,7 @@ tags: [![London police afraid of photographers](../media/londonpolice.jpg)](../media/londonpolice.jpg) -Remember [the campaign of the London police](http://www.kremalicious.com/2008/04/london-police-afraid-of-photographers/) calling all people to regard photographers as potential terrorists? +Remember [the campaign of the London police](/london-police-afraid-of-photographers/) calling all people to regard photographers as potential terrorists? Now the [PressGazette reports](http://www.pressgazette.co.uk/node/40875) that diff --git a/gatsby-config.js b/gatsby-config.js index 1587330a..49330e18 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -221,8 +221,7 @@ module.exports = { { resolve: 'gatsby-plugin-use-dark-mode', options: { - classNameDark: 'dark', - classNameLight: 'light', + ...siteConfig.darkModeConfig, minify: true } }, diff --git a/gatsby/createPages.js b/gatsby/createPages.js index 1ba3bf91..61110bef 100644 --- a/gatsby/createPages.js +++ b/gatsby/createPages.js @@ -24,7 +24,7 @@ function getPaginationData(i, numPages, slug) { } exports.generatePostPages = (createPage, posts) => { - const postTemplate = path.resolve('src/templates/Post/index.tsx') + const postTemplate = path.resolve('src/templates/Post.tsx') // Create Post pages posts.forEach(post => { diff --git a/jest/__fixtures__/link.json b/jest/__fixtures__/link.json new file mode 100644 index 00000000..a47e5d89 --- /dev/null +++ b/jest/__fixtures__/link.json @@ -0,0 +1,25 @@ +{ + "post": { + "html": "

An awesome creative idea for a blog post about Web-Design from Joshua Clanton:

\n
\n

Leonardo Da Vinci was one of the greatest artists of the Renaissance, leaving behind a legacy that continues to inspire artists, scientists and others. Here are six things we can learn from him about web design.

\n
", + "excerpt": "An awesome creative idea for a blog post about Web-Design from Joshua Clanton: Leonardo Da Vinci was one of the greatest artists of the…", + "frontmatter": { + "type": "link", + "title": "6 Web Design Tips from Leonardo da Vinci", + "image": null, + "toc": null, + "author": "Matthias Kretschmann", + "updated": null, + "tags": ["design"], + "linkurl": "http://designpepper.com/blog/6-web-design-tips-from-leonardo-da-vinci", + "style": null, + "changelog": null + }, + "fields": { + "slug": "/6-web-design-tips-from-leonardo-da-vinci", + "date": "2008-04-04T18:43:05.000Z", + "githubLink": "https://github.com/kremalicious/blog/tree/master/content/posts/2008-04-04-6-web-design-tips-from-leonardo-da-vinci.md" + }, + "rawMarkdownBody": "\nAn awesome creative idea for a blog post about Web-Design from Joshua Clanton:\n\n> Leonardo Da Vinci was one of the greatest artists of the Renaissance, leaving behind a legacy that continues to inspire artists, scientists and others. Here are six things we can learn from him about web design.\n", + "tableOfContents": "" + } +} diff --git a/jest/__fixtures__/postWithMore.json b/jest/__fixtures__/postWithMore.json new file mode 100644 index 00000000..4b6ed4d3 --- /dev/null +++ b/jest/__fixtures__/postWithMore.json @@ -0,0 +1,41 @@ +{ + "post": { + "html": "

There are many reasons you might want to browse anonymously which can be accomplished by using Tor. The setup instructions on Tor’s website are quite scattered and outdated so here are some steps to setup Tor on macOS with a simple automated script at the end.

\n

I’m using macOS Catalina (10.15) for the following instructions but it should work on almost any macOS version.

\n

#Tor Browser

\n

\n \n \n \n \n
Tor Browser
\n

\n

The most simple way to surf anonymously with Tor is to just grab Tor Browser. It’s a modified version of Firefox Extended Support Release (ESR) with Tor and some extensions (Torbutton, TorLauncher, NoScript, and HTTPS-Everywhere) built right in. Upon start, Tor Browser automatically starts the required Tor background processes and routes traffic through the Tor network. That’s the way to go if you want the highest level of protection without much further configuration.

\n

But it’s based on an older version of Firefox and there might be more you want to do anonymously on your machine than just browsing the web, like accessing resources via the Terminal or any other app. Or just use the browser you’re used to.

\n

For this you need to have Tor installed on your system and additionally set specific proxy values in your network preferences after you’ve started Tor.

\n
\n

Be aware that the instructions and the script mentioned below will not make whatever you do on the web anonymous. Much depends on your browsing habits, what apps you're using, and none of the methods below will offer the same level of protection than Tor Browser out of the box. You have been warned.

\n
\n

#Install Tor

\n

Contrary to the weirdly outdated install instructions on Tor’s website (hey, remember Macports?), installing Tor on macOS is super simple with Homebrew.

\n

In your Terminal execute:

\n
brew install tor
\n

Then you can start it up by running:

\n
tor
\n

Congratulations, you now have Tor running on your system. But none of your network traffic is routed through it yet.

\n

In order for all your system traffic being routed through Tor you need to adjust your system’s network proxy settings which you can either do visually in the System Preferences or programmatically via macOS’s builtin networksetup.

\n

#Set network proxy settings via System Preferences

\n

You can do this under System Preferences > Network by creating a specific Tor network location for it:

\n
    \n
  1. From Location dropdown at the top, select Edit Locations…
    2. \n
  2. Create a new location by hitting the plus button and name it Tor. Hitting Done will select the new location which is now ready to be configured.
    3. \n
  3. Go to Advanced > Proxies and activate SOCKS Proxy and add those values:
    4. \n
  4. SOCKS proxy server: localhost
    5. \n
  5. Port: 9050
    6. \n
\n

\n \n \n \n \n
Network Settings
\n

\n

After hitting OK & Apply at the initial network screen, you can easily switch to this newly created location from your menu bar under  > Location whenever you start up Tor.

\n

Switching to the Tor location routes all network traffic on your system through Tor. Note that you have to repeat those steps for every other network interface if you use, say, Wi-Fi and Ethernet interchangeably.

\n

#All in one go: start Tor & set network proxy settings automatically

\n

When you’re already in the Terminal to start up Tor, additionally setting the network settings involves a lot of fiddling around. Ain’t nobody got time for that.

\n

Thankfully macOS provides a way to programmatically set those proxy values via the networksetup utility. I’ve found a nice script for this but running it opened multiple admin password prompts. So I extended it a bit to make it more user friendly.

\n

In a nutshell, this shell script asks you for your admin password upfront, starts up Tor, and sets all required proxy network settings automatically:

\n
#!/usr/bin/env bash\n\n# 'Wi-Fi' or 'Ethernet' or 'Display Ethernet'\nINTERFACE=Wi-Fi\n\n# Ask for the administrator password upfront\nsudo -v\n\n# Keep-alive: update existing `sudo` time stamp until finished\nwhile true; do sudo -n true; sleep 60; kill -0 "$$" || exit; done 2>/dev/null &\n\n# trap ctrl-c and call disable_proxy()\nfunction disable_proxy() {\n    sudo networksetup -setsocksfirewallproxystate $INTERFACE off\n    echo "$(tput setaf 64)" #green\n    echo "SOCKS proxy disabled."\n    echo "$(tput sgr0)" # color reset\n}\ntrap disable_proxy INT\n\n# Let's roll\nsudo networksetup -setsocksfirewallproxy $INTERFACE 127.0.0.1 9050 off\nsudo networksetup -setsocksfirewallproxystate $INTERFACE on\n\necho "$(tput setaf 64)" # green\necho "SOCKS proxy 127.0.0.1:9050 enabled."\necho "$(tput setaf 136)" # orange\necho "Starting Tor..."\necho "$(tput sgr0)" # color reset\n\ntor
\n

Save this script under something like tor.sh in one of your sourced bin folders, make it executable with chmod + x and use it as a replacement for the general tor command. So you can just run

\n
tor.sh
\n

and Tor should run smoothly on your system without additional configuration:

\n

\n \n \n \n \n
Tor running in Terminal
\n

\n

Verify you’re indeed browsing over the Tor network by going to check.torproject.org.

\n

When you’re done, just exit the script with ctrl + c and the network settings will be reverted to their previous configuration.

\n

#Non-standard apps

\n

Some apps are just not good Mac citizens and use their own network settings, ignoring macOS system network proxy settings. E.g. older versions of Google Chrome were using their own custom network settings and therefore were not routing their web traffic through the proxy configured in System Preferences.

\n

But the most recent Chrome version automatically picks up macOS’s native proxy settings, as does the most recent version of Firefox.

\n

Always check your Tor connection with whatever app you’re using and if needed set the proxy preferences manually in the respective app with:

\n\n", + "excerpt": "There are many reasons you might want to browse anonymously which can be accomplished by using Tor. The setup instructions on Tor’s website…", + "frontmatter": { + "type": "post", + "title": "Simple Tor setup on macOS", + "image": { + "childImageSharp": { + "fluid": { + "aspectRatio": 3.2, + "src": "/static/c87c817b4191fb48e9ca4419c0c70bb8/3995d/teaser-tor.png", + "srcSet": "/static/c87c817b4191fb48e9ca4419c0c70bb8/f0031/teaser-tor.png 200w,\n/static/c87c817b4191fb48e9ca4419c0c70bb8/cad89/teaser-tor.png 400w,\n/static/c87c817b4191fb48e9ca4419c0c70bb8/3995d/teaser-tor.png 800w,\n/static/c87c817b4191fb48e9ca4419c0c70bb8/32ce4/teaser-tor.png 1200w,\n/static/c87c817b4191fb48e9ca4419c0c70bb8/1ed7e/teaser-tor.png 1600w,\n/static/c87c817b4191fb48e9ca4419c0c70bb8/19dc3/teaser-tor.png 1920w", + "srcWebp": "/static/c87c817b4191fb48e9ca4419c0c70bb8/240ac/teaser-tor.webp", + "srcSetWebp": "/static/c87c817b4191fb48e9ca4419c0c70bb8/04c4c/teaser-tor.webp 200w,\n/static/c87c817b4191fb48e9ca4419c0c70bb8/ebea1/teaser-tor.webp 400w,\n/static/c87c817b4191fb48e9ca4419c0c70bb8/240ac/teaser-tor.webp 800w,\n/static/c87c817b4191fb48e9ca4419c0c70bb8/823f0/teaser-tor.webp 1200w,\n/static/c87c817b4191fb48e9ca4419c0c70bb8/9e49e/teaser-tor.webp 1600w,\n/static/c87c817b4191fb48e9ca4419c0c70bb8/68ae1/teaser-tor.webp 1920w", + "sizes": "(max-width: 800px) 100vw, 800px", + "originalImg": "/static/c87c817b4191fb48e9ca4419c0c70bb8/19dc3/teaser-tor.png", + "originalName": "teaser-tor.png", + "presentationWidth": 800, + "presentationHeight": 250 + } + }, + "fields": null + }, + "toc": true, + "author": "Matthias Kretschmann", + "updated": "2019-11-07T22:52:46.000Z", + "tags": ["tutorial", "tor", "macos", "goodies", "apple"], + "linkurl": null, + "style": null, + "changelog": null + }, + "fields": { + "slug": "/simple-tor-setup-on-mac-os-x", + "date": "2015-08-02T19:57:30.912Z", + "githubLink": "https://github.com/kremalicious/blog/tree/master/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x/index.md" + }, + "rawMarkdownBody": "\nThere are many reasons you might want to browse anonymously which can be accomplished by using [Tor](https://www.torproject.org). The setup instructions on Tor's website are quite scattered and outdated so here are some steps to setup Tor on macOS with a simple automated script at the end.\n\nI'm using macOS Catalina (10.15) for the following instructions but it should work on almost any macOS version.\n\n## Tor Browser\n\n![Tor Browser](tor-browser.png)\n\nThe most simple way to surf anonymously with Tor is to just grab [Tor Browser](https://www.torproject.org/projects/torbrowser.html.en). It's a modified version of [Firefox Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/organizations/) with Tor and some extensions (Torbutton, TorLauncher, NoScript, and HTTPS-Everywhere) built right in. Upon start, Tor Browser automatically starts the required Tor background processes and routes traffic through the Tor network. That's the way to go if you want the highest level of protection without much further configuration.\n\nBut it's based on an older version of Firefox and there might be more you want to do anonymously on your machine than just browsing the web, like accessing resources via the Terminal or any other app. Or just use the browser you're used to.\n\nFor this you need to have Tor installed on your system and additionally set specific proxy values in your network preferences after you've started Tor.\n\n
\n

Be aware that the instructions and the script mentioned below will not make whatever you do on the web anonymous. Much depends on your browsing habits, what apps you're using, and none of the methods below will offer the same level of protection than Tor Browser out of the box. You have been warned.

\n
\n\n## Install Tor\n\nContrary to the weirdly outdated [install instructions on Tor's website](https://www.torproject.org/docs/tor-doc-osx.html.en) (hey, remember Macports?), installing Tor on macOS is super simple with [Homebrew](http://brew.sh).\n\nIn your Terminal execute:\n\n```bash\nbrew install tor\n```\n\nThen you can start it up by running:\n\n```bash\ntor\n```\n\nCongratulations, you now have Tor running on your system. But none of your network traffic is routed through it yet.\n\nIn order for all your system traffic being routed through Tor you need to adjust your system's network proxy settings which you can either do visually in the System Preferences or programmatically via macOS's builtin `networksetup`.\n\n## Set network proxy settings via System Preferences\n\nYou can do this under _System Preferences > Network_ by creating a specific Tor network location for it:\n\n1. From Location dropdown at the top, select _Edit Locations..._\n2. Create a new location by hitting the plus button and name it _Tor_. Hitting Done will select the new location which is now ready to be configured.\n3. Go to _Advanced > Proxies_ and activate _SOCKS Proxy_ and add those values:\n\n- _SOCKS proxy server_: `localhost`\n- _Port_: `9050`\n\n![Network Settings](tor-osx-proxy.png)\n\nAfter hitting _OK_ & _Apply_ at the initial network screen, you can easily switch to this newly created location from your menu bar under _ > Location_ whenever you start up Tor.\n\nSwitching to the Tor location routes all network traffic on your system through Tor. Note that you have to repeat those steps for every other network interface if you use, say, Wi-Fi and Ethernet interchangeably.\n\n## All in one go: start Tor & set network proxy settings automatically\n\nWhen you're already in the Terminal to start up Tor, additionally setting the network settings involves a lot of fiddling around. Ain't nobody got time for that.\n\nThankfully macOS provides a way to programmatically set those proxy values via the `networksetup` utility. I've found a [nice script](http://leonid.shevtsov.me/en/an-easy-way-to-use-tor-on-os-x) for this but running it opened multiple admin password prompts. So I extended it a bit to make it more user friendly.\n\nIn a nutshell, this shell script asks you for your admin password upfront, starts up Tor, and sets all required proxy network settings automatically:\n\n```bash\n#!/usr/bin/env bash\n\n# 'Wi-Fi' or 'Ethernet' or 'Display Ethernet'\nINTERFACE=Wi-Fi\n\n# Ask for the administrator password upfront\nsudo -v\n\n# Keep-alive: update existing `sudo` time stamp until finished\nwhile true; do sudo -n true; sleep 60; kill -0 \"$$\" || exit; done 2>/dev/null &\n\n# trap ctrl-c and call disable_proxy()\nfunction disable_proxy() {\n sudo networksetup -setsocksfirewallproxystate $INTERFACE off\n echo \"$(tput setaf 64)\" #green\n echo \"SOCKS proxy disabled.\"\n echo \"$(tput sgr0)\" # color reset\n}\ntrap disable_proxy INT\n\n# Let's roll\nsudo networksetup -setsocksfirewallproxy $INTERFACE 127.0.0.1 9050 off\nsudo networksetup -setsocksfirewallproxystate $INTERFACE on\n\necho \"$(tput setaf 64)\" # green\necho \"SOCKS proxy 127.0.0.1:9050 enabled.\"\necho \"$(tput setaf 136)\" # orange\necho \"Starting Tor...\"\necho \"$(tput sgr0)\" # color reset\n\ntor\n```\n\nSave this script under something like `tor.sh` in one of your sourced `bin` folders, make it executable with `chmod + x` and use it as a replacement for the general `tor` command. So you can just run\n\n```bash\ntor.sh\n```\n\nand Tor should run smoothly on your system without additional configuration:\n\n![Tor running in Terminal](tor-osx-terminal.png)\n\nVerify you're indeed browsing over the Tor network by going to [check.torproject.org](https://check.torproject.org).\n\nWhen you're done, just exit the script with ctrl + c and the network settings will be reverted to their previous configuration.\n\n## Non-standard apps\n\nSome apps are just not good Mac citizens and use their own network settings, ignoring macOS system network proxy settings. E.g. older versions of Google Chrome were using their own custom network settings and therefore were not routing their web traffic through the proxy configured in System Preferences.\n\nBut the most recent Chrome version automatically picks up macOS's native proxy settings, as does the most recent version of Firefox.\n\nAlways [check](https://check.torproject.org) your Tor connection with whatever app you're using and if needed set the proxy preferences manually in the respective app with:\n\n- _SOCKS proxy server_: `localhost`\n- _Port_: `9050`\n", + "tableOfContents": "" + } +} diff --git a/src/@types/Site.d.ts b/src/@types/Site.d.ts index 1f6491dc..941d8788 100644 --- a/src/@types/Site.d.ts +++ b/src/@types/Site.d.ts @@ -26,4 +26,8 @@ export interface Site { jsonfeed: string itemsPerPage: number repoContentPath: string + darkModeConfig: { + classNameDark: string + classNameLight: string + } } diff --git a/src/components/atoms/Transitions.ts b/src/components/atoms/Transitions.ts deleted file mode 100644 index bfb1a527..00000000 --- a/src/components/atoms/Transitions.ts +++ /dev/null @@ -1,31 +0,0 @@ -export const fadeIn = { - enter: { - opacity: 1 - }, - exit: { - opacity: 0 - } -} - -const transition = { type: 'spring' } - -const enter = { - y: 0, - ...transition -} - -export const moveInTop = { - ...enter, - exit: { - y: '-2rem', - ...transition - } -} - -export const moveInBottom = { - ...enter, - exit: { - y: '2rem', - ...transition - } -} diff --git a/src/components/molecules/Featured.test.tsx b/src/components/molecules/Featured.test.tsx new file mode 100644 index 00000000..6428c4cb --- /dev/null +++ b/src/components/molecules/Featured.test.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import { render } from '@testing-library/react' +import Featured from './Featured' + +describe('Featured', () => { + it('renders correctly', () => { + const { container } = render() + expect(container.firstChild).toBeInTheDocument() + }) +}) diff --git a/src/components/molecules/Networks.test.tsx b/src/components/molecules/Networks.test.tsx new file mode 100644 index 00000000..a5c6126d --- /dev/null +++ b/src/components/molecules/Networks.test.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { render } from '@testing-library/react' +import Networks from './Networks' + +import meta from '../../../jest/__fixtures__/meta.json' + +const { author, rss, jsonfeed } = meta.site.siteMetadata +const { twitter, github } = author +const links = [twitter, github, rss, jsonfeed, 'hello'] + +describe('Networks', () => { + it('renders correctly', () => { + const { container } = render() + expect(container.firstChild).toBeInTheDocument() + }) +}) diff --git a/src/components/molecules/PostTeaser.test.tsx b/src/components/molecules/PostTeaser.test.tsx new file mode 100644 index 00000000..42501cd8 --- /dev/null +++ b/src/components/molecules/PostTeaser.test.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import { render } from '@testing-library/react' +import PostTeaser from './PostTeaser' +import post from '../../../jest/__fixtures__/post.json' + +describe('PostTeaser', () => { + it('renders correctly', () => { + const { container, rerender } = render() + expect(container.firstChild).toBeInTheDocument() + + rerender( null} />) + }) +}) diff --git a/src/components/molecules/RelatedPosts.test.tsx b/src/components/molecules/RelatedPosts.test.tsx new file mode 100644 index 00000000..97700fac --- /dev/null +++ b/src/components/molecules/RelatedPosts.test.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { render, fireEvent } from '@testing-library/react' +import RelatedPosts from './RelatedPosts' + +describe('RelatedPosts', () => { + it('renders correctly', () => { + const { container, rerender, getByText } = render( + + ) + expect(container.firstChild).toBeInTheDocument() + + fireEvent.click(getByText('Refresh')) + + rerender() + }) +}) diff --git a/src/components/molecules/ThemeSwitch.test.tsx b/src/components/molecules/ThemeSwitch.test.tsx index 9f27cdbb..5901b169 100644 --- a/src/components/molecules/ThemeSwitch.test.tsx +++ b/src/components/molecules/ThemeSwitch.test.tsx @@ -1,10 +1,8 @@ import React from 'react' -import { render, fireEvent, cleanup } from '@testing-library/react' +import { render, fireEvent } from '@testing-library/react' import ThemeSwitch from './ThemeSwitch' describe('ThemeSwitch', () => { - afterEach(cleanup) - it('renders correctly', () => { const { container } = render() const switchContainer = container.querySelector('aside') diff --git a/src/components/molecules/ThemeSwitch.tsx b/src/components/molecules/ThemeSwitch.tsx index 4b7a17c6..3b042f56 100644 --- a/src/components/molecules/ThemeSwitch.tsx +++ b/src/components/molecules/ThemeSwitch.tsx @@ -3,6 +3,7 @@ import Helmet from 'react-helmet' import useDarkMode from 'use-dark-mode' import styles from './ThemeSwitch.module.scss' import Icon from '../atoms/Icon' +import { useSiteMetadata } from '../../hooks/use-site-metadata' const ThemeToggle = () => ( @@ -40,10 +41,8 @@ const HeadMarkup = ({ themeColor }: { themeColor: string }) => ( ) export default function ThemeSwitch() { - const darkMode = useDarkMode(false, { - classNameDark: 'dark', - classNameLight: 'light' - }) + const { darkModeConfig } = useSiteMetadata() + const darkMode = useDarkMode(false, darkModeConfig) const themeColor = darkMode.value ? '#1d2224' : '#e7eef4' return ( diff --git a/src/components/molecules/Web3Donation/InputGroup.test.tsx b/src/components/molecules/Web3Donation/InputGroup.test.tsx new file mode 100644 index 00000000..64b55108 --- /dev/null +++ b/src/components/molecules/Web3Donation/InputGroup.test.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { render, fireEvent } from '@testing-library/react' + +import InputGroup from './InputGroup' + +const sendTransaction = jest.fn() + +describe('InputGroup', () => { + it('renders without crashing', async () => { + const { container } = render( + + ) + expect(container.firstChild).toBeInTheDocument() + + const input = container.querySelector('input') + const button = container.querySelector('button') + fireEvent.change(input, { target: { value: '3' } }) + fireEvent.click(button) + expect(sendTransaction).toHaveBeenCalled() + }) +}) diff --git a/src/components/organisms/Header.test.tsx b/src/components/organisms/Header.test.tsx index 71df967f..5bd01ceb 100644 --- a/src/components/organisms/Header.test.tsx +++ b/src/components/organisms/Header.test.tsx @@ -1,7 +1,19 @@ import React from 'react' -import testRender from '../../../jest/testRender' +import { render, fireEvent } from '@testing-library/react' import Header from './Header' describe('Header', () => { - testRender(
) + it('renders correctly', () => { + const { container, getByTitle, getByPlaceholderText } = render( +
+
+
+ ) + expect(container.firstChild).toBeInTheDocument() + fireEvent.click(getByTitle('Menu')) + fireEvent.click(getByTitle('Search')) + + const input = getByPlaceholderText('Search everything') + fireEvent.change(input, { target: { value: 'wallpaper' } }) + }) }) diff --git a/src/templates/Post/PostActions.module.scss b/src/components/organisms/Post/Actions.module.scss similarity index 100% rename from src/templates/Post/PostActions.module.scss rename to src/components/organisms/Post/Actions.module.scss diff --git a/src/templates/Post/PostActions.tsx b/src/components/organisms/Post/Actions.tsx similarity index 89% rename from src/templates/Post/PostActions.tsx rename to src/components/organisms/Post/Actions.tsx index 484d5867..54bc1fce 100644 --- a/src/templates/Post/PostActions.tsx +++ b/src/components/organisms/Post/Actions.tsx @@ -1,7 +1,7 @@ import React from 'react' -import { useSiteMetadata } from '../../hooks/use-site-metadata' -import styles from './PostActions.module.scss' -import Icon from '../../components/atoms/Icon' +import { useSiteMetadata } from '../../../hooks/use-site-metadata' +import styles from './Actions.module.scss' +import Icon from '../../atoms/Icon' interface ActionProps { title: string diff --git a/src/templates/Post/PostContent.tsx b/src/components/organisms/Post/Content.tsx similarity index 84% rename from src/templates/Post/PostContent.tsx rename to src/components/organisms/Post/Content.tsx index 2acc1791..c324cc48 100644 --- a/src/templates/Post/PostContent.tsx +++ b/src/components/organisms/Post/Content.tsx @@ -1,7 +1,7 @@ import React from 'react' -import Changelog from '../../components/atoms/Changelog' -import { Post } from '../../@types/Post' -import PostToc from './PostToc' +import Changelog from '../../atoms/Changelog' +import { Post } from '../../../@types/Post' +import PostToc from './Toc' // Remove lead paragraph from content const PostContent = ({ post }: { post: Post }) => { diff --git a/src/templates/Post/PostLead.module.scss b/src/components/organisms/Post/Lead.module.scss similarity index 100% rename from src/templates/Post/PostLead.module.scss rename to src/components/organisms/Post/Lead.module.scss diff --git a/src/templates/Post/PostLead.tsx b/src/components/organisms/Post/Lead.tsx similarity index 86% rename from src/templates/Post/PostLead.tsx rename to src/components/organisms/Post/Lead.tsx index 8f3c0d80..163d73f9 100644 --- a/src/templates/Post/PostLead.tsx +++ b/src/components/organisms/Post/Lead.tsx @@ -1,6 +1,6 @@ import React from 'react' -import styles from './PostLead.module.scss' -import { Post } from '../../@types/Post' +import styles from './Lead.module.scss' +import { Post } from '../../../@types/Post' // Extract lead paragraph from content // Grab everything before more tag, or just first paragraph diff --git a/src/templates/Post/PostLinkActions.module.scss b/src/components/organisms/Post/LinkActions.module.scss similarity index 100% rename from src/templates/Post/PostLinkActions.module.scss rename to src/components/organisms/Post/LinkActions.module.scss diff --git a/src/templates/Post/PostLinkActions.tsx b/src/components/organisms/Post/LinkActions.tsx similarity index 74% rename from src/templates/Post/PostLinkActions.tsx rename to src/components/organisms/Post/LinkActions.tsx index 2b73895a..6d0fb9e1 100644 --- a/src/templates/Post/PostLinkActions.tsx +++ b/src/components/organisms/Post/LinkActions.tsx @@ -1,8 +1,8 @@ import React from 'react' import { Link } from 'gatsby' -import stylesPostMore from './PostMore.module.scss' -import styles from './PostLinkActions.module.scss' -import Icon from '../../components/atoms/Icon' +import stylesPostMore from './More.module.scss' +import styles from './LinkActions.module.scss' +import Icon from '../../atoms/Icon' const PostLinkActions = ({ linkurl, diff --git a/src/templates/Post/PostMeta.module.scss b/src/components/organisms/Post/Meta.module.scss similarity index 100% rename from src/templates/Post/PostMeta.module.scss rename to src/components/organisms/Post/Meta.module.scss diff --git a/src/templates/Post/PostMeta.tsx b/src/components/organisms/Post/Meta.tsx similarity index 83% rename from src/templates/Post/PostMeta.tsx rename to src/components/organisms/Post/Meta.tsx index ab5ab2ef..0dd6ba16 100644 --- a/src/templates/Post/PostMeta.tsx +++ b/src/components/organisms/Post/Meta.tsx @@ -1,11 +1,11 @@ import React from 'react' import { Link } from 'gatsby' import slugify from 'slugify' -import Time from '../../components/atoms/Time' -import Tag from '../../components/atoms/Tag' -import { useSiteMetadata } from '../../hooks/use-site-metadata' -import styles from './PostMeta.module.scss' -import { Post } from '../../@types/Post' +import Time from '../../atoms/Time' +import Tag from '../../atoms/Tag' +import { useSiteMetadata } from '../../../hooks/use-site-metadata' +import styles from './Meta.module.scss' +import { Post } from '../../../@types/Post' import shortid from 'shortid' export default function PostMeta({ post }: { post: Post }) { diff --git a/src/templates/Post/PostMore.module.scss b/src/components/organisms/Post/More.module.scss similarity index 100% rename from src/templates/Post/PostMore.module.scss rename to src/components/organisms/Post/More.module.scss diff --git a/src/templates/Post/PostMore.tsx b/src/components/organisms/Post/More.tsx similarity index 74% rename from src/templates/Post/PostMore.tsx rename to src/components/organisms/Post/More.tsx index 4227fa67..0ddf6387 100644 --- a/src/templates/Post/PostMore.tsx +++ b/src/components/organisms/Post/More.tsx @@ -1,7 +1,7 @@ import React from 'react' import { Link } from 'gatsby' -import Icon from '../../components/atoms/Icon' -import styles from './PostMore.module.scss' +import Icon from '../../atoms/Icon' +import styles from './More.module.scss' const PostMore = ({ to, children }: { to: string; children: string }) => ( diff --git a/src/templates/Post/PrevNext.module.scss b/src/components/organisms/Post/PrevNext.module.scss similarity index 100% rename from src/templates/Post/PrevNext.module.scss rename to src/components/organisms/Post/PrevNext.module.scss diff --git a/src/templates/Post/PrevNext.tsx b/src/components/organisms/Post/PrevNext.tsx similarity index 94% rename from src/templates/Post/PrevNext.tsx rename to src/components/organisms/Post/PrevNext.tsx index a15bf7d4..6a0822d5 100644 --- a/src/templates/Post/PrevNext.tsx +++ b/src/components/organisms/Post/PrevNext.tsx @@ -1,6 +1,6 @@ import React from 'react' import { Link } from 'gatsby' -import Icon from '../../components/atoms/Icon' +import Icon from '../../atoms/Icon' import styles from './PrevNext.module.scss' interface Node { diff --git a/src/templates/Post/PostTitle.module.scss b/src/components/organisms/Post/Title.module.scss similarity index 100% rename from src/templates/Post/PostTitle.module.scss rename to src/components/organisms/Post/Title.module.scss diff --git a/src/templates/Post/PostTitle.tsx b/src/components/organisms/Post/Title.tsx similarity index 89% rename from src/templates/Post/PostTitle.tsx rename to src/components/organisms/Post/Title.tsx index 69abdf14..ea5498e9 100644 --- a/src/templates/Post/PostTitle.tsx +++ b/src/components/organisms/Post/Title.tsx @@ -1,7 +1,7 @@ import React from 'react' import { Link } from 'gatsby' -import styles from './PostTitle.module.scss' -import Icon from '../../components/atoms/Icon' +import styles from './Title.module.scss' +import Icon from '../../atoms/Icon' export default function PostTitle({ type, diff --git a/src/templates/Post/PostToc.module.scss b/src/components/organisms/Post/Toc.module.scss similarity index 100% rename from src/templates/Post/PostToc.module.scss rename to src/components/organisms/Post/Toc.module.scss diff --git a/src/templates/Post/PostToc.tsx b/src/components/organisms/Post/Toc.tsx similarity index 85% rename from src/templates/Post/PostToc.tsx rename to src/components/organisms/Post/Toc.tsx index 6ea2045a..b5b7a2bc 100644 --- a/src/templates/Post/PostToc.tsx +++ b/src/components/organisms/Post/Toc.tsx @@ -1,5 +1,5 @@ import React from 'react' -import styles from './PostToc.module.scss' +import styles from './Toc.module.scss' const PostToc = ({ tableOfContents }: { tableOfContents: string }) => { return ( diff --git a/src/helpers/wrapPageElement.test.tsx b/src/helpers/wrapPageElement.test.tsx new file mode 100644 index 00000000..d547eb85 --- /dev/null +++ b/src/helpers/wrapPageElement.test.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { render } from '@testing-library/react' +import WrapPageElement from './wrapPageElement' + +describe('wrapPageElement', () => { + it('renders correctly', () => { + const { container } = render( + + ) + expect(container.firstChild).toBeInTheDocument() + }) +}) diff --git a/src/hooks/use-site-metadata.ts b/src/hooks/use-site-metadata.ts index 4ebdff53..aea3ec48 100644 --- a/src/hooks/use-site-metadata.ts +++ b/src/hooks/use-site-metadata.ts @@ -28,6 +28,10 @@ const query = graphql` jsonfeed itemsPerPage repoContentPath + darkModeConfig { + classNameDark + classNameLight + } } } } diff --git a/src/templates/Post/index.module.scss b/src/templates/Post.module.scss similarity index 100% rename from src/templates/Post/index.module.scss rename to src/templates/Post.module.scss diff --git a/src/templates/Post.test.tsx b/src/templates/Post.test.tsx new file mode 100644 index 00000000..ec39d8e6 --- /dev/null +++ b/src/templates/Post.test.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import { render } from '@testing-library/react' + +import Post from './Post' +import post from '../../jest/__fixtures__/post.json' +import postWithMore from '../../jest/__fixtures__/postWithMore.json' +import link from '../../jest/__fixtures__/link.json' + +describe('Post', () => { + const pageContext = { + next: { title: 'hello', slug: '/hello' }, + prev: { title: 'hello2', slug: '/hello2' } + } + + it('renders without crashing', () => { + const { container, rerender } = render( + + ) + expect(container.firstChild).toBeInTheDocument() + + rerender() + rerender() + }) +}) diff --git a/src/templates/Post/index.tsx b/src/templates/Post.tsx similarity index 77% rename from src/templates/Post/index.tsx rename to src/templates/Post.tsx index b882d28e..8d948a76 100644 --- a/src/templates/Post/index.tsx +++ b/src/templates/Post.tsx @@ -1,19 +1,19 @@ import React from 'react' import { Helmet } from 'react-helmet' import { graphql } from 'gatsby' -import { Post as PostMetadata } from '../../@types/Post' -import Exif from '../../components/atoms/Exif' -import SEO from '../../components/atoms/SEO' -import RelatedPosts from '../../components/molecules/RelatedPosts' -import PostTitle from './PostTitle' -import PostLead from './PostLead' -import PostContent from './PostContent' -import PostActions from './PostActions' -import PostLinkActions from './PostLinkActions' -import PostMeta from './PostMeta' -import PrevNext from './PrevNext' -import styles from './index.module.scss' -import { Image } from '../../components/atoms/Image' +import { Post as PostMetadata } from '../@types/Post' +import Exif from '../components/atoms/Exif' +import SEO from '../components/atoms/SEO' +import RelatedPosts from '../components/molecules/RelatedPosts' +import PostTitle from '../components/organisms/Post/Title' +import PostLead from '../components/organisms/Post/Lead' +import PostContent from '../components/organisms/Post/Content' +import PostActions from '../components/organisms/Post/Actions' +import PostLinkActions from '../components/organisms/Post/LinkActions' +import PostMeta from '../components/organisms/Post/Meta' +import PrevNext from '../components/organisms/Post/PrevNext' +import styles from './Post.module.scss' +import { Image } from '../components/atoms/Image' export default function Post({ data, diff --git a/src/templates/Post/index.test.tsx b/src/templates/Post/index.test.tsx deleted file mode 100644 index c89a95ab..00000000 --- a/src/templates/Post/index.test.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' -import { render } from '@testing-library/react' - -import Post from '.' -import data from '../../../jest/__fixtures__/post.json' - -describe('Post', () => { - const pageContext = { - next: { title: 'hello', slug: '/hello' }, - prev: { title: 'hello2', slug: '/hello2' } - } - - it('renders without crashing', () => { - const { container } = render() - expect(container.firstChild).toBeInTheDocument() - }) -}) diff --git a/src/templates/Posts.tsx b/src/templates/Posts.tsx index 1930092d..47fedd93 100644 --- a/src/templates/Posts.tsx +++ b/src/templates/Posts.tsx @@ -3,11 +3,11 @@ import { Link, graphql } from 'gatsby' import { Post } from '../@types/Post' import Pagination from '../components/molecules/Pagination' import Featured from '../components/molecules/Featured' -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 PostTitle from '../components/organisms/Post/Title' +import PostLead from '../components/organisms/Post/Lead' +import PostContent from '../components/organisms/Post/Content' +import PostMore from '../components/organisms/Post/More' +import PostLinkActions from '../components/organisms/Post/LinkActions' import SEO from '../components/atoms/SEO' import styles from './Posts.module.scss' import { Image } from '../components/atoms/Image'