diff --git a/.github/workflows/lint-backend.yml b/.github/workflows/lint-backend.yml index 091b46a45..b96664a4e 100644 --- a/.github/workflows/lint-backend.yml +++ b/.github/workflows/lint-backend.yml @@ -1,6 +1,5 @@ name: Lint Backend -on: - pull_request: +on: [push, pull_request] jobs: linting: @@ -14,6 +13,6 @@ jobs: uses: actions/setup-python@v2 - name: Lint - uses: chartboost/ruff-action@v1 + uses: astral-sh/ruff-action@v1 with: src: ./backend diff --git a/.github/workflows/lint-frontend.yml b/.github/workflows/lint-frontend.yml index 6b8ab639a..465b71f2e 100644 --- a/.github/workflows/lint-frontend.yml +++ b/.github/workflows/lint-frontend.yml @@ -1,7 +1,5 @@ name: Lint Frontend - -on: - pull_request: +on: [push, pull_request] jobs: linting: @@ -23,4 +21,6 @@ jobs: run: npm install - name: Lint - run: npm run lint \ No newline at end of file + run: | + npm run lint + npm run format \ No newline at end of file diff --git a/.github/workflows/test-backend.yml b/.github/workflows/test-backend.yml index 072a4418c..51a7e2e08 100644 --- a/.github/workflows/test-backend.yml +++ b/.github/workflows/test-backend.yml @@ -1,6 +1,5 @@ name: Test Backend -on: - pull_request: +on: [push, pull_request] jobs: testing: diff --git a/.github/workflows/type-check-backend.yml b/.github/workflows/type-check-backend.yml index 672970161..7d3975eba 100644 --- a/.github/workflows/type-check-backend.yml +++ b/.github/workflows/type-check-backend.yml @@ -1,6 +1,5 @@ name: Type Check Backend -on: - pull_request: +on: [push, pull_request] jobs: checking: diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json index 2af0ae9f7..069e4364f 100644 --- a/frontend/.eslintrc.json +++ b/frontend/.eslintrc.json @@ -26,13 +26,6 @@ "sourceType": "module" }, "plugins": ["@typescript-eslint", "react", "@stylistic/js"], - "rules": { - "indent": ["error", 2], - "linebreak-style": ["error", "unix"], - "quotes": ["error", "single"], - "semi": ["error", "always"], - "@stylistic/js/eol-last": ["error", "always"] - }, "settings": { "react": { "version": "detect" diff --git a/frontend/.prettierrc.json b/frontend/.prettierrc.json new file mode 100644 index 000000000..17ced985b --- /dev/null +++ b/frontend/.prettierrc.json @@ -0,0 +1,7 @@ +{ + "singleQuote": true, + "trailingComma": "es5", + "tabWidth": 2, + "semi": true, + "endOfLine": "lf" +} diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 99422c1ba..952d1238e 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -23,9 +23,12 @@ "css-loader": "^6.10.0", "dotenv": "^16.4.5", "eslint": "^8.57.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-react": "^7.34.1", "html-webpack-plugin": "^5.6.0", "mini-css-extract-plugin": "^2.8.1", + "prettier": "^3.3.3", "ts-loader": "^9.5.1", "typescript": "^5.4.3", "webpack": "^5.91.0", @@ -405,6 +408,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/@stylistic/eslint-plugin-js": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin-js/-/eslint-plugin-js-1.7.0.tgz", @@ -2606,6 +2622,50 @@ "url": "https://opencollective.com/eslint" } }, + "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-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.34.1", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.1.tgz", @@ -3069,6 +3129,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", @@ -5496,6 +5563,35 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.3.3", + "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" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "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/pretty-error": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz", @@ -6585,6 +6681,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/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 50c26456b..9f9062b29 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -8,7 +8,8 @@ "start": "webpack serve --port 8650", "build": "webpack", "lint": "eslint .", - "lint:fix": "eslint . --fix" + "lint:fix": "eslint . --fix", + "format": "prettier --write \"**/*.+(js|jsx|ts|tsx|css)\"" }, "author": "", "license": "ISC", @@ -22,9 +23,12 @@ "css-loader": "^6.10.0", "dotenv": "^16.4.5", "eslint": "^8.57.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-react": "^7.34.1", "html-webpack-plugin": "^5.6.0", "mini-css-extract-plugin": "^2.8.1", + "prettier": "^3.3.3", "ts-loader": "^9.5.1", "typescript": "^5.4.3", "webpack": "^5.91.0", diff --git a/frontend/src/app.module.css b/frontend/src/app.module.css index 19e52bc10..68ca4de8f 100644 --- a/frontend/src/app.module.css +++ b/frontend/src/app.module.css @@ -3,7 +3,7 @@ display: flex; flex-direction: column; height: 100%; - justify-content: center; + justify-content: center; } .title { diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx index a8b5d5663..5e620580e 100644 --- a/frontend/src/app.tsx +++ b/frontend/src/app.tsx @@ -11,6 +11,6 @@ export const App = () => {
-
+ ); }; diff --git a/frontend/src/components/chat.tsx b/frontend/src/components/chat.tsx index 31bfec5bb..3b4895811 100644 --- a/frontend/src/components/chat.tsx +++ b/frontend/src/components/chat.tsx @@ -3,14 +3,20 @@ import { Message, MessageComponent } from './message'; import styles from './chat.module.css'; import { Waiting } from './waiting'; import { ConnectionStatus } from './connection-status'; -import { WebsocketContext, MessageType, Message as wsMessage } from '../session/websocket-context'; +import { + WebsocketContext, + MessageType, + Message as wsMessage, +} from '../session/websocket-context'; import { Confirmation, ConfirmModal } from './confirm-modal'; export interface ChatProps { messages: Message[]; waiting: boolean; } -const mapWsMessageToConfirmation = (message: wsMessage): Confirmation | undefined => { +const mapWsMessageToConfirmation = ( + message: wsMessage +): Confirmation | undefined => { if (!message.data) { return; } @@ -31,8 +37,7 @@ export const Chat = ({ messages, waiting }: ChatProps) => { } if (lastMessage && lastMessage.type === MessageType.CONFIRMATION) { const newConfirmation = mapWsMessageToConfirmation(lastMessage); - if (newConfirmation) - setConfirmation(newConfirmation); + if (newConfirmation) setConfirmation(newConfirmation); } }, [lastMessage]); @@ -44,7 +49,11 @@ export const Chat = ({ messages, waiting }: ChatProps) => { return ( <> - +
{messages.map((message, index) => ( diff --git a/frontend/src/components/confirm-modal.module.css b/frontend/src/components/confirm-modal.module.css index 9004e1e33..4ad465dce 100644 --- a/frontend/src/components/confirm-modal.module.css +++ b/frontend/src/components/confirm-modal.module.css @@ -1,63 +1,62 @@ -.modal{ - width: 40%; - height: 40%; - background-color: #4c4c4c; - color: var(--text-color-primary); - border: 2px black; - border-radius: 10px; +.modal { + width: 40%; + height: 40%; + background-color: #4c4c4c; + color: var(--text-color-primary); + border: 2px black; + border-radius: 10px; } -.modalContent{ - width: 100%; - height: 100%; - display: flex; - flex-direction: column; +.modalContent { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; } -.header{ - text-align: center; +.header { + text-align: center; } -.modal::backdrop{ - background: rgb(0,0,0,0.8); +.modal::backdrop { + background: rgb(0, 0, 0, 0.8); } -.requestMessage{ - flex-grow: 1; +.requestMessage { + flex-grow: 1; } -.buttonsBar{ - display: flex; - gap: 0.5rem; +.buttonsBar { + display: flex; + gap: 0.5rem; } -.button{ - color: var(--text-color-primary); - font-weight: bold; - border: none; - width: 100%; - padding: 1rem; - cursor: pointer; - border-radius: 3px; +.button { + color: var(--text-color-primary); + font-weight: bold; + border: none; + width: 100%; + padding: 1rem; + cursor: pointer; + border-radius: 3px; } - -.cancel{ - composes: button; - background-color: var(--background-color-primary); +.cancel { + composes: button; + background-color: var(--background-color-primary); } -.cancel:hover{ - background-color: #141414; - transition: all 0.5s; +.cancel:hover { + background-color: #141414; + transition: all 0.5s; } -.confirm{ - composes: button; - background-color: var(--blue); +.confirm { + composes: button; + background-color: var(--blue); } -.confirm:hover{ - background-color: #146AFF; - transition: all 0.5s; +.confirm:hover { + background-color: #146aff; + transition: all 0.5s; } diff --git a/frontend/src/components/confirm-modal.tsx b/frontend/src/components/confirm-modal.tsx index 9cadf0fc2..b5662e816 100644 --- a/frontend/src/components/confirm-modal.tsx +++ b/frontend/src/components/confirm-modal.tsx @@ -4,20 +4,27 @@ import { Message, MessageType } from '../session/websocket-context'; import React from 'react'; export interface Confirmation { - id: string, - requestMessage: string, - result: boolean | null + id: string; + requestMessage: string; + result: boolean | null; } interface ConfirmModalProps { - confirmation: Confirmation | null, - setConfirmation: (confirmation: Confirmation | null) => void, - send: (message: Message) => void + confirmation: Confirmation | null; + setConfirmation: (confirmation: Confirmation | null) => void; + send: (message: Message) => void; } -export const ConfirmModal = ({ confirmation, setConfirmation, send }: ConfirmModalProps) => { +export const ConfirmModal = ({ + confirmation, + setConfirmation, + send, +}: ConfirmModalProps) => { const mapConfirmationToMessage = (confirmation: Confirmation): Message => { - return { type: MessageType.CONFIRMATION, data: confirmation.id + ':' + (confirmation.result ? 'y' : 'n') }; + return { + type: MessageType.CONFIRMATION, + data: confirmation.id + ':' + (confirmation.result ? 'y' : 'n'), + }; }; const updateConfirmationResult = (newResult: boolean) => { @@ -26,7 +33,6 @@ export const ConfirmModal = ({ confirmation, setConfirmation, send }: ConfirmMod } }; - const modalRef = useRef(null); useEffect(() => { @@ -43,13 +49,29 @@ export const ConfirmModal = ({ confirmation, setConfirmation, send }: ConfirmMod }, [confirmation]); return ( - updateConfirmationResult(false)}> + updateConfirmationResult(false)} + >

Confirmation

-

{confirmation && confirmation.requestMessage}

+

+ {confirmation && confirmation.requestMessage} +

- - + +
diff --git a/frontend/src/components/connection-status.module.css b/frontend/src/components/connection-status.module.css index 21d2f1402..5e7c21f42 100644 --- a/frontend/src/components/connection-status.module.css +++ b/frontend/src/components/connection-status.module.css @@ -1,24 +1,24 @@ .container { - position: absolute; - top: 0; - right: 0; - float: right; - display: flex; - justify-content: space-between; - align-items: center; + position: absolute; + top: 0; + right: 0; + float: right; + display: flex; + justify-content: space-between; + align-items: center; } .dot { - width: 10px; - height: 10px; - border-radius: 50%; - margin: 10px; + width: 10px; + height: 10px; + border-radius: 50%; + margin: 10px; } .green { - background-color: green; + background-color: green; } .red { - background-color: red; -} \ No newline at end of file + background-color: red; +} diff --git a/frontend/src/components/connection-status.tsx b/frontend/src/components/connection-status.tsx index 622c45af9..444b60e5b 100644 --- a/frontend/src/components/connection-status.tsx +++ b/frontend/src/components/connection-status.tsx @@ -9,10 +9,12 @@ export interface ConnectionStatusProps { export const ConnectionStatus = ({ isConnected }: ConnectionStatusProps) => { return (
-
+
); }; diff --git a/frontend/src/components/input.module.css b/frontend/src/components/input.module.css index 16e4bb6cf..ab9dd97aa 100644 --- a/frontend/src/components/input.module.css +++ b/frontend/src/components/input.module.css @@ -40,11 +40,13 @@ .disabled { cursor: not-allowed; - filter: invert(24%) sepia(3%) saturate(0%) hue-rotate(263deg) brightness(95%) contrast(90%); + filter: invert(24%) sepia(3%) saturate(0%) hue-rotate(263deg) brightness(95%) + contrast(90%); } .sendButton:hover:not(.disabled) { - filter: invert(31%) sepia(75%) saturate(3303%) hue-rotate(200deg) brightness(102%) contrast(105%); + filter: invert(31%) sepia(75%) saturate(3303%) hue-rotate(200deg) + brightness(102%) contrast(105%); } .sendButton:active:not(.disabled) { diff --git a/frontend/src/components/input.tsx b/frontend/src/components/input.tsx index f4a0f91a0..9744effad 100644 --- a/frontend/src/components/input.tsx +++ b/frontend/src/components/input.tsx @@ -1,4 +1,10 @@ -import React, { ChangeEvent, FormEvent, useCallback, useMemo, useState } from 'react'; +import React, { + ChangeEvent, + FormEvent, + useCallback, + useMemo, + useState, +} from 'react'; import styles from './input.module.css'; import RightArrow from '../icons/map-arrow-right.svg'; import classNames from 'classnames'; @@ -35,7 +41,13 @@ export const Input = ({ sendMessage }: InputProps) => { type="text" value={userInput} /> - diff --git a/frontend/src/components/waiting.module.css b/frontend/src/components/waiting.module.css index a72d50ef9..a7e19f733 100644 --- a/frontend/src/components/waiting.module.css +++ b/frontend/src/components/waiting.module.css @@ -1,32 +1,33 @@ - @keyframes waiting { - 0%, 80%, 100% { - opacity: 0; - } - 40% { - opacity: 1; - } - } - - .waiting { - align-self: baseline; - display: inline-block; + 0%, + 80%, + 100% { + opacity: 0; } - - .waitingDot { - animation: waiting 1.5s infinite ease-in-out; - background-color: var(--text-color-primary); - border-radius: 50%; - display: inline-block; - height: 8px; - margin-right: 4px; - width: 8px; + 40% { + opacity: 1; } - - .waitingDot:nth-child(2) { - animation-delay: 0.2s; - } - - .waitingDot:nth-child(3) { - animation-delay: 0.4s; - } \ No newline at end of file +} + +.waiting { + align-self: baseline; + display: inline-block; +} + +.waitingDot { + animation: waiting 1.5s infinite ease-in-out; + background-color: var(--text-color-primary); + border-radius: 50%; + display: inline-block; + height: 8px; + margin-right: 4px; + width: 8px; +} + +.waitingDot:nth-child(2) { + animation-delay: 0.2s; +} + +.waitingDot:nth-child(3) { + animation-delay: 0.4s; +} diff --git a/frontend/src/declarations.d.ts b/frontend/src/declarations.d.ts index 43c0b0e40..3a2d94354 100644 --- a/frontend/src/declarations.d.ts +++ b/frontend/src/declarations.d.ts @@ -1,2 +1,2 @@ -declare module '*.module.css' -declare module '*.svg' +declare module '*.module.css'; +declare module '*.svg'; diff --git a/frontend/src/server.ts b/frontend/src/server.ts index d145f5ba7..ccb2b0613 100644 --- a/frontend/src/server.ts +++ b/frontend/src/server.ts @@ -6,7 +6,9 @@ function createChatMessageResponse(message: string): ChatMessageResponse { return { message }; } -export const getResponse = async (message: string): Promise => { +export const getResponse = async ( + message: string +): Promise => { if (message == 'healthcheck') { return checkBackendHealth(); } else { @@ -14,32 +16,42 @@ export const getResponse = async (message: string): Promise } }; -const unhappyHealthcheckResponse = createChatMessageResponse('InferGPT healthcheck: backend is unhealthy. Unable to healthcheck Neo4J. Please check the README files for further guidance'); +const unhappyHealthcheckResponse = createChatMessageResponse( + 'InferGPT healthcheck: backend is unhealthy. Unable to healthcheck Neo4J. Please check the README files for further guidance' +); const checkBackendHealth = async (): Promise => { return await fetch(`${process.env.BACKEND_URL}/health`) - .then(response => response.json()) - .then(responseJson => { return createChatMessageResponse(responseJson); }) - .catch(error => { + .then((response) => response.json()) + .then((responseJson) => { + return createChatMessageResponse(responseJson); + }) + .catch((error) => { console.error('Error making REST call to /chat: ', error); return unhappyHealthcheckResponse; }); }; -const unhappyChatResponse = createChatMessageResponse('I\'m sorry, but I was unable to process your message. Please check the status of the service using the phrase "healthcheck"'); +const unhappyChatResponse = createChatMessageResponse( + 'I\'m sorry, but I was unable to process your message. Please check the status of the service using the phrase "healthcheck"' +); -const callChatEndpoint = async (message: string): Promise => { +const callChatEndpoint = async ( + message: string +): Promise => { return await fetch(`${process.env.BACKEND_URL}/chat?utterance=${message}`) - .then(response => { + .then((response) => { if (!response.ok) { console.log('error found'); throw new Error(`HTTP error! Status: ${response.status}`); } return response; }) - .then(response => response.json()) - .then(responseJson => { return createChatMessageResponse(responseJson); }) - .catch(error => { + .then((response) => response.json()) + .then((responseJson) => { + return createChatMessageResponse(responseJson); + }) + .catch((error) => { console.error('Error making REST call to /chat: ', error); return unhappyChatResponse; }); diff --git a/frontend/src/session/websocket-provider.tsx b/frontend/src/session/websocket-provider.tsx index 9b0f45e5d..871aa0423 100644 --- a/frontend/src/session/websocket-provider.tsx +++ b/frontend/src/session/websocket-provider.tsx @@ -1,5 +1,16 @@ -import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { Connection, Message, MessageType, WebsocketContext } from './websocket-context'; +import React, { + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; +import { + Connection, + Message, + MessageType, + WebsocketContext, +} from './websocket-context'; export interface WebsocketProviderProps { children: React.ReactNode; @@ -12,12 +23,12 @@ const ping = JSON.stringify({ type: MessageType.PING }); export const WebsocketProvider = ({ children }: WebsocketProviderProps) => { const [isConnected, setIsConnected] = useState(false); const [lastMessage, setLastMessage] = useState(null); - + const ws = useRef(null); const heartbeat = useCallback(() => { if (!ws.current || ws.current?.readyState !== 1) return; - + ws.current.send(ping); setTimeout(heartbeat, heartbeatInterval); diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 210c69845..874edf356 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -1,4 +1,6 @@ -html, body, #app-root { +html, +body, +#app-root { font-family: 'Source Sans 3', sans-serif; height: 100%; margin: 0; diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index ecfc2c7f8..55237ef53 100644 --- a/frontend/webpack.config.js +++ b/frontend/webpack.config.js @@ -6,7 +6,9 @@ import path from 'path'; import { fileURLToPath } from 'url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const localEnv = dotenv.config({ path: path.resolve(__dirname, '../.env') }).parsed; +const localEnv = dotenv.config({ + path: path.resolve(__dirname, '../.env'), +}).parsed; const env = { ...process.env, ...localEnv }; const config = { @@ -15,7 +17,7 @@ const config = { output: { path: path.resolve(__dirname, 'dist'), publicPath: '/', - filename: '[name].bundle.js' + filename: '[name].bundle.js', }, module: { @@ -37,7 +39,7 @@ const config = { options: { importLoaders: 1, modules: { - localIdentName: '[local]__[hash:base64:5]' + localIdentName: '[local]__[hash:base64:5]', }, }, }, @@ -52,7 +54,7 @@ const config = { { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', - } + }, ], }, devtool: 'source-map', @@ -63,8 +65,8 @@ const config = { }), new MiniCssExtractPlugin(), new webpack.DefinePlugin({ - 'process.env': JSON.stringify(env) - }) + 'process.env': JSON.stringify(env), + }), ], };