From c48da2b035d9a02cf6630dba68e9945ab1253921 Mon Sep 17 00:00:00 2001 From: cloudydaiyz Date: Sun, 21 Jul 2024 15:34:40 -0500 Subject: [PATCH] slight fixes --- .gitignore | 3 ++- infrastructure/README.md | 12 +++++++++++ infrastructure/api-gateway.tf | 13 ++++++++++++ infrastructure/bucket.tf | 13 ++++++++++++ javascript/app.js | 29 ++++++++++++++----------- typescript/app.ts | 40 ++++++++++++++++------------------- 6 files changed, 75 insertions(+), 35 deletions(-) create mode 100644 infrastructure/README.md diff --git a/.gitignore b/.gitignore index 0c831a2..c070c19 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -.DS_Store \ No newline at end of file +.DS_Store +TODO.md \ No newline at end of file diff --git a/infrastructure/README.md b/infrastructure/README.md new file mode 100644 index 0000000..17dace5 --- /dev/null +++ b/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` \ No newline at end of file diff --git a/infrastructure/api-gateway.tf b/infrastructure/api-gateway.tf index 99ce118..1ad1302 100644 --- a/infrastructure/api-gateway.tf +++ b/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 ] diff --git a/infrastructure/bucket.tf b/infrastructure/bucket.tf index 55ad19f..0fa9103 100644 --- a/infrastructure/bucket.tf +++ b/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 diff --git a/javascript/app.js b/javascript/app.js index 73e4220..f0f5b05 100644 --- a/javascript/app.js +++ b/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 - */ diff --git a/typescript/app.ts b/typescript/app.ts index a58a117..cc5715e 100644 --- a/typescript/app.ts +++ b/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 - */ \ No newline at end of file +})(); \ No newline at end of file