fix: sort starters by index

Author: hjvedvik

gridsome.config.js

@@ -91,38 +91,5 @@ module.exports = {
         }
       }
     }
-  ],
-  // Create routes from GraphQL nodes
-  nodeRoutes: {
-     WordPressPost: '/:year/:month/:slug',
-     WordPressTag: '/tag/:slug',
-     CustomType: {
-       route: '/other/:custom/:type',
-       component: './src/templates/MyTemplate.vue', // default templates/typeName.vue
-       nextFieldName: 'nextPost',
-       prevFieldName: 'prevPost',
-       sortBy: 'date'
-     },
-     Author: [
-       {
-         route: '/author/:name',
-         component: './src/templates/Author.vue'
-       },
-       {
-         route: '/author/:name/starters',
-         component: './src/templates/AuthorStarters.vue'
-       }
-     ]
-  },
-  // Create dynamic routes
-  clientRoutes: [
-    { 
-      path: '/foo/',
-      component: './src/templates/MyTemplate.vue',
-    },
-    { 
-      path: '/bar/:id', 
-      component: './src/templates/MyTemplate.vue',
-    }
   ]
 }

gridsome.server.js

@@ -54,14 +54,13 @@ module.exports = function (api) {
     })
 
     // Connect author field to Contributors & Platforms
-    starters.addReference('author','Contributor')
-    starters.addReference('platforms','Platform')
+    starters.addReference('author', 'Contributor')
+    starters.addReference('platforms', 'Platform')
 
-    startersJson.forEach(({ id, name: title, ...fields }) => {
+    startersJson.forEach((starter, index) => {
       starters.addNode({
-        id,
-        title,
-        fields,
+        ...starter,
+        index,
         internal: {
           origin: startersPath
         }
@@ -78,11 +77,10 @@ module.exports = function (api) {
     })
 
     // Connect author field to Contributors
-    platformsJson.forEach(({ id, name: title, ...fields }) => {
+    platformsJson.forEach((platform, index) => {
       platforms.addNode({
-        id,
-        title,
-        fields,
+        ...platform,
+        index,
         internal: {
           origin: platformsPath
         }

src/components/StarterCard.vue

@@ -83,4 +83,4 @@ export default {
   }
 }
 </style>
-</style>
+</style>

src/pages/Starters.vue

@@ -30,11 +30,19 @@ export default {
 
 <page-query>
 query Starters {
-  defaultStarters: allStarter (order: ASC, perPage: 3) {
+  defaultStarters: allStarter (
+    sort: [{ by: "index", order: ASC }]
+    filter: {
+      featured: {
+        eq: true
+      }
+    }
+  ) {
     edges {
       node {
         id
         title
+        path
         description
         preview
         repo
@@ -46,18 +54,26 @@ query Starters {
           title
           path
         }
-        path
       }
     }
   },
-  starters: allStarter (order: ASC, skip: 3) {
+  starters: allStarter (
+    sortBy: "index"
+    filter: {
+      featured: {
+        ne: true
+      }
+    }
+  ) {
     edges {
       node {
         id
         title
         description
         preview
         repo
+        path
+        screenshot  (width: 840, height:840)
         platforms {
           title
           logo
@@ -66,8 +82,6 @@ query Starters {
           title
           path
         }
-        path
-        screenshot  (width: 840, height:840)
       }
     }
   }

src/templates/Platform.vue

@@ -26,7 +26,7 @@
 query Platform($id: String!) {
   platform(id: $id) {
     title
-    belongsTo {
+    belongsTo(sortBy: "index") {
       edges {
         node {
           ... on Starter {
@@ -35,6 +35,8 @@ query Platform($id: String!) {
             description
             preview
             repo
+            path
+            screenshot (width: 840, height: 840)
             platforms {
               title
               logo
@@ -43,8 +45,6 @@ query Platform($id: String!) {
               title
               path
             }
-            path
-            screenshot (width: 840, height: 840)
           }
         }
       }

src/templates/Starter.vue

@@ -161,21 +161,21 @@ export default {
 </script>
 
 <page-query>
-query Starters ($id: String!) {
+query Starters($id: String!) {
   starter(id: $id) {
     title
     repo
+    path
+    preview
+    screenshot(width: 1680, quality: 80)
     platforms {
       title
-      logo (width: 30, height: 30)
+      logo(width: 30, height: 30)
     }
     author {
       title
       path
     }
-    path
-    preview
-    screenshot (width: 1680, quality: 80)
   }
 }
 </page-query>

starters/starters.yaml

@@ -1,27 +1,28 @@
 - title: Default starter
   repo: gridsome/gridsome-starter-default
   author: gridsome
-  tags: Default
+  featured: true
 
 - title: Default WordPress starter
   repo: gridsome/gridsome-starter-wordpress
   author: gridsome
   platforms: wordpress
-  tags: Default
+  featured: true
 
 - title: Default Contentful starter
   repo: gridsome/gridsome-starter-contentful
   author: gridsome
   tags: markdown, tailwind
   platforms: contentful
+  featured: true
 
 - title: Gridsome Blog Starter
   description: Official Markdown Blog Starter
   screenshot: ./screenshots/gridsome-starter-blog.png
   repo: gridsome/gridsome-starter-blog
   preview: https://gridsome-starter-blog.netlify.com/
   author: gridsome
-  tags: Blog, Dark Mode
+  tags: blog, dark mode
   platforms: markdown
 
 - title: Bleda