Introduction

In this post I’m going to show you how I made the search bar on the posts page and main page of my website.

Implementing the Search Bar

I used a library called fuse.js for fuzzy searching for titles, here’s how it works.

<script lang="ts">
	import { Heading } from 'flowbite-svelte';
	import Post from '$lib/components/Post.svelte';
	import Fuse from 'fuse.js';
	import { afterUpdate } from 'svelte';
	export let posts: { path: string; meta: { title: string; date: string } }[];
	let query = '*';
	let results = posts;
	const options = { keys: ['meta.title'] };
	const fuse = new Fuse(posts, options);
	afterUpdate(() => {
		let results_ = fuse.search(query);
		results = results_.map((result) => ({ path: result.item.path, meta: result.item.meta }));
	});
</script>

<Heading
	tag="h4"
	style="display: inline"
	class="ml-8 my-4 text-secondary dark:text-dark-secondary w-auto">Posts</Heading
>
<input class="text-secondary" bind:value={query} />
<ul>
	{#each results as post}
		<Post {post} />
	{/each}
	{#if results.length === 0}
		{#each posts as post}
			<Post {post} />
		{/each}
	{/if}
</ul>

How it Works

You can see I initialize the query to '*'. All this really does is sets the search field to * instead of being empty. Then in the input element I bind to the value of query so that when the user types in the field the value of query will change.

I do some more initialization of fuse.js to search and then I register afterUpdate(). This allows me to search only when the page changes.

Finally I added some logic to display all the posts if there are no results, like for example when the page loads.

All this together looks like the search bar you see on /posts and /.

Introduction

Recently I implemented HTTP Basic Auth using a session cookie in SvelteKit on Cloudflare Pages using Cloudflare D1 as a database backend. Here I’ll show some code snippets so you can do the same.

Project Setup

First you would want to set up your project according to this. So you can have a basic project set up.

Database Setup

Next you’ll want to add the database to your project. It’s easy to create using wrangler. Just remember to link it to your project in your cloudflare dash under settings > functions.

wrangler d1 create your-database-name

Then you can copy it into your wrangler.toml so your local dev works with it. To run with support for D1 you can use this oneliner.

npm run build && wrangler pages dev .svelte-kit/cloudflare

My final schema looks like this. Yours might be a bit different, but mine allows for adding songs to a playlist, which was the purpose of that project.

CREATE TABLE IF NOT EXISTS Users (id TEXT PRIMARY KEY, password TEXT);
CREATE TABLE IF NOT EXISTS Playlist (id TEXT PRIMARY KEY, email TEXT, url TEXT, date TEXT);

You’ll want to create these tables using wrangler both locally (on your dev server) and remotely.

wrangler d1 execute svelte-auth --local --file=./schema.sql
wrangler d1 execute svelte-auth --file=./schema.sql

Now you can add it to your app.d.ts like this.

declare global {
	namespace App {
		interface Platform {
			env?: {
				DB: D1Database;
			};
			context: {
				waitUntil(promise: Promise<any>): void;
			};
			caches: CacheStorage & { default: Cache };
		}
	}
}

export {};

Authentication Implementation

Now you’re ready to set up authentication. It’s probably easier to just show you how I did it. I imported sha256 which is just a simple function I wrote to call web crypto to get the sha256sum of a string. Here is my code.

I added form actions. These allow you to quickly write code that will work with HTML <form>‘s.

import { redirect } from '@sveltejs/kit';
import sha256 from '$lib/sha256';

export const actions = {
	register: async (event) => {
		const data = await event.request.formData();
		const email = data.get('email');
		const password = await sha256(data.get('password')?.toString() ?? '');
		const { success } = await event.platform?.env?.DB.prepare('INSERT INTO Users VALUES (?, ?)')
			.bind(email, password)
			.all();
		if (success) {
			event.cookies.set('session', JSON.stringify({ email, password }));
			throw redirect(303, '/');
		}
	},
	login: async (event) => {
		const data = await event.request.formData();
		const email = data.get('email');
		const password = await sha256(data.get('password')?.toString() ?? '');
		const results = await event.platform?.env?.DB.prepare('SELECT password FROM Users WHERE id=?')
			.bind(email)
			.all();
		if (results.results[0].password === password) {
			event.cookies.set('session', JSON.stringify({ email, password }));
			throw redirect(303, '/');
		}
	}
};

Checking Authentication Status

Now this is enough to save a cookie with the user auth, but to re-auth on a page we need to check if their cookie is valid. So how I do this is I wrote another function called tryLogin.ts.

import type { D1Database } from '@cloudflare/workers-types';

const tryLogin = async (session_cookie: string | undefined, DB: D1Database) => {
	if (session_cookie) {
		const { email, password } = JSON.parse(session_cookie);
		const results = await DB.prepare('SELECT password FROM Users WHERE id=?').bind(email).all();
		if (results.results[0].password === password) {
			return true;
		}
	}
	return false;
};

export default tryLogin;

Now I can call this inside +page.server.ts.

import tryLogin from '$lib/tryLogin';
import getCurrentSong from '$lib/getCurrentSong';

export const load = async (event) => ({
	auth: await tryLogin(event.cookies.get('session'), event.platform?.env?.DB),
	song: await getCurrentSong(event.platform?.env?.DB)
});

Using it inside the +page.svelte is as simple as this one line.

export let data: {auth: boolean, song: {id: string, url: string}};

Playlist Management

Now I wrote more form actions for adding and removing songs from the playlist here.

import { redirect } from '@sveltejs/kit';
import tryLogin from '$lib/tryLogin';

export const actions = {
	add: async (event) => {
		if (await tryLogin(event.cookies.get('session'), event.platform?.env?.DB)) {
			const session = JSON.parse(event.cookies.get('session'));
			const email = session.email;
			const formdata = await event.request.formData();
			const v = new URL(formdata.get('url')).searchParams.get('v');
			await event.platform?.env?.DB.prepare('INSERT INTO Playlist VALUES (?, ?, ?, ?)')
				.bind(crypto.randomUUID(), email, v, Math.floor(new Date().getTime()))
				.all();
		}
		throw redirect(303, '/');
	},
	remove: async (event) => {
		if (await tryLogin(event.cookies.get('session'), event.platform?.env?.DB)) {
			const formdata = await event.request.formData();
			const id = formdata.get('id');
			await event.platform?.env?.DB.prepare('DELETE FROM Playlist WHERE id=?').bind(id).all();
		}
		throw redirect(303, '/');
	}
};

User Interface

Now this allows us to add songs, we just need the interface for it. So I wrote the main page to allow logged in users to submit songs.

<script lang="ts">
	import { enhance } from '$app/forms';
	import YouTube from '$lib/svelte-youtube.svelte';
	export let data: { auth: boolean; song: { id: string; url: string } };
</script>

{#if !data.auth}
	<p>Visit <a href="/login">login</a></p>
{/if}

<YouTube
	on:end={() => document.getElementById('remove_song')?.click()}
	videoId={data.song.url}
	options={{ playerVars: { autoplay: 1 } }}
/>

<form style="display: none;" method="POST" action="/playlist?/remove" use:enhance>
	<input name="id" value={data.song.id} />
	<button id="remove_song">remove</button>
</form>

{#if data.auth}
	<form method="POST" action="/playlist?/add" use:enhance>
		<label
			>Submit a song
			<input name="url" type="url" placeholder="paste a youtube link" pattern=".*v=.*" />
		</label>
		<button>Submit</button>
	</form>
	<p><a href="/logout">Log out</a></p>
{/if}

Conclusion

If you have any problems or you want to see the entire repo, the code is here.

Introduction to useState

In React when we want to manage individual state there is a function we can import called useState that gives us a getter and setter letting React know when it needs to re-render.

import React, { useState } from 'react';

const myComponent = () => {
  const [count, setCount] = 0;
  ...
}

This initializes count as a state variable that can be accessed with count and set with setCount.

Incrementing a Counter

If we wanted to write a function that incremented count, we could add a button.

...
return (
    <>
      <p>Count is: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
);

Here we wrapped our text and button in a React Fragment. Since components can only return one DOM parent element, Fragments allow us to return more than one without creating more divs in our markup.

Then I set the onClick for button to an inline function that increases count by 1 using setCount. If we were to do this without a state variable, i.e. const count = 0 React wouldn’t know when to re-render our data.

Managing List State

This can be used to hold any state or object however, not just numbers and strings. If we wanted to instead append to a list we might write a function that gets passed to the onSubmit of a form.

...
[list, setList] = useState([]);
...

const onFormSubmit(event) {
  event.preventDefault();
  list.push(form.name);
  setList(list);
}

Handling Form Input

Changing all our input onChange methods as well to update the state of form when the data changes.

...
<label>
  <p className={"text-label"}>Name:</p>
  <input
    onChange={handleSetForm}
    type="text"
    name="name"
  />
</label>
...

...
[form, setForm] = useState({ name: '' });
...

const handleSetForm = ({ target: { name, value } }: any) => {
  setForm((form) => ({ ...form, [name]: value }));
};

This updates our form state whenever the data changes. Allowing us to use form to append to our list above whenever the submit button is clicked.

Introduction

I’ve been learning React so that I can build my web applications for others and myself. React is component based. You create reusable components and render them with data. Here I created a card component that lets me insert cards. They can even contain other cards and are easy to understand from the App.js.

Creating the Card Component

To create a new component I just create a new file called Card.js and import it at the top of App.js.

import Card from './Card.js';

Then inside Card.js I can create my Card. At the top I import my styles and return the JSX Card object.

import './Card.css';

function Card(props) {
	return (
		<div className="Card">
			<h2 className="CardTitle">{props.cardTitle}</h2>
			<p className="CardContent">{props.children}</p>
		</div>
	);
}

export default Card;

At the bottom I set the default export to Card so that we can import it properly in App.js.

Styling the Card

My styles are fairly simple, they just create a nice looking card.

.Card {
	text-align: center;
	background-color: lightgrey;
	border: 1px solid grey;
	border-radius: 0.5em;
	margin: 1em;
	height: 20em;
	overflow: hidden;
}

.CardTitle {
	font-size: 1em;
}

.CardContent {
	background-color: white;
	height: 100%;
	border-radius: 0.5em;
	border-top-left-radius: 0em;
	border-top-right-radius: 0em;
	padding: 1em;
}

Using the Card Component

That’s great but we still have to insert our card in App.js. Now that we’ve created a component and imported it all I have to do in App.js to create a card is this.

<Card cardTitle="Example Card Title">Hello World</Card>

Conclusion

Finally we can see that this builds a card.

This can be used for building any kind of component, such as dialog boxes, forms, or anything you can imagine in HTML/CSS.