Skip to content

Commit

Permalink
Merge pull request #4 from fabric-testbed/develop
Browse files Browse the repository at this point in the history
Staging
  • Loading branch information
suejinkim20 authored Jun 28, 2024
2 parents d9c6e57 + e524729 commit 2433728
Show file tree
Hide file tree
Showing 16 changed files with 203 additions and 145 deletions.
30 changes: 21 additions & 9 deletions src/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@ import { Fragment } from 'react'
import { Routes, Route } from 'react-router-dom'
import { Menu } from '@components/menu'
import {
CfpView,
CfaView,
HomeView,
MarkdownView,
NotFoundView,
RegistrationView,
SpeakersView,
TravelView,
FaqsView,
AgendaView
} from './views'

import { Header, Footer } from '@components/layout'
Expand All @@ -24,21 +26,31 @@ const menuOptions = [
label: 'Registration',
view: <RegistrationView />,
},
{
path: '/cfp',
label: 'CFP',
view: <CfpView />,
},
// {
// path: '/agenda',
// label: 'Agenda',
// view: <AgendaView />,
// },
{
path: '/travel',
label: 'Travel Info',
view: <TravelView />,
},
{
path: '/speakers',
label: 'Speakers',
view: <SpeakersView />,
path: '/cfa',
label: 'Calls for Action',
view: <CfaView />,
},
// {
// path: '/speakers',
// label: 'Speakers',
// view: <SpeakersView />,
// },
// {
// path: '/faqs',
// label: 'FAQs',
// view: <FaqsView />,
// },
]

//
Expand Down
5 changes: 3 additions & 2 deletions src/components/brand.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,10 @@ export const Brand = () => {
},
}}
>
<Typography className="fabric-text">FABRIC</Typography>
<img src={ fabricLogo } width="200px" />
<KnitLogo />
<img src={ fabricLogo } width="200px" />
<Typography className="fabric-text">2024</Typography>

</Stack>
)
}
Expand Down
67 changes: 34 additions & 33 deletions src/components/layout/footer.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import { Divider, List, ListItem, Sheet, Stack, Typography } from '@mui/joy'
import { KnitLogo } from '@components/brand'
import { Link } from '@components/link'
import {
Container,
SIZES,
} from '@components/layout'

export const Footer = () => {
return (
Expand All @@ -16,6 +20,7 @@ export const Footer = () => {
p: 2, py: 6,
'.copyright': {
color: 'var(--knit-palette-primary-900)',
marginTop: '1rem'
},
'.links-list a': {
color: 'var(--knit-palette-primary-400)',
Expand All @@ -25,43 +30,39 @@ export const Footer = () => {
},
}}
>
<Stack
direction={{ xs: 'column', sm: 'row' }}
alignSelf="stretch"
>
<Container>
<Stack
direction="column"
flex="1"
alignItems={{ xs: 'flex-start', sm: 'center' }}
direction={{ xs: 'column', sm: 'row' }}
alignContent="space-around"
>
<List className="links-list">
<ListItem><Link to="#">link</Link></ListItem>
<ListItem><Link to="https://example.com/">here&apos;s an external link</Link></ListItem>
<ListItem><Link to="#">a link</Link></ListItem>
<ListItem><Link to="#">and another</Link></ListItem>
</List>
</Stack>
<Stack
direction="column"
flex="1"
alignItems={{ xs: 'flex-start', sm: 'center' }}
>
<List className="links-list">
<ListItem><Link to="#">another link</Link></ListItem>
<ListItem><Link to="https://example.com/">so many links</Link></ListItem>
<ListItem><Link to="https://example.com/">last one</Link></ListItem>
</List>
</Stack>
</Stack>
<Stack
direction="column"
flex="1"
alignItems={{ xs: 'flex-start', sm: 'flex-start' }}
justifyContent="center"
>
<KnitLogo size="medium" />

<Typography
align="center"
className="copyright"
>&copy; { new Date().getFullYear() }</Typography>
</Stack>

<Divider sx={{ width: '50%', my: 3, mx: 'auto' }} />
<Stack
direction="column"
flex="1"
alignItems={{ xs: 'flex-start', sm: 'center' }}
>
<List className="links-list">
<ListItem><Link to="https://portal.fabric-testbed.net/">FABRIC Portal</Link></ListItem>
<ListItem><Link to="https://join.slack.com/t/fabric-3qa1674/shared_invite/zt-2jryx0baq-2U8yQNfqNGAP~r5vMz1hZg">Community Slack Channel</Link></ListItem>
<ListItem><Link to="https://portal.fabric-testbed.net/help">Contact Us</Link></ListItem>
</List>
</Stack>
</Stack>
</Container>

<KnitLogo size="small" />

<Typography
align="center"
className="copyright"
>&copy; { new Date().getFullYear() }</Typography>
</Sheet>
)
}
21 changes: 21 additions & 0 deletions src/components/link/external-link.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { Fragment } from 'react'
import { BaseLinkPropTypes } from './'
import { ExternalLinkIcon } from './'
import { Button } from '@mui/joy'

export const ExternalLink = ({ to, children, ...props }) => {
return (
<Fragment>
<a
href={ to }
target="_blank"
rel="noopener noreferrer"
{ ...props }
>{ children }</a>
<ExternalLinkIcon />
</Fragment>
)
}

ExternalLink.propTypes = { ...BaseLinkPropTypes }

4 changes: 4 additions & 0 deletions src/components/link/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export * from './link'
export * from './link-icon'
export * from './external-link'
export * from './mail-to-link'
79 changes: 6 additions & 73 deletions src/components/link.js → src/components/link/link-icon.js
Original file line number Diff line number Diff line change
@@ -1,73 +1,6 @@
import { Fragment } from 'react'
import PropTypes from 'prop-types'
import { Link as ReactLink } from 'react-router-dom'
import { NavLink as ReactNavLink } from 'react-router-dom'

//

export const ExternalLink = ({ to, children }) => {
return (
<Fragment>
<a
href={ to }
target="_blank"
rel="noopener noreferrer"
>{ children }</a>
<ExternalLinkIcon />
</Fragment>
)
}

export const MailtoLink = ({ to, children }) => {
return (
<Fragment>
<a href={ to }>{ children }</a>
<MailtoLinkIcon />
</Fragment>
)
}

const BaseLinkPropTypes = {
to: PropTypes.string.isRequired,
children: PropTypes.node.isRequired,
}

ExternalLink.propTypes = { ...BaseLinkPropTypes }
MailtoLink.propTypes = { ...BaseLinkPropTypes }

//

export const Link = ({ nav, to, children, ...props }) => {
// if this is a navigation menu link, we can bail out now.
if (nav) {
return <ReactNavLink to={ to } { ...props }>{ children }</ReactNavLink>
}
// otherwise, we'll to determine the type of link and
// decorate it with an icon accordingly.
const externalUrlPattern = new RegExp(/^https?:\/\//)
const externalUrlMatch = externalUrlPattern.exec(to)
const mailtoPattern = new RegExp(/^mailto:/)
const mailtoMatch = mailtoPattern.exec(to)
const LinkComponent = externalUrlMatch
? ExternalLink
: mailtoMatch
? MailtoLink
: ReactLink
return <LinkComponent to={to} { ...props }>{children}</LinkComponent>
}

Link.propTypes = {
nav: PropTypes.bool,
...BaseLinkPropTypes
}

Link.defaultProps = {
nav: false,
}

//

const LinkIcon = ({ size, children }) => {
export const LinkIcon = ({ size, children }) => {
return (
<svg
focusable="false"
Expand Down Expand Up @@ -98,6 +31,10 @@ export const ExternalLinkIcon = ({ size = 10 }) => {
)
}

ExternalLinkIcon.propTypes = {
size: PropTypes.number,
}

export const MailtoLinkIcon = ({ size = 12 }) => {
return (
<LinkIcon size={ size }>
Expand All @@ -106,10 +43,6 @@ export const MailtoLinkIcon = ({ size = 12 }) => {
)
}

ExternalLinkIcon.propTypes = {
size: PropTypes.number,
}

MailtoLinkIcon.propTypes = {
size: PropTypes.number,
}
}
44 changes: 44 additions & 0 deletions src/components/link/link.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { Fragment } from 'react'
import PropTypes from 'prop-types'
import { Link as ReactLink } from 'react-router-dom'
import { NavLink as ReactNavLink } from 'react-router-dom'
import { ExternalLink } from './'
import { MailtoLink } from './'
//

export const BaseLinkPropTypes = {
to: PropTypes.string.isRequired,
children: PropTypes.node.isRequired,
}

//

export const Link = ({ nav, to, children, ...props }) => {
// if this is a navigation menu link, we can bail out now.
if (nav) {
return <ReactNavLink to={ to } { ...props }>{ children }</ReactNavLink>
}
// otherwise, we'll to determine the type of link and
// decorate it with an icon accordingly.
const externalUrlPattern = new RegExp(/^https?:\/\//)
const externalUrlMatch = externalUrlPattern.exec(to)
const mailtoPattern = new RegExp(/^mailto:/)
const mailtoMatch = mailtoPattern.exec(to)
const LinkComponent = externalUrlMatch
? ExternalLink
: mailtoMatch
? MailtoLink
: ReactLink
return <LinkComponent to={to} { ...props }>{children}</LinkComponent>
}

Link.propTypes = {
nav: PropTypes.bool,
...BaseLinkPropTypes
}

Link.defaultProps = {
nav: false,
}

//
14 changes: 14 additions & 0 deletions src/components/link/mail-to-link.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { Fragment } from 'react'
import { BaseLinkPropTypes } from './'
import { MailtoLinkIcon } from './'

export const MailtoLink = ({ to, children }) => {
return (
<Fragment>
<a href={ to }>{ children }</a>
<MailtoLinkIcon />
</Fragment>
)
}

MailtoLink.propTypes = { ...BaseLinkPropTypes }
25 changes: 25 additions & 0 deletions src/content/cfa.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
# Calls for Action

## Calls for Demos
Enim voluptate elit ad reprehenderit laborum laborum magna consequat nostrud. Et ut velit velit pariatur incididunt laborum id esse velit duis. Adipisicing aute do proident in cillum duis in dolore tempor ut in officia velit cillum quis. Sint enim sed nulla occaecat quis amet nostrud consequat commodo id irure quis.

Enim voluptate elit ad reprehenderit laborum laborum magna consequat nostrud. Et ut velit velit pariatur incididunt laborum id esse velit duis. Adipisicing aute do proident in cillum duis in dolore tempor ut in officia velit cillum quis. Sint enim sed nulla occaecat quis amet nostrud consequat commodo id irure quis.

<button linkTo="https://renci.org/" center="true">Call for Demos</button>

## Calls for Tutorials
Incididunt id aliquip cillum in aliqua quis qui mollit exercitation in laborum. Nisi in dolore occaecat minim cillum dolor ut cupidatat. Lorem ipsum esse consectetur proident dolor consequat duis sed duis magna ullamco aliquip ut ut reprehenderit minim aliqua laborum proident laborum.

Enim voluptate elit ad reprehenderit laborum laborum magna consequat nostrud. Et ut velit velit pariatur incididunt laborum id esse velit duis. Adipisicing aute do proident in cillum duis in dolore tempor ut in officia velit cillum quis. Sint enim sed nulla occaecat quis amet nostrud consequat commodo id irure quis.

<button linkTo="https://renci.org/" center="true">Call for Tutorials</button>


## Calls for Presentations
In sit magna pariatur laborum id cillum excepteur nulla tempor occaecat fugiat dolor ut quis duis do in enim. Magna et enim velit in sed officia ut ut ut voluptate.

Incididunt id aliquip cillum in aliqua quis qui mollit exercitation in laborum. Nisi in dolore occaecat minim cillum dolor ut cupidatat. Lorem ipsum esse consectetur proident dolor consequat duis sed duis magna ullamco aliquip ut ut reprehenderit minim aliqua laborum proident laborum.

<button linkTo="https://renci.org/" center="true">Call for Presentations</button>

For more questions, email [Chelsea Davis](mailto:[email protected])
5 changes: 0 additions & 5 deletions src/content/cfp.md

This file was deleted.

Loading

0 comments on commit 2433728

Please sign in to comment.