Bugfix/code cleanup

cdk/lib/app-stack.ts

@@ -9,8 +9,6 @@ import * as ecrAssets from "aws-cdk-lib/aws-ecr-assets";
 import * as logs from "aws-cdk-lib/aws-logs";
 import * as ssm from "aws-cdk-lib/aws-ssm";
 import * as iam from "aws-cdk-lib/aws-iam";
-import * as route53 from "aws-cdk-lib/aws-route53";
-import * as acm from "aws-cdk-lib/aws-certificatemanager";
 
 interface Props extends cdk.StackProps {
   bucket: cdk.aws_s3.Bucket;

cdk/lib/cdn-stack.ts

@@ -6,9 +6,6 @@ import * as route53 from "aws-cdk-lib/aws-route53";
 import * as acm from "aws-cdk-lib/aws-certificatemanager";
 import * as s3 from "aws-cdk-lib/aws-s3";
 import * as targets from "aws-cdk-lib/aws-route53-targets";
-import * as origins from "aws-cdk-lib/aws-cloudfront-origins";
-import * as lambda from "aws-cdk-lib/aws-lambda";
-import * as path from "path";
 
 interface Props extends cdk.StackProps {
   loadbalancer: cdk.aws_elasticloadbalancingv2.ApplicationLoadBalancer;
@@ -33,7 +30,6 @@ export class CdnStack extends cdk.Stack {
     );
 
     const wwwDomainName = `www.${domainName}`;
-    const edgeDomainName = `edge.${domainName}`;
 
     const zone = route53.HostedZone.fromHostedZoneAttributes(this, "MyZone", {
       hostedZoneId,
@@ -157,40 +153,5 @@ export class CdnStack extends cdk.Stack {
 
     new route53.ARecord(this, "WebAliasRecord", recordProps);
     new route53.AaaaRecord(this, "AaaaWebAliasRecord", recordProps);
-
-    const edgeContentBucket = new s3.Bucket(this, "EdgeContentBucket");
-    const myCdnOai = new cloudfront.OriginAccessIdentity(this, "CdnOai");
-    edgeContentBucket.grantRead(myCdnOai);
-
-    const edgeFunction = new lambda.Function(this, "EdgeFunction", {
-      runtime: lambda.Runtime.NODEJS_16_X,
-      handler: "index.handler",
-      code: lambda.Code.fromAsset(path.join(__dirname, "../og")),
-      currentVersionOptions: {
-        removalPolicy: cdk.RemovalPolicy.DESTROY,
-      },
-    });
-
-    const edgeDistribution = new cloudfront.Distribution(
-      this,
-      "ImageDistribution",
-      {
-        defaultBehavior: {
-          origin: new origins.S3Origin(edgeContentBucket),
-          edgeLambdas: [
-            {
-              functionVersion: edgeFunction.currentVersion,
-              eventType: cloudfront.LambdaEdgeEventType.ORIGIN_RESPONSE,
-            },
-          ],
-          viewerProtocolPolicy:
-            cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
-        },
-      }
-    );
-
-    new cdk.CfnOutput(this, "EdgeDistributionDomainName", {
-      value: edgeDistribution.distributionDomainName,
-    });
   }
 }

cdk/lib/edge-stack.ts

@@ -0,0 +1,52 @@
+import * as cdk from "aws-cdk-lib";
+import { DefaultStackSynthesizer } from "aws-cdk-lib";
+import type { Construct } from "constructs";
+import * as cloudfront from "aws-cdk-lib/aws-cloudfront";
+import * as s3 from "aws-cdk-lib/aws-s3";
+import * as origins from "aws-cdk-lib/aws-cloudfront-origins";
+import * as lambda from "aws-cdk-lib/aws-lambda";
+import * as path from "path";
+
+export class EdgeStack extends cdk.Stack {
+  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
+    super(scope, id, {
+      ...props,
+      synthesizer: new DefaultStackSynthesizer(),
+    });
+
+    const edgeContentBucket = new s3.Bucket(this, "EdgeContentBucket");
+    const myCdnOai = new cloudfront.OriginAccessIdentity(this, "CdnOai");
+    edgeContentBucket.grantRead(myCdnOai);
+
+    const edgeFunction = new lambda.Function(this, "EdgeFunction", {
+      runtime: lambda.Runtime.NODEJS_16_X,
+      handler: "index.handler",
+      code: lambda.Code.fromAsset(path.join(__dirname, "../og")),
+      currentVersionOptions: {
+        removalPolicy: cdk.RemovalPolicy.DESTROY,
+      },
+    });
+
+    const edgeDistribution = new cloudfront.Distribution(
+      this,
+      "ImageDistribution",
+      {
+        defaultBehavior: {
+          origin: new origins.S3Origin(edgeContentBucket),
+          edgeLambdas: [
+            {
+              functionVersion: edgeFunction.currentVersion,
+              eventType: cloudfront.LambdaEdgeEventType.ORIGIN_RESPONSE,
+            },
+          ],
+          viewerProtocolPolicy:
+            cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
+        },
+      }
+    );
+
+    new cdk.CfnOutput(this, "EdgeDistributionDomainName", {
+      value: edgeDistribution.distributionDomainName,
+    });
+  }
+}

cdk/lib/edge-stage.ts

@@ -0,0 +1,11 @@
+import * as cdk from "aws-cdk-lib";
+import type { Construct } from "constructs";
+import { EdgeStack } from "./edge-stack";
+
+export class AppStage extends cdk.Stage {
+  constructor(scope: Construct, id: string, props?: cdk.StageProps) {
+    super(scope, id, { ...props });
+
+    new EdgeStack(this, "EdgeStack");
+  }
+}

cdk/lib/pipeline-stack.ts

@@ -24,24 +24,30 @@ export class PipelineStack extends cdk.Stack {
       synth: synthAction,
     });
 
-    const getConfig = (env: "dev" | "prod") => {
-      const accountId = ssm.StringParameter.valueFromLookup(
-        this,
-        `/env/${env}/accountId`
-      );
-
-      return {
-        env: {
-          account: accountId,
-          region: "eu-west-1",
-        },
-      };
-    };
-
-    const dev = new AppStage(this, "Dev", getConfig("dev"));
+    const devAccountId = ssm.StringParameter.valueFromLookup(
+      this,
+      `/env/dev/accountId`
+    );
+
+    const prodAccountId = ssm.StringParameter.valueFromLookup(
+      this,
+      `/env/prod/accountId`
+    );
+
+    const defaultRegion = "eu-west-1";
+
+    const dev = new AppStage(this, "Dev", {
+      env: {
+        account: devAccountId,
+        region: defaultRegion,
+      },
+    });
 
     const prod = new AppStage(this, "Prod", {
-      ...getConfig("prod"),
+      env: {
+        account: prodAccountId,
+        region: defaultRegion,
+      },
       production: true,
     });
 

cdk/lib/storage-stack.ts

@@ -22,6 +22,7 @@ export class StorageStack extends cdk.Stack {
 
     this.vpc = new ec2.Vpc(this, "StorageStackVpc", {
       natGateways: 1,
+      maxAzs: 1,
     });
 
     const { vpc } = this;

pages/articles/index.tsx

@@ -9,7 +9,7 @@ import { useInView } from "react-intersection-observer";
 import { useRouter } from "next/router";
 import Link from "next/link";
 import Image from "next/image";
-import writingChallenge from "../../public/images/announcements/writingChallenge.png";
+import challenge from "../../public/images/announcements/challenge.png";
 
 // Needs to be added to DB but testing with hardcoding
 const tagsToShow = [
@@ -177,17 +177,27 @@ const ArticlesPage = () => {
               </section>
             </div>
             <section className="col-span-4 lg:block hidden">
-              <div className="cursor-pointer my-4">
-                <Image
-                  className="w-full"
-                  src={writingChallenge}
-                  alt={"Writing Challenge Banner"}
-                  onClick={() =>
-                    router.push(
-                      "/articles/join-our-6-week-writing-challenge-quohtgqb"
-                    )
-                  }
-                />
+              <div className="mt-4 mb-8 border border-neutral-600 bg-neutral-900">
+                <Link href="/articles/join-our-6-week-writing-challenge-quohtgqb">
+                  <Image
+                    className="w-full"
+                    src={challenge}
+                    alt={`"Codú Writing Challenge" text on white background`}
+                  />
+                </Link>
+                <div className="tracking-wide text-sm my-3 break-words px-4 py-2">
+                  <Link
+                    className="block underline text-lg leading-6 font-semibold"
+                    href="/articles/join-our-6-week-writing-challenge-quohtgqb"
+                  >
+                    Join the Codú writing challenge!
+                  </Link>
+                  <p className="my-3">
+                    Join our first Codú challenge! Write 6 articles in 6 weeks
+                    and earn a swag bag.
+                  </p>
+                  <p>Click the link to find out more.</p>
+                </div>
               </div>
               <h3 className="text-2xl leading-6 font-semibold tracking-wide mb-4 mt-4">
                 Recommended topics