SvelteKit TypeScript vanilla‑extract Starter: Markdown Blog # SvelteKit TypeScript vanilla-extract Starter: Markdown Blog #

🤝 Introducing new SvelteKit TypeScript vanilla‑extract Starter #

In this post, we have a look at getting up and running with the new SvelteKit TypeScript vanilla-extract starter. Vanilla-extract is a CSS in JavaScript or more specifically CSS in TypeScript styling framework. It uses TypeScript to help developers scope styles and enforce coding style. At build-time, vanilla-extract generates CSS stylesheets from your input TypeScript. Because it generates CSS, there is zero runtime overhead, meaning a fantastic experience for end users.

Since vanilla-extract uses TypeScript for styling input, it makes sense also to use TypeScript for the SvelteKit side and leverage autocompletion and type safety together with the other TypeScript benefits. In the rest of this post, we look at getting started with the new starter from cloning the repo to build.

🚀 Quick Start #

Get going in three steps: clone the repo, install packages, then spin up a dev server to start building out your new project:

    
git clone https://github.com/rodneylab/sveltekit-typescript-vanilla-extract-starter.git
cd sveltekit-typescript-vanilla-extract-starter
pnpm install
pnpm run dev

  

This will spin up a dev server on your machine on TCP port 3000. If you already have something running there, it is easy to switch SvelteKit server port, adding a --port 3001 (or similar) to the project package.json dev script.

When you are ready, to build the site, just do a pnpm run build from the Terminal.

🧐 What’s Inside? #

    
.
├── README.md
├── package.json
├── src
│   ├── app.d.ts
│   ├── app.html
│   ├── content
│   │   └── blog
│   │       ├── best-medium-format-camera-for-starting-out
│   │       ├── folding-camera
│   │       └── twin-lens-reflex-camera
│   ├── lib
│   │   ├── assets
│   │   ├── components
│   │   │   ├── BannerImage.css.ts
│   │   │   ├── BannerImage.svelte
│   │   │   ├── ...
│   │   │   ├── PWA.svelte
│   │   │   └── SEO
│   │   ├── config
│   │   │   └── website.ts
│   │   ├── generated
│   │   │   └── posts
│   │   ├── shared
│   │   │   └── stores
│   │   ├── styles
│   │   │   ├── normalise.css
│   │   │   ├── styles.css.ts
│   │   │   ├── themes
│   │   │   └── vars
│   │   └── utilities
│   │       └── blog.ts
│   ├── routes
│   │   ├── [slug]
│   │   │   ├── __layout.svelte
│   │   │   ├── index.json.ts
│   │   │   └── index.svelte
│   │   ├── __layout.svelte
│   │   ├── index.svelte
│   │   └── index.ts
│   └── service-worker.js
├── static
│   ├── apple-touch-icon.png
│   ├── ...
│   └── manifest.webmanifest
├── svelte.config.js
├── vite.config.js
└── tsconfig.json

  

src #

• app.d.ts here we have custom types used by the app.

• app.html regular SvelteKit HTML template, we include some favicon links in the HTML head section.

src/content #

This is where we add new blog posts. Create a new folder under src/content/blog for each new post. Just add an index.md file inside the new directory for the post content. Although the file has an .md extension, since the project uses mdsvex you can drop Svelte code in there too. A new post in src/content/blog/new-post/index.md will be generated on https://example.com/new-post/.

src/lib/assets #

We have images in here, such as banner images and social sharing images used in the starter’s SEO components.

src/lib/components #

• src/lib/components these are the components we use in pages. We define style files alongside file components. As an example, we have the Svelte component file BannerImage.svelte for next-gen responsive images and next to it; BannerImage.css.ts. In there, we define the component’s vanilla-extract styles. If you use VS Code, in the project’s .vscode/settings.json there is an override for explorer.fileNesting.patterns which tucks these .css.ts files into their parent .svelte files.

src/lib/generated #

This folder contains a file for each post with responsive data used with vite-imagetools. vite-imagetools generates images in next-gen formats together with responsive sizes. The node script generate-responsive-image-data.ts actually creates these files.

src/lib/shared #

Here we have a Svelte store which puts the use light/dark theme preference to local storage. The code checks if there is already a browser preference for light or dark theme. This, however, is overridden when the user toggles the dark/light button. Then, using local storage, we note the choice for future site visits.

src/lib/styles #

• src/lib/styles/styles.css.ts here you will find the main vanilla-extract global styles. The file references variables set in src/lib/styles/vars folder (such as spacing, font sizes and so on).

• src/lib/styles/themes we have a few files here. theme.css.ts defines the variables which any theme must have. We start to see some of vanilla-extract’s power here. The other two files define those variables for the light and dark themes included in the starter.

src/utilities #

• src/utilities/blog.ts this file contains some code for helping us transform the markdown in blog posts to Svelte. As well as that they help extract fields in the front matter (this is the metadata we include at the top of the blog post index.md files).

src/routes #

• src/routes/[slug].json.ts this is essentially a template for blog post data. One of these files is generated at build for each blog post.

If you are new to Svelte, see the post on Getting Started with SvelteKit blog post. That goes into a little detail on some other files in a Svelte project. By the same token, the post on using vanilla-extract in SvelteKit talks more about the benefits of using vanilla-extract for styling. As well as that there is more detail on the nuts and bolts of making it work with SvelteKit.

🖋 SvelteKit TypeScript vanilla‑extract Starter: Blog Posts #

We just mentioned the blog posts are in index.md files within folders under src/content/blog. Here is an example:

    
1 ---
2 postTitle: 'Best Medium Format Camera for Starting Out'
3 focusKeyphrase: 'best medium format camera'
4 datePublished: '2022-05-07T16:04:42.000+0100'
5 lastUpdated: '2022-05-14T10:17:52.000+0100'
6 seoMetaDescription: "Best medium format camera for starting out is probably a question at the front of your mind right now! Let's take a look."
7 featuredImage: 'best-medium-format-camera-for-starting-out.jpg'
8 featuredImageAlt: 'Photograph of a Hasselblad medium format camera with the focusing screen exposed'
9 ogImage: 'best-medium-format-camera-for-starting-out-open-graph.jpg'
10 ogSquareImage: 'best-medium-format-camera-for-starting-out-open-graph-square.jpg'
11 twitterImage: 'best-medium-format-camera-for-starting-out-twitter.jpg'
12 categories: ''
13 tags: ''
14 ---
15 
16 <script>
17   import ExternalLink from '$lib/components/ExternalLink.svelte';
18   import Link from '$lib/components/Link.svelte';
19 </script>
20 
21 ## What is a Medium Format Camera?
22 
23 If you are old enough to remember the analogue film camera era, chances are it is the 35&nbsp;mm canisters with the track cut down the side that first come to

  

This looks like regular Markdown  at first glance. However, you might notice we have a familiar Svelte script tag in lines 16 – 19. This comes courtesy of mdsvex and lets us use Svelte components within the post content files. The front matter fields (like seoMetaDescription and twitterImage) are passed to the starter’s SEO component.

🖼 SvelteKit TypeScript vanilla‑extract Starter: Icons #

We use Iconify icons in the starter. This gives you access to thousands of icons in dozens of libraries all through a single npm package. The starter uses these icons offline, though you can choose to download them on demand. See the article on using SvelteKit with Iconify for more on customization together with finding icons.

🙌🏽 SvelteKit TypeScript vanilla‑extract Starter: Wrapup #

We have a had a quick look at getting up and running with the new SvelteKit TypeScript vanilla-extract starter. In particular, we have touched on:

• cloning and then spinning up the starter;
• where to find vanilla-extract global styles as well as other important files; and
• some starter features including responsive images and Iconify icons together with light/dark mode.

This was just a quick look, though! Probably the best way to get acquainted with the starter is just to clone it, then start playing around. I would love to hear of your suggestions for improvements. Do let me know if there is something missing either in the starter or from this introduction. You can drop a comment below or reach out for a chat on Element  as well as Twitter @mention 

You can get the starter from the Rodney Lab Git Hub repo  .

🏁 SvelteKit TypeScript vanilla‑extract Starter: Summary #

Why use vanilla-extract for styling? #

vanilla-extract generates plain CSS stylesheets, making the end user-experience fast. You code your styles in TypeScript. This, then, makes it easy to leverage vanilla-extract as a tool for enforcing a coding style. On top, you can add policies to keep styles more maintainable. For example, with minimal effort, you can ensure any new themes have certain colours or other variables defined. This helps teams work on parts of a project without breaking parts they are not yet familiar with.

How can you quickly spin up a new SvelteKit TypeScript project using vanilla-extract for styling? #

To get going quickly on a SvelteKit site, try a starter. We have seen the SvelteKit TypeScript starter is quick to clone, then get going on. It offers PWA support, icons from dozens of libraries via iconify and responsive images in next-gen formats as well as light/dark mode. vanilla-extract lets you write your styles in TypeScript in line with your own style guide. It then creates CSS stylesheets on build, which have zero runtime overhead.

Does SvelteKit work with vanilla-extract? #

Yes vanilla-extract uses the Vite plugin to work with SvelteKit. You need minimal configuration to get up and running. Essentially, you install the plugin then add a couple of lines of config to your svelte.config.js file. vanilla-extract also works with React, so you can share styles with Next projects as an example. You can also use the vanilla-extract Rollup plugin. For example, this can be handy for styling components in Svelte libraries or packages you are working on.

🙏🏽 SvelteKit TypeScript vanilla‑extract Starter: Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Rodney

@askRodney

Just dropped a new article taking you through the ❤️ SvelteKit TypeScript 👨🏽‍🍳 vanilla-extract starter and getting you up and running in it.

Hope you find it useful!

#askRodney #SvelteJS #SvelteKit https://t.co/rEZvtu49Wu

— Rodney (@askRodney) May 27, 2022

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram  . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.