Forem: Scott Spence

Should I create my own blog?

Scott Spence — Fri, 04 Aug 2023 19:17:06 +0000

There were a couple of Tweets I saw in quick succession today along the lines of "Don't create your own blog, write on someone else's platform instead". Now, as someone that has been blogging since April 2010 (since 2016 here) I can tell you it is absolutely worth doing.

So, I class myself as a fullstack developer, all the opinions here will be geared toward someone that is in web development and wants to share what they have learned.

The setup I use for this blog is writing in Markdown, using SvelteKit with MDSveX to render the Markdown into HTML with some additional Svelte components added in for use in the Markdown. This is a feature not supported by any blogging platform and reasoning for me to build my own blog.

For an example of what I mean, take a look at the Writing with Markdown post I did a while back for the interactive elements on there.

Let's compare

Ok, here's a table comparing the pros and cons of using a blogging platform vs owning your own blog. I've tried to be as objective as possible here and I've more than likely missed some things. If you can see a glaring omission and it's triggering you, LET ME KNOW! I'll update the table accordingly.

The ✔️ is a yes you get that pro or con, the ❌ is no you don't get that pro or con.

Pros/Cons	Blogging Platform	Own Blog
Free Hosting	✔️	✔️
Built-in community features	✔️	❌
Often free or low-cost	✔️	✔️
Easy to set up and use	✔️	❌
Customisation options	❌	✔️
Control over monetization	✔️	✔️
Ownership of content and data	✔️	✔️
Governed by Terms of Service	✔️	✔️
More work to build a community	✔️	✔️
Technical skills to set up	❌	✔️
More responsibilities	❌	✔️
Save time on maintenance	✔️	❌

Pretty cool! Pretty table out of the way, let's get into the details.

Free Hosting

There was a time, back when I first got into web development that this was a thing, rackspace was expensive and there were a lot of companies that offered hosting plans. There's still a lot of companies today that make their money from consumer web hosting.

These days, if you want to set up your own blog all you need is a HTML file and a service like Netlify to host it for you, it's a literal drag and drop of the file and it's up on Netlify, for free.

There's a lot of other services that do this as well, Vercel, Render, Surge are some I have used in the past. There's probably a lot more, I've not checked.

These will offer services along the lines of hosting, SSL, CDN, DNS, and more platform specific features that was a chore to set up in the past.

Conclusion, marketing on blogging platforms may say otherwise but, you get free hosting either way.

Built-in community features

There's no denying that you get out of the box features when you use a blogging platform. It's essential to them to get other people involved on their platform. Post commenting and the ability to follow someone are on there so that their posts will turn up in your feed.

This does mean that you're sort of locked into their ecosystem and you have to go there to get new content or see when someone your following has posted something new.

To build community, a lot of the posts that get amplified on these platforms are from people on the platform that already have a large social media following. This in turn brings more people to the platform when they share their content on the socials.

This isn't to say that you can't have community features on your own blog, like commenting. There's a lot of services out there that will do this for you, you can even use GitHub issues as a way to have commenting on your own blog.

The thing with having commenting on blog posts is that there's a lot of spam.

If you want to have people notified of when you post something new on your blog you can use an RSS feed so that people can subscribe to your blog and get notified when you post something new in their RSS reader of choice.

Conclusion, you get these features out of the box on a blogging platform, yes. But, you can have them on your own blog as well.

Often free or low-cost

Have you heard the saying "if it's free you're the product"? Companies like Google and Facebook collect a lot of data on you and it is worth a lot of money to them.

Now I'm not saying that blogging platforms are doing this, but, how do you think these platforms make their money?

Ads? Some do. Others pride themselves on not having ads on their platform. How do they keep the servers running then?

Premium memberships, that give you an algorithmic boost in the feed? A swag store?

Many of these platforms are funded by companies that will one day want to see a return on their investment. How do you think they'll do that?

Some platforms haven't worked that out yet, but they will definitely be asking for money at some point. Take Medium for example, the darling of the tech blogging world five years ago, now they have a paywall.

Full disclosure here, I'm at that point in my life now where I'm happy to pay for a service for the sake of privacy and not having ads on the platform (whatever platform that may be).

So, what about setting up your own blog? Well, let's look at the costs involved in that. Here's a shopping list of things you'll need to set up your own blog. I've added in some other things as well that you don't get with a blogging platform:

domain
- Depending on the top level domain you get (you can get a .com for around £11 a year)
hosting
- Netlify, Vercel, free
SSL
- Let's Encrypt, Netlify, Vercel, etc. free
CDN
- Netlify, Vercel, free up to a certain amount of traffic (it's a LOT)
DNS
- Free, again! I know and love using the Vercel DNS CLI!
email
- Not necessarily needed, but, if you want to have an email address that matches your domain do it.
analytics
- Again, not a deal breaker, but nice to know if anyone is visiting your site! Google Analytics is free, but, Google! I use Fathom Analytics (~£115 annually) one fee, unlimited sites.
backup
- All my content is stored in a git repo, so I can always go back to a previous version of my site if I need to.
maintenance
- I don't have to do anything to my site, it's just there. I don't have to worry about updates, security, etc. I just write and publish.

Like! Wow! That's a lot of stuff! Right?

Yes, but, you can get all of this for free as well.

Also, really, you don't need all of this stuff. You can get away with a domain with SSL and hosting.

Conclusion, there's obviously a time investment in setting up your own blog and a there can be some costs involved. If you feel that you won't get anything out of setting up your own blog then use a blogging platform.

What I got out of setting up my own blog was a lot of knowledge on how to set up and deploy websites, which is what I do for a living! So time well invested for me 😊

Easy to set up and use

Yeah, a blogging platform is designed for doing that, it's their business model. They want you to be able to set up a blog and start writing as quickly as possible. No brainer on that front.

Let's take a look at setting up your own blog. You need a GitHub account and a Vercel account. You can authenticate with Vercel with your GitHub account.

Pick a blog template, there's a few to choose from on GitHub. Here's a couple I'd recommend:

Both of these are specified as templates allowing you to create your own repository from them.

There's even the option in GitHub to open the code directly in a GitHub Codespaces, which is a VS Code instance running in the browser.

Add your content, push it to GitHub and use one of the continuous deployment features of Vercel or Netlify to deploy your site.

Conclusion, it's not as easy as using a blogging platform, but, it's not that hard either. You can be up and running in a short time.

Customisation options

I've put this as a con for the blogging platforms as a lot of them don't offer this functionality.

Some blogging platforms do have some customisation options, allowing you to change the layout to a predefined set of options.

Some platforms allow adding your own custom domain to map to and the ability to add your own CSS stylesheet. Let's face it though, if you've got to the point of having your own domain and customising the CSS you're probably better off setting up your own blog.

Conclusion, some platforms allow you to customise your blog, to a certain extent. You have free reign to what you want to add to your own blog.

Control over monetization

Some blogging platforms allow you to add web monetization pointers to your blog, usually restricted to their provider of choice.

I'm not going to name names but I have seen a platform that replaced the users pointer with their own. So, they're getting the monetisation rather than the user. This was raised with them by me and one of my friends and was glossed over by the platform as a testing token.

Needless to say, you can use your preferred provider on your own blog without any third party interference.

Conclusion, you have full control over monetisation on your own blog. Blogging platforms can be hit amd miss with this.

Ownership of content and data

Who reads the terms and conditions of a blogging platform? I know I don't. I'll come onto that in the next section anyway, for now let's discuss ownership of content and data.

So, when you sign up to these services there'll be a section in the terms of service that says something along the lines of:

"You grant us (blogging platform) a perpetual, worldwide, royalty-free and non-exclusive license(s) do essentially what we like with Your Content."

Now, terms of service are usually a lot more wordy than that, but, that's the gist of it. You're giving them the right to do what they like with your content.

If you're cool with that then that's fine. Some blogging platforms will offer up ways for you to import/export your data from other platforms, why not, more content is more content, right? You're still giving them the right to do what they like with your content once it's on their platform.

I have an MIT license on my blog, so, this means that anyone can rip it off and claim it as their own, which, by the way I see a lot of over on GitHub 👀. I'm cool with it as I have the SEO juice to back up that I am the original author of the content, I'll come onto SEO later.

Conclusion, you own your content and data on your own blog. Blogging platforms will have terms of service that allow them to do what they like with your content.

Platform terms of service

With your own blog you're bound to the terms of service of the platform you use. If you're using GitHub then you're bound to their terms of service. If you're using Vercel then you're bound to their terms of service.

The terms of service of a blogging platform is there to cover them if there's anything in the user generated content that could possibly be construed as illegal/unethical/copyright infringement or anything else which could land them in legal hot water. They're not there to protect you, they're there to protect "The Platform".

It's up to you to moderate your own content, keep comments clear of spam which could infringe on the terms of service of the platform. Otherwise you could find yourself in a situation where your account is suspended or deleted.

Conclusion, you're bound to the terms of service of any platform you use. They can decide to change these terms at any time and you, by using the platform are implicitly agreeing to these changes.

More work to build a community

Blogging platforms don't guarantee you'll build a community, gain views, likes and comments just by using the platform. There's the tools there to enable this, but people still need to find your content.

A lot of platforms will have an algorithmically generated feed where views, likes and comments are taken into account to determine what content is shown to users.

So, the initial work to build a community is still on you. You need to make people aware of your content, get them to view it, like it and comment on it. Usually achieved by sharing the content on social media. Pretty much the same as if you were using your own blog.

Technical skills to set up

This point has been covered several times already in other sections here. If you're a tech blogger then you're probably already comfortable with setting up your own blog.

The only thing is the time investment.

Conclusion, blogging platforms make it easy to get up and running, you're restricted to the features they offer however.

More responsibilities

I have this as a pro for the blogging platforms, my thinking is that all you have to worry about is adding your content on there.

With your own blog you have to take care of deploying new content, this can be done with a git push to GitHub, and have a CD service on Vercel take care of that part for you.

Conclusion, you're responsible for moderating your content, you're responsible for building your community on both your own blog and a blogging platform. With your own blog you could have issues with deploying new content, you're responsible for making sure it's up and running.

Save time on maintenance

Again, I have this as a pro for the blogging platforms, all you have to worry about is adding your content on there.

With your own blog you have security patches to apply to any packages you may use, failed deployments to fix, and any other issues that may arise.

The blogging platform is up and maintained by them, that's their problem.

Conclusion, blogging platforms win on this side only for the time element. Again, for your own blog this can a learning experience which will set you up for when this happens in the future.

Additional notes

I've decided to add in som additional sections not covered in the checklist here but feel that after researching this topic I should add them in.

I haven't even touched on using a CMS, this, in my opinion is another service to get locked into where they can switch up the terms of use at any time.

Learning as you're doing

The main benefit of creating your own blog is the learning along the way, I'd say that almost all of the content on this site has came about from me building a project in some form or another.

Your blog is your space to experiment, to learn, to build and to test out new ideas. It's a continuous learning process and the opportunity to feed that back into your site and share what you have learned in the way of blog posts.

It's your SEO

An advantage of having your own blog is that you can control the SEO. Many blogging platforms will allow you to add a canonical link to the content you add to their platform. This is a link to the original source of the content (your blog).

So what you can do is add your content from you own blog onto other blogging platforms, add the canonical link to your own blog and then share the content on social media. The canonical link will tell the search engines that the original source of the content is your blog.

If you have all your content on one platform without it pointing back to and original source then you're missing out on the SEO juice there.

A couple of years ago I experimented with the effectiveness of a blogging platforms SEO. I added original content on there, left it a month or so then searched for specific phrases in a search engine. The results weren't great, I couldn't find my content.

With searching for content on my blog I can find it, I can find it quickly and I can find it in the search results.

This isn't to say that blogging platforms don't have SEO, they do, but it's not as effective as having your own blog.

Conclusion

Obviously, I went into this with a bias towards setting up your own blog.

The main benefit from my point of view is that I get to learn how to implement the features I want on my blog. I get to learn how to use the tools I want to use. I get to learn how to build a community around my blog.

The time investment for me is well worth it as I usually learn a lot when implementing new features which ultimately turns into more content to write about.

I've found that the only real main difference is the time you want to spend setting up your own blog. You're still bound to the terms of service of the platform you use, you're still responsible for moderating your own content and you're still responsible for building your own community.

Any platform at any time can decide to shut up shop and you're left without it.

Backups are important, so, if GitHub and Vercel decide to shut up shop tomorrow I can start hosting my blog on a Raspberry pi on my kitchen windowsill 😂.

Making npm Packages with SvelteKit

Scott Spence — Fri, 03 Jun 2022 15:44:04 +0000

I have several components that I use across a couple of my SvelteKit projects. I decided to make them into an npm package so that I'm not maintaining them in several places.

Here I'm going to go through the process I followed to develop the package locally then publish it to npm. So first I should tell you about the project. I recently published SvelteKit Embed on npm and it's a package of components to embed 3rd party media like YouTube videos, Tweets and some other embeds into a Svelte project.

Setting up the project

It's a normal npm init svelte project. I initialised it with TypeScript as that's the expected default for packages these days.

The project is a standalone project with all the components I want to use from it in the src/lib/components folder.

There needs to be a index.ts file exporting the components.

sveltekit-embed/
├─ src/
│  └─ components/
│  └─ index.ts
└─ package.json

This will be how the components can be accessed in the project, here's how they're being exported.

export { default as AnchorFm } from './components/anchor-fm.svelte'

Package the project

I developed the package locally using the sveltekit package command, then installed it from the resulting package folder generated.

# package with sveltkit
pnpm run package
# install local package
pnpm i -D ./package

Now I can validate the components are working locally before publishing to npm.

Publish the project to npm

OnceI'm happy with the state of the package, I can publish it to npm. I'll need to authenticate with npm first with the npm login command.

I'll use the npm version command to bump the version number, then run the sveltekit package command.

# authenticate with npm
npm login
# bump version with npm
npm version 0.0.2
# package with sveltkit
pnpm run package
# publish from package directory

Then once the package has been created I'll be able to change to the package directory and publish it to npm.

cd package
npm publish

npm will prompt me for my authentication credentials, which is a one time password (OTP) for 2FA.

Once it's published to npm I can then push the Git tags created to GitHub and make a release with it.

# push tags to github
git push --tags

Conclusion

I was able to take all the components I used in several projects and create an npm package with them for reuse in many projects.

Make a Contact Form with SvelteKit and Airtable

Scott Spence — Thu, 02 Jun 2022 14:46:59 +0000

In this how-to I'll be walking through the process of creating a contact form in SvelteKit using Airtable for storing the submissions with no additional dependencies.

I got the inspiration for doing this when a saw a video on YouTube from WebJeda on SvelteKit Contact Form using Google Forms. Sharath's video is great but I'm not a fan of using Google products so thought I'd try the same approach with Airtable.

So, time for the standard preamble of the reasoning behind why a contact form on your site is a good thing; Having a contact form on your site is a great way to get people to get in touch with you whilst on your site (great explanation! Right? 😂). I'm not opposed to adding my email address to my website but some people prefer to contact you from the context of the site.

Ok, preamble done let's get to the actual content!

Create the project

I'll be doing this from scratch so you can follow along then implement what you need from this example into your own project.

I'll start with creating a new project in SvelteKit.

npm init svelte@next svelte-and-airtable-contact-form-example

I'll select the following options from the CLI:

✔ Which Svelte app template? › Skeleton project
✔ Use TypeScript? … No
✔ Add ESLint for code linting? … No
✔ Add Prettier for code formatting? … Yes
✔ Add Playwright for browser testing? … No

Then I'll follow the rest of the steps from the CLI output:

Next steps:
  1: cd svelte-and-airtable-contact-form-example
  2: npm install (or pnpm install, etc)
  3: git init && git add -A && git commit -m "Initial commit" # (optional)
  4: npm run dev -- --open

I use pnpm so will be using that in the terminal examples, you can use npm or yarn if you prefer. Live your life! 😁

Ok, now I have the project set up I can go about getting the backend set up with Airtable.

Set up Airtable

So, Airtable is like a hosted version of MS Excel, simply put, it's a database with a nice UI. If you don't have an Airtable account you can sign up over on the Airtable website.

I'll scroll to the bottom of the page and there's a '+ Add a workspace' option. CLick that and select 'Create workspace', I'll be prompted to give it a name I'll call it form-submissions, then I can 'Add a base'. Clicking 'Add a base' gives me the following screen:

From here I'll rename the 'Untitled Base' to contact-requests and 'Table 1' to submissions. I can now go through the fields on there and customise each field type by clicking on the small down arrow next to the field name.

In my example I'll add the following fields by renaming them and changing the types with the 'Customize field type' option.

'name' as a 'Single line text' field
'email' as a 'Email' field
'message' as a 'Long text' field

You can add or remove any additional fields you want to store in Airtable, you do you 😊.

Set up Svelte form

For the contact form I'll make a Svelte component, that can be used anywhere in the project so I'm not bound to having it in one place like a (https://mysite.com/contact) route.

I'll create the lib folder and the contact-form.svelte file via the terminal:

# create the directory/folder
mkdir src/lib
# create the Svelte component file
touch src/lib/contact-form.svelte

In the contact form component I'll create a simple form first, I'll share a full example later.

<form>
  <label for="name">
    <span>Name</span>
  </label>
  <input type="text" name="name" aria-label="name" placeholder="Enter your name" required />
  <label for="email">
    <span>Email</span>
  </label>
  <input type="email" name="email" aria-label="email" placeholder="bill@hotmail.com" required />
  <label for="message">
    <span>Message</span>
  </label>
  <textarea name="message" aria-label="name" placeholder="Message" required rows="3" />
  <input type="submit" />
</form>

Now I import the form for use in the project now, as there's only a home page (src/routes/index.svelte) at the moment I'll add it there.

<script>
  import ContactForm from '$lib/contact-form.svelte'
</script>

<h1>Welcome to SvelteKit</h1>
<p>
  Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the
  documentation
</p>

<ContactForm />

Now that I have the form sorted I'll need to capture the inputs to submit to Airtable.

To capture the form inputs I'll need to create a handleSubmit method in some <script> tags in the src/lib/contact-from.svelte component.

To handle the form data I'll create a new FormData() object and reference it with data.currentTarget. For now I'll console log out the form data to validate.

const handleSubmit = async data => {
  const formData = new FormData(data.currentTarget)

  console.log(formData.get('name'))
  console.log(formData.get('email'))
  console.log(formData.get('message'))
}

On the form I'll need to add in an event handler for on:submit using the handleSubmit method. Currently the default form action will cause a page refresh so along with the handleSubmit method I'll pipe in the Svelte preventDefault modifier.

<form on:submit|preventDefault={handleSubmit}>

Here's what the component looks like now:

<script>
  const handleSubmit = async data => {
    const formData = new FormData(data.currentTarget)

    console.log(formData.get('name'))
    console.log(formData.get('email'))
    console.log(formData.get('message'))
  }
</script>

<form on:submit|preventDefault="{handleSubmit}">
  <label for="name">
    <span>Name</span>
  </label>
  <input
    type="text"
    name="name"
    aria-label="name"
    placeholder="Enter your name"
    required
  />
  <label for="email">
    <span>Email</span>
  </label>
  <input
    type="email"
    name="email"
    aria-label="email"
    placeholder="bill@hotmail.com"
    required
  />
  <label for="message">
    <span>Message</span>
  </label>
  <textarea
    name="message"
    aria-label="name"
    placeholder="Message"
    required
    rows="3"
  />
  <input type="submit" />
</form>

Now, from the homepage I'll be able to add in some form values, click submit and see them logged out in the browser console!

Ok now I have the form ready to submit data to Airtable I'll need to create a SvelteKit endpoint to POST the data to Airtable.

Get Airtable API keys

I'll be POSTing the data to the Airtable REST API, to do this I'm going to need to reference the awesome Airtable documentation!

I can access it by clicking the 'HELP ?' link in the top right of the base page. Clicking it will pop out the help panel and at the very bottom of the panel is the '<> API Dcoumentaion' link.

Clicking that will take me to the documentation for that base! What I'm interested in here is the 'Create records' section. I'll scroll down to that on the page.

So at the moment this gives me the workspace ID appMdmn2bcQAUCeGb and has "Authorization: Bearer YOUR_API_KEY" as well. If I click on the 'show API key' in the top right hand corner it will show me the API key "Authorization: Bearer keybJWwl29RhmPEQh". I'll need this for POSTing the form data to Airtable.

Also note the "records" array doesn't give me a great deal of information as there's no data to display from my table.

What I'm going to do is go back to the table and add some dummy data first then go back to the API documentation. I'll hop on over to the table and add in some dummy data.

No I can go back to the API documentation page and hit refresh and I'll see the dummy data in the "records" array.

Why am I doing this? This is so I know the shape of the data that the API is expecting!

Now onto creating the endpoint in SvelteKit to submit the data to Airtable.

Set up SvelteKit endpoint

I'm going to create a contact-form folder and a index.json.js to go in there.

I'll do this with the following bash commands:

# create the endpoint folder
mkdir src/routes/contact-form
# create the endpoint index file
touch src/routes/contact-form/index.json.js

In the index.json.js file I'm going to create a post function that will accept a {request} object. The .json.js file notation may look a bit funky, this is letting SvelteKit know the return type of the data (JSON) from the endpoint.

From that request comming into the endpoint I'll be able to get the formData which needs to be submitted from the form to the endpoint!

I'll scaffold out the endpoint first, then go to the form to submit the data to the endpoint, first in src/routes/contact-form/index.json.js I'll add this:

export const post = async ({ request }) => {
  const fd = await request.formData()

  const name = fd.get('name')
  const email = fd.get('email')
  const message = fd.get('message')

  console.log('name:', name)
  console.log('email:', email)
  console.log('message:', message)

  return {
    status: 200,
    body: { message: 'success' },
  }
}

This is so I can log out the details from the submission and confirm they are being received by the endpoint.

Now in the contact form <script> tags I'll add in a request to the contact-form endpoint.

<script>
  const handleSubmit = async data => {
    const formData = new FormData(data.currentTarget)

    const res = await fetch('/contact-form.json', {
      method: 'POST',
      body: formData,
    })

    const { message } = await res.json()

    console.log(message)
  }
</script>

Here I'm making a request to the contact-form endpoint, defining the method as a POST and the body as the formData from the form.

This is to validate the data from the form is being passed to the endpoint, looking at the browser console and my terminal I can see that the formData is being logged out on the endpoint and the success message is being returned to the form!

Environment variables

So I'm not committing my AirTable API keys to the repo, I'm going to create a .env file in the root of the project:

# create the .env file
touch .env

Then I'll add in the base ID (workspace ID) and the authorisation bearer token:

VITE_AIRTABLE_BASE_ID=appMdmn2bcQAUCeGb
VITE_AIRTABLE_TOKEN=keybJWwl29RhmPEQh

These need to be accessed with Vite's import.meta syntax.

`POST` the data to Airtable

In my endpoint I'll remove the console.log's and replace them with the AIRTABLE_BASE_ID the AIRTABLE_TOKEN and I'll take the AIRTABLE_URL from the AirTable API documentation and replace the AIRTABLE_BASE_ID in the AIRTABLE_URL with a variable. This can be committed but I prefer to keep anything that can change to a minimum.

const AIRTABLE_BASE_ID = import.meta.env.VITE_AIRTABLE_BASE_ID
const AIRTABLE_TOKEN = import.meta.env.VITE_AIRTABLE_TOKEN
const AIRTABLE_URL = `https://api.airtable.com/v0/${AIRTABLE_BASE_ID}/submissions`

I'll take the shape of the data being expected from the API documentation and add it to a variable:

let data = {
  records: [
    {
      fields: {
        name,
        email,
        message,
      },
    },
  ],
}

The name, email and message variables taken from the fd object can be added directly to the data variable now. This is why I renamed the fields with lowercase characters 😊.

Then I'll create a fetch request to the AIRTABLE_URL endpoint, adding in the AIRTABLE_TOKEN as the Authorization header and specifying the content type as application/json and passing in the data object for the body of the request:

const res = await fetch(AIRTABLE_URL, {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${AIRTABLE_TOKEN}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})

I can now check that the request was successful from the from by checking the res.ok status in an if statement:

if (res.ok) {
  return {
    status: 200,
    body: {
      message: 'success',
    },
  }
} else {
  return {
    status: 404,
    body: {
      message: 'failed',
    },
  }
}

If you're not into code walls then scroll on! I'll share the source for all of this at the end of this post.

Anyway, if you're interested, here's what the full src/routes/contact-form/index.json.js file looks like now:

export const post = async ({ request }) => {
  const fd = await request.formData()

  const name = fd.get('name')
  const email = fd.get('email')
  const message = fd.get('message')

  const AIRTABLE_BASE_ID = import.meta.env.VITE_AIRTABLE_BASE_ID
  const AIRTABLE_TOKEN = import.meta.env.VITE_AIRTABLE_TOKEN
  const AIRTABLE_URL = `https://api.airtable.com/v0/${AIRTABLE_BASE_ID}/submissions`

  let data = {
    records: [
      {
        fields: {
          name,
          email,
          message,
        },
      },
    ],
  }
  const res = await fetch(AIRTABLE_URL, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${AIRTABLE_TOKEN}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })

  if (res.ok) {
    return {
      status: 200,
      body: {
        message: 'success',
      },
    }
  } else {
    return {
      status: 404,
      body: {
        message: 'failed',
      },
    }
  }
}

Sweet! So, I'll test this out now by adding in some form data to the form and clicking the submit button!

Now if I go over to the AirTable submissions table I can see that the form data I added is here! AWESOME!

Managing form state

So I've submitted the data to the Airtable API, now I need to manage the form state, as it is at the moment the form data is still there after I click the submit button.

I can use the message I get back from the endpoint to control the form. So I'll create a variable for the endpoint status.

I'll create a submissionStatus variable to control the form state outside of the handleSubmit function, then inside of the handleSubmit function I'll set the submissionStatus to submitting then I know that the POST has started.

In the form I can use the Svelte if expression for the various messages that can be returned from the endpoint.

{#if submissionStatus === 'submitting'}
  <p>Submitting...</p>
{:else if submissionStatus === 'failed'}
  <p>Submission failed.</p>
{:else if submissionStatus === 'success'}
  <p>Submission success.</p>
{:else}
  <!-- form goes here! -->
{/if}

Another code wall warning! Here's the full src/routes/contact-form/index.svelte file:

<script>
  let submissionStatus = ''
  const handleSubmit = async data => {
    submissionStatus = 'submitting'
    const formData = new FormData(data.currentTarget)

    const res = await fetch('/contact-form.json', {
      method: 'POST',
      body: formData,
    })

    const { message } = await res.json()
    submissionStatus = message
  }
</script>

{#if submissionStatus === 'submitting'}
  <p>Submitting...</p>
{:else if submissionStatus === 'failed'}
  <p>Submission failed.</p>
{:else if submissionStatus === 'success'}
  <p>Submission success.</p>
{:else}
  <form on:submit|preventDefault={handleSubmit}>
    <label for="name">
      <span>Name</span>
    </label>
    <input
      type="text"
      name="name"
      aria-label="name"
      placeholder="Enter your name"
      required
    />
    <label for="email">
      <span>Email</span>
    </label>
    <input
      type="email"
      name="email"
      aria-label="email"
      placeholder="bill@hotmail.com"
      required
    />
    <label for="message">
      <span>Message</span>
    </label>
    <textarea
      name="message"
      aria-label="name"
      placeholder="Message"
      required
      rows="3"
    />
    <input type="submit" />
  </form>
{/if}

Now I can control the form state from the submissionStatus variable and give a useful message back to the user on the status of the submission!

Awesome, right?

But wait! There's more!

Automation

So, let's think about this now; I now have another thing I need to keep tabs on for message submissions, right?

WRONG! Airtable has an awesome integrations feature that you can do loads of things with.

For this example though all I need really is to be notified when there's a new submission.

So, I'll set that up now!

Back on over on the Airtable workspace much like where the help panel link was there's also a link for 'Automations' in the top right.

Clicking on that will pop out the automations panel, on that I'll select the 'Create a custom automation' link.

That opens the automation flow.

In here I can change the automation name by clicking on it to something like submission-email-automation, note the default state is off.

From hereI can add a trigger by clicking '+ Add trigger' and selecting 'When record is created'. The 'Run actions' panel then appears and I can select '+ Add action' and select 'Send email'.

I'll select the 'Send email' option.

You may have noticed the exclamation mark next to 'When a record is created'. If I hover the mouse over it, it will expand to say 'Fix configuration'. Clicking that pops open a configuration option in the side panel to select the table. I'll pick the submissions table.

Then there'll be an exclamation next to the 'Send an email' option. Hovering over that with the mouse gives the same 'Fix configuration' message. Clicking that will open the configuration panel for email!

In that panel I can add in the email address I want the submission sent to along with the subject line.

If I scroll down a little there's an option for the message, by clicking the blue + button I can add in the message.

There's one option to 'Record (from Step 1: When a record is created), clicking on 'Continue' will bring up the available properties. I'm going to select to inset name, email, and message.

Next I can scroll down to the 'Testing' section, expand that and select 'Test action'. I'll select to 'Run tests' and wait for the result.

I get a successful result, so, now I can change the state of the automation to 'On' and I'm done!

Now anytime a submission is made I'll get an email sent to my inbox!

Conclusion

I've gone and created a simple form that will collect data from the user of the site that will then post that data to an endpoint. When someone submits a message via the form I'll receive an email so I can action it without having to keep checking on the Airtable table.

You can check out the demo project and code for this post with some minimal styles added over on GitHub.

If you found this post useful, consider sharing it on Twitter with the button, thanks!

How to Set Up Svelte with Tailwind CSS

Scott Spence — Sun, 10 Apr 2022 07:53:14 +0000

How to set up Tailwind CSS with Svelte, two examples here of adding Tailwind CSS to a new Svelte project.

ℹ️ Please note at the time of writing SvelteKit is not at v1 but this will be the default way to create new Svelte projects when SvelteKit goes to v1.

I'll go through the setup on the default project from each of the init commands with both Vite and Svelte. I'll then reuse the styles on the index page of both projects to convert them to use Tailwind.

Both examples will use the Svelte Add utility and I'll go through converting each one from the Svelte scoped CSS over to Tailwind.

Prerequisites

If you're following along and you have found this via a search I'll presume you already have a development environment set up with Node (v14+) and a terminal.

With SvelteKit `npm init svelte@next`

I'll start up a new Svelte project is with the npm init svelte@next command and give it a name tailwind-svelte.

npm init svelte@next tailwind-svelte

I'll choose the following options from the CLI:

✔ Which Svelte app template? › SvelteKit demo app
✔ Use TypeScript? › No
✔ Add ESLint for code linting? › No
✔ Add Prettier for code formatting? › Yes

I'll follow the instructions from the CLI to change directory into the project and install the dependencies and initialise git to help highlight the changes:

cd tailwind-svelte
npm install # (or pnpm install, etc)
git init && git add -A && git commit -m "Initial commit" # (optional step)
npm run dev -- --open

Once the dev server has run the project I'll do a quick check that the demo app is functioning as expected then I can add in Tailwind with Svelte Add:

# kill the dev server if it's still running with Ctrl+c
npx svelte-add@latest tailwindcss
# install the newly configured dependencies
npm i

After running the install command my source control side panel in VS Code looks like this.

That's it! All the configuration needed to use Tailwind in a Svelte project! If that's all you needed to know then cool! The rest of this will be me replicating the existing styles with Tailwind classes.

Now to start with removing the styles and use Tailwind!

ℹ️ As I mentioned at the beginning I'll only be applying Tailwind classes to the index page here which is (src/routes.index.svelte).

I'll start by removing the <style> for the index page, here's the git diff on the src/routes.index.svelte file:

<script context="module">
  export const prerender = true
</script>

<script>
  import Counter from '$lib/Counter.svelte'
</script>

<svelte:head>
  <title>Home</title>
</svelte:head>

<section>
  <h1>
    <div class="welcome">
      <picture>
        <source srcset="svelte-welcome.webp" type="image/webp" />
        <img src="svelte-welcome.png" alt="Welcome" />
      </picture>
    </div>

    to your new<br />SvelteKit app
  </h1>

  <h2>
    try editing <strong>src/routes/index.svelte</strong>
  </h2>

  <Counter />
</section>

-<style>
-  section {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex: 1;
-  }
-
-  h1 {
-    width: 100%;
-  }
-
-  .welcome {
-    position: relative;
-    width: 100%;
-    height: 0;
-    padding: 0 0 calc(100% * 495 / 2048) 0;
-  }
-
-  .welcome img {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    display: block;
-  }
-</style>

So the whole bottom section for the <style> tags removed as I'll be adding the Tailwind classes to the HTML elements.

To recreate the <section> classes I've added the git diff here:

+<section class="flex flex-col justify-center items-center flex-1">
+  <h1 class="w-full">
+    <div class="relative w-full pb-[calc(100% * 495 / 2048)]">
      <picture>
        <source srcset="svelte-welcome.webp" type="image/webp" />
        <img src="svelte-welcome.png" alt="Welcome" />
      </picture>
    </div>

    to your new<br />SvelteKit app
  </h1>

  <h2>
    try editing <strong>src/routes/index.svelte</strong>
  </h2>

  <Counter />
</section>

That's it for this file, if you want to tackle the rest of the project take special note of the src/app.css file, there are a lot of global styles are defined.

Moving onto doing it with Vite!

With SvelteKit `npm init vite@latest`

Same process now with the Vite CLI, I'll start with the npm init vite@next command and give it a name vite-tailwind-svelte.

npm init svelte@next vite-tailwind-svelte

I'll choose the following options from the CLI:

? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla
    vue
    react
    preact
    lit
❯   svelte

Then svelte.

? Select a variant: › - Use arrow-keys. Return to submit.
❯   svelte
    svelte-ts

The instructions from the Vite CLI are pretty much the same as the Svelte one:

Done. Now run:

  cd vite-tailwind-svelte
  npm install
  npm run dev

Once I've checked the project is running with no issues I'll initialise git to highlight changes in the code:

git init && git add -A && git commit -m "Initial commit"

Now time to add in Tailwind with Svelte Add:

# kill the dev server if it's still running with Ctrl+c
npx svelte-add@latest tailwindcss
# install the newly configured dependencies
npm i

Now I can make the changes in the index page which in this project is located src/App.svelte.

Again removing the <style> from the page, here's the git diff of that:

<script>
  import logo from './assets/svelte.png'
  import Counter from './lib/Counter.svelte'
</script>

<main>
  <img src={logo} alt="Svelte Logo" />
  <h1>Hello world!</h1>

  <Counter />

  <p>
    Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
    apps.
  </p>

  <p>
    Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit</a> for
    the officially supported framework, also powered by Vite!
  </p>
</main>

-<style>
-  :root {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  }
-
-  main {
-    text-align: center;
-    padding: 1em;
-    margin: 0 auto;
-  }
-
-  img {
-    height: 16rem;
-    width: 16rem;
-  }
-
-  h1 {
-    color: #ff3e00;
-    text-transform: uppercase;
-    font-size: 4rem;
-    font-weight: 100;
-    line-height: 1.1;
-    margin: 2rem auto;
-    max-width: 14rem;
-  }
-
-  p {
-    max-width: 14rem;
-    margin: 1rem auto;
-    line-height: 1.35;
-  }
-
-  @media (min-width: 480px) {
-    h1 {
-      max-width: none;
-    }
-
-    p {
-      max-width: none;
-    }
-  }
-</style>

Then adding in the Tailwind classes to the HTML elements:

<script>
  import logo from "./assets/svelte.png";
  import Counter from "./lib/Counter.svelte";
</script>

+<main class="m-auto text-center p-4">
+  <img class="m-auto h-64 w-64" src={logo} alt="Svelte Logo" />
+  <h1
+    class="font-thin mx-auto max-w-none my-8 text-[#ff3e00] text-6xl uppercase md:max-w-56 md:leading-5"
+  >
    Hello world!
  </h1>

  <Counter />

+  <p class="mx-auto max-w-none my-4 max-w-56 md:leading-5">
    Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
    apps.
  </p>

+  <p class="mx-auto max-w-none my-4 max-w-56 md:leading-5">
    Check out <a
+      class="underline underline-dark-500"
      href="https://github.com/sveltejs/kit#readme">SvelteKit</a
    > for the officially supported framework, also powered by Vite!
  </p>
</main>

Done.

Conclusion

I've created a couple of example projects using the npm init command for both Vite and Svelte. Added in Tailwind support using Svelte Add and replaced the index page styles on each with Tailwind styles.

Make a URL Shortener with SvelteKit

Scott Spence — Mon, 04 Apr 2022 17:16:58 +0000

URL shorteners, use them for when you want to share an easy to remember link. You can use a service like Bitly or TinyURL or any of the other ones out there already, or you could make it something you'd want to use and have a bit more of a connection to it by making your own!

In the past I've made a personal URL shorteners with a Netlify _redirects file and with a Vercel vercel.json file. In this post I'm going to make a URL shortener with SvelteKit.

I will use a SvelteKit endpoint to redirect the requests made to it. This will redirect the source URL to the target or destination URL.

An example could be the URL given to this project, say https://svort.li. anything after the TLD (.li) will be the source so https://svort.li/me will be redirected to the destination URL for that source https://scottspence.com.

In the previous two projects I made there wasn't anything in the way of a front-end framework as they were just configuration files to do the redirects on the server.

This is still pretty much the same as it will be taking an incoming request on the server (in the SvelteKit endpoint) and redirecting it.

Setup the project

I'll scaffold out a skeleton SvelteKit using the following command:

npm init svelte@next svort-urls

I'll follow the prompts, I'll be yes to all the prompts there. Which are.

? Which Svelte app template? › - Use arrow-keys. Return to submit.
    SvelteKit demo app
❯   Skeleton project

✔ Which Svelte app template? › Skeleton project
✔ Use TypeScript? … Yes
✔ Add ESLint for code linting? … Yes
✔ Add Prettier for code formatting? … Yes
✔ Add Playwright for browser testing? … Yes

I'm not going to be covering browser testing in this post, but it's nice to have the config there if you need it.😊

Create the endpoint

In the routes folder I'll create a new [slug].ts file.

touch src/routes/'[slug]'.ts

The [slug].ts file is an endpoint, a HTTP endpoint in SvelteKit you can use HTTP methods in endpoints. So, if I want to GET some data in a route I can access it via these special SvelteKit files.

In this case I'm using a GET method so the source can be redirected to the destination.

export const get = async () => {
  return {
    headers: { Location: '/' },
    status: 301,
  }
}

This will accept anything after root path (/) and redirect it at the moment back to the homepage /.

So going to localhost:3000/me will redirect to localhost:3000/.

That is pretty much it!

For the list of links I'll be using a local config file, but you can use something like a CMS or a database to control this.

Add source and destination URLs

I'm going to add the source and destination URLs to a config file. In SvelteKit the place for this would be in a lib folder.

# create the lib folder
mkdir src/lib
# create a file for the urls
touch src/lib/urls-list.ts

In the urls-list.ts file I'll add the source and destination URLs I want, I'll add some example one here.

export const urls = [
  {
    source: '/me',
    destination: 'https://scottspence.com',
  },
  {
    source: '/twitter',
    destination: 'https://twitter.com/spences10',
  },
  {
    source: '/git',
    destination: 'https://github.com/spences10',
  },
]

Redirect to the destination URL

With my list of short links in place, I can use them in the [slug].ts endpoint. so going to localhost:3000/me I will now want redirect to https://scottspence.com.

I'll need a way to know what the source URL is in the endpoint so I can destructure that out of the context passed tp the endpoint.

Let's take a quick look at what we get in the context (or ctx) object.

export const get = async ctx => {
  console.log(ctx)
  return {
    headers: { Location: '/' },
    status: 301,
  }
}

So now if I navigate to localhost:3000/something I'll see the following output in the terminal:

{
  request: Request {
    size: 0,
    follow: 20,
    compress: true,
    counter: 0,
    agent: undefined,
    highWaterMark: 16384,
    insecureHTTPParser: false,
    [Symbol(Body internals)]: {
      body: null,
      stream: null,
      boundary: null,
      disturbed: false,
      error: null
    },
    [Symbol(Request internals)]: {
      method: 'GET',
      redirect: 'follow',
      headers: [Object],
      parsedURL: [URL],
      signal: null,
      referrer: undefined,
      referrerPolicy: ''
    }
  },
  url: URL {
    href: 'http://localhost:3000/something',
    origin: 'http://localhost:3000',
    protocol: 'http:',
    username: '',
    password: '',
    host: 'localhost:3000',
    hostname: 'localhost',
    port: '3000',
    pathname: '/something',
    search: '',
    searchParams: URLSearchParams {},
    hash: ''
  },
  params: { slug: 'something' },
  locals: {},
  platform: undefined
}

So what I'm interested in here is the url object, more specifically the url.pathname. This is going to help me identify where I want the request to be redirected to.

url: URL {
  href: 'http://localhost:3000/something',
  origin: 'http://localhost:3000',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'localhost:3000',
  hostname: 'localhost',
  port: '3000',
  pathname: '/something',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}

I could also use params.slug object for this as well.

params: { slug: 'something' },

In this example I'll be using the url object. So I'll destructure the url object out of the context object and import the urls-list file.

import { urls } from '$lib/urls-list'

export const get = async ({ url }) => {
  return {
    headers: { Location: '/' },
    status: 301,
  }
}

Then I can get a redirect out of the urls array. I'll declare this this as a [redirect] variable.

So I'll see what I get if I log out the contents of [redirect] now, I'm going to want to filter for anything that matches the url.pathname from urls-list file, so for now I'll console.log out the results:

import { urls } from '$lib/urls-list'

export const get = async ({ url }) => {
  const [redirect] = urls.filter(item => {
    console.log(item)
  })

  return {
    headers: { Location: '/' },
    status: 301,
  }
}

Now if I navigate to localhost:3000/something I'll see the following in the terminal:

{ source: '/me', destination: 'https://scottspence.com' }
{ source: '/twitter', destination: 'https://twitter.com/spences10' }
{ source: '/git', destination: 'https://github.com/spences10' }

Sweet! So now I can use some logic to determine if the url.pathname matches what's in the urls array.

So, with the item I'm using in the filter I can compare against the url.pathname. If there's a valid match I can get the destination from the urls array.

import { urls } from '$lib/urls-list'

export const get = async ({ url }) => {
  const [redirect] = urls.filter(item => item.source === url.pathname)

  if (redirect) {
    return {
      headers: { Location: redirect.destination },
      status: 301,
    }
  } else if (!redirect && url.pathname.length > 1) {
    return {
      headers: { Location: '/' },
      status: 301,
    }
  } else return {}
}

I can use an if to check for a valid match. If there's a valid match then set the headers.Location to the destination from the urls array.

If it doesn't match I'll redirect to the homepage (/) and have a final catch to return an empty object.

Conclusion

That's it! I've created a simple redirect in SvelteKit that will take an incoming URL and redirect to a destination URL.

I can now use the homepage as a landing page for my short URLs so anyone coming to the site can check out any of the available links.

Further exploration

This has been a bit of an eye opener for me so I think I'm going to experiment with using something in the way of a backend. Undecided yet but I could make this something for users and not just a personal project for me. This would involve authentication and something to store the user data i.e. a CMS (more than likely GraphCMS) or a database of some sort, I've not checked out planet scale yet so could take a look at that.

Acknowledgements

Thanks to Rainlife over on the Svelte Discord for suggesting the use of HEAD (as I'm only interested in the header of the request). Also thanks to Jordan (also on the Svelte Discord) for giving me this handy MDN link for Redirections in HTTP.

Also Dana Woodman on Dev.to for using redirects in SvelteKit endpoints. I was using redirect instead of setting the headers.

Use Google Chrome in Ubuntu on Windows Subsystem Linux

Scott Spence — Mon, 17 Jan 2022 20:36:19 +0000

This is a specific usecase for installing Google Chrome in Ubuntu on WSL.

On Ubuntu, Snap is the preferred method to install Chromium and
although snap is on the WSL image you get from the Microsoft store
it's not functional. There is a solution untested by me that may
work.

There's a nice post from Greg Brisebois on getting set up for
Selenium in WSL and this is partly pulled from there, if you want to use it for Selenium then check out his post.

ℹ Prerequisites for this is that you are already set up to use GUIs on WSL, if you've not done that then check out this post.

Here's a video detailing the process:

Dependencies, make sure you're up to date first:

sudo apt update && sudo apt -y upgrade && sudo apt -y autoremove

Download and install Chrome:

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt -y install ./google-chrome-stable_current_amd64.deb

Check that it's installed ok:

google-chrome --version

Done! Now it can be used either from the command line google-chrome and with CLI tools like Cypress, Playwright, Puppeteer etc.

There's also a really detailed post on getting Chromium set up on Linux from Addictive Tips.

SvelteKit .env secrets

Scott Spence — Wed, 12 Jan 2022 17:28:44 +0000

So SvelteKit is super awesome n' all and the best thing ever but have
you ever tried to use a .env secret that you didn't want exposed on
the client?

SvelteKit uses Vite and it has a specific way to reference Env
Variables and Modes, you reference a .env variable with
import.meta.env.VITE_NAME_OF_VARIABLE the VITE_* prefix means in
SvelteKit it makes that variable available on the client.

What if you have a secret key?

So if you want a secret key that's not exposed to the client then,
what? Remove the VITE_* prefix? Well, no, so, how to have secrets??

The answer is don't use Vite and instead use something to load the
variables from the .env file.

Use env-cmd or dotenv or whatever you want to use to ensure the
runtime process.env is populated in dev.

Example

Here I have defined my .env file at the root of my project:

VITE_CLIENT_VARIABLE=wheeeeeeeee
SUPER_SECRET_SECRET=shhhhhh

Then I've created a secret.js file to access my secret:

export const API_URL = process.env['SUPER_SECRET_SECRET']

Then I've added env-cmd to my dev script in my package.json so
that process.env has the super secret secret populated:

"scripts": {
  "dev": "env-cmd svelte-kit dev",

Now I can access my super secret secret and have client side variables
too.

Update

There's annother option to use which I found on the Blog by
Hideckies in their example it's a svelte.config.js change:

const config = {
  kit: {
    // ...
    vite: {
      define: {
        'process.env': process.env,
      },
    },
  },
}

export default config

Check out the post linked earlier for more info!

Thanks!

A kind thank you to Discord users Xyo and especially saikatdas0790
on the Svelte Discord svelte-kit channel for helping me out with
this!

Make an Email Form Submission with SvelteKit

Scott Spence — Wed, 08 Sep 2021 19:33:22 +0000

Bit of preamble before I kick this off, subscribers to my newsletter will know that I've been through a couple of platforms now (Zoho, SendGrid, Revue then Substack). I settled on Substack because of the editing experience what I didn't want to settle on was the janky embed you get with Substack.

Depending on what theme you're using this can potentially be acceptable, probably not though!

I did get my own custom form working with Substack locally. The Tl;Dr is I popped open the network tab in the browser and made a note of where the submission was going and checked out the payload so I could try make a similar submission with Insomnia. This worked locally! But on deploying to Vercel the submit wasn't working and I went back to using the Substack embed. Sad times!

Revue has an open API

Then I remembered that Revue had an open API with docs and everything so I created an account (I deleted my old one) and used Insomnia to try out some of the API methods, it worked locally with Insomnia!

So I swapped out the Substack endpoint with the Revue one deployed it to Vercel and tried it out. I could add new subscribers to my Revue account! Joy! Ok onto the how to!

Testing the Revue endpoint

Because Revue has an open API that means there's ✨documentation✨

If you're following along you will need your Revue API key, you can find it at the bottom of the integrations page.

Scroll to the bottom and look for something like this:

Your API key is 2f09ecd9-6a64-4d5b-9c77-a5587cedbcf7.

Usage of the API must follow Revue’s Terms of Service and Privacy Policy.

⚠️ Usual warning about exposing API keys here, there doesn't seem to be a way to generate a new Revue API key, so if it's leaked somewhere I'm not sure how you'd go about revoking it.

Using Insomnia the first thing I did was check out the POST method with https://www.getrevue.co/api/v2/subscribers the request body was this:

{
  "email": "spences10apps+test@gmail.com",
  "first_name": "",
  "last_name": "",
  "double_opt_in": false
}

As a side note you can add a + to the end of an email address in Gmail to give it a unique name. So in the case of the example +test is what I'm using as a way to identify the email address.

The Bearer token looked like this Token <your-api-key>.

Hit Send button and wait for the response! I get a 200 OK with the preview reply looking something like this:

{
  "id": 5654821249,
  "list_id": 216568,
  "email": "spences10apps+test@gmail.com",
  "first_name": "",
  "last_name": "",
  "last_changed": "2021-08-31T20:10:24.197Z"
}

Alright, sweet! I can now add a subscriber to my Revue account via the Revue API!

Setup the project

In this example like the last couple of examples I've done I'll be using Matt Jennings' SvelteKit blog template; it's what this site is based off of.

ℹ️ This is for a SvelteKit project hosted on Vercel, if you're following along then this is what I'm doing:

git clone git@github.com:mattjennings/sveltekit-blog-template.git
cd sveltekit-blog-template
npm i

Matt's example uses the SvelteKit adapter-static and because I'm deploying to Vercel I'll need to install adapter-vercel and add that in the svelte.config.js:

# uninstall adapter-static
npm un @sveltejs/adapter-static
# install adapter-vercel
npm i @sveltejs/adapter-vercel@next

Then it's a case of swapping out the first line here adapter-static with adapter-vercel:

import adapter from '@sveltejs/adapter-vercel'
import { mdsvex } from 'mdsvex'
import preprocess from 'svelte-preprocess'
import mdsvexConfig from './mdsvex.config.js'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  extensions: ['.svelte', ...mdsvexConfig.extensions],
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: [
    mdsvex(mdsvexConfig),
    [
      preprocess({
        postcss: true,
      }),
    ],
  ],

  kit: {
    target: '#svelte',
    adapter: adapter(),
  },
}

export default config
// Workaround until SvelteKit uses Vite 2.3.8 (and it's confirmed to fix the Tailwind JIT problem)
const mode = process.env.NODE_ENV
const dev = mode === 'development'
process.env.TAILWIND_MODE = dev ? 'watch' : 'build'

The rest of the config here isn't really pertenant, what matters is that I have swapped out adapter-static with adapter-vercel I've literally copied the code of what I'm working on.

Setting up environment variables

Because I'm going to be using an API key I don't want exposed there's a few things I'll need to do!

First is to add .env to the .gitignore file. For some reason this isn't in the default skeleton you make with npm init svelte@next project so I'll be adding .env to the .gitignore file. I'll be doing this via the terminal, you can edit the file manually if you like:

echo .env >> .gitignore

SvelteKit uses Vite and you can prefix you environment variables with VITE_ so they're available to the client (the browser) this also means that they can be seen from the client.

Although the code for an endpoint runs on the server and adding the VITE_ means that you can access the variable in development mode it shouldn't be exposed to the client but I prefer to use process.env to access the variables.

I've made a short post on how to use .env secrets in SvelteKit if you need a bit more detail on that.

I'm going to install env-cmd and add that to the dev script, first up install the package:

npm i -D env-cmd

Then add it to the dev script:

"scripts": {
  "dev": "env-cmd svelte-kit dev",

No I can access environment variables in development mode.

Setting up the endpoint

Now I'll need to set up the endpoint to submit the email to the Revue API. I'll do this in the terminal:

# make the directory
mkdir src/routes/email-submit
# create the file
touch src/routes/email-submit/index.json.js

Now for the endpoint post function!

Now I can scaffold ou the function to submit the email to the Revue API.

For now, to test it's worked I'll hardcode in the email address to the POST body, then I'll build on that once I've validated it's working.

export async function post() {
  const REVUE_API_KEY = process.env['REVUE_API_KEY']
  try {
    const res = await fetch('https://www.getrevue.co/api/v2/subscribers', {
      method: 'POST',
      headers: {
        Authorization: `Token ${REVUE_API_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: 'spences10apps+test@gmail.com',
        first_name: '',
        last_name: '',
        double_opt_in: false,
      }),
    })
    if (res.ok) {
      return {
        status: 200,
        body: JSON.stringify({
          message: 'email sent!',
        }),
      }
    }
    if (res.status !== 200) {
      return {
        status: 400,
        body: JSON.stringify({
          message: 'bad request',
        }),
      }
    }
  } catch (error) {
    return {
      status: 500,
      body: JSON.stringify({
        message: 'something went wrong with the email submit!',
      }),
    }
  }
}

Nice big wall of text! Like that? Apologies, you could just remove the error checks and YOLO it if you like, I'm not your mum! 😂

So everything is wrapped in a try block and if there's an bad request made to the Revue API then that'll be caught and a response of bad request given.

There's a final catch if the Revue request fails as well.

ℹ️ One thing to note is that I'm not asking for a first or last name and that I'm not requiring users to double opt in (i.e. reply to another email to say yes sign me up to the list I've just subscribed to).

Note again, if you didn't catch it earlier, the email address is hardcoded in here:

body: JSON.stringify({
  email: 'spences10apps+test@gmail.com',
  first_name: '',
  last_name: '',
  double_opt_in: false,
})

I'll be changing that once I've validated the submit is working. I cover that in the Receive email in endpoint section.

If you want you can do what you like with these options, my aim is to remove as much friction as possible.

Sweet! Now that the endpoint is set up I can test it by submitting a request from a page.

Setting up the submit form

I'm going to create a sign up component and then use that on the index page of the project, first I'll create the component in the lib folder:

touch src/lib/components/submit.svelte

Then add the following script to the component:

<script>
  let email = ''
  let showMessage = false
  let responseMessage = ''

  async function submitForm() {
    const submit = await fetch('/email-submit.json', {
      method: 'POST',
      body: JSON.stringify({ email }),
    })
    const data = await submit.json()

    if (data.message === 'bad request') {
      showMessage = true
      responseMessage = `That looks like a bad request`
    }
    if (data.message === 'email sent!') {
      showMessage = true
      responseMessage = `Sweet! You're signed up!`
    }
    if (data.message === 'something went wrong with the email submit!') {
      showMessage = false
      // deal with failed response from server
    }
  }
</script>

So this is setting up the call to the endpoint using the browser fetch API to the endpoint /email-submit.json then setting the success variable if there's no issues.

In the body of the component I'll add the form and the submit button, the project uses Tailwind so I've added some minimal styles:

<div class="mb-10">
  {#if success}
    <div class="text-center">
      <h3 class="font-extrabold text-3xl">{responseMessage}</h3>
    </div>
  {:else}
    <div class="text-center">
      <h3 class="font-extrabold text-3xl">Sign up for the newsletter</h3>
      <form class="" on:submit|preventDefault={submitForm}>
        <label for="email" class="label">
          <span class="sr-only">Your Email</span>
        </label>
        <input id="email" aria-label="email" type="email" name="email" autocomplete="email" placeholder="your@email.com" required bind:value={email} />
        <input type="submit" />
      </form>
    </div>
  {/if}
</div>

The main part to note here is in the <form> element and the call to submitForm via on:submit|preventDefault={submitForm}. this is going to call the submitForm function defined in the <script> at the top of the component.

This is all wrapped in a Svelte {# if} directive so that there can be a message displayed with the showMessage variable to the user once they have submitted the form.

Test the submit

Time to add the sign up form to the index page of the project and hit submit!

I'll import the <Submit /> component into src/routes/index.svelte here's what the top of the file looks like for me:

<script>
  import ButtonLink from '$lib/components/ButtonLink.svelte'
  import Submit from '$lib/components/submit.svelte'
  import { name } from '$lib/info.js'
  import { format } from 'date-fns'

  export let posts
  export let page

  $: isFirstPage = page === 1
  $: hasNextPage = posts[posts.length - 1]?.previous
</script>

<svelte:head>
  <title>{name}</title>
</svelte:head>

<Submit />

<div class="flex flex-col flex-grow">
  <!-- rest of the code here -->

Now I can enter an email address and hit submit! It doesn't matter what the email is because it's hardcoded into the endpoint at the moment!

I'll hit submit and I'll go over to my Revue subscribers list and check to see if the email is there!

Sweet! Now I've validated the submit is working I can delete the subscriber from my subscribers list and go about having the endpoint receive what is submitted from the component!

Receive email in endpoint

Now all I need to do is add the the req parameter to the post function on the email-submit endpoint and pull out (destructure) the email from the req.body!

export async function post(req) {
  const { email } = JSON.parse(req.body)
  const REVUE_API_KEY = process.env['REVUE_API_KEY']

  try {
    const res = await fetch('https://www.getrevue.co/api/v2/subscribers', {
      method: 'POST',
      headers: {
        Authorization: `Token ${REVUE_API_KEY}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        email,
        first_name: '',
        last_name: '',
        double_opt_in: false
      })
    })
  // rest of the code unchanged

Test it's worked on Vercel

Ok, now time to test it's working when deployed to Vercel! I use the Vercel CLI so I can push this off from my terminal with once command vc and off it goes!

I've selected the default for all the CLI options, here's what I have:

➜ vc
Vercel CLI 23.0.1
? Set up and deploy “~/repos/svelte-kit-form-submission”? [Y/n] y
? Which scope do you want to deploy to? Scott Spence
? Link to existing project? [y/N] n
? What’s your project’s name? svelte-kit-form-submission
? In which directory is your code located? ./
Auto-detected Project Settings (SvelteKit):
- Build Command: `npm run build` or `svelte-kit build`
- Output Directory: public
- Development Command: svelte-kit dev --port $PORT
? Want to override the settings? [y/N] n

There is one issue however, currently there's no environment variable for the Revue api set up on Vercel, so if I go to the preview generated and try submit an email I'll get the bad response message!

From the Vercel project I'll navigate to Settings > Environment Variables and add in the REVUE_API_KEY name and value. Now I can run the Vercel CLI again and test the form again, wait for the submit then the Revue subscribers list again!

Success 🎉

Wrap up!

That's it, I've gone and added an email submit from to a site that uses the Revue API with SvelteKit endpoints!

I cann now use this pattern in other projects!

Make a Sitemap with SvelteKit

Scott Spence — Thu, 26 Aug 2021 18:48:12 +0000

If you want to rank on Google (and other search engines) you need to be able to tell the world what your site consists of. A sitemap is used by the Googlebot, BingBot, DuckDuckBot and other search engines to tell them what pages are available.

This guide will take a lot of the learnings from the post I wrote on Making an RSS Feed for your SvelteKit Project and expand on it for use as a sitemap.

So as with the RSS post I'll be using Matt Jennings' awesome SvelteKit blog template for this example.

If you haven't seen the last guide that's fine I'll include a lot of the steps in here so there's no need to cross reference.

Sitemap route

If you haven't done so already and want to follow along then clone the repo and install the dependencies and spin up the dev server, the default port is 3000:

# using SSH
git clone git@github.com:mattjennings/sveltekit-blog-template
# using HTTPS
git clone https://github.com/mattjennings/sveltekit-blog-template
cd sveltekit-blog-template
npm i
npm run dev

If I open up Matt's SvelteKit blog template in VS Code this is how it is structured:

sveltekit-blog-template/
├─ posts/
│ └─ getting-started/
│   └─ index.md
├─ src/
│ └─ lib/
│ └─ routes/
│ │ └─ posts/
│ │   └─ [slug].svelte/
│ │─ __layout.svelte/
│ └─ index.svelte/
...rest of the files

Currently it's an index page and a posts directory, the index page is the site homepage and the posts directory will take a slug that's passed to the [slug].svelte file (example getting-started) and turn that into localhost:3000/posts/getting-started.

A sitemap is generally located at the root level of a site, so in the case of my site it's https://scottspence.com/sitemap.xml.

I'll create the sitemap file as sitemap.xml.js in SvelteKit endpoints you can define the type of data you want to return, in this case it's XML.

I'll create the sitemap file via the terminal:

touch src/routes/sitemap.xml.js

If I go to localhost:3000/sitemap.xml I get a 404.

Now I need to create a get() function to return the sitemap XML and headers for the endpoint.

For now I'll put in some XML headings for the body, I'll move the XML out into it's own function later, for now this is just to get a bit of visual feedback:

export async function get() {
  const headers = {
    'Cache-Control': 'max-age=0, s-maxage=3600',
    'Content-Type': 'application/xml',
  }
  return {
    headers,
    body: `<?xml version="1.0" encoding="UTF-8" ?>
    <urlset
      xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:news="https://www.google.com/schemas/sitemap-news/0.9"
      xmlns:xhtml="https://www.w3.org/1999/xhtml"
      xmlns:mobile="https://www.google.com/schemas/sitemap-mobile/1.0"
      xmlns:image="https://www.google.com/schemas/sitemap-image/1.1"
      xmlns:video="https://www.google.com/schemas/sitemap-video/1.1"
    ></urlset>`,
  }
}

Going to localhost:3000/sitemap.xml now a get the beginnings of my sitemap XML feed.

In the headers I'm setting the expiration to an hour with s-maxage and for the body adding in the XML heading. You can check out the W3C Feed Validation Service for more detail on what's needed here.

The schemas (xmlns:news etc) are used to tell the search engines what type of data you're returning. I've used Josh Comeau's sitemap as an example here. You can check out Sitemaps XML format over on sitemaps.org for more information.

Now if I go check localhost:3000/rss.xml I get the beginning of my RSS feed.

Hardcoding pages into the sitemap

First up I'll tackle the first url which isn't going to change, the site URL.

In Matt's template there's an info.js file that contains the project name and website links. I'll import the website and use that.

import { website } from '$lib/info'

export async function get() {
  const headers = {
    'Cache-Control': 'max-age=0, s-maxage=3600',
    'Content-Type': 'application/xml',
  }
  return {
    headers,
    body: `<?xml version="1.0" encoding="UTF-8" ?>
    <urlset
      xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:news="https://www.google.com/schemas/sitemap-news/0.9"
      xmlns:xhtml="https://www.w3.org/1999/xhtml"
      xmlns:mobile="https://www.google.com/schemas/sitemap-mobile/1.0"
      xmlns:image="https://www.google.com/schemas/sitemap-image/1.1"
      xmlns:video="https://www.google.com/schemas/sitemap-video/1.1"
    >
      <url>
        <loc>${website}</loc>
        <changefreq>daily</changefreq>
        <priority>0.7</priority>
      </url>
    </urlset>`,
  }
}

That was straightforward enough, right? That's only one page though so the Googlebot isn't going to be doing much with that.

Adding posts to sitemap

Because the posts routes are dynamically generated I'll need to create a little helper function for the posts, I'll use a trimmed down version of what Matt uses in the homepage (src/routes/index.js) to get the posts.

I'll create a get-posts.js in the lib directory of the project:

# create the file
touch src/lib/get-posts.js

Here's what the function for getPosts looks like:

export async function getPosts() {
  const posts = await Object.entries(import.meta.globEager('/posts/**/*.md'))
    // get post metadata
    .map(([, post]) => post.metadata)
    // sort by date
    .sort((a, b) => (a.date < b.date ? 1 : -1))

  return posts
}

I can now import that into the sitemap.xml.js file so I can map over the posts returned from the getPosts function inside the XML markup using tags ${}.

Before I do that though I'll move the markup out into a function so it's not cluttering up the return of the get() function.

I can pass the posts from the getPosts() function into this, then I can map over each post and render out the markup for each one:

const sitemap = posts => `<?xml version="1.0" encoding="UTF-8" ?>
<urlset
  xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:news="https://www.google.com/schemas/sitemap-news/0.9"
  xmlns:xhtml="https://www.w3.org/1999/xhtml"
  xmlns:mobile="https://www.google.com/schemas/sitemap-mobile/1.0"
  xmlns:image="https://www.google.com/schemas/sitemap-image/1.1"
  xmlns:video="https://www.google.com/schemas/sitemap-video/1.1"
>
  <url>
    <loc>${website}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  ${posts
    .map(post =>
      post.isPrivate
        ? null
        : `
  <url>
    <loc>${website}/posts/${post.slug}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  `
    )
    .join('')}
</urlset>`

Now in the get function I'll pass the posts from the getPosts() into the sitemap function and use that for the body return of getPosts().

Here's the full file:

import { getPosts } from '$lib/get-posts'
import { website } from '$lib/info'

export async function get() {
  const posts = await getPosts()
  const body = sitemap(posts)

  const headers = {
    'Cache-Control': 'max-age=0, s-maxage=3600',
    'Content-Type': 'application/xml',
  }
  return {
    headers,
    body,
  }
}

const sitemap = posts => `<?xml version="1.0" encoding="UTF-8" ?>
<urlset
  xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:news="https://www.google.com/schemas/sitemap-news/0.9"
  xmlns:xhtml="https://www.w3.org/1999/xhtml"
  xmlns:mobile="https://www.google.com/schemas/sitemap-mobile/1.0"
  xmlns:image="https://www.google.com/schemas/sitemap-image/1.1"
  xmlns:video="https://www.google.com/schemas/sitemap-video/1.1"
>
  <url>
    <loc>${website}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  ${posts
    .map(post =>
      post.isPrivate
        ? null
        : `
  <url>
    <loc>${website}/posts/${post.slug}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  `
    )
    .join('')}
</urlset>`

Next steps from here

There's some aspects of this project that wont change very often, like the routes for the homepage, about page etc. I could hardcode these into the XML directly.

But rather than doing that I can add the pages to an array variable so that I can add any new pages that exist in the src/routes to it.

I can add any new pages to the array rather than creating a new <url> element for each new page that's added. Here's an example of how that may look:

import { getPosts } from '$lib/get-posts'
import { website } from '$lib/info'

export async function get() {
  const posts = await getPosts()
  const pages = [`about`, `newsletter`, `privacy-policy`]
  const body = sitemap(posts, pages)

  const headers = {
    'Cache-Control': 'max-age=0, s-maxage=3600',
    'Content-Type': 'application/xml',
  }
  return {
    headers,
    body,
  }
}

const sitemap = (posts, pages) => `<?xml version="1.0" encoding="UTF-8" ?>
<urlset
  xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:news="https://www.google.com/schemas/sitemap-news/0.9"
  xmlns:xhtml="https://www.w3.org/1999/xhtml"
  xmlns:mobile="https://www.google.com/schemas/sitemap-mobile/1.0"
  xmlns:image="https://www.google.com/schemas/sitemap-image/1.1"
  xmlns:video="https://www.google.com/schemas/sitemap-video/1.1"
>
  <url>
    <loc>${website}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  ${pages
    .map(
      page => `
  <url>
    <loc>${website}/${page}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  `
    )
    .join('')}
  ${posts
    .map(post =>
      post.isPrivate
        ? null
        : `
  <url>
    <loc>${website}/posts/${post.slug}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  `
    )
    .join('')}
</urlset>`

Conclusion

Alright, I've gone through and created a sitemap that contains all the pages on the project.

I hope this has given you enough information to get started with making your own sitemap on your SvelteKit projects.

Make an RSS Feed for your SvelteKit Project

Scott Spence — Thu, 26 Aug 2021 18:45:03 +0000

The indie web is alive and well and there are more and more people taking control and owning their online presence and also how they consume other content. One way to help consumers of your site know that there is new content available is by making your content available via an RSS feed.

I made an RSS feed for my blog using SvelteKit routes. I did this much like the Sitemap Generation for Dynamic Routes In NextJS with the Sanity Client post I did back in February.

RSS on `scottspence.com`

As I mentioned already as my blog is a SvelteKit project I can use the SvelteKit routing endpoints to define the data type I want returned from that endpoint.

RSS feeds are expected in XML format and I want my endpoint to be https://scottspence.com/rss.xml so I've defined a file in my routes folder called rss.xml.js this is located in the routes folder of the project, so the full path would be src/routes/rss.xml.js.

RSS route

For this guide I'll using the great template from Matt Jennings as an example of how to do it.

I'm using the template as it's the most basic example to use and there won't be any additional project specific routes that will need to be taken into account.

Let's take a quick look at how the project is structured:

sveltekit-blog-template/
├─ posts/
├─ src/
│ └─ lib/
│ └─ routes/
│ │ └─ posts/
│ │   └─ [slug].svelte/
│ │─ __layout.svelte/
│ └─ index.svelte/
...rest of the files

I've left some of the filing structure that isn't relevant right now.

For now I want to focus on the routes folder as this is where I'll be creating the RSS page.

Clone the project

Ok, let's get to work, I'll start by cloning the project and changing directory into the newly cloned project. Then I'll install the dependencies and run the dev server:

# using SSH
git clone git@github.com:mattjennings/sveltekit-blog-template
# using HTTPS
git clone https://github.com/mattjennings/sveltekit-blog-template
cd sveltekit-blog-template
npm i
npm run dev

Now Matt's awesome template is up and running on the default port on localhost:3000. If I go to localhost:3000/rss.xml I get a 404. This is because I've not made that route yet.

Add the RSS route

Now to create the endpoint for where the RSS feed will be located:

touch src/routes/rss.xml.js

Now if I go to localhost:3000/rss.xml I get a 404.

In the rss.xml.js file I'll create a get() function which will need to return the RSS XML and the headers for the endpoint, the XML is inside template literals so I can add in the dynamic data I want to return later in this post:

export async function get() {
  const headers = {
    'Cache-Control': 'max-age=0, s-maxage=3600',
    'Content-Type': 'application/xml',
  }
  return {
    headers,
    body: `<rss xmlns:dc="https://purl.org/dc/elements/1.1/" xmlns:content="https://purl.org/rss/1.0/modules/content/" xmlns:atom="https://www.w3.org/2005/Atom" version="2.0"></rss>`,
  }
}

Now if I go check localhost:3000/rss.xml I get the beginning of my RSS feed.

Add `<channel>` required elements

Now to add in the <channel> element with the required <title>, <link> and <description> elements. In Matt's template there's an info.js file that contains the project name and website links. I'll import these and hardcode in a description for now.

import { name, website } from '$lib/info'

export async function get() {
  const headers = {
    'Cache-Control': 'max-age=0, s-maxage=3600',
    'Content-Type': 'application/xml',
  }
  return {
    headers,
    body: `<rss xmlns:dc="https://purl.org/dc/elements/1.1/" xmlns:content="https://purl.org/rss/1.0/modules/content/" xmlns:atom="https://www.w3.org/2005/Atom" version="2.0">
      <channel>
        <title>${name}</title>
        <link>${website}</link>
        <description>A blog built with SvelteKit about tech and stuff!</description>
      </channel>
    </rss>`,
  }
}

Add posts for the RSS feed

Now I'm going to need to add the posts to the RSS feed. I'm going to copy the code used to source the posts from src/routes/index.svelte and add it to the src/lib folder as get-posts.js.

# create the file
touch src/lib/get-posts.js

The code for get posts is:

export async function getPosts() {
  const posts = await Object.entries(import.meta.globEager('/posts/**/*.md'))
    // get post metadata
    .map(([, post]) => post.metadata)
    // sort by date
    .sort((a, b) => (a.date < b.date ? 1 : -1))

  return posts
}

I'll now import that into the rss.xml.js file so I can map over the contents for each <item> in the RSS feed.

First up though, rather than have the return statement all cluttered up with the generated XML I'll break this into it's own function:

import { getPosts } from '$lib/get-posts'
import { name, website } from '$lib/info'

export async function get() {
  const posts = await getPosts()
  const body = xml(posts)

  const headers = {
    'Cache-Control': 'max-age=0, s-maxage=3600',
    'Content-Type': 'application/xml',
  }
  return {
    headers,
    body,
  }
}

const xml = posts => `<rss xmlns:dc="https://purl.org/dc/elements/1.1/" xmlns:content="https://purl.org/rss/1.0/modules/content/" xmlns:atom="https://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>${name}</title>
    <link>${website}</link>
    <description>A blog built with SvelteKit about tech and stuff!</description>
  </channel>
</rss>`

Now it's a case of mapping over the posts and creating the XML for each post in posts. I'll do that in the template using tags ${} and mapping over the posts variable returned from getPosts.

Here's the complete file:

import { getPosts } from '$lib/get-posts'
import { name, website } from '$lib/info'

export async function get() {
  const posts = await getPosts()
  const body = xml(posts)

  const headers = {
    'Cache-Control': 'max-age=0, s-maxage=3600',
    'Content-Type': 'application/xml',
  }
  return {
    headers,
    body,
  }
}

const xml = posts => `<rss xmlns:dc="https://purl.org/dc/elements/1.1/" xmlns:content="https://purl.org/rss/1.0/modules/content/" xmlns:atom="https://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>${name}</title>
    <link>${website}</link>
    <description>A blog built with SvelteKit about tech and stuff!</description>
    ${posts
      .map(
        post =>
          `
        <item>
          <title>${post.title}</title>
          <description>A blog built with SvelteKit about tech and stuff!</description>
          <link>${website}/posts/${post.slug}/</link>
          <pubDate>${new Date(post.date)}</pubDate>
          <content:encoded>${post.previewHtml} 
            <div style="margin-top: 50px; font-style: italic;">
              <strong>
                <a href="${website}/posts/${post.slug}">
                  Keep reading
                </a>
              </strong>  
            </div>
          </content:encoded>
        </item>
      `
      )
      .join('')}
  </channel>
</rss>`

You'll notice I've added some extra markup for <content:encoded> and this uses Matt's handy package remark-preview to allow me to add HTML to the RSS feed.

There's also a link to take the reader to the site's post via the post.slug with some inline styling.

Conclusion

Now if I go to localhost:3000/rss.xml I get a very reasonable RSS feed that can be used to syndicate to other sites and RSS readers.

Although this is a very specific example I hope it's helped you understand how you could do something similar with your own SvelteKit project.

Deploy Your Own Links Page with One Click

Scott Spence — Mon, 16 Aug 2021 09:07:38 +0000

Having one place for all your social links is big business! Services like Linktree, ContactInBio, LinkBook, etc all offer the same sort of service. One location for all your social links.

This is a nice project as a proof of concept to get you set up with your own socials links. I've made this in conjunction with Jamie Barton as a simple one click set up.

This was part inspired from a post from Avneesh Agarwal and from some work Jamie had done a while ago. Avneesh's post on Hashnode details making it with the NextJS framework.

This example is a full jamstack lightweight example using Handlebars.js and Tailwind CSS.

All you need to do is enter your details into the prompts provided. There's a choice of platforms Netlify or Vercel.

The one thing you'll need one of the following git hosting accounts: GitLab, GitHub, or BitBucket. I'm guessing if you're reading this then you have at least one of these already.

Deploy with Netlify

Click the Deploy to Netlify button to start the proces.

You'll be prompted to connect to GitHub, this will create a public repo for you.

Then it's a case of adding in your links and usernames for the different socials. Make sure to add full URLs i.e. https://www.youtube.com/scottspenceplease if you don't have one of the requested links add in none and it won't show up.

I've added in my links and usernames as an example here.

Clicking Save & Deploy will take you to the Netlify dashboard for the site.

Clicking on the production deploy section will take you to the published deploy.

Here you can click on the preview button to see the site.

Done, as an extra step you can configure your own domain.

Deploy with Vercel

Click the Deploy button to start the proces.

You'll be prompted to connect to GitHub, GitLab, or BitBucket.

You can give the repo a name, Vercel will create this repo for you. In my case not to cause any naming issues I'll call this one vercel-shortcuts then choose to create it as a private repo. Click the create button.

Skip the 'Create a Team' option!

Then in 'Configure Project' section much like the Netlify section I'll add in my links and usernames, here's mine as an example.

Click that 'Deploy' button.

Now I can click on the 'Go to Dashboard' button and visit the site.

Wrap!

That's it, now you can have your own social links page.

If you want to take it further you can add in your own socials, the code is available on Jamie's github here.

Thanks for reading!

SvelteKit Starter Blog with GraphCMS

Scott Spence — Wed, 02 Jun 2021 14:25:59 +0000

In this post, I'm going to detail setting up a starter blog using SvelteKit and GraphCMS. This will be a guide on creating a basic blog using SvelteKit and GraphCMS.

SvelteKit for the bleeding edge goodness that that brings and the GraphCMS starter blog so I'm up and running quickly with content that I can later build on when I want to add more content and functionality to the project.

If you prefer to just have the starter files you can get the repo here and if you only want to have a template to get started with then check out the Deploy button on the GitHub repo.

Prerequisites

There are a few things that you'll need if you're following along:

basic web development setup: node, terminal (bash, zsh, or fish), and a text editor (VSCode).
GitHub account

Create the back-end with GraphCMS

For this starter, I'll be using the predefined and pre-populated "Blog Starter" template available to you on your GraphCMS dashboard. The starter comes with a content schema already defined for you.

If you haven't signed up already and created a GraphCMS account you can create a free account.

On your GraphCMS dashboard select the "Blog Starter" template from the "Create a new project" section, you're then prompted to give it a name and description. I'll call my one "My Blog", pay attention to the "Include template content?" checkbox, in my case I'm going to leave this checked. I'll then select my region and "Create project".

I'm selecting the community pricing plan and I'll select "Invite later" for "Invite team members".

From the project dashboard, I can see from the quick start guide that the schema is already created and the API is accessible.

Clicking on the "Make your API accessible" section of the quick start guide I will be taken to the "API access" settings panel, from here I'm going to check the "Content from stage Published" checkbox and click "Save" so the API is publicly accessible.

Now, I have an accessible GraphQL endpoint to access the blog data from. Time to scaffold out the project to get the data.

Initialise the project with npm

For this example I'm using the npm init command for SvelteKit:

npm init svelte@next sveltekit-graphcms-starter-blog

I'm selecting Skeleton project, no TypeScript, ESLint and Prettier:

✔ Which Svelte app template? › Skeleton project
✔ Use TypeScript? … No
✔ Add ESLint for code linting? … Yes
✔ Add Prettier for code formatting? … Yes

Now I have the absolute bare-bones starter for a SvelteKit project.

Popping open VSCode in the project directory I can see what I have to work with:

# change directory
cd sveltekit-graphcms-starter-blog
# install dependencies
npm i
# open with VSCode
code .

The project outline looks a little like this:

sveltekit-graphcms-starter-blog/
├─ src/
│  ├─ routes
│  │  └─ index.svelte
│  ├─ app.html
│  └─ global.d.ts

Running npm run dev from the terminal will start the dev server on the default localhost:3000 you can edit this command to open the web browser on that port with some additional flags being passed to the npm run dev command:

# double dash -- to pass additional parameters
# --port or -p to specify the localhost port
# --open or -o to open the browser tab
npm run dev -- -o -p 3300

Get posts data from GraphCMS API

Cool, cool, cool, now to start getting the data from the API to display on the client.

If I pop open the API playground on my GraphCMS project, I can start shaping the data I want to get for the index page of my project.

I'll want to query all posts available and grab these fields to display on the index page:

query PostsIndex {
  posts {
    id
    title
    slug
    date
    excerpt
  }
}

I'm going to install graphql-request and graphql as dependencies so I can query the GraphCMS GraphQL API endpoint with the query I defined in the API playground!

npm i -D graphql-request graphql

I'm copying my Access URL endpoint to a .env file which can be accessed in Vite with import.meta.env.VITE_GRAPHCMS_URL. First up I'll create the file first, then add the variable to it with the accompanying Access URL:

# creathe the file
touch .env
# ignore the .env file in git
echo .env >> .gitignore
# add the environment variable to the .env file
echo VITE_GRAPHCMS_URL=https://myendpoint.com >> .env

In the src/routes/index.svelte file I'm using Svelte's script context="module" so that that I can get the posts from the GraphCMS endpoint ahead of time. That means it’s run when the page is loaded and the posts can be loaded ahead of the page being rendered on the screen.

This can be abstracted away later for now it's to see some results on the screen:

<script context="module">
  import { gql, GraphQLClient } from 'graphql-request'

  export async function load() {
    const graphcms = new GraphQLClient(
      import.meta.env.VITE_GRAPHCMS_URL,
      {
        headers: {},
      }
    )

    const query = gql`
      query PostsIndex {
        posts {
          id
          title
          slug
          date
          excerpt
        }
      }
    `

    const { posts } = await graphcms.request(query)

    return {
      props: {
        posts,
      },
    }
  }
</script>

<script>
  export let posts
</script>

<h1>GraphCMS starter blog</h1>
<ul>
  {#each posts as post}
  <li>
    <a href="/post/{post.slug}">{post.title}</a>
  </li>
  {/each}
</ul>

I'll quickly break down what's happening here, as I mentioned earlier the first section contained in the <script context="module"> block is being requested before the page renders and that returns props: { posts }.

The next section is accepting the posts as a prop to use them in the markup the {#each posts as post} block is looping through the posts props and rendering out a list item for each post.slug with the post.title.

Running the dev server will now give me a list of posts available:

Cool! Clicking one of the links will give me a 404 error though, next up I'll create a layout and an error page.

Create 404 page and layout

Adding a layout will mean certain elements will be available on each page load, like a navbar and footer:

# create the layout file
touch src/routes/__layout.svelte

For now, a super simple layout so that users can navigate back to the index page:

<nav>
  <a href="/">Home</a>
</nav>

<slot />

The <slot /> is the same as you would have in a React component that would wrap a children prop. Now everything in src/routes will have the same layout. As mentioned this is pretty simple but allows for styling of everything wrapped by the layout. Not mentioned styling yet, more on that soon(ish).

Now to the not found (404) page:

# create the layout file
touch src/routes/__error.svelte

Then to add some basic information so the user can see they've hit an undefined route:

<script context="module">
  export function load({ error, status }) {
    return {
      props: { error, status },
    }
  }
</script>

<script>
  export let error, status
</script>

<svelte:head>
  <title>{status}</title>
</svelte:head>

<h1>{status}: {error.message}</h1>

Clicking on any of the links on the index page will now use this error page. Next up, creating the pages for the blog posts.

You may have noticed <svelte:head> in there, that's to add amongst other things SEO information, I'll use that in the components from now on where applicable.

Creating routes for the blog posts

SvelteKit uses file-based routing much the same as in NextJS and Gatsby's File System Route API (and nowhere near as much of a mouth full!)

That's a fancy way of saying the URL path for each blog post is generated programmatically.

Create a [slug].svelte file and posts folder in the src directory:

mkdir src/routes/post/
# not the quotes around the path here 👇
touch 'src/routes/post/[slug].svelte'

In <script context="module"> pretty much the same query as before but this time for a single post and using the GraphQL post query from the GraphCMS endpoint.

To get the slug for the query I'm passing in the page context where I'm getting the slug from the page params:

<script context="module">
  import { gql, GraphQLClient } from 'graphql-request'

  export async function load(context) {
    const graphcms = new GraphQLClient(
      import.meta.env.VITE_GRAPHCMS_URL,
      {
        headers: {},
      }
    )

    const query = gql`
      query PostPageQuery($slug: String!) {
        post(where: { slug: $slug }) {
          title
          date
          content {
            html
          }
          tags
          author {
            id
            name
          }
        }
      }
    `

    const variables = {
      slug: context.page.params.slug,
    }

    const { post } = await graphcms.request(query, variables)

    return {
      props: {
        post,
      },
    }
  }
</script>

<script>
  export let post
</script>

<svelte:head>
  <title>{post.title}</title>
</svelte:head>

<h1>{post.title}</h1>
<p>{post.author.name}</p>
<p>{post.date}</p>
<p>{post.tags}</p>
{@html post.content.html}

Take note of the last line here where I’m using the Svelte @html tag, this renders content with HTML in it.

Now I have a functional blog, not pretty, but functional.

Deploy

Now to deploy this to Vercel! You're not bound to Vercel, you can use one of the SvelteKit adapters that are available.

npm i -D @sveltejs/adapter-vercel@next

Then I'll need to add that to the svelte.config file:

import vercel from '@sveltejs/adapter-vercel'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
    adapter: vercel(),
  },
}

export default config

Now to deploy to Vercel, I'll need the Vercel CLI installed, that's a global npm or Yarn install:

npm i -g vercel
# log into vercel
vc login

I'm prompted to verify the log in via email then I can use the CLI. I'll deploy with the vercel command from the terminal:

# run from the root of the project
vercel # or vc

I can go straight to production with this by using the --prod flag but before I do that I'll add the VITE_GRAPHCMS_URL env value to the setting panel on the Vercel project page for what I've just deployed.

In the settings page of the Project, there's a section for "Environment Variables", the URL will be specific to your username and project name, it should look something like this:

https://vercel.com/yourusername/your-project-name/settings/environment-variables

In the Vercel UI for the Environment Variables, I'll add in the VITE_GRAPHCMS_URL for the name and the GraphCMS API endpoint for the value.

Now I can build again this time with the --prod flag:

vc --prod

That's it, I now have a functional blog in production! If you want to go ahead and style it yourself go for it! If you need a bit of direction on that I got you too!

Style it!

Now time to make it not look like 💩!

I'll be using Tailwind for styling the project

Tailwind can be added to SvelteKit projects by using the svelte-add helper, there's loads to choose from in this case I'll be using it with JIT enabled:

# use svelte-add to install Tailwind
npx svelte-add tailwindcss --jit
# re-install dependencies
npm i

Tailwind will need the @tailwind directives so I'll create an app.css file in the src directory:

touch src/app.css

I'll add the base, components and utilities Tailwind directives to it:

@tailwind base;
@tailwind components;
@tailwind utilities;

Then I'll bring that into the layout, it could also be added directly to the src/app.html file as a link, in this instance I'll add it to the layout:

<script>
  import '../app.css'
</script>

<nav>
  <a href="/">Home</a>
</nav>

<slot />

Now onto adding the styles, I'm going to be using daisyUI which has a lot of pre-built components to use for scaffolding out a pretty decent UI quickly. I'm also going to use Tailwind Typography for styling the markdown.

npm i -D daisyui @tailwindcss/typography

Then add those to the Tailwind plugins array in the tailwind.config.cjs file:

module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui'), require('@tailwindcss/typography')],
}

Add nav component

I'm going to move the navigation out to its own component and import that into the layout, first up I'll create the lib folder, where component lives in SvelteKit:

mkdir src/lib
touch src/lib/nav.svelte

In the nav.svelte I'll add in one of the nav examples from daisyUI:

<div class="navbar mb-5 shadow-lg bg-neutral text-neutral-content">
  <div class="flex-none px-2 mx-2">
    <span class="text-lg font-bold">Starter Blog</span>
  </div>
  <div class="flex-1 px-2 mx-2">
    <div class="items-stretch hidden lg:flex">
      <a href="/" class="btn btn-ghost btn-sm rounded-btn">Home</a>
      <a href="/about" class="btn btn-ghost btn-sm rounded-btn"> About </a>
    </div>
  </div>
</div>

Add about page

There's an about page in the markup here so I'll quickly make an about page in src/routes/:

touch src/routes/about.svelte

I'll use one of the daisyUI hero components and leave the default Picsum image in there:

<div class="hero min-h-[90vh]" style='background-image: url("https://picsum.photos/id/1005/1600/1400");'>
  <div class="hero-overlay bg-opacity-60" />
  <div class="text-center hero-content text-neutral-content">
    <div class="max-w-md">
      <h1 class="mb-5 text-5xl font-bold">GraphCMS blog starter</h1>
      <p class="mb-5">GraphCMS blog starter built with SvelteKit, Tailwind and daisyUI</p>
    </div>
  </div>
</div>

Add nav to layout

I can now import the newly created nav into src/routes/__layout.svelte, I'll also add a basic container to wrap the slot:

<script>
  import Nav from '$lib/nav.svelte'
  import '../app.css'
</script>

<nav />

<div class="container max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
  <slot />
</div>

Style the index page

There's some additional fields I'm going to use from GraphCMS for a post image, here's what the GraphQL query looks like now:

query PostsIndex {
  posts {
    title
    slug
    date
    excerpt
    coverImage {
      fileName
      url
    }
  }
}

And I'm using that data in a daisyUI card component:

<h1 class="text-4xl font-semibold mb-7 text-gray-700">GraphCMS starter blog</h1>
<ul>
  <li>
    {#each posts as post}
    <div class="card text-center shadow-xl border mb-10">
      <figure class="px-10 pt-10">
        <img src="{post.coverImage.url}" alt="{post.coverImage.fileName}" class="rounded-xl" />
      </figure>
      <div class="card-body">
        <h2 class="card-title">{post.title}</h2>
        <p class="prose-lg">{post.excerpt}</p>
        <div class="justify-end card-actions">
          <a href="post/{post.slug}" class="btn btn-secondary">➜ {post.title}</a>
        </div>
      </div>
    </div>
    {/each}
  </li>
</ul>

Looking a bit better now!

Style the post (slug) page

Same with the post page I'v amended the GraphQL query to bring back some additional data for the author image and the post tags; Here's what the query looks like:

query PostPageQuery($slug: String!) {
  post(where: { slug: $slug }) {
    title
    date
    content {
      html
    }
    tags
    author {
      name
      title
      picture {
        fileName
        url
      }
    }
    coverImage {
      fileName
      url
    }
  }
}

I've added some Tailwind styles and brought in the author image. I'm also rendering out any tags if they're in the post data:

<h1 class="text-4xl font-semibold mb-7 text-gray-700">{post.title}</h1>
<a href="/" class="inline-flex items-center mb-6">
  <img alt="{post.author.picture.fileName}" src="{post.author.picture.url}" class="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center" />
  <span class="flex-grow flex flex-col pl-4">
    <span class="title-font font-medium text-gray-900">{post.author.name}</span>
    <span class="text-gray-400 text-xs tracking-widest mt-0.5">{post.author.title}</span>
  </span>
</a>
<div class="mb-6 flex justify-between">
  <div>
    {#if post.tags} {#each post.tags as tag}
    <span class="py-1 px-2 mr-2 rounded bg-indigo-50 text-indigo-500 text-xs font-medium tracking-widest">{tag}</span>
    {/each} {/if}
  </div>
  <p class="text-gray-400 text-xs tracking-widest mt-0.5">{new Date(post.date).toDateString()}</p>
</div>
<article class="prose-xl">{@html post.content.html}</article>

Take note here of the last line where I'm using Tailwind Typography to style the Markdown.

Conclusion

That's it! A full blog built with SvelteKit and styled with Tailwind and daisyUI components!

Forem: Scott Spence

Should I create my own blog?

Let's compare

Free Hosting

Built-in community features

Often free or low-cost

Easy to set up and use

Customisation options

Control over monetization

Ownership of content and data

Platform terms of service

More work to build a community

Technical skills to set up

More responsibilities

Save time on maintenance

Additional notes

Learning as you're doing

It's your SEO

Conclusion

Making npm Packages with SvelteKit

Setting up the project

Package the project

Publish the project to npm

Conclusion

Make a Contact Form with SvelteKit and Airtable

Create the project

Set up Airtable

Set up Svelte form

Get Airtable API keys

Set up SvelteKit endpoint

Environment variables

POST the data to Airtable

Managing form state

Automation

Conclusion

How to Set Up Svelte with Tailwind CSS

Prerequisites

With SvelteKit npm init svelte@next

With SvelteKit npm init vite@latest

Conclusion

Make a URL Shortener with SvelteKit

Setup the project

Create the endpoint

Add source and destination URLs

Redirect to the destination URL

Conclusion

Further exploration

Acknowledgements

Use Google Chrome in Ubuntu on Windows Subsystem Linux

SvelteKit .env secrets

What if you have a secret key?

Example

Update

Thanks!

Make an Email Form Submission with SvelteKit

Revue has an open API

Testing the Revue endpoint

Setup the project

Setting up environment variables

Setting up the endpoint

Setting up the submit form

Test the submit

Receive email in endpoint

Test it's worked on Vercel

Wrap up!

Make a Sitemap with SvelteKit

Sitemap route

Hardcoding pages into the sitemap

Adding posts to sitemap

Next steps from here

Conclusion

Make an RSS Feed for your SvelteKit Project

RSS on scottspence.com

RSS route

Clone the project

Add the RSS route

Add <channel> required elements

Add posts for the RSS feed

Conclusion

Deploy Your Own Links Page with One Click

`POST` the data to Airtable

With SvelteKit `npm init svelte@next`

With SvelteKit `npm init vite@latest`

RSS on `scottspence.com`

Add `<channel>` required elements