Fix link titles, let history items be clickable, add cicd

.gitea/workflows/main.yml

@@ -0,0 +1,52 @@
+name: CI/CD Pipeline
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Use Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '18'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Run linter
+      run: npm run lint
+
+    - name: Build
+      run: npm run build
+
+  docker:
+    needs: build-and-test
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v1
+
+    - name: Login to Gitea Container Registry
+      uses: docker/login-action@v1
+      with:
+        registry: git.dws.rip
+        username: ${{ secrets.GITEA_USERNAME }}
+        password: ${{ secrets.GITEA_PASSWORD }}
+
+    - name: Build and push
+      uses: docker/build-push-action@v2
+      with:
+        context: .
+        push: true
+        tags: git.dws.rip/${{ secrets.GITEA_USERNAME }}/terminaltinder:latest

app/components/HistoryPopup.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
-import { ColorScheme } from '../utils/colorSchemes';
+import { ColorScheme, encodeThemeForUrl } from '../utils/colorSchemes';
 import { generateYAML, generateJSON, generateXResources, generateTOML } from '../utils/exportFormats';
 import Image from 'next/image';
 import ColorPalette from './ColorPalette';
+import { useRouter } from 'next/navigation';
 
 interface HistoryPopupProps {
   likedSchemes: ColorScheme[];
   dislikedSchemes: ColorScheme[];
   onClose: () => void;
-  onClearHistory: () => void;  // Add this line
+  onClearHistory: () => void;
   isDarkMode: boolean;
   outputFormat: string;
 }
@@ -17,10 +18,12 @@ const HistoryPopup: React.FC<HistoryPopupProps> = ({
   likedSchemes, 
   dislikedSchemes, 
   onClose, 
-  onClearHistory,  // Add this line
+  onClearHistory,
   isDarkMode, 
   outputFormat 
 }) => {
+  const router = useRouter();
+
   const handleDownload = (scheme: ColorScheme) => {
     let content: string;
     let fileExtension: string;
@@ -55,19 +58,31 @@ const HistoryPopup: React.FC<HistoryPopupProps> = ({
     URL.revokeObjectURL(url);
   };
 
+  const handleThemeClick = (scheme: ColorScheme) => {
+    const encodedTheme = encodeThemeForUrl(scheme);
+    router.push(`/share/${encodedTheme}`);
+  };
+
   const renderSchemeGrid = (schemes: ColorScheme[], title: string) => (
     <div>
       <h3 className="text-xl font-semibold mb-3">{title}</h3>
       <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-6">
         {schemes.map((scheme, index) => (
-          <div key={`${scheme.name}-${index}`} className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
+          <div 
+            key={`${scheme.name}-${index}`} 
+            className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg cursor-pointer hover:shadow-lg transition-shadow duration-300"
+            onClick={() => handleThemeClick(scheme)}
+          >
             <h3 className="text-sm font-semibold mb-2 truncate">{scheme.name}</h3>
             <ColorPalette 
               colors={Object.values(scheme.colors.normal).concat(Object.values(scheme.colors.bright))}
               size="small"
             />
             <button 
-              onClick={() => handleDownload(scheme)}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleDownload(scheme);
+              }}
               className="w-full bg-blue-500 text-white text-xs py-1 px-2 rounded hover:bg-blue-600 transition-colors duration-300 mt-2"
             >
               Download

app/share/[id]/page.tsx

@@ -14,7 +14,7 @@ import { generateYAML, generateJSON, generateXResources, generateTOML, generateI
 const SharedTheme: React.FC = () => {
   const params = useParams();
   const [scheme, setScheme] = useState<ColorScheme | null>(null);
-  const [codeSample, ] = useState<CodeSample>('javascript');
+  const [codeSample] = useState<CodeSample>('javascript');
   const [outputFormat, setOutputFormat] = useState('yaml');
   const [, setIsDarkMode] = useState(false);
 
@@ -26,6 +26,12 @@ const SharedTheme: React.FC = () => {
     setIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches);
   }, [params.id]);
 
+  useEffect(() => {
+    if (scheme) {
+      document.title = `${scheme.name} - Terminal Tinder Color Scheme`;
+    }
+  }, [scheme]);
+
   if (!scheme) {
     return <div>Loading...</div>;
   }
@@ -76,6 +82,9 @@ const SharedTheme: React.FC = () => {
     URL.revokeObjectURL(url);
   };
 
+  const socialPreviewSvg = DynamicSocialPreview({ scheme });
+  const socialPreviewUrl = `data:image/svg+xml,${encodeURIComponent(socialPreviewSvg as string)}`;
+
   return (
     <>
       <Head>
@@ -83,13 +92,13 @@ const SharedTheme: React.FC = () => {
         <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" content={socialPreviewUrl} />
         <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)}`} />
+        <meta name="twitter:image" content={socialPreviewUrl} />
       </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">
@@ -144,7 +153,7 @@ const SharedTheme: React.FC = () => {
                 <h2 className="text-xl font-semibold mb-2">Share</h2>
                 <input
                   type="text"
-                  value={window.location.href}
+                  value={typeof window !== 'undefined' ? window.location.href : ''}
                   readOnly
                   className="w-full p-2 border rounded bg-gray-100 dark:bg-gray-700 dark:border-gray-600"
                 />