Merge pull request #7 from fabric-testbed/feature/mdx-copy

Feature/mdx copy
fabric-testbed · Aug 14, 2024 · 54dc8cc · 54dc8cc
2 parents 2aacb55 + 035b8c8
commit 54dc8cc
Show file tree

Hide file tree

Showing 33 changed files with 308 additions and 196 deletions.
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-lock.json b/package-lock.json
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/button.js b/src/components/button.js
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+import { Button as MUIButton} from '@mui/joy'
+import { Link } from '@components/link'
+
+export const Button = ({ linkto, children }) => {
+  if (typeof children !== 'string') {
+    return <MUIButton>{ children }</MUIButton>
+  }
+  if (!linkto) {
+    return <MUIButton>{ children }</MUIButton>
+  }
+
+  return (
+    <MUIButton
+      component={Link}
+      to={ linkto }
+      button
+      size="lg"
+     >{ children }
+    </MUIButton>
+  )
+}
+
+Button.propTypes = {
+  linkto: PropTypes.string,
+  children: PropTypes.node,
+}
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
diff --git a/src/components/markdown/index.js b/src/components/markdown/index.js
@@ -1,38 +1,7 @@
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import rehypeRaw from 'rehype-raw'
-
-import { hr } from './hr'
-import { a } from './link'
-import { ul, li } from './list'
-import { pre } from './pre'
-import { button } from './button'
-import * as typography from './typography'
-
-/*
- * this object defines a map,
- *   DOM elements -> React components,
- * which allows us to map the HTML elements
- * that result from our Markdown content
- * to the React components used in the rest
- * of the application.
- */
-const componentMap = {
-  a,
-  hr,
-  pre,
-  ul, li,
-  ...typography,
-  button,
-}
-
-export const Markdown = props => {
-  return (
-    <ReactMarkdown
-      { ...props }
-      components={ componentMap }
-      remarkPlugins={ [remarkGfm] }
-      rehypePlugins={ [rehypeRaw] }
-    />
-  )
-}
+export * from "../button"
+export * from "./hr"
+export * from "./link"
+export * from "./list"
+export * from "./markdown"
+export * from "./pre"
+export * from "./typography"
diff --git a/src/components/markdown/markdown.js b/src/components/markdown/markdown.js
@@ -0,0 +1,37 @@
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import rehypeRaw from 'rehype-raw'
+
+import { hr } from './hr'
+import { a } from './link'
+import { ul, ol, li } from './list'
+import { pre } from './pre'
+import { button } from '../button'
+import * as typography from './typography'
+
+/*
+ * this object defines a map,
+ *   DOM elements -> React components,
+ * which allows us to map the HTML elements
+ * that result from our Markdown content
+ * to the React components used in the rest
+ * of the application.
+ */
+export const componentMap = {
+  a,
+  hr,
+  pre,
+  ul, ol, li,
+  ...typography,
+}
+
+export const Markdown = props => {
+  return (
+    <ReactMarkdown
+      { ...props }
+      components={ componentMap }
+      remarkPlugins={ [remarkGfm] }
+      rehypePlugins={ [rehypeRaw] }
+    />
+  )
+}