feat!: v2 (#48)

Author: WarningImHack3r

.env.example

@@ -1 +1,4 @@
-PUBLIC_GITHUB_TOKEN=your_github_token
+KV_REST_API_TOKEN=your_kv_token
+KV_REST_API_URL="https://your.api/url"
+GITHUB_TOKEN=your_github_token
+PUBLIC_POSTHOG_TOKEN=your_posthog_token

README.md

@@ -1,6 +1,6 @@
 # svelte-changelog
 
-[svelte-changelog.vercel.app](https://svelte-changelog.vercel.app/)
+[svelte-changelog.dev](https://svelte-changelog.dev)
 
 Made with SvelteKit, TailwindCSS & shadcn-svelte.
 
@@ -13,36 +13,19 @@ Made with SvelteKit, TailwindCSS & shadcn-svelte.
 - Dynamically computed badges to indicate whether a package is the Latest, a Major version, a Prerelease, or a Maintenance version
 - Hover popups at multiple places across the site
 - "What's new" banner to keep users updated about the latest changes to the website
-- Authenticate with GitHub to bypass rate limits and get access to more features
-- Optional use of a GitHub token to avoid rate limiting in dev mode in a `.env` file (see `.env.example`)
+- ...and more!
 
 ## How does it work?
 
-The site makes requests to the GitHub API on the client side to get the latest releases for all the packages.
-As such, the data is fresh from GitHub every time you refresh the page.
+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**.
 
-### What is that "Log in with GitHub" button?
-
-With the growing amount of features and supported packages, the site went from requesting the GitHub API
-very few times to request it a lot.  
-As such, the rate limit of the GitHub API was quickly reached, and the site became hard to browse.
-
-To solve this issue, I [initially implemented](https://github.com/WarningImHack3r/svelte-changelog/commit/f28218cbf3d57d509e771520e8c02a610dab4b95) a way to input a GitHub token in the website settings.
-This became [the next week](https://github.com/WarningImHack3r/svelte-changelog/pull/27) a full-fledged authentication system with GitHub OAuth, which is what you see today.
-
-**By logging in with GitHub, you can browse the site (almost) without any rate limit issues**.
-You will also get access to more features, such as the ability to see the details of a pull request
-or issue directly on the site.
-
-The site does not store any data about you. The only thing the login system does is store the token given
-by the GitHub authentication process in the browser's local storage to use it for the GitHub API requests.
-
-Logging in is entirely optional but highly recommended. You can remove the token from the website at any time
-by clicking the "Log out" button in your avatar dropdown.
+For more info, visit the [v2 release blog](https://svelte-changelog.dev/blog/v2).
 
 ## Missing a package?
 
@@ -57,15 +40,15 @@ If you think I missed a package, you can either open an issue or directly contri
 
 ### How to contribute
 
-Fork the repo, edit the `/src/routes/+layout.ts` file, and open a PR.  
+Fork the repo, edit the `/src/lib/repositories.ts` file, and open a PR.  
 **If the repo is not in the `sveltejs` GitHub organization, please open an issue instead.**
 
 The code architecture is made to be as flexible as possible, here's how it works:
 
 ```typescript
-const repos: Record<Tab, { name: string; repos: Repo[] }> = {
-    svelte: ...,
-    kit: ...,
+export const repos = {
+    svelte: {/* ... */},
+    kit: {/* ... */},
     others: {
         name: "Other",
         repos: [
@@ -76,7 +59,7 @@ const repos: Record<Tab, { name: string; repos: Repo[] }> = {
                 changesMode: "releases", // Optional line, the way to get the changes; either "releases" or "changelog", defaults to "releases"
                 repoName: "your-repo", // The name of the repo on GitHub, as it appears 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
-                versionFromTag: tag => "...", // Return the version from the tag name; must be a valid semver
+                metadataFromTag: tag => ["package-name", "2.4.3"], // Return the package name and version from the tag name; the version must be a valid semver without any leading "v"
                 changelogContentsReplacer: contents => contents, // Optional line, replace the contents of the changelog file before parsing it; only used if `changesMode` is "changelog"
             }
         ]

eslint.config.js

@@ -30,6 +30,11 @@ export default tseslint.config(
 			}
 		}
 	},
+	{
+		rules: {
+			"@typescript-eslint/no-unused-vars": ["error", { ignoreRestSiblings: true }]
+		}
+	},
 	{
 		ignores: ["build/", ".svelte-kit/", "dist/", "src/lib/components/ui/", "src/lib/utils.[jt]s"]
 	}

package.json

@@ -15,9 +15,12 @@
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.22.0",
+		"@fontsource/dm-serif-display": "^5.2.5",
+		"@fontsource/pretendard": "^5.2.5",
 		"@lucide/svelte": "^0.483.0",
 		"@neoconfetti/svelte": "^2.2.2",
 		"@octokit/graphql-schema": "^15.26.0",
+		"@prgm/sveltekit-progress-bar": "^3.0.2",
 		"@shikijs/langs": "^3.2.1",
 		"@shikijs/rehype": "^3.2.1",
 		"@shikijs/themes": "^3.2.1",
@@ -28,9 +31,10 @@
 		"@tailwindcss/vite": "^4.0.14",
 		"@total-typescript/ts-reset": "^0.6.1",
 		"@types/eslint-config-prettier": "^6.11.3",
+		"@types/node": "^22.13.13",
 		"@types/semver": "^7.5.8",
+		"@upstash/redis": "^1.34.6",
 		"@vercel/speed-insights": "^1.2.0",
-		"arctic": "^3.5.0",
 		"bits-ui": "^1.3.13",
 		"clsx": "^2.1.1",
 		"eslint": "^9.22.0",
@@ -39,6 +43,7 @@
 		"globals": "^16.0.0",
 		"mode-watcher": "^0.5.1",
 		"octokit": "^4.1.2",
+		"posthog-js": "^1.235.4",
 		"prettier": "^3.5.3",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
@@ -49,9 +54,7 @@
 		"svelte-check": "^4.1.5",
 		"svelte-exmarkdown": "^4.0.3",
 		"svelte-meta-tags": "^4.2.0",
-		"svelte-persisted-store": "^0.12.0",
 		"svelte-sonner": "^0.3.28",
-		"sveltekit-search-params": "^3.0.0",
 		"tailwind-merge": "^3.0.2",
 		"tailwind-variants": "^1.0.0",
 		"tailwindcss": "^4.0.14",
@@ -65,6 +68,7 @@
 	"pnpm": {
 		"onlyBuiltDependencies": [
 			"@vercel/speed-insights",
+			"core-js",
 			"esbuild"
 		]
 	},