Update Frontend Assets (#127)

The Pantry UI is dated and should be updated. The website UI/UX should be updated and modernized to allow us to add more features & content without fighting the existing split layout. This change addresses the need by: *Adding Tailwinds CSS * Updating assets and frontend components to a more modern, usable interface
imRohan · Feb 27, 2022 · 3a97be6 · 3a97be6
1 parent 56033b3
commit 3a97be6
Show file tree

Hide file tree

Showing 68 changed files with 1,568 additions and 904 deletions.
diff --git a/index.html b/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <title>Pantry - Free JSON Storage API</title>
+    <title>Pantry - Free Cloud JSON Storage API</title>
     <meta name="author" content="Rohan Likhite">
     <meta name="description" content="Pantry is a free, API based JSON storage
-                service for personal projects. We help developers build projects
+                solution for small projects. We help developers build projects
                 quickly">
     <meta name="keywords" content="free json storage api">
     <link rel="shortcut icon" href="" type="image/vnd.microsoft.icon">
@@ -14,8 +14,8 @@
       viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22
       rx=%2220%22 fill=%22%23ffe2c9%22></rect><text x=%2250%%22 y=%2250%%22
       dominant-baseline=%22central%22 text-anchor=%22middle%22
-      font-size=%2270%22>🥑</text></svg>" />
-
+      font-size=%2270%22>🍊</text></svg>" />
+    <script src="https://cdn.tailwindcss.com"></script>
       <!-- Google Tag Manager -->
     <script>(function (w, d, s, l, i) {
         w[l] = w[l] || []; w[l].push({
@@ -33,19 +33,15 @@
       async defer>
     </script>
   </head>
-  <body>
-
+  <body class="min-h-full">
     <!-- Google Tag Manager (noscript) -->
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MLMVWB5" height="0" width="0"
         style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
 
     <div class="app">
-      <topbar @change-view="changeView"></topbar>
-      <landing-left :view="view">
-      </landing-left>
-      <landing-right :view="view" @change-view="changeView" @copy-text="copyText">
-      </landing-right>
+      <topbar @change-view="changeView" :view="view"></topbar>
+      <main-content :view="view" @change-view="changeView"></main-content>
       <bottom-bar></bottom-bar>
     </div>
   </body>

diff --git a/package.json b/package.json
@@ -65,9 +65,7 @@
     "webpack-merge": "^4.1.3"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/vue-fontawesome": "^2.0.2",
     "@sendgrid/mail": "^7.1.1",
     "airtable": "^0.8.1",
     "axios": "^0.21.2",
@@ -85,7 +83,6 @@
     "url-loader": "^1.0.1",
     "uuid": "^3.4.0",
     "vue": "^2.5.16",
-    "vue-clipboard2": "^0.3.1",
     "vue-json-editor": "^1.4.3"
   }
 }
diff --git a/src/app/.DS_Store b/src/app/.DS_Store
diff --git a/src/app/assets/BitIoLogo.png b/src/app/assets/BitIoLogo.png
diff --git a/src/app/assets/ReadingSideDoodle.svg b/src/app/assets/ReadingSideDoodle.svg
diff --git a/src/app/assets/RollerSkatingDoodle.svg b/src/app/assets/RollerSkatingDoodle.svg
diff --git a/src/app/assets/RunningDoodle.svg b/src/app/assets/RunningDoodle.svg
diff --git a/src/app/assets/SprintingDoodle.svg b/src/app/assets/SprintingDoodle.svg
diff --git a/src/app/assets/UnboxingDoodle.svg b/src/app/assets/UnboxingDoodle.svg
diff --git a/src/app/assets/ZombieingDoodle.svg b/src/app/assets/ZombieingDoodle.svg
diff --git a/src/app/assets/example.svg b/src/app/assets/example.svg
diff --git a/src/app/components/about.ts b/src/app/components/about.ts
@@ -0,0 +1,50 @@
+// Templates
+const aboutTemplate = require('../templates/about.html')
+
+// Components
+const faq = require('./faq.ts')
+
+const about = {
+  name: 'about',
+  template: aboutTemplate,
+  props: [],
+  components: {
+    faq,
+  },
+  data(): any {
+    return {
+      questions: [
+        {
+          title: 'What is Pantry?',
+          answer: `Pantry is a free data storage service which allows users to manage
+            a collection of JSON objects. It is great for small to medium sized projects,
+            and can be interacted with through a RESTful API or via a dashboard.`,
+        },
+        {
+          title: 'What is a Basket?',
+          answer: `A "Basket" is one JSON object. Each Pantry can have up to 100 baskets
+            held within it, each with its own human-readable name.`,
+        },
+        {
+          title: 'How is my data stored?',
+          answer: `Every basket is encrypted using the AES-256 encryption scheme and is securely
+            stored on our servers after being properly sanitized.`,
+        },
+        {
+          title: 'What are the limitations?',
+          answer: `A Pantry can have up to 100 baskets (JSON objects), each with a max size
+            of 1.44mb per basket. API requests are limited to 2 calls per second. That's it.`,
+        },
+        {
+          title: 'How long will my data be stored for?',
+          answer: `Data is stored until you no longer need it. Users can choose to delete
+            their data from Pantry at any time. However, inactive baskets will be removed after 30 days.`,
+        },
+      ],
+    }
+  },
+  methods: {
+  },
+}
+
+export = about
diff --git a/src/app/components/banner.ts b/src/app/components/banner.ts
@@ -0,0 +1,23 @@
+// Templates
+const bannerTemplate = require('../templates/banner.html')
+
+const banner = {
+  name: 'banner',
+  template: bannerTemplate,
+  props: ['promo'],
+  data(): any {
+    return {
+      visible: true,
+    }
+  },
+  methods: {
+    clickedCTA(): void {
+      this.$emit('cta-clicked')
+    },
+    hide(): void {
+      this.visible = false
+    },
+  },
+}
+
+export = banner
diff --git a/src/app/components/basket.ts b/src/app/components/basket.ts
@@ -6,13 +6,13 @@ const jsonEditor = require('vue-json-editor').default
 const configs = require('../config.ts')
 
 // Templates
-const basketTemplate = require('../templates/basketTemplate.html')
+const basketTemplate = require('../templates/basket.html')
 
 // Constants
 const API_PATH = configs.apiPath
 
 const basket = {
-  props: ['pantry', 'name', 'ttl', 'active'],
+  props: ['pantryId', 'basket'],
   name: 'basket',
   components: {
     'json-edit': jsonEditor,
@@ -21,31 +21,22 @@ const basket = {
   data(): any {
     return {
       apiPath: API_PATH,
-      basket: null,
     }
   },
-  methods: {
-    getDateOfDeletion(): string {
-      const _currentDate = new Date()
-      _currentDate.setSeconds(this.ttl)
-      return _currentDate.toISOString().split('T')[0]
-    },
-    toggleBasket(name: string): void {
-      this.$emit('toggle-basket', name)
+  computed: {
+    name(): string {
+      return this.basket.name
     },
-    async load(): Promise<void> {
-      if (this.active) {
-        this.basket = null
-        this.toggleBasket(null)
-      } else {
-        const { data } = await axios({
-          method: 'GET',
-          url: `${API_PATH}/pantry/${this.pantry.id}/basket/${this.name}`,
-        })
-        this.basket = data
-        this.toggleBasket(this.name)
-      }
+    data: {
+      get(): any {
+        return this.basket.data
+      },
+      set(newData: any): void {
+        this.basket.data = newData
+      },
     },
+  },
+  methods: {
     refreshDashboard(): void {
       this.$emit('update')
     },
@@ -54,25 +45,20 @@ const basket = {
       if (_response) {
         await axios({
           method: 'DELETE',
-          url: `${API_PATH}/pantry/${this.pantry.id}/basket/${this.name}`,
+          url: `${API_PATH}/pantry/${this.pantryId}/basket/${this.name}`,
         })
         this.refreshDashboard()
       }
     },
-    async update(): Promise<void> {
+    async save(): Promise<void> {
       await axios({
         method: 'PUT',
-        data: this.basket,
-        url: `${API_PATH}/pantry/${this.pantry.id}/basket/${this.name}`,
+        data: this.data,
+        url: `${API_PATH}/pantry/${this.pantryId}/basket/${this.name}`,
       })
       alert(`${this.name} contents saved!`)
       this.refreshDashboard()
     },
-    copyPath(): void {
-      const _path =  `${API_PATH}/pantry/${this.pantry.id}/basket/${this.name}`
-      this.$emit('copy-basket-path', _path)
-      alert('Basket path copied link to clipboard!')
-    },
   },
 }
 

diff --git a/src/app/components/dashboard.ts b/src/app/components/dashboard.ts
@@ -0,0 +1,86 @@
+// External Files
+const axios = require('axios')
+
+// Configs
+const configs = require('../config.ts')
+
+// Constants
+const API_PATH = configs.apiPath
+
+// Templates
+const dashboardTemplate = require('../templates/dashboard.html')
+
+// Components
+const explorer = require('./explorer.ts')
+const login = require('./login.ts')
+const banner = require('./banner.ts')
+
+const dashboard = {
+  name: 'dashboard',
+  template: dashboardTemplate,
+  props: ['pantryID'],
+  components: {
+    explorer,
+    login,
+    banner,
+  },
+  data(): any {
+    return {
+      signedIn: false,
+      id: null,
+      pantry: null,
+      promo: {
+        emoji: '🔥',
+        snippet: 'Free Stickers?',
+        title: 'Fill out our user survey and get free Pantry stickers!',
+      },
+    }
+  },
+  methods: {
+    async login(pantryID: string): Promise<void> {
+      try {
+        await this.fetchPantry(pantryID)
+        this.createSession()
+        this.signedIn = true
+      } catch {
+        alert('Login Failed. Is your PantryID correct?')
+      }
+    },
+    async refresh(): Promise<void> {
+      await this.fetchPantry(this.id)
+    },
+    async fetchPantry(pantryId: string): Promise<void> {
+      const { data } = await axios({
+        method: 'GET',
+        url: `${API_PATH}/pantry/${pantryId}`,
+      })
+      this.id = pantryId
+      this.pantry = { ...data, id: this.id }
+    },
+    async loadFromSession(): Promise<void> {
+      if (sessionStorage.getItem('pantry-id') !== null) {
+        await this.login(sessionStorage.getItem('pantry-id'))
+      }
+    },
+    createSession(): void {
+      sessionStorage.setItem('pantry-id', this.id)
+    },
+    urlPantryID(): string[] {
+      return window.location.search.match(/(\?|&)pantryid\=([^&]*)/)
+    },
+    async loadFromURL(): Promise<void> {
+      if (this.urlPantryID() === null) { return }
+      const _pantryId = decodeURIComponent(this.urlPantryID()[2])
+      await this.login(_pantryId)
+    },
+    bannerCTAClicked(): void {
+      window.location.href = 'https://tally.so/r/m6yPAn'
+    },
+  },
+  mounted(): void {
+    this.loadFromSession()
+    this.loadFromURL()
+  },
+}
+
+export = dashboard
diff --git a/src/app/components/dashboardEmpty.ts b/src/app/components/dashboardEmpty.ts
diff --git a/src/app/components/example.ts b/src/app/components/example.ts
@@ -0,0 +1,17 @@
+// Templates
+const exampleTemplate = require('../templates/example.html')
+
+const example = {
+  name: 'example',
+  template: exampleTemplate,
+  data(): any {
+    return {
+    }
+  },
+  methods: {
+  },
+  mounted(): void {
+  },
+}
+
+export = example