Add links to software projects

content/bypassing-ports.md

@@ -94,11 +94,13 @@ laptop, phone, etc. to protect you from public WiFi, create only a single extra
 $ ./easyrsa build-client-full client nopass  # optional
 ```
 
-Leave off `nopass` if you want to password protect the config file when you set
-up a new client.
+Leave off `nopass` if you want to password protect the config file keys when you
+set up a new client.
 
 Create the server config file `/etc/openvpn/server.conf`:
 
+<span class="aside">Can't use port 443 here since it'll be forwarded</span>
+
 ```
 port 1194
 proto udp
@@ -144,7 +146,7 @@ ifconfig-push 10.8.0.100 255.255.255.0
 Test your config by running:
 
 ```
-sudo openvpn --config /etc/openvpn/server.conf
+$ sudo openvpn --config /etc/openvpn/server.conf
 ```
 
 If you run `ip addr` in another terminal, you should see an entry like this:
@@ -236,7 +238,7 @@ $ sudo ufw disable && sudo ufw enable
 
 Switch to your home server or client machine.
 
-Install openvpn:
+Install OpenVPN:
 
 ```
 $ sudo apt update
@@ -275,8 +277,8 @@ key-direction 1
 </tls-auth>
 ```
 
-Replace the `[server ...]` lines with the contents of that file on the VPN
-server, for example:
+Replace the `[server ...]` lines with the contents of that file on the __VPN
+server__, for example:
 
 ```
 $ sudo cat /etc/openvpn/easy-rsa/pki/ca.crt
@@ -294,6 +296,7 @@ client
 dev tun
 proto udp
 remote vpn.example.com 1194
+redirect-gateway def1
 resolv-retry infinite
 nobind
 persist-key
@@ -303,7 +306,6 @@ cipher AES-256-GCM
 auth SHA256
 comp-lzo
 key-direction 1
-redirect-gateway def1
 <ca>
 [server /etc/openvpn/easy-rsa/pki/ca.crt]
 </ca>
@@ -323,7 +325,7 @@ The `client.ovpn` file is ready to be imported into your VPN clients.
 Test your config by running:
 
 ```
-sudo openvpn --config /etc/openvpn/client.conf
+$ sudo openvpn --config /etc/openvpn/client.conf
 ```
 
 If you run `ip addr` in another terminal, you should see an entry like this:
@@ -376,5 +378,15 @@ You should now be fine to access your home server from over the internet.
 To forward additional ports, just edit the `/etc/ufw/before.rules` file like
 above.
 
+You can now point a domain to your virtual server's IP and use that to connect
+to your home server. Use a CNAME to make it easy to change later:
+
+```
+NAME                    TYPE   VALUE
+--------------------------------------------------
+vpn.example.com.        A      123.123.123.123
+myserver.example.com.   CNAME  vpn.example.com.
+```
+
 Finally, make sure any server programs are listening / bound to `10.8.0.100` or
 `0.0.0.0` so that they can get traffic from that interface.

content/extra/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🏴‍☠️</text></svg>

pelicanconf.py

@@ -34,6 +34,12 @@ MARKDOWN = {
     'output_format': 'html5',
 }
 
+STATIC_PATHS = ['images', 'extra']
+
+EXTRA_PATH_METADATA = {
+    'extra/favicon.svg': {'path': 'favicon.svg'},
+}
+
 # Uncomment following line if you want document-relative URLs when developing
 #RELATIVE_URLS = True
 

publishconf.py

@@ -34,6 +34,12 @@ MARKDOWN = {
     'output_format': 'html5',
 }
 
+STATIC_PATHS = ['images', 'extra']
+
+EXTRA_PATH_METADATA = {
+    'extra/favicon.svg': {'path': 'favicon.svg'},
+}
+
 # Uncomment following line if you want document-relative URLs when developing
 #RELATIVE_URLS = True
 

themes/theme/templates/base.html

@@ -28,6 +28,8 @@
 		<link rel="preload" href="/theme/fonts/Lato-Italic.ttf" as="font" type="font/ttf" crossorigin="anonymous">
 		<link rel="preload" href="/theme/fonts/Lato-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
 
+		<link rel="icon" href="favicon.svg">
+
 		<style>
 		{% include 'style.css' %}
 		{% include 'fonts.css' %}

themes/theme/templates/index.html

@@ -53,13 +53,52 @@
 		<h2>Projects</h2>
 
 		<p>
-			My main hobby is working on technical projects. I typically design websites or
-			build tools that make my life easier. Sometimes art.
+			My main hobby is working on software projects. I typically design websites or
+			build tools that make my life easier.
 		</p>
 
-		<p>
-			You can find my code on <a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener">GitHub</a>.
-		</p>
+		<h3>
+			<a href="https://news.t0.vc/" target="_blank" rel="noreferrer noopener">QotNews</a>
+			<a class="source" href="https://git.tannercollin.com/tanner/qotnews" target="_blank" rel="noreferrer noopener">source code</a>
+		</h3>
+		<div class="summary">
+			<p>Hacker News, Reddit, Lobsters, and Tildes articles pre-rendered in reader mode. Optimized for speed and distraction-free reading.</p>
+		</div>
+
+		<h3>
+			<a href="https://notica.us" target="_blank" rel="noreferrer noopener">Notica</a>
+			<a class="source" href="https://github.com/tannercollin/Notica" target="_blank" rel="noreferrer noopener">source code</a>
+		</h3>
+		<div class="summary">
+			<p>Send browser notifications from your terminal. No installation. No registration.</p>
+		</div>
+
+		<h3>
+			<a href="https://my.protospace.ca" target="_blank" rel="noreferrer noopener">Spaceport</a>
+			<a class="source" href="https://github.com/Protospace/spaceport" target="_blank" rel="noreferrer noopener">source code</a>
+		</h3>
+		<div class="summary">
+			<p>Makerspace members' portal for Calgary Protospace. It tracks membership, courses, training, access cards, and more.</p>
+		</div>
+
+		<h3>
+			<a href="https://txt.t0.vc" target="_blank" rel="noreferrer noopener">t0txt</a>
+			<a class="source" href="https://github.com/tannercollin/t0txt" target="_blank" rel="noreferrer noopener">source code</a>
+		</h3>
+		<div class="summary">
+			<p>Minimal command line pastebin. Allows you to upload text notes from a bash pipe or web browser.</p>
+		</div>
+
+		<h3>
+			<a href="https://github.com/tannercollin/standardnotes-fs" target="_blank" rel="noreferrer noopener">standardnotes-fs</a>
+		</h3>
+		<div class="summary">
+			<p>A filesystem that mounts your Standard Notes account as a directory of text files that you can edit.</p>
+		</div>
+
+		<h2>Creations</h2>
+
+		<p>Sometimes I create art or interactive tech.</>
 
 		{% for article in articles_page.object_list if article.category.name == 'Projects' %}
 			<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>

themes/theme/templates/style.css

@@ -12,6 +12,11 @@ a {
 	outline: none;
 }
 
+.source {
+	float: right;
+	font: 1rem Apparatus SIL,serif;
+}
+
 pre {
 	font-size: 1rem;
 	padding: 1rem;
@@ -165,14 +170,8 @@ pre {
 	font-size: 1rem;
 }
 
-.toclink:not(:hover)::after {
-	visibility: hidden;
-}
-
-.toclink::after {
-	color: #999;
-	content: "\00B6";
-	margin-left: 0.5rem;
+.toclink:not(:hover) {
+	border-bottom: none;
 }
 
 @media screen and (min-width:36rem) {