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>