Skip to content

Commit

Permalink
chore: run prettier (#60)
Browse files Browse the repository at this point in the history
  • Loading branch information
KevinWu098 authored Mar 13, 2024
1 parent 28cf8ff commit 13f60d2
Show file tree
Hide file tree
Showing 124 changed files with 2,838 additions and 2,889 deletions.
3 changes: 3 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
build
public/static
node_modules
4 changes: 3 additions & 1 deletion .prettierrc
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
{
"useTabs": true,
"semi": true
"tabWidth": 4,
"semi": true,
"singleQuote": false
}
40 changes: 21 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
# Design @ UCI main site

![homepage](./assets//home.png)

## Running the app

This app is built on CRA without any custom webpack configs and utilizes the default react scripts. To run the app, first download the source code from the github and install all the dependencies. If you're using a unix based terminal, you can run the following commands (assuming you already have node/npm installed):

```bash
$ pwd
/path/to/place/you/want/to/put/the/code
Expand All @@ -11,7 +14,7 @@ $ git clone https://github.com/designatuci/DUCI-website.git
Cloning into 'DUCI-website'...
...other install messages

$ ls
$ ls
DUCI-website
...other files in this directory

Expand All @@ -29,11 +32,12 @@ $ npm start
and you can open up your app on [http://localhost:3000](http://localhost:3000) (or another port if you know what you're doing).

## Understanding the file structure

```bash
DUCI-website
├── assets (images for this README)
│ └── ...
├── public
├── public
│ ├── static
│ │ └── ...various assets
│ └── index.html
Expand All @@ -47,31 +51,31 @@ DUCI-website
│ ├── resources.json
│ └── socials.json
├── .gitignore
├── package.json
├── package.json
└── README.md
```
#### Basic list of important files and what they do
| Files | Description | Used in |
| --- | --- | --- |
| alumniBoard.json | information of all alumni board members | `src/app/pages/About` |
| currentBoard.json | information of all current board members | `src/app/pages/About` |
| merchList.json | list of all historical merch data (currently only has stickers) | `src/app/pages/Merch` |
| resources.json | all design resources for club members | `src/app/pages/Resources`, `src/app/pages/ResourcesFeatured` |
| socials.json | social media links for DUCI | `src/app/pages/Contact`, `src/app/components/Nav`, `src/app/components/Footer` |
| short_socials.json | full social media icon-links for DUCI | `src/app/pages/Join`, `src/app/pages/Hey` |
| Files | Description | Used in |
| ------------------ | --------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| alumniBoard.json | information of all alumni board members | `src/app/pages/About` |
| currentBoard.json | information of all current board members | `src/app/pages/About` |
| merchList.json | list of all historical merch data (currently only has stickers) | `src/app/pages/Merch` |
| resources.json | all design resources for club members | `src/app/pages/Resources`, `src/app/pages/ResourcesFeatured` |
| socials.json | social media links for DUCI | `src/app/pages/Contact`, `src/app/components/Nav`, `src/app/components/Footer` |
| short_socials.json | full social media icon-links for DUCI | `src/app/pages/Join`, `src/app/pages/Hey` |
#### Architecture
Similar to Gatsby and Next.js, all page components are stored in the `app/pages` folder. The original name for this folder was `routes` but with react-router-dom v6 changing the name of `<Switch />` to `<Routes/>`, this change was made.
All individual components that are not pages belong in the `app/components` folder and pure JS logic / React hooks are in the `app/controllers` folder. The exception for this are components that are used exclusively within a certain page. In these cases, the page itself will have its own set of `controllers` and `components` folders.
React is designed with a top-down unidirectional data flow. When deciding where to place state, for example, the general rule of thumb is to place it as low level as possible. We follow this type practice with the file structure as well where we place the React components as low level as possible.
React is designed with a top-down unidirectional data flow. When deciding where to place state, for example, the general rule of thumb is to place it as low level as possible. We follow this type practice with the file structure as well where we place the React components as low level as possible.
Example of a nested structure using this practice:
```bash
└── pages
├── ..other pages
Expand Down Expand Up @@ -117,15 +121,13 @@ Currently, the final build size is about 50kb which isn't nearly big enough to w
### Immediate improvements to be made
* i18n?
* a11y - mouse hover interaction (fields - text, buttons - pointer), semantic html (text component for example should be switched to various h tags)
* pagination for events list
* A lot of styling still needs to be refactored
- i18n?
- a11y - mouse hover interaction (fields - text, buttons - pointer), semantic html (text component for example should be switched to various h tags)
- pagination for events list
- A lot of styling still needs to be refactored
### Later planned updates:
Would like to rewrite the way designathons are currently structured. Since the designathon is over and the next one isn't for a while, there are no immediate plans to make these changes (especially since it's a fat >3k sloc file) but ideally we have a history of previous designathon websites.
Up to us on whether we want to keep the same format for every year and only change the data or have a new design format like most hackathon websites.
10 changes: 5 additions & 5 deletions jsconfig.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"compilerOptions": {
"jsx": "react",
"baseUrl": "src"
},
"include": ["src"]
"compilerOptions": {
"jsx": "react",
"baseUrl": "src"
},
"include": ["src"]
}
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@
"build": "react-scripts build",
"postbuild": "cp build/index.html build/404.html",
"test": "react-scripts test",
"eject": "react-scripts eject"
"eject": "react-scripts eject",
"format": "npx prettier --write ."
},
"eslintConfig": {
"extends": [
Expand Down
142 changes: 83 additions & 59 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -1,63 +1,87 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="A community all about digital design, including UX, UI, and graphic design. View more about us and come to our next meeting!"
/>
<meta
name="keywords"
content="design,at,UCI,university,irvine,UC,motion,graphic,UX,UI,learn,club,group,community,organization"
/>

<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description"
content="A community all about digital design, including UX, UI, and graphic design. View more about us and come to our next meeting!">
<meta name="keywords"
content="design,at,UCI,university,irvine,UC,motion,graphic,UX,UI,learn,club,group,community,organization">

<meta property="og:type" content="website" />
<meta property="og:title" content="Design at UCI" />
<meta property="og:description"
content="A club for all digital designers–from UI/UX to graphic design and beginners to experienced–to connect, learn, and innovate together!" />
<meta property="og:image" content="https://designatuci.com/ogimg.png" />
<meta property="og:url" content="https://designatuci.com" />
<meta property="og:site_name" content="Design at UCI" />

<link rel="canonical" href="https://designatuci.com/" />
<link rel="icon" href="/static/favicon/favicon16x.png" sizes="16x16" />
<link rel="icon" href="/static/favicon/favicon32x.png" sizes="32x32" />
<link rel="icon" href="/static/favicon/favicon48x.png" sizes="48x48" />
<link rel="apple-touch-icon" href="/static/favicon/favicon180x.png" sizes="180x180" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<title>Design at UCI</title>

<link rel="preload" href="/static/font/bold.woff2" as="font" type="font/woff" crossorigin>
<link rel="preload" href="/static/font/medium.woff2" as="font" type="font/woff" crossorigin>

<script defer data-domain="designatuci.com" src="https://plausible.io/js/script.js"></script>
</head>

<body class="freeze">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
<script>
window.addEventListener("load", () => {
document.body.classList.remove("freeze")
})
</script>
<style>
@font-face {
font-family: 'ducimain';
src: url('/static/font/bold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'ducimain';
src: url('/static/font/medium.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
</style>
<meta property="og:type" content="website" />
<meta property="og:title" content="Design at UCI" />
<meta
property="og:description"
content="A club for all digital designers–from UI/UX to graphic design and beginners to experienced–to connect, learn, and innovate together!"
/>
<meta property="og:image" content="https://designatuci.com/ogimg.png" />
<meta property="og:url" content="https://designatuci.com" />
<meta property="og:site_name" content="Design at UCI" />

<link rel="canonical" href="https://designatuci.com/" />
<link rel="icon" href="/static/favicon/favicon16x.png" sizes="16x16" />
<link rel="icon" href="/static/favicon/favicon32x.png" sizes="32x32" />
<link rel="icon" href="/static/favicon/favicon48x.png" sizes="48x48" />
<link
rel="apple-touch-icon"
href="/static/favicon/favicon180x.png"
sizes="180x180"
/>

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<title>Design at UCI</title>

<link
rel="preload"
href="/static/font/bold.woff2"
as="font"
type="font/woff"
crossorigin
/>
<link
rel="preload"
href="/static/font/medium.woff2"
as="font"
type="font/woff"
crossorigin
/>

<script
defer
data-domain="designatuci.com"
src="https://plausible.io/js/script.js"
></script>
</head>

<body class="freeze">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
<script>
window.addEventListener("load", () => {
document.body.classList.remove("freeze");
});
</script>
<style>
@font-face {
font-family: "ducimain";
src: url("/static/font/bold.woff2") format("woff2");
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: "ducimain";
src: url("/static/font/medium.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
</style>
</html>
22 changes: 11 additions & 11 deletions public/manifest.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"short_name": "D@UCI",
"name": "Design at UCI",
"icons": [
{
"src": "favicon.png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
"short_name": "D@UCI",
"name": "Design at UCI",
"icons": [
{
"src": "favicon.png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Loading

0 comments on commit 13f60d2

Please sign in to comment.