workflow

Author: KommuSoft

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+# https://help.github.com/en/articles/displaying-a-sponsor-button-in-your-repository
+custom: https://www.buymeacoffee.com/hapytex

.github/workflows/build-site.yml

@@ -0,0 +1,33 @@
+jobs:
+  linux1:
+    name: Build site
+    runs-on: ubuntu-latest
+    steps:
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20.x'
+    - name: checkout code
+      uses: actions/checkout@v2.3.1
+    - name: build the site
+      run: make
+  linux3:
+    name: Deploy website
+    runs-on: ubuntu-latest
+    needs: [linux1, linux2]
+    if: github.ref == 'refs/heads/master'
+    steps:
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20.x'
+    - name: checkout code
+      uses: actions/checkout@v2.3.1
+    - name: build the site
+      run: make
+    - name: deploy site to gh-pages
+      uses: JamesIves/github-pages-deploy-action@4.0.0
+      with:
+        branch: gh-pages
+        folder: dist
+        single-commit: true

package-lock.json

@@ -12,10 +12,12 @@
         "chart.js": "3.3.2",
         "csv-parser": "^3.2.0",
         "json-tree-view-vue3": "^1.0.2",
+        "primeflex": "^4.0.0",
         "primeicons": "^7.0.0",
         "primevue": "^4.3.1",
         "tailwindcss-primeui": "^0.5.0",
         "vue": "^3.4.34",
+        "vue-papa-parse": "^3.1.0",
         "vue-router": "^4.4.0"
     },
     "devDependencies": {

package.json

@@ -12,7 +12,7 @@ const model = ref([
         label: 'JSON tools',
         items: [
             { label: 'jsontree', icon: 'pi pi-code', to: '/json/tree' },
-            { label: 'csv2json', icon: 'pi pi-code', to: '/json/csv' },
+            // { label: 'csv2json', icon: 'pi pi-code', to: '/json/csv' },
             // { label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/uikit/input' },
             // { label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/uikit/button', class: 'rotated-icon' },
             // { label: 'Table', icon: 'pi pi-fw pi-table', to: '/uikit/table' },

src/layout/AppMenu.vue

@@ -7,9 +7,10 @@ import PrimeVue from 'primevue/config';
 import ConfirmationService from 'primevue/confirmationservice';
 import ToastService from 'primevue/toastservice';
 import { JsonTreeView } from "json-tree-view-vue3";
-import { definePreset } from '@primeuix/themes';
+// import { definePreset } from '@primeuix/themes';
 
 import '@/assets/styles.scss';
+import 'primeflex/primeflex.css';
 
 const app = createApp(App);
 

src/main.js

@@ -1,18 +1,18 @@
 import AppLayout from '@/layout/AppLayout.vue';
-import { createRouter, createWebHistory } from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router';
 
 const router = createRouter({
-    history: createWebHistory(),
+    history: createWebHashHistory(),
     routes: [
         {
             path: '/',
             component: AppLayout,
             children: [
-                {
-                    path: '/json/csv',
-                    name: 'csv2json',
-                    component: () => import('@/views/pages/json/CsvJson.vue')
-                },
+                // {
+                //     path: '/json/csv',
+                //     name: 'csv2json',
+                //     component: () => import('@/views/pages/json/CsvJson.vue')
+                // },
                 {
                     path: '/json/tree',
                     name: 'jsontree',

src/router/index.js

@@ -1,7 +1,6 @@
 <script setup>
 import { JsonTreeView } from "json-tree-view-vue3";
-import 'json-tree-view-vue3/dist/style.css'
-import csvParser from "csv-parser";
+import 'json-tree-view-vue3/dist/style.css';
 </script>
 
 <template>
@@ -25,8 +24,10 @@ export default {
       if(this.csv == null) {
         return 'null';
       }
-      console.log(this.csvparser(this.csv));
-      return JSON.stringify(this.csv.split(/\r?\n/));
+      return 'null';
+      // return JSON.stringify(this.$papa.parse(this.csv));
+      // console.log(this.csvparser(this.csv));
+      // return JSON.stringify(this.csv.split(/\r?\n/));
     }
   }
 }

src/views/pages/json/CsvJson.vue

@@ -5,9 +5,18 @@ import 'json-tree-view-vue3/dist/style.css';
 
 <template>
     <div className="card">
-        <div class="font-semibold text-xl mb-4">CSV to JSON</div>
-          <Textarea :invalid="jsondata == null" v-model="json"/>
+        <div class="font-semibold text-xl mb-4">JSON tree viewer</div>
+      <div class="grid">
+        <div class="col field">
+          <FloatLabel>
+            <label for="json">JSON</label>
+          <Textarea id="json" auto-resize rows="25" :invalid="jsondata == null" v-model="json" class="w-full h-full"/>
+          </FloatLabel>
+        </div>
+        <div class="col">
           <JsonTreeView :json="jsondata" :maxDepth="3" />
+        </div>
+      </div>
     </div>
 </template>