List filenames

import { json } from '@sveltejs/kit';
import pMap from 'p-map';
import { basename } from 'path';

export async function GET() {
	// Import all .md files in the directory
	const modules = import.meta.glob('../../../src/lib/blog/*');
	const posts: string[] = [];
	await pMap(Object.entries(modules), async function ([filename]) {
		posts.push(basename(filename, '.md').split('.md')[0]);
	});
	return json({
		name: posts
	});
}

Read file content

import { json } from '@sveltejs/kit';
import pMap from 'p-map';

export async function GET() {
	const modules = import.meta.glob('../../../src/lib/blog/*', { as: 'raw' });
	const posts = await pMap(Object.entries(modules), async function ([filename, content]) {
		const mod = await content();
		return {
			filename,
			content: mod
		};
	});
	return json({
		body: { posts }
	});
}

Form handling

<script>
	const logIn = (e) => {
	console.log(`Logged in with email ${e.target.email.value} and password ${e.target.password.value}`)
	}
</script>

<form on:submit|preventDefault={logIn}>
	<input required type="email" name="email">
	<input required type="password" name="password">
	<button type="submit">
		Log in
	</button>
</form>

Svelte chrome extension

Writing Chrome Extensions Using Svelte-Kit and Manifest v3

Publish svelte package to npm

https://github.com/Tropix126/sveltekit-package-template

Atropos.js (3d hover image)

pnpm i atropos

<script>
	import 'atropos/atropos.css';
	import div from 'atropos';
	import { onMount } from 'svelte';

	// Initialize
	onMount(() => {
		const myAtropos = div({
			el: '.my-atropos'
			// rest of parameters
		});
	});
</script>

<div class="atropos my-atropos">
	<!-- scale container (required) -->
	<div class="atropos-scale">
		<!-- rotate container (required) -->
		<div class="atropos-rotate">
			<!-- inner container (required) -->
			<div class="atropos-inner">
				<p>Content</p>
			</div>
		</div>
	</div>
</div>

Page transitions

<script>
	import { page } from '$app/stores';
	import { fly } from 'svelte/transition';
</script>

<section>
	<a href="/test1">Test1</a>
	<a href="/test2">Test2</a>
	<a href="/test3">Test3</a>
</section>

{#key $page}
	<div in:fly={{ delay: 100, duration: 200, y: -10 }} out:fly={{ duration: 100, y: 10 }}>
		<slot />
	</div>
{/key}

Html2Canvas

Just download

<script>
	import html2canvas from "html2canvas";
	let name = "123";

	function download() {
	  html2canvas(document.getElementById("capture"), {
	    backgroundColor: null
	  }).then(function(canvas) {
	    const aDownloadLink = document.createElement("a");
	    aDownloadLink.download = "canvas_image.png";
	    aDownloadLink.href = canvas.toDataURL("image/png");
	    aDownloadLink.click();
	  });
	}
</script>

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello {name}!</h4>
</div>
<input bind:value={name} type="text">
<button on:click={download}>Download</button>

Show and download