From 6975df44f0a4ae0de3b3eda94c660219dd514b31 Mon Sep 17 00:00:00 2001 From: Steef Min Date: Thu, 1 Oct 2020 00:16:16 +0200 Subject: [PATCH 01/12] add cache control headers --- functions/date.js | 36 ++++++++++++++++++++++++++---------- 1 file changed, 26 insertions(+), 10 deletions(-) diff --git a/functions/date.js b/functions/date.js index cced094..29240e6 100644 --- a/functions/date.js +++ b/functions/date.js @@ -48,21 +48,30 @@ async function getTypeDoc(type) { export async function handler(event) { if (event.httpMethod !== 'GET') { console.log(`--> method not supported`) - return {statusCode: 405, body: JSON.stringify({error: 'Method not allowed'})} + return { + statusCode: 405, + body: JSON.stringify({error: 'Method not allowed'}), + headers: {'Cache-Control': 'public, max-age=3600, immutable'}} } const date = new Date() if (sundown(date)) { console.log(`--> sun is down`) - return {statusCode: 200, body: JSON.stringify( - { - description: 'Er wordt niet gevlagd als de zon onder is.', - flagState: 'Lowered', - foreground: [], - background: 'night' + return { + statusCode: 200, + body: JSON.stringify( + { + description: 'Er wordt niet gevlagd als de zon onder is.', + flagState: 'Lowered', + foreground: [], + background: 'night' + }, + ), + headers: { + 'Cache-Control': 'public, max-age=3600, immutable', } - )} + } } const fallbackResponse = { @@ -74,7 +83,10 @@ export async function handler(event) { foreground: [], background: 'day' } - ) + ), + headers: { + 'Cache-Control': 'public, max-age=3600, immutable', + } }; const documentPath = formatDate(date); @@ -98,6 +110,10 @@ export async function handler(event) { return { statusCode: 200, - body: JSON.stringify(typeDoc.data()) + body: JSON.stringify(typeDoc.data()), + headers: { + 'Cache-Control': 'public, max-age=3600, immutable', + } } } + From a952748887ce836ace6648221a65e57dbb96f08d Mon Sep 17 00:00:00 2001 From: Steef Min Date: Thu, 1 Oct 2020 00:21:01 +0200 Subject: [PATCH 02/12] don't issue immutable on cache control --- functions/date.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/functions/date.js b/functions/date.js index 29240e6..aba0e11 100644 --- a/functions/date.js +++ b/functions/date.js @@ -51,7 +51,7 @@ export async function handler(event) { return { statusCode: 405, body: JSON.stringify({error: 'Method not allowed'}), - headers: {'Cache-Control': 'public, max-age=3600, immutable'}} + headers: {'Cache-Control': 'public, max-age=604800'}} } const date = new Date() @@ -69,7 +69,7 @@ export async function handler(event) { }, ), headers: { - 'Cache-Control': 'public, max-age=3600, immutable', + 'Cache-Control': 'public, max-age=3600', } } } @@ -85,7 +85,7 @@ export async function handler(event) { } ), headers: { - 'Cache-Control': 'public, max-age=3600, immutable', + 'Cache-Control': 'public, max-age=3600', } }; @@ -112,7 +112,7 @@ export async function handler(event) { statusCode: 200, body: JSON.stringify(typeDoc.data()), headers: { - 'Cache-Control': 'public, max-age=3600, immutable', + 'Cache-Control': 'public, max-age=3600', } } } From 5aadce0567032e80d1b7bcc81a19eed05acff15f Mon Sep 17 00:00:00 2001 From: Steef Min Date: Thu, 1 Oct 2020 00:35:23 +0200 Subject: [PATCH 03/12] Revert "don't issue immutable on cache control" This reverts commit a952748887ce836ace6648221a65e57dbb96f08d. --- functions/date.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/functions/date.js b/functions/date.js index aba0e11..29240e6 100644 --- a/functions/date.js +++ b/functions/date.js @@ -51,7 +51,7 @@ export async function handler(event) { return { statusCode: 405, body: JSON.stringify({error: 'Method not allowed'}), - headers: {'Cache-Control': 'public, max-age=604800'}} + headers: {'Cache-Control': 'public, max-age=3600, immutable'}} } const date = new Date() @@ -69,7 +69,7 @@ export async function handler(event) { }, ), headers: { - 'Cache-Control': 'public, max-age=3600', + 'Cache-Control': 'public, max-age=3600, immutable', } } } @@ -85,7 +85,7 @@ export async function handler(event) { } ), headers: { - 'Cache-Control': 'public, max-age=3600', + 'Cache-Control': 'public, max-age=3600, immutable', } }; @@ -112,7 +112,7 @@ export async function handler(event) { statusCode: 200, body: JSON.stringify(typeDoc.data()), headers: { - 'Cache-Control': 'public, max-age=3600', + 'Cache-Control': 'public, max-age=3600, immutable', } } } From 8bcaa3cfd5cddbd200b6ba075ac6fc528e121024 Mon Sep 17 00:00:00 2001 From: Steef Min Date: Fri, 2 Oct 2020 21:29:14 +0200 Subject: [PATCH 04/12] create modules in date backend function --- .gitignore | 2 + README.md | 9 ++- functions/date.js | 93 ++++----------------------- functions/date/firebaseConfig.js.dist | 4 ++ functions/date/helpers.js | 39 +++++++++++ functions/date/responses.js | 51 +++++++++++++++ 6 files changed, 114 insertions(+), 84 deletions(-) create mode 100644 functions/date/firebaseConfig.js.dist create mode 100644 functions/date/helpers.js create mode 100644 functions/date/responses.js diff --git a/.gitignore b/.gitignore index 83a1955..f5954e8 100644 --- a/.gitignore +++ b/.gitignore @@ -89,3 +89,5 @@ sw.* # Vim swap files *.swp + +functions/date/firebaseConfig.js diff --git a/README.md b/README.md index cfb4794..61dd4d6 100644 --- a/README.md +++ b/README.md @@ -17,16 +17,19 @@ This custom set will be displayed on the `/view` page, which will decode the pay # install dependencies $ npm install -# serve with hot reload at localhost:3000 +# serve with hot reload at localhost $ npm run dev ``` +It is recommended to develop this project with `netlify dev` command from [Netlify cli](https://github.com/netlify/cli) package. +This enables you to also run the (AWS Lambda) functions locally. Which makes development a breeze. + This project is set up as a JAM stack. So to deploy to production, the static assets will need to be built. ``` -# generate static project +# generate static project and compile functions $ npm run generate ``` -The results will by default be exposed in `/dist`. +The results will by default be exposed in `/dist` and the functions in `/functions-dist`. For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org). diff --git a/functions/date.js b/functions/date.js index 29240e6..4759f41 100644 --- a/functions/date.js +++ b/functions/date.js @@ -1,40 +1,15 @@ const firebase = require('firebase/app') require('firebase/firestore') -const firebaseConfig = { - apiKey: process.env.apiKey, - projectId: process.env.projectId, -} + +const helpers = require('./date/helpers') +const response = require('./date/responses') if (!firebase.apps.length) { - firebase.default.initializeApp(firebaseConfig); + const firebaseConfig = helpers.loadConfig() + firebase.default.initializeApp(firebaseConfig.config); } const db = firebase.default.firestore() -const formatDate = (date) => { - const year = date.getFullYear().toString() - const month = (date.getMonth() + 1).toString() - const day = date.getDate().toString() - return year + month.padStart(2, '0') + day.padStart(2, '0') -} - -const sundown = (now) => { - const sunRise = new Date(), sunSet = new Date(); - sunRise.setHours(6) - sunRise.setMinutes(0) - sunSet.setHours(21) - sunSet.setMinutes(0) - - if (now < sunRise) { - return true - } - - if (now > sunSet) { - return true - } - - return false -} - async function getDateDoc(documentPath) { const dateRef = db.collection('date').doc(documentPath) return await dateRef.get(); @@ -47,73 +22,29 @@ async function getTypeDoc(type) { export async function handler(event) { if (event.httpMethod !== 'GET') { - console.log(`--> method not supported`) - return { - statusCode: 405, - body: JSON.stringify({error: 'Method not allowed'}), - headers: {'Cache-Control': 'public, max-age=3600, immutable'}} + return response.methodNotAllowed } const date = new Date() - if (sundown(date)) { - console.log(`--> sun is down`) - return { - statusCode: 200, - body: JSON.stringify( - { - description: 'Er wordt niet gevlagd als de zon onder is.', - flagState: 'Lowered', - foreground: [], - background: 'night' - }, - ), - headers: { - 'Cache-Control': 'public, max-age=3600, immutable', - } - } + if (helpers.sundown(date)) { + return response.sundown } - const fallbackResponse = { - statusCode: 200, - body: JSON.stringify( - { - description: 'Er is vandaag geen reden om de vlag te voeren.', - flagState: 'Lowered', - foreground: [], - background: 'day' - } - ), - headers: { - 'Cache-Control': 'public, max-age=3600, immutable', - } - }; - - const documentPath = formatDate(date); - + const documentPath = helpers.formatDate(date); const dateDoc = await getDateDoc(documentPath); if (!dateDoc.exists) { - console.log(`--> document ${documentPath} not found in firestore`) - return fallbackResponse + return response.fallback } - console.log(`--> document ${documentPath} found, querying type data`) - const type = dateDoc.data().type; const typeDoc = await getTypeDoc(type); if (!typeDoc.exists) { - console.log(`---> no data found for type: ${type}`) - return fallbackResponse + return response.fallback } - return { - statusCode: 200, - body: JSON.stringify(typeDoc.data()), - headers: { - 'Cache-Control': 'public, max-age=3600, immutable', - } - } + return response.success(typeDoc.data()) } diff --git a/functions/date/firebaseConfig.js.dist b/functions/date/firebaseConfig.js.dist new file mode 100644 index 0000000..4f4b40a --- /dev/null +++ b/functions/date/firebaseConfig.js.dist @@ -0,0 +1,4 @@ +exports.config = { + apiKey: '<>', + projectId: '<>' +} diff --git a/functions/date/helpers.js b/functions/date/helpers.js new file mode 100644 index 0000000..237d3c8 --- /dev/null +++ b/functions/date/helpers.js @@ -0,0 +1,39 @@ +const loadConfig = () => { + try { + return require('./firebaseConfig') + } catch { + return { + apiKey: process.env.apiKey, + projectId: process.env.projectId, + } + } +} + +const formatDate = (date) => { + const year = date.getFullYear().toString() + const month = (date.getMonth() + 1).toString() + const day = date.getDate().toString() + return year + month.padStart(2, '0') + day.padStart(2, '0') +} + +const sundown = (now) => { + const sunRise = new Date(), sunSet = new Date(); + sunRise.setHours(6) + sunRise.setMinutes(0) + sunSet.setHours(21) + sunSet.setMinutes(0) + + if (now < sunRise) { + return true + } + + if (now > sunSet) { + return true + } + + return false +} + +exports.formatDate = formatDate +exports.sundown = sundown +exports.loadConfig = loadConfig diff --git a/functions/date/responses.js b/functions/date/responses.js new file mode 100644 index 0000000..6ca43c5 --- /dev/null +++ b/functions/date/responses.js @@ -0,0 +1,51 @@ +exports.success = (data) => { + return { + statusCode: 200, + body: JSON.stringify(data), + headers: { + 'Cache-Control': 'public, max-age=3600, immutable', + } + } +} + +exports.fallback = { + statusCode: 200, + body: JSON.stringify( + { + description: 'Er is vandaag geen reden om de vlag te voeren.', + flagState: 'Lowered', + foreground: [], + background: 'day' + } + ), + headers: { + 'Cache-Control': 'public, max-age=3600, immutable', + } +} + +exports.sundown = { + statusCode: 200, + body: JSON.stringify( + { + description: 'Er wordt niet gevlagd als de zon onder is.', + flagState: 'Lowered', + foreground: [], + background: 'night' + }, + ), + headers: { + 'Cache-Control': 'public, max-age=3600, immutable', + } +} + +exports.methodNotAllowed = { + statusCode: 405, + body: JSON.stringify( + { + error: 'Method not allowed' + } + ), + headers: { + 'Cache-Control': 'public, max-age=3600, immutable' + } +} From 3d58c97c29815826e1bfff85f228923e9c1ae648 Mon Sep 17 00:00:00 2001 From: Steef Min Date: Fri, 2 Oct 2020 21:41:09 +0200 Subject: [PATCH 05/12] add makefile --- Makefile | 9 +++++++++ netlify.toml | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 Makefile diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..4e62c31 --- /dev/null +++ b/Makefile @@ -0,0 +1,9 @@ +production: functions/date/firebaseConfig.js generate + +functions/date/firebaseConfig.js: + cp functions/date/firebaseConfig.js.dist functions/date/firebaseConfig.js + +.PHONY: generate +generate: + nuxt generate + npm run build-functions diff --git a/netlify.toml b/netlify.toml index d18a3aa..c8e152e 100644 --- a/netlify.toml +++ b/netlify.toml @@ -1,4 +1,4 @@ [build] - command = "npm run generate" + command = "make" functions = "functions-dist/" publish = "dist/" From f8ddba20529dcbdcec190fcb56c6c927305ff44b Mon Sep 17 00:00:00 2001 From: Steef Min Date: Fri, 2 Oct 2020 21:48:05 +0200 Subject: [PATCH 06/12] fix config loading --- functions/date/helpers.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/functions/date/helpers.js b/functions/date/helpers.js index 237d3c8..49344c7 100644 --- a/functions/date/helpers.js +++ b/functions/date/helpers.js @@ -1,14 +1,16 @@ const loadConfig = () => { - try { + const env = { + apiKey: process.env.apiKey, + projectId: process.env.projectId, + } + + if (env.apiKey === undefined && env.projectId === undefined) { return require('./firebaseConfig') - } catch { - return { - apiKey: process.env.apiKey, - projectId: process.env.projectId, - } } + return env } + const formatDate = (date) => { const year = date.getFullYear().toString() const month = (date.getMonth() + 1).toString() From e187cdbc8873c35a160cac760db4a0908586fe50 Mon Sep 17 00:00:00 2001 From: Steef Min Date: Fri, 2 Oct 2020 21:59:25 +0200 Subject: [PATCH 07/12] pass process to helper --- functions/date.js | 2 +- functions/date/helpers.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/functions/date.js b/functions/date.js index e30e7ee..d26eddf 100644 --- a/functions/date.js +++ b/functions/date.js @@ -4,8 +4,8 @@ require('firebase/firestore') const helpers = require('./date/helpers') const response = require('./date/responses') +const firebaseConfig = helpers.loadConfig(process) if (!firebase.apps.length) { - const firebaseConfig = helpers.loadConfig() firebase.default.initializeApp(firebaseConfig.config); } const db = firebase.default.firestore() diff --git a/functions/date/helpers.js b/functions/date/helpers.js index 49344c7..82d9fe3 100644 --- a/functions/date/helpers.js +++ b/functions/date/helpers.js @@ -1,7 +1,7 @@ -const loadConfig = () => { +const loadConfig = (processData) => { const env = { - apiKey: process.env.apiKey, - projectId: process.env.projectId, + apiKey: processData.env.apiKey, + projectId: processData.env.projectId, } if (env.apiKey === undefined && env.projectId === undefined) { From 3b507665cbabea22ddc795bc2920f0e2bcc35ce0 Mon Sep 17 00:00:00 2001 From: Steef Min Date: Fri, 2 Oct 2020 22:21:36 +0200 Subject: [PATCH 08/12] improve config load --- functions/date.js | 2 +- functions/date/helpers.js | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/functions/date.js b/functions/date.js index d26eddf..70014e4 100644 --- a/functions/date.js +++ b/functions/date.js @@ -4,7 +4,7 @@ require('firebase/firestore') const helpers = require('./date/helpers') const response = require('./date/responses') -const firebaseConfig = helpers.loadConfig(process) +const firebaseConfig = helpers.loadConfig(process.env) if (!firebase.apps.length) { firebase.default.initializeApp(firebaseConfig.config); } diff --git a/functions/date/helpers.js b/functions/date/helpers.js index 82d9fe3..bfbb766 100644 --- a/functions/date/helpers.js +++ b/functions/date/helpers.js @@ -1,10 +1,11 @@ -const loadConfig = (processData) => { +const loadConfig = (envData) => { + console.log(envData) const env = { - apiKey: processData.env.apiKey, - projectId: processData.env.projectId, + apiKey: envData.apiKey, + projectId: envData.projectId, } - if (env.apiKey === undefined && env.projectId === undefined) { + if (env.apiKey === undefined || env.projectId === undefined) { return require('./firebaseConfig') } return env From 899d4d3927094bfb51bcff9102f2458e68c8f463 Mon Sep 17 00:00:00 2001 From: Steef Min Date: Fri, 2 Oct 2020 22:27:32 +0200 Subject: [PATCH 09/12] add logging functions --- functions/date/helpers.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/functions/date/helpers.js b/functions/date/helpers.js index bfbb766..7eeaceb 100644 --- a/functions/date/helpers.js +++ b/functions/date/helpers.js @@ -4,10 +4,12 @@ const loadConfig = (envData) => { apiKey: envData.apiKey, projectId: envData.projectId, } - + console.log(env) if (env.apiKey === undefined || env.projectId === undefined) { + console.log('loading from file') return require('./firebaseConfig') } + console.log('loading from env') return env } From e94336cf883b719f15dc7731731490cf3e060ff6 Mon Sep 17 00:00:00 2001 From: Steef Min Date: Fri, 2 Oct 2020 22:38:43 +0200 Subject: [PATCH 10/12] fix the actual bug --- functions/date.js | 5 +++-- functions/date/helpers.js | 6 ++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/functions/date.js b/functions/date.js index 70014e4..8cd3050 100644 --- a/functions/date.js +++ b/functions/date.js @@ -4,9 +4,10 @@ require('firebase/firestore') const helpers = require('./date/helpers') const response = require('./date/responses') -const firebaseConfig = helpers.loadConfig(process.env) if (!firebase.apps.length) { - firebase.default.initializeApp(firebaseConfig.config); + firebase.default.initializeApp( + helpers.loadConfig(process.env) + ) } const db = firebase.default.firestore() diff --git a/functions/date/helpers.js b/functions/date/helpers.js index 7eeaceb..2d5f04b 100644 --- a/functions/date/helpers.js +++ b/functions/date/helpers.js @@ -1,15 +1,13 @@ const loadConfig = (envData) => { - console.log(envData) const env = { apiKey: envData.apiKey, projectId: envData.projectId, } - console.log(env) + if (env.apiKey === undefined || env.projectId === undefined) { - console.log('loading from file') return require('./firebaseConfig') } - console.log('loading from env') + return env } From ef3f8bf2b339390c64df38f8d5d2d8c4212dccf4 Mon Sep 17 00:00:00 2001 From: Steef Min Date: Fri, 2 Oct 2020 22:46:25 +0200 Subject: [PATCH 11/12] clean up code --- functions/date.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/functions/date.js b/functions/date.js index 8cd3050..a5a95dc 100644 --- a/functions/date.js +++ b/functions/date.js @@ -27,24 +27,21 @@ export async function handler(event) { } const date = new Date() - if (helpers.sundown(date)) { return response.sundown } - const documentPath = helpers.formatDate(date); - const dateDoc = await getDateDoc(documentPath); - + const dateDoc = await getDateDoc(helpers.formatDate(date)) if (!dateDoc.exists) { return response.fallback } - const type = dateDoc.data().type; - const typeDoc = await getTypeDoc(type); - + const typeDoc = await getTypeDoc(dateDoc.data().type) if (!typeDoc.exists) { return response.fallback } - return response.success(typeDoc.data()) + return response.success( + typeDoc.data() + ) } From 1564f5051a80a4753d126516fe89ff42ad45175d Mon Sep 17 00:00:00 2001 From: Steef Min Date: Sat, 3 Oct 2020 00:21:42 +0200 Subject: [PATCH 12/12] add backpack and graduation hat --- components/Backpack.vue | 85 ++++++++++++++++++++++++++++++++++++ components/FlagFigure.vue | 6 +++ components/GraduationHat.vue | 30 +++++++++++++ functions/date.js | 1 + functions/date/helpers.js | 3 +- 5 files changed, 124 insertions(+), 1 deletion(-) create mode 100644 components/Backpack.vue create mode 100644 components/GraduationHat.vue diff --git a/components/Backpack.vue b/components/Backpack.vue new file mode 100644 index 0000000..94a7c1a --- /dev/null +++ b/components/Backpack.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/components/FlagFigure.vue b/components/FlagFigure.vue index a8aa1dc..17a1b05 100644 --- a/components/FlagFigure.vue +++ b/components/FlagFigure.vue @@ -22,9 +22,11 @@ class="flag" v-show="isHalfRaised" /> + + @@ -32,6 +34,8 @@ import Flag from './Flag.vue' import Pole from './Pole' import Wreath from './Wreath' +import Backpack from "@/components/Backpack"; +import GraduationHat from "@/components/GraduationHat"; const raisedState = 'Raised' const halfRaisedState = 'HalfRaised' @@ -39,6 +43,8 @@ const halfRaisedState = 'HalfRaised' export default { name: 'FlagFigure', components: { + GraduationHat, + Backpack, Wreath, Flag, Pole diff --git a/components/GraduationHat.vue b/components/GraduationHat.vue new file mode 100644 index 0000000..621e1d6 --- /dev/null +++ b/components/GraduationHat.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/functions/date.js b/functions/date.js index a5a95dc..d05175a 100644 --- a/functions/date.js +++ b/functions/date.js @@ -25,6 +25,7 @@ export async function handler(event) { if (event.httpMethod !== 'GET') { return response.methodNotAllowed } + return response.fallback const date = new Date() if (helpers.sundown(date)) { diff --git a/functions/date/helpers.js b/functions/date/helpers.js index 2d5f04b..ea845d5 100644 --- a/functions/date/helpers.js +++ b/functions/date/helpers.js @@ -5,7 +5,8 @@ const loadConfig = (envData) => { } if (env.apiKey === undefined || env.projectId === undefined) { - return require('./firebaseConfig') + const configFile = require('./firebaseConfig') + return configFile.config } return env