slight fixes

.gitignore

@@ -1 +1,2 @@
-.DS_Store 
+.DS_Store 
+TODO.md

infrastructure/README.md

@@ -0,0 +1,12 @@
+# personal-portfolio/infrastructure
+To plan:
+`terraform plan`
+
+To deploy:
+`terraform apply --auto-approve`
+
+To redeploy the API gateway:
+`terraform apply -replace aws_api_gateway_deployment.example --auto-approve`
+
+To redeploy the DynamoDB table (resetting the counters):
+`terraform apply -replace="aws_dynamodb_table.crc-table" --auto-approve`

infrastructure/api-gateway.tf

@@ -122,6 +122,12 @@ resource "aws_api_gateway_method_response" "response_200" {
   http_method = each.key
   status_code = "200"
 
+  response_parameters = {
+    "method.response.header.Access-Control-Allow-Headers" = true
+    "method.response.header.Access-Control-Allow-Methods" = true
+    "method.response.header.Access-Control-Allow-Origin" = true
+  }
+
 	depends_on = [
 		aws_api_gateway_integration.example
 	]
@@ -151,6 +157,13 @@ resource "aws_api_gateway_integration_response" "example" {
 	# EOF
 	# 	}
 
+  # Headers to prevent conflict with CORS
+  response_parameters = {
+    "method.response.header.Access-Control-Allow-Headers" = "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-Amz-User-Agent'",
+    "method.response.header.Access-Control-Allow-Methods" = "'GET,POST'",
+    "method.response.header.Access-Control-Allow-Origin"  = "'*'"
+  }
+
 	depends_on = [
 		aws_api_gateway_integration.example
 	]

infrastructure/bucket.tf

@@ -26,6 +26,10 @@ resource "aws_s3_object" "javascript" {
   bucket   = aws_s3_bucket.crc-bucket.id
   key      = "javascript/app.js"
   source   = "../javascript/app.js"
+
+  # To detect when changes occur
+  # https://stackoverflow.com/a/56120462
+  source_hash = filemd5("../javascript/app.js")
 }
 
 resource "aws_s3_object" "index" {
@@ -34,6 +38,9 @@ resource "aws_s3_object" "index" {
   key          = "index.html"
   source       = "../index.html"
   content_type = "text/html"
+
+  # To detect when changes occur
+  source_hash = filemd5("../index.html")
 }
 
 resource "aws_s3_object" "style" {
@@ -42,6 +49,9 @@ resource "aws_s3_object" "style" {
   key          = "style.css"
   source       = "../style.css"
   content_type = "text/css"
+
+  # To detect when changes occur
+  source_hash = filemd5("../style.css")
 }
 
 # Static website files - assets folder
@@ -74,6 +84,9 @@ resource "aws_s3_object" "asset" {
   bucket = aws_s3_bucket.crc-bucket.id
   key    = "assets/${each.key}"
   source = "../assets/${each.key}"
+
+  # To detect when changes occur
+  source_hash = filemd5("../assets/${each.key}")
 }
 
 # Static website config, disabling because can't use OAC with static website hosting

javascript/app.js

@@ -48,7 +48,7 @@ const contactSubmitBtn = document.querySelector('form .send');
 // const testEle2 = document.createTextNode('blah');
 // Variable constants
 const galleryLength = galleryImages.length;
-const titles = ['Full Stack Developer', 'One Piece Conniseuir', 'Kagurabachi Advocate', 'The Cure to Cancer', 'You must be bored, huh?'];
+const titles = ['Full Stack Developer', 'One Piece Connoisseur', 'Kagurabachi Advocate', 'The Cure to Cancer', 'You must be bored, huh?'];
 // State
 let galleryIndex = 0;
 let siteVisits = 0;
@@ -165,7 +165,21 @@ function submitContactForm(event) {
 }
 function initHeader() {
     return __awaiter(this, void 0, void 0, function* () {
-        // Add functionality to get website visits here (future)
+        // Get the website visits
+        let visits = '';
+        try {
+            const res = yield fetch('https://s7gyrdfua8.execute-api.us-east-2.amazonaws.com/prod/portfolio', {
+                method: "POST"
+            });
+            const resJson = yield res.json();
+            // console.log(res);
+            // console.log(resJson);
+            // console.log(resJson.statusCode, resJson.body.count);
+            visits = resJson.body.count;
+        }
+        catch (_a) {
+            visits = 'idk yet';
+        }
         // Add fast forward feature
         const skipAll = () => __awaiter(this, void 0, void 0, function* () {
             skipTyping = true;
@@ -193,7 +207,7 @@ function initHeader() {
         yield typeText(titleView.childNodes[0], "Full Stack Developer", titleCursor);
         titleCursor.classList.add('hidden');
         siteVisitsCursor.classList.remove('hidden');
-        yield typeText(siteVisitsView.childNodes[0], "Website visits: idk yet", siteVisitsCursor);
+        yield typeText(siteVisitsView.childNodes[0], "Website visits: " + visits, siteVisitsCursor);
         // Make the rest of the website available
         addFadeInAnims();
         main.classList.remove('hidden');
@@ -286,12 +300,3 @@ contactSubmitBtn.addEventListener('click', submitContactForm);
     updateNavSection();
     initHeader();
 }))();
-/**
- * TODO
- * 6. cloud portfolio (initHeader() function)
- * 6a. update profile visits on refresh
- * 6b. get profile visits every 5 (or 10) seconds
- * 6c. have separate store for github profile visits
- * 7. submit email to user to verify if they want their msg sent via SES
- * 8. Website visits animation
- */ 

typescript/app.ts

@@ -47,7 +47,7 @@ const contactSubmitBtn = document.querySelector('form .send') as HTMLButtonEleme
 
 // Variable constants
 const galleryLength = galleryImages.length;
-const titles = ['Full Stack Developer', 'One Piece Connoiseuir', 'Kagurabachi Advocate', 'The Cure to Cancer', 'You must be bored, huh?']
+const titles = ['Full Stack Developer', 'One Piece Connoisseur', 'Kagurabachi Advocate', 'The Cure to Cancer', 'You must be bored, huh?']
 
 // State
 let galleryIndex = 0;
@@ -175,7 +175,21 @@ function submitContactForm(event: Event) {
 }
 
 async function initHeader() {
-    // Add functionality to get website visits here (future)
+    // Get the website visits
+    let visits = '';
+    try {
+        const res = await fetch('https://s7gyrdfua8.execute-api.us-east-2.amazonaws.com/prod/portfolio', {
+            method: "POST"
+        });
+        const resJson = await res.json();
+        // console.log(res);
+        // console.log(resJson);
+        // console.log(resJson.statusCode, resJson.body.count);
+
+        visits = resJson.body.count;
+    } catch {
+        visits = 'idk yet'
+    }
 
     // Add fast forward feature
     const skipAll = async () => {
@@ -209,7 +223,7 @@ async function initHeader() {
     await typeText(titleView.childNodes[0] as Text, "Full Stack Developer", titleCursor as Element);
     titleCursor.classList.add('hidden');
     siteVisitsCursor.classList.remove('hidden');
-    await typeText(siteVisitsView.childNodes[0] as Text, "Website visits: idk yet", siteVisitsCursor as Element);
+    await typeText(siteVisitsView.childNodes[0] as Text, "Website visits: " + visits, siteVisitsCursor as Element);
 
     // Make the rest of the website available
     addFadeInAnims();
@@ -320,22 +334,4 @@ contactSubmitBtn.addEventListener('click', submitContactForm);
     setGallery();
     updateNavSection();
     initHeader();
-})();
-
-/**
- * TODO
- * 6. cloud portfolio
- * 6a. update profile visits on refresh
- * 6b. get profile visits every 5 (or 10) seconds
- * 6c. have separate store for github profile visits
- * 6d. update initHeader() function
- * 7. Website visits animation
- * 8. submit email to user to verify if they want their msg sent via SES
- * 9. place all emails in SQS queue
- * 10. CI/CD
- * 
- * In the future
- * 11. Add an error.html document?
- * https://docs.aws.amazon.com/AmazonS3/latest/userguide/CustomErrorDocSupport.html
- * https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/s3_bucket_website_configuration
- */
+})();