Add social preview, fix share page
This commit is contained in:
parent
601f89352d
commit
e8af04d0a9
53
app/components/DynamicSocialPreview.tsx
Normal file
53
app/components/DynamicSocialPreview.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import { ColorScheme } from '../utils/colorSchemes';
|
||||
|
||||
interface DynamicSocialPreviewProps {
|
||||
scheme: ColorScheme;
|
||||
}
|
||||
|
||||
const DynamicSocialPreview: React.FC<DynamicSocialPreviewProps> = ({ scheme }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1200"
|
||||
height="630"
|
||||
viewBox="0 0 1200 630"
|
||||
>
|
||||
<rect width="1200" height="630" fill={scheme.colors.primary.background} />
|
||||
<text
|
||||
x="50%"
|
||||
y="40%"
|
||||
dominantBaseline="middle"
|
||||
textAnchor="middle"
|
||||
fontSize="60"
|
||||
fontWeight="bold"
|
||||
fill={scheme.colors.primary.foreground}
|
||||
>
|
||||
{scheme.name}
|
||||
</text>
|
||||
<text
|
||||
x="50%"
|
||||
y="55%"
|
||||
dominantBaseline="middle"
|
||||
textAnchor="middle"
|
||||
fontSize="30"
|
||||
fill={scheme.colors.primary.foreground}
|
||||
>
|
||||
Terminal Tinder Color Scheme
|
||||
</text>
|
||||
<g transform="translate(500, 400) scale(0.5)">
|
||||
{/* Replace this with your actual app logo SVG path */}
|
||||
<path
|
||||
d="M0,0 L100,0 L100,100 L0,100 Z"
|
||||
fill={scheme.colors.normal.blue}
|
||||
/>
|
||||
<path
|
||||
d="M25,25 L75,25 L75,75 L25,75 Z"
|
||||
fill={scheme.colors.normal.green}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default DynamicSocialPreview;
|
||||
@ -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
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -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 (
|
||||
<div className="min-h-screen w-screen overflow-hidden font-[family-name:var(--font-geist-sans)] dark:bg-gray-900 dark:text-white transition-colors duration-300">
|
||||
<header className="absolute top-2 left-2 right-2 flex justify-between items-start z-20">
|
||||
<div className="flex items-center">
|
||||
<Image src="/app-icon.svg" alt="App Icon" width={32} height={32} className="mr-2" />
|
||||
<div>
|
||||
<h1 className="text-lg font-bold">TerminalTinder</h1>
|
||||
<p className="text-xs">Fall in love with your next color scheme</p>
|
||||
<>
|
||||
<Head>
|
||||
<title>{`${scheme.name} - Terminal Tinder Color Scheme`}</title>
|
||||
<meta name="description" content={`Check out this beautiful color scheme: ${scheme.name}`} />
|
||||
<meta property="og:title" content={`${scheme.name} - Terminal Tinder Color Scheme`} />
|
||||
<meta property="og:description" content={`Check out this beautiful color scheme: ${scheme.name}`} />
|
||||
<meta property="og:image" content={`data:image/svg+xml,${encodeURIComponent(DynamicSocialPreview({ scheme }).outerHTML)}`} />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={`${scheme.name} - Terminal Tinder Color Scheme`} />
|
||||
<meta name="twitter:description" content={`Check out this beautiful color scheme: ${scheme.name}`} />
|
||||
<meta name="twitter:image" content={`data:image/svg+xml,${encodeURIComponent(DynamicSocialPreview({ scheme }).outerHTML)}`} />
|
||||
</Head>
|
||||
<div className="min-h-screen w-screen overflow-hidden font-[family-name:var(--font-geist-sans)] dark:bg-gray-900 dark:text-white transition-colors duration-300">
|
||||
<header className="absolute top-2 left-2 right-2 flex justify-between items-start z-20">
|
||||
<div className="flex items-center">
|
||||
<Image src="/app-icon.svg" alt="App Icon" width={32} height={32} className="mr-2" />
|
||||
<div>
|
||||
<h1 className="text-lg font-bold">TerminalTinder</h1>
|
||||
<p className="text-xs">Fall in love with your next color scheme</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main className="pt-16 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden">
|
||||
<div className="p-8">
|
||||
<h1 className="text-3xl font-bold mb-4">{scheme.name}</h1>
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold mb-2">Color Palette</h2>
|
||||
<ColorPalette
|
||||
colors={Object.values(scheme.colors.normal).concat(Object.values(scheme.colors.bright))}
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold mb-2">Code Preview</h2>
|
||||
<CodePreview scheme={scheme} codeSample={codeSample} />
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold mb-2">Download</h2>
|
||||
<div className="flex items-center space-x-4">
|
||||
<select
|
||||
value={outputFormat}
|
||||
onChange={(e) => setOutputFormat(e.target.value)}
|
||||
className="p-2 border rounded dark:bg-gray-700 dark:border-gray-600"
|
||||
>
|
||||
<option value="yaml">YAML (Alacritty)</option>
|
||||
<option value="json">JSON</option>
|
||||
<option value="xresources">XResources</option>
|
||||
<option value="toml">TOML (Alacritty)</option>
|
||||
<option value="iterm2">iTerm2</option>
|
||||
<option value="windows-terminal">Windows Terminal</option>
|
||||
<option value="terminal-app">Terminal.app</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors duration-300"
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
</header>
|
||||
<main className="pt-16 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden">
|
||||
<div className="p-8">
|
||||
<h1 className="text-3xl font-bold mb-4">{scheme.name}</h1>
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold mb-2">Color Palette</h2>
|
||||
<ColorPalette
|
||||
colors={Object.values(scheme.colors.normal).concat(Object.values(scheme.colors.bright))}
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold mb-2">Code Preview</h2>
|
||||
<CodePreview scheme={scheme} codeSample={codeSample} />
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold mb-2">Download</h2>
|
||||
<div className="flex items-center space-x-4">
|
||||
<select
|
||||
value={outputFormat}
|
||||
onChange={(e) => setOutputFormat(e.target.value)}
|
||||
className="p-2 border rounded dark:bg-gray-700 dark:border-gray-600"
|
||||
>
|
||||
<option value="yaml">YAML (Alacritty)</option>
|
||||
<option value="json">JSON</option>
|
||||
<option value="xresources">XResources</option>
|
||||
<option value="toml">TOML (Alacritty)</option>
|
||||
<option value="iterm2">iTerm2</option>
|
||||
<option value="windows-terminal">Windows Terminal</option>
|
||||
<option value="terminal-app">Terminal.app</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors duration-300"
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-2">Share</h2>
|
||||
<input
|
||||
type="text"
|
||||
value={window.location.href}
|
||||
readOnly
|
||||
className="w-full p-2 border rounded bg-gray-100 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-2">Share</h2>
|
||||
<input
|
||||
type="text"
|
||||
value={window.location.href}
|
||||
readOnly
|
||||
className="w-full p-2 border rounded bg-gray-100 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user