#78 - add 24 meetup data (#79)

* wip

* Add header to meetups page

* Work on search bar and buttons

* wip

* Design of meetups table

* Design of SortButton

* Separate check icon

* Design headers

* wip

* Design of filter and sort buttons

* Design of filter and sort buttons

* Padding :)

* Expand clickable button area on mobile

* wip

* Rounded buttons

* Add 24 meetup data

* Add new speaker

* Add minimalized images

* #78 - fix typo and add links to YouTube

---------

Co-authored-by: EwelinaSkrzypacz <[email protected]>

backend/ValueObjects/Meetup.php

@@ -19,6 +19,7 @@ public function __construct(
         public readonly string $name,
         public readonly ?string $location = null,
         public readonly ?Carbon $date = null,
+        public readonly ?string $signUpLink = null,
         public readonly ?string $facebook = null,
         public readonly Collection $presentations = new Collection(),
     ) {
@@ -31,6 +32,7 @@ public function toListedEntry(): array
             "id" => $this->id,
             "name" => $this->name,
             "location" => $this->location,
+            "signUpLink" => $this->signUpLink,
             "date" => $this->date->format("Y-m-d H:i:s"),
             "dateFull" => $this->date->isoFormat("LL, LT"),
             "presentations" => $this->presentations->map(fn(Presentation $presentation): array => $presentation->toMeetupEntry()),
@@ -46,6 +48,7 @@ public function toDetailedEntry(): array
             "location" => $this->location,
             "date" => $this->date->format("Y-m-d H:i:s"),
             "dateFull" => $this->date->isoFormat("LL, LT"),
+            "signUpLink" => $this->signUpLink,
             "presentations" => $this->presentations->map(fn(Presentation $presentation): array => $presentation->toMeetupEntry()),
             "facebook" => $this->facebook,
         ];

backend/ValueObjects/Person.php

@@ -15,6 +15,7 @@ public function __construct(
         public readonly string $id,
         public readonly string $name,
         public readonly ?string $image = null,
+        public readonly ?string $imageMin = null,
         public readonly ?string $bio = null,
         public readonly ?string $linkedin = null,
         public readonly Collection $meetups = new Collection(),
@@ -29,6 +30,7 @@ public function toListedEntry(): array
             "name" => $this->name,
             "slug" => $this->slug,
             "image" => $this->image,
+            "imageMin" => $this->imageMin,
             "bio" => $this->bio,
             "linkedin" => $this->linkedin,
             "avatar" => "https://ui-avatars.com/api/?background=random&font-size=.33&size-128&rounded=true&name=" . str_replace(" ", "-", $this->name),
@@ -42,6 +44,7 @@ public function toMeetupListEntry()
             "name" => $this->name,
             "slug" => $this->slug,
             "image" => $this->image,
+            "imageMin" => $this->imageMin,
             "bio" => $this->bio,
             "linkedin" => $this->linkedin,
             "avatar" => "https://ui-avatars.com/api/?background=random&font-size=.33&size-128&rounded=true&name=" . str_replace(" ", "-", $this->name),

backend/ValueObjects/Speaker.php

@@ -17,6 +17,7 @@ public function toMeetupDetailsEntry(): array
             "id" => $this->person->id,
             "name" => $this->person->name,
             "image" => $this->person->image,
+            "imageMin" => $this->person->imageMin,
             "slug" => $this->person->slug,
             "avatar" => "https://ui-avatars.com/api/?background=random&font-size=.33&size-128&rounded=true&name=" . str_replace(" ", "-", $this->person->name),
             "linkedin" => $this->person->linkedin,

backend/builder.php

@@ -36,6 +36,7 @@ function mapData(Collection $people, Collection $companies, Collection $meetups)
         id: $person["id"],
         name: $person["name"],
         image: $person["image"] ?? "",
+        imageMin: $person["imageMin"] ?? "",
         bio: $person["bio"] ?? "",
         linkedin: $person["linkedin"] ?? "",
     ));
@@ -54,6 +55,7 @@ function mapData(Collection $people, Collection $companies, Collection $meetups)
     $meetups = $meetups->map(fn(array $meetup): Meetup => new Meetup(
         name: $meetup["name"],
         location: $meetup["location"] ?? "",
+        signUpLink: $meetup["signUpLink"] ?? "",
         date: isset($meetup["date"]) ? Carbon::parse($meetup["date"])->locale("pl_PL") : null,
         facebook: $meetup["facebook"] ?? null,
         presentations: Collection::make($meetup["presentations"])->map(

frontend/components/Landing/MeetupIndicator.vue

@@ -35,7 +35,7 @@ const computedNextMeetup = computed(() => {
         </p>
         <div class="mt-8">
           <div class="block gap-4 rounded-md tracking-wide shadow sm:block md:block lg:w-3/5">
-            <a href="https://www.subscribepage.com/lpm23?fbclid=IwAR2mdIHtj7U2kCAlRMzpzbenpyKdO6HkdMsXTeFjzBm1lypc5oOwmsIfSzI" class="bg-laravel my-3 flex items-center justify-center rounded-md border border-transparent px-8 py-3 text-xl font-bold text-white duration-300 hover:scale-105 hover:bg-red-800" target="_blank" rel="noopener">Zapisz się!</a>
+            <a :href="computedNextMeetup.signUpLink" class="bg-laravel my-3 flex items-center justify-center rounded-md border border-transparent px-8 py-3 text-xl font-bold text-white duration-300 hover:scale-105 hover:bg-red-800" target="_blank">Zapisz się!</a>
             <router-link :to="{ name: 'meetups' }" class="flex items-center justify-center rounded-md border border-transparent bg-zinc-100 px-5 py-3 text-base font-medium text-zinc-900 duration-300 hover:scale-105 hover:bg-zinc-300">
               Poprzednie meetupy
             </router-link>

frontend/components/Meetup/MeetupHeader.vue

@@ -35,9 +35,6 @@ defineProps({
       </div>
       <div class="flex justify-center text-zinc-500 sm:text-2xl">
         <a :href="meetup.facebookEvent" target="_blank" rel="noopener" class="flex justify-center space-x-5">
-          <span class="hidden sm:flex">
-            Sprawdź wydarzenie na Facebooku! 
-          </span>
           <facebook-icon :href="meetup.facebook" class="h-6 w-6 self-center"/>
         </a>
       </div>

frontend/components/Meetups/MeetupsList.vue

@@ -28,8 +28,8 @@ const findNextMeetup = computed(() => {
 
 const meetupSpeakers = ( meetup ) => {
   let setSpeakers = new Set()
-  meetup.presentations.forEach(({ speakers }) => speakers.forEach(({ name, avatar, image }) => 
-    setSpeakers.add({ name: name, avatar: avatar, image:image }),
+  meetup.presentations.forEach(({ speakers }) => speakers.forEach(({ name, avatar, imageMin }) => 
+    setSpeakers.add({ name: name, avatar: avatar, image:imageMin }),
   ))
   return setSpeakers
 }

frontend/components/Meetups/SortButton.vue

@@ -55,7 +55,7 @@ onMounted(() => {
           <ListboxButton>
             <div class="cursor-pointer">
               <div class="text-zinc-600 md:hidden">
-                <bars-arrow-up-icon v-if="sortBy.name === 'oldestFirst'" class="h-7 w-7 "/>
+                <bars-arrow-up-icon v-if="sortBy.name === 'oldestFirst'" class="h-7 w-7"/>
                 <bars-arrow-down-icon v-else class="h-7 w-7"/>
               </div>
               <div class="hidden h-12 w-full items-center space-x-3 rounded-md border border-zinc-300 bg-zinc-100 py-2 px-4 focus:border-zinc-300 focus:outline-none sm:text-sm md:flex">

frontend/components/People/PeopleList.vue

@@ -51,8 +51,8 @@ const sortedUpdatedSpeakers = (speakers) => {
       <tr v-for="speaker in speakersToRender" :key="speaker.id" class="group hover:bg-zinc-100">
         <td class="justify-fit whitespace-nowrap py-3.5 pl-4 pr-3 text-sm font-medium text-zinc-900 sm:py-3 sm:pl-6">
           <router-link :to="{ name: 'people.details', params: { id: speaker.slug } }" class="w-full focus:z-10">
-            <img v-if="!speaker.image.length" :src="speaker.avatar" class="h-8 w-8 rounded-full md:h-12 md:w-12" alt="awatar prelegenta">
-            <img v-else :src="speaker.image" class="h-8 w-8 rounded-full md:h-12 md:w-12" :alt="'zdjęcie prelegenta ' + speaker.name">
+            <img v-if="!speaker.imageMin.length" :src="speaker.avatar" class="h-8 w-8 rounded-full md:h-12 md:w-12" alt="awatar prelegenta">
+            <img v-else :src="speaker.imageMin" class="h-8 w-8 rounded-full md:h-12 md:w-12" :alt="'zdjęcie prelegenta ' + speaker.name">
           </router-link>
         </td>
         <td class="whitespace-nowrap py-3.5 pl-4 pr-1 text-left text-sm font-semibold text-zinc-500 sm:text-base md:text-lg">

frontend/pages/People.vue

@@ -7,8 +7,8 @@ import LoadingSpinner from '@/components/Icons/LoadingSpinner.vue'
 
 const people = ref([])
 const meetups = ref([])
-let error = ref(false)
-let loading = ref(true)
+const error = ref(false)
+const loading = ref(true)
 
 onMounted(() => {
   async function fetchPeople () {
@@ -36,7 +36,6 @@ onMounted(() => {
 
   loading.value = false
 })
-
 </script>
 
 <template>

resources/companies.json

@@ -188,5 +188,19 @@
       "lat": 52.22383532611707,
       "lng": 20.988013253972873
     }
+  },
+  "@escola": {
+    "id": "14",
+    "name": "Escola",
+    "logo": "/images/companies/escola.webp",
+    "location": "Warszawa",
+    "bio": "Rozumiemy, że każdy projekt jest inny i wymaga indywidualnego podejścia. Wiemy co musimy zrobić, aby projekt odniósł sukces. Stosujemy pięcioetapowy model design thinking. Skupiamy się przede wszystkim na dostrzeżeniu perspektywy użytkownika, zrozumieniu jego potrzeb i zarazem realizujemy Twój cel biznesowy.",
+    "website": "https://escola.pl/",
+    "linkedin": "https://www.linkedin.com/company/escola-s-a/",
+    "organizer": false,
+    "coordinates": { 
+      "lat": 52.23794439364628,
+      "lng": 20.98952060000376
+    }
   }
 }

resources/meetups/2023-06-06-laravel-poland-meetup-24.json

@@ -0,0 +1,55 @@
+{
+  "name": "Laravel Poland Meetup #24",
+  "date": "2023-06-06 18:00:00",
+  "location": "online",
+  "organizers": ["@blumilk", "@amsterdamstandard"],
+  "facebook": "https://www.facebook.com/events/189043327381947",
+  "signUpLink": "https://subscribepage.io/UrOF0T",
+  "presentations": [
+    {
+      "title": "Coupling w Laravelu - jak odzyskać zdrowe relacje ze swoim kodem?",
+      "youtube": "https://www.youtube.com/watch?v=4ZxuEN6VFA8",
+      "slideshare": "",
+      "slideshareEmbed": "",
+      "blurb": "Marcin przybliży Wam temat couplingu w Laravelu, czyli jak odzyskać zdrowe relacje ze swoim kodem. Przybliży Wam, czym jest coupling i dlaczego Twój kod może być trudny w rozwijaniu. Nauczy, jak pracować z parametrami i jak tworzyć kod niezależny od frameworka, nadal będąc w dobrej relacji z Laravelem.",
+      "speakers": [
+        {
+          "person": "@marcinlenkowski",
+          "company": "@escola"
+        }
+      ],
+      "links": [],
+      "tags": ["coupling", "architektura"]
+    },
+    {
+      "title": "Saloon - integracja z API nigdy nie była tak prosta",
+      "youtube": "https://www.youtube.com/watch?v=HbPNKbbaMgU",
+      "slideshare": "",
+      "slideshareEmbed": "",
+      "blurb": "Prezentacja Kamila będzie o Saloon - paczce dla Laravela, która sprawia, że integracja z API nigdy nie była tak prosta. Kamil opowie Wam, jak Saloon może ułatwić tworzenie integracji z zewnętrznymi API i jakie podstawowe funkcjonalności nam dostarcza.",
+      "speakers": [
+        {
+          "person": "@kamilpiech",
+          "company": "@blumilk"
+        }
+      ],
+      "links": [],
+      "tags": ["saloon", "integracja", "api"]
+    },
+    {
+      "title": "Budowa nowoczesnego monolitu z wykorzystaniem Inertia.js i TypeScript",
+      "youtube": "https://www.youtube.com/watch?v=lmvaVmVYY0w",
+      "slideshare": "",
+      "slideshareEmbed": "",
+      "blurb": "Aleksander opowie o wykorzystaniu Inertii i TypeScriptu w budowaniu nowoczesnej apki.",
+      "speakers": [
+        {
+          "person": "@aleksandertabor",
+          "company": "@amsterdamstandard"
+        }
+      ],
+      "links": [],
+      "tags": ["inertiajs", "typescript"]
+    }
+  ]
+}