Skip to content

Commit

Permalink
Merge pull request #60 from RENCI/staging
Browse files Browse the repository at this point in the history
Staging
  • Loading branch information
suejinkim20 authored Aug 13, 2024
2 parents afda7fb + 6050497 commit be925a2
Show file tree
Hide file tree
Showing 29 changed files with 142 additions and 116 deletions.
16 changes: 16 additions & 0 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
name: Build and Deploy
on:
push:
branches:
- main

permissions:
contents: write
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: enriikke/gatsby-gh-pages-action@v2
with:
deploy-branch: gh-pages
2 changes: 1 addition & 1 deletion plugins/gatsby-source-monday/gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports.sourceNodes = async (gatsbyApi, pluginOptions) => {
const timer = reporter.activityTimer(`source Monday.com boards`)

function createBoardNode(data) {
// console.log(JSON.stringify(data, null, 2))

actions.createNode({
...data,
parent: null,
Expand Down
4 changes: 2 additions & 2 deletions src/components/carousel.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const Carousel = ({students}) => {
>
{
students.map((student) => (
<SwiperSlide key={student.name}>
<SwiperSlide key={student.student_name}>
<StudentSlide student={student}/>
</SwiperSlide>
))
Expand Down Expand Up @@ -58,7 +58,7 @@ export const MobileCarousel = ({students}) => {
>
{
students.map((student) => (
<SwiperSlide key={student.name}>
<SwiperSlide key={`mobile-${student.student_name}`}>
<MobileSlide student={student}/>
</SwiperSlide>
))
Expand Down
4 changes: 2 additions & 2 deletions src/components/cta-button.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import DownloadIcon from '@mui/icons-material/Download';

export const CtaButton = ({
background_image, href, title, backgroundColor, interview
background_image, href, title, backgroundcolor, interview
}) => {
const bgImage = getImage(background_image)
return (
Expand All @@ -18,7 +18,7 @@ export const CtaButton = ({
borderRadius: '0% 0% 25px 25px',
border: 'none',
'.card-content': {
backgroundColor: backgroundColor,
backgroundColor: backgroundcolor,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
Expand Down
2 changes: 1 addition & 1 deletion src/components/dates-table.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const DatesTable = ({content, type}) => {
>
<thead>
<tr>
<th style={{ width: "40%" }}></th>
<th style={{ width: "35%" }} aria-hidden="true"></th>
{content.dates.map(({semester}, i) => (
<th key={`semester-${i}`}>{semester}</th>
))}
Expand Down
13 changes: 6 additions & 7 deletions src/components/footer.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import { Typography, Box, Container, Grid, useTheme } from '@mui/joy'
// import { Container } from './container'
import { Link } from './link'
import starRenciLogo from '../images/star-renci-logo-combined.png'

Expand Down Expand Up @@ -42,7 +41,7 @@ export const Footer = () => {
>
<Container maxWidth="lg">
<Grid container>
<Grid item xs={ 12 } sm={ 12 } md={ 12 } lg={ 12 }>
<Grid xs={ 12 } sm={ 12 } md={ 12 } lg={ 12 }>
<Box component="span" sx={{
display: 'block',
minHeight: '50px',
Expand All @@ -54,26 +53,26 @@ export const Footer = () => {
mb: '1rem'
}} />
</Grid>
<Grid item xs={ 12 } sm={ 8 } md={ 9 } lg={ 9 }>
<Grid xs={ 12 } sm={ 8 } md={ 9 } lg={ 9 }>
<Typography sx={{fontWeight: 600}}>Student Achievement at RENCI</Typography>
<Typography>Europa Center</Typography>
<Typography>100 Europa Drive, Suite 540</Typography>
<Typography sx={{marginBottom: '0.5rem'}}>Chapel Hill, NC 27517</Typography>
<Link to={`mailto:${data.themeYaml.footer.email}`}>{data.themeYaml.footer.email}</Link>
<Link to={`mailto:${data.themeYaml.footer.email}`} noIcon>{data.themeYaml.footer.email}</Link>
<Typography>919-445-9640</Typography>
</Grid>
<Grid item xs={ 12 } sm={ 4 } md={ 3 } lg={ 3 } className="link-group">
<Grid xs={ 12 } sm={ 4 } md={ 3 } lg={ 3 } className="link-group">
<Typography sx={{fontWeight: 600, mb: 0}}>Stay Connected with RENCI</Typography>
<ul className="link-list">
{
data.themeYaml.footer.socials.map((item) => (
<li><Link to={item.url}>{item.name}</Link></li>
<li key={`footer-${item.name}`}><Link to={item.url}>{item.name}</Link></li>
))
}
</ul>
</Grid>

<Grid item xs={ 12 } style={{ textAlign: 'center', padding: '1rem' }}>
<Grid xs={ 12 } style={{ textAlign: 'center', padding: '1rem' }}>
&copy; { new Date().getFullYear() }
</Grid>
</Grid>
Expand Down
12 changes: 1 addition & 11 deletions src/components/header.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,11 @@
import React, { useMemo } from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import { Sheet } from '@mui/joy'
import { Container } from './container'
import { useScrolling, useWindowWidth } from '../hooks'
import { Menu } from './menu'
import { MobileMenu } from './mobile-menu'

const Header = ({ siteTitle, menuOptions }) => {
const data = useStaticQuery(graphql`
query SiteTitleQuery {
themeYaml {
metadata {
title
}
}
}
`)
const Header = () => {
const { isCompact } = useWindowWidth();

const { scrollPosition } = useScrolling()
Expand Down
3 changes: 2 additions & 1 deletion src/components/hero.js
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ export const Hero = ({
hero
component={Link}
to={button.url}
key={button.title}
>
<Typography>{button.title}</Typography>
</Button>
Expand All @@ -117,6 +118,6 @@ export const Hero = ({

Hero.propTypes = {
background_image: PropTypes.object.isRequired,
blurb: PropTypes.string.isRequired,
blurb: PropTypes.string,
title: PropTypes.string.isRequired,
}
39 changes: 36 additions & 3 deletions src/components/link.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,25 @@ ExternalLinkIcon.propTypes = {
size: PropTypes.number.isRequired,
}

export const MailtoLinkIcon = ({ size = 12, fill, ...rest }) => {
return (
<svg
{ ...rest }
version="1.1"
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
viewBox="0 0 24 24"
width={ `${ size }px` }
height={ `${ size }px` }
style={{ marginLeft: '4px' }}
fill={fill ? fill : "#789"}
>
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"></path>
</svg>
)
}

export const ExternalLink = ({ to, children, noIcon, fill, ...etc }) => {
return (
<Fragment>
Expand All @@ -49,8 +68,16 @@ export const ExternalLink = ({ to, children, noIcon, fill, ...etc }) => {
</Fragment>
)
}
export const MailtoLink = ({ to, children }) => {
return (
<Fragment>
<MUILink href={ to }>{ children }</MUILink>
<MailtoLinkIcon />
</Fragment>
)
}

export const InternalLink = ({ to, children, ref, ...props }) => {
export const InternalLink = React.forwardRef(({ to, children, ...props }, ref) => {
return (
<MUILink
component={GatsbyLink}
Expand All @@ -59,13 +86,19 @@ export const InternalLink = ({ to, children, ref, ...props }) => {
{ children }
</MUILink>
)
}
})

export const Link = React.forwardRef(({ to, children, noIcon, fill, ...props }, ref) => {
const externalUrlPattern = new RegExp(/^https?:\/\//)
const match = externalUrlPattern.exec(to)
const mailtoPattern = new RegExp(/^mailto:/)
const mailtoMatch = mailtoPattern.exec(to)

if (match) {
return <ExternalLink to={ to } { ...props } noIcon={noIcon} fill={fill} ref={ ref }>{ children }</ExternalLink>
return <ExternalLink to={ to } fill={ fill } noIcon={ noIcon } { ...props }>{ children }</ExternalLink>
}
if (mailtoMatch) {
return <MailtoLink to={ to } fill={ fill } { ...props }>{ children }</MailtoLink>
}
return <InternalLink to={ to } { ...props } ref={ ref }>{ children }</InternalLink>
})
17 changes: 8 additions & 9 deletions src/components/mobile-menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useStaticQuery, graphql } from 'gatsby'
import MenuIcon from '@mui/icons-material/Menu';
import starLogo from '../images/star-logo-color.png'

export const MobileMenu = ({ options }) => {
export const MobileMenu = () => {
const data = useStaticQuery(graphql`
query ThemeQuery {
themeYaml {
Expand Down Expand Up @@ -132,13 +132,12 @@ const [open, setOpen] = useState(false)
>
{
data.themeYaml.navigation.map(({ label, path }) => (
<Fragment>
<li
key={ path }
className="list-item"
onClick={ () => setOpen(false) }
>
<Link nav to={ path }>{ label }</Link>
<Fragment key={ path }>
<li className="list-item">
<Link
to={ path }
onClick={ () => setOpen(false) }
>{ label }</Link>
</li>
<Divider sx={{borderBottom: '1px solid #04758e01'}}/>
</Fragment>
Expand All @@ -158,5 +157,5 @@ const MenuOptionPropTypes = PropTypes.shape({
MobileMenu.propTypes = {
options: PropTypes.arrayOf(
MenuOptionPropTypes
).isRequired
)
}
2 changes: 1 addition & 1 deletion src/components/paragraph-grid.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Grid from '@mui/joy/Grid'

export const ParagraphGrid = ({heading, body, color}, id) => {
return (
<Grid item xs={12} sm={6} md={6} >
<Grid xs={12} sm={6} md={6} >
<Card key={`${heading}-${id}`} sx={{height: '100%', backgroundColor: 'transparent'}} variant="soft">
<Typography level="h3" sx={{color: color}}>{heading}</Typography>
<Typography sx={{color: color}}>{body}</Typography>
Expand Down
4 changes: 2 additions & 2 deletions src/components/program-tabs/panel-content.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const PanelContentGridContainer = ({children}) => (
)

export const PanelContentGridItem = ({section, color}) => (
<Grid item sm={12} md={6}>
<Grid sm={12} md={6}>
<Typography level="h4" sx={{marginBottom: '0.5rem', color: color, fontWeight: 500, fontSize: '1rem'}}>{section.heading}</Typography>
{
section.contentType === "ul" ? (
Expand All @@ -27,7 +27,7 @@ export const PanelContentGridItem = ({section, color}) => (
</List>
) : section.contentType === 'button' ? (
<Stack
gap={ 4 }
gap={ 2 }
sx={{display: 'flex'}}
>
{section.content.map((button) => (
Expand Down
12 changes: 6 additions & 6 deletions src/components/program-tabs/program-tabs-section.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,25 @@ import { styled } from '@mui/joy'
export const TabContainer = styled(Tabs)`
`

export const ProgramTab = styled(Tab)((({backgroundColor, color, ...props}) => ({
export const ProgramTab = styled(Tab)((({backgroundcolor, color, ...props}) => ({
width: '33%',
display: 'flex',
alignItems: 'flex-start',
color: color ? color : null,
transition: 'background-color 0.5s ease',
[`&[aria-selected="false"]`]: {
backgroundColor: `${backgroundColor}75`,
backgroundColor: `${backgroundcolor}75`,
':hover': {
backgroundColor: `${backgroundColor}99`,
backgroundColor: `${backgroundcolor}99`,
},
},
[`&[aria-selected="true"]`]: {
backgroundColor: backgroundColor,
backgroundColor: backgroundcolor,
},
borderBottom: 'none'
})))

export const ProgramPanel = styled(TabPanel)(({backgroundColor, ...props})=> ({
backgroundColor: backgroundColor,
export const ProgramPanel = styled(TabPanel)(({backgroundcolor, ...props})=> ({
backgroundColor: backgroundcolor,
paddingBottom: '2rem'
}))
25 changes: 0 additions & 25 deletions src/components/section.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import Typography from '@mui/joy/Typography';

import { Container } from './container'

const SHOW_SECTION_HEIGHTS = true

export const Section = ({
id,
children,
Expand All @@ -26,30 +24,14 @@ export const Section = ({
sx={{
backgroundColor,
display: 'flex',
// justifyContent: 'stretch',
alignItems: 'stretch',
// position: 'relative',
// overflow: 'hidden',
'.section-container': {
backgroundColor: 'transparent',
// display: 'flex',
// flexDirection: 'column',
// justifyContent: 'center',
alignItems: 'center',
px: 2,
py: 8,
mx: 'auto',
},
'.height-indicator': {
position: 'absolute',
bottom: '1rem',
right: '1rem',
zIndex: 8,
color: '#334',
backgroundColor: '#ccd9',
fontSize: '75%',
p: '4px',
},
...customStyles,
}}
>
Expand All @@ -61,13 +43,6 @@ export const Section = ({
</Typography>}
{ children }
</Container>
{
process.env.NODE_ENV === 'development' && SHOW_SECTION_HEIGHTS && (
<span className="height-indicator">
{/* height = { JSON.stringify(height) } */}
</span>
)
}
</Sheet>
)
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/sections/about-star.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const AboutStar = ({ content }) => {
>
{
content.bullets.map(({item})=>(
<DecorativeBulletListItem>{item}</DecorativeBulletListItem>
<DecorativeBulletListItem key={`about-star-${item}`}>{item}</DecorativeBulletListItem>
))
}
</List>
Expand Down
Loading

0 comments on commit be925a2

Please sign in to comment.