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 = {
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
},
};

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

@ -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,6 +77,20 @@ const SharedTheme: React.FC = () => {
};
return (
<>
<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">
@ -137,6 +153,7 @@ const SharedTheme: React.FC = () => {
</div>
</main>
</div>
</>
);
};