Skip to content

Uvacoder/swyxkit

Repository files navigation

swyxkit!

swyx's preferred starter for Svelte projects:

Feel free to rip out these opinions as you see fit of course.

Live Demo

See https://swyxkit.netlify.app/

screenshot of swyxkit in action

screenshot of swyxkit in action

Key Features and Design Considerations:

⚠️ known issue - syntax highlighting of mdsvex currently adds extra @html for no reason. We use a workaround

Setup

npx degit https://github.com/sw-yx/swyxkit
export GH_TOKEN=your_gh_token_here # can skip if just trying out this repo casually
npm install
npm run start

You should be able to deploy this project straight to Netlify as is, just like this project is.

Before deploying, remember to configure /lib/siteConfig.js - just some hardcoded vars i want you to remember to configure.

export const SITE_URL = 'https://swyxkit.netlify.app';
export const GH_USER_REPO = 'sw-yx/swyxkit'; // used for pulling github issues and offering comments
export const REPO_URL = 'https://github.com/' + GH_USER_REPO;
export const SITE_TITLE = 'SwyxKit';
export const SITE_DESCRIPTION = "swyx's default SvelteKit + Tailwind starter";
export const DEFAULT_OG_IMAGE =
	'https://user-images.githubusercontent.com/6764957/147861359-3ad9438f-41d1-47c8-aa05-95c7d18497f0.png';
export const MY_TWITTER = 'https://twitter.com/swyx/';
export const MY_YOUTUBE = 'https://youtube.com/swyxTV';

Of course, you should then go page by page (there aren't that many) and customize some of the other hardcoded items.

This blog uses GitHub as a CMS - if you are doing any serious development at all, you should give process.env.GH_TOKEN to raise rate limit from 60 to 5000. Just make a really basic personal access token, should be enough. https://docs.github.com/en/rest/overview/resources-in-the-rest-api#rate-limiting

When deploying, don't forget to set it in Netlify: https://app.netlify.com/sites/YOUR_SITE/settings/deploys#environment

Further Reading

You can read:

Acknowledgements

Todos

  • implement etag header for github api
  • store results in netlify build cache
  • separate hydration path for mobile nav
  • custom components in MDX, and rehype plugins