Merge pull request #13 from fabric-testbed/develop

Add agenda page with google docs iframe

README.md

@@ -29,3 +29,33 @@ To spin up a container from your image, use a command such as the following.
 ```
 docker run --rm -p 80:8080 knit-website
 ```
+
+## Content Management
+
+Content for this site is located in the src directory in a content folder. The content is formatted using mdx, and utilizes [markdown formatting](https://www.markdownguide.org/basic-syntax/). 
+
+```plaintext
+.
+└── src
+    ├── content
+        ├── cfp.mdx
+        ├── home.mdx
+        ├── registration.mdx
+        └── travel.mdx
+```
+
+To update the content, ensure you are on the `content` branch via the dropdown menu, or, click this [link](https://github.com/fabric-testbed/knit-website/tree/content/src/content).
+
+![Screenshot 2024-08-15 at 1 21 22 PM](https://github.com/user-attachments/assets/e7a1c2bb-229b-4143-b3d8-2d66a10ffa55)
+
+
+Then, navigate on the github UI to the file you'd like to change. Find the edit icon (pencil) and edit the text directly in the text editor. 
+
+![Screenshot 2024-08-15 at 1 22 19 PM](https://github.com/user-attachments/assets/94b0a507-766d-4dbe-a417-46a65a6ef78c)
+
+When you're changes are complete, click the "Commit changes ... " button. This will open a dialog box that will prompt you to write a commit message, optional description, email address, and the option to choose one of the following options:
+
+ - Commit directly to the `content` branch
+ - Create a **new branch** for this commit and start a pull request
+
+Please select the first option (Commit directly to the `content` branch). Our team will be notified of the pull request and will review and merge the requested changes. Or, you can contact a developer who can review and merge the changes based on your timeline and needs.

src/app.js

@@ -2,6 +2,7 @@ import { Fragment } from 'react'
 import { Routes, Route } from 'react-router-dom'
 import { Menu } from '@components/menu'
 import {
+  AgendaView,
   CfaView,
   HomeView,
   MarkdownView,
@@ -32,6 +33,11 @@ const menuOptions = [
     path: '/cfa',
     label: 'Calls for Action',
     view: <CfaView />,
+  },
+  {
+    path: '/agenda',
+    label: 'Agenda',
+    view: <AgendaView />,
   }
 ]
 

src/components/markdown/typography.js

@@ -1,15 +1,14 @@
 /* eslint-disable no-unused-vars */
 import { Typography } from '@mui/joy'
-import { LinkedHeading } from '@components/linked-heading'
 
 // heading 1
 export const h1 = ({ node, ...props }) => (
-  <LinkedHeading level="h1" { ...props } />
+  <Typography level="h1" { ...props } />
 )
 
 // heading 2
 export const h2 = ({ node, ...props }) => (
-  <LinkedHeading level="h2" { ...props } />
+  <Typography level="h2" { ...props } />
 )
 
 // heading 3

src/components/menu/menu.js

@@ -29,7 +29,7 @@ export const Menu = ({ options = [] }) => {
       }}
     >
       {
-        width < theme.breakpoints.values.sm
+        width < theme.breakpoints.values.md
           ? <DrawerMenu options={ options } />
           : <DesktopMenu options={ options } />
       }

src/content/cfp.mdx

@@ -1,6 +1,6 @@
 import { Button } from '../components/button'
 
-# Calls for Action
+# Calls for Action  
 
 ## Calls for Presentations
 Call for Lightning Talks
@@ -20,4 +20,4 @@ Submissions are due July 15 via our [submission form](https://docs.google.com/f
 <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])
+For more questions, email [Chelsea Davis](mailto:[email protected])

src/theme/index.js

@@ -6,7 +6,7 @@ import { components } from './components'
 
 const breakpoints = {
   keys: ['xs', 'sm', 'md', 'lg', 'xl'],
-  values: { xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536 },
+  values: { xs: 0, sm: 500, md: 750, lg: 1200, xl: 1536 },
   unit: 'px',
 }
 

src/views/agenda.js

@@ -0,0 +1,33 @@
+import { Page } from '@components/layout'
+import knit9logo from '@images/KNIT9-logo.png'
+
+export const AgendaView = () => {
+  return (
+    <Page
+      title="Agenda"
+      description="Agenda"
+    >
+      <img src={ knit9logo } width="100%"/>
+      <div style={{
+        width: '100%',
+        height: '2700px',
+        position: 'relative',
+        overflow: 'hidden',
+      }}>
+        <iframe 
+          src="https://docs.google.com/document/d/1FKLaYOyQzHG5MnrP7RltSC_uGcyij49LcycZGy4o1RM/pub?embedded=true"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            width: '100%',
+            height: '100%',
+            border: 'none',
+          }}
+        ></iframe>
+      </div>
+    </Page>
+  )
+}

src/views/home.js

@@ -7,7 +7,7 @@ export const HomeView = () => {
   return (
     <Page
       title="Home"
-      description="Home of FABRIC's KNIT Worksop"
+      description="Home of FABRIC's KNIT Workshop"
     >
       <Home components={componentMap} />
     </Page>

src/views/index.js

@@ -1,3 +1,4 @@
+export * from './agenda'
 export * from './cfa'
 export * from './home'
 export * from './not-found'