feat: csv to json

nuxt.config.js

@@ -221,5 +221,10 @@ export default {
   build: {
     extractCSS: true,
     transpile: ['lodash-es'],
+    // extend(config) {
+    //   config.node = {
+    //     fs: 'empty',
+    //   }
+    // },
   },
 }

package.json

@@ -82,6 +82,7 @@
     "responsive-loader": "2.2.1",
     "serve-handler": "6.1.3",
     "sharp": "0.26.2",
+    "slugify": "1.4.6",
     "sqip-loader": "1.0.0",
     "stylelint": "13.8.0",
     "stylelint-config-prettier": "8.0.2",

pages/nurseries/index.vue

@@ -66,7 +66,19 @@
 <script>
 import { mdiMapMarker, mdiPhone } from '@mdi/js'
 import { startCase } from 'lodash-es'
+import { saveFile } from '~/utils/saveFile'
 export default {
+  async asyncData({ $content }) {
+    const result = await $content('nurseries').fetch()
+    const { body } = result
+    const items = body
+    const folder = '/content/nurseries'
+    for (const item of items) {
+      await saveFile({ id: item.Nursery, folder, item })
+    }
+
+    return { items }
+  },
   data: () => ({
     items: [],
     mdiMapMarker,
@@ -75,11 +87,6 @@ export default {
     description:
       "Nurseries and outlets that can supply free native plants under Brisbane City Council's Free Native Plants Program.",
   }),
-  async fetch() {
-    const result = await this.$content('nurseries').fetch()
-    const { body } = result
-    this.items = body
-  },
   head() {
     return {
       title: this.title,

utils/deepSort.ts

@@ -0,0 +1,27 @@
+function defaultSortFn(a: string, b: string) {
+  return a.localeCompare(b)
+}
+
+function deepSort(src: unknown, comparator = defaultSortFn): unknown {
+  const data = JSON.parse(JSON.stringify(src))
+
+  if (typeof data !== 'object' || !data) {
+    return data
+  }
+
+  if (Array.isArray(data)) {
+    return data.map((value) => deepSort(value, comparator))
+  }
+
+  return Object.keys(data)
+    .sort(comparator)
+    .reduce((o, k) => ({ ...o, [k]: deepSort(data[k], comparator) }), {})
+}
+
+/**
+ * inspired by:
+ * https://stackoverflow.com/questions/35811799/javascript-recursively-order-object-and-nested-objects-as-well-as-arrays
+ * https://github.com/IndigoUnited/js-deep-sort-object/blob/master/index.js
+ */
+
+export default deepSort

utils/saveFile.ts

@@ -0,0 +1,23 @@
+import { promises as fsPromises } from 'fs'
+// import { startCase } from 'lodash-es'
+import slugify from 'slugify'
+import deepSort from './deepSort'
+const { mkdir, writeFile } = fsPromises
+
+interface saveFileArgs {
+  id: string
+  folder: string
+  item: any
+}
+
+export async function saveFile({ id, folder, item }: saveFileArgs) {
+  const slug = `${slugify(id, {
+    lower: true,
+    strict: true,
+  })}`
+  await mkdir(folder, { recursive: true })
+  await writeFile(
+    `${folder}/${slug}.json`,
+    JSON.stringify(deepSort(item), undefined, 2) + '\n'
+  )
+}