Merge pull request #72 from geeksblabla/2025

2025

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "cSpell.words": ["almaghribi", "Geeksblala's"]
+  "cSpell.words": ["almaghribi", "Geeksblala's", "khouribga"]
 }

app/ticket/[username]/me/page.tsx → app/conf-ticket/[username]/me/page.tsx

@@ -3,11 +3,12 @@ import { getUserInfo } from "@/utils/ticket-service";
 import type { Metadata } from "next";
 
 type Props = {
-  params: { username: string };
-  searchParams: { [key: string]: string | string[] | undefined };
+  params: Promise<{ username: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 };
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
   // read route params
   const { metadata } = await getUserInfo(params.username);
 
@@ -19,7 +20,8 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   return {};
 }
 
-export default async function Page({ params }: Props) {
+export default async function Page(props: Props) {
+  const params = await props.params;
   const { user } = await getUserInfo(params.username);
   return <TicketHero {...user} />;
 }

app/ticket/[username]/page.tsx → app/conf-ticket/[username]/page.tsx

@@ -3,11 +3,12 @@ import { getUserInfo } from "@/utils/ticket-service";
 import type { Metadata } from "next";
 
 type Props = {
-  params: { username: string };
-  searchParams: { [key: string]: string | string[] | undefined };
+  params: Promise<{ username: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 };
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
   // read route params
   const { metadata } = await getUserInfo(params.username);
 
@@ -19,7 +20,8 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   return {};
 }
 
-export default async function Page({ params }: Props) {
+export default async function Page(props: Props) {
+  const params = await props.params;
   const { user } = await getUserInfo(params.username);
   return <TicketHero {...user} url={undefined} />;
 }

app/conf-ticket/image/route.tsx

@@ -0,0 +1,180 @@
+/* eslint-disable @next/next/no-img-element */
+import { ImageResponse } from "next/og";
+import { env } from "process";
+// App router includes @vercel/og.
+// No need to install it.
+
+export const runtime = "edge";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const templateImage =
+    process.env.NEXT_PUBLIC_HOST + "/images/ticket-template.png";
+
+  // ?title=<title>
+  const hasName = searchParams.has("name");
+  const hasLogin = searchParams.has("login");
+  const hasAvatar = searchParams.has("avatar");
+  const hasTicketNumber = searchParams.has("ticketNumber");
+  const name = hasName ? searchParams.get("name") : "Name";
+  const login = hasLogin ? searchParams.get("login") : "";
+  const avatar = hasAvatar ? searchParams.get("avatar") : "";
+  const avatarUrl = avatar === null ? "" : avatar;
+  const ticketNumber = hasTicketNumber ? searchParams.get("ticketNumber") : "";
+  const number =
+    new Array(7 + 1 - (ticketNumber + "").length).join("0") + ticketNumber;
+  if (!login) {
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            display: "flex",
+            fontSize: 60,
+            color: "black",
+            background: "#f6f6f6",
+            width: "100%",
+            height: "100%",
+            paddingTop: 50,
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            textAlign: "center",
+          }}
+        >
+          Ticket dosn&apos;t exist please visit blablaconf.com
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+      }
+    );
+  }
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          display: "flex",
+          fontSize: 60,
+          color: "black",
+          background: "#EFE1C5",
+          width: "100%",
+          height: "100%",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <div
+          style={{
+            position: "relative",
+            display: "flex",
+            width: "100%",
+            height: "520px",
+          }}
+        >
+          <img
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: "contain",
+            }}
+            alt="ticket-template"
+            src={templateImage}
+          />
+          <div
+            style={{
+              display: "flex",
+              position: "absolute",
+              top: 136,
+              left: 120,
+              height: 150,
+              flexDirection: "column",
+            }}
+          >
+            <img
+              width="166"
+              height="166"
+              style={{
+                borderRadius: 10,
+                border: "10px solid #05935B",
+              }}
+              alt="avatar"
+              src={avatarUrl}
+            />
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-start",
+                marginRight: 30,
+              }}
+            >
+              <span
+                style={{
+                  color: "black",
+                  fontWeight: "bold",
+                  fontSize: 30,
+                  maxWidth: 290,
+                }}
+              >
+                {name}
+              </span>
+              <span
+                style={{
+                  color: "black",
+                  textAlign: "right",
+                  fontSize: 24,
+                  marginTop: 0,
+                }}
+              >
+                @{login}
+              </span>
+            </div>
+            <div
+              style={{
+                display: "flex",
+                position: "absolute",
+                top: 10,
+                left: 140,
+                textAlign: "center",
+                padding: 10,
+                transform: "rotate(-40deg) scale(0.9)",
+                borderRadius: 20,
+                border: "3px solid #F25644",
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  borderRadius: 16,
+                  padding: 8,
+                  paddingLeft: 16,
+                  paddingRight: 16,
+                  border: "3px solid #F25644",
+                }}
+              >
+                <span
+                  style={{
+                    color: "#F25644",
+                    // opacity: 0.6,
+                    textAlign: "right",
+                    fontWeight: "900",
+                    fontSize: 40,
+                  }}
+                >
+                  N {number}{" "}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+    }
+  );
+}

app/layout.tsx

@@ -5,13 +5,14 @@ import { GoogleAnalytics } from "@next/third-parties/google";
 import "../styles/globals.css";
 import "sal.js/dist/sal.css";
 import { SalLoader } from "@/components/sal-loader";
+import localFont from "next/font/local";
 
 // import localFont from "@next/font/local";
 
 import { Metadata, Viewport } from "next";
 
 export const viewport: Viewport = {
-  themeColor: "#78543E",
+  themeColor: "#EEE1C5",
   width: "device-width",
   initialScale: 1,
   maximumScale: 1,
@@ -21,19 +22,19 @@ export const viewport: Viewport = {
 // either Static metadata
 export const metadata: Metadata = {
   title: {
-    template: "%s | BlaBlaConf 2024",
-    default: "سوق التيك المغربي | BlaBlaConf 2024",
+    template: "%s | BlaBlaConf 5.0",
+    default: " تكنوفنا  | BlaBlaConf 5.0",
   },
   description:
-    "5+1 Days and 5+1 Tracks covering hottest Technology Trends in Darija",
+    "5+1 Days and 5+1 Tracks covering hottest Technology Trends in Darija - حلاقي التكنولوجيا في جامع الفنا ",
   alternates: {
     canonical: "/",
   },
 
   openGraph: {
-    title: "سوق التيك المغربي | BlaBlaConf 2024",
+    title: " تكنوفنا  | BlaBlaConf 5.0",
     description:
-      "By the Moroccan developer community, for the Moroccan developer community, BlaBla Conf is your one stop shop for latest and hottest technology trends, in Darija, and completely free! Join us from 19th to 24th February",
+      "5+1 Days and 5+1 Tracks covering hottest Technology Trends in Darija - حلاقي التكنولوجيا في جامع الفنا ",
     type: "website",
     locale: "en_IE",
     url: `/`,
@@ -44,7 +45,12 @@ export const metadata: Metadata = {
 const cairo = Cairo({
   weight: ["400", "500", "600", "700"],
   subsets: ["latin"],
-  variable: "--font-jakarta",
+  variable: "--font-cairo",
+});
+
+const muraba = localFont({
+  src: "../styles/Muraba.otf",
+  variable: "--font-muraba",
 });
 
 export default function RootLayout({
@@ -53,14 +59,14 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={`${cairo.variable} `}>
+    <html lang="en" className={`${cairo.variable} ${muraba.variable}`}>
       {/*
         <head /> will contain the components returned by the nearest parent
         head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
       */}
       <head />
       <SalLoader />
-      <body className="bg-gradient-to-b from-[#EFEAE4] via-[#E8DBD0] to-[#EFEAE4]">
+      <body className="bg-[#F1E5CB]">
         <Header />
         {children}
         <Footer />

app/page.tsx

@@ -17,9 +17,10 @@ export default async function Home() {
   return (
     <div>
       <Hero />
-      <Community />
-      <Sponsors />
       <Tracks />
+      <Sponsors />
+      <Community />
+
       <Speakers speakers={speakers} />
       <Agenda days={days} />
       <PreviousSessions />

app/session/[id]/page.tsx

@@ -12,27 +12,28 @@ export async function generateStaticParams() {
   }));
 }
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page(props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
   const session = await getSession(params.id);
   if (session === undefined) {
     return (
       <section className="py-16 px-4  h-screen">session not founded</section>
     );
   }
   return (
-    <section className="py-16">
-      <div className="mx-auto max-w-screen-lg md:max-w-screen-xl md:px-8 px-4">
-        <div className="mx-auto max-w-screen-lg md:max-w-screen-xl md:px-8 px-4 min-h-[200px] md:min-h-[400px] text-gradient">
+    <section className="py-16 text-[#061431] min-h-[calc(100vh-150px)]">
+      <div className="mx-auto md:flex-row flex flex-col max-w-screen-lg md:max-w-screen-xl md:px-8 px-4">
+        <div className=" flex-1 mx-auto pt-10 max-w-screen-lg md:max-w-screen-xl md:px-8 px-4 min-h-[200px] md:min-h-[400px] text-gradient">
           <SessionTime session={session} showDay />
-          <h2 className="mb-4 text-3xl font-bold md:mb-6 md:text-4xl capitalize ">
+          <h2 className="mb-4 text-3xl font-bold md:mb-6 md:text-4xl capitalize text-gray-700 ">
             {session.title}{" "}
           </h2>
           <p className="mb-12 text-lg font-medium text-gray-600 leading-normal">
             <Text text={session.description} />
           </p>
           <AddToCalendar session={session} type="text" />
         </div>
-        <div className=" mx-auto max-w-screen-lg md:max-w-screen-xl md:px-8 px-4 py-6 my-8 border-b-gray-200 border-solid border-b-[1px]">
+        <div className=" md:w-1/3 w-full mx-auto rounded-xl max-w-screen-lg md:max-w-screen-xl md:px-8 px-4 py-6 my-8 bg-[#E9D1AD] border-b-gray-200 border-solid border-b-[1px]">
           <p className="text-black font-semibold pb-3"> Speaker(s) </p>
 
           {session?.speakers &&
@@ -41,15 +42,15 @@ export default async function Page({ params }: { params: { id: string } }) {
                 <div className="flex flex-row items-center ">
                   <Image
                     src={speaker.profilePicture}
-                    className="w-16 h-16 rounded-full"
+                    className="w-24 h-24 border-2 border-white rounded-md"
                     width="64"
                     height="64"
                     alt={speaker.fullName}
                   />
-                  <p className="pl-4 font-bold text-gradient">
+                  <p className="pl-4 text-2xl font-bold ">
                     {speaker.fullName}
                     <br />
-                    <span className="font-normal text-sm ">
+                    <span className="font-normal leading-[0.5rem] text-base ">
                       {speaker.tagLine}{" "}
                     </span>
                   </p>
@@ -58,7 +59,7 @@ export default async function Page({ params }: { params: { id: string } }) {
                 <p className="py-3">
                   <Text text={speaker.bio} />{" "}
                 </p>
-                <div className="flex w-fit text-black">
+                <div className="flex w-fit text-[#061431]">
                   <Links links={speaker.links || []} />
                 </div>
               </div>