From f18cdf501ae483598db76287746e5cc398387c39 Mon Sep 17 00:00:00 2001
From: Alexander Daichendt <alexander.daichendt@tum.de>
Date: Tue, 26 Jul 2022 22:11:03 +0200
Subject: [PATCH] feat: work on code highlighting

---
 src/components/Code.svelte                   | 60 ++++++++++++++++++++
 src/components/ListItem.svelte               |  7 +++
 src/layouts/blog.svelte                      |  4 +-
 src/layouts/components.js                    |  4 ++
 src/routes/__layout.svelte                   |  1 +
 src/routes/blog/index.svelte                 |  5 +-
 src/routes/blog/software-recommendations.svx | 46 +++++++++++----
 src/routes/contact.svelte                    | 16 +++---
 8 files changed, 120 insertions(+), 23 deletions(-)
 create mode 100644 src/components/Code.svelte
 create mode 100644 src/components/ListItem.svelte

diff --git a/src/components/Code.svelte b/src/components/Code.svelte
new file mode 100644
index 0000000..802a6de
--- /dev/null
+++ b/src/components/Code.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	let copied = false;
+
+	function copyToClipboard(event: MouseEvent) {
+		// @ts-ignore
+		const target = event.target?.innerText.split('\n')[0];
+		navigator.clipboard.writeText(target);
+		let sel = document.getSelection();
+		sel?.removeAllRanges();
+		if (!copied) {
+			copied = true;
+
+			setTimeout(() => (copied = false), 3000);
+		}
+	}
+</script>
+
+<code on:dblclick={copyToClipboard}>
+	<slot />
+	<div class:copied class="copyWrapper">
+		{#if copied}
+			Copied
+		{:else}
+			Double click to copy
+		{/if}
+	</div>
+</code>
+
+<style>
+	.copied {
+		background-color: yellowgreen !important;
+	}
+	.copyWrapper {
+		background-color: var(--special-color);
+		margin-bottom: 0.2rem;
+		padding: 0.2rem;
+		border-radius: 3px;
+		position: absolute;
+		visibility: hidden;
+		z-index: 1;
+		bottom: 100%;
+		left: 0;
+		margin-left: 0px;
+	}
+	code:hover .copyWrapper {
+		visibility: visible;
+	}
+	code {
+		position: relative;
+		display: inline-block;
+		background-color: var(--light-color);
+		border-radius: 5px;
+		box-shadow: 0 0 5px var(--shadow-color);
+		padding: 2px;
+		border: 1px solid var(--border-color);
+	}
+	:global([data-nu-scheme-is='dark'] body code) {
+		color: var(--bg-color);
+	}
+</style>
diff --git a/src/components/ListItem.svelte b/src/components/ListItem.svelte
new file mode 100644
index 0000000..c4e1b41
--- /dev/null
+++ b/src/components/ListItem.svelte
@@ -0,0 +1,7 @@
+<li><slot /></li>
+
+<style>
+	li {
+		margin: 0.7rem 0;
+	}
+</style>
diff --git a/src/layouts/blog.svelte b/src/layouts/blog.svelte
index 403459a..1119c67 100644
--- a/src/layouts/blog.svelte
+++ b/src/layouts/blog.svelte
@@ -1,8 +1,8 @@
 <script context="module">
 	// @ts-ignore
 	import components from './components';
-	const { a, table } = components;
-	export { a, table };
+	const { a, table, code, li } = components;
+	export { a, table, code, li };
 </script>
 
 <script>
diff --git a/src/layouts/components.js b/src/layouts/components.js
index 59ee15f..bd4cb15 100644
--- a/src/layouts/components.js
+++ b/src/layouts/components.js
@@ -1,9 +1,13 @@
 import Link from '../components/Link.svelte';
 import Table from '../components/Table.svelte';
+import Code from '../components/Code.svelte';
+import ListItem from '../components/ListItem.svelte';
 
 const components = {
 	a: Link,
 	table: Table,
+	code: Code,
+	li: ListItem,
 };
 
 export default components;
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index e5df3ff..f8402f4 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -163,6 +163,7 @@
 		color: var(--text-color);
 		transition: background-color 0.3s ease-in;
 		font-family: 'Ubuntu Mono', monospace;
+		line-height: 1.3;
 		overflow-y: scroll;
 		margin: 0;
 		margin-top: 8px;
diff --git a/src/routes/blog/index.svelte b/src/routes/blog/index.svelte
index e59246c..0e52a1c 100644
--- a/src/routes/blog/index.svelte
+++ b/src/routes/blog/index.svelte
@@ -22,6 +22,7 @@
 <script lang="ts">
 	import type { BlogPostMeta } from '../../types';
 	import Link from '../../components/Link.svelte';
+	import ListItem from '../../components/ListItem.svelte';
 
 	export let posts: BlogPostMeta[];
 </script>
@@ -32,8 +33,8 @@
 
 <ul>
 	{#each posts as post}
-		<li>
+		<ListItem>
 			<Link href={post.href}>{post.date} - {post.title}</Link>
-		</li>
+		</ListItem>
 	{/each}
 </ul>
diff --git a/src/routes/blog/software-recommendations.svx b/src/routes/blog/software-recommendations.svx
index a03e8c0..a2c33e4 100644
--- a/src/routes/blog/software-recommendations.svx
+++ b/src/routes/blog/software-recommendations.svx
@@ -4,7 +4,7 @@ title: 'Software recommendations for a privacy conscious digital life'
 description: ''
 keywords:
   - privacy
-hidden: true
+hidden: false
 ---
 
 <script context="module" lang="ts">
@@ -23,16 +23,42 @@ hidden: true
 
 Moving away from BigTech is not an easy task. However, in these days, there are plenty polished
 alternatives out there. Over the years I tried out many different services and software. I will
-formulate some of my opinions here.
+present what worked best for me here.
 
-A very encompassing resource I recommend is [PrivacyGuides](https://www.privacyguides.org/).
+A very encompassing resource I am recommending is [PrivacyGuides](https://www.privacyguides.org/).
+However, their recommendations are at times rather purist. Everyone should use whatever works best for them.
+Privacy is not a black-and-white game.
 
-| Name                                   | Description      | Cost              | Selfhostable |
-| -------------------------------------- | ---------------- | ----------------- | ------------ |
-| [Bitwarden](https://bitwarden.com/)    | Password manager | free              | yes          |
-| [SimpleLogin](https://simplelogin.io/) | Email aliases    | free for students | yes          |
-| [Mailbox.org](https://mailbox.org/en/) | Email hosting    | 1 € / m           | no           |
+## Utilities
 
-<table>
+| Name                                                      | Description                                  | Cost              | Selfhostable |
+| --------------------------------------------------------- | -------------------------------------------- | ----------------- | ------------ |
+| [Bitwarden](https://bitwarden.com/)                       | Password manager                             | free              | yes          |
+| [SimpleLogin](https://simplelogin.io/)                    | Email aliases                                | free for students | yes          |
+| [Mailbox.org](https://mailbox.org/en/)                    | Email hosting                                | 1 € / m           | no           |
+| [Element](https://element.io/)                            | Instant messenging                           | free              | yes          |
+| [OpenStreetMap](https://www.openstreetmap.org/)           | Global map                                   | free              | no           |
+| [Baïkal](https://sabre.io/baikal/)                        | Lightweight calendar synchronisation         | free              | yes          |
+| [Filebrowser](https://github.com/filebrowser/filebrowser) | Lightweight file organisation in the browser | free              | yes          |
+| [xBrowserSync](https://www.xbrowsersync.org/)             | Bookmark sync                                | free              | yes          |
 
-</table>
+## PC Software
+
+| Name                                                                           | Description                 | Cost | Selfhostable |
+| ------------------------------------------------------------------------------ | --------------------------- | ---- | ------------ |
+| [Ungoogled Chromium](https://github.com/ungoogled-software/ungoogled-chromium) | Browser                     | free | NaN          |
+| [KDE Software Suite](https://kde.org/)                                         | Desktop environment         | free | NaN          |
+| [i3wm](https://i3wm.org/)                                                      | Desktop environment         | free | NaN          |
+| [VSCodium](https://vscodium.com/)                                              | No telemetry VSCode         | free | NaN          |
+| [Xournal++](https://xournalpp.github.io/)                                      | PDF annotation and creation | free | NaN          |
+
+## Android Apps
+
+| Name                                                                             | Description                | Cost | Selfhostable |
+| -------------------------------------------------------------------------------- | -------------------------- | ---- | ------------ |
+| [Infinity](https://f-droid.org/packages/ml.docilealligator.infinityforreddit/)   | Reddit client              | free | NaN          |
+| [Aegis](https://f-droid.org/en/packages/com.beemdevelopment.aegis)               | 2FA Manager                | free | NaN          |
+| [FindMyDevice](https://f-droid.org/en/packages/de.nulide.findmydevice/)          | Remote phone control       | free | yes          |
+| [AdAway](https://f-droid.org/en/packages/org.adaway/)                            | Adblocking with hosts file | free | NaN          |
+| [OsmAnd+](https://f-droid.org/en/packages/net.osmand.plus/)                      | Global map                 | free | no           |
+| [StreetComplete](https://f-droid.org/en/packages/de.westnordost.streetcomplete/) | Improve OpenStreetMap      | free | NaN          |
diff --git a/src/routes/contact.svelte b/src/routes/contact.svelte
index f1d9733..65fb271 100644
--- a/src/routes/contact.svelte
+++ b/src/routes/contact.svelte
@@ -15,23 +15,24 @@
 	import Icon from 'mdi-svelte';
 	import Element from '../components/element.svelte';
 	import Link from '../components/Link.svelte';
+	import ListItem from '../components/ListItem.svelte';
 </script>
 
 <h1>Contact Information</h1>
 
 <ul>
-	<li>
+	<ListItem>
 		<Icon path={mdiEmailEditOutline} />
 		E-Mail: <Link disableIcon href="mailto:me@daichendt.one">me@daichendt.one</Link>
-	</li>
-	<li>
+	</ListItem>
+	<ListItem>
 		<Icon path={mdiGithub} />
 		Github: <Link disableIcon href="https://github.com/AlexDaichendt">AlexDaichendt</Link>
-	</li>
-	<li>
+	</ListItem>
+	<ListItem>
 		<span style="font-size:1rem"><Element /></span>
 		Element: @alexdaichendt:matrix.org
-	</li>
+	</ListItem>
 </ul>
 
 I usually reply within a couple minutes - if it is important.
@@ -40,7 +41,4 @@ I usually reply within a couple minutes - if it is important.
 	ul {
 		list-style-type: none;
 	}
-	li {
-		margin-bottom: 0.5rem;
-	}
 </style>