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