feat: work on code highlighting
This commit is contained in:
Alexander Daichendt
parent
c342dadf21
commit
f18cdf501a
8 changed files with 120 additions and 23 deletions
60
src/components/Code.svelte
Normal file
60
src/components/Code.svelte
Normal file
|
|
@ -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>
|
||||
7
src/components/ListItem.svelte
Normal file
7
src/components/ListItem.svelte
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<li><slot /></li>
|
||||
|
||||
<style>
|
||||
li {
|
||||
margin: 0.7rem 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue