diff --git a/app/components/DynamicSocialPreview.tsx b/app/components/DynamicSocialPreview.tsx new file mode 100644 index 0000000..a738692 --- /dev/null +++ b/app/components/DynamicSocialPreview.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { ColorScheme } from '../utils/colorSchemes'; + +interface DynamicSocialPreviewProps { + scheme: ColorScheme; +} + +const DynamicSocialPreview: React.FC = ({ scheme }) => { + return ( + + + + {scheme.name} + + + Terminal Tinder Color Scheme + + + {/* Replace this with your actual app logo SVG path */} + + + + + ); +}; + +export default DynamicSocialPreview; \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index ec57f98..addbbb7 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -15,9 +15,24 @@ const geistMono = localFont({ export const metadata: Metadata = { title: "Terminal Tinder", - description: "Generate and discover terminal color schemes", - icons: { - icon: '/app-icon.svg', + description: "Fall in love with your next color scheme", + openGraph: { + title: "Terminal Tinder", + description: "Fall in love with your next color scheme", + images: [ + { + url: "/app-logo-social.png", // Make sure to create this image + width: 1200, + height: 630, + alt: "Terminal Tinder Logo", + }, + ], + }, + twitter: { + card: "summary_large_image", + title: "Terminal Tinder", + description: "Fall in love with your next color scheme", + images: ["/app-logo-social.png"], // Make sure to create this image }, }; diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx index 9de653b..ce7dd23 100644 --- a/app/share/[id]/page.tsx +++ b/app/share/[id]/page.tsx @@ -3,9 +3,11 @@ import React, { useEffect, useState } from 'react'; import { useParams } from 'next/navigation'; import Image from 'next/image'; +import Head from 'next/head'; import { ColorScheme, decodeThemeFromUrl } from '../../utils/colorSchemes'; import ColorPalette from '../../components/ColorPalette'; import CodePreview from '../../components/CodePreview'; +import DynamicSocialPreview from '../../components/DynamicSocialPreview'; import { CodeSample } from '../../utils/types'; import { generateYAML, generateJSON, generateXResources, generateTOML, generateITerm2, generateWindowsTerminal, generateTerminalApp } from '../../utils/exportFormats'; @@ -75,68 +77,83 @@ const SharedTheme: React.FC = () => { }; return ( -
-
-
- App Icon -
-

TerminalTinder

-

Fall in love with your next color scheme

+ <> + + {`${scheme.name} - Terminal Tinder Color Scheme`} + + + + + + + + + + + +
+
+
+ App Icon +
+

TerminalTinder

+

Fall in love with your next color scheme

+
-
-
-
-
-
-

{scheme.name}

-
-

Color Palette

- -
-
-

Code Preview

- -
-
-

Download

-
- - + +
+
+
+

{scheme.name}

+
+

Color Palette

+ +
+
+

Code Preview

+ +
+
+

Download

+
+ + +
+
+
+

Share

+
-
-

Share

- -
-
-
-
+ + + ); };