Merge branch 'main' into cms/news/2024/07/2024-07-10-18fs-engineering…

…-craft-practices-at-10

.eslintrc.yml

@@ -1,11 +1,34 @@
 env:
   browser: true
   es2021: true
+  node: true
 extends:
   - airbnb-base
   - plugin:prettier/recommended
-overrides: []
+parser: '@typescript-eslint/parser'
 parserOptions:
   ecmaVersion: latest
-rules: { "prettier/prettier": "error" }
-plugins: ["prettier"]
+  sourceType: module
+plugins:
+  - '@typescript-eslint'
+  - prettier
+rules:
+  prettier/prettier: error
+settings:
+  import/resolver:
+    node:
+      extensions: ['.js', '.jsx', '.ts', '.tsx']
+overrides:
+  - files: ['*.js', '*.jsx']
+    rules: 
+      prettier/prettier: error
+  - files: ['*.ts', '*.tsx']
+    extends:
+      - plugin:@typescript-eslint/recommended
+    rules:
+      prettier/prettier: error
+      no-console: off  # This disables the console statement warning for TypeScript files
+      consistent-return: off  # This disables the consistent return warning for TypeScript files
+      '@typescript-eslint/no-explicit-any': off  # This disables the explicit any warning for TypeScript files
+      'no-await-in-loop': off  # This disables the await in loop warning for TypeScript files
+      'no-restricted-syntax': off  # This disables the restricted syntax warning for TypeScript files

.github/pull_request_template.md

@@ -1,27 +1,52 @@
 ## Summary
 
-Basic description of work done. Closes [#issue_no].
+Basic description of work done.
 
-### Preview
+## Preview
 
 [Link to Preview]()
 
 <!--
 ⚠️ Significant visual changes require submitting previous design to wayback machine.
 -->
 
-### Solution
+## Solution
 
-### How To Test
+Provide a summary of the solution this PR offers.
+
+<!--
+It can be helpful if we understand:
+1. What the solution is,
+2. Why this approach was chosen,
+3. How you implemented the change, and
+4. Possible limitations of this approach and alternate solution paths.
+-->
+
+
+## How To Test
 
 1. First Step
 2. Second Step
 3. Third Step
 
----
+<!--
+For PRs that include dependency updates, uncomment this section and
+include a list of the changed dependencies and version numbers.
+-->
+
+<!--
+## Dependency updates
 
-### Dev Checklist
+| Dependency name              | Previous version | New version |
+| ---------------------------- | :--------------: | :---------: |
+| [Updated dependency example] |     [1.0.0]      |   [1.0.1]   |
+| [New dependency example]     |        --        |   [3.0.1]   |
+| [Removed dependency example] |     [2.10.2]     |     --      |
+-->
 
+<!--
+Before opening this PR, make sure you’ve done whichever of these applies to you:
+- [ ] Branch is up-to-date and includes latest from `main`
 - [ ] PR has correct labels
 - [ ] A11y testing (voice over testing, meets WCAG, run axe tools)
-- [ ] Code is formatted properly
+-->

.gitignore

@@ -25,3 +25,4 @@ content/images/_inbox/Refine_Listen.png
 content/images/_inbox/Triangulate.png
 static/img/proxy/fedramp-logo-stamp.jpeg
 .hugo_build.lock
+.vscode/launch.json

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+    "eslint.validate": [
+      "javascript",
+      "javascriptreact",
+      "typescript",
+      "typescriptreact"
+    ],
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "always"
+    }
+  }

config/gulp/file-prep.js

@@ -22,12 +22,11 @@ const allExtensions = [...imageExtensions, ...fileExtensions];
 // removes . separator to read jpg,png,jpeg...
 const extensionsString = allExtensions
   .map((extension) => extension.replace(".", ""))
-  .join(","); 
+  .join(",");
 
 const imageRegex = /(png|jpg|jpeg)/;
 const fileRegex = /(doc|docx|pdf|ppt|pptx|pptm|xls|xlsx)/;
 
-
 /**
  * Converts JPG images to PNG format
  * @param {string} imagePath - path of the image file
@@ -36,9 +35,7 @@ async function convertJpgToPng(imagePath) {
   console.log(`Converting image ${imagePath} to PNG`);
   const outputPath = imagePath.replace(/\.jpe?g$/i, ".png");
 
-  await sharp(imagePath)
-    .toFormat("png")
-    .toFile(outputPath);
+  await sharp(imagePath).toFormat("png").toFile(outputPath);
 
   // Check if the original JPG file exists before unlinking
   if (fs.existsSync(imagePath)) {
@@ -48,8 +45,6 @@ async function convertJpgToPng(imagePath) {
   return path.basename(outputPath);
 }
 
-
-
 /**
  * Object containing working folder paths used for lifecycle steps of uploading
  * to-process contains the normalized filename, static files are upload to s3 from here
@@ -67,7 +62,6 @@ const filePaths = {
   },
 };
 
-
 /**
  * Creates directories for each step of the file uploading process
  * These directories are removed when a file has been uploaded
@@ -80,7 +74,9 @@ function fileTidy(done) {
 
   fs.readdir(paths.uploads, async (err, files) => {
     if (err) {
-      console.error(`Failed to read directory ${paths.uploads}: ${err.message}`);
+      console.error(
+        `Failed to read directory ${paths.uploads}: ${err.message}`
+      );
       done(err);
       return;
     }
@@ -93,29 +89,44 @@ function fileTidy(done) {
         // create working directories if they do not exist
         createDir(paths[filetype].toProcess, 3);
         if (filetype === "image") createDir(paths[filetype].processed, 3);
-        // copies uploaded file to /to-process with new normalized name 
+        // copies uploaded file to /to-process with new normalized name
         // convert jpg to png
-        if (filetype === "image" && fileExt === ".jpg" || fileExt === ".jpeg") {
-         let convertedPng =  await convertJpgToPng(path.join(paths.uploads, file)).catch
-          ((err) => {
-            console.error(`Error converting image ${file} to PNG: ${err.message}`);
+        if (
+          (filetype === "image" && fileExt === ".jpg") ||
+          fileExt === ".jpeg"
+        ) {
+          let convertedPng = await convertJpgToPng(
+            path.join(paths.uploads, file)
+          ).catch((err) => {
+            console.error(
+              `Error converting image ${file} to PNG: ${err.message}`
+            );
             return;
           });
-          // ensure the folder for the process image exists. 
+          // ensure the folder for the process image exists.
           if (convertedPng != file) {
             file = convertedPng;
           }
-
-        } 
+        }
         newfileName = cleanFileName(file);
         const newFilePath = path.join(dirToProcess, newfileName);
 
         // Rename and move the file to the new path
         try {
-          console.log(`Moving file from ${path.join(paths.uploads, file)} to ${newFilePath}`);
-          fs.renameSync(path.join(paths.uploads, file), newFilePath); 
+          console.log(
+            `Moving file from ${path.join(
+              paths.uploads,
+              file
+            )} to ${newFilePath}`
+          );
+          fs.renameSync(path.join(paths.uploads, file), newFilePath);
         } catch (renameError) {
-          console.error(`Error moving file from ${path.join(paths.uploads, file)} to ${newFilePath}: ${renameError.message}`);
+          console.error(
+            `Error moving file from ${path.join(
+              paths.uploads,
+              file
+            )} to ${newFilePath}: ${renameError.message}`
+          );
           continue;
         }
       }
@@ -124,8 +135,6 @@ function fileTidy(done) {
   });
 }
 
-
-
 /**
  * creates the originals and to-process directories for both files and images
  * ./content/uploads/_working-images/to-process";
@@ -178,7 +187,7 @@ function fileType(extension) {
  * @returns filename in string format
  */
 function cleanFileName(origfilename) {
- return  origfilename
+  return origfilename
     .toLowerCase()
     .replace(/[ &$_#!?.]/g, "-")
     .replace(/-+/g, "-") // multiple dashes to a single dash
@@ -188,7 +197,7 @@ function cleanFileName(origfilename) {
     .replace(/^\d{2,4}-*x-*\d{2,4}-*/g, "") // strip leading dimensions
     .replace(/-\./g, ".") // remove leading dashes
     .replace(/^-/g, "") // removes dashes from start of filename
-    .toLowerCase();  
+    .toLowerCase();
 }
 
 /**

config/gulp/file-process.js

@@ -122,7 +122,7 @@ async function processImageVariants(image) {
 async function processImages() {
   return new Promise((resolve, reject) => {
     fs.readdir(`${processImagesDirectory}`, async (err, images) => {
-      if (images === undefined) { 
+      if (images === undefined) {
         resolve();
         return;
       }
@@ -155,15 +155,15 @@ async function processImages() {
  * Removes the /to-process temporary working folder after variants are created
  */
 function removeProcessedImage() {
-return new Promise((resolve, reject) => {
-  const imageDir = "content/uploads/_working-images/processed";
- 
-  if (fs.existsSync(imageDir) && fs.readdirSync(imageDir).length > 0) {
-    return del([
-      "content/uploads/_working-images/to-process",
-    ]).then(() => resolve()).catch((err) => reject(err));
-  } else {
-    resolve();
+  return new Promise((resolve, reject) => {
+    const imageDir = "content/uploads/_working-images/processed";
+
+    if (fs.existsSync(imageDir) && fs.readdirSync(imageDir).length > 0) {
+      return del([
+        "content/uploads/_working-images/to-process",
+      ]).then(() => resolve()).catch((err) => reject(err));
+    } else {
+      resolve();
     }
   });
 }