dubey/TerminalTinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add social preview, fix share page

Browse Source
This commit is contained in:
Tanishq Dubey 2024-09-10 14:41:05 -04:00
parent 601f89352d
commit e8af04d0a9
3 changed files with 146 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
app/components/DynamicSocialPreview.tsx Normal file
View 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;

21
app/layout.tsx
View File

@ -15,9 +15,24 @@ const geistMono = localFont({
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Terminal Tinder", title: "Terminal Tinder",
description: "Generate and discover terminal color schemes", description: "Fall in love with your next color scheme",
icons: { openGraph: {
icon: '/app-icon.svg', 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
}, },
}; };

133
app/share/[id]/page.tsx
View File

@ -3,9 +3,11 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useParams } from 'next/navigation'; import { useParams } from 'next/navigation';
import Image from 'next/image'; import Image from 'next/image';
import Head from 'next/head';
import { ColorScheme, decodeThemeFromUrl } from '../../utils/colorSchemes'; import { ColorScheme, decodeThemeFromUrl } from '../../utils/colorSchemes';
import ColorPalette from '../../components/ColorPalette'; import ColorPalette from '../../components/ColorPalette';
import CodePreview from '../../components/CodePreview'; import CodePreview from '../../components/CodePreview';
import DynamicSocialPreview from '../../components/DynamicSocialPreview';
import { CodeSample } from '../../utils/types'; import { CodeSample } from '../../utils/types';
import { generateYAML, generateJSON, generateXResources, generateTOML, generateITerm2, generateWindowsTerminal, generateTerminalApp } from '../../utils/exportFormats'; import { generateYAML, generateJSON, generateXResources, generateTOML, generateITerm2, generateWindowsTerminal, generateTerminalApp } from '../../utils/exportFormats';
@ -75,68 +77,83 @@ const SharedTheme: React.FC = () => {
}; };
return ( 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"> <Head>
<div className="flex items-center"> <title>{`${scheme.name} - Terminal Tinder Color Scheme`}</title>
<Image src="/app-icon.svg" alt="App Icon" width={32} height={32} className="mr-2" /> <meta name="description" content={`Check out this beautiful color scheme: ${scheme.name}`} />
<div> <meta property="og:title" content={`${scheme.name} - Terminal Tinder Color Scheme`} />
<h1 className="text-lg font-bold">TerminalTinder</h1> <meta property="og:description" content={`Check out this beautiful color scheme: ${scheme.name}`} />
<p className="text-xs">Fall in love with your next color scheme</p> <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>
</div> </header>
</header> <main className="pt-16 px-4 sm:px-6 lg:px-8">
<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="max-w-3xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden"> <div className="p-8">
<div className="p-8"> <h1 className="text-3xl font-bold mb-4">{scheme.name}</h1>
<h1 className="text-3xl font-bold mb-4">{scheme.name}</h1> <div className="mb-6">
<div className="mb-6"> <h2 className="text-xl font-semibold mb-2">Color Palette</h2>
<h2 className="text-xl font-semibold mb-2">Color Palette</h2> <ColorPalette
<ColorPalette colors={Object.values(scheme.colors.normal).concat(Object.values(scheme.colors.bright))}
colors={Object.values(scheme.colors.normal).concat(Object.values(scheme.colors.bright))} size="large"
size="large" />
/> </div>
</div> <div className="mb-6">
<div className="mb-6"> <h2 className="text-xl font-semibold mb-2">Code Preview</h2>
<h2 className="text-xl font-semibold mb-2">Code Preview</h2> <CodePreview scheme={scheme} codeSample={codeSample} />
<CodePreview scheme={scheme} codeSample={codeSample} /> </div>
</div> <div className="mb-6">
<div className="mb-6"> <h2 className="text-xl font-semibold mb-2">Download</h2>
<h2 className="text-xl font-semibold mb-2">Download</h2> <div className="flex items-center space-x-4">
<div className="flex items-center space-x-4"> <select
<select value={outputFormat}
value={outputFormat} onChange={(e) => setOutputFormat(e.target.value)}
onChange={(e) => setOutputFormat(e.target.value)} className="p-2 border rounded dark:bg-gray-700 dark:border-gray-600"
className="p-2 border rounded dark:bg-gray-700 dark:border-gray-600" >
> <option value="yaml">YAML (Alacritty)</option>
<option value="yaml">YAML (Alacritty)</option> <option value="json">JSON</option>
<option value="json">JSON</option> <option value="xresources">XResources</option>
<option value="xresources">XResources</option> <option value="toml">TOML (Alacritty)</option>
<option value="toml">TOML (Alacritty)</option> <option value="iterm2">iTerm2</option>
<option value="iterm2">iTerm2</option> <option value="windows-terminal">Windows Terminal</option>
<option value="windows-terminal">Windows Terminal</option> <option value="terminal-app">Terminal.app</option>
<option value="terminal-app">Terminal.app</option> </select>
</select> <button
<button onClick={handleDownload}
onClick={handleDownload} className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors duration-300"
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors duration-300" >
> Download
Download </button>
</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> </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>
</div> </main>
</main> </div>
</div> </>
); );
}; };