chore: reorder frameworks and add angular comparison in footer

frameworks.mjs

@@ -10,17 +10,17 @@ function sortAllFilenames(files, filenamesSorted) {
 
 const frameworks = [
   {
-    id: "svelte4",
-    title: "Svelte 4",
+    id: "svelte5",
+    title: "Svelte 5",
     frameworkName: "Svelte",
-    isCurrentVersion: true,
+    isCurrentVersion: false,
     img: "framework/svelte.svg",
     eslint: {
-      files: ["**/svelte4/*.svelte"],
+      files: ["**/TODO-THIS-IS-DISABLED-svelte5/*.svelte"],
       parser: "svelte-eslint-parser",
     },
-    playgroundURL: "https://svelte.dev/repl",
-    documentationURL: "https://svelte.dev/",
+    playgroundURL: "https://svelte-5-preview.vercel.app/",
+    documentationURL: "https://svelte-5-preview.vercel.app/docs",
     filesSorter(files) {
       return sortAllFilenames(files, ["index.html", "app.js", "App.svelte"]);
     },
@@ -80,14 +80,14 @@ const frameworks = [
     mainPackageName: "vue",
   },
   {
-    id: "angular",
-    title: "Angular",
+    id: "angularRenaissance",
+    title: "Angular Renaissance",
     frameworkName: "Angular",
-    isCurrentVersion: false,
-    img: "framework/angular.svg",
+    isCurrentVersion: true,
+    img: "framework/angular-renaissance.svg",
     eslint: [
       {
-        files: ["**/angular/**"],
+        files: ["**/angular-renaissance/**"],
         parserOptions: {
           project: ["tsconfig.app.json"],
           createDefaultProgram: true,
@@ -113,7 +113,7 @@ const frameworks = [
         },
       },
       {
-        files: ["**/angular/*.html"],
+        files: ["**/angular-renaissance/*.html"],
         extends: ["plugin:@angular-eslint/template/recommended"],
         rules: {
           /**
@@ -137,14 +137,14 @@ const frameworks = [
     mainPackageName: "@angular/core",
   },
   {
-    id: "angularRenaissance",
-    title: "Angular Renaissance",
+    id: "angular",
+    title: "Angular",
     frameworkName: "Angular",
-    isCurrentVersion: true,
-    img: "framework/angular-renaissance.svg",
+    isCurrentVersion: false,
+    img: "framework/angular.svg",
     eslint: [
       {
-        files: ["**/angular-renaissance/**"],
+        files: ["**/angular/**"],
         parserOptions: {
           project: ["tsconfig.app.json"],
           createDefaultProgram: true,
@@ -170,7 +170,7 @@ const frameworks = [
         },
       },
       {
-        files: ["**/angular-renaissance/*.html"],
+        files: ["**/angular/*.html"],
         extends: ["plugin:@angular-eslint/template/recommended"],
         rules: {
           /**
@@ -293,17 +293,17 @@ const frameworks = [
     mainPackageName: "alpinejs",
   },
   {
-    id: "svelte5",
-    title: "Svelte 5",
+    id: "svelte4",
+    title: "Svelte 4",
     frameworkName: "Svelte",
-    isCurrentVersion: false,
+    isCurrentVersion: true,
     img: "framework/svelte.svg",
     eslint: {
-      files: ["**/TODO-THIS-IS-DISABLED-svelte5/*.svelte"],
+      files: ["**/svelte4/*.svelte"],
       parser: "svelte-eslint-parser",
     },
-    playgroundURL: "https://svelte-5-preview.vercel.app/",
-    documentationURL: "https://svelte-5-preview.vercel.app/docs",
+    playgroundURL: "https://svelte.dev/repl",
+    documentationURL: "https://svelte.dev/",
     filesSorter(files) {
       return sortAllFilenames(files, ["index.html", "app.js", "App.svelte"]);
     },

src/Index.svelte

@@ -169,7 +169,7 @@
     );
   });
 
-  const MAX_FRAMEWORK_NB_INITIAL_DISPLAYED = 10;
+  const MAX_FRAMEWORK_NB_INITIAL_DISPLAYED = 9;
 
   const FRAMEWORKS_INITIAL_DISPLAYED = FRAMEWORKS.slice(
     0,

vite.config.js

@@ -62,6 +62,10 @@ const footerNavigation = [
   {
     title: "Comparing Current Version & Upcoming Version",
     links: [
+      {
+        name: "Angular vs Angular Renaissance",
+        url: "/compare/angular-vs-angularRenaissance",
+      },
       { name: "Svelte 4 vs Svelte 5", url: "/compare/svelte4-vs-svelte5" },
       {
         name: "Ember Octane vs Ember Polaris",