Merge branch 'yippe' into remove-tooltip

README.md

@@ -19,6 +19,7 @@ With the docker container running in the background: install dependencies, execu
 2. `pnpm db:generate` (only needed once or when you change schema)
 3. `pnpm db:push` (only needed once to push these changes to the local DB)
 4. `pnpm dev`
+5. `curl http://localhost:3000/api/update-posts` (to seed the DB)
 
 Then, we need to seed the DB. With the app and the docker container running, we'll do it via an API request to our backend to run our DB seed script.
 We'll send a GET request to `http://localhost:3000/api/update-posts` with a header with a key of `Authorization` and a value of `Bearer CRON_SECRET` where `CRON_SECRET` is equal to the secret you put for `CRON_SECRET` in your `.env` file.
@@ -40,5 +41,7 @@ Please feel free to check out our [architecture diagram](./public/og-hunt-diagra
 - System Architect: [Max](https://github.com/maxdemaio)
 - Data Scientist: [TypeSafe](https://github.com/typesafeui)
 - Data Visualization: [Nathan](https://github.com/nathanroark)
+- Senior Lead Frontend Developer: [Jean](https://github.com/Kampouse)
+- Human Resources: [Metalface](https://github.com/metal-face)
 - Scrum Leader: [Aodhan](https://github.com/MVAodhan)
 - Civil Engineering Lead: [Mark](https://github.com/markkhoo)

package.json

@@ -17,6 +17,7 @@
     "check:format": "prettier --check \"**/*.{ts,js,mjs}\""
   },
   "dependencies": {
+    "@next/third-parties": "^14.2.6",
     "@prisma/client": "5.18.0",
     "@vercel/analytics": "^1.3.1",
     "d3": "^7.9.0",

src/app/component/Card.tsx

@@ -1,5 +1,4 @@
 import { UpArrow } from "./icons/UpArrow";
-import Image from "next/image";
 import { ProductPost } from "../types";
 import { Pill } from "./Pill";
 
@@ -13,33 +12,32 @@ export const Card = ({ post, index, homie = false }: CardProps) => {
   const link = new URL(post.url);
   return (
     <a
-      href={`${link.origin}${link.pathname}?utm_source=oghunt.com`}
+      href={`${link.origin}${link.pathname}?ref=oghunt&utm_source=oghunt.com`}
       key={post.id}
       target="_blank"
-      className="group flex cursor-pointer flex-col items-center gap-8 rounded-2xl p-4 duration-300 hover:bg-neutral-300/50 md:flex-row md:p-8 dark:hover:bg-neutral-900"
+      className="group flex w-full cursor-pointer flex-row items-center gap-8 rounded-2xl p-8 duration-300 hover:bg-neutral-300/50 dark:hover:bg-neutral-900"
     >
       {!homie && (
-        <div className="hidden flex-row items-center justify-center gap-4 pb-2 md:flex">
+        <div className="flex flex-row items-center justify-center gap-4 pb-2">
           <div className="rounded-lg border border-neutral-700 p-4 text-xl">#{index + 1}</div>
         </div>
       )}
 
-      {post.thumbnailUrl &&
-        (homie ? (
-          <img src={post.thumbnailUrl} height={100} width={100} className="rounded-lg" alt="logo" />
-        ) : (
-          <Image
-            src={post.thumbnailUrl}
-            height={100}
-            width={100}
-            className="rounded-lg"
-            alt="logo"
-          />
-        ))}
+      <div className="flex">
+        <div className="transition-transform duration-300 group-hover:translate-x-2 md:group-hover:translate-x-0">
+          {post.thumbnailUrl && (
+            <img src={post.thumbnailUrl} className="size-24 rounded-lg" alt="logo" />
+          )}
+        </div>
+      </div>
+
       <div className="flex flex-col items-start gap-2">
-        <h2 className="line-clamp-3 max-w-[69ch] text-2xl font-bold duration-300 group-hover:translate-x-2 group-hover:underline md:text-4xl">
-          {post.name}
-        </h2>
+        <div className="flex gap-2">
+          <h2 className="line-clamp-3 max-w-[69ch] text-2xl font-bold duration-300 group-hover:translate-x-2 group-hover:underline md:text-4xl">
+            {post.name}
+          </h2>
+        </div>
+
         <p className="max-w-[69ch] text-base opacity-60 md:text-lg">{post.tagline}</p>
         <div className="flex flex-wrap gap-2">
           {post.topics &&
@@ -49,7 +47,7 @@ export const Card = ({ post, index, homie = false }: CardProps) => {
       </div>
 
       {!homie && (
-        <div className="ml-auto hidden flex-col items-center rounded-lg border border-neutral-700 px-4 py-2 md:flex">
+        <div className="ml-auto flex flex-col items-center rounded-lg border border-neutral-700 px-4 py-2">
           <UpArrow className="h-12 w-12 stroke-0" gradient />
           <p className="font-bold">{post.votesCount}</p>
         </div>

src/app/component/MobileCard.tsx

@@ -0,0 +1,34 @@
+import { ProductPost } from "../types";
+import { Pill } from "./Pill";
+
+export const MobileCard = ({ post }: { post: ProductPost }) => {
+  const link = new URL(post.url);
+  return (
+    <a
+      href={`${link.origin}${link.pathname}?utm_source=oghunt.com`}
+      key={post.id}
+      target="_blank"
+      className="items-cener group w-full cursor-pointer flex-col gap-8 rounded-2xl duration-300 hover:bg-neutral-300/50 dark:hover:bg-neutral-900"
+    >
+      <div className="flex flex-col items-start gap-2">
+        <div className="flex items-center gap-2">
+          <div className="transition-transform duration-300 group-hover:translate-x-2">
+            {post.thumbnailUrl && (
+              <img src={post.thumbnailUrl} className="size-9 rounded-lg object-cover" alt="logo" />
+            )}
+          </div>
+          <h2 className="max-w-[69ch] truncate text-lg font-bold duration-300 group-hover:translate-x-2 group-hover:underline md:text-2xl">
+            {post.name}
+          </h2>
+        </div>
+
+        <p className="max-w-[69ch] text-sm opacity-60 md:text-base">{post.tagline}</p>
+        <div className="flex flex-wrap gap-2">
+          {post.topics &&
+            post.topics.map(({ id, name }) => <Pill key={`${id}${post.id}`} name={name} />)}
+        </div>
+        <p className="line-clamp-3 max-w-[69ch] text-sm md:text-base">{post.description}</p>
+      </div>
+    </a>
+  );
+};

src/app/component/Pill.tsx

@@ -49,7 +49,7 @@ export const Pill = ({ name }: Props) => {
         color,
         borderColor,
       }}
-      className="rounded-2xl border px-2 py-1 text-sm"
+      className="rounded-2xl border px-1 py-0.5 text-xs md:px-2 md:py-1 md:text-sm"
     >
       {name}
     </span>

src/app/component/SlopMeter.tsx

@@ -1,6 +1,7 @@
 "use client";
 import React, { useEffect, useRef, useState } from "react";
 import * as d3 from "d3";
+import { formatNumber } from "../utils/string";
 
 const useResizeObserver = (ref: React.RefObject<SVGSVGElement>) => {
   const [width, setWidth] = useState<number | null>(null);
@@ -96,16 +97,25 @@ export const SlopMeter: React.FC<RatioBarProps> = ({ propA, propB, nameA, nameB,
       .attr("text-anchor", "start")
       .attr("fill", "black")
       .style("font-weight", "bold")
-      .text(nameA + " • " + propA);
+      .style(
+        "text-shadow",
+        "1px 1px 0px #fda4af, -1px -1px 0px #fda4af, 1px -1px 0px #fda4af, -1px 1px 0px #fda4af",
+      )
+      .text(nameA + " • " + formatNumber(propA));
 
     // Text B (Label on the right side)
     svg
       .append("text")
       .attr("x", containerWidth - 8)
       .attr("y", height / 2 + 5)
       .attr("text-anchor", "end")
+      .style(
+        "text-shadow",
+        "1px 1px 0px black, -1px -1px 0px black, 1px -1px 0px black, -1px 1px 0px black",
+      )
       .classed("font-bold dark:fill-neutral-200 fill-black", true)
-      .text(propB + " • " + nameB);
+      .text(formatNumber(propB) + " • " + nameB);
+
   }, [containerWidth, propA, propB, nameA, nameB, height]);
 
   return (

src/app/globals.css

@@ -27,3 +27,63 @@ body {
     text-wrap: balance;
   }
 }
+/* TODO: someone cook this in tailwind */
+.fancy {
+  --offset: 2px;
+  background: #000;
+  border-radius: 50px;
+  position: relative;
+  height: 50px;
+  color: #fff;
+  text-align: center;
+  width: 300px;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.fancy div {
+  background: transparent;
+  color: white;
+  font-size: 1.25rem;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  font-weight: 700;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+/* Conic gradient */
+.fancy::before {
+  content: "";
+  background: conic-gradient(#fda4af 0% 25%, #fb923c 75% 100%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  aspect-ratio: 1;
+  width: 100%;
+  animation: rotate 2s linear infinite;
+}
+
+/* Overlay */
+.fancy::after {
+  content: "";
+  background: inherit;
+  border-radius: inherit;
+  position: absolute;
+  inset: var(--offset);
+  height: calc(100% - 2 * var(--offset));
+  width: calc(100% - 2 * var(--offset));
+}
+
+@keyframes rotate {
+  from {
+    transform: translate(-50%, -50%) scale(1.4) rotate(0turn);
+  }
+
+  to {
+    transform: translate(-50%, -50%) scale(1.4) rotate(1turn);
+  }
+}

src/app/layout.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { GoogleAnalytics } from "@next/third-parties/google";
 
 import { Inter } from "next/font/google";
 import "./globals.css";
@@ -35,7 +36,10 @@ export default function RootLayout({
         </a>
 
         {children}
+
         <Footer />
+
+        <GoogleAnalytics gaId="G-KBEFKRX31G" />
       </body>
     </html>
   );

src/app/lib/persistence.ts

@@ -7,15 +7,17 @@ import db from "../db";
 import { hasAi } from "../utils/string";
 import { Post as PostType } from "../types";
 import { Prisma } from "@prisma/client";
+import { getStartAndEndOfDayInUTC } from "../utils/date";
 
 export async function getTodaysLaunches() {
+  const { postedAfter, postedBefore } = getStartAndEndOfDayInUTC();
   const posts = (
     await db.post.findMany({
       where: {
         // only get the posts that are the same day as today
         createdAt: {
-          gte: new Date(new Date().setHours(0, 0, 0, 0)),
-          lt: new Date(new Date().setHours(23, 59, 59, 999)),
+          gte: postedAfter,
+          lt: postedBefore,
         },
         deleted: false,
       },