85 - Update narze/resume

Livestream

https://github.com/narze/resume

  • Change to SvelteKit v1.0 (Replace the project with newly created SvelteKit)
  • Update HideToggle which mutates parent element directly to component with slot

Before

<script lang="ts">
	let hide = false;

	function hideToggle(e: Event) {
		hide = !hide;
		const el = e.target as HTMLInputElement;
		const parentEl = el.parentNode as HTMLInputElement;

		if (hide) {
			parentEl.classList.add('web-only', 'text-gray-300');
		} else {
			parentEl.classList.remove('web-only', 'text-gray-300');
		}
	}
</script>

<button class="hide-toggle web-only" on:click={hideToggle}>{hide ? '[Show]' : '[Hide]'}</button>

<style lang="postcss">
	.hide-toggle {
		@apply text-gray-700 underline;
	}
</style>

After

<script lang="ts">
	let hide = false;

	const toggleHide = () => (hide = !hide);
</script>

<button class="web-only" class:text-gray-300={hide} on:click={toggleHide}
	>{hide ? '[Show]' : '[Hide]'}</button
>

<div class="inline" class:web-only={hide} class:text-gray-300={hide}>
	<slot />
</div>