[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6},"actionData","errors","routes/hashtag",{"_7":8,"_9":10,"_11":12},"articles",[13],"authors",{},"tag","sveltekit",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27},"content","## Introduction\n\nUsers of Nostr are most likely already familiar with the fact that there are multiple kinds of events on Nostr. It's not just for Twitter like experiences. In this series of posts we'll take a look at how to build a fully functional blog with the following features:\n\n* Setting up and getting started with [SvelteKit](https://kit.svelte.dev) and [Tailwind](https://tailwindcss.com)\n* How to fetch our posts from Nostr \n* Dynamic SSR or prerendering using SvelteKit\n* Building a simple cache adapter for [Cachified](https://github.com/Xiphe/cachified/tree/main) that uses SQLite as a storage\n* Adding a contact us form that sends a DM to use using Nostr.\n\nWe will be adding features as we go. At some point in the future I want to add some kind of authentication (using NIP-07) as well as comments, reactions and analytics.\n\n[If you're just interested in checking out the code, you can find it on GitHub](https://github.com/kevmodrome/sk-nostr-cms-tutorial). Each part and section has a separate branch.\n\nThis post and the upcoming parts will also be [available on my blog](https://kevinak.se) where you can see the end result.\n\n## Getting started with SvelteKit\n\n### Getting the project set up\n\nSvelteKit is one of the simplest solutions out there if you want to build your own blog. It's more work than just using something like [Ghost](https://ghost.org) but you get the advantage of customizability.\n\nI will assume that you have some experience using the terminal here. To get going run the following commands somewhere on your compouter:\n```bash\nnpm create svelte@latest my-blog\n```\n\nSelect the following options:\n\n1. Which template: **Skeleton project**\n2. Type Checking: **Yes, using Typescript syntax**\n3. Addition options: **ESLint, Prettier**\n\nWhen the installation process is done, run the following commands:\n\n```bash\ncd my-blog\nnpm install\nnpm run dev -- --open\n```\n\nYou'll also need an editor. I prefer VSCode (or in the spirit of Nostr, go for [VSCodium](https://vscodium.com)). If you're new to Svelte, make sure to download the Svelte extension on the marketplace.\n\nTo make our website look somewhat decent, let's also add Tailwind to handle the styling. Run `npx svelte-add@latest tailwindcss` in the terminal.\n\nIf you are completely new to Svelte and SvelteKit I would recommend [going through the learning material](https://learn.svelte.dev) to get a basic understanding of what is going on.\n\n## Fetching posts from Nostr\n\nBefore we actually set things up to show only our own posts, let's start with just fetching the latest 5 events from a couple of different relays. We'll be using @`pablof7z`'s excellent library `@nostr-dev-kit/ndk`. We'll also need to polyfill the websocket functionality since node doesn't support this out of the box:\n\n```bash\nnpm install @nostr-dev-kit/ndk websocket-polyfill\n```\n\nOnce it's installed, go ahead and create a file called `nostr.ts` in the following path: `lib/server/`. This is where we will be interacting with Nostr.\n\nFirst off, we'll need a list of relays that support NIP-04 (long form content). I used `wss://purplepag.es`. Find more on [nostr.watch](https://nostr.watch). Let's write some code.\n\n```ts\n// lib/server/nostr.ts\nimport NDK from \"@nostr-dev-kit/ndk\";\nimport 'websocket-polyfill'\n\nconst relays = ['wss://relay.damus.io', 'wss://purplepag.es']\n\nclass Nostr {\n private ndk: NDK\n\n constructor(relays: string[]) {\n this.ndk = new NDK({ explicitRelayUrls: relays })\n }\n \n public async init() {\n try {\n await this.ndk.connect()\n } catch (error) {\n console.error('Error connecting to NDK:', error)\n }\n }\n}\n\nexport const ndk = new Nostr(relays);\n```\n\nWe'recreating a simple class and instantiating NDK inside of it. We're then passing in our list of relays and exporting an instance of this class that we can use in the rest of our application. We've also added an `init()` method that we'll run when we start our application that connects to the relays. \n\nNext we'll create a method to fetch our posts but first, let's add an interface so we get some type safety. In `src/app.d.ts` go ahead and add the following interface:\n\n```ts\n...\ninterface Article {\n\tslug?: string,\n\td?: string,\n\ttitle: string,\n\tsummary: string,\n\ttags: string[]\n\tpublished_at: string,\n}\n```\n\nAdd a method to our Nostr class in `nostr.ts`. This will be the method that fetches the latest 5 events from our relays. \n\n\n```ts\n...\nimport type { NDKEvent } from \"@nostr-dev-kit/ndk\";\n\nclass Nostr {\n ...\n public async getAllArticles(): Promise {\n let events: NDKEvent[];\n try {\n events = [...await this.ndk.fetchEvents({ kinds: [ 30023 ], limit: 5 })]\n } catch (error) {\n console.error('Error fetching events:', error)\n events = []\n }\n const articles = events.map(({tags}) => {\n const { summary, image, published_at, title, t, d } = mapTags(tags)\n\n return {\n slug: generateSlug(title as string),\n d,\n summary, \n image, \n published_at, \n title,\n tags: t || []\n }\n })\n if (articles.length === 0) {\n return []\n }\n \n return articles as Article[]\n }\n}\n```\n\nLet's try to understand what's going on here. First we're importing the type `NDKEvent`. This is what we'll get back from NDK when we fetch our events.\n\nWe're fetching out event here: `events = [...await this.ndk.fetchEvents({ kinds: [ 30023 ], limit: 5 })]`. NDK returns a set of NDKEvents. I like to work with arrays so I convert them to just that by spreading them into an empty array. The argument that we pass into the fetchEvents method is a filter object. It follows the NIP-01 specification, so you can put all sorts of things in here. You can read more about [in the spec](https://github.com/nostr-protocol/nips/blob/master/01.md#communication-between-clients-and-relays). In our case we're using the `30023` kind which is the long-form content kind and we're limiting the number of results to `5`.\n\nNostr events have a few fields that we need to pay attention to. Often you'll find the actual body of a message in the `content` field, but other things that are specific to the `kind` will be found in the `t` field as an array of tuples so in order to more easily use this information we'll need to go through and clean it all up.\n\nThe keen-eyed among you have probably already spotted the `mapTags()` and `generateSlug()` functions here. Create a new file `lib/server/utils.ts` and inside add the following:\n\n```ts\nimport type { NDKTag } from \"@nostr-dev-kit/ndk\";\n\nexport function generateSlug(headline: string): string {\n const lowerCaseHeadline = headline.toLowerCase();\n const slug = lowerCaseHeadline.replace(/[^\\w\\s]/g, '').replace(/\\s+/g, '-');\n return slug;\n }\n\nexport function mapTags(tuple_tags: NDKTag[]): Record {\n let tags = tuple_tags.reduce((acc, [key, value]) => {\n if (!acc[key]) acc[key] = value\n else if (typeof acc[key] === 'string') {\n acc[key] = [acc[key], value] as string[]\n } else {\n (acc[key] as string[]).push(value)\n }\n return acc\n }, {} as Record)\n \n return tags\n}\n```\n\nYou don't need to understand what's going on here other than the fact that the functions will generate a slug and map the `t` field into usable fields.\n\nLet's go back to our `lib/server/nostr.ts` file and import these.\n\n```ts\nimport { generateSlug, mapTags } from './utils'\n\nclass Nostr {\n ...\n}\n```\n\nOk. with that done we should be able to fetch events. Let's move on to the SvelteKit bits.\n\n## Showing posts on the front-end\n\nSvelteKit apps are server-rendered by default for first load performance and SEO. This is important in order to get your posts ranked on search engines like Google or Bing.\n\nFirst off, we need to make sure our `Nostr` client is initiated. Create a file called hooks: `/hooks.server.ts` and add the following:\n\n```ts\nimport type { Handle } from '@sveltejs/kit';\nimport { ndk } from '$lib/server/nostr'\n\nawait ndk.init()\n\nexport const handle = (async ({ event, resolve }) => {\n const response = await resolve(event);\n return response;\n}) satisfies Handle;\n```\n\nThis file runs when the server starts. The handle hook runds on each request, we're not using it here but we need to add it in order for the rest of the file to be run.\n\n### Loading our events\n\nLet's start with loading our events. Create a file `routes/+page.server.ts`. In here we'll call the get articles method on our `Nostr` client.\n\n```ts\nimport { ndk } from '$lib/server/api';\n\nexport const load = async () => {\n const articles = await ndk.getAllArticles()\n\n return {\n articles\n };\n}\n```\n\nA load function in SvelteKit is used to return data to the front-end. It runs whenever a request is sent to the corresponding route. In this case the root: `/`.\n\nSince we have already initiated our `Nostr` client in `hooks.server.ts` we don't need to do it here. Simply call `ndk.getAllArticles()` and return the result.\n\n### Building the front-end\n\nLet's make something appear on the page. Open up `routes/+page.svelte`. Remove the contents of the file and add the following:\n\n```html\n\n\n

My blog

\n\n

\n\t\t\t{article.title}\n\t\t

\n```\n\nThe things we returned in our `load` function will be available in our `data` prop.\n\nTo get a list of our posts we use an `{#each}` block and loop through our articles. \n\nYay! Titles of posts! Amazing. Let's make it look a bit better. Create a new component: `routes/Summary.svelte` and add the following:\n\n```html\n\n\n

{article.title}

\n {@html article.summary}\n

\n```\n\nAnd finally import it and use it in `/routes/+page.svelte`:\n\n```html\n\n\n

My blog

\n\n

\n\t\t\t
\n\t\t

\n```\n\nLast but not least we'll want to only fetch our own posts. To do that modify the filter we used in the `Nostr` class (`lib/server/nostr.ts`):\n\n```ts\n...\nevents = [...await this.ndk.fetchEvents({ kinds: [ 30023 ], authors: [YOUR_PUBKEY_GOES_HERE, SOME_OTHER_PUBKEY])]\n...\n```\n\nMake sure that the pubkey you're using is in a hex format. If you only have your `npub1.....` style key you can use something like [Nostr Check](https://nostrcheck.me/converter/) to convert it.\n\nYou will probably notice that it takes quite a while to load your page at this point. In the next part we'll take a look at how we can fix this by using caching.\n\nUntil next time! 🤘","created_at",1690807460,"id","e76f89d35e7cddf16d0d1a1f80ea53860df3772b32f2ec89b732f0941241b894","kind",30023,"pubkey","7e9c924ae5255c95a454d28ae89552a1e081f828ad4dc0381508b509188c865e","sig","16cfa953acdb90b7fe9333c3b5505a202c926ec4ca05266997d833f6115d6dceecef9f69f9884032213a669fd8fded4acd1a94968e34ac63860c7bd3e54aee2f","tags",[28,29,30,31,32,33,34,35,36],[49,50],[47,48],[45,46],[43,44],[39,42],[39,41],[39,12],[39,40],[37,38],"a","34550:7e9c924ae5255c95a454d28ae89552a1e081f828ad4dc0381508b509188c865e:Svelte","t","webdev","svelte","nostr","published_at","1690807460","summary","This blog series will show you how to build a blog using SvelteKit using Nostr as a CMS. In this first part we're setting up the project and figuring out how to fetch events and render them on our blog.","title","Building a Blog using SvelteKit and Nostr as a CMS (Part 1)","d","1690807337563"]