Daniel Reszka danielres

Place the files

mv config.yml /home/daniel/.config/xremap/config.yml
mv service.sh /home/daniel/.config/xremap/service.sh
sudo mv xremap.service /etc/systemd/system/xremap.service

Start the service

extractRecordOptions(anyZodSchema) generates automatically a correct object { fields: "...", expand: "..." } which can be passed to the pocketbase sdk.

We can use the same schema to parse/validate and strongly type the response.

Other tools

Common TS utils

A collection of functions in typescript that I use often in different projects.

Sveltekit + Pocketbase SSR

The minimal steps to integrate Pocketbase with Sveltekit SSR. Not striclty needed as Pocketbase can be used from the browser only. But useful in certain cases.

	// Svelte flash animation for new elements
	// source: https://learn.svelte.dev/tutorial/svelte-options

	export default function flash(element) {
	requestAnimationFrame(() => {
	element.style.transition = 'none';
	element.style.color = 'rgba(255,62,0,1)';
	element.style.backgroundColor = 'rgba(255,62,0,0.2)';

	setTimeout(() => {

	<script lang="ts">
	import { derived, readable, writable } from 'svelte/store'

	type States = 'view' \| 'edit'
	const state = writable<States>('view')

	const _substate = derived(state, ($state) => {
	if ($state === 'edit') return writable<{ item?: number }>({})
	return readable(null)
	})

	# Edit this configuration file to define what should be installed on
	# your system. Help is available in the configuration.nix(5) man page
	# and in the NixOS manual (accessible by running ‘nixos-help’).

	{ config, pkgs, ... }:

	{
	imports =
	[ # Include the results of the hardware scan.
	./hardware-configuration.nix

	export type Signal<T> = ReturnType<typeof createSignal<T>>

	export function createSignal<Value>(initialValue: Value): {
	subscribe: (listener: (v: Value) => void) => () => void
	val: Value
	} {
	let value = initialValue
	const listeners: ((v: Value) => void)[] = []

	function subscribe(listener: (v: Value) => void) {

	<!--
	@component
	Allows to create responsive containers with a fixed aspect ratio.
	Uses container queries to determine the size of the container.
	The contained element will be as large as possible while maintaining the aspect ratio.

	@example

	```tsx
	<div class="outer h-[100svh] grid grid-rows-[auto_1fr_auto]">