From 3a97be67594a020cba317e4612186c7caec38777 Mon Sep 17 00:00:00 2001 From: Rohan Likhite Date: Sun, 27 Feb 2022 10:39:12 -0500 Subject: [PATCH] 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 --- index.html | 18 +- package.json | 3 - src/app/.DS_Store | Bin 10244 -> 10244 bytes src/app/assets/BitIoLogo.png | Bin 4950 -> 0 bytes src/app/assets/ReadingSideDoodle.svg | 1 - src/app/assets/RollerSkatingDoodle.svg | 1 - src/app/assets/RunningDoodle.svg | 1 - src/app/assets/SprintingDoodle.svg | 1 - src/app/assets/UnboxingDoodle.svg | 1 - src/app/assets/ZombieingDoodle.svg | 1 - src/app/assets/example.svg | 27 +++ src/app/components/about.ts | 50 +++++ src/app/components/banner.ts | 23 +++ src/app/components/basket.ts | 50 ++--- src/app/components/dashboard.ts | 86 ++++++++ src/app/components/dashboardEmpty.ts | 49 ----- src/app/components/example.ts | 17 ++ src/app/components/explorer.ts | 89 +++++++++ src/app/components/explorerEmpty.ts | 27 +++ src/app/components/explorerOnboarding.ts | 18 ++ src/app/components/faq.ts | 14 ++ src/app/components/features.ts | 17 ++ src/app/components/finishSignup.ts | 19 ++ src/app/components/headerBar.ts | 16 ++ src/app/components/home.ts | 95 +++++++++ src/app/components/initialSignup.ts | 29 +++ src/app/components/landingLeft.ts | 9 - src/app/components/landingRight.ts | 228 ---------------------- src/app/components/login.ts | 24 +++ src/app/components/mainContent.ts | 41 ++++ src/app/components/onboarding.ts | 28 +++ src/app/components/quote.ts | 17 ++ src/app/components/sdk.ts | 12 +- src/app/components/stats.ts | 17 ++ src/app/components/topbar.ts | 19 +- src/app/index.ts | 23 +-- src/app/scss/_images.scss | 56 +++--- src/app/scss/_jsonEditor.scss | 9 +- src/app/scss/_text.scss | 79 +------- src/app/scss/_variables.scss | 4 +- src/app/scss/main.scss | 8 +- src/app/templates/about.html | 20 ++ src/app/templates/banner.html | 28 +++ src/app/templates/basket.html | 31 +++ src/app/templates/basketTemplate.html | 29 --- src/app/templates/bottomBar.html | 13 +- src/app/templates/dashboard.html | 21 ++ src/app/templates/dashboardEmpty.html | 32 --- src/app/templates/example.html | 26 +++ src/app/templates/explorer.html | 45 +++++ src/app/templates/explorerEmpty.html | 78 ++++++++ src/app/templates/explorerOnboarding.html | 19 ++ src/app/templates/faq.html | 49 +++++ src/app/templates/features.html | 108 ++++++++++ src/app/templates/finishSignup.html | 37 ++++ src/app/templates/headerBar.html | 9 + src/app/templates/home.html | 28 +++ src/app/templates/initialSignup.html | 46 +++++ src/app/templates/landingLeft.html | 26 --- src/app/templates/landingRight.html | 216 -------------------- src/app/templates/login.html | 29 +++ src/app/templates/mainContent.html | 25 +++ src/app/templates/onboarding.html | 41 ++++ src/app/templates/quote.html | 44 +++++ src/app/templates/sdk.html | 91 ++++++--- src/app/templates/stats.html | 39 ++++ src/app/templates/topbar.html | 65 +++--- yarn.lock | 50 ----- 68 files changed, 1568 insertions(+), 904 deletions(-) delete mode 100644 src/app/assets/BitIoLogo.png delete mode 100644 src/app/assets/ReadingSideDoodle.svg delete mode 100644 src/app/assets/RollerSkatingDoodle.svg delete mode 100644 src/app/assets/RunningDoodle.svg delete mode 100644 src/app/assets/SprintingDoodle.svg delete mode 100644 src/app/assets/UnboxingDoodle.svg delete mode 100644 src/app/assets/ZombieingDoodle.svg create mode 100644 src/app/assets/example.svg create mode 100644 src/app/components/about.ts create mode 100644 src/app/components/banner.ts create mode 100644 src/app/components/dashboard.ts delete mode 100644 src/app/components/dashboardEmpty.ts create mode 100644 src/app/components/example.ts create mode 100644 src/app/components/explorer.ts create mode 100644 src/app/components/explorerEmpty.ts create mode 100644 src/app/components/explorerOnboarding.ts create mode 100644 src/app/components/faq.ts create mode 100644 src/app/components/features.ts create mode 100644 src/app/components/finishSignup.ts create mode 100644 src/app/components/headerBar.ts create mode 100644 src/app/components/home.ts create mode 100644 src/app/components/initialSignup.ts delete mode 100644 src/app/components/landingLeft.ts delete mode 100644 src/app/components/landingRight.ts create mode 100644 src/app/components/login.ts create mode 100644 src/app/components/mainContent.ts create mode 100644 src/app/components/onboarding.ts create mode 100644 src/app/components/quote.ts create mode 100644 src/app/components/stats.ts create mode 100644 src/app/templates/about.html create mode 100644 src/app/templates/banner.html create mode 100644 src/app/templates/basket.html delete mode 100644 src/app/templates/basketTemplate.html create mode 100644 src/app/templates/dashboard.html delete mode 100644 src/app/templates/dashboardEmpty.html create mode 100644 src/app/templates/example.html create mode 100644 src/app/templates/explorer.html create mode 100644 src/app/templates/explorerEmpty.html create mode 100644 src/app/templates/explorerOnboarding.html create mode 100644 src/app/templates/faq.html create mode 100644 src/app/templates/features.html create mode 100644 src/app/templates/finishSignup.html create mode 100644 src/app/templates/headerBar.html create mode 100644 src/app/templates/home.html create mode 100644 src/app/templates/initialSignup.html delete mode 100644 src/app/templates/landingLeft.html delete mode 100644 src/app/templates/landingRight.html create mode 100644 src/app/templates/login.html create mode 100644 src/app/templates/mainContent.html create mode 100644 src/app/templates/onboarding.html create mode 100644 src/app/templates/quote.html create mode 100644 src/app/templates/stats.html diff --git a/index.html b/index.html index c95dd0b..6fa36a5 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,10 @@ - Pantry - Free JSON Storage API + Pantry - Free Cloud JSON Storage API @@ -14,8 +14,8 @@ viewBox=%220 0 100 100%22>🥑" /> - + font-size=%2270%22>🍊" /> + - - +
- - - - - + +
diff --git a/package.json b/package.json index 409fc9a..274863b 100644 --- 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 index e6c49349a3e7ac20d58e2696c3b33be0cc1fb128..013af0e2d3497f7655dacfbe51798f1cf954d05c 100644 GIT binary patch delta 61 zcmZn(XbG6$&nU1lU^hRbz-AtS3eL#^lA@d`#mPBI`T04Fn;Ruf87H?$2_u9y7K*TL JW>@&j4ggmw6K((i delta 33 pcmZn(XbG6$&&aniU^hP_-)0_x3eL?-C5;$2mIbnIW>@&j4gk6W3cvsW diff --git a/src/app/assets/BitIoLogo.png b/src/app/assets/BitIoLogo.png deleted file mode 100644 index c0471ad04c62a6655324a4132c973de51255d3f7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4950 zcmcIoc{tQ-{~m*}Pf`gb)0ExpGnkPrDjZuPM9i4^(qNWm##T6%khR5{3OQ&ID#Z~M zSt_KcNR)^nvL}gnN89_pzw5l`I{*CUy1x7U+@JgN`P|R*T-U_g+wPH(RFVXNKr)sV z<_>~ux!}NwLj>pE0;0CyBEhzB<$^%SZL5b+aG`M^2n0!|JG$^(Y^+IC76VD4vAh6e zFoP{XgFrisgV_|SAHaio0X}r5A$+p>9vnue8N!_jHfS5R8E}YhafAcxJ7VidJ>o|t z(%{BMupPl90RaQxQDDIge70bsgF zG=hpoV_|wkBt{pH*G22VuxKnAg(jddSOi9wgvOIFdaxfqxF8yb=1p=i-~A(&;K>kv zh{t1-P^h4wAY>2@$>R8+Fhn8|g~p<=ScCw9;D#`HlwbstyX_}~Il!fI=xiRH#e}Ug zQoL9JJVUrZ>Gu>E>|eA@?vFAF3Wf@%uu&K!dNrk=KpUIChcXzy&|KcGKtYrrdjFD` z>lnfYP!0f>6~Lhay8;0wZ`;pc>_aRbi+hOmKeYY&{9g)b)L#MF0UZBt<)KkgfIq+x zaB~G%%r|{(k{Jh}@K_v27R&!m_?&|hx`+$jSb0?$>mX)RKU{Q5H1jf zq|<36Jv;%xdjm8Cj;cpP;0Z)5!V8bVA-wgxsQNe>mH_BszUdN-H)l};R%@|3{=0E$ zEUJLxS3OBIeJ>0kuqT4(?X8cX67c{+AHV?!A`P#nt4Gk)MPqe;ve|Lyg1JNS|4-Ic zRWt!3o=C-0F?gCl20%sNaWou)LLlG~R4fgLC3<791S$>=`*&P3mOqPQ!=eeQ`(N)Z z&CKjMEN{BM-~-oT&rX=-E;C&WQCAm%MGDfQQAyq`4uc}F8l6G$0Z?qF&#LhSG6d;b z(7A#xhy0jI`+&ng?)>SnZ~i1vsH@Y$5Kdk713-iScuoI{GXJxLzS9OB0tBRgLCi#2N0~YDEMkRsMQtedt*@l zw`c!0$4`Tq3ar1{QSOgI?4UmvHB zA>s(M?<)N1KlOa4Mg4vJZ_58;ZT&e|uwbv={@N)755M*rfGJ3vBiKn&yFA~6K+-;z z=BAFpug1?Gy}8k8!-GkuEnv6?N_f3J1{Nu0E|D*COnmF*h}cuRX=>g@HQW75WW}ww zjw|U*$Cwm2L>}7^xue53T@KL5gMg(P2Aj{eEIv~y-xJ3jK1alH`9Wp9eI8>=LP7l2 z9PZtFVV{;K!rIn@L{koI$df^@|BRXPBO|Vfepb0A{8Id?NJ3bYW@I_G zNBHR(gcQ0<$UD_7L~JB=8unat3wQ#Ooi=;yrm&juiR10psxF?o>K(+lUkR)g&L1{$ zy=+V%Pk?La61AxVVkqI9Q<35JAeg-k2WTC-+=x(5Ne# zEp*K@q|+*IKU6(GxBpJ!wh4rsuw0s|$(;1Zr5e*GXErFe*6S!FWJdToXtX=0eN50Cz*35PuPlrplg8slgEq|FeEdTauf+YVeA$qW7tTt0w>zQ+Js)p<6 z%h8cqckuHk?dCe@n#u6##CK64evsmp#I@Fr=M%*F@W&#HGr_xC*lxd7zPr9TLeUa5 zFvTECqdj!Wk{vw3 zDK4Nd21L;8;AWeKU0&Vy2RlWK%28d!&ho9-h!=8(!2Drpokm1#n~_+ry5@(lY@;JC zTDp(Ht%W9INp(x9n{9Wyy?rv{p}u`?#U^pln!M}_IZ|ujTE6IE9 z6?tg{u8=BQ(y&Lwa#D3PtCue-X1%MJ0dr&8Kv0bSC*Ny9(dI2zJ_vb$CQh0fc^)eC zl}H<-OYog%$ZgR?alV$rTv2np?3eL9Tf4?Zc9W2@zOanfyGu(N$akNE_(th#TS?lV zYdH0nPWtiVR|XGMDaAf?O>ZPZW?fCFmN7ncyK=RsTMki3_oJ>AM=<3IMrpU*xrOe1 zYSFhdjJzHmFvy-&!NnZe-OucJIlaGELV@2EYtn<FD_s1jBjg}w&pyKG+-wevE0y= z87~l*L$_;_HL~LT!t2Hf;WHY^r_H9Uy?Erf(5VI4*1ok6N$*Wki@lxz=6aqn$eh_JdqT8!(hPY( zZDZ2D<$KO1RbOgDqgkI~uSu6T)}7d=K2_jl6Dyjr7Pg+~+GqN{TI<&HLoTE>GkgS1Fcxe8fTF>Kx`!_j^$T^udR2YuXRMW+ovrqk<|FR2L-)GJ?R32Z z0pEK*vOewX=7?^VQ=^s)q1Rx4X>m6C@Q`F{3%m&^Z*WxJzT3deN{M;jJ@81vDFmp3 z-qD3fJCaxz>R^9!S5>(76rv+D<`XDT?8|HQP$v6+#XG0Yn1#pAKH~gtu=_qwXQ55f zVgB$?uBjYaOjzrDV#mfx>3wqOzAc#2XFB^6J=PNAl1)m$HNpq(Yh132{5@0rlxO0N zqe9Na=B3xx-FJYXhkbl4^!yX?))NmtYWER75_&ON+%s({QhcQW{s_$~$)~b| zJV)i2`kc8qFn)J#XtJZpl_}{c8X!P1`^tEK5``&W}Nemc%!vUjcj>aA?p0C zt<=EVQ431-M@y{GrCpYrW!1DL*F(EA)i-z!4cBf=Gj+3>IWIc===4%e)BTh+?gkDE zJ-~?Ge(!$Vyv64fu1r`(@pf_!#X@I;>hpflgSL4l!S+rW+PoeGTf}^?SZL==zYn;t zzDIiD<`O)hS}Rb){bRRP^GB2%PX<~w|0n3RYF5{&(4KIVunDVJgp9=7R}}9XdFq^L zty!yGv=>mn*eTY!c1u^LiX19VMfHK`hvf957Y~86r?ZoK7E_GLlyl=4n*%|5(@_1I2k5yEKvA3y3;B45iT9n`uOQaa~Zn}W+k$^<5cuU#dD)*SB2Srf@;>$y>enF`o|e# z{^DB<*rUktdZF5`uI*Ym4PlJkN@(YG%^KGH{a|$E(*`r~$f8GeZDWFx=+QG^=ce|u9Cd#5UB))k`X7b2<5dy%GESFY8(u5}|_ zBeOd}rPmpkmFQr!5>meyX!mmXg96C#;N_}5-%^Ck1$9PG89rBaFRu{g4UKLO<9>aZc5vB-^Vjw(Omi6+bdc8cJZ&?vSDDlPxQ+8 z?ECW^asE+i%}U{b!v@8UR!hlbdGn+(Ve{O$u$V~2nFqHHc9d8hwwR1x8^*|hl|6iG zH|9aRZdUv(ZRFLUj9h%>hKl?YksL$SItQi0E1P@MBOr**we?zh_WKiO@jF5pH3v7< z87->~Ng-={J8DNi&!|la*GSfW!Is)ImSoxS=nPDDIiK$u5pv?>Kt)Uak?U<@A~h{j zTI~=rauehDa#~^ZpWSb^_;1tsy;XfmOTrla)Q+P4N>nkTDzIT@>`51LVcNM;+EH)s zr{k{*=33`nQrfTA{`smi>)yMvEYh2R=w0e9*UQ{4N#HkX@5eRWsO+3ta>M0|`Sg20 z_kMZ^awh942P#4`$W=^ktJ|5o6XLBg5P5j=2dPq++Mbn&T|RcF9zSq}c)j`TVqFn` zmIxJFQecNQ%yvXoZk^NOie+3|~% z(~Y#*JJ31VM{$;SrCwz+GK72&tnU3ML9GZ(CRUm&?rq$-a!D9=Pt@JEm6a`hOXQ<& z$aKNt^3r6sIm64{f_YEm#rZ*%iF1)(nbX?RUtfl!ing@(`8e8zYnlIkdd#+2KJ6B6 zsaEWPLf3MG0jMeSkKhe)7xn~o@1LKn2z{wk^RDo~p3l!-OxqS!?b08XOT0TgR0|(# zGv1Uizcv3-9xd^6??Er4cO0|aJJgw>M#vx6^hEMxG^@>4Y;0f0t6V+X{%8)T+WbH*MP9f?LPh)QPV--&s7(`BaDrPkz@d)Ib^ES#w@} zen7d9pgh@oiV|Gy*=9K%UG>`+$%<1F&iPFPIZ5)qymKP0$};o3T7&p2XSZ6EK|=M+ zpI{0WC0)1|`kNq40XGz?;XRn+v$aRkUJGa4y86uJcxX$dBN@88RvQPIhSqS``wpvX z_T3OE?_)OfybI{S99L26#<(qHh?S?>J+)1LTZR{ksFb>3bWB9ddf4r5l?eAFze=IZ y!SD2TNBMy;xc*CiVze>1Y@~=84xf3vYti`eC{U7G2netK^JTfq*1U8lIqF~Si97ZH diff --git a/src/app/assets/ReadingSideDoodle.svg b/src/app/assets/ReadingSideDoodle.svg deleted file mode 100644 index 0d38ec5..0000000 --- a/src/app/assets/ReadingSideDoodle.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/assets/RollerSkatingDoodle.svg b/src/app/assets/RollerSkatingDoodle.svg deleted file mode 100644 index 157530d..0000000 --- a/src/app/assets/RollerSkatingDoodle.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/assets/RunningDoodle.svg b/src/app/assets/RunningDoodle.svg deleted file mode 100644 index 4ae7fa6..0000000 --- a/src/app/assets/RunningDoodle.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/assets/SprintingDoodle.svg b/src/app/assets/SprintingDoodle.svg deleted file mode 100644 index de6fb0a..0000000 --- a/src/app/assets/SprintingDoodle.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/assets/UnboxingDoodle.svg b/src/app/assets/UnboxingDoodle.svg deleted file mode 100644 index 1da5260..0000000 --- a/src/app/assets/UnboxingDoodle.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/assets/ZombieingDoodle.svg b/src/app/assets/ZombieingDoodle.svg deleted file mode 100644 index 14b8651..0000000 --- a/src/app/assets/ZombieingDoodle.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/assets/example.svg b/src/app/assets/example.svg new file mode 100644 index 0000000..2930442 --- /dev/null +++ b/src/app/assets/example.svg @@ -0,0 +1,27 @@ +
\ No newline at end of file diff --git a/src/app/components/about.ts b/src/app/components/about.ts new file mode 100644 index 0000000..5dcfe2c --- /dev/null +++ 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 new file mode 100644 index 0000000..e794629 --- /dev/null +++ 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 index 56855c3..d6c59d3 100644 --- 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 { - 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 { + async save(): Promise { 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 new file mode 100644 index 0000000..0dc5cb3 --- /dev/null +++ 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 { + try { + await this.fetchPantry(pantryID) + this.createSession() + this.signedIn = true + } catch { + alert('Login Failed. Is your PantryID correct?') + } + }, + async refresh(): Promise { + await this.fetchPantry(this.id) + }, + async fetchPantry(pantryId: string): Promise { + const { data } = await axios({ + method: 'GET', + url: `${API_PATH}/pantry/${pantryId}`, + }) + this.id = pantryId + this.pantry = { ...data, id: this.id } + }, + async loadFromSession(): Promise { + 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 { + 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 deleted file mode 100644 index 29d8717..0000000 --- a/src/app/components/dashboardEmpty.ts +++ /dev/null @@ -1,49 +0,0 @@ -// External Files -const axios = require('axios') - -// Configs -const configs = require('../config.ts') - -// Constants -const API_PATH = configs.apiPath -const DOCS_PATH = configs.docsPath - -// Templates -const dashboardEmptyTemplate = require('../templates/dashboardEmpty.html') - -const dashboardEmpty = { - name: 'dashboardEmpty', - template: dashboardEmptyTemplate, - props: ['pantry'], - data(): any { - return { - apiPath: API_PATH, - } - }, - methods: { - showDocs(): void { - window.location.href = DOCS_PATH - }, - async createNewBasket(): Promise { - const _randomNumber = Math.floor((Math.random() * 100) + 1) - const _defaultName = `newBasket${_randomNumber}` - const _name = prompt('What is the name of the new basket?', _defaultName) - if (_name) { - await axios({ - method: 'POST', - data: { - key: 'value', - }, - url: `${API_PATH}/pantry/${this.pantry.id}/basket/${_name}`, - }) - - this.refreshDashboard() - } - }, - refreshDashboard(): void { - this.$emit('update') - }, - }, -} - -export = dashboardEmpty diff --git a/src/app/components/example.ts b/src/app/components/example.ts new file mode 100644 index 0000000..c3a78fe --- /dev/null +++ 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 diff --git a/src/app/components/explorer.ts b/src/app/components/explorer.ts new file mode 100644 index 0000000..6fcd3fb --- /dev/null +++ b/src/app/components/explorer.ts @@ -0,0 +1,89 @@ +// External Files +const axios = require('axios') + +// Configs +const configs = require('../config.ts') + +// Templates +const explorerTemplate = require('../templates/explorer.html') + +// Constants +const API_PATH = configs.apiPath + +// Components +const explorerEmpty = require('./explorerEmpty.ts') +const explorerOnboarding = require('./explorerOnboarding.ts') +const basket = require('./basket.ts') + +const explorer = { + name: 'explorer', + props: ['pantry'], + template: explorerTemplate, + components: { + explorerEmpty, + explorerOnboarding, + basket, + }, + data(): any { + return { + errorsVisible: false, + basket: null, + } + }, + computed: { + errorsExist(): boolean { + return this.pantry.errors && this.pantry.errors.length > 0 + }, + isPantryEmpty(): boolean { + return this.pantry.baskets && this.pantry.baskets.length === 0 + }, + activeBasket(): string { + return this.basket ? this.basket.name : '' + }, + }, + methods: { + getDateOfDeletion(ttl: number): string { + const _currentDate = new Date() + _currentDate.setSeconds(ttl) + return _currentDate.toISOString().split('T')[0] + }, + toggleErrors(): void { + this.errorsVisible = !this.errorsVisible + }, + refresh(): void { + this.$emit('refresh') + this.basket = null + }, + async createBasket(): Promise { + const _randomNumber = Math.floor((Math.random() * 100) + 1) + const _defaultName = `newBasket${_randomNumber}` + const _name = prompt('What is the name of the new basket?', _defaultName) + if (_name) { + await axios({ + method: 'POST', + data: { + key: 'value', + }, + url: `${API_PATH}/pantry/${this.pantry.id}/basket/${_name}`, + }) + + this.refresh() + } + }, + async viewBasket(name: string): Promise { + const { data } = await axios({ + method: 'GET', + url: `${API_PATH}/pantry/${this.pantry.id}/basket/${name}`, + }) + this.basket = { data, name } + }, + loadBasket(): void { + if (this.pantry.baskets && this.pantry.baskets.length > 0) { + const { name } = this.pantry.baskets[0] + this.viewBasket(name) + } + }, + }, +} + +export = explorer diff --git a/src/app/components/explorerEmpty.ts b/src/app/components/explorerEmpty.ts new file mode 100644 index 0000000..8ff4f30 --- /dev/null +++ b/src/app/components/explorerEmpty.ts @@ -0,0 +1,27 @@ +// Configs +const configs = require('../config.ts') + +// Constants +const API_PATH = configs.apiPath +const DOCS_PATH = configs.docsPath + +// Templates +const explorerEmptyTemplate = require('../templates/explorerEmpty.html') + +const explorerEmpty = { + name: 'explorerEmpty', + template: explorerEmptyTemplate, + props: ['pantryId'], + data(): any { + return { + apiPath: API_PATH, + } + }, + methods: { + showDocs(): void { + window.location.href = DOCS_PATH + }, + }, +} + +export = explorerEmpty diff --git a/src/app/components/explorerOnboarding.ts b/src/app/components/explorerOnboarding.ts new file mode 100644 index 0000000..d49ffd4 --- /dev/null +++ b/src/app/components/explorerOnboarding.ts @@ -0,0 +1,18 @@ +// Templates +const explorerOnboardingTemplate = require('../templates/explorerOnboarding.html') + +const explorerOnboarding = { + name: 'explorerOnboarding', + template: explorerOnboardingTemplate, + data(): any { + return { + } + }, + methods: { + loadBasket(): void { + this.$emit('load-basket') + }, + }, +} + +export = explorerOnboarding diff --git a/src/app/components/faq.ts b/src/app/components/faq.ts new file mode 100644 index 0000000..0cba98e --- /dev/null +++ b/src/app/components/faq.ts @@ -0,0 +1,14 @@ +// Templates +const faqTemplate = require('../templates/faq.html') + +const faq = { + name: 'faq', + template: faqTemplate, + props: ['questions'], + data(): any { + return { + } + }, +} + +export = faq diff --git a/src/app/components/features.ts b/src/app/components/features.ts new file mode 100644 index 0000000..112039c --- /dev/null +++ b/src/app/components/features.ts @@ -0,0 +1,17 @@ +// Templates +const featuresTemplate = require('../templates/features.html') + +const features = { + name: 'features', + template: featuresTemplate, + data(): any { + return { + } + }, + methods: { + }, + mounted(): void { + }, +} + +export = features diff --git a/src/app/components/finishSignup.ts b/src/app/components/finishSignup.ts new file mode 100644 index 0000000..31ef097 --- /dev/null +++ b/src/app/components/finishSignup.ts @@ -0,0 +1,19 @@ +// Templates +const finishSignupTemplate = require('../templates/finishSignup.html') + +const finishSignup = { + name: 'finishSignup', + template: finishSignupTemplate, + data(): any { + return { + name: null, + } + }, + methods: { + storeName() { + this.$emit('store-name', this.name) + }, + }, +} + +export = finishSignup diff --git a/src/app/components/headerBar.ts b/src/app/components/headerBar.ts new file mode 100644 index 0000000..441f331 --- /dev/null +++ b/src/app/components/headerBar.ts @@ -0,0 +1,16 @@ +// Templates +const headerTemplate = require('../templates/headerBar.html') + +const headerBar = { + name: 'headerBar', + template: headerTemplate, + props: ['view'], + data(): any { + return { + } + }, + methods: { + }, +} + +export = headerBar diff --git a/src/app/components/home.ts b/src/app/components/home.ts new file mode 100644 index 0000000..6bfa703 --- /dev/null +++ b/src/app/components/home.ts @@ -0,0 +1,95 @@ +// External Files +const axios = require('axios') + +// Configs +const configs = require('../config.ts') + +// Templates +const homeTemplate = require('../templates/home.html') + +// Interfaces +const { IView } = require('../../interfaces/view.ts') + +// Components +const initialSignup = require('./initialSignup.ts') +const finishSignup = require('./finishSignup.ts') +const features = require('./features.ts') +const example = require('./example.ts') +const stats = require('./stats.ts') +const quote = require('./quote.ts') +const banner = require('./banner.ts') + +/* eslint-disable */ +declare global { + interface Window { + grecaptcha: any + } +} +/* eslint-enable */ + +// Constants +const API_PATH = configs.apiPath + +const home = { + name: 'home', + template: homeTemplate, + components: { + initialSignup, + finishSignup, + features, + example, + stats, + quote, + banner, + }, + data(): any { + return { + email: null, + name: null, + finishOnboarding: false, + siteKey: '6Leqqt4aAAAAAFCxWwcRO3YB6zuKKR2CGm8ACRuJ', + promo: { + emoji: '💪', + snippet: 'Integrate Pantry using our SDK!', + title: 'Speed up your development by using one of our many SDKs!', + }, + } + }, + methods: { + beginSignup(email: string) { + this.email = email + this.finishOnboarding = true + }, + beginRegistration(name: string) { + this.name = name + this.createNewPantry() + }, + showReCaptcha() { + window.grecaptcha.render('recaptcha', { + sitekey: this.siteKey, + }) + }, + async createNewPantry(): Promise { + const _recaptchaResponse = window.grecaptcha.getResponse() + + this.accountCreationInProgress = true + const { data } = await axios({ + method: 'POST', + data: { + name: this.name, + description: 'defaultDescription', + contactEmail: this.email, + recaptchaResponse: _recaptchaResponse, + }, + url: `${API_PATH}/pantry/create`, + }) + + this.$emit('account-created', data) + }, + bannerCTAClicked(): void { + this.$emit('change-view', IView.sdk) + }, + }, +} + +export = home diff --git a/src/app/components/initialSignup.ts b/src/app/components/initialSignup.ts new file mode 100644 index 0000000..5ad8874 --- /dev/null +++ b/src/app/components/initialSignup.ts @@ -0,0 +1,29 @@ +// Templates +const initialSignupTemplate = require('../templates/initialSignup.html') + +const initialSignup = { + name: 'initialSignup', + template: initialSignupTemplate, + data(): any { + return { + email: null, + } + }, + methods: { + showReCaptcha() { + this.$emit('show-recaptcha') + }, + + storeEmail() { + this.$emit('store-email', this.email) + }, + + signupValid() { + // eslint-disable-next-line max-len + const _emailRegix = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ + return _emailRegix.test(String(this.email).toLowerCase()) + }, + }, +} + +export = initialSignup diff --git a/src/app/components/landingLeft.ts b/src/app/components/landingLeft.ts deleted file mode 100644 index 9352cf8..0000000 --- a/src/app/components/landingLeft.ts +++ /dev/null @@ -1,9 +0,0 @@ -const landingLeftTemplate = require('../templates/landingLeft.html') - -const landingLeft = { - name: 'landingLeft', - template: landingLeftTemplate, - props: ['view'], -} - -export = landingLeft diff --git a/src/app/components/landingRight.ts b/src/app/components/landingRight.ts deleted file mode 100644 index 7b4a88c..0000000 --- a/src/app/components/landingRight.ts +++ /dev/null @@ -1,228 +0,0 @@ -// External Files -const axios = require('axios') - -// Configs -const configs = require('../config.ts') - -// Templates -const landingRightTemplate = require('../templates/landingRight.html') - -// Interfaces -const { IView } = require('../../interfaces/view.ts') - -// Components -const basket = require('./basket.ts') -const dashboardEmpty = require('./dashboardEmpty.ts') -const sdk = require('./sdk.ts') - -/* eslint-disable */ -declare global { - interface Window { - grecaptcha: any - } -} -/* eslint-enable */ - -// Constants -const API_PATH = configs.apiPath -const DOCS_PATH = configs.docsPath - -const landingRight = { - props: ['view'], - name: 'landingRight', - components: { - basket, - dashboardEmpty, - sdk, - }, - template: landingRightTemplate, - data(): any { - return { - apiPath: API_PATH, - siteKey: '6Leqqt4aAAAAAFCxWwcRO3YB6zuKKR2CGm8ACRuJ', - systemStatus: null, - signup: { - email: null, - accountName: null, - }, - pantry: { - id: null, - data: null, - }, - activeBasket: null, - showErrors: false, - showNameField: false, - copyPantryIdMessage: 'copy', - accountCreationInProgress: false, - } - }, - filters: { - capitalizeKey(key: boolean): string { - if (!key) { - return '' - } - - const _key = key.toString() - return(`${_key.charAt(0).toUpperCase()}${_key.slice(1).replace(/([A-Z][a-z])/g, ' $1')}`) - }, - formatStatus(entity: string, status: number|string): any { - if (entity === 'activeAccounts') { - return status === -1 ? 'unknown' : status.toString() - } - return status ? 'Operational' : 'Down' - }, - trim(text: any): any { - return String(text).trim() - }, - }, - computed: { - isStatusPositive(): any { - if (!this.systemStatus) { - return false - } - - const _statusArray = Object.values(this.systemStatus) - const _operational = _statusArray.filter((status) => status) - - return _operational.length === _statusArray.length - }, - - accountHasErrors(): any { - return this.pantry.data.errors && this.pantry.data.errors.length > 0 - }, - }, - methods: { - async createNewPantry(): Promise { - const _recaptchaResponse = window.grecaptcha.getResponse() - const { accountName, email } = this.signup - - this.accountCreationInProgress = true - const { data } = await axios({ - method: 'POST', - data: { - name: accountName, - description: 'defaultDescription', - contactEmail: email, - recaptchaResponse: _recaptchaResponse, - }, - url: `${API_PATH}/pantry/create`, - }) - - this.pantry.id = data - this.$emit('change-view', IView.created) - }, - async fetchPantry(pantryId: string) { - const { data } = await axios({ - method: 'GET', - url: `${API_PATH}/pantry/${pantryId}`, - }) - this.pantry.id = pantryId - this.pantry.data = data - }, - async toggleBasket(name: string) { - if (this.activeBasket === name) { - this.activeBasket = null - } else { - this.activeBasket = name - } - }, - toggleErrors() { - this.showErrors = !this.showErrors - }, - signupValid() { - // eslint-disable-next-line max-len - const _emailRegix = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ - return _emailRegix.test(String(this.signup.email).toLowerCase()) - }, - signupNameValid(): boolean { - return this.signup.accountName !== null - }, - pantryIDValid() { - return this.pantry.id !== null - }, - createAccountButtonDisabled(): boolean { - return !this.signupNameValid() || this.accountCreationInProgress - }, - getStarted() { - this.loadPantry() - this.$emit('change-view', IView.dashboard) - }, - goHome() { - this.$emit('change-view', IView.home) - }, - showDocs() { - window.location.href = DOCS_PATH - }, - copyPantryId() { - this.$emit('copy-text', this.pantry.id) - this.copyPantryIdMessage = 'copied!' - }, - copyText(text: string) { - this.$emit('copy-text', text) - }, - beginSignup() { - this.showNameField = true - }, - showReCaptcha() { - window.grecaptcha.render('recaptcha', { - sitekey: this.siteKey, - }) - }, - destroyReCaptcha() { - window.grecaptcha.reset() - document.getElementsByTagName('iframe')[0].remove() - this.recaptchaVisible = false - }, - loadPantry() { - if (this.pantryIDValid()) { - this.fetchPantry(this.pantry.id) - } - }, - fetchURLParams() { - if (this.view === IView.dashboard) { - const _pantryId = decodeURIComponent(window.location.search.match(/(\?|&)pantryid\=([^&]*)/)[2]) - this.fetchPantry(_pantryId) - } - }, - async fetchStatus() { - const { data } = await axios({ - method: 'GET', - url: `${API_PATH}/system/status`, - }) - this.systemStatus = data - }, - getStatusString() { - const _positiveMessage = 'All Services Operational' - const _negativeMessage = 'Pantry is Experiencing Issues' - - const _positiveStatus = this.isStatusPositive - - return _positiveStatus ? _positiveMessage : _negativeMessage - }, - async refreshDashboard(): Promise { - this.fetchPantry(this.pantry.id) - }, - async createNewBasket(): Promise { - const _randomNumber = Math.floor((Math.random() * 100) + 1) - const _defaultName = `newBasket${_randomNumber}` - const _name = prompt('What is the name of the new basket?', _defaultName) - if (_name) { - await axios({ - method: 'POST', - data: { - key: 'value', - }, - url: `${API_PATH}/pantry/${this.pantry.id}/basket/${_name}`, - }) - - this.fetchPantry(this.pantry.id) - } - }, - }, - mounted() { - this.fetchURLParams() - this.fetchStatus() - }, -} - -export = landingRight diff --git a/src/app/components/login.ts b/src/app/components/login.ts new file mode 100644 index 0000000..c9a3951 --- /dev/null +++ b/src/app/components/login.ts @@ -0,0 +1,24 @@ +// Templates +const loginTemplate = require('../templates/login.html') + +// Interfaces + +const login = { + name: 'login', + template: loginTemplate, + data(): any { + return { + id: null, + } + }, + methods: { + idInvalid() { + return this.id === null + }, + login(): void { + this.$emit('login', this.id) + }, + }, +} + +export = login diff --git a/src/app/components/mainContent.ts b/src/app/components/mainContent.ts new file mode 100644 index 0000000..0d65662 --- /dev/null +++ b/src/app/components/mainContent.ts @@ -0,0 +1,41 @@ +// Templates +const mainContentTemplate = require('../templates/mainContent.html') + +// Interfaces +const { IView } = require('../../interfaces/view.ts') + +// Components +const dashboard = require('./dashboard.ts') +const sdk = require('./sdk.ts') +const home = require('./home.ts') +const onboarding = require('./onboarding.ts') +const about = require('./about.ts') + +const mainContent = { + props: ['view'], + name: 'mainContent', + components: { + dashboard, + sdk, + home, + onboarding, + about, + }, + template: mainContentTemplate, + data(): any { + return { + pantryID: null, + } + }, + methods: { + changeView(view: typeof IView): void { + this.$emit('change-view', view) + }, + displayOnboarding(pantryID: string): void { + this.pantryID = pantryID + this.$emit('change-view', IView.created) + }, + }, +} + +export = mainContent diff --git a/src/app/components/onboarding.ts b/src/app/components/onboarding.ts new file mode 100644 index 0000000..641f4f4 --- /dev/null +++ b/src/app/components/onboarding.ts @@ -0,0 +1,28 @@ +// Templates +const onboardingTemplate = require('../templates/onboarding.html') + +// Interfaces +const { IView } = require('../../interfaces/view.ts') + +const onboarding = { + name: 'onboarding', + template: onboardingTemplate, + props: ['pantryID'], + data(): any { + return { + } + }, + methods: { + getStarted(): void { + this.$emit('change-view', IView.dashboard) + }, + createSession(): void { + sessionStorage.setItem('pantry-id', this.pantryID) + }, + }, + mounted(): void { + this.createSession() + }, +} + +export = onboarding diff --git a/src/app/components/quote.ts b/src/app/components/quote.ts new file mode 100644 index 0000000..7c9c066 --- /dev/null +++ b/src/app/components/quote.ts @@ -0,0 +1,17 @@ +// Templates +const quoteTemplate = require('../templates/quote.html') + +const quote = { + name: 'quote', + template: quoteTemplate, + data(): any { + return { + } + }, + methods: { + }, + mounted(): void { + }, +} + +export = quote diff --git a/src/app/components/sdk.ts b/src/app/components/sdk.ts index 91ddbbc..a9ffd61 100644 --- a/src/app/components/sdk.ts +++ b/src/app/components/sdk.ts @@ -9,26 +9,26 @@ const sdk = { sdks: [ { name: 'pantry-node', - platform: 'Node', - hostPlatform: 'Github', + platform: 'Node.js', + author: 'Team Pantry', link: 'https://github.com/imRohan/pantry-node', }, { name: 'pantry-cloud', - platform: 'Node', - hostPlatform: 'Github', + platform: 'Node.js', + author: 'rdarida', link: 'https://github.com/rdarida/pantry-cloud', }, { name: 'bash-client', platform: 'Bash', - hostPlatform: 'Github', + author: 'Team Pantry', link: 'https://github.com/imRohan/Pantry/tree/master/client-libraries/Bash', }, { name: 'libPantryDotNet', platform: '.Net', - hostPlatform: 'Github', + author: 'Krutonium', link: 'https://github.com/Krutonium/libPantryDotNet', }, ], diff --git a/src/app/components/stats.ts b/src/app/components/stats.ts new file mode 100644 index 0000000..cb1c44b --- /dev/null +++ b/src/app/components/stats.ts @@ -0,0 +1,17 @@ +// Templates +const statsTemplate = require('../templates/stats.html') + +const stats = { + name: 'stats', + template: statsTemplate, + data(): any { + return { + } + }, + methods: { + }, + mounted(): void { + }, +} + +export = stats diff --git a/src/app/components/topbar.ts b/src/app/components/topbar.ts index 0911da8..4df767e 100644 --- a/src/app/components/topbar.ts +++ b/src/app/components/topbar.ts @@ -7,17 +7,21 @@ const configs = require('../config.ts') // Interfaces const { IView } = require('../../interfaces/view.ts') +// Components +const headerBar = require('./headerBar.ts') + // Constants const DOCS_PATH = configs.docsPath + const topbar = { name: 'topbar', template: topbarTemplate, - props: [], + props: ['view'], + components: { + headerBar, + }, methods: { - showStatus() { - this.$emit('change-view', IView.status) - }, showAbout() { this.$emit('change-view', IView.about) }, @@ -33,6 +37,13 @@ const topbar = { showSDK() { this.$emit('change-view', IView.sdk) }, + + topbarClass(): string { + if (this.view !== IView.home) { + return 'bg-orange-100 pb-52' + } + return '' + }, }, } diff --git a/src/app/index.ts b/src/app/index.ts index 99818e4..5934bfb 100644 --- a/src/app/index.ts +++ b/src/app/index.ts @@ -1,17 +1,5 @@ // External Files -import { library } from '@fortawesome/fontawesome-svg-core' -import { faEye, faEyeSlash, faClipboard, faTrash } from '@fortawesome/free-solid-svg-icons' -import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' const vue = require('vue') -const vueClipboard = require('vue-clipboard2') - -// Vue Setup -vue.use(vueClipboard) -vue.component('font-awesome-icon', FontAwesomeIcon) -library.add(faClipboard) -library.add(faEye) -library.add(faEyeSlash) -library.add(faTrash) // CSS require('./scss/main.scss') @@ -20,17 +8,14 @@ require('./scss/main.scss') const { IView } = require('../interfaces/view.ts') // Components -const landingLeft = require('./components/landingLeft.ts') -const landingRight = require('./components/landingRight.ts') +const mainContent = require('./components/mainContent.ts') const topbar = require('./components/topbar.ts') const bottomBar = require('./components/bottomBar.ts') - const pantry = new vue({ el: '.app', components: { - landingLeft, - landingRight, + mainContent, topbar, bottomBar, }, @@ -43,10 +28,6 @@ const pantry = new vue({ changeView(view: string) { this.view = IView[view] }, - copyText(text: string) { - const _container = this.$refs.container - this.$copyText(text, _container) - }, checkIfInView() { if (window.location.search) { const _view = decodeURIComponent(window.location.search.match(/(\?|&)show\=([^&]*)/)[2]) diff --git a/src/app/scss/_images.scss b/src/app/scss/_images.scss index fdf6b84..6d56edd 100644 --- a/src/app/scss/_images.scss +++ b/src/app/scss/_images.scss @@ -1,45 +1,37 @@ .images { - &--blob { - top: 0; - position: fixed; - z-index: 1; - overflow: visible; - } &__character { - position: fixed; - width: 30vw; + width: 26vw; + height: 36vh; + background-repeat: no-repeat; + z-index: 2; + } + + &__hero { + width: 50%; height: 30vw; - left: 0; + background-size: contain; background-repeat: no-repeat; z-index: 2; } + &--home { background-image: url('../assets/MeditatingDoodle.svg'), none; } - &--created { - background-image: url('../assets/SprintingDoodle.svg'), none; - } - &--getStarted { - background-image: url('../assets/ReadingSideDoodle.svg'), none; - } - &--dashboard { - background-image: url('../assets/UnboxingDoodle.svg'), none; - } - &--about { - background-image: url('../assets/ZombieingDoodle.svg'), none; - } - &--status { - background-image: url('../assets/RollerSkatingDoodle.svg'), none; - } - &--sdk { - background-image: url('../assets/RunningDoodle.svg'), none; + + &--example { + background-image: url('../assets/example.svg'), none; } - &__sponsor { - background-image: url('../assets/BitIoLogo.png'); - background-repeat: no-repeat; - background-size: 100% 100%; - width: 115px; - height: 33px; + + &--floating { + animation-name: floating; + animation-duration: 3s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; } } +@keyframes floating { + 0% { transform: translate(0, 0px); } + 50% { transform: translate(0, 15px); } + 100% { transform: translate(0, -0px); } +} diff --git a/src/app/scss/_jsonEditor.scss b/src/app/scss/_jsonEditor.scss index cca0286..08a6c74 100644 --- a/src/app/scss/_jsonEditor.scss +++ b/src/app/scss/_jsonEditor.scss @@ -1,9 +1,10 @@ .jsoneditor { border-color: $orange !important; + border-radius: 0.375rem; &-menu { - background-color: $darkOrange !important; - border-color: $darkOrange !important; + background-color: $orange !important; + border-color: $orange !important; a { display: none; } @@ -21,3 +22,7 @@ } } } + +.ace-jsoneditor { + min-height: 50vh !important; +} diff --git a/src/app/scss/_text.scss b/src/app/scss/_text.scss index f56ceb7..71c5068 100644 --- a/src/app/scss/_text.scss +++ b/src/app/scss/_text.scss @@ -1,81 +1,6 @@ -@import url('https://fonts.googleapis.com/css?family=Playfair+Display:900|Roboto&display=swap'); +@import url('https://fonts.googleapis.com/css?family=Playfair+Display:900'); -h1, h2 { +.logo { font-family: 'Playfair Display', 'serif'; line-height: 1em; } - -h1, p { - color: $text-color; -} - -h1 { - font-size: 5vw; -} - -h2 { - color: $secondary-color; - font-size: 2vw; -} - -p { - color: $text-color; - font-family: 'Roboto', 'sans-serif'; - line-height: 1.5em; -} - -a:any-link { - color: $secondary-color; - font-weight: bold; - text-decoration: none; - cursor: pointer; -} - -.text { - &__container { - padding: 1em; - border-radius: 5px; - background: rgba(255,255,255,0.5); - color: $text-color; - overflow-wrap: anywhere; - - &--button { - background: $primary-color; - color: $white; - cursor: pointer; - text-align: center; - } - } - &--code { - font-family: 'courier', 'sans-serif'; - } - &--key { - font-weight: bold; - text-align: center; - } - &__button { - float: right; - color: $secondary-color; - cursor: pointer; - margin: 0 5px; - } - &--light { - color: $secondary-color; - } - &--dark { - color: $primary-color !important; - } - &--green { - color: $green !important; - } - &--red { - color: $red !important; - } - &--bold { - font-weight: 700 - } - &--right { - text-align: right; - float: right; - } -} diff --git a/src/app/scss/_variables.scss b/src/app/scss/_variables.scss index b970314..501884e 100644 --- a/src/app/scss/_variables.scss +++ b/src/app/scss/_variables.scss @@ -1,14 +1,12 @@ // Colors $white: #FFFFFF; $green: #8CA994; -$orange: #FFE2C9; -$darkOrange: #E0AC95; +$orange: #FB923C; $purple: #08004B; $red: #F56969; $background: $orange; $primary-color: $green; -$secondary-color: $darkOrange; $text-color: $purple; // Dimensions diff --git a/src/app/scss/main.scss b/src/app/scss/main.scss index 6911a9a..d4f423b 100644 --- a/src/app/scss/main.scss +++ b/src/app/scss/main.scss @@ -1,10 +1,4 @@ @import 'variables'; -@import 'app'; -@import 'text'; -@import 'landing'; @import 'images'; -@import 'topbar'; -@import 'bottomBar'; -@import 'basket'; -@import 'banner'; +@import 'text'; @import 'jsonEditor'; diff --git a/src/app/templates/about.html b/src/app/templates/about.html new file mode 100644 index 0000000..9e35ec4 --- /dev/null +++ b/src/app/templates/about.html @@ -0,0 +1,20 @@ +
+
+
+
+
+

+ + Learn about Pantry + + + Frequently Asked Questions + +

+
+ +
+
+
+ +
diff --git a/src/app/templates/banner.html b/src/app/templates/banner.html new file mode 100644 index 0000000..6f9bb6c --- /dev/null +++ b/src/app/templates/banner.html @@ -0,0 +1,28 @@ +
+
+
+

+ + {{ promo.emoji || 'đź‘‹ '}} + + {{ promo.snippet }} + + + + +

+
+
+ +
+
+
diff --git a/src/app/templates/basket.html b/src/app/templates/basket.html new file mode 100644 index 0000000..e78c493 --- /dev/null +++ b/src/app/templates/basket.html @@ -0,0 +1,31 @@ +
+
+
+
+

+ {{ name }} +

+
+ +
+
+
+ +
+
+
+
+ + diff --git a/src/app/templates/basketTemplate.html b/src/app/templates/basketTemplate.html deleted file mode 100644 index ee8e03a..0000000 --- a/src/app/templates/basketTemplate.html +++ /dev/null @@ -1,29 +0,0 @@ -
  • - {{ this.name }} - - - Expiry Date: {{ getDateOfDeletion() }} - - - - - - - - - - - - -
  • diff --git a/src/app/templates/bottomBar.html b/src/app/templates/bottomBar.html index c696a4d..1781ca9 100644 --- a/src/app/templates/bottomBar.html +++ b/src/app/templates/bottomBar.html @@ -1,9 +1,10 @@ -
    - + diff --git a/src/app/templates/dashboard.html b/src/app/templates/dashboard.html new file mode 100644 index 0000000..9273ee1 --- /dev/null +++ b/src/app/templates/dashboard.html @@ -0,0 +1,21 @@ +
    +
    + +
    +
    +
    + + +
    +
    +
    diff --git a/src/app/templates/dashboardEmpty.html b/src/app/templates/dashboardEmpty.html deleted file mode 100644 index cd247d8..0000000 --- a/src/app/templates/dashboardEmpty.html +++ /dev/null @@ -1,32 +0,0 @@ -
    -

    - Our API is organized around - - REST - , and accepts JSON-encoded request bodies. To get started, please create - your first basket in your pantry by following our API documentation. -

    - - -

    - Or, if you're familiar with using the terminal, paste a snippet from - below to create your first basket, titled "testBasket" -

    -

    Unix/Linux - Curl

    -

    - curl -XPOST -H "Content-type: application/json" -d '{ - "key": "value" - }' '{{apiPath}}/pantry/{{this.pantry.id}}/basket/testBasket' -

    -

    Windows - Powershell

    -

    - Invoke-WebRequest -Uri '{{apiPath}}/pantry/{{this.pantry.id}}/basket/testBasket' -Method POST -ContentType 'application/json' -Body '{ - "key": "value" - }' -

    -
    diff --git a/src/app/templates/example.html b/src/app/templates/example.html new file mode 100644 index 0000000..0278e9d --- /dev/null +++ b/src/app/templates/example.html @@ -0,0 +1,26 @@ +
    +
    +
    +
    +
    +

    + Jump Right In +

    +

    + Quickly add Pantry to your project using one of our + easy-to-use client libraries. +

    +
    + Node.js + Bash + .NET +
    +
    +
    +
    +
    +
    +
    diff --git a/src/app/templates/explorer.html b/src/app/templates/explorer.html new file mode 100644 index 0000000..1fe037d --- /dev/null +++ b/src/app/templates/explorer.html @@ -0,0 +1,45 @@ +
    + +
    + + + +
    +
    diff --git a/src/app/templates/explorerEmpty.html b/src/app/templates/explorerEmpty.html new file mode 100644 index 0000000..04b7441 --- /dev/null +++ b/src/app/templates/explorerEmpty.html @@ -0,0 +1,78 @@ +
    +
    +
    +
    +

    + + Welcome to Pantry + + + Getting Started + +

    + +

    + The API is organized around + + REST, + + and accepts JSON-encoded request bodies. To get started, create + your first basket in your pantry by following our + + API documentation. + +

    + +

    + If you're ok using the terminal, paste a snippet from + below to create your first basket. +

    + +

    + Or, click on 'Create new basket' from the sidebar on the left and use + our dashboard to create one. +

    + +
    +

    + Curl +

    +

    + Unix/Linux +

    +
    +

    + curl -XPOST -H "Content-type: application/json" -d '{ + "key": "value" + }' '{{apiPath}}/pantry/{{this.pantryId}}/basket/testBasket' +

    + +
    +

    + Powershell +

    +

    + Windows +

    +
    + +

    + Invoke-WebRequest -Uri '{{apiPath}}/pantry/{{this.pantryId}}/basket/testBasket' -Method POST -ContentType 'application/json' -Body '{ + "key": "value" + }' +

    + + +
    +
    +
    +
    diff --git a/src/app/templates/explorerOnboarding.html b/src/app/templates/explorerOnboarding.html new file mode 100644 index 0000000..ead7f9e --- /dev/null +++ b/src/app/templates/explorerOnboarding.html @@ -0,0 +1,19 @@ +
    + +
    diff --git a/src/app/templates/faq.html b/src/app/templates/faq.html new file mode 100644 index 0000000..838f142 --- /dev/null +++ b/src/app/templates/faq.html @@ -0,0 +1,49 @@ +
    +
    +
    +

    + Looking for more information? +

    +

    + Can’t find the answer you’re looking for? Ask the developers directly + by + starting a + discussion on GitHub. +

    +
    +
    +
    + +
    +
    + How can I Contribute? +
    +
    + If you'd like to help develop Pantry, or have an issue to report, + please visit the + + GitHub repo + . + + Buy Me A Coffee + +
    +
    +
    +
    +
    +
    diff --git a/src/app/templates/features.html b/src/app/templates/features.html new file mode 100644 index 0000000..7ecd89e --- /dev/null +++ b/src/app/templates/features.html @@ -0,0 +1,108 @@ +
    +
    +

    Effortless

    +

    A better JSON storage solution

    +

    + CRUD your data on the cloud in just 2 minutes either by using our + API or dashboard. Perfect for small projects and hackathons! +

    +
    + +
    +
    +
    +
    +
    + + + +
    +

    + Simple API +

    +
    +
    + We've built a very straightforward and easy-to-use API which you can + use to CRUD your Pantry's data. Simple and intuitive - that's the + goal. +
    +
    + +
    +
    +
    + + + + + +
    +

    + Generous Storage Limit +

    +
    +
    + Each Pantry can hold over 100mb of data. That's a lot of JSON, and we + think it's a great starting point for developers to build their + projects. +
    +
    + +
    +
    +
    + +
    +

    + Powerful Dashboard +

    +
    +
    + We also offer a interactive dashboard which you can use to interact with + your Pantry's baskets. This intuitive interface is especially helpful + when debugging your application! +
    +
    + +
    +
    +
    + + + +
    +

    + 100% Open Source +

    +
    +
    + This project is open-source and supported by a wonderful group of + developers who continue to improve the platform. +
    +
    +
    +
    +
    diff --git a/src/app/templates/finishSignup.html b/src/app/templates/finishSignup.html new file mode 100644 index 0000000..4de696a --- /dev/null +++ b/src/app/templates/finishSignup.html @@ -0,0 +1,37 @@ +
    +

    + Almost there, just + + one more step! + +

    +

    + Let's give your pantry a name! This could be the name of your project + or anything that means something to you. +

    +
    +
    +
    +
    + + +
    +
    + +
    +
    +

    + Give your Pantry a creative name +

    +
    +
    +
    diff --git a/src/app/templates/headerBar.html b/src/app/templates/headerBar.html new file mode 100644 index 0000000..b612a22 --- /dev/null +++ b/src/app/templates/headerBar.html @@ -0,0 +1,9 @@ + diff --git a/src/app/templates/home.html b/src/app/templates/home.html new file mode 100644 index 0000000..dd198e2 --- /dev/null +++ b/src/app/templates/home.html @@ -0,0 +1,28 @@ +
    + +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    + + + + +
    +
    diff --git a/src/app/templates/initialSignup.html b/src/app/templates/initialSignup.html new file mode 100644 index 0000000..635e1dd --- /dev/null +++ b/src/app/templates/initialSignup.html @@ -0,0 +1,46 @@ +
    +

    + Free + yourself from + data storage + woes. +

    +

    + Focus your efforts on building your next project and leave the + data storage to us. We help speed up your development time, + letting you build awesome things fast! +

    +
    +
    +
    +
    + + +
    +
    + +
    +
    +

    + Sorry, but that email is invalid. +

    +

    + Don't worry, we'll only contact you if it's important. +

    +
    +
    +
    diff --git a/src/app/templates/landingLeft.html b/src/app/templates/landingLeft.html deleted file mode 100644 index f01d568..0000000 --- a/src/app/templates/landingLeft.html +++ /dev/null @@ -1,26 +0,0 @@ -
    - - - - - - - - - - -
    -
    diff --git a/src/app/templates/landingRight.html b/src/app/templates/landingRight.html deleted file mode 100644 index a90e7e4..0000000 --- a/src/app/templates/landingRight.html +++ /dev/null @@ -1,216 +0,0 @@ -
    - - - - - - - - - - - -
    diff --git a/src/app/templates/login.html b/src/app/templates/login.html new file mode 100644 index 0000000..56c6aba --- /dev/null +++ b/src/app/templates/login.html @@ -0,0 +1,29 @@ +
    +

    + Login +

    +
    +
    +
    + +
    + +
    +
    + +
    + +
    +
    +
    +
    diff --git a/src/app/templates/mainContent.html b/src/app/templates/mainContent.html new file mode 100644 index 0000000..8669c1e --- /dev/null +++ b/src/app/templates/mainContent.html @@ -0,0 +1,25 @@ +
    + + + + + + + + + + + +
    diff --git a/src/app/templates/onboarding.html b/src/app/templates/onboarding.html new file mode 100644 index 0000000..674f28a --- /dev/null +++ b/src/app/templates/onboarding.html @@ -0,0 +1,41 @@ +
    +
    +
    +
    +
    +

    + + Success! + + + Save your PantryID + +

    +

    + Here is your PantryID! Think of this as your API key, and + keep this safe as we won't be sharing it with you again. Once you've + saved it somewhere, hit the button below and we'll show you how to + add items to your pantry. +

    + +

    + {{ pantryID }} +

    + + +
    +
    +
    +
    +
    diff --git a/src/app/templates/quote.html b/src/app/templates/quote.html new file mode 100644 index 0000000..56a94e5 --- /dev/null +++ b/src/app/templates/quote.html @@ -0,0 +1,44 @@ +
    +
    + + Workcation + + + + + + + + +
    +
    +
    +

    + “ + Pantry's simple design, and features have been instrumental in + realizing [my] little project + ” +

    +
    +
    +
    +
    +
    + Somajit Dey +
    + + + +
    + Department of Physics, University of Calcutta +
    +
    +
    +
    +
    +
    +
    +
    diff --git a/src/app/templates/sdk.html b/src/app/templates/sdk.html index ae3d01f..6eb9f29 100644 --- a/src/app/templates/sdk.html +++ b/src/app/templates/sdk.html @@ -1,26 +1,67 @@ -
    -

    - Developer Tools -

    +
    +
    +
    +
    +
    +

    + + Libraries and SDK's + + + Developer Tools + +

    +

    + Speed up development by integrating Pantry into your + application using one of these libraries. +

    -

    - Get up and running with these user-created helper libraries, and integration tools. -

    - - - - - - - - - - -
    PlatformDocumentation
    -
    +
    +
      + +
    +
    +
    +
    +
    +
    + diff --git a/src/app/templates/stats.html b/src/app/templates/stats.html new file mode 100644 index 0000000..ebaadfd --- /dev/null +++ b/src/app/templates/stats.html @@ -0,0 +1,39 @@ +
    +
    +
    +

    + Trusted by developers from over 100 countries +

    +

    + Here's a snapshot of what we've accomplished in the last month +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Data Served
    +
    10GB
    +
    +
    +
    Active Projects
    +
    400+
    +
    +
    +
    Requests Handled
    +
    1.91M
    +
    +
    +
    +
    +
    +
    +
    diff --git a/src/app/templates/topbar.html b/src/app/templates/topbar.html index e8ea582..6bc1fe0 100644 --- a/src/app/templates/topbar.html +++ b/src/app/templates/topbar.html @@ -1,32 +1,37 @@ -
    - - - - - - -