Skip to content

Commit d42c9a7

Browse files
authored
Frontend CI (#20)
* Added Frontend CI - formatting. Formatted some files, left others to check that they are caught * yarn not npm * Change working directory for format job * Change install dependencies command * Finish formatting with prettier * Add ESlint step in Frontend CI workflow. Reformat file to reuse setup steps * Try without working-directory * Try moving working-directory to top-level * remove setup step * Bug fix workflow file * Bug fix workflow file * Add ref to point to PR * Cleanup * Format new Documentation Page * Rename workflow file
1 parent e92f174 commit d42c9a7

25 files changed

+325
-196
lines changed

.github/workflows/frontend_ci.yml

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
name: Frontend CI
2+
3+
on: [pull_request]
4+
5+
defaults:
6+
run:
7+
working-directory: ./frontend
8+
9+
jobs:
10+
link-check:
11+
name: Run ESLint check
12+
runs-on: ubuntu-latest
13+
14+
steps:
15+
- name: Checkout code
16+
uses: actions/checkout@v4
17+
18+
- name: Setup Node.js
19+
uses: actions/setup-node@v4
20+
with:
21+
node-version: '20'
22+
23+
- name: Install dependencies
24+
run: yarn install
25+
26+
- name: Run dependencies
27+
run: yarn run lint
28+
29+
format-check:
30+
name: Run Prettier check
31+
runs-on: ubuntu-latest
32+
33+
steps:
34+
- name: Checkout code
35+
uses: actions/checkout@v4
36+
37+
- name: Setup Node.js
38+
uses: actions/setup-node@v4
39+
with:
40+
node-version: '20'
41+
42+
- name: Install dependencies
43+
run: yarn install
44+
45+
- name: Run dependencies
46+
run: yarn run format-check

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ This repository contains the code for the front-end website for the NIH-funded B
44

55
## Prerequisities
66

7-
- Node.js
7+
- [Node.js](https://nodejs.org/en) v20
88
- Yarn
99

1010
## Install

frontend/.vscode/extensions.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,4 @@
1212
"dbaeumer.jshint",
1313
"ms-vscode.vscode-typescript-tslint-plugin"
1414
]
15-
}
15+
}

frontend/.vscode/settings.json

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,7 @@
33
"editor.guides.bracketPairs": true,
44
"editor.formatOnSave": true,
55
"editor.defaultFormatter": "esbenp.prettier-vscode",
6-
"editor.codeActionsOnSave": [
7-
"source.fixAll.eslint"
8-
],
9-
"eslint.validate": [
10-
"javascript",
11-
"javascriptreact",
12-
"typescript",
13-
"vue"
14-
],
6+
"editor.codeActionsOnSave": ["source.fixAll.eslint"],
7+
"eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
158
"typescript.tsdk": "node_modules/typescript/lib"
16-
}
9+
}

frontend/README.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,41 @@
33
A Quasar Project
44

55
## Install the dependencies
6+
67
```bash
78
yarn
89
# or
910
npm install
1011
```
1112

1213
### Start the app in development mode (hot-code reloading, error reporting, etc.)
14+
1315
```bash
1416
quasar dev
1517
```
1618

17-
1819
### Lint the files
20+
1921
```bash
2022
yarn lint
2123
# or
2224
npm run lint
2325
```
2426

25-
2627
### Format the files
28+
2729
```bash
2830
yarn format
2931
# or
3032
npm run format
3133
```
3234

33-
34-
3535
### Build the app for production
36+
3637
```bash
3738
quasar build
3839
```
3940

4041
### Customize the configuration
42+
4143
See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).

frontend/index.html

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,28 @@
33
<head>
44
<title><%= productName %></title>
55

6-
<meta charset="utf-8">
7-
<meta name="description" content="<%= productDescription %>">
8-
<meta name="format-detection" content="telephone=no">
9-
<meta name="msapplication-tap-highlight" content="no">
10-
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
6+
<meta charset="utf-8" />
7+
<meta name="description" content="<%= productDescription %>" />
8+
<meta name="format-detection" content="telephone=no" />
9+
<meta name="msapplication-tap-highlight" content="no" />
10+
<meta
11+
name="viewport"
12+
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
13+
/>
1114

12-
<link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
13-
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
14-
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
15-
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
16-
<link rel="icon" type="image/ico" href="favicon.ico">
15+
<link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png" />
16+
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png" />
17+
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png" />
18+
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png" />
19+
<link rel="icon" type="image/ico" href="favicon.ico" />
1720

1821
<!-- Google tag (gtag.js) -->
1922
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0QL6YPBXFZ"></script>
2023
<script>
2124
window.dataLayer = window.dataLayer || [];
22-
function gtag(){dataLayer.push(arguments);}
25+
function gtag() {
26+
dataLayer.push(arguments);
27+
}
2328
gtag('js', new Date());
2429

2530
gtag('config', 'G-0QL6YPBXFZ');

frontend/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"scripts": {
99
"lint": "eslint --ext .js,.ts,.vue ./",
1010
"format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
11+
"format-check": "prettier --check \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
1112
"test": "echo \"No test specified\" && exit 0",
1213
"dev": "quasar dev",
1314
"build": "quasar build"

frontend/quasar.config.js

Lines changed: 28 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,8 @@
88
// Configuration for your app
99
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
1010

11-
1211
const { configure } = require('quasar/wrappers');
1312

14-
1513
module.exports = configure(function (/* ctx */) {
1614
return {
1715
// https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
@@ -20,15 +18,10 @@ module.exports = configure(function (/* ctx */) {
2018
// app boot file (/src/boot)
2119
// --> boot files are part of "main.js"
2220
// https://v2.quasar.dev/quasar-cli-vite/boot-files
23-
boot: [
24-
25-
26-
],
21+
boot: [],
2722

2823
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
29-
css: [
30-
'app.scss'
31-
],
24+
css: ['app.scss'],
3225

3326
// https://github.com/quasarframework/quasar/tree/dev/extras
3427
extras: [
@@ -47,8 +40,8 @@ module.exports = configure(function (/* ctx */) {
4740
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
4841
build: {
4942
target: {
50-
browser: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
51-
node: 'node20'
43+
browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
44+
node: 'node20',
5245
},
5346

5447
vueRouterMode: 'history', // available values: 'hash', 'history'
@@ -71,21 +64,25 @@ module.exports = configure(function (/* ctx */) {
7164
// viteVuePluginOptions: {},
7265

7366
vitePlugins: [
74-
['vite-plugin-checker', {
75-
vueTsc: {
76-
tsconfigPath: 'tsconfig.vue-tsc.json'
67+
[
68+
'vite-plugin-checker',
69+
{
70+
vueTsc: {
71+
tsconfigPath: 'tsconfig.vue-tsc.json',
72+
},
73+
eslint: {
74+
lintCommand: 'eslint "./**/*.{js,ts,mjs,cjs,vue}"',
75+
},
7776
},
78-
eslint: {
79-
lintCommand: 'eslint "./**/*.{js,ts,mjs,cjs,vue}"'
80-
}
81-
}, { server: false }]
82-
]
77+
{ server: false },
78+
],
79+
],
8380
},
8481

8582
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
8683
devServer: {
8784
// https: true
88-
open: true // opens browser window automatically
85+
open: true, // opens browser window automatically
8986
},
9087

9188
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
@@ -103,7 +100,7 @@ module.exports = configure(function (/* ctx */) {
103100
// directives: [],
104101

105102
// Quasar plugins
106-
plugins: []
103+
plugins: [],
107104
},
108105

109106
// animations: 'all', // --- includes all animations
@@ -125,7 +122,7 @@ module.exports = configure(function (/* ctx */) {
125122
// https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
126123
ssr: {
127124
// ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
128-
// will mess up SSR
125+
// will mess up SSR
129126

130127
// extendSSRWebserverConf (esbuildConf) {},
131128
// extendPackageJson (json) {},
@@ -136,11 +133,11 @@ module.exports = configure(function (/* ctx */) {
136133
// manualPostHydrationTrigger: true,
137134

138135
prodPort: 3000, // The default port that the production server should use
139-
// (gets superseded if process.env.PORT is specified at runtime)
136+
// (gets superseded if process.env.PORT is specified at runtime)
140137

141138
middlewares: [
142-
'render' // keep this as last one
143-
]
139+
'render', // keep this as last one
140+
],
144141
},
145142

146143
// https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
@@ -164,7 +161,7 @@ module.exports = configure(function (/* ctx */) {
164161

165162
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor
166163
capacitor: {
167-
hideSplashscreen: true
164+
hideSplashscreen: true,
168165
},
169166

170167
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron
@@ -178,32 +175,28 @@ module.exports = configure(function (/* ctx */) {
178175

179176
packager: {
180177
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
181-
182178
// OS X / Mac App Store
183179
// appBundleId: '',
184180
// appCategoryType: '',
185181
// osxSign: '',
186182
// protocol: 'myapp://path',
187-
188183
// Windows only
189184
// win32metadata: { ... }
190185
},
191186

192187
builder: {
193188
// https://www.electron.build/configuration/configuration
194189

195-
appId: 'frontend'
196-
}
190+
appId: 'frontend',
191+
},
197192
},
198193

199194
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
200195
bex: {
201-
contentScripts: [
202-
'my-content-script'
203-
],
196+
contentScripts: ['my-content-script'],
204197

205198
// extendBexScriptsConf (esbuildConf) {}
206199
// extendBexManifestJson (json) {}
207-
}
208-
}
200+
},
201+
};
209202
});

frontend/src/App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44

55
<script setup lang="ts">
66
defineOptions({
7-
name: 'App'
7+
name: 'App',
88
});
99
</script>

frontend/src/constants/about.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/**
2+
* about.ts
3+
*
4+
* Contains organizations, team members, and image paths to populate the About page.
5+
*/
16
import { OrganizationTeam } from 'src/models/about';
27

38
export const team: OrganizationTeam[] = [
@@ -43,7 +48,7 @@ export const team: OrganizationTeam[] = [
4348
{
4449
name: 'Lauren Diaz',
4550
image: 'team/lauren_diaz.jpg',
46-
}
51+
},
4752
],
4853
},
4954
{

0 commit comments

Comments
 (0)