fix react setup

docs/gridsome.server.js

@@ -5,6 +5,7 @@ module.exports = function (api) {
   api.chainWebpack(config => {
     config.resolve.extensions
       .add('.ts')
+      .add('.jsx')
 
     config.module
       .rule('typescript')

docs/package.json

@@ -12,6 +12,7 @@
     "@gridsome/transformer-json": "^0.2.1",
     "@gridsome/vue-remark": "^0.2.0",
     "@mvasilkov/outdent": "^1.0.4",
+    "collect.js": "^4.25.0",
     "globby": "^11.0.0",
     "gridsome": "0.7.14",
     "raw-loader": "^4.0.0",

docs/src/components/Demo/index.vue

@@ -24,6 +24,7 @@
 </template>
 
 <script>
+import collect from 'collect.js'
 import ReactRenderer from '~/components/ReactRenderer'
 
 export default {
@@ -76,8 +77,7 @@ export default {
   },
 
   mounted() {
-    this.files = require.context(`~/demos/`, true, /.+\..+$/)
-      .keys()
+    this.files = collect(require.context(`~/demos/`, true, /.+\..+$/).keys())
       .filter(path => path.startsWith(`./${this.name}`))
       .map(path => path.replace('./', ''))
       .map(path => {
@@ -91,6 +91,8 @@ export default {
           highlight: this.syntax[extension] || extension,
         }
       })
+      .sortBy(item => item.path.split('/').length)
+      .toArray()
   }
 }
 </script>