From 9b57cb4f101185a0bc92d40242bd36d397288f29 Mon Sep 17 00:00:00 2001 From: Harper Reed Date: Mon, 17 Feb 2025 23:29:29 -0600 Subject: [PATCH 1/3] Add open graph metadata Fixes #57 Add Open Graph and sharing metadata to web pages. * Modify `packages/chat/app/+html.tsx` to include `og:image`, `og:url`, and `og:type` meta tags. * Modify `packages/chat/app/index.tsx` to include `og:title`, `og:description`, and `og:image` meta tags. * Modify `packages/chat/app/_layout.tsx` to dynamically set `og:title`, `og:description`, `og:image`, `og:url`, and `og:type` meta tags based on the current page. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/harperreed/orbiting/issues/57?shareId=XXXX-XXXX-XXXX-XXXX). --- packages/chat/app/+html.tsx | 3 +++ packages/chat/app/_layout.tsx | 27 ++++++++++++++++++++++++++- packages/chat/app/index.tsx | 20 ++++++++++++++++++++ 3 files changed, 49 insertions(+), 1 deletion(-) diff --git a/packages/chat/app/+html.tsx b/packages/chat/app/+html.tsx index bf47f3c7..91945dbd 100644 --- a/packages/chat/app/+html.tsx +++ b/packages/chat/app/+html.tsx @@ -33,6 +33,9 @@ export default function Root({ children }: PropsWithChildren) { {/* Add any additional elements that you want globally available on web... */} + + + {children} diff --git a/packages/chat/app/_layout.tsx b/packages/chat/app/_layout.tsx index 9caaa393..f002e6b3 100644 --- a/packages/chat/app/_layout.tsx +++ b/packages/chat/app/_layout.tsx @@ -17,24 +17,49 @@ function AppContent() { useEffect(() => { let title = 'Orbiting'; - + let ogTitle = 'Orbiting'; + let ogDescription = 'A text display app'; + let ogImage = 'https://orbiting.com/imgs/og.png'; + switch (pathname) { case '/history': title = `${t('history')} | Orbiting`; + ogTitle = `${t('history')} | Orbiting`; break; case '/settings': title = `${t('settings')} | Orbiting`; + ogTitle = `${t('settings')} | Orbiting`; break; case '/help': title = `${t('help')} | Orbiting`; + ogTitle = `${t('help')} | Orbiting`; break; case '/about': title = `${t('about')} | Orbiting`; + ogTitle = `${t('about')} | Orbiting`; break; } if (typeof document !== 'undefined') { document.title = title; + + const metaTags = [ + { property: 'og:title', content: ogTitle }, + { property: 'og:description', content: ogDescription }, + { property: 'og:image', content: ogImage }, + { property: 'og:url', content: window.location.href }, + { property: 'og:type', content: 'website' } + ]; + + metaTags.forEach(({ property, content }) => { + let metaTag = document.querySelector(`meta[property="${property}"]`); + if (!metaTag) { + metaTag = document.createElement('meta'); + metaTag.setAttribute('property', property); + document.head.appendChild(metaTag); + } + metaTag.setAttribute('content', content); + }); } }, [pathname, t]); diff --git a/packages/chat/app/index.tsx b/packages/chat/app/index.tsx index 0f887936..1ad1872c 100644 --- a/packages/chat/app/index.tsx +++ b/packages/chat/app/index.tsx @@ -17,5 +17,25 @@ export default function Index() { } }, []); + useEffect(() => { + if (Platform.OS === 'web' && typeof document !== 'undefined') { + const metaTags = [ + { property: 'og:title', content: 'Orbiting' }, + { property: 'og:description', content: 'A text display app' }, + { property: 'og:image', content: 'https://orbiting.com/imgs/og.png' } + ]; + + metaTags.forEach(({ property, content }) => { + let metaTag = document.querySelector(`meta[property="${property}"]`); + if (!metaTag) { + metaTag = document.createElement('meta'); + metaTag.setAttribute('property', property); + document.head.appendChild(metaTag); + } + metaTag.setAttribute('content', content); + }); + } + }, []); + return ; } From e452483b5b67f403dae2805ba2fbdd266d1ab074 Mon Sep 17 00:00:00 2001 From: Harper Reed Date: Mon, 17 Feb 2025 23:33:14 -0600 Subject: [PATCH 2/3] Add Open Graph meta tags for better social media sharing * **packages/chat/app/+html.tsx** - Add `og:image` tag with the value `https://orbiting.com/imgs/og.png` - Add `og:url` tag with the current page URL - Add `og:type` tag with the value `website` - Add `og:description` tag with the value `A text display app` * **packages/chat/app/index.tsx** - Add `og:title` tag with the value `Orbiting` - Add `og:description` tag with the value `A text display app` - Add `og:image` tag with the value `https://orbiting.com/imgs/og.png` * **packages/chat/app/_layout.tsx** - Add `og:title` tag with the dynamic title in the `useEffect` hook - Add `og:description` tag with the value `A text display app` in the `useEffect` hook - Add `og:image` tag with the value `https://orbiting.com/imgs/og.png` in the `useEffect` hook - Add `og:url` tag with the current page URL in the `useEffect` hook - Add `og:type` tag with the value `website` in the `useEffect` hook --- packages/chat/app/+html.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/chat/app/+html.tsx b/packages/chat/app/+html.tsx index 91945dbd..331d3d14 100644 --- a/packages/chat/app/+html.tsx +++ b/packages/chat/app/+html.tsx @@ -36,6 +36,7 @@ export default function Root({ children }: PropsWithChildren) { + {children} From 297113f7949e373ba0f502b6e045140ef399def8 Mon Sep 17 00:00:00 2001 From: Harper Reed Date: Mon, 17 Feb 2025 23:34:39 -0600 Subject: [PATCH 3/3] --- packages/chat/app/+html.tsx | 2 +- packages/chat/app/_layout.tsx | 2 +- packages/chat/app/index.tsx | 6 ++++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/chat/app/+html.tsx b/packages/chat/app/+html.tsx index 331d3d14..d8858f9c 100644 --- a/packages/chat/app/+html.tsx +++ b/packages/chat/app/+html.tsx @@ -36,7 +36,7 @@ export default function Root({ children }: PropsWithChildren) { - + {children} diff --git a/packages/chat/app/_layout.tsx b/packages/chat/app/_layout.tsx index f002e6b3..c240421a 100644 --- a/packages/chat/app/_layout.tsx +++ b/packages/chat/app/_layout.tsx @@ -18,7 +18,7 @@ function AppContent() { useEffect(() => { let title = 'Orbiting'; let ogTitle = 'Orbiting'; - let ogDescription = 'A text display app'; + let ogDescription = 'A simple messaging app for your eyeballs. You can use it to type and display messages to those around you. Display a message loud and clear.'; let ogImage = 'https://orbiting.com/imgs/og.png'; switch (pathname) { diff --git a/packages/chat/app/index.tsx b/packages/chat/app/index.tsx index 1ad1872c..e75cdae8 100644 --- a/packages/chat/app/index.tsx +++ b/packages/chat/app/index.tsx @@ -21,8 +21,10 @@ export default function Index() { if (Platform.OS === 'web' && typeof document !== 'undefined') { const metaTags = [ { property: 'og:title', content: 'Orbiting' }, - { property: 'og:description', content: 'A text display app' }, - { property: 'og:image', content: 'https://orbiting.com/imgs/og.png' } + { property: 'og:description', content: 'A simple messaging app for your eyeballs. You can use it to type and display messages to those around you. Display a message loud and clear.' }, + { property: 'og:image', content: 'https://orbiting.com/imgs/og.png' }, + { property: 'og:url', content: window.location.href }, + { property: 'og:type', content: 'website' } ]; metaTags.forEach(({ property, content }) => {