Merge pull request #711 from XYOracleNetwork/feature/dynamic-share

Meta-Server Share Components

packages/sdk/packages/share/package.json

@@ -13,7 +13,9 @@
     "@xylabs/forget": "^3.6.12",
     "@xylabs/react-button": "^3.4.2",
     "@xylabs/react-flexbox": "^3.4.2",
-    "@xylabs/react-link": "^3.4.2"
+    "@xylabs/react-link": "^3.4.2",
+    "@xylabs/react-shared": "^3.4.2",
+    "react-helmet": "^6.1.0"
   },
   "peerDependencies": {
     "@mui/icons-material": "^5",
@@ -25,6 +27,7 @@
   },
   "devDependencies": {
     "@storybook/react": "^8.2.7",
+    "@types/react-helmet": "^6.1.11",
     "@xylabs/ts-scripts-yarn3": "^4.0.0-rc.7",
     "typescript": "^5.5.4"
   },

packages/sdk/packages/share/src/index.ts

@@ -1,3 +1,4 @@
 export * from './button/index.ts'
 export * from './icons/index.ts'
+export * from './meta-server/index.ts'
 export * from './out/index.ts'

packages/sdk/packages/share/src/meta-server/dynamic-share/DynamicShareImage.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Helmet } from 'react-helmet'
+
+/**
+ * The props for the DynamicShareImage component.
+ */
+export interface DynamicShareImageProps {
+  /**
+   * The URL of the share image for the page.
+   */
+  image: string
+}
+
+/**
+ * Used in conjunction with the XY Meta Server to dynamically set the share image for a page.
+ */
+export const DynamicShareImage: React.FC<DynamicShareImageProps> = ({ image }) => {
+  return (
+    <Helmet>
+      <meta property="xyo:og:image" content={image} />
+    </Helmet>
+  )
+}

packages/sdk/packages/share/src/meta-server/dynamic-share/index.ts

@@ -0,0 +1 @@
+export * from './DynamicShareImage.tsx'

packages/sdk/packages/share/src/meta-server/index.ts

@@ -0,0 +1,2 @@
+export * from './dynamic-share/index.ts'
+export * from './live-share/index.ts'

packages/sdk/packages/share/src/meta-server/live-share/HideParentsFlexbox.tsx

@@ -0,0 +1,39 @@
+import { FlexBoxProps, FlexGrowRow } from '@xylabs/react-flexbox'
+import { WithChildren } from '@xylabs/react-shared'
+import React, { useEffect } from 'react'
+
+export const HideParentsFlexbox: React.FC<WithChildren & FlexBoxProps> = ({ children, ...props }) => {
+  useEffect(() => {
+    const style = document.createElement('style')
+    document.head.append(style)
+    style.innerHTML = `
+    /** make all elements hidden */
+    * {
+      visibility: hidden;
+    }
+
+    /** move the preview area to the top of the page */
+    #preview-area {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 9999;
+    }
+
+    /** make the preview area and all its children visible */
+    #preview-area * {
+      visibility: visible;
+    }`
+
+    return () => {
+      style.remove()
+    }
+  }, [])
+
+  return (
+    <FlexGrowRow alignItems="stretch" id="preview-area" justifyContent="start" {...props}>
+      {children}
+    </FlexGrowRow>
+  )
+}

packages/sdk/packages/share/src/meta-server/live-share/index.ts

@@ -0,0 +1 @@
+export * from './HideParentsFlexbox.tsx'

yarn.lock

@@ -10838,11 +10838,14 @@ __metadata:
   resolution: "@xyo-network/react-share@workspace:packages/sdk/packages/share"
   dependencies:
     "@storybook/react": "npm:^8.2.7"
+    "@types/react-helmet": "npm:^6.1.11"
     "@xylabs/forget": "npm:^3.6.12"
     "@xylabs/react-button": "npm:^3.4.2"
     "@xylabs/react-flexbox": "npm:^3.4.2"
     "@xylabs/react-link": "npm:^3.4.2"
+    "@xylabs/react-shared": "npm:^3.4.2"
     "@xylabs/ts-scripts-yarn3": "npm:^4.0.0-rc.7"
+    react-helmet: "npm:^6.1.0"
     typescript: "npm:^5.5.4"
   peerDependencies:
     "@mui/icons-material": ^5