@openeventkit/event-site 1.0.25 → 1.0.29

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "1.0.25",
+  "version": "1.0.29",
   "author": "Tipit LLC",
   "dependencies": {
     "@mui/base": "^5.0.0-alpha.114",
@@ -116,7 +116,7 @@
     "stream-browserify": "^3.0.0",
     "stream-chat": "^2.7.2",
     "stream-chat-react": "3.1.7",
-    "summit-registration-lite": "^4.0.12",
+    "summit-registration-lite": "^4.0.15",
     "superagent": "8.0.9",
     "sweetalert2": "^9.17.0",
     "upcoming-events-widget": "2.0.8",

package/src/cms/config/collections/configurationsCollection/siteSettings/index.js

@@ -1,5 +1,7 @@
 import {
   booleanField,
+  stringField,
+  textField,
   imageField,
   selectField,
   selectOption,
@@ -10,36 +12,27 @@ import {
   SITE_SETTINGS_FILE_PATH
 } from "@utils/filePath";
 
-/*
-- file: "src/content/site-settings/index.json"
-  label: "Site Settings"
-  name: "site-settings"
-  fields:
-    - {label: "Favicons", name: favicons, widget: object, fields: [
-        {label: "Favicon 180x180", name: favicon180, widget: image},
-        {label: "Favicon 32x32", name: favicon32, widget: image},
-        {label: "Favicon 16x16", name: favicon16, widget: image}
-      ]}
-    - {label: "Widgets", name: widgets, widget: object, fields: [
-        {label: "Chat", name: chat, widget: object, fields: [
-          {label: "Show QA", name: showQA, widget: boolean, required: false, default: false},
-          {label: "Show Help", name: showHelp, widget: boolean, required: false, default: false},
-          {label: "Default Filter Criteria", name: defaultScope, widget: select, required: false, default: 'page', options: [
-            {label: "In this Room", value: "page" },
-            {label: "All Attendees", value: "show" }
-          ]}
-        ]},
-        {label: "Schedule", name: schedule, widget: object, fields: [
-          {label: "Allow Clickable Behavior", name: allowClick, widget: boolean, required: false, default: true},                
-        ]}
-      ]}
-*/
-
 const siteSettings = {
   label: "Site Settings",
   name: "site-settings",
   file: SITE_SETTINGS_FILE_PATH,
   fields: [
+    objectField({
+      label: "Site Metadata",
+      name: "siteMetadata",
+      fields: [
+        stringField({
+          label: "title",
+          name: "title",
+          required: false
+        }),
+        textField({
+          label: "description",
+          name: "description",
+          required: false
+        })
+      ]
+    }),
     objectField({
       label: "Favicons",
       name: "favicons",

package/src/cms/config/collections/configurationsCollection/siteSettings/typeDefs.js

@@ -1,9 +1,13 @@
 
 module.exports = `
+  type SiteMetadata {
+    title: String
+    description: String
+  }
   type Favicons {
-    favicon180: String
-    favicon32: String
-    favicon16: String
+    favicon180: File @fileByRelativePath
+    favicon32: File @fileByRelativePath
+    favicon16: File @fileByRelativePath
   }
   type Schedule {
     allowClick: Boolean
@@ -18,6 +22,7 @@ module.exports = `
     chat: Chat
   }
   type SiteSettingsJson implements Node {
+    siteMetadata: SiteMetadata
     favicons: Favicons
     widgets: Widgets
   }

package/src/components/HeadComponents.js

@@ -1,78 +1,31 @@
 import * as React from "react";
 import { withPrefix } from "gatsby";
 
-/**
- * TODO: implement using Gatsby Head API
- * @see https://www.gatsbyjs.com/docs/how-to/adding-common-features/adding-seo-component/#add-sitemetadata
- *
- 
-import useSiteMetadata from "@utils/useSiteMetadata";
-import useSiteSettings from "@utils/useSiteSettings";
-
-const {
-    title,
-    description
-  } = useSiteMetadata();
-const { favicons } = useSiteSettings();
-
-<title>{`${summit.name} - ${title}`}</title>
-<meta key="meta-description" name="description" content={description} />
-<meta key="meta-theme-color" name="theme-color" content="#fff" />
-<meta key="meta-og-type" property="og:type" content="business.business" />
-<meta key="meta-og-title" property="og:title" content={title} />
-<meta key="meta-og-url" property="og:url" content="/" />
-{favicons?.favicon180 &&
-<link
-  rel="apple-touch-icon"
-  sizes="180x180"
-  href={`${withPrefix('/')}${favicons.favicon180.substring(1)}`}
-/>
-}
-{favicons?.favicon32 &&
-<link
-  rel="icon"
-  sizes="32x32"
-  href={`${withPrefix('/')}${favicons.favicon32.substring(1)}`}
-/>
-}
-{favicons?.favicon16 &&
-<link
-  rel="icon"
-  type="image/png"
-  sizes="16x16"
-  href={`${withPrefix('/')}${favicons.favicon16.substring(1)}`}
-/>
-
- */
-
 export const HtmlAttributes = {
   lang: "en"
 };
 
-export const Head = () => {
-  return (
-    <>
-      <link
-        key="font-awesome"
-        rel="stylesheet"
-        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
-        crossOrigin="anonymous"
-        referrerPolicy="no-referrer"
-      />
-      <link
-        key="awesome-bootstrap-checkbox"
-        rel="stylesheet"
-        href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/1.0.2/awesome-bootstrap-checkbox.min.css" integrity="sha512-zAQ4eQ+PGbYf6BknDx0m2NhTcOnHWpMdJCFaPvcv5BpMTR5edqr/ZRuluUcNave6IEpRCoT67/3hVVmm5ODpqA=="
-        crossOrigin="anonymous"
-        referrerPolicy="no-referrer"
-      />
-      <link key="fonts" rel="stylesheet" type="text/css" href={withPrefix("/fonts/fonts.css")} />
-    </>
-  );
-};
-
 export const HeadComponents = [
-  <Head key="head" />
+  <link
+    key="font-awesome"
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
+    crossOrigin="anonymous"
+    referrerPolicy="no-referrer"
+  />,
+  <link
+    key="awesome-bootstrap-checkbox"
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/1.0.2/awesome-bootstrap-checkbox.min.css" integrity="sha512-zAQ4eQ+PGbYf6BknDx0m2NhTcOnHWpMdJCFaPvcv5BpMTR5edqr/ZRuluUcNave6IEpRCoT67/3hVVmm5ODpqA=="
+    crossOrigin="anonymous"
+    referrerPolicy="no-referrer"
+  />,
+  <link
+    key="fonts"
+    rel="stylesheet"
+    type="text/css"
+    href={withPrefix("/fonts/fonts.css")}
+  />
 ];
 
 export const PreBodyComponents = [

package/src/components/Layout.js

@@ -11,10 +11,8 @@ const TemplateWrapper = ({
   marketing
 }) => {
   const [isFocus, setIsFocus] = useState(true);
-
   const onFocus = () => setIsFocus(true);
   const onBlur = () => setIsFocus(false);
-
   useEffect(() => {
     window.addEventListener("focus", onFocus);
     window.addEventListener("blur", onBlur);
@@ -23,7 +21,6 @@ const TemplateWrapper = ({
       window.removeEventListener("blur", onBlur);
     };
   });
-
   return (
     <div id="container">
       <a className="sr-only skip-to-content" href="#content-wrapper">Skip to content</a>

package/src/components/Seo.js

@@ -0,0 +1,63 @@
+import * as React from "react";
+import useSiteMetadata from "@utils/useSiteMetadata";
+import useSiteSettings from "@utils/useSiteSettings";
+import { withPrefix } from "gatsby";
+import { getSrc } from "gatsby-plugin-image";
+
+const Seo = ({
+  title,
+  description,
+  pathname,
+  children
+}) => {
+  const {
+    title: defaultTitle,
+    description: defaultDescription,
+  } = useSiteMetadata();
+  const seo = {
+    title: title ? `${defaultTitle} - ${title}` : defaultTitle,
+    description: description || defaultDescription,
+    url: `${withPrefix(pathname || "/")}`
+  }
+  const { favicons } = useSiteSettings();
+  return (
+    <>
+      <title>{seo.title}</title>
+      <meta name="description" content={seo.description} />
+      <meta name="twitter:card" content="summary" />
+      <meta name="twitter:title" content={seo.title} />
+      <meta name="twitter:url" content={seo.url} />
+      <meta name="twitter:description" content={seo.description} />
+      <meta name="description" content={seo.description} />
+      <meta name="theme-color" content="#fff" />
+      <meta property="og:type" content="business.business" />
+      <meta property="og:title" content={seo.title} />
+      <meta property="og:url" content={seo.url} />
+      {favicons?.favicon180 &&
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href={`${getSrc(favicons.favicon180)}`}
+      />
+      }
+      {favicons?.favicon32 &&
+      <link
+        rel="icon"
+        sizes="32x32"
+        href={`${getSrc(favicons.favicon32)}`}
+      />
+      }
+      {favicons?.favicon16 &&
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href={`${getSrc(favicons.favicon16)}`}
+      />
+      }
+      {children}
+    </>
+  )
+};
+
+export default Seo;

package/src/pages/a/[...].js

@@ -18,10 +18,11 @@ import MyTicketsPage from "../../templates/my-tickets-page";
 import WithTicketRoute from "../../routes/WithTicketRoute";
 import withRealTimeUpdates from "../../utils/real_time_updates/withRealTimeUpdates";
 import withFeedsWorker from "../../utils/withFeedsWorker";
+import Seo from "../../components/Seo";
 import Link from "../../components/Link";
+import { titleFromPathname } from "../../utils/urlFormating";
 
 const App = ({ isLoggedUser, user, summit_phase, allowClick = true }) => {
-
   return (
     <Location>
       {({ location }) => (
@@ -72,7 +73,7 @@ const App = ({ isLoggedUser, user, summit_phase, allowClick = true }) => {
         </Router>
       )}
     </Location>
-  )
+  );
 };
 
 const mapStateToProps = ({ loggedUserState, userState, clockState, settingState, summitState }) => ({
@@ -85,5 +86,13 @@ const mapStateToProps = ({ loggedUserState, userState, clockState, settingState,
   allowClick: settingState?.widgets?.schedule?.allowClick
 });
 
-export default connect(mapStateToProps, {
-})(withFeedsWorker(withRealTimeUpdates(App)));
+export default connect(mapStateToProps, {})(withFeedsWorker(withRealTimeUpdates(App)));
+
+export const Head = ({
+  location
+}) => (
+  <Seo
+    title={titleFromPathname(location.pathname)}
+    pathname={location.pathname}
+  />
+);

package/src/templates/schedule-page.js

@@ -92,7 +92,7 @@ const SchedulePage = ({ summit, scheduleState, summitPhase, isLoggedUser, locati
         <div className={`${styles.wrapper} ${showFilters ? styles.showFilters : ""}`}>
           <div className={styles.scheduleWrapper}>
             <FullSchedule {...schedProps}
-                          key={`fullschedule_${lastDataSync}`}
+              key={`fullschedule_${lastDataSync}`}
             />
           </div>
           <div ref={filtersWrapperRef} className={styles.filterWrapper}>
@@ -114,4 +114,16 @@ SchedulePage.propTypes = {
   isLoggedUser: PropTypes.bool,
 };
 
-export default withScheduleData(SchedulePage);
+export default withScheduleData(SchedulePage);
+
+export const Head = ({
+  location,
+  pageContext
+}) => {
+  return (
+    <Seo
+      title="Schedule"
+      pathname={location.pathname}
+    />
+  );
+}

package/src/utils/urlFormating.js

@@ -1,4 +1,10 @@
 export const getSponsorURL = (id, name) => {  
   let formattedName = name.toLowerCase().replace(/\s/g, '-');
   return `${id}-${formattedName}`;
-}
+}
+
+export const titleFromPathname = (pathname) => {
+  const segments = pathname.split("/");
+  const lastSegment = segments.filter(Boolean).pop();
+  return lastSegment?.replace("-", " ").replace(/\b\w/g, (word) => word.toUpperCase());
+}

package/src/utils/useSiteSettings.js

@@ -1,12 +1,33 @@
-import { graphql, useStaticQuery } from "gatsby";
+import {
+  graphql,
+  useStaticQuery
+} from "gatsby";
 
 const siteSettingsQuery = graphql`
   query {
     siteSettingsJson {
       favicons {
-        favicon16
-        favicon32
-        favicon180
+        favicon16 {
+          childImageSharp {
+            gatsbyImageData (
+              quality: 100
+            )
+          }
+        }
+        favicon32 {
+          childImageSharp {
+            gatsbyImageData (
+              quality: 100
+            )
+          }
+        }
+        favicon180 {
+          childImageSharp {
+            gatsbyImageData (
+              quality: 100
+            )
+          }
+        }
       }
       widgets {
         chat {