fabric-testbed · suejinkim20 · Aug 15, 2024 · Jul 1, 2024 · Jul 1, 2024 · Jul 1, 2024
diff --git a/.github/workflows/webpack.yml b/.github/workflows/webpack.yml
@@ -0,0 +1,37 @@
+name: Build and Deploy
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+permissions:
+  contents: write
+
+jobs:
+  build-and-deploy:
+      runs-on: ubuntu-latest
+
+      steps:
+        - uses: actions/checkout@v4
+
+        - name: Use Node.js ${{ matrix.node-version }}
+          uses: actions/setup-node@v3
+          with:
+            node-version: ${{ matrix.node-version }}
+
+        - name: Install dependencies
+          run: npm install
+
+        - name: Build the project
+          run: npm run build
+
+        - name: Deploy to GitHub Pages
+          if: github.ref == 'refs/heads/develop'
+          uses: JamesIves/[email protected]
+          with:
+            branch: gh-pages
+            folder: dist 
+            token: ${{ secrets.GITHUB_TOKEN }}
+            clean: true  
diff --git a/package.json b/package.json
@@ -1,9 +1,10 @@
 {
   "private": "true",
+  "homepage": "https://fabric-testbed.github.io/knit-website/",
   "scripts": {
     "start": "SERVE=true webpack serve",
     "watch": "webpack --watch",
-    "build": "NODE_ENV=production webpack",
+    "build": "NODE_ENV=production webpack && cp ./src/404.html ./dist/404.html",
     "build-dev": "webpack",
     "lint": "eslint ./src/index.js ./src/components/**/*.js",
     "lint:fix": "eslint --fix ./src/index.js ./src/components/**/*.js",

diff --git a/src/404.html b/src/404.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+
+  <title>FABRIC KNIT Workshop 404</title>
+
+  <script>
+    sessionStorage.redirect = location.href;
+  </script>
+
+  <meta http-equiv="refresh" content="0;URL='/knit-website'"></meta>
+</head>
+
+<body>
+  <!-- The purpose of this file is only for deployment at gh pages. -->
+
+</body>
+
+
+</html>
diff --git a/src/app.js b/src/app.js
@@ -7,10 +7,7 @@ import {
   MarkdownView,
   NotFoundView,
   RegistrationView,
-  SpeakersView,
   TravelView,
-  FaqsView,
-  AgendaView
 } from './views'
 
 import { Header, Footer } from '@components/layout'
@@ -26,11 +23,6 @@ const menuOptions = [
     label: 'Registration',
     view: <RegistrationView />,
   },
-  // {
-  //   path: '/agenda',
-  //   label: 'Agenda',
-  //   view: <AgendaView />,
-  // },
   {
     path: '/travel',
     label: 'Travel Info',
@@ -40,17 +32,7 @@ const menuOptions = [
     path: '/cfa',
     label: 'Calls for Action',
     view: <CfaView />,
-  },
-  // {
-  //   path: '/speakers',
-  //   label: 'Speakers',
-  //   view: <SpeakersView />,
-  // },
-  // {
-  //   path: '/faqs',
-  //   label: 'FAQs',
-  //   view: <FaqsView />,
-  // },
+  }
 ]
 
 //

diff --git a/src/components/brand.js b/src/components/brand.js
@@ -1,31 +1,31 @@
 import PropTypes from 'prop-types'
 import { Stack, Typography } from '@mui/joy'
 import { Link } from '@components/link'
-import fabricLogo from '@images/fabric-logo.png'
+import numberlessKnitLogo from '@images/knit-logo-numberless.png'
 
 export const Brand = () => {
   return (
     <Stack
       component={ Link } to="/"
       direction={{ sm: 'column', md: 'row' }}
-      alignItems="center"
-      gap={ 1 }
+      alignItems="flex-end"
+      gap={ 2 }
       sx={{
         textDecoration: 'none',
         '.fabric-text': {
           letterSpacing: '4px',
-          fontSize: '52px',
-          fontWeight: '100',
+          fontSize: '62px',
+          fontWeight: '300',
           background: '-webkit-linear-gradient(white, #47aae1)',
           WebkitBackgroundClip: 'text',
           WebkitTextFillColor: 'transparent',
           WebkitMaskImage: 'linear-gradient(white, #47aae1)',
           lineHeight: 1,
+          marginBottom: '0.3rem'
         },
       }}
     >
-      <KnitLogo />
-      <img src={ fabricLogo } width="200px" />
+      <img src={ numberlessKnitLogo } width="250px" />
       <Typography className="fabric-text">2024</Typography>
 
     </Stack>

diff --git a/src/components/layout/footer.js b/src/components/layout/footer.js
@@ -1,9 +1,8 @@
-import { Divider, List, ListItem, Sheet, Stack, Typography } from '@mui/joy'
+import { 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 = () => {

diff --git a/src/components/link/external-link.js b/src/components/link/external-link.js
@@ -1,18 +1,34 @@
 import { Fragment } from 'react'
 import { BaseLinkPropTypes } from './'
 import { ExternalLinkIcon } from './'
-import { Button } from '@mui/joy'
+import { Button, Link } from '@mui/joy'
 
-export const ExternalLink = ({ to, children, ...props }) => {
+export const ExternalLink = ({ to, children, button, ...props }) => {
   return (
     <Fragment>
-      <a
-        href={ to }
-        target="_blank"
-        rel="noopener noreferrer"
-        { ...props }
-      >{ children }</a>
-      <ExternalLinkIcon />
+      { button ? (
+        <Button
+          component="a"
+          href={to}
+          endDecorator={<ExternalLinkIcon color="#fff"/> }
+          size="lg"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {children}
+        </Button>
+      ) : (
+        <Fragment>
+          <Link
+            component={ button? "button": null}
+            href={ to }
+            target="_blank"
+            rel="noopener noreferrer"
+            { ...props }
+          >{ children }</Link>
+          <ExternalLinkIcon /> 
+        </Fragment>
+      )}
     </Fragment>
   )
 }

diff --git a/src/components/link/link-icon.js b/src/components/link/link-icon.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 
-export const LinkIcon = ({ size, children }) => {
+export const LinkIcon = ({ size, color, children }) => {
   return (
     <svg
       focusable="false"
@@ -13,26 +13,28 @@ export const LinkIcon = ({ size, children }) => {
       width={ `${ size }px` }
       height={ `${ size }px` }
       style={{ marginLeft: '4px' }}
-      fill="#789"
+      fill={color || "#789"}
     >{ children }</svg>
   )
 }
 
 LinkIcon.propTypes = {
   size: PropTypes.number.isRequired,
+  color: PropTypes.string,
   children: PropTypes.node.isRequired,
 }
 
-export const ExternalLinkIcon = ({ size = 10 }) => {
+export const ExternalLinkIcon = ({ size = 10, color }) => {
   return (
-    <LinkIcon size={ size }>
+    <LinkIcon size={ size } color={color}>
       <path d="M 0,15.609374 V 7.2187491 H 5.1505597 10.30112 L 10.910188,6.6093432 11.519255,5.9999371 10.564316,5.044784 9.6093751,4.0896309 V 2.044815 -3.0028053e-7 H 16.804688 24 V 7.1953116 14.390624 h -2.044815 -2.044817 l -0.955152,-0.954941 -0.955154,-0.954939 -0.609406,0.609067 -0.609405,0.609069 V 18.84944 24 H 8.3906251 0 Z m 14.414062,3.246094 c 0,-1.514648 -0.0079,-2.753907 -0.01753,-2.753907 -0.0096,0 -0.821756,0.804184 -1.80471,1.787076 l -1.787189,1.787076 -3.2401772,-3.240177 -3.240177,-3.240177 1.7870754,-1.787191 c 0.9828914,-0.982954 1.7870754,-1.7950739 1.7870754,-1.8047105 0,-0.00961 -1.2392579,-0.017522 -2.7539062,-0.017522 H 2.3906249 v 6.0117185 6.011719 h 6.0117189 6.0117182 z m -0.01685,-6.146047 3.603002,-3.6030772 1.446496,1.4468272 1.446495,1.446828 h 0.358088 0.358085 V 7.1953116 2.3906241 H 16.804688 12 v 0.3577821 0.3577821 l 1.025391,1.028297 c 0.563964,0.5655636 1.209333,1.2172855 1.434153,1.4482713 L 14.8683,6.0027304 11.272086,9.5990023 7.675871,13.195274 9.2343514,14.753887 c 0.8571646,0.857237 1.5587886,1.558612 1.5591656,1.558612 3.77e-4,0 1.622035,-1.621385 3.603688,-3.603078 z" />
     </LinkIcon>
   )
 }
 
 ExternalLinkIcon.propTypes = {
   size: PropTypes.number,
+  color: PropTypes.string,
 }
 
 export const MailtoLinkIcon = ({ size = 12 }) => {

diff --git a/src/components/link/link.js b/src/components/link/link.js
@@ -1,4 +1,3 @@
-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'

diff --git a/src/components/markdown/button.js b/src/components/markdown/button.js
@@ -1,8 +1,7 @@
 import { Button } from '@mui/joy'
 import { Link } from '@components/link'
 
-/* eslint-disable-next-line no-unused-vars */
-export const button = ({ node, linkto, children }) => {
+export const button = ({ linkto, children }) => {
   if (typeof children !== 'string') {
     return <Button>{ children }</Button>
   }
@@ -12,8 +11,11 @@ export const button = ({ node, linkto, children }) => {
 
   return (
     <Button
-      component={ Link }
+      component={Link}
       to={ linkto }
-    >{ children }</Button>
+      button
+      size="lg"
+     >{ children }
+    </Button>
   )
 }
diff --git a/src/components/markdown/index.js b/src/components/markdown/index.js
@@ -4,7 +4,7 @@ import rehypeRaw from 'rehype-raw'
 
 import { hr } from './hr'
 import { a } from './link'
-import { ul, li } from './list'
+import { ul, ol, li } from './list'
 import { pre } from './pre'
 import { button } from './button'
 import * as typography from './typography'
@@ -21,7 +21,7 @@ const componentMap = {
   a,
   hr,
   pre,
-  ul, li,
+  ul, ol, li,
   ...typography,
   button,
 }

diff --git a/src/components/menu/desktop-menu.js b/src/components/menu/desktop-menu.js
@@ -31,11 +31,12 @@ export const DesktopMenu = ({ options = [] }) => {
           width: '100%',
           p: 2,
           textDecoration: 'none',
-          color: 'var(--knit-palette-primary-600)',
+          color: 'var(--knit-palette-primary-900)',
           textTransform: 'uppercase',
+          letterSpacing: '0.5px'
         },
         '[aria-current="page"]': {
-          backgroundColor: 'var(--knit-palette-secondary-light)',
+          backgroundColor: '#0001',
         },
       }}
     >

diff --git a/src/components/menu/drawer-menu.js b/src/components/menu/drawer-menu.js
@@ -2,8 +2,8 @@ import { Fragment, useState } from 'react'
 import { Box, Divider, Drawer, IconButton, ModalClose, Stack } from '@mui/joy'
 import { Menu as MenuIcon } from 'react-feather'
 import { Link } from '@components/link'
-import { KnitLogo } from '@components/brand'
 import { menuPropTypes } from './menu'
+import numberlessKnitLogo from '@images/knit-logo-numberless-dark.png'
 
 //
 
@@ -31,7 +31,7 @@ export const DrawerMenu = ({ options = [] }) => {
             p: 2,
           }}
         >
-          <KnitLogo />
+        <img src={ numberlessKnitLogo } width="250px" />
           <ModalClose
             id="close-icon"
             sx={{ position: 'initial' }}
@@ -57,7 +57,7 @@ export const DrawerMenu = ({ options = [] }) => {
               backgroundColor: 'transparent',
               transition: 'background-color 250ms',
               '&:hover': {
-                'backgroundColor': 'var(--knit-palette-primary-100)',
+                backgroundColor: '#0001',
               },
             },
             '.list-item > a': {
@@ -68,7 +68,7 @@ export const DrawerMenu = ({ options = [] }) => {
               textTransform: 'uppercase',
             },
             '[aria-current="page"]': {
-              'backgroundColor': 'var(--knit-palette-primary-200)',
+                backgroundColor: '#0001',
             },
           }}
         >

diff --git a/src/content/cfa.md b/src/content/cfa.md
@@ -1,25 +1,21 @@
 # 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.
+## Calls for Presentations
+Call for Lightning Talks
 
-<button linkTo="https://renci.org/" center="true">Call for Tutorials</button>
+KNIT9 attendees have the opportunity to present lightning talks on the following topics:
 
+1.  Enabling experimentation in various science domains
+2.  Getting started with FABRIC -- Unique features, useful tricks, sharable services
+3.  Experiments across FABRIC and other testbeds
+4.  Propose a compelling new topic
 
-## 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.
+These talks should show active FABRIC experiment views and results. For planned experiments, we encourage presenting planned topology and resources (FABRIC and other) as specific as possible.
 
-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. 
+Submissions are due July 15 via our [submission form](https://docs.google.com/forms/d/1x-JXFHXTNgN6-wkqcoBcnFNAvkPdRSCIrX_poPTXazw/viewform?edit_requested=true).
 
-<button linkTo="https://renci.org/" center="true">Call for Presentations</button>
+<div class="button-container">
+<button linkto="https://docs.google.com/forms/d/1x-JXFHXTNgN6-wkqcoBcnFNAvkPdRSCIrX_poPTXazw/viewform?edit_requested=true">Call for Presentations</button>
+</div>
 
 For more questions, email [Chelsea Davis](mailto:[email protected])