Enhance project configuration and components; add new features for likes, views, and analytics integration

Author: Oleksandr Ratushnyi

.claude/settings.local.json

@@ -6,7 +6,9 @@
       "mcp__context7__resolve-library-id",
       "mcp__context7__query-docs",
       "Bash(npm install:*)",
-      "Bash(npm run lint:*)"
+      "Bash(npm run lint:*)",
+      "Skill(jira-skill)",
+      "Bash(python3:*)"
     ]
   }
 }

next.config.mjs

@@ -10,6 +10,14 @@ const nextConfig = {
         protocol: "https",
         hostname: "react.dev",
       },
+      {
+        protocol: "https",
+        hostname: "upstash.com",
+      },
+      {
+        protocol: "https",
+        hostname: "posthog.com",
+      },
     ],
   },
 };

src/components/LikeButton/LikeButton.module.css

@@ -7,7 +7,7 @@
   border-radius: 6px;
   background-color: var(--N0);
   color: var(--N300);
-  font-size: 0.875rem;
+  font-size: 1.2rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.15s ease;
@@ -29,8 +29,8 @@
 }
 
 .heart {
-  width: 1rem;
-  height: 1rem;
+  width: 1.2rem;
+  height: 1.2rem;
   flex-shrink: 0;
 }
 

src/components/LinkCard/LinkCard.module.css

@@ -1,101 +1,55 @@
 .card {
-  display: flex;
-  flex-direction: column;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
   border: 1px solid var(--N100);
-  border-radius: 12px;
-  overflow: hidden;
+  border-radius: 8px;
   text-decoration: none;
   color: inherit;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-  margin: 2.5rem 0;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+  margin: 0.5rem 0;
 }
 
 .card:hover {
   border-color: var(--N200);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-}
-
-.imageWrapper {
-  position: relative;
-  width: 100%;
-  padding-bottom: 52.5%;
-  background-color: var(--N50);
+  background-color: var(--N20);
 }
 
-.image {
-  object-fit: cover;
+.favicon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  border-radius: 4px;
 }
 
 .content {
-  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
 }
 
 .title {
-  font-size: 1.6rem;
-  font-weight: 600;
-  color: var(--N900);
-  margin: 0 0 0.5rem;
-  line-height: 1.4;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.description {
-  font-size: 1.4rem;
-  color: var(--N600);
-  margin: 0 0 1rem;
-  line-height: 1.5;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--N800);
+  margin: 0;
+  line-height: 1.3;
+  white-space: nowrap;
   overflow: hidden;
-}
-
-.meta {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
+  text-overflow: ellipsis;
 }
 
 .domain {
-  font-size: 1.2rem;
+  font-size: 0.8rem;
   color: var(--N400);
 }
 
 .icon {
-  width: 1.2rem;
-  height: 1.2rem;
-  color: var(--N400);
-}
-
-@media screen and (min-width: 768px) {
-  .card {
-    flex-direction: row;
-    max-height: 160px;
-  }
-
-  .imageWrapper {
-    width: 280px;
-    flex-shrink: 0;
-    padding-bottom: 0;
-    height: 100%;
-    min-height: 160px;
-  }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 1.5rem 2rem;
-  }
-
-  .title {
-    font-size: 1.8rem;
-  }
-
-  .description {
-    -webkit-line-clamp: 3;
-  }
+  width: 1rem;
+  height: 1rem;
+  color: var(--N300);
+  flex-shrink: 0;
+  margin-left: auto;
 }

src/components/LinkCard/LinkCard.tsx

@@ -1,14 +1,11 @@
 import React from "react";
-import Image from "next/image";
 import clsx from "clsx";
 import { FiExternalLink } from "react-icons/fi";
 import styles from "./LinkCard.module.css";
 
 interface ILinkCardProps {
   href: string;
   title: string;
-  description?: string;
-  image?: string;
   className?: string;
 }
 
@@ -21,14 +18,22 @@ function getDomain(url: string): string {
   }
 }
 
+function getFaviconUrl(url: string): string {
+  try {
+    const urlObj = new URL(url);
+    return `https://www.google.com/s2/favicons?domain=${urlObj.hostname}&sz=32`;
+  } catch {
+    return "";
+  }
+}
+
 export const LinkCard = function LinkCard({
   href,
   title,
-  description,
-  image,
   className,
 }: ILinkCardProps) {
   const domain = getDomain(href);
+  const favicon = getFaviconUrl(href);
 
   return (
     <a
@@ -37,25 +42,15 @@ export const LinkCard = function LinkCard({
       rel="noopener noreferrer"
       className={clsx(styles.card, className)}
     >
-      {image && (
-        <div className={styles.imageWrapper}>
-          <Image
-            src={image}
-            alt={title}
-            fill
-            sizes="(max-width: 768px) 100vw, 320px"
-            className={styles.image}
-          />
-        </div>
+      {favicon && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={favicon} alt="" className={styles.favicon} loading="lazy" />
       )}
       <div className={styles.content}>
-        <h4 className={styles.title}>{title}</h4>
-        {description && <p className={styles.description}>{description}</p>}
-        <div className={styles.meta}>
-          <span className={styles.domain}>{domain}</span>
-          <FiExternalLink className={styles.icon} />
-        </div>
+        <span className={styles.title}>{title}</span>
+        <span className={styles.domain}>{domain}</span>
       </div>
+      <FiExternalLink className={styles.icon} />
     </a>
   );
 };

src/components/ViewCounter/ViewCounter.module.css

@@ -3,12 +3,12 @@
   align-items: center;
   gap: 0.375rem;
   color: var(--N300);
-  font-size: 0.875rem;
+  font-size: 1.2rem;
   font-weight: 500;
 }
 
 .icon {
-  width: 1rem;
-  height: 1rem;
+  width: 1.2rem;
+  height: 1.2rem;
   flex-shrink: 0;
 }