Skip to content

Commit 317d29d

Browse files
CannonLockCannonLock
committed
Initial Update
1 parent 4cb8bd3 commit 317d29d

File tree

11 files changed

+81
-215
lines changed

11 files changed

+81
-215
lines changed

‎.github/workflows/nextjs.yml‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,6 @@ jobs:
3838
steps:
3939
- name: Checkout
4040
uses: actions/checkout@v4
41-
- name: Update Submodules
42-
run: git submodule update --init --recursive --remote
4341
- name: Install pnpm
4442
uses: pnpm/action-setup@v4
4543
with:
@@ -64,12 +62,12 @@ jobs:
6462
# Deployment job
6563
deploy:
6664
if: github.event_name != 'pull_request' && github.ref =='refs/heads/main'
65+
environment:
66+
name: github-pages
67+
url: ${{ steps.deployment.outputs.page_url }}
6768
runs-on: ubuntu-latest
6869
needs: build
6970
steps:
70-
- name: Hit Web Hook
71-
run: |
72-
curl -X 'POST' \
73-
'https://badgercompute.chtc.chtc.io/api/api/hooks/release-download-toggle' \
74-
-H 'accept: application/json' \
75-
-d ''
71+
- name: Deploy to GitHub Pages
72+
id: deployment
73+
uses: actions/deploy-pages@v4

‎README.md‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
# BadgerCompute
2-
3-
View what version is deployed here: https://badgercompute.wisc.edu/.ArtifactServer/metadata.json
1+
# CHTC User UI
42

53
# Development
64

7-
85
## Docker
96

107
This is the easiest, if you have something quick I would do this.
@@ -22,12 +19,3 @@ docker compose up
2219
Run `pnpm run dev`.
2320

2421
This will be the fastest if you aren't on linux.
25-
26-
## Documentation
27-
28-
Navigation for the docs can be found in `/app/docs/navigation.ts`.
29-
30-
The docs are found in `/docs/`, with their images found in `/public/docs/`.
31-
32-
Refer to the admin docs for a [guide on writing documentation](https://badgercompute.wisc.edu/docs/admin-docs/) in this repository. If you need a custom component reach out
33-
to the web staff.

‎app/layout.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {Box} from "@mui/material";
44
import { ThemeProvider } from "@mui/material/styles";
55
import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
66
import {Red_Hat_Display, Red_Hat_Text} from "next/font/google";
7-
import { PlayArrow, Description, AssignmentTurnedIn } from '@mui/icons-material';
7+
import {PlayArrow, Description, AssignmentTurnedIn, People, Folder, Group, School} from '@mui/icons-material';
88

99
import Banner from "@chtc/web-components/UW/Banner"
1010
import Footer from "@chtc/web-components/UW/Footer"
@@ -31,15 +31,11 @@ export const metadata: Metadata = {
3131
};
3232

3333
const pages = [
34-
{ label: 'Get Started', path: '/get-started', icon: <PlayArrow /> },
35-
{ label: 'Policies', path: '/policies', icon: <AssignmentTurnedIn /> },
36-
{
37-
label: 'Documentation',
38-
path: '/docs',
39-
icon: <Description />,
40-
children: navigation
41-
}
42-
]
34+
{ label: "Users", path: "/users", icon: <People /> },
35+
{ label: "Projects", path: "/projects", icon: <Folder /> },
36+
{ label: "Groups", path: "/groups", icon: <Group /> },
37+
{ label: "PIs", path: "/pis", icon: <School /> },
38+
];
4339

4440
export default function RootLayout({
4541
children,

‎app/page.tsx‎

Lines changed: 1 addition & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -1,179 +1,17 @@
11
import { Box, Typography, Button, Container, Card, CardContent } from "@mui/material";
22
import Grid from "@mui/material/Grid";
33

4-
import CardMedia from "@/components/CardMedia";
5-
64
export default async function Home() {
75

86
return (
97

108
<Box sx={{ minHeight: "100vh", bgcolor: "background.default" }}>
11-
{/* Video Background Section */}
12-
<Box
13-
sx={{
14-
width: "100%",
15-
overflow: "hidden",
16-
display: "flex",
17-
alignItems: "center",
18-
backgroundImage: `linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('/website/Messier_24_(infrared,_red,_green).jpg')`,
19-
backgroundSize: "cover",
20-
backgroundPosition: "center",
21-
backdropFilter: "brightness(40%)",
22-
}}
23-
>
24-
{/* Overlay Content */}
25-
<Container maxWidth="md">
26-
<Box
27-
sx={{
28-
py: 8,
29-
zIndex: 2,
30-
width: "100%",
31-
display: "flex",
32-
flexDirection: "column",
33-
justifyContent: "center",
34-
color: "common.white",
35-
textShadow: "0 2px 8px rgba(0,0,0,0.7)",
36-
}}
37-
>
38-
<Box>
39-
<Typography variant="h2" component="h1" gutterBottom sx={{ fontWeight: 700 }}>
40-
Engage Your Research
41-
</Typography>
42-
<Typography variant="h5" gutterBottom>
43-
Interactive Computing with BadgerCompute
44-
</Typography>
45-
<Button
46-
variant="contained"
47-
color="primary"
48-
size="large"
49-
sx={{ mt: 3 }}
50-
href="/get-started"
51-
>
52-
Get Started
53-
</Button>
54-
</Box>
55-
</Box>
56-
</Container>
57-
</Box>
58-
<Box pr={1}>
59-
<Typography variant={'subtitle2'} align="right">
60-
Messier 24 (infrared, red, green), Photo by Brandon Flores
61-
</Typography>
62-
</Box>
63-
{/* Main Content Section */}
64-
<Container maxWidth="md" sx={{ mt: 8 }}>
65-
<Typography variant="h4" component="h2" gutterBottom>
66-
What is BadgerCompute?
67-
</Typography>
68-
<Typography variant="body1" component="p" sx={{ mb: 2 }}>
69-
BadgerCompute is a{' '}
70-
<a href="https://jupyter.org/" target="_blank" rel="noopener noreferrer" style={{ color: '#1976d2', textDecoration: 'underline' }}>
71-
Jupyter
72-
</a>
73-
-based interactive compute service for academic and research computing at the University of Wisconsin-Madison.
74-
Compute, visualize data, and write Jupyter notebooks without additional installation or leaving your laptop.
75-
</Typography>
76-
<Typography variant="body1" component="p">
77-
Explore our{' '}
78-
<a href="/docs" target="_blank" rel="noopener noreferrer" style={{ color: '#1976d2', textDecoration: 'underline' }}>
79-
documentation
80-
</a>{' '}, join our{' '}
81-
<a href="https://community.badgercompute.wisc.edu/" target="_blank" rel="noopener noreferrer" style={{ color: '#1976d2', textDecoration: 'underline' }}>
82-
community
83-
</a>{' '}, and{' '}
84-
<a href="/get-started" target="_blank" rel="noopener noreferrer" style={{ color: '#1976d2', textDecoration: 'underline' }}>
85-
get started
86-
</a>!
87-
</Typography>
88-
</Container>
89-
{/* Use Cases Section */}
90-
<Container maxWidth="lg" sx={{ mt: 10, mb: 10 }}>
91-
<Typography variant="h4" component="h2" align="center" gutterBottom sx={{ mb: '1em', fontWeight: 700 }}>
92-
Power your research with BadgerCompute
93-
</Typography>
94-
<Grid container spacing={4} justifyContent="center">
95-
{/* Card 1: Develop your code */}
96-
<Grid size={{xs: 12, md: 4}} display={"flex"}>
97-
<Card sx={{ flexGrow: 1, display: "flex", flexDirection: "column", alignItems: "center", p: 2 }}>
98-
<CardMedia
99-
image={(await import(`@/public/website/jupyter-languages.svg`)).default}
100-
alt="Develop your code"
101-
/>
102-
<CardContent>
103-
<Typography variant="h6" component="h3" gutterBottom align="center">
104-
Develop your code
105-
</Typography>
106-
<Typography variant="body2" align="center">
107-
Develop code and scripts for research in your preferred programming language on BadgerCompute&apos;s Jupyter notebooks.
108-
</Typography>
109-
</CardContent>
110-
</Card>
111-
</Grid>
112-
{/* Card 2: Compute and analyze */}
113-
<Grid size={{xs: 12, md: 4}} display={"flex"}>
114-
<Card sx={{ flexGrow: 1, display: "flex", flexDirection: "column", alignItems: "center", p: 2 }}>
115-
<CardMedia
116-
image={(await import(`@/public/website/jupyter-compute.png`)).default}
117-
alt="Compute and analyze"
118-
/>
119-
<CardContent>
120-
<Typography variant="h6" component="h3" gutterBottom align="center">
121-
Compute and analyze
122-
</Typography>
123-
<Typography variant="body2" align="center">
124-
Execute scripts and programs using standard software.
125-
BadgerCompute also integrates with{' '}
126-
<a href="https://mybinder.org/" target="_blank" rel="noopener noreferrer" style={{ color: '#1976d2', textDecoration: 'underline' }}>
127-
Binder
128-
</a>{' '}
129-
so that you can deploy any software that isn&apos;t already provided!
130-
</Typography>
131-
</CardContent>
132-
</Card>
133-
</Grid>
134-
{/* Card 3: Interact with your data */}
135-
<Grid size={{xs: 12, md: 4}} display={"flex"}>
136-
<Card sx={{ flexGrow: 1, display: "flex", flexDirection: "column", alignItems: "center", p: 2 }}>
137-
<CardMedia
138-
image={(await import(`@/public/website/jupyter-interact.png`)).default}
139-
alt="Interact with your data"
140-
/>
141-
<CardContent>
142-
<Typography variant="h6" component="h3" gutterBottom align="center">
143-
Interact with your data
144-
</Typography>
145-
<Typography variant="body2" align="center">
146-
Explore, visualize, and interact with data and plots directly in your notebook,
147-
using your code, Markdown, and Jupyter&apos;s Interact widget.
148-
</Typography>
149-
</CardContent>
150-
</Card>
151-
</Grid>
152-
</Grid>
153-
</Container>
154-
{/* Access BadgerCompute Section */}
1559
<Container maxWidth="lg" sx={{ mb: 10 }}>
15610
<Grid container spacing={4} alignItems="center">
15711
<Grid size={{xs: 12, md: 5}}>
15812
<Typography variant="h4" component="h2" gutterBottom>
159-
Access BadgerCompute through your browser
13+
Welcomeeeeeeeeeee
16014
</Typography>
161-
<Typography variant="body1">
162-
No extra downloads or installations are needed to access BadgerCompute. Launch BadgerCompute right from your browser.
163-
</Typography>
164-
</Grid>
165-
<Grid size={{xs: 12, md: 7}}>
166-
<video
167-
autoPlay
168-
loop
169-
muted
170-
playsInline
171-
style={{ width: "100%", borderRadius: "8px" }}
172-
>
173-
<source src={`/website/jupyter-video.webm`} type="video/webm" />
174-
<source src={`/website/jupyter-video.mp4`} type="video/mp4" />
175-
Your browser does not support the video tag.
176-
</video>
17715
</Grid>
17816
</Grid>
17917
</Container>

‎components/Header/DesktopHeader.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,13 @@ const DesktopHeader = ({pages} : {pages: NavigationItem[]}) => (
3838
</Grid>
3939
<Grid size={{md: "auto", lg: 4}}>
4040
<Box display={"flex"} justifyContent={'right'} alignItems={'center'} gap={2}>
41-
<LabeledIconButton label={"Community"} href={DISCOURSE_URL} sx={{color: "primary.contrastText"}}>
42-
<Forum />
43-
</LabeledIconButton>
44-
<LaunchButton>Launch</LaunchButton>
41+
<Button
42+
variant={'outlined'}
43+
// @ts-expect-error Colors must be broken because this works just fine and is more extensible than hardcoding a color
44+
color={"primary.contrastText"}
45+
>
46+
Logout
47+
</Button>
4548
</Box>
4649
</Grid>
4750
</Grid>

‎components/Header/Icon.tsx‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import BadgetHubIconWEBP from "@/public/logos/badgerhub_icon.webp";
2-
import BadgerHubIconPNG from "@/public/logos/badgerhub_icon.png";
1+
import CHTCSVG from "@/public/logos/CHTC_Logo_Full_Color.svg";
32
import React, {CSSProperties} from "react";
43

54
const Icon = ({size = "50px"}: {size?: CSSProperties['width']}) => {
@@ -10,18 +9,10 @@ const Icon = ({size = "50px"}: {size?: CSSProperties['width']}) => {
109
}
1110

1211
return (
13-
<picture>
14-
<source
15-
srcSet={BadgetHubIconWEBP.src}
16-
type="image/webp"
17-
style={style}
18-
/>
19-
<img
20-
src={BadgerHubIconPNG.src}
21-
alt="Badger Hub Icon"
22-
style={style}
23-
/>
24-
</picture>
12+
<img
13+
src={CHTCSVG.src}
14+
style={style}
15+
/>
2516
)
2617
}
2718

‎components/Header/Title.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const Title = () => (
77
<Link href={"/"} display={'flex'} flexDirection={'row'} alignItems={'center'} gap={{lg: 3, xs: 1}} component={'a'}>
88
<Icon />
99
<Typography variant="h4" sx={{color: 'primary.contrastText'}}>
10-
BadgerCompute
10+
CHTC User App
1111
</Typography>
1212
</Link>
1313
)

‎dev/nginx.Dockerfile‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
FROM nginx:latest
2+
3+
ADD ./nginx.conf /etc/nginx/nginx.conf

‎dev/nginx.conf‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
user nginx;
2+
worker_processes auto; ## Default: 1
3+
worker_rlimit_nofile 8192;
4+
5+
error_log /var/log/nginx/error.log notice;
6+
pid /var/run/nginx.pid;
7+
8+
events {
9+
worker_connections 4096; ## Default: 1024
10+
}
11+
12+
http {
13+
include /etc/nginx/mime.types;
14+
default_type application/octet-stream;
15+
16+
log_format custom '$remote_addr - $remote_user [$time_local] "$request" '
17+
'$status $body_bytes_sent "$http_referer" '
18+
'"$http_user_agent" "$http_x_forwarded_for" "$uri"';
19+
20+
index index.json index.html index.htm index.php;
21+
22+
gzip on;
23+
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
24+
gzip_min_length 256;
25+
26+
server {
27+
listen 80;
28+
listen [::]:80; # Add this line to listen for IPv6 traffic
29+
30+
location ^~ /api/ {
31+
proxy_read_timeout 1800s;
32+
proxy_send_timeout 1800s;
33+
proxy_connect_timeout 20s;
34+
rewrite ^/api/(.*)$ /$1 break;
35+
proxy_pass http://localhost:8000;
36+
}
37+
38+
# For the other requests point to the file server
39+
location / {
40+
proxy_read_timeout 1800s;
41+
proxy_send_timeout 1800s;
42+
proxy_connect_timeout 20s;
43+
proxy_pass http://localhost:3000;
44+
}
45+
}
46+
}

‎docker-compose.yaml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
services:
22
web:
3-
43
build: .
54
volumes:
65
- .:/app
@@ -9,4 +8,7 @@ services:
98
ports:
109
- "3000:3000"
1110
stdin_open: true
12-
tty: true
11+
tty: true
12+
13+
api_proxy:
14+
build: ./dev/nginx.Dockerfile

0 commit comments

Comments
 (0)