This is a website starter for building a JAM stack site with
- SvetleKit
- Markdown
- Tailwind CSS
This starter might help you get startet with your own JAM stack site and provides some helpful features:
You can manage your content for single pages like home
or about
as markdown frontmatter.
To create a new page follow these steps:
- Add a new file to
/src/lib/content
. E.g. your_page.md - Insert a frontmatter with your page data to the new file. The frontmatter can be arbitrary and you can also add a markdown body if needed.
---
seo:
title: 'New Page - SvelteKit starter'
description: 'A new page'
title: 'My new page'
summary: 'A short description'
... and others
---
- Create a new
TS
type definition for the frontmatter of your new page to/src/lib/models/pages
to makeTS
happy.
import type { SeoSection } from '$lib/models/seo';
import type { TitleWithSummary } from '$lib/models title_with_summary';
export type NewPageMetaData = SeoSection & TitleWithSummary & { ... };
- Extend the type of available pages in
/src/lib/utils/page.ts
. The type has to match the filename without the extension.
...
export type Page = 'home' | 'about' | 'projects' | 'new_page';
export async function fetchPageData<T>(page: Page): Promise<MarkdownData<T>> {
...
}
- Create a new page in routes and fetch the data. To see how this works, please look at one of the example pages (about, home)
This starter already gives you a sample collection type (projects) you can easily adapt to your need. However, if you want to add another one, you can follow almost the same steps as for a single type.
-
Create a new folder in
content
with the name of the collection and add a markdown file for each collection item (see projects for an example). -
Add a
TS
type definition for a single collection type and for the collection list page if needed. -
Extend the
/src/lib/utils/collection.ts
file
...
export const collections: { [key: string]: Record<string, () => Promise<unknown>> } = {
projects: import.meta.glob(`$content/projects/*.md`),
your_new_collection: import.meta.glob(`$content/new_collection/*.md`),
};
...
- Add pages for the new collection in
routes
(see projects)
- SEO component for conveniently adding meta tags for title and description (extendable according to your needs)
- Category filter for projects
- Latest projects on homepage
- Tailwind CSS integration with prepared configuration
- Basic components for your page layout
- Custom font integration