OG Tags, Dark/Light Mode Themes, & Fix CI-CD Environments (#87)

* build(deps): Bump undici from 5.25.3 to 5.26.3 (#86) * feat: Dark/Light Theme Toggle & Router Refactoring (#85) * feat: Open Graph Tags * cs: Migrate all `StyledLink` definitions to a single component * cs: Refactor routing architecture * ci: Tag DEV deployments * ci: Use postbuild script to clone OpenAPI doc * docs: Update README.md for Dark Mode
amattu2 · Oct 18, 2023 · 5545aec · 5545aec
1 parent e43d69a
commit 5545aec
Show file tree

Hide file tree

Showing 62 changed files with 499 additions and 401 deletions.
diff --git a/.env.example b/.env.example
@@ -1,5 +1,6 @@
 PUBLIC_URL=""
 REACT_APP_NAME=""
+REACT_APP_URL=""
 REACT_APP_DESCRIPTION=""
 REACT_APP_SLOGAN=""
 REACT_APP_API_URL=""

diff --git a/.github/workflows/cloudflare-pages.yml b/.github/workflows/cloudflare-pages.yml
@@ -19,6 +19,7 @@ jobs:
     name: Publish to Cloudflare Pages
     if: ${{ github.repository_owner == 'amattu2' }}
     runs-on: ubuntu-latest
+    environment: better-vinwiki (Production)
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -35,6 +36,7 @@ jobs:
       - name: Build
         env:
           REACT_APP_NAME: ${{ vars.REACT_APP_NAME }}
+          REACT_APP_URL: ${{ vars.REACT_APP_URL }}
           REACT_APP_DESCRIPTION: ${{ vars.REACT_APP_DESCRIPTION }}
           REACT_APP_SLOGAN: ${{ vars.REACT_APP_SLOGAN }}
           REACT_APP_API_URL: ${{ vars.REACT_APP_API_URL }}
@@ -49,6 +51,6 @@ jobs:
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: vinwiki
+          projectName: better-vinwiki
           directory: ./build
           branch: main
diff --git a/.github/workflows/github-pages.yml b/.github/workflows/github-pages.yml
@@ -8,23 +8,24 @@ permissions:
   contents: read
   pages: write
   id-token: write
+  deployments: write
 
 on:
   workflow_dispatch:
   push:
     branches:
       - development
-      - develop
+      - dev
     paths:
       - "src/**"
       - "public/**"
 
-
 jobs:
   publish:
     name: Publish to GitHub Pages
     if: ${{ github.repository_owner == 'amattu2' }}
     runs-on: ubuntu-latest
+    environment: better-vinwiki (Development)
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -42,6 +43,7 @@ jobs:
         env:
           PUBLIC_URL: ${{ vars.PUBLIC_URL }}
           REACT_APP_NAME: ${{ vars.REACT_APP_NAME }}
+          REACT_APP_URL: ${{ vars.REACT_APP_URL }}
           REACT_APP_DESCRIPTION: ${{ vars.REACT_APP_DESCRIPTION }}
           REACT_APP_SLOGAN: ${{ vars.REACT_APP_SLOGAN }}
           REACT_APP_API_URL: ${{ vars.REACT_APP_API_URL }}
@@ -58,6 +60,33 @@ jobs:
         with:
           path: './build'
 
+      - uses: chrnorm/deployment-action@v2
+        name: Create Deployment
+        id: deployment_create
+        with:
+          token: ${{ github.token }}
+          environment-url: ${{ vars.REACT_APP_URL }}
+          environment: better-vinwiki (Development)
+          ref: ${{ github.head_ref || github.ref_name }}
+
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v2
+
+      - name: Deployment - Success
+        if: success()
+        uses: chrnorm/deployment-status@v2
+        with:
+          token: ${{ github.token }}
+          environment-url: ${{ steps.deployment_create.outputs.environment_url }}
+          deployment-id: ${{ steps.deployment_create.outputs.deployment_id }}
+          state: 'success'
+
+      - name: Deployment - Failed
+        if: failure()
+        uses: chrnorm/deployment-status@v2
+        with:
+          token: ${{ github.token }}
+          environment-url: ${{ steps.deployment_create.outputs.environment_url }}
+          deployment-id: ${{ steps.deployment_create.outputs.deployment_id }}
+          state: 'failure'
diff --git a/README.md b/README.md
@@ -5,10 +5,10 @@ built with a cohesive user experience in mind.
 
 Top Features:
 
-- Modernized post feed with Trending Posts
-- Individual post page with comments (Similar to Reddit)
+- Dark Mode
+- Modernized post feed with integrated comments
 - Profile pages with comprehensive information on Activity, Vehicles, Lists, etc
-- Vehicle diagnostic scan histories, VIN decoding, recall information, and more
+- Vehicle diagnostic scan histories, VIN decoding, and recall information
 - Enhanced bio and post content w/support for OBD-ii Codes, `@mentions`, `#VIN`,
 and more
 - Powerful list managment with bulk importing and exporting
@@ -54,8 +54,9 @@ Configuration Options (See [.env.example](./.env.example) for all options):
 
 | Name | Description |
 |:-|:-|
-|`PUBLIC_URL`|The base URL for the application. Optional but useful for deployment under a subdirectory.|
+|`PUBLIC_URL`|The base URL for the application. **Optional** unless deploying under a subdirectory.|
 |`REACT_APP_NAME`|The name of the app. Used everywhere|
+|`REACT_APP_URL`|The base URL for the application deployment location. **Required** for HTML5 meta tags|
 |`REACT_APP_DESCRIPTION`|The description built into the HTML5 meta tags|
 |`REACT_APP_SLOGAN`|Sits under the App Name on the auth pages|
 |`REACT_APP_API_URL`|Base URL for the VINwiki API. Should have a trailing `/` at the end|
@@ -66,9 +67,8 @@ Configuration Options (See [.env.example](./.env.example) for all options):
 See [src/config/AppConfig.ts](./src/config/AppConfig.ts) for the build defaults.
 You likely will not want to leave them as the defaults.
 
-> **Warning**: When using `PUBLIC_URL` for subdirectory deployments, some functionality may not work
-> as expected. This app does not officially support subdirectory deployments. If you aren't deploying
-> on a subdirectory, don't define this option.
+> **Warning**: When using `PUBLIC_URL` for subdirectory deployments, but some functionality may not work
+> as expected. This is the BASENAME of the url (e.g. `/subdirectory`)
 
 # VINwiki REST API Docs
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,7 +38,8 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build && cp ./openapi.yml ./build",
+    "build": "react-scripts build",
+    "postbuild": "cp ./openapi.yml ./build",
     "test": "react-scripts test",
     "test:ci": "TZ=UTC CI=true react-scripts test --passWithNoTests",
     "lint:ci": "eslint --ext .js,.jsx,.ts,.tsx src",

diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,18 @@
     <meta charset="utf-8" />
     <meta name="description" content="%REACT_APP_DESCRIPTION%" />
     <meta name="viewport" content="initial-scale=1, width=device-width" />
+    <meta name="title" content="%REACT_APP_NAME%" />
+    <meta name="description" content="%REACT_APP_DESCRIPTION%" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="%REACT_APP_URL%" />
+    <meta property="og:title" content="%REACT_APP_NAME%" />
+    <meta property="og:description" content="%REACT_APP_DESCRIPTION%" />
+    <meta property="og:image" content="%REACT_APP_URL%/favicon.ico" />
+    <meta property="twitter:card" content="summary" />
+    <meta property="twitter:url" content="%REACT_APP_URL%" />
+    <meta property="twitter:title" content="%REACT_APP_NAME%" />
+    <meta property="twitter:description" content="%REACT_APP_DESCRIPTION%" />
+    <meta property="twitter:image" content="%REACT_APP_URL%/favicon.ico" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

diff --git a/src/components/ActionableCard/index.tsx b/src/components/ActionableCard/index.tsx
@@ -1,5 +1,5 @@
 import React, { ElementType, FC, Ref, forwardRef } from "react";
-import { Card, CardHeader, CardActionArea, styled, CardProps } from "@mui/material";
+import { Card, CardHeader, CardActionArea, styled, CardProps, Theme } from "@mui/material";
 import { ArrowForwardIos } from "@mui/icons-material";
 
 type Props = {
@@ -8,21 +8,21 @@ type Props = {
   disabled?: boolean;
 } & CardProps;
 
-const StyledCard = styled(Card)({
+const StyledCard = styled(Card)(({ theme }) => ({
   padding: 0,
   margin: 0,
   borderRadius: 0,
-  border: "1px solid #ddd",
+  border: `1px solid ${theme.palette.divider}`,
   borderRight: "unset",
   borderTop: "unset",
   "&:last-child": {
     borderRadius: "0 0 8px 8px",
   },
-});
+}));
 
-const StyledCardHeader = styled(CardHeader)<{ component: ElementType, disabled?: boolean }>(({ disabled }) => ({
+const StyledCardHeader = styled(CardHeader)<{ component: ElementType; disabled?: boolean; theme?: Theme }>(({ disabled, theme }) => ({
   [disabled ? "& .MuiCardHeader-content .MuiTypography-root, & .MuiCardHeader-action" : ""]: {
-    color: "#ddd !important",
+    color: `${theme.palette.text.disabled} !important`,
   },
   "& .MuiCardHeader-action": {
     alignSelf: "center",

diff --git a/src/components/BlogPost/index.tsx b/src/components/BlogPost/index.tsx
@@ -22,19 +22,19 @@ const StyledCard = styled(Card)({
   overflow: "visible",
 });
 
-const StyledImageBox = styled(Paper)({
+const StyledImageBox = styled(Paper)(({ theme }) => ({
   height: "175px",
   width: "175px",
   overflow: "hidden",
   borderRadius: "8px",
   position: "relative",
-  background: "#ddd",
+  background: theme.palette.divider,
   flexShrink: 0,
   marginLeft: "-35px !important",
   "&:hover .expand-button": {
     opacity: 1,
   },
-});
+}));
 
 const StyledBackground = styled("div", {
   shouldForwardProp: (p) => p !== "bg" && p !== "blur",

diff --git a/src/components/CreateListDialog/index.tsx b/src/components/CreateListDialog/index.tsx
@@ -24,16 +24,16 @@ const StyledDialog = styled(Dialog)({
   },
 });
 
-const StyledDialogContent = styled(DialogContent)({
-  backgroundColor: "#f4f7fa",
-});
+const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
+  backgroundColor: theme.palette.modal.background,
+}));
 
-const StyledTextField = styled(TextField)({
+const StyledTextField = styled(TextField)(({ theme }) => ({
   marginTop: "16px",
   "& .MuiInputBase-root": {
-    backgroundColor: "#fff",
+    backgroundColor: theme.palette.modal.contrast,
   },
-});
+}));
 
 /**
  * A dialog that handles the creation of a Vehicle List

diff --git a/src/components/CreatePost/index.tsx b/src/components/CreatePost/index.tsx
@@ -10,6 +10,7 @@ import {
   Divider, IconButton, Stack, Step,
   StepButton, StepContent,
   Stepper, Tab, Tabs, TextField,
+  Theme,
   Tooltip, Typography, styled,
 } from "@mui/material";
 import { DateTimePicker } from '@mui/x-date-pickers';
@@ -38,13 +39,13 @@ type PostForm = {
   image: FileList;
 };
 
-const StyledCard = styled(Card, { shouldForwardProp: (p) => p !== "expanded" })(({ expanded }: { expanded?: boolean }) => ({
+const StyledCard = styled(Card, { shouldForwardProp: (p) => p !== "expanded" })<{ expanded?: boolean, theme?: Theme }>(({ expanded = false, theme }) => ({
   position: expanded ? "sticky" : "relative",
   top: expanded ? "16px" : "unset",
   padding: "16px 24px",
   borderRadius: "8px",
   margin: "8px 0",
-  border: "1px solid #e5e5e5",
+  border: `1px solid ${theme?.palette.divider}`,
   zIndex: expanded ? 10 : "unset",
 }));
 

diff --git a/src/components/EditListDialog/index.tsx b/src/components/EditListDialog/index.tsx
@@ -25,16 +25,16 @@ const StyledDialog = styled(Dialog)({
   },
 });
 
-const StyledDialogContent = styled(DialogContent)({
-  backgroundColor: "#f4f7fa",
-});
+const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
+  backgroundColor: theme.palette.modal.background,
+}));
 
-const StyledTextField = styled(TextField)({
+const StyledTextField = styled(TextField)(({ theme }) => ({
   marginTop: "16px",
   "& .MuiInputBase-root": {
-    backgroundColor: "#fff",
+    backgroundColor: theme.palette.modal.contrast,
   },
-});
+}));
 
 /**
  * A dialog that displays the edit form for a Vehicle List.

diff --git a/src/components/EditProfileDialog/index.tsx b/src/components/EditProfileDialog/index.tsx
@@ -25,16 +25,16 @@ const StyledDialog = styled(Dialog)({
   },
 });
 
-const StyledDialogContent = styled(DialogContent)({
-  backgroundColor: "#f4f7fa",
-});
+const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
+  backgroundColor: theme.palette.modal.background,
+}));
 
-const StyledTextField = styled(TextField)({
+const StyledTextField = styled(TextField)(({ theme }) => ({
   marginTop: "16px",
   "& .MuiInputBase-root": {
-    backgroundColor: "#fff",
+    backgroundColor: theme.palette.modal.contrast,
   },
-});
+}));
 
 /**
  * A dialog that displays the edit form for a profile.

diff --git a/src/components/EditProfilePictureDialog/index.tsx b/src/components/EditProfilePictureDialog/index.tsx
@@ -24,9 +24,9 @@ const StyledDialog = styled(Dialog)({
   },
 });
 
-const StyledDialogContent = styled(DialogContent)({
-  backgroundColor: "#f4f7fa",
-});
+const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
+  backgroundColor: theme.palette.modal.background,
+}));
 
 /**
  * A dialog that displays the edit form for a profile picture.

diff --git a/src/components/EditVehicleDialog/index.tsx b/src/components/EditVehicleDialog/index.tsx
@@ -19,16 +19,16 @@ const StyledDialog = styled(Dialog)({
   },
 });
 
-const StyledDialogContent = styled(DialogContent)({
-  backgroundColor: "#f4f7fa",
-});
+const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
+  backgroundColor: theme.palette.modal.background,
+}));
 
-const StyledTextField = styled(TextField)({
+const StyledTextField = styled(TextField)(({ theme }) => ({
   marginTop: "16px",
   "& .MuiInputBase-root": {
-    backgroundColor: "#fff",
+    backgroundColor: theme.palette.modal.contrast,
   },
-});
+}));
 
 /**
  * A dialog that displays the edit form for a vehicle.

diff --git a/src/components/ExpandableImage/index.tsx b/src/components/ExpandableImage/index.tsx
@@ -9,17 +9,17 @@ type Props = {
   alt: string;
 };
 
-const StyledImageBox = styled(Box)({
+const StyledImageBox = styled(Box)(({ theme }) => ({
   height: "100%",
   width: "100%",
   overflow: "hidden",
   position: "relative",
-  background: "#ddd",
+  background: theme.palette.divider,
   cursor: "pointer",
   "&:hover .expand-button": {
     opacity: 1,
   },
-});
+}));
 
 const StyledBackground = styled("div", {
   shouldForwardProp: (p) => p !== "bg" && p !== "blur",