Merge pull request #44 from emberborja/dates-refactor

Dates refactor
bluegrass-devs · Aug 18, 2024 · c5ff6b9 · c5ff6b9
2 parents f3c2ee2 + 705fba5
commit c5ff6b9
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 80 deletions.
diff --git a/.gitpod.yml b/.gitpod.yml
@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: npm install && npm run build
+    command: npm run start
+
+
diff --git a/src/app/Footer.tsx b/src/app/Footer.tsx
@@ -1,7 +1,7 @@
 import { FaMeetup, FaCode, FaGithub } from "react-icons/fa6";
 import Link from "next/link";
 
-export default function Footer() {
+export default function Footer({ ticketsUrl = "" }) {
   return (
     <>
       <footer className="py-2 text-sm text-text bg-accent font-montserrat ">
@@ -20,7 +20,7 @@ export default function Footer() {
               About
             </Link>
             <Link
-              href="/Talks"
+              href="/talks"
               className="w-48 my-2 text-center transition duration-150 hover:text-white hover:scale-110"
             >
               Talks
@@ -37,12 +37,14 @@ export default function Footer() {
             >
               Past Talks
             </Link>
-            <a
-              href="https://www.eventbrite.com/e/lextalktech-oct-12-2023-tickets-716404403857"
-              className="w-48 my-2 text-center transition duration-150 hover:text-white hover:scale-110"
-            >
-              Tickets
-            </a>
+            {ticketsUrl && (
+              <Link
+                href={ticketsUrl}
+                className="w-48 my-2 text-center transition duration-150 whitespace-nowrap hover:text-white hover:scale-110"
+              >
+                Tickets
+              </Link>
+            )}
           </div>
           <div className="flex flex-col items-center">
             <div className="flex justify-center w-1/2 gap-4 my-2 text-2xl md:w-1/4">
@@ -66,7 +68,7 @@ export default function Footer() {
               </a>
             </div>
           </div>
-          <span className="text-center">© Copyright 2023</span>
+          <span className="text-center">© Copyright 2024</span>
         </div>
       </footer>
     </>

diff --git a/src/app/Nav.tsx b/src/app/Nav.tsx
@@ -10,7 +10,7 @@ import {
 } from "react-icons/fa6";
 import { useState } from "react";
 
-export default function Nav() {
+export default function Nav({ ticketsUrl='' }) {
   const [menu, setMenu] = useState(false);
   const [aboutMenu, setAboutMenu] = useState(false);
 
@@ -22,10 +22,6 @@ export default function Nav() {
     setAboutMenu(!aboutMenu);
   };
 
-  // having this blank hides the link
-  const ticketURL =
-    "https://www.affinna.com/event/f8142beea26e11ee8fae7facffad2127";
-
   return (
     <nav className="z-20 bg-accent">
       <div className="flex flex-col h-24 text-3xl font-thin lg:flex-row lg:items-center lg:justify-end font-montserrat">
@@ -63,16 +59,16 @@ export default function Nav() {
           <Link href="/past" className="my-4">
             Past Talks
           </Link>
-          {ticketURL && (
-            <a href={ticketURL} className="flex gap-2 my-4">
+          {ticketsUrl && (
+            <a href={ticketsUrl} className="flex gap-2 my-4">
               <FaArrowUpRightFromSquare className="text-xl" />
               Tickets
             </a>
           )}
         </div>
 
         {/* Desktop */}
-        <div className="justify-end hidden w-full gap-8 px-4 lg:flex">
+        <div className={`${ticketsUrl ? 'justify-end ': ''}hidden w-full gap-8 px-8 lg:flex`}>
           <Link
             href="/"
             className="duration-150 border-b-2 border-transparent hover:scale-110 hover:border-text hover:-translate-y-2"
@@ -130,22 +126,15 @@ export default function Nav() {
               </li>
             </ul>
           </div>
-          {/* {ticketURL && (
+          {ticketsUrl && (
             <a
-              href={ticketURL}
-              className="flex gap-2 duration-150 border-b-2 border-transparent hover:scale-110 hover:border-text hover:-translate-y-2"
-            >
-              <FaArrowUpRightFromSquare className="text-xl" />
-              Tickets
-            </a>
-          )} */}
-          <a
-              href="#"
+              href={ticketsUrl}
               className="flex gap-2 duration-150 border-b-2 border-transparent hover:scale-110 hover:border-text hover:-translate-y-2"
             >
               <FaArrowUpRightFromSquare className="text-xl" />
               Tickets
             </a>
+          )}
         </div>
       </div>
     </nav>

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import "aos/dist/aos.css";
 import AOS from "aos";
 import Image from "next/image";
+import { formattedDateConferenceDate } from '../layout';
 
 export default function Past() {
   useEffect(() => {
@@ -41,9 +42,9 @@ export default function Past() {
             <Image
               className="object-contain rounded-lg"
               src="/images/Conference.JPG"
-              alt="Image description"
+              alt="conference presenter speaking to crowd"
               width={800}
-      height={500}
+              height={500}
             />
           </div>
         </div>
@@ -54,7 +55,9 @@ export default function Past() {
           data-aos-duration="2000"
         >
           <div className="mx-auto w-3/4 md:w-1/2 bg-primary ring-secondary shadow-lg shadow-secondary rounded-lg ring p-10 leading-8">
-           We've packed the agenda with a mix of lightning fast 15 minute talks and in-depth 30 minute sessions that will leave you feeling like a tech pro
+            We've packed the agenda with a mix of lightning fast 15 minute talks
+            and in-depth 30 minute sessions that will leave you feeling like a
+            tech pro
           </div>
         </div>
 
@@ -76,9 +79,9 @@ export default function Past() {
             <Image
               className="object-contain rounded-lg"
               src="/images/Conference2.JPG"
-              alt="Image description"
+              alt="conference presenter speaking to crowd"
               width={800}
-      height={500}
+              height={500}
             />
           </div>
         </div>
@@ -89,7 +92,8 @@ export default function Past() {
           data-aos-duration="2000"
         >
           <div className="mx-auto w-3/4 md:w-1/2 bg-primary ring-secondary shadow-lg shadow-secondary rounded-lg ring p-10 leading-8">
-  Expect a lively atmosphere, lots of laughs, and plenty of opportunities to connect with fellow tech enthusiasts
+            Expect a lively atmosphere, lots of laughs, and plenty of
+            opportunities to connect with fellow tech enthusiasts
           </div>
         </div>
 
@@ -102,9 +106,9 @@ export default function Past() {
             <Image
               className="object-contain rounded-lg"
               src="/images/Conference3.JPG"
-              alt="Image description"
+              alt="conference presenter speaking to crowd"
               width={800}
-      height={500}
+              height={500}
             />
           </div>
         </div>
@@ -115,7 +119,8 @@ export default function Past() {
           data-aos-duration="2000"
         >
           <div className="mx-auto w-3/4 md:w-1/2 bg-primary ring-secondary shadow-lg shadow-secondary rounded-lg ring p-10 leading-8">
-            Whether you're a tech novice or a seasoned pro, you'll find something to love at our conference
+            Whether you're a tech novice or a seasoned pro, you'll find
+            something to love at our conference
           </div>
         </div>
 
@@ -125,7 +130,7 @@ export default function Past() {
           data-aos-duration="2000"
         >
           <div className="mx-auto w-3/4 md:w-1/2 bg-primary ring-secondary shadow-lg shadow-secondary rounded-lg ring p-10 leading-8">
-           Don't miss out on this wild ride of technology and good vibes!
+            Don't miss out on this wild ride of technology and good vibes!
           </div>
         </div>
 
@@ -135,7 +140,7 @@ export default function Past() {
           data-aos-duration="2000"
         >
           <div className="mx-auto w-3/4 md:w-1/2 bg-primary ring-secondary shadow-lg shadow-secondary rounded-lg ring p-10 leading-8">
-            January 25, 2024
+            {formattedDateConferenceDate}
           </div>
         </div>
 

diff --git a/src/app/components/Landing.tsx b/src/app/components/Landing.tsx
@@ -6,15 +6,15 @@ import conferenceTalk from "../../../public/images/conferenceTalk.jpg";
 
 type LandingProps = {
   date: Date;
+  formattedDateConferenceDate: string;
+  ticketsUrl: string;
 };
 
-export const Landing: React.FC<LandingProps> = ({ date }: LandingProps) => {
-  const formattedDate = date.toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-  });
-
+export const Landing: React.FC<LandingProps> = ({
+  date,
+  formattedDateConferenceDate,
+  ticketsUrl,
+}: LandingProps) => {
   return (
     <div className="w-screen h-screen-minus-nav ">
       <Image
@@ -34,21 +34,24 @@ export const Landing: React.FC<LandingProps> = ({ date }: LandingProps) => {
             </h1>
             <div className="flex flex-col text-2xl text-center lg:text-3xl lg:my-8">
               <span>A quarterly tech conference in the bluegrass</span>
-              {/* <span className="my-2 font-thin lg:my-4">{formattedDate}</span> */}
-              <span className="my-2 font-thin lg:my-4">November 7th 2024</span>
+              <span className="my-2 font-thin lg:my-4">
+                {formattedDateConferenceDate}
+              </span>
             </div>
-            {/* <Link
-              href="https://www.affinna.com/event/f8142beea26e11ee8fae7facffad2127"
-              className="px-6 py-3 text-2xl duration-150 border border-b-2 rounded-full shadow-xl lg:text-3xl bg-primary/50 border-white/25 backdrop-blur-sm hover:scale-110 hover:border-text hover:-translate-y-2"
-            >
-              Tickets
-            </Link> */}
-            <Link
-                href="/past"
+            {ticketsUrl && (
+              <Link
+                href={ticketsUrl}
                 className="px-6 py-3 text-2xl duration-150 border border-b-2 rounded-full shadow-xl lg:text-3xl bg-primary/50 border-white/25 backdrop-blur-sm hover:scale-110 hover:border-text hover:-translate-y-2"
               >
-                Past Talks
+                Tickets
               </Link>
+            )}
+            <Link
+              href="/past"
+              className="px-6 py-3 text-2xl duration-150 border border-b-2 rounded-full shadow-xl lg:text-3xl bg-primary/50 border-white/25 backdrop-blur-sm hover:scale-110 hover:border-text hover:-translate-y-2"
+            >
+              Past Talks
+            </Link>
           </div>
         </div>
       </div>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -15,16 +15,27 @@ const cabin = Cabin({
   variable: "--font-cabin",
 });
 
-export const metadata = {
-  title: "LexTalk Tech",
-  description: "A quarterly tech conference in the bluegrass",
-};
+// export const metadata = {
+//   title: "LexTalk Tech",
+//   description: "A quarterly tech conference in the bluegrass",
+// };
+
+// old ticket URL -> "https://www.affinna.com/event/f8142beea26e11ee8fae7facffad2127";
+// if ticketURL is empty string then Ticket's links will not show
+export const ticketsUrl = '';
+export const conferenceDate = new Date(2024, 10, 7, 18);
+export const formattedDateConferenceDate = conferenceDate.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const props = {ticketsUrl, conferenceDate, formattedDateConferenceDate}
   return (
     <html
       lang="en"
@@ -34,9 +45,9 @@ export default function RootLayout({
         <link rel="icon" href="/images/favicon.ico" />
       </head>
       <body className="bg-background flex flex-col">
-        <Nav />
+        <Nav {...props} />
         <main className="min-h-screen">{children}</main>
-        <Footer />
+        <Footer {...props} />
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,6 +4,11 @@ import joeTalk from "../../public/images/joeTalk.jpg";
 import { AddressMap } from "./components/AddressMap";
 import { Landing } from "./components/Landing";
 import { ScheduleTable } from "./components/ScheduleTable";
+import {
+  ticketsUrl,
+  conferenceDate,
+  formattedDateConferenceDate,
+} from "../app/layout";
 
 export default function Home() {
   const data = {
@@ -42,23 +47,25 @@ export default function Home() {
         presenter: "",
       },
     ],
-    // Dates are 0 indexed in JavaScript, so October = 9
-    date: new Date(2024, 0, 25, 18),
+    date: conferenceDate,
   };
-
   return (
     <>
       <div className="font-montserrat text-text">
-        <Landing date={data.date} />
+        <Landing
+          date={data.date}
+          ticketsUrl={ticketsUrl}
+          formattedDateConferenceDate={formattedDateConferenceDate}
+        />
         <div className="max-w-screen-xl px-4 mx-auto my-12">
           <div className="flex items-center justify-between w-2/3 my-8">
             <h2 className="text-3xl">Schedule</h2>
-              <Link
-                href="/talks"
-                className="px-6 py-3 text-3xl duration-150 border border-b-2 rounded-full bg-primary/50 border-white/25 backdrop-blur-sm hover:scale-110 hover:border-text hover:-translate-y-2"
-              >
-                Talks
-              </Link>
+            <Link
+              href="/talks"
+              className="px-6 py-3 text-3xl duration-150 border border-b-2 rounded-full bg-primary/50 border-white/25 backdrop-blur-sm hover:scale-110 hover:border-text hover:-translate-y-2"
+            >
+              Talks
+            </Link>
           </div>
           <ScheduleTable data={data.schedule} />
         </div>