structuring body

.firebase/hosting.ZGlzdA.cache

@@ -1,8 +1,8 @@
-404.html,1624803097675,05cbc6f94d7a69ce2e29646eab13be2c884e61ba93e3094df5028866876d18b3
-index.html,1624803097675,426f812d6c5c07a52e27714979e9d2b8adcc8a41b676fd7423a4913dee156268
-css/app.99cbf659.css,1624803097675,f78edfd523aef95240257bbc2197078c359884292fd025d1b4bf74e96331f727
-js/app.4240f1f3.js,1624803097678,4fc5a22445bda0d60cc33e7fbeef426cb1f7e442f0ad453f16f841d623c36e21
-js/app.4240f1f3.js.map,1624803097687,976389f9068c7b40e9c67bae8d29a98320ce91bc4ce237b489ef7a43ebc58cc4
-css/chunk-vendors.2e8cca34.css,1624803097687,66b9278b1b185558a5a1ecc92b77dbf289e27c0c296379ff7e77dd4b65a08879
-js/chunk-vendors.12b4e0ae.js,1624803097687,f7065b800f44471d211e4b019bb0c35d8f75832a3332f50a3d7ac6c30e3f0297
-js/chunk-vendors.12b4e0ae.js.map,1624803097688,59b74fb6267779916e9a00713f6be07acfa689a4a3a987ad3c7c9fc0464d85bf
+index.html,1624807417819,9307124622ee70080d8d5dd029ee26861a3dde5cfc488f0e56e5b3d4e9ffa4fc
+css/app.99cbf659.css,1624807417819,f78edfd523aef95240257bbc2197078c359884292fd025d1b4bf74e96331f727
+404.html,1624807417819,05cbc6f94d7a69ce2e29646eab13be2c884e61ba93e3094df5028866876d18b3
+js/app.7ced1397.js,1624807417829,60c2ac503bb513d9973ac9d67f7d419a15cfb54e13554768cdf1f0ffaafc7ce7
+js/app.7ced1397.js.map,1624807417836,cbf8ad63c54457c218c8c32772eee45e872a06268ce8a7d19a56a34dfdcb279c
+css/chunk-vendors.2e8cca34.css,1624807417834,66b9278b1b185558a5a1ecc92b77dbf289e27c0c296379ff7e77dd4b65a08879
+js/chunk-vendors.22b6310e.js,1624807417835,e6e904b9a248e69339fb58f07abecd50fe2360e5c42563e3c4037bfb7ca94df9
+js/chunk-vendors.22b6310e.js.map,1624807417837,675050ec9fd756374223aacfa63b1f7c6b5290fd96524dbdfd42ae0690f5ba15

functions/.eslintrc.js

@@ -4,10 +4,7 @@ module.exports = {
     es6: true,
     node: true,
   },
-  extends: [
-    "eslint:recommended",
-    "google",
-  ],
+  extends: ["eslint:recommended", "google", "prettier"],
   rules: {
     quotes: ["error", "double"],
   },

functions/index.js

@@ -1,10 +1,21 @@
-/* eslint-disable indent */
 const functions = require("firebase-functions");
 const axios = require("axios");
+const cors = require("cors")({ origin: true });
 
-exports.sendSlackMessage = functions.https.onCall((data, context) => {
-  axios.post(
-    "https://hooks.slack.com/services/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",
-    data
-  );
+exports.sendSlackMessage = functions.https.onRequest((req, res) => {
+  cors(req, res, () => {
+    axios
+      .post(
+        "https://hooks.slack.com/services/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",
+        req.query
+      )
+      .then(function(response) {
+        // console.log(response);
+        res.status(200).send({ text: "Complete" });
+      })
+      .catch(function(error) {
+        // console.log(error);
+        res.status(400).send({ text: "Error" });
+      });
+  });
 });

functions/package.json

@@ -15,13 +15,15 @@
   "main": "index.js",
   "dependencies": {
     "axios": "^0.21.1",
+    "cors": "^2.8.5",
     "firebase": "^8.6.8",
     "firebase-admin": "^9.8.0",
     "firebase-functions": "^3.14.1"
   },
   "devDependencies": {
     "eslint": "^7.6.0",
     "eslint-config-google": "^0.14.0",
+    "eslint-config-prettier": "^8.3.0",
     "firebase-functions-test": "^0.2.0"
   },
   "private": true

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "cors": "^2.8.5",
     "firebase": "^8.6.8",
     "firebase-admin": "^9.10.0",
     "firebase-functions": "^3.14.1",
@@ -24,6 +25,7 @@
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-vue": "^6.2.2",
     "sass": "~1.32.0",
     "sass-loader": "^10.1.1",

src/App.vue

@@ -1,19 +1,12 @@
 <template>
   <v-app>
-    <v-app-bar flat app> <Header /></v-app-bar>
     <v-main>
       <router-view />
     </v-main>
-    <v-footer>
-      <Footer />
-    </v-footer>
   </v-app>
 </template>
 
 <script>
-import Header from "./components/Header.vue";
-import Footer from "./components/Footer.vue";
-
 export default {
   metaInfo: {
     title: "Jonathan Lin",
@@ -22,7 +15,7 @@ export default {
     // ],
   },
   name: "App",
-  components: { Header, Footer },
+  components: {},
 };
 </script>
 
@@ -34,14 +27,29 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #141414;
-  background-color: #fdfdfd;
+  background-color: var(--white);
 }
 
 :root {
   --slide_blue: #3c69be;
-  --slide_light: #ddf0fd;
-  --slide_light2: #90caf9;
-  --slide_white: #fdfdfd;
+  --white: #fdfdfd;
+  --black: #141414;
+}
+
+.white-text {
+  color: var(--white);
+}
+
+.black-text {
+  color: var(--black);
+}
+
+.white {
+  color: var(--white);
+}
+
+.black {
+  color: var(--black);
 }
 
 .text-xs {

src/components/Chat.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-form>
+    <v-container>
+      <v-row class="text-sm flex-column justify-center align-center pt-8"
+        >Message Me</v-row
+      >
+      <v-col cols="12">
+        <v-text-field v-model="name" label="Name" name="name"></v-text-field>
+      </v-col>
+      <v-col cols="12">
+        <v-text-field
+          v-model="message"
+          label="Say Hi"
+          name="message"
+        ></v-text-field>
+      </v-col>
+      <v-container>
+        <v-row class="align-left">
+          <v-btn class="text-capitalize" @click="submit">Send</v-btn>
+        </v-row>
+      </v-container>
+    </v-container>
+  </v-form>
+</template>
+
+<script>
+const axios = require("axios");
+
+export default {
+  data: () => ({
+    name: "",
+    message: "",
+  }),
+  methods: {
+    submit() {
+      if (this.message != "") {
+        const payload = {
+          params: { text: this.name + " says: " + this.message },
+        };
+        axios
+          .get(
+            "https://us-central1-jonathan-lin-website.cloudfunctions.net/sendSlackMessage",
+            payload
+          )
+          .then(function(response) {
+            console.log(response);
+          })
+          .catch(function(error) {
+            console.log(error);
+          });
+      }
+      this.message = "";
+    },
+  },
+};
+</script>
+
+<style lang="scss"></style>

src/components/Header.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-container id="header">
+    <v-row class="align-center">
+      <v-col class="justify-center pa-0">
+        <p id="name" class="black-text text-md">Jonathan Lin</p></v-col
+      ></v-row
+    >
+  </v-container>
+</template>
+
+<script></script>
+
+<style lang="scss">
+#name {
+  margin: 36px 8px 16px 8px;
+}
+</style>