Made with SvelteKit, TailwindCSS & shadcn-svelte.
The site makes requests to the GitHub API on the server side to get the latest releases for all the packages. It smartly caches the data, frequently invalidating it to always be up to date while avoiding hitting GitHub as much as possible.
Some computations are made to generate the badges, but everything else is a simple cosmetic wrapper around GitHub releases. No data alteration is performed by the site other than for styling and rendering purposes.
For more info, visit the v2 release post.
The main requirements to run Svelte Changelog are the .env
entries, which you can find an example of inside the .env.example
:
GITHUB_TOKEN
: a classic GitHub token with the public_repo
scope (that's it), required for API requests.KV_REST_API_TOKEN
(optional): the token for the API of the KV service (Redis). You can leave it empty; an in-memory cache is used during development.KV_REST_API_URL
(optional): the URL for the API of the KV service (Redis). You can leave it empty; an in-memory cache is used during development.PUBLIC_POSTHOG_KEY
(optional): the token for the analytics service I use, PostHog. You can leave it empty; analytics are disabled in dev environments.[!NOTE] If other environment variables happen to be required for linting or compilation purposes, simply add them with an empty value inside your
.env
file
That's it: your GitHub token will do most of the job, and you can run the website like any regular SvelteKit app (pnpm i
&& pnpm dev
).
If you think I missed a package, you can either open an issue or directly contribute.
CHANGELOG.md
file at the root of the repositoryFork the repo, edit the src/lib/repositories.ts
file, and open a PR.
The site's code has been architectured to be as flexible as possible, here's how it works:
const repos = {
svelte: {/* ... */},
kit: {/* ... */},
others: {
name: "Other",
repos: [
{
...
},
{
changesMode: "releases", // Optional line, the way to get the changes; either "releases" or "changelog", defaults to "releases"
repoOwner: "your-owner", // Optional line, the name of the owner on GitHub, defaults to "sveltejs"
repoName: "your-repo", // The name of the repo on GitHub, as it is shown in the URL: https://github.com/sveltejs/your-repo
dataFilter: ({ tag_name }) => true, // Optional line, return false to exclude a version from its tag name
metadataFromTag: tag => ["package-name", "2.4.3"], // Return the package name and version from the tag name
changelogContentsReplacer: contents => contents, // Optional line, replace the contents of the changelog file before parsing it; only used if `changesMode` is "changelog"
}
]
}
};
And that's it! The site will automatically adapt to the new package(s).