From 3d3324434474bdb8c101cdd90bb3a3aae37e6364 Mon Sep 17 00:00:00 2001 From: Jake Wheeler Date: Thu, 24 Oct 2024 11:21:40 -0400 Subject: [PATCH 1/9] remove seemingly unused div --- src/app/components/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx index b9015bb..e8450ca 100644 --- a/src/app/components/Header.tsx +++ b/src/app/components/Header.tsx @@ -36,7 +36,7 @@ export default function Navbar() { Skip to main content -
+
From 4f3a2b5cf4fb10812ded4bed67f7047f62abafa9 Mon Sep 17 00:00:00 2001 From: Jake Wheeler Date: Thu, 24 Oct 2024 11:23:19 -0400 Subject: [PATCH 2/9] set some reasonable defaults for prettier and eslint --- .eslintrc.json | 18 ++++- .prettierrc | 9 ++- package-lock.json | 199 ++++++++++++++++++++++++++++++++++++++++++++-- package.json | 11 ++- 4 files changed, 225 insertions(+), 12 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 3722418..6b309a5 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,17 @@ { - "extends": ["next/core-web-vitals", "next/typescript"] -} + "extends": [ + "next/core-web-vitals", + "next/typescript", + "eslint:recommended", + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended", + "prettier" + ], + "plugins": [ + "react", + "@typescript-eslint" + ], + "rules": { + "react/react-in-jsx-scope": "off" + } +} \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 0967ef4..cd812e9 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1 +1,8 @@ -{} +{ + "semi": true, + "trailingComma": "all", + "singleQuote": true, + "printWidth": 80, + "tabWidth": 2, + "plugins": ["prettier-plugin-tailwindcss"] +} diff --git a/package-lock.json b/package-lock.json index 0a01a70..cb690e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@trussworks/react-uswds": "^9.1.0", "@uswds/uswds": "^3.9.0", + "classnames": "^2.5.1", "fs": "^0.0.1-security", "gray-matter": "^4.0.3", "next": "14.2.15", @@ -23,13 +24,17 @@ "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.4.20", - "eslint": "^8", + "eslint": "^8.57.1", "eslint-config-next": "14.2.15", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-prettier": "^5.2.1", + "eslint-plugin-react": "^7.37.2", "husky": "^9.1.6", "lint-staged": "^15.2.10", "postcss": "^8", "postcss-import": "^16.1.0", - "prettier": "3.3.3", + "prettier": "^3.3.3", + "prettier-plugin-tailwindcss": "^0.6.8", "sass": "^1.79.5", "tailwindcss": "^3.4.1", "typescript": "^5" @@ -706,6 +711,19 @@ "node": ">=14" } }, + "node_modules/@pkgr/core": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz", + "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^12.20.0 || ^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/unts" + } + }, "node_modules/@rtsao/scc": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz", @@ -1642,6 +1660,12 @@ "node": ">= 6" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==", + "license": "MIT" + }, "node_modules/cli-cursor": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz", @@ -2276,6 +2300,7 @@ "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==", "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "dev": true, + "license": "MIT", "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -2353,6 +2378,19 @@ } } }, + "node_modules/eslint-config-prettier": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz", + "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==", + "dev": true, + "license": "MIT", + "bin": { + "eslint-config-prettier": "bin/cli.js" + }, + "peerDependencies": { + "eslint": ">=7.0.0" + } + }, "node_modules/eslint-import-resolver-node": { "version": "0.3.9", "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz", @@ -2527,18 +2565,50 @@ "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9" } }, + "node_modules/eslint-plugin-prettier": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz", + "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==", + "dev": true, + "license": "MIT", + "dependencies": { + "prettier-linter-helpers": "^1.0.0", + "synckit": "^0.9.1" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint-plugin-prettier" + }, + "peerDependencies": { + "@types/eslint": ">=8.0.0", + "eslint": ">=8.0.0", + "eslint-config-prettier": "*", + "prettier": ">=3.0.0" + }, + "peerDependenciesMeta": { + "@types/eslint": { + "optional": true + }, + "eslint-config-prettier": { + "optional": true + } + } + }, "node_modules/eslint-plugin-react": { - "version": "7.37.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.1.tgz", - "integrity": "sha512-xwTnwDqzbDRA8uJ7BMxPs/EXRB3i8ZfnOIp8BsxEQkT0nHPp+WWceqGgo6rKb9ctNi8GJLDT4Go5HAWELa/WMg==", + "version": "7.37.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.2.tgz", + "integrity": "sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==", "dev": true, + "license": "MIT", "dependencies": { "array-includes": "^3.1.8", "array.prototype.findlast": "^1.2.5", "array.prototype.flatmap": "^1.3.2", "array.prototype.tosorted": "^1.1.4", "doctrine": "^2.1.0", - "es-iterator-helpers": "^1.0.19", + "es-iterator-helpers": "^1.1.0", "estraverse": "^5.3.0", "hasown": "^2.0.2", "jsx-ast-utils": "^2.4.1 || ^3.0.0", @@ -2756,6 +2826,13 @@ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "dev": true }, + "node_modules/fast-diff": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz", + "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==", + "dev": true, + "license": "Apache-2.0" + }, "node_modules/fast-glob": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", @@ -5778,6 +5855,7 @@ "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", "dev": true, + "license": "MIT", "bin": { "prettier": "bin/prettier.cjs" }, @@ -5788,6 +5866,98 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/prettier-linter-helpers": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", + "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-diff": "^1.1.2" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/prettier-plugin-tailwindcss": { + "version": "0.6.8", + "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.8.tgz", + "integrity": "sha512-dGu3kdm7SXPkiW4nzeWKCl3uoImdd5CTZEJGxyypEPL37Wj0HT2pLqjrvSei1nTeuQfO4PUfjeW5cTUNRLZ4sA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14.21.3" + }, + "peerDependencies": { + "@ianvs/prettier-plugin-sort-imports": "*", + "@prettier/plugin-pug": "*", + "@shopify/prettier-plugin-liquid": "*", + "@trivago/prettier-plugin-sort-imports": "*", + "@zackad/prettier-plugin-twig-melody": "*", + "prettier": "^3.0", + "prettier-plugin-astro": "*", + "prettier-plugin-css-order": "*", + "prettier-plugin-import-sort": "*", + "prettier-plugin-jsdoc": "*", + "prettier-plugin-marko": "*", + "prettier-plugin-multiline-arrays": "*", + "prettier-plugin-organize-attributes": "*", + "prettier-plugin-organize-imports": "*", + "prettier-plugin-sort-imports": "*", + "prettier-plugin-style-order": "*", + "prettier-plugin-svelte": "*" + }, + "peerDependenciesMeta": { + "@ianvs/prettier-plugin-sort-imports": { + "optional": true + }, + "@prettier/plugin-pug": { + "optional": true + }, + "@shopify/prettier-plugin-liquid": { + "optional": true + }, + "@trivago/prettier-plugin-sort-imports": { + "optional": true + }, + "@zackad/prettier-plugin-twig-melody": { + "optional": true + }, + "prettier-plugin-astro": { + "optional": true + }, + "prettier-plugin-css-order": { + "optional": true + }, + "prettier-plugin-import-sort": { + "optional": true + }, + "prettier-plugin-jsdoc": { + "optional": true + }, + "prettier-plugin-marko": { + "optional": true + }, + "prettier-plugin-multiline-arrays": { + "optional": true + }, + "prettier-plugin-organize-attributes": { + "optional": true + }, + "prettier-plugin-organize-imports": { + "optional": true + }, + "prettier-plugin-sort-imports": { + "optional": true + }, + "prettier-plugin-style-order": { + "optional": true + }, + "prettier-plugin-svelte": { + "optional": true + } + } + }, "node_modules/process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -6748,6 +6918,23 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/synckit": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz", + "integrity": "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@pkgr/core": "^0.1.0", + "tslib": "^2.6.2" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/unts" + } + }, "node_modules/tabbable": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", diff --git a/package.json b/package.json index 74d541c..3555b2e 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "start": "next start", "lint": "next lint", "prepare": "husky", - "prettier": "prettier --write ." + "fmt": "prettier --write ." }, "lint-staged": { "**/*": "prettier --write --ignore-unknown" @@ -16,6 +16,7 @@ "dependencies": { "@trussworks/react-uswds": "^9.1.0", "@uswds/uswds": "^3.9.0", + "classnames": "^2.5.1", "fs": "^0.0.1-security", "gray-matter": "^4.0.3", "next": "14.2.15", @@ -29,13 +30,17 @@ "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.4.20", - "eslint": "^8", + "eslint": "^8.57.1", "eslint-config-next": "14.2.15", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-prettier": "^5.2.1", + "eslint-plugin-react": "^7.37.2", "husky": "^9.1.6", "lint-staged": "^15.2.10", "postcss": "^8", "postcss-import": "^16.1.0", - "prettier": "3.3.3", + "prettier": "^3.3.3", + "prettier-plugin-tailwindcss": "^0.6.8", "sass": "^1.79.5", "tailwindcss": "^3.4.1", "typescript": "^5" From f4a4f223bd1ea4b7a7574bbf183b3e381e663ffd Mon Sep 17 00:00:00 2001 From: Jake Wheeler Date: Thu, 24 Oct 2024 11:25:51 -0400 Subject: [PATCH 3/9] run format on all files --- .eslintrc.json | 7 ++----- .github/workflows/lighthouse.yml | 4 ++-- .github/workflows/pages.yml | 6 +++--- .prettierrc | 12 ++++++------ akamai-loader.js | 4 ++-- lighthouserc.yml | 2 +- next.config.js | 14 +++++++------- src/app/components/Footer.tsx | 18 +++++++++--------- src/app/components/Header.tsx | 24 ++++++++++++------------ src/app/components/MarkdownComponent.tsx | 6 +++--- src/app/components/UsaBanner.tsx | 12 ++++++------ src/app/globals.css | 8 ++++---- src/app/layout.tsx | 14 +++++++------- src/app/our-products/page.tsx | 10 +++++----- src/app/page.tsx | 16 ++++++++-------- src/app/product-detail/page.tsx | 10 +++++----- src/app/resources/page.tsx | 10 +++++----- src/app/styles/Home.module.scss | 4 ++-- src/app/utils/markdown.ts | 10 +++++----- tailwind.config.ts | 12 ++++++------ 20 files changed, 100 insertions(+), 103 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 6b309a5..2502e77 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -7,11 +7,8 @@ "plugin:@typescript-eslint/recommended", "prettier" ], - "plugins": [ - "react", - "@typescript-eslint" - ], + "plugins": ["react", "@typescript-eslint"], "rules": { "react/react-in-jsx-scope": "off" } -} \ No newline at end of file +} diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 41b857d..fc903ca 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -30,7 +30,7 @@ jobs: - name: Setup Node uses: actions/setup-node@v3 with: - node-version: "18" + node-version: '18' cache: ${{ steps.detect-package-manager.outputs.manager }} - name: Setup Pages uses: actions/configure-pages@v2 @@ -61,7 +61,7 @@ jobs: - name: Audit URLs using Lighthouse uses: treosh/lighthouse-ci-action@v9 with: - configPath: "./lighthouserc.yml" + configPath: './lighthouserc.yml' uploadArtifacts: false # save results as an action artifacts temporaryPublicStorage: false # upload lighthouse report to the temporary storage diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml index f32b1b2..430236c 100644 --- a/.github/workflows/pages.yml +++ b/.github/workflows/pages.yml @@ -7,7 +7,7 @@ name: Deploy Next.js site to Pages on: # Runs on pushes targeting the default branch push: - branches: ["main"] + branches: ['main'] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: @@ -20,7 +20,7 @@ permissions: # Allow one concurrent deployment concurrency: - group: "pages" + group: 'pages' cancel-in-progress: true jobs: @@ -50,7 +50,7 @@ jobs: - name: Setup Node uses: actions/setup-node@v3 with: - node-version: "18" + node-version: '18' cache: ${{ steps.detect-package-manager.outputs.manager }} - name: Setup Pages uses: actions/configure-pages@v2 diff --git a/.prettierrc b/.prettierrc index cd812e9..43cc3e4 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,8 +1,8 @@ { - "semi": true, - "trailingComma": "all", - "singleQuote": true, - "printWidth": 80, - "tabWidth": 2, - "plugins": ["prettier-plugin-tailwindcss"] + "semi": true, + "trailingComma": "all", + "singleQuote": true, + "printWidth": 80, + "tabWidth": 2, + "plugins": ["prettier-plugin-tailwindcss"] } diff --git a/akamai-loader.js b/akamai-loader.js index 1116fcb..98f37a9 100644 --- a/akamai-loader.js +++ b/akamai-loader.js @@ -1,4 +1,4 @@ -const normalizeSrc = (src) => (src[0] === "/" ? src.slice(1) : src); +const normalizeSrc = (src) => (src[0] === '/' ? src.slice(1) : src); export default function akamaiLoader({ src, width, quality }) { - return "/" + normalizeSrc(src) + "?imwidth=" + width; + return '/' + normalizeSrc(src) + '?imwidth=' + width; } diff --git a/lighthouserc.yml b/lighthouserc.yml index 8abf823..ede270c 100644 --- a/lighthouserc.yml +++ b/lighthouserc.yml @@ -1,6 +1,6 @@ ci: collect: - staticDistDir: "./out" + staticDistDir: './out' assert: assertions: categories:accessibility: [error, { minScore: 1 }] diff --git a/next.config.js b/next.config.js index be66455..b53467a 100644 --- a/next.config.js +++ b/next.config.js @@ -1,20 +1,20 @@ -const path = require("path"); +const path = require('path'); /** * @type {import('next').NextConfig} */ const nextConfig = { - output: "export", + output: 'export', reactStrictMode: true, swcMinify: true, images: { - loader: "custom", - loaderFile: "./akamai-loader.js", + loader: 'custom', + loaderFile: './akamai-loader.js', }, - basePath: "/dibbs-site", - assetPrefix: "/dibbs-site", + basePath: '/dibbs-site', + assetPrefix: '/dibbs-site', sassOptions: { - includePaths: [path.join(__dirname, "styles")], + includePaths: [path.join(__dirname, 'styles')], }, }; diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx index 76437a9..2a7dfbb 100644 --- a/src/app/components/Footer.tsx +++ b/src/app/components/Footer.tsx @@ -1,13 +1,13 @@ -"use client"; -import { Header, PrimaryNav } from "@trussworks/react-uswds"; -import Link from "next/link"; -import Image from "next/image"; -import React from "react"; -import styles from "../styles/Home.module.scss"; -import { NavigationLink } from "./Header"; +'use client'; +import { Header, PrimaryNav } from '@trussworks/react-uswds'; +import Link from 'next/link'; +import Image from 'next/image'; +import React from 'react'; +import styles from '../styles/Home.module.scss'; +import { NavigationLink } from './Header'; export default function Footer() { - const basePath = "/dibbs-site"; + const basePath = '/dibbs-site'; const [expanded, setExpanded] = React.useState(false); const onClick = () => { @@ -52,7 +52,7 @@ export default function Footer() { width={200} height={40} alt="" - className={"margin-x-0"} + className={'margin-x-0'} src={`${basePath}/images/CDC.svg`} /> diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx index e8450ca..fefc23b 100644 --- a/src/app/components/Header.tsx +++ b/src/app/components/Header.tsx @@ -1,18 +1,18 @@ -"use client"; -import { Header, PrimaryNav } from "@trussworks/react-uswds"; -import Link from "next/link"; -import Image from "next/image"; -import { usePathname } from "next/navigation"; -import React from "react"; -import styles from "../styles/Home.module.scss"; -import { LinkProps } from "next/link"; +'use client'; +import { Header, PrimaryNav } from '@trussworks/react-uswds'; +import Link from 'next/link'; +import Image from 'next/image'; +import { usePathname } from 'next/navigation'; +import React from 'react'; +import styles from '../styles/Home.module.scss'; +import { LinkProps } from 'next/link'; -interface NavigationLinkProps extends Pick { +interface NavigationLinkProps extends Pick { children: React.ReactNode; } export default function Navbar() { - const basePath = "/dibbs-site"; + const basePath = '/dibbs-site'; const [expanded, setExpanded] = React.useState(false); const onClick = () => { @@ -50,7 +50,7 @@ export default function Navbar() { width={200} height={40} alt="" - className={"margin-x-0"} + className={'margin-x-0'} src={`${basePath}/images/dibbs-logo.svg`} /> @@ -82,7 +82,7 @@ export function NavigationLink({ {children} diff --git a/src/app/components/MarkdownComponent.tsx b/src/app/components/MarkdownComponent.tsx index 36fbddc..2e3df72 100644 --- a/src/app/components/MarkdownComponent.tsx +++ b/src/app/components/MarkdownComponent.tsx @@ -1,6 +1,6 @@ -import React from "react"; -import ReactMarkdown from "react-markdown"; -import { getMarkdownContent } from "../utils/markdown"; +import React from 'react'; +import ReactMarkdown from 'react-markdown'; +import { getMarkdownContent } from '../utils/markdown'; export default async function MarkdownContent(fileName: string) { const markdownContent = await getMarkdownContent(fileName); diff --git a/src/app/components/UsaBanner.tsx b/src/app/components/UsaBanner.tsx index 8daa40a..217638e 100644 --- a/src/app/components/UsaBanner.tsx +++ b/src/app/components/UsaBanner.tsx @@ -1,5 +1,5 @@ -"use client"; -import React, { useState } from "react"; +'use client'; +import React, { useState } from 'react'; import { Banner, BannerHeader, @@ -10,10 +10,10 @@ import { BannerFlag, MediaBlockBody, Icon, -} from "@trussworks/react-uswds"; +} from '@trussworks/react-uswds'; export default function USABanner() { - const basePath: string = "/dibbs-site"; + const basePath: string = '/dibbs-site'; const [isOpen, setIsOpen] = useState(false); const flagImg: string = `${basePath}/images/us-flag.png`; const dotGovIcon: string = `${basePath}/images/us-gov-icon.svg`; @@ -53,10 +53,10 @@ export default function USABanner() {

Secure .gov websites use HTTPS -
A{" "} +
A{' '} lock () - {" "} + {' '} or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites. diff --git a/src/app/globals.css b/src/app/globals.css index 6409f77..c5f16b8 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,8 +1,8 @@ @tailwind base; @tailwind components; @tailwind utilities; -@import "@trussworks/react-uswds/lib/uswds.css"; -@import "@trussworks/react-uswds/lib/index.css"; +@import '@trussworks/react-uswds/lib/uswds.css'; +@import '@trussworks/react-uswds/lib/index.css'; :root { --background: #ffffff; @@ -69,7 +69,7 @@ h1 { } h1 { - font-family: "Source Sans Pro", sans-serif; + font-family: 'Source Sans Pro', sans-serif; font-size: 40px; font-weight: 700; line-height: 50.28px; @@ -78,7 +78,7 @@ h1 { h2 { color: #224a58; - font-family: "Source Sans Pro", sans-serif; + font-family: 'Source Sans Pro', sans-serif; font-size: 2rem; font-style: normal; font-weight: 700; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 66181e2..dd41ff1 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,12 +1,12 @@ -import type { Metadata } from "next"; -import "./globals.css"; -import Script from "next/script"; -import Navbar from "./components/Header"; -import Footer from "./components/Footer"; -import USABanner from "./components/UsaBanner"; +import type { Metadata } from 'next'; +import './globals.css'; +import Script from 'next/script'; +import Navbar from './components/Header'; +import Footer from './components/Footer'; +import USABanner from './components/UsaBanner'; export const metadata: Metadata = { - title: "DIBBS Site", + title: 'DIBBS Site', }; export default function RootLayout({ diff --git a/src/app/our-products/page.tsx b/src/app/our-products/page.tsx index 684eb9f..df1551c 100644 --- a/src/app/our-products/page.tsx +++ b/src/app/our-products/page.tsx @@ -1,4 +1,4 @@ -import Link from "next/link"; +import Link from 'next/link'; export default function ProductDetail() { return ( @@ -6,16 +6,16 @@ export default function ProductDetail() {

Our Products

  • - Home + Home
  • - Our products + Our products
  • - Product detail + Product detail
  • - Resources + Resources
diff --git a/src/app/page.tsx b/src/app/page.tsx index 4121084..34472ca 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,15 +1,15 @@ -import MarkdownContent from "./components/MarkdownComponent"; -import { Grid } from "@trussworks/react-uswds"; -import Image from "next/image"; +import MarkdownContent from './components/MarkdownComponent'; +import { Grid } from '@trussworks/react-uswds'; +import Image from 'next/image'; export default async function Home() { - const basePath = "/dibbs-site"; + const basePath = '/dibbs-site'; return ( <>
- {MarkdownContent("homepage/section_1.md")} + {MarkdownContent('homepage/section_1.md')}
@@ -23,14 +23,14 @@ export default async function Home() { alt="Placeholder" /> - {MarkdownContent("homepage/section_2.md")} + {MarkdownContent('homepage/section_2.md')}
- {MarkdownContent("homepage/section_3.md")} + {MarkdownContent('homepage/section_3.md')} - {MarkdownContent("homepage/section_4.md")} + {MarkdownContent('homepage/section_4.md')}
diff --git a/src/app/product-detail/page.tsx b/src/app/product-detail/page.tsx index 705dd72..9c24f18 100644 --- a/src/app/product-detail/page.tsx +++ b/src/app/product-detail/page.tsx @@ -1,4 +1,4 @@ -import Link from "next/link"; +import Link from 'next/link'; export default function ProductDetail() { return ( @@ -6,16 +6,16 @@ export default function ProductDetail() {

Product Detail

  • - Home + Home
  • - Our products + Our products
  • - Product detail + Product detail
  • - Resources + Resources
diff --git a/src/app/resources/page.tsx b/src/app/resources/page.tsx index ee62d19..e7d817a 100644 --- a/src/app/resources/page.tsx +++ b/src/app/resources/page.tsx @@ -1,4 +1,4 @@ -import Link from "next/link"; +import Link from 'next/link'; export default function ProductDetail() { return ( @@ -6,16 +6,16 @@ export default function ProductDetail() {

Resources

  • - Home + Home
  • - Our products + Our products
  • - Product detail + Product detail
  • - Resources + Resources
diff --git a/src/app/styles/Home.module.scss b/src/app/styles/Home.module.scss index bd31517..b1c5946 100644 --- a/src/app/styles/Home.module.scss +++ b/src/app/styles/Home.module.scss @@ -70,7 +70,7 @@ } .partnerItemHeaders { - font-family: "Public Sans", sans-serif; + font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 32px; line-height: 38px; @@ -121,7 +121,7 @@ } .partnerItemHeaders { - font-family: "Public Sans", sans-serif; + font-family: 'Public Sans', sans-serif; font-weight: 400; font-size: 22px; line-height: 26px; diff --git a/src/app/utils/markdown.ts b/src/app/utils/markdown.ts index 6f30e6a..8d7ecf8 100644 --- a/src/app/utils/markdown.ts +++ b/src/app/utils/markdown.ts @@ -1,10 +1,10 @@ -import * as fs from "fs"; -import * as path from "path"; -import matter from "gray-matter"; +import * as fs from 'fs'; +import * as path from 'path'; +import matter from 'gray-matter'; export async function getMarkdownContent(fileName: string) { - const markdownFilePath = path.join(process.cwd(), "src/content", fileName); - const fileContents = fs.readFileSync(markdownFilePath, "utf8"); + const markdownFilePath = path.join(process.cwd(), 'src/content', fileName); + const fileContents = fs.readFileSync(markdownFilePath, 'utf8'); const { content } = matter(fileContents, undefined); return content; diff --git a/tailwind.config.ts b/tailwind.config.ts index 021c393..4dcc94f 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,16 +1,16 @@ -import type { Config } from "tailwindcss"; +import type { Config } from 'tailwindcss'; const config: Config = { content: [ - "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", - "./src/components/**/*.{js,ts,jsx,tsx,mdx}", - "./src/app/**/*.{js,ts,jsx,tsx,mdx}", + './src/pages/**/*.{js,ts,jsx,tsx,mdx}', + './src/components/**/*.{js,ts,jsx,tsx,mdx}', + './src/app/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { extend: { colors: { - background: "var(--background)", - foreground: "var(--foreground)", + background: 'var(--background)', + foreground: 'var(--foreground)', }, }, }, From 2767fbd9885236104ae65535c649429a1939b138 Mon Sep 17 00:00:00 2001 From: Jake Wheeler Date: Thu, 24 Oct 2024 14:04:23 -0400 Subject: [PATCH 4/9] general clean up --- src/app/components/Footer.tsx | 23 ++++++------ src/app/components/Header.tsx | 52 ++++++++------------------- src/app/components/NavigationLink.tsx | 28 +++++++++++++++ src/app/components/UsaBanner.tsx | 5 +-- src/app/layout.tsx | 9 +++-- src/app/page.tsx | 3 +- src/app/utils/constants.ts | 6 ++++ 7 files changed, 68 insertions(+), 58 deletions(-) create mode 100644 src/app/components/NavigationLink.tsx create mode 100644 src/app/utils/constants.ts diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx index 2a7dfbb..6fbcdca 100644 --- a/src/app/components/Footer.tsx +++ b/src/app/components/Footer.tsx @@ -4,11 +4,11 @@ import Link from 'next/link'; import Image from 'next/image'; import React from 'react'; import styles from '../styles/Home.module.scss'; -import { NavigationLink } from './Header'; +import { NavigationLink } from './NavigationLink'; +import classNames from 'classnames'; +import { basePath } from '../utils/constants'; export default function Footer() { - const basePath = '/dibbs-site'; - const [expanded, setExpanded] = React.useState(false); const onClick = () => { if (window.innerWidth < 1024) setExpanded((prvExpanded) => !prvExpanded); @@ -17,22 +17,21 @@ export default function Footer() { const testItemsMenu = [ Home , - + Home , - + Our products , - + Case studies , - + Engage with us , ]; @@ -45,14 +44,16 @@ export default function Footer() {
- + CDC US center for disease control and prevention diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx index fefc23b..2f0711e 100644 --- a/src/app/components/Header.tsx +++ b/src/app/components/Header.tsx @@ -1,32 +1,26 @@ 'use client'; -import { Header, PrimaryNav } from '@trussworks/react-uswds'; -import Link from 'next/link'; +import { Header as USWDSHeader, PrimaryNav } from '@trussworks/react-uswds'; import Image from 'next/image'; -import { usePathname } from 'next/navigation'; import React from 'react'; import styles from '../styles/Home.module.scss'; -import { LinkProps } from 'next/link'; - -interface NavigationLinkProps extends Pick { - children: React.ReactNode; -} - -export default function Navbar() { - const basePath = '/dibbs-site'; +import classNames from 'classnames'; +import { basePath } from '../utils/constants'; +import { NavigationLink } from './NavigationLink'; +export default function Header() { const [expanded, setExpanded] = React.useState(false); const onClick = () => { if (window.innerWidth < 1024) setExpanded((prvExpanded) => !prvExpanded); }; const testItemsMenu = [ - + Our products , - + Case studies , - + Engage with us , ]; @@ -37,20 +31,22 @@ export default function Navbar() { Skip to main content -
+
- + Data Integration Building Blocks @@ -66,27 +62,7 @@ export default function Navbar() { onToggleMobileNav={onClick} />
-
+ ); } - -export function NavigationLink({ - href, - children, - onClick, -}: NavigationLinkProps) { - const pathname = usePathname(); // Use usePathname hook to get the current path - const isActive = pathname === href; - return ( - - - {children} - - - ); -} diff --git a/src/app/components/NavigationLink.tsx b/src/app/components/NavigationLink.tsx new file mode 100644 index 0000000..baf5df1 --- /dev/null +++ b/src/app/components/NavigationLink.tsx @@ -0,0 +1,28 @@ +import classNames from 'classnames'; +import Link, { LinkProps } from 'next/link'; +import { usePathname } from 'next/navigation'; +import styles from '../styles/Home.module.scss'; + +interface NavigationLinkProps extends Pick { + children: React.ReactNode; +} + +export function NavigationLink({ + href, + children, + onClick, +}: NavigationLinkProps) { + const pathname = usePathname(); // Use usePathname hook to get the current path + const isActive = pathname === href; + return ( + + + {children} + + + ); +} diff --git a/src/app/components/UsaBanner.tsx b/src/app/components/UsaBanner.tsx index 217638e..0738f4c 100644 --- a/src/app/components/UsaBanner.tsx +++ b/src/app/components/UsaBanner.tsx @@ -11,13 +11,10 @@ import { MediaBlockBody, Icon, } from '@trussworks/react-uswds'; +import { dotGovIcon, flagImg, httpsIcon } from '../utils/constants'; export default function USABanner() { - const basePath: string = '/dibbs-site'; const [isOpen, setIsOpen] = useState(false); - const flagImg: string = `${basePath}/images/us-flag.png`; - const dotGovIcon: string = `${basePath}/images/us-gov-icon.svg`; - const httpsIcon: string = `${basePath}/images/https-icon.svg`; return ( ) { return ( -
- +
{children}
diff --git a/src/app/page.tsx b/src/app/page.tsx index 34472ca..6667fc4 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,10 +1,9 @@ import MarkdownContent from './components/MarkdownComponent'; import { Grid } from '@trussworks/react-uswds'; import Image from 'next/image'; +import { basePath } from './utils/constants'; export default async function Home() { - const basePath = '/dibbs-site'; - return ( <>
diff --git a/src/app/utils/constants.ts b/src/app/utils/constants.ts new file mode 100644 index 0000000..d37743d --- /dev/null +++ b/src/app/utils/constants.ts @@ -0,0 +1,6 @@ +const basePath = '/dibbs-site'; +const flagImg = `${basePath}/images/us-flag.png`; +const dotGovIcon = `${basePath}/images/us-gov-icon.svg`; +const httpsIcon = `${basePath}/images/https-icon.svg`; + +export { basePath, flagImg, dotGovIcon, httpsIcon }; From 9658094dc34aa4d9f50e55ec71231a640230c058 Mon Sep 17 00:00:00 2001 From: Jake Wheeler Date: Thu, 24 Oct 2024 14:22:56 -0400 Subject: [PATCH 5/9] clean up links --- src/app/our-products/page.tsx | 8 ++++---- src/app/product-detail/page.tsx | 8 ++++---- src/app/resources/page.tsx | 8 ++++---- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/app/our-products/page.tsx b/src/app/our-products/page.tsx index df1551c..0ac25cb 100644 --- a/src/app/our-products/page.tsx +++ b/src/app/our-products/page.tsx @@ -6,16 +6,16 @@ export default function ProductDetail() {

Our Products

  • - Home + Home
  • - Our products + Our products
  • - Product detail + Product detail
  • - Resources + Resources
diff --git a/src/app/product-detail/page.tsx b/src/app/product-detail/page.tsx index 9c24f18..a03c743 100644 --- a/src/app/product-detail/page.tsx +++ b/src/app/product-detail/page.tsx @@ -6,16 +6,16 @@ export default function ProductDetail() {

Product Detail

  • - Home + Home
  • - Our products + Our products
  • - Product detail + Product detail
  • - Resources + Resources
diff --git a/src/app/resources/page.tsx b/src/app/resources/page.tsx index e7d817a..cca3a5a 100644 --- a/src/app/resources/page.tsx +++ b/src/app/resources/page.tsx @@ -6,16 +6,16 @@ export default function ProductDetail() {

Resources

  • - Home + Home
  • - Our products + Our products
  • - Product detail + Product detail
  • - Resources + Resources
From 0589705e188096b58e07b7cf6da55364747152dc Mon Sep 17 00:00:00 2001 From: Jake Wheeler Date: Thu, 24 Oct 2024 14:23:17 -0400 Subject: [PATCH 6/9] use footer html tag --- src/app/components/Footer.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx index 6fbcdca..1c12a23 100644 --- a/src/app/components/Footer.tsx +++ b/src/app/components/Footer.tsx @@ -1,5 +1,5 @@ 'use client'; -import { Header, PrimaryNav } from '@trussworks/react-uswds'; +import { PrimaryNav } from '@trussworks/react-uswds'; import Link from 'next/link'; import Image from 'next/image'; import React from 'react'; @@ -38,7 +38,7 @@ export default function Footer() { return ( <> -
+
@@ -69,7 +69,7 @@ export default function Footer() { onToggleMobileNav={onClick} />
-
+ ); } From 616394bdd6dd03ef521a7c777f3e4f6f0c0f4402 Mon Sep 17 00:00:00 2001 From: Jake Wheeler Date: Thu, 24 Oct 2024 14:25:31 -0400 Subject: [PATCH 7/9] arrays need to keep keys --- src/app/components/Footer.tsx | 9 +++++---- src/app/components/Header.tsx | 6 +++--- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx index 1c12a23..2c22c29 100644 --- a/src/app/components/Footer.tsx +++ b/src/app/components/Footer.tsx @@ -16,22 +16,23 @@ export default function Footer() { const testItemsMenu = [ Home , - + Home , - + Our products , - + Case studies , - + Engage with us , ]; diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx index 2f0711e..0f09875 100644 --- a/src/app/components/Header.tsx +++ b/src/app/components/Header.tsx @@ -14,13 +14,13 @@ export default function Header() { }; const testItemsMenu = [ - + Our products , - + Case studies , - + Engage with us , ]; From c111b81b068445f4690a9fee6a9ff1ee05a79959 Mon Sep 17 00:00:00 2001 From: Jake Wheeler Date: Thu, 24 Oct 2024 14:28:22 -0400 Subject: [PATCH 8/9] remove unneeded arg --- src/app/utils/markdown.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/utils/markdown.ts b/src/app/utils/markdown.ts index 8d7ecf8..5a776d6 100644 --- a/src/app/utils/markdown.ts +++ b/src/app/utils/markdown.ts @@ -5,7 +5,7 @@ import matter from 'gray-matter'; export async function getMarkdownContent(fileName: string) { const markdownFilePath = path.join(process.cwd(), 'src/content', fileName); const fileContents = fs.readFileSync(markdownFilePath, 'utf8'); - const { content } = matter(fileContents, undefined); + const { content } = matter(fileContents); return content; } From 620606d19e411a066b4522eee2e6e450807d4968 Mon Sep 17 00:00:00 2001 From: Jake Wheeler Date: Thu, 24 Oct 2024 14:52:43 -0400 Subject: [PATCH 9/9] make basePath the only constant for now --- src/app/components/UsaBanner.tsx | 7 ++++++- src/app/utils/constants.ts | 5 +---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/app/components/UsaBanner.tsx b/src/app/components/UsaBanner.tsx index 0738f4c..edeeb4c 100644 --- a/src/app/components/UsaBanner.tsx +++ b/src/app/components/UsaBanner.tsx @@ -11,10 +11,15 @@ import { MediaBlockBody, Icon, } from '@trussworks/react-uswds'; -import { dotGovIcon, flagImg, httpsIcon } from '../utils/constants'; +import { basePath } from '../utils/constants'; export default function USABanner() { const [isOpen, setIsOpen] = useState(false); + + const flagImg = `${basePath}/images/us-flag.png`; + const dotGovIcon = `${basePath}/images/us-gov-icon.svg`; + const httpsIcon = `${basePath}/images/https-icon.svg`; + return (