feat(app): add spa router to handle versus framework pages

matschik · Mar 4, 2024 · 8a3234f · 8a3234f
1 parent 7037e50
commit 8a3234f
Show file tree

Hide file tree

Showing 7 changed files with 528 additions and 414 deletions.
diff --git a/build/template/footer.eta b/build/template/footer.eta
@@ -1,4 +1,4 @@
-<footer class="bg-gray-900">
+<footer class="bg-gray-900 pb-20">
   <h2 id="footer-heading" class="sr-only">Footer</h2>
   <div class="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-32">
     <div class="xl:grid xl:grid-cols-3 xl:gap-8">
@@ -20,15 +20,15 @@
           </a>
         </div>
       </div>
-      <div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
+      <div class="mt-16 grid grid-cols-1 sm:grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
         <% for (const navigation of it.navigations) { %>
         <div class="md:grid md:gap-8">
           <aside>
             <h3 class="text-sm font-semibold leading-6 text-white">
               <%= navigation.title %>
             </h3>
             <nav>
-              <ul role="list" class="mt-6 space-y-2">
+              <ul role="list" class="mt-2 space-y-2">
                 <% for (const link of navigation.links) { %>
                 <li>
                   <a href="<%= link.url %>" class="text-sm leading-6 text-gray-300 hover:text-white">
@@ -43,10 +43,5 @@
         <% } %>
       </div>
     </div>
-    <div class="mt-16 border-t border-white/10 pt-8 sm:mt-20 lg:mt-24">
-      <p class="text-xs leading-5 text-gray-400">
-        &copy; 2020 Your Company, Inc. All rights reserved.
-      </p>
-    </div>
   </div>
 </footer>
diff --git a/frameworks.mjs b/frameworks.mjs
@@ -8,11 +8,12 @@ function sortAllFilenames(files, filenamesSorted) {
   ].filter(Boolean);
 }
 
-export default [
+const frameworks = [
   {
     id: "svelte4",
     title: "Svelte 4",
     frameworkName: "Svelte",
+    isCurrentVersion: true,
     img: "framework/svelte.svg",
     eslint: {
       files: ["**/svelte4/*.svelte"],
@@ -30,6 +31,7 @@ export default [
     id: "react",
     title: "React",
     frameworkName: "React",
+    isCurrentVersion: true,
     img: "framework/react.svg",
     eslint: {
       files: ["**/react/*.jsx", "**/react/*.tsx"],
@@ -56,6 +58,7 @@ export default [
     id: "vue3",
     title: "Vue 3",
     frameworkName: "Vue",
+    isCurrentVersion: true,
     img: "framework/vue.svg",
     eslint: {
       files: ["**/vue3/*.vue"],
@@ -80,6 +83,7 @@ export default [
     id: "angular",
     title: "Angular",
     frameworkName: "Angular",
+    isCurrentVersion: true,
     img: "framework/angular.svg",
     eslint: [
       {
@@ -136,6 +140,7 @@ export default [
     id: "lit",
     title: "Lit",
     frameworkName: "Lit",
+    isCurrentVersion: true,
     img: "framework/lit.svg",
     eslint: {
       files: ["**/lit/**"],
@@ -155,6 +160,7 @@ export default [
     id: "vue2",
     title: "Vue 2",
     frameworkName: "Vue",
+    isCurrentVersion: false,
     img: "framework/vue.svg",
     eslint: {
       files: ["**/vue2/*.vue"],
@@ -176,6 +182,7 @@ export default [
     id: "ember",
     title: "Ember",
     frameworkName: "Ember",
+    isCurrentVersion: true,
     img: "framework/ember.svg",
     eslint: {
       files: ["**/ember/**"],
@@ -195,6 +202,7 @@ export default [
     id: "solid",
     title: "Solid.js",
     frameworkName: "Solid",
+    isCurrentVersion: true,
     img: "framework/solid.svg",
     eslint: {
       files: ["**/solid/*.jsx"],
@@ -213,6 +221,7 @@ export default [
     id: "alpine",
     title: "Alpine",
     frameworkName: "Alpine",
+    isCurrentVersion: true,
     img: "framework/alpine.svg",
     eslint: {
       files: ["**/alpine/**"],
@@ -230,6 +239,7 @@ export default [
     id: "mithril",
     title: "Mithril",
     frameworkName: "Mithril",
+    isCurrentVersion: true,
     img: "framework/mithril.svg",
     eslint: {
       env: {
@@ -252,6 +262,7 @@ export default [
     id: "aurelia2",
     title: "Aurelia 2",
     frameworkName: "Aurelia",
+    isCurrentVersion: true,
     img: "framework/aurelia.svg",
     eslint: {
       env: {
@@ -281,6 +292,7 @@ export default [
     id: "qwik",
     title: "Qwik",
     frameworkName: "Qwik",
+    isCurrentVersion: true,
     img: "framework/qwik.svg",
     eslint: {
       env: {
@@ -312,6 +324,7 @@ export default [
     id: "marko",
     title: "Marko",
     frameworkName: "Marko",
+    isCurrentVersion: true,
     img: "framework/marko.svg",
     eslint: {
       files: ["!**"], // Marko’s linter/prettyprinter doesn’t use eslint
@@ -328,6 +341,7 @@ export default [
     id: "aurelia1",
     title: "Aurelia 1",
     frameworkName: "Aurelia",
+    isCurrentVersion: false,
     img: "framework/aurelia.svg",
     eslint: {
       env: {
@@ -356,6 +370,7 @@ export default [
     id: "svelte5",
     title: "Svelte 5 (preview)",
     frameworkName: "Svelte",
+    isCurrentVersion: false,
     img: "framework/svelte.svg",
     eslint: {
       files: ["**/TODO-THIS-IS-DISABLED-svelte5/*.svelte"],
@@ -370,3 +385,12 @@ export default [
     mainPackageName: "svelte",
   },
 ];
+
+export function matchFrameworkId(id){
+  return frameworks.find((framework) =>
+  framework.id === id ||
+  (framework.isCurrentVersion &&
+    framework.frameworkName.toLowerCase() === id))
+}
+
+export default frameworks;
diff --git a/package.json b/package.json
@@ -22,7 +22,8 @@
     "@veljs/svelte": "^0.1.11",
     "classnames": "^2.5.1",
     "eslint-plugin-svelte": "^2.35.1",
-    "heroiconsvelte": "^1.0.2"
+    "heroiconsvelte": "^1.0.2",
+    "svelte-router-spa": "^7.0.1"
   },
   "devDependencies": {
     "@angular-eslint/eslint-plugin": "^17.2.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml