How to Track Human Page Views in SvelteKit

Cesar Mejia · 17 Apr 2023

5 mins

· 218 words · 16 views

#svelte#supabase

Markdown Examples

This is the first line.
And this is the second line.

I just love bold text. Italicized text is the cat’s meow.

Dorothy followed her through many of the beautiful rooms in her castle.

First item
Second item
Third item
1. Indented item
2. Indented item
Fourth item

unordered
- indented list

Code Examples

Inline Code

Here is some inline code console.log('Hey I'm inline-code')

No Highlighting

	
		Svelte
		
			
			
		
	
	<script lang="ts">
	import { page } from '$app/stores'
	import { Url } from '$lib/url'
	export let data

	const { posts } = data
</script>

<svelte:head>
	<title>Cesar Mejia's Web Portfolio</title>
	<link rel="canonical" href={$page.url.href} />
</svelte:head>

<div>
	<ul>
		{#each posts as post (post.slug)}
			<li class="mb-4"><a class="unstyled" href={Url.BlogDetail(post.slug)}>{post.title}</a></li>
		{/each}
	</ul>
</div>

With Highlighting

	
		JavaScript
		
			
			
		
	
	export async function load({ fetch }) {
	const variable = "this is a super long variable declaration come on"
	const res = await fetch(`/posts.json`)
	if (res.ok) {
		const { posts } = await res.json()
		return { posts }
	}
}

const code = 'yay!'

const code = 'yay!'

With Focus

	
		TypeScript
		
			
			
		
	
	export async function load({ fetch }) {
	const variable = "this is a super long variable declaration come on"
	const res = await fetch(`/posts.json`)
	if (res.ok) {
		const { posts } = await res.json()
		return { posts }
	}
}

const code = 'yay!'

const code = 'yay!'

Remark Abbreviations Examples

This plugin works on Markdown Abstract Syntax Tree (MDAST), a Markdown Abstract Syntax Tree (AST) implemented by remark

Remark-Github Examples

ref: https://github.com/remarkjs/remark-github
Commit: 63cf895
Discussion: #1
Issue: #2
Mention: @cesarnml

test 🙂 inline