diff --git a/index.html b/index.html index ef9fb48..bb9e85f 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,13 @@ + Community Focus +
+ diff --git a/package-lock.json b/package-lock.json index 05ab279..e9c1742 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "react-dom": "^18.2.0", "react-dropdown": "^1.11.0", "react-ga4": "^2.1.0", + "react-helmet-async": "^2.0.4", "react-icons": "^4.10.1", "react-loading": "^2.0.3", "react-modal": "^3.16.1", @@ -5182,6 +5183,14 @@ "node": ">= 0.4" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/is-arguments": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", @@ -7458,11 +7467,30 @@ "react-dom": "^0.14.7 || ^15.0.0-0 || ^16.0.0 || ^17.0.0|| ^18.0.0" } }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" + }, "node_modules/react-ga4": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz", "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==" }, + "node_modules/react-helmet-async": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.4.tgz", + "integrity": "sha512-yxjQMWposw+akRfvpl5+8xejl4JtUlHnEBcji6u8/e6oc7ozT+P9PNTWMhCbz2y9tc5zPegw2BvKjQA+NwdEjQ==", + "dependencies": { + "invariant": "^2.2.4", + "react-fast-compare": "^3.2.2", + "shallowequal": "^1.1.0" + }, + "peerDependencies": { + "react": "^16.6.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-icons": { "version": "4.11.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz", @@ -12583,6 +12611,14 @@ "side-channel": "^1.0.4" } }, + "invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "is-arguments": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", @@ -14242,11 +14278,26 @@ "classnames": "^2.2.3" } }, + "react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" + }, "react-ga4": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz", "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==" }, + "react-helmet-async": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.4.tgz", + "integrity": "sha512-yxjQMWposw+akRfvpl5+8xejl4JtUlHnEBcji6u8/e6oc7ozT+P9PNTWMhCbz2y9tc5zPegw2BvKjQA+NwdEjQ==", + "requires": { + "invariant": "^2.2.4", + "react-fast-compare": "^3.2.2", + "shallowequal": "^1.1.0" + } + }, "react-icons": { "version": "4.11.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz", diff --git a/package.json b/package.json index a0f16b2..a244242 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "react-dom": "^18.2.0", "react-dropdown": "^1.11.0", "react-ga4": "^2.1.0", + "react-helmet-async": "^2.0.4", "react-icons": "^4.10.1", "react-loading": "^2.0.3", "react-modal": "^3.16.1", diff --git a/public/images/communityFocus-icon-meta.png b/public/images/communityFocus-icon-meta.png new file mode 100644 index 0000000..b0452b2 Binary files /dev/null and b/public/images/communityFocus-icon-meta.png differ diff --git a/src/App.tsx b/src/App.tsx index f26fe23..5df2892 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,8 +11,11 @@ import ModalContext from "./components/Modal/ModalContext"; import UsernameContext from "./components/Username/UsernameContext"; import ValidRoom from "./Pages/Room/ValidRoom"; import DefaultRoom from "./Pages/DefaultRoom/DefaultRoom"; -import { tracker } from "../common/common"; +import { roomName, tracker } from "../common/common"; import { PublicRoom } from "./Pages/PublicRoom/PublicRoom"; +import { HelmetProvider } from "react-helmet-async"; +import HelmetTags from "./helmet"; + const App = (): JSX.Element => { const [globalUsersConnected, setGlobalUsersConnected] = useState(0); @@ -54,6 +57,8 @@ const App = (): JSX.Element => { setIsConnected(false); }; + const helmetContext = {} + useEffect(() => { socket.on("globalUsers", onGlobalUsers); socket.on("connect", onConnect); @@ -73,116 +78,122 @@ const App = (): JSX.Element => { }, []); return ( - - ({ - userName, - setUserName, - }), - [userName, setUserName] - )} - > - + + ({ - isUsernamModalOpen, - setIsUsernameModalOpen, + userName, + setUserName, }), - [isUsernamModalOpen, setIsUsernameModalOpen] + [userName, setUserName] )} > - - - - - } - /> + + ({ + isUsernamModalOpen, + setIsUsernameModalOpen, + }), + [isUsernamModalOpen, setIsUsernameModalOpen] + )} + > + + + + + } + /> - - } - /> + + } + /> - - } - /> - - } - /> + + } + /> + + } + /> - - } - /> - - } - /> - - - - - + + } + /> + + } + /> + + + + + + ); }; diff --git a/src/helmet.tsx b/src/helmet.tsx new file mode 100644 index 0000000..45a15e0 --- /dev/null +++ b/src/helmet.tsx @@ -0,0 +1,42 @@ +import { Helmet } from "react-helmet-async"; + +const HelmetTags = (props: { + roomName: string; + userName: string; +}): JSX.Element => { + const { roomName, userName } = props; + + const joinTitle = `Join ${userName}'s shared Timer`; + const joinDescription = `Join the ${roomName} timer and study with your team or friends!`; + const logo = + "https://raw.githubusercontent.com/CommunityFocus/cf-frontend/main/public/images/communityFocus-icon-meta.png"; + return ( + <> + + + + /* OG Tags */ + + + + + + + + /* Twitter Card Meta Tags */ + + + + + + + + ); +}; +export default HelmetTags;