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.
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.
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
From Location dropdown at the top, select Edit Locations…
\n
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.
\n
Go to Advanced > Proxies and activate SOCKS Proxy and add those values:
\n
SOCKS proxy server: localhost
\n
Port: 9050
\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\nwhiletrue;do sudo -n true; sleep 60;kill -0 "$$"||exit;done2>/dev/null &\n\n# trap ctrl-c and call disable_proxy()\nfunctiondisable_proxy(){\n sudo networksetup -setsocksfirewallproxystate $INTERFACE off\necho"$(tput setaf 64)"#green\necho"SOCKS proxy disabled."\necho"$(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.
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
SOCKS proxy server: localhost
\n
Port: 9050
\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": {
@@ -31,6 +30,7 @@
"changelog": null
},
"fields": {
+ "type": "post",
"slug": "/simple-tor-setup-on-mac-os-x",
"date": "2015-08-02T19:57:30.912Z",
"githubLink": "https://github.com/kremalicious/blog/tree/main/content/posts/2015-08-02-simple-tor-setup-on-mac-os-x/index.md"
diff --git a/jest/__fixtures__/posts.json b/jest/__fixtures__/posts.json
index 99d2e9c8..d82993d7 100644
--- a/jest/__fixtures__/posts.json
+++ b/jest/__fixtures__/posts.json
@@ -9,7 +9,7 @@
"excerpt": "Inside the Hungarian Parliament Building in Budapest, Hungary.",
"frontmatter": {
"title": "Országház II",
- "type": "photo",
+
"linkurl": null,
"tags": null,
"image": {
@@ -34,7 +34,8 @@
},
"fields": {
"slug": "/orszaghaz-ii/",
- "date": "November 03, 2019"
+ "date": "November 03, 2019",
+ "type": "photo"
}
}
},
@@ -46,7 +47,6 @@
"excerpt": "The Hungarian Parliament Building seen from across the Danube in Budapest, Hungary.",
"frontmatter": {
"title": "Országház I",
- "type": "photo",
"linkurl": null,
"tags": null,
"featured": true,
@@ -72,7 +72,8 @@
},
"fields": {
"slug": "/orszaghaz-i/",
- "date": "November 02, 2019"
+ "date": "November 02, 2019",
+ "type": "photo"
}
}
},
@@ -84,7 +85,7 @@
"excerpt": "IPFS is now integrated into the Ocean Protocol stack, allowing you to take advantage of decentralized asset file hosting. This article was originally posted on Medium in the Ocean Protocol blog. ✨ Going Decentralized With Ocean Protocol, you can use…",
"frontmatter": {
"title": "Ocean Protocol and IPFS, Sitting In The Merkle Tree",
- "type": "post",
+
"linkurl": null,
"tags": ["oceanprotocol", "blockchain", "design", "ipfs", "web3"],
"image": {
@@ -109,7 +110,8 @@
},
"fields": {
"slug": "/ocean-protocol-and-ipfs-sitting-in-the-merkle-tree",
- "date": "October 24, 2019"
+ "date": "October 24, 2019",
+ "type": "post"
}
}
}
diff --git a/package-lock.json b/package-lock.json
index af4ba174..823412dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,9 +52,9 @@
"node-fetch": "^2.6.1",
"pigeon-maps": "^0.17.1",
"pigeon-marker": "^0.3.4",
- "react": "^16.8.0",
+ "react": "^16.14.0",
"react-clipboard.js": "^2.0.16",
- "react-dom": "^16.8.0",
+ "react-dom": "^16.14.0",
"react-feather": "^2.0.9",
"react-helmet": "^6.1.0",
"react-qr-svg": "^2.3.0",
diff --git a/package.json b/package.json
index 15a68467..bdeeff78 100644
--- a/package.json
+++ b/package.json
@@ -72,9 +72,9 @@
"node-fetch": "^2.6.1",
"pigeon-maps": "^0.17.1",
"pigeon-marker": "^0.3.4",
- "react": "^16.8.0",
+ "react": "^16.14.0",
"react-clipboard.js": "^2.0.16",
- "react-dom": "^16.8.0",
+ "react-dom": "^16.14.0",
"react-feather": "^2.0.9",
"react-helmet": "^6.1.0",
"react-qr-svg": "^2.3.0",
diff --git a/src/components/molecules/PostTeaser.tsx b/src/components/molecules/PostTeaser.tsx
index f53b1265..1b37f70c 100644
--- a/src/components/molecules/PostTeaser.tsx
+++ b/src/components/molecules/PostTeaser.tsx
@@ -4,7 +4,6 @@ import { Image } from '../atoms/Image'
import { Post } from '../../@types/Post'
import PostTitle from '../templates/Post/Title'
import styles from './PostTeaser.module.scss'
-import Time from '../atoms/Time'
import PostDate from './PostDate'
export const postTeaserQuery = graphql`
@@ -40,7 +39,7 @@ export default function PostTeaser({
hideDate?: boolean
}): ReactElement {
const { image, title, updated } = post.frontmatter
- const { slug, date, type } = post.fields
+ const { slug, date } = post.fields
return (
diff --git a/src/components/templates/Photos.test.tsx b/src/components/templates/Photos.test.tsx
index d5cd468b..468255be 100644
--- a/src/components/templates/Photos.test.tsx
+++ b/src/components/templates/Photos.test.tsx
@@ -13,7 +13,11 @@ describe('/photos', () => {
}
const { container } = render(
-
+
)
expect(container.firstChild).toBeInTheDocument()
})
diff --git a/src/components/templates/Photos.tsx b/src/components/templates/Photos.tsx
index 4af4bde7..23dd2488 100644
--- a/src/components/templates/Photos.tsx
+++ b/src/components/templates/Photos.tsx
@@ -1,5 +1,5 @@
import React, { ReactElement } from 'react'
-import { graphql, Link } from 'gatsby'
+import { graphql, Link, PageProps } from 'gatsby'
import Page from './Page'
import { Post, PageContext } from '../../@types/Post'
import { Image } from '../atoms/Image'
@@ -22,15 +22,16 @@ export const PhotoThumb = ({ photo }: { photo: Post }): ReactElement => {
)
}
-export default function Photos({
- data,
- pageContext
-}: {
- data: any
+interface PhotosPageProps extends PageProps {
+ data: {
+ allMarkdownRemark: { edges: { node: Post }[] }
+ }
pageContext: PageContext
-}): ReactElement {
- const photos = data.allMarkdownRemark.edges
- const { currentPageNumber, numPages } = pageContext
+}
+
+export default function Photos(props: PhotosPageProps): ReactElement {
+ const photos = props.data.allMarkdownRemark.edges
+ const { currentPageNumber, numPages } = props.pageContext
const paginationTitle =
numPages > 1 && currentPageNumber > 1
@@ -46,14 +47,18 @@ export default function Photos({
}
return (
-
+
{photos.map(({ node }: { node: Post }) => (
))}
- {numPages > 1 && }
+ {numPages > 1 && }
)
}
@@ -79,6 +84,7 @@ export const photosQuery = graphql`
}
fields {
slug
+ type
}
}
}
diff --git a/src/components/templates/Post/Title.tsx b/src/components/templates/Post/Title.tsx
index 0300d2f0..5327ec92 100644
--- a/src/components/templates/Post/Title.tsx
+++ b/src/components/templates/Post/Title.tsx
@@ -1,7 +1,6 @@
import React, { ReactElement } from 'react'
import styles from './Title.module.scss'
import Icon from '../../atoms/Icon'
-import Time from '../../atoms/Time'
import PostDate from '../../molecules/PostDate'
export default function PostTitle({
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index a48c84e7..330f0078 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,5 +1,5 @@
import React, { ReactElement } from 'react'
-import { Link } from 'gatsby'
+import { Link, PageProps } from 'gatsby'
import Page from '../components/templates/Page'
import styles from './404.module.scss'
@@ -9,8 +9,12 @@ const page = {
}
}
-const NotFound = (): ReactElement => (
-
+const NotFound = (props: PageProps): ReactElement => (
+