Use Vite and deploy to AWS

EmoryDHLab · Apr 30, 2024 · 662673e · 662673e
1 parent b674604
commit 662673e
Show file tree

Hide file tree

Showing 24 changed files with 1,110 additions and 1,398 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1 @@
+.gitignore
diff --git a/.github/workflows/deploy.sh b/.github/workflows/deploy.sh
@@ -0,0 +1,18 @@
+#!/bin/bash
+echo "Running deploy script"
+
+TAG=$([ "$BRANCH" = "main" ] && echo "latest" || echo "dev")
+
+echo "Logging in to AWS"
+aws ecr get-login-password --region us-east-1 | \
+docker login --username AWS --password-stdin "${AWS_ECR}"
+echo "Logged in successfully"
+
+echo "Building and tagging Docker image"
+docker build -t readux-dev --no-cache .
+docker tag readux-dev "${AWS_ECR}:${TAG}"
+
+echo "Pushing image"
+docker push "${AWS_ECR}:${TAG}"
+
+echo "Pushed succesfully"
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,36 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+
+permissions:
+  id-token: write # This is required for requesting the JWT
+  contents: read # This is required for actions/checkout
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Checkout Docker configs
+        run: |
+          mv ./.github/workflows/deploy.sh .
+          chmod +x deploy.sh
+
+      - name: Configure AWS credentials from AWS account
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ secrets.AWS_ROLE }}
+          aws-region: us-east-1
+          role-session-name: GitHub-OIDC-frontend
+
+      - name: Run Deploy
+        env:
+          BRANCH: ${GITHUB_REF##*/}
+          AWS_ECR: ${{ secrets.AWS_ECR }}
+        run: ./deploy.sh
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,8 @@
+FROM node:20.12.1-slim
+WORKDIR /dxd
+COPY . .
+RUN rm package-lock.json
+RUN npm install
+RUN npm run build
+EXPOSE 3000
+CMD ["npm", "start"]
diff --git a/app/components/dubois/DoubleSlideShow.tsx b/app/components/dubois/DoubleSlideShow.tsx
@@ -3,67 +3,94 @@ import { useDeviceContext } from "~/hooks";
 import { leftControls, rightControls, noControl } from "../layout/SlideShow";
 import figures from "~/data/figures/dubois.json";
 import FigureModal from "../layout/FigureModal";
+import { ClientOnly } from "remix-utils/client-only";
 
 const figureGroups = [
   {
     figures: [figures["service-pnp-cph-3"], figures["925"]],
-    caption: "Side-by-side of photograph of African American men, women and children outside of church and chart of Statistics of Negro Church Organizations."
+    caption:
+      "Side-by-side of photograph of African American men, women and children outside of church and chart of Statistics of Negro Church Organizations.",
   },
   {
     figures: [figures["service-pnp-cph-4"], figures["ch5-05d-newspapers"]],
-    caption: "Side-by-side of photograph of Press room of the Planet newspaper, Richmond, Virginia and chart of American Negro newspapers and periodicals."
+    caption:
+      "Side-by-side of photograph of Press room of the Planet newspaper, Richmond, Virginia and chart of American Negro newspapers and periodicals.",
   },
   {
     figures: [figures["service-pnp-cph-1"], figures["888"]],
-    caption: "Side-by-side of photograph Portrait of African American Carpenters union, Jacksonville, Florida and chart of Occupations of Georgia Negroes."
+    caption:
+      "Side-by-side of photograph Portrait of African American Carpenters union, Jacksonville, Florida and chart of Occupations of Georgia Negroes.",
   },
   {
     figures: [figures["service-pnp-cph-2"], figures["879"]],
-    caption: "Side-by-side of photograph Extempo club of Fisk University, Nashville, Tenn. and chart of Number of Negro students taking the various courses of study offered in Georgia schools."
-  }
-]
+    caption:
+      "Side-by-side of photograph Extempo club of Fisk University, Nashville, Tenn. and chart of Number of Negro students taking the various courses of study offered in Georgia schools.",
+  },
+];
 
 function DoubleSlideShow() {
   const { isMobile, isDesktop } = useDeviceContext();
 
   return (
-    <Carousel
-      renderCenterLeftControls={isMobile ? leftControls : noControl}
-      renderCenterRightControls={isMobile ? rightControls : noControl}
-      renderBottomCenterControls={noControl}
-      renderBottomLeftControls={isDesktop ? leftControls : noControl}
-      renderBottomRightControls={isDesktop ? rightControls : noControl}
-      wrapAround
-    >
-      {figureGroups?.map((group) => {
-        return (
-          <figure key={`double-group-${group.figures[0].fileName}`} className="grid grid-cols-1 md:grid-cols-2 gap-8 text-center mx-24 md:mx-44 lg:mx-80 items-center">
-            {group.figures.map((figure) => {
-              return (
-                <FigureModal key={`double-fig-${figure.fileName}`} figure={figure}>
-                  <picture>
-                    <source srcSet={`/images/${figure.chapter}/${figure.fileName}.webp`} />
-                    <source srcSet={`/images/${figure.chapter}/${figure.fileName}.jpg`} />
-                    <img
-                      className="mx-auto max-h-[66vh]"
-                      src={`/images/${figure.chapter}/${figure.fileName}.jpg`}
-                      alt={figure.altText?.replace(/(<i>|<\/i>)/gi, '"') ?? figure.title?.replace(/(<i>|<\/i>)/gi, '"') ?? ""}
-                      title={figure.title?.replace(/(<i>|<\/i>)/gi, '"') ?? ""}
-                    />
-                  </picture>
-                </FigureModal>
-              )
-            })}
-            <figcaption className="font-dubois mt-3 md:w-1/2 mx-auto md:col-span-2"
-              dangerouslySetInnerHTML={{
-                __html: group.caption,
-              }}
-            />
-          </figure>
-        )
-      })}
-    </Carousel>
+    <ClientOnly>
+      {() => (
+        <Carousel
+          renderCenterLeftControls={isMobile ? leftControls : noControl}
+          renderCenterRightControls={isMobile ? rightControls : noControl}
+          renderBottomCenterControls={noControl}
+          renderBottomLeftControls={isDesktop ? leftControls : noControl}
+          renderBottomRightControls={isDesktop ? rightControls : noControl}
+          wrapAround
+        >
+          {figureGroups?.map((group) => {
+            return (
+              <figure
+                key={`double-group-${group.figures[0].fileName}`}
+                className="grid grid-cols-1 md:grid-cols-2 gap-8 text-center mx-24 md:mx-44 lg:mx-80 items-center"
+              >
+                {group.figures.map((figure) => {
+                  return (
+                    <FigureModal
+                      key={`double-fig-${figure.fileName}`}
+                      figure={figure}
+                      id={`${figure.fileName}-double-slide`}
+                    >
+                      <picture>
+                        <source
+                          srcSet={`/images/${figure.chapter}/${figure.fileName}.webp`}
+                        />
+                        <source
+                          srcSet={`/images/${figure.chapter}/${figure.fileName}.jpg`}
+                        />
+                        <img
+                          className="mx-auto max-h-[66vh]"
+                          src={`/images/${figure.chapter}/${figure.fileName}.jpg`}
+                          alt={
+                            figure.altText?.replace(/(<i>|<\/i>)/gi, '"') ??
+                            figure.title?.replace(/(<i>|<\/i>)/gi, '"') ??
+                            ""
+                          }
+                          title={
+                            figure.title?.replace(/(<i>|<\/i>)/gi, '"') ?? ""
+                          }
+                        />
+                      </picture>
+                    </FigureModal>
+                  );
+                })}
+                <figcaption
+                  className="font-dubois mt-3 md:w-1/2 mx-auto md:col-span-2"
+                  dangerouslySetInnerHTML={{
+                    __html: group.caption,
+                  }}
+                />
+              </figure>
+            );
+          })}
+        </Carousel>
+      )}
+    </ClientOnly>
   );
 }
 
-export default DoubleSlideShow;
+export default DoubleSlideShow;
diff --git a/app/components/dubois/HoverImages1.tsx b/app/components/dubois/HoverImages1.tsx
@@ -3,14 +3,15 @@ import FigureObj from "../layout/FigureObj";
 import { useContext, useEffect, useState } from "react";
 import { ChapterContext } from "~/chapterContext";
 import figures from "~/data/figures/dubois.json";
+import { ClientOnly } from "remix-utils/client-only";
 
 const FIGURES = [
   figures["ch5-03-georgia"],
   figures["ch5-04a-city"],
   figures["ch5-04b-illiteracy"],
   figures["ch5-04c-owners"],
   figures["ch5-06a-letter"],
-]
+];
 
 export default function HoverImages1() {
   const { hoverState } = useContext(ChapterContext);
@@ -27,26 +28,35 @@ export default function HoverImages1() {
       case "Owners":
         setCurrentHover(3);
         break;
-        case "Value":
-          setCurrentHover(4);
-          break;
+      case "Value":
+        setCurrentHover(4);
+        break;
     }
   }, [hoverState, setCurrentHover]);
 
   return (
     <div className="ml-24 hidden md:block" id="hover1">
-      <Carousel
-        withoutControls
-        slideIndex={currentHover}
-        swiping={false}
-        animation="fade"
-      >
-        {FIGURES.map((figure, index) => {
-          return (
-            <FigureObj key={figure.fileName} figure={figure} className="w-full" id={`hover-1-${index}`} />
-          )
-        })}
-      </Carousel>
+      <ClientOnly>
+        {() => (
+          <Carousel
+            withoutControls
+            slideIndex={currentHover}
+            swiping={false}
+            animation="fade"
+          >
+            {FIGURES.map((figure, index) => {
+              return (
+                <FigureObj
+                  key={figure.fileName}
+                  figure={figure}
+                  className="w-full"
+                  id={`hover-1-${index}`}
+                />
+              );
+            })}
+          </Carousel>
+        )}
+      </ClientOnly>
     </div>
   );
 }
diff --git a/app/components/dubois/HoverImages2.tsx b/app/components/dubois/HoverImages2.tsx
@@ -3,6 +3,7 @@ import { ChapterContext } from "~/chapterContext";
 import Carousel from "nuka-carousel";
 import FigureObj from "../layout/FigureObj";
 import figures from "~/data/figures/dubois.json";
+import { ClientOnly } from "remix-utils/client-only";
 
 const FIGURES = [
   figures["ch5-05a-countries"],
@@ -75,23 +76,27 @@ export default function HoverImages2() {
 
   return (
     <div className="ml-24 hidden md:block max-w-3xl" id="hover2">
-      <Carousel
-        withoutControls
-        slideIndex={currentHover}
-        swiping={false}
-        animation="fade"
-      >
-        {FIGURES.map((figure, index) => {
-          return (
-            <FigureObj
-              key={`${figure.fileName}-hover2`}
-              figure={figure}
-              className="w-full"
-              id={`hover-2-${index}`}
-            />
-          );
-        })}
-      </Carousel>
+      <ClientOnly>
+        {() => (
+          <Carousel
+            withoutControls
+            slideIndex={currentHover}
+            swiping={false}
+            animation="fade"
+          >
+            {FIGURES.map((figure, index) => {
+              return (
+                <FigureObj
+                  key={`${figure.fileName}-hover2`}
+                  figure={figure}
+                  className="w-full"
+                  id={`hover-2-${index}`}
+                />
+              );
+            })}
+          </Carousel>
+        )}
+      </ClientOnly>
     </div>
   );
 }