Add team url param

demo/src/components/Header.tsx

@@ -2,21 +2,24 @@ import { Avatar } from './Avatar';
 import { AvatarStack } from './AvatarStack';
 import { ExternalLinkSvg, InfoSvg } from './svg';
 import { type Member } from '../utils/types';
+import { getParamNameFromUrl } from '../utils';
 
 interface Props {
   self?: Member;
   others?: Member[];
 }
 
 export const Header = ({ self, others }: Props) => {
+  const teamName = getParamNameFromUrl('team', 1, '')
+
   return (
     <header
       id="main-header"
       className="bg-white"
     >
       <div className="mx-auto justify-between grid grid-rows-2 grid-cols-2 max-w-screen-2xl md:px-8 lg:px-16 md:flex md:items-center">
         <section className="py-4 shrink-0 mr-4">
-          <p className="font-semibold pl-8 md:text-2xl">Team Argo</p>
+          <p className="font-semibold pl-8 md:text-2xl capitalize">Team {teamName ?? 'Argo'}</p>
           <p className="leading-5 pl-8">Pitch deck</p>
         </section>
 
@@ -47,7 +50,7 @@ export const Header = ({ self, others }: Props) => {
           <a
             href="https://github.com/ably-labs/spaces"
             target="_blank"
-            className="flex items-center px-5 py-[14px] justify-start shrink-0 block"
+            className="flex items-center px-5 py-[14px] justify-start shrink-0"
             rel="noreferrer"
           >
             <p className="font-medium text-base">Space API</p>
@@ -56,7 +59,7 @@ export const Header = ({ self, others }: Props) => {
 
           <a
             href="https://docs.google.com/forms/d/e/1FAIpQLSer2ujLNw0rlrf2FvfIhLxyiWuuvTwYkDDqHmv30F8Cs00YWg/viewform"
-            className="block w-[100px] text-white bg-ably-black rounded-md py-[11px] px-5 leading-[1.125] md:text-xs lg:text-base lg:ml-[24px] shrink-0 hidden lg:block"
+            className="w-[100px] text-white bg-ably-black rounded-md py-[11px] px-5 leading-[1.125] md:text-xs lg:text-base lg:ml-[24px] shrink-0 hidden lg:block"
           >
             Sign Up
           </a>

demo/src/components/SpacesContext.tsx

@@ -5,13 +5,13 @@ import Spaces, { type Space } from '@ably/spaces';
 import { Realtime } from 'ably';
 import { nanoid } from 'nanoid';
 
-import { getSpaceNameFromUrl } from '../utils';
+import { getParamNameFromUrl } from '../utils';
 
 export const SpacesContext = React.createContext<Space | undefined>(undefined);
 
 const SpaceContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [space, setSpace] = React.useState<Space | undefined>(undefined);
-  const spaceName = getSpaceNameFromUrl();
+  const spaceName = getParamNameFromUrl();
 
   const [spaces, ably] = React.useMemo(() => {
     const clientId = nanoid();
@@ -28,7 +28,7 @@ const SpaceContextProvider: React.FC<{ children: React.ReactNode }> = ({ childre
     let ignore = false;
 
     const init = async () => {
-      const spaceInstance = await spaces.get(getSpaceNameFromUrl(), {
+      const spaceInstance = await spaces.get(getParamNameFromUrl(), {
         offlineTimeout: 10_000,
       });
 

demo/src/hooks/useTextComponentLock.ts

@@ -1,6 +1,6 @@
 import { MutableRefObject, useCallback } from 'react';
 import { useChannel } from '@ably-labs/react-hooks';
-import { findActiveMember, getSpaceNameFromUrl } from '../utils';
+import { findActiveMember, getParamNameFromUrl } from '../utils';
 import { buildLockId } from '../utils/locking.ts';
 import { usePreview } from '../components/PreviewContext.tsx';
 import { useMembers } from './useMembers.ts';
@@ -17,7 +17,7 @@ interface UseTextComponentLockArgs {
 }
 
 export const useTextComponentLock = ({ id, slide, defaultText, containerRef }: UseTextComponentLockArgs) => {
-  const spaceName = getSpaceNameFromUrl();
+  const spaceName = getParamNameFromUrl();
   const { members, self } = useMembers();
   const activeMember = findActiveMember(id, slide, members);
   const { locked, lockedByYou } = useLockStatus(slide, id, self?.connectionId);

demo/src/utils/url.ts

@@ -1,17 +1,17 @@
 import { generate } from 'random-words';
 
-const getSpaceNameFromUrl = () => {
+const getParamNameFromUrl = (paramName: string = 'space', length = 3, join = '-' ) => {
   const url = new URL(window.location.href);
-  const spaceNameInParams = url.searchParams.get('space');
+  const spaceNameInParams = url.searchParams.get(paramName);
 
   if (spaceNameInParams) {
     return spaceNameInParams;
   } else {
-    const generatedName = generate({ exactly: 3, join: '-' });
-    url.searchParams.set('space', generatedName);
+    const generatedName = generate({ exactly: length, join });
+    url.searchParams.set(paramName, generatedName);
     window.history.replaceState({}, '', `?${url.searchParams.toString()}`);
     return generatedName;
   }
 };
 
-export { getSpaceNameFromUrl };
+export { getParamNameFromUrl };