Merge pull request #427 from api-platform/staging

MEP

Author: ginifizz

.github/workflows/deploy.yml

@@ -81,6 +81,7 @@ jobs:
               echo "URL=api-platform.com" >> "$GITHUB_ENV"
               echo 'CORS=["https://api-platform.com", "http://localhost", "https://localhost", "http://localhost:3000"]' >> "$GITHUB_ENV"
               echo "NAMESPACE=prod-website" >> "$GITHUB_ENV"
+              echo "REPLICA=3" >> "$GITHUB_ENV"
           else
               CONTEXT=nonprod
               if [ "$GITHUB_EVENT_NAME" == "pull_request" ]; then
@@ -91,6 +92,7 @@ jobs:
                   export RELEASE_NAME=${{ github.ref_name }}
               fi
               echo "URL=$RELEASE_NAME.apip.preprod-tilleuls.ovh" >> "$GITHUB_ENV"
+              echo "REPLICA=1" >> "$GITHUB_ENV"
               echo "NAMESPACE=nonprod-website" >> "$GITHUB_ENV"
               echo 'CORS=["https://${{ env.RELEASE_NAME}}.apip.preprod-tilleuls.ovh", "http://localhost", "https://localhost", "http://localhost:3000"]' >> "$GITHUB_ENV"
           fi
@@ -126,6 +128,7 @@ jobs:
             --set=pwa.resources.requests.cpu=500m \
             --set=pwa.resources.requests.memory=1400Mi \
             --set=pwa.resources.limits.memory=1400Mi \
+            --set=pwa.replicaCount=${{ env.REPLICA }} \
             --set=bucket.s3Upstream=storage.googleapis.com \
             --set=bucket.s3Name=api-platform-website-v3 \
             --set=service.type=NodePort \
@@ -171,6 +174,7 @@ jobs:
             --set=pwa.resources.requests.cpu=500m \
             --set=pwa.resources.requests.memory=1400Mi \
             --set=pwa.resources.limits.memory=1400Mi \
+            --set=pwa.replicaCount=${{ env.REPLICA }} \
             --set=php.corsAllowOrigin="^$(echo "${{ join(fromJSON(env.CORS), '|') }}" | sed 's/\./\\./g')$" \
             --set=github.key=${{ secrets.gh-key }} \
             --set=next.rootUrl=${{ env.URL }} \

helm/api-platform/templates/pwa-deployment.yaml

@@ -6,7 +6,7 @@ metadata:
     {{- include "api-platform.labelsPWA" . | nindent 4 }}
 spec:
   {{- if not .Values.autoscaling.enabled }}
-  replicas: {{ .Values.replicaCount }}
+  replicas: {{ .Values.pwa.replicaCount }}
   {{- end }}
   selector:
     matchLabels:

helm/api-platform/values.yaml

@@ -20,6 +20,7 @@ php:
     - "192.168.0.0/16"
 
 pwa:
+  replicaCount: 1
   image:
     repository: "chart-example.local/api-platform/pwa"
     pullPolicy: IfNotPresent

pwa/api/con/conferences.ts

@@ -1,11 +1,12 @@
+import { unbreakable } from "./../../utils/index";
 import path from "node:path";
 import matter from "gray-matter";
 import { marked } from "marked";
 import { readFile, readdir } from "node:fs/promises";
 import { sortByStartDate } from "utils/con";
 import { extractHeadingsFromMarkdown } from "utils";
 import { getSpeakerById } from "./speakers";
-import { Conference, Day, Speaker } from "types/con";
+import { Conference, Day, Speaker, Track } from "types/con";
 import { Locale, i18n } from "i18n/i18n-config";
 
 export const getAllConferences = async (
@@ -14,15 +15,15 @@ export const getAllConferences = async (
   locale: Locale
 ) => {
   const slugs = (
-    await readdir(
-      path.join(process.cwd(), `data/con/${edition}/conferences/${locale}`)
-    )
+    await readdir(path.join(process.cwd(), `data/con/${edition}/conferences`))
   )
     .filter((el) => path.extname(el) === ".md")
     .map((slug) => slug.replace(/\.md$/, ""));
 
   return Promise.all(
-    slugs.map((slug) => getConferenceData(edition, slug, false, withSpeakers))
+    slugs.map((slug) =>
+      getConferenceData(edition, slug, false, withSpeakers, locale)
+    )
   );
 };
 
@@ -40,14 +41,9 @@ export const getConferencesBySpeaker = async (
     .sort(sortByStartDate);
 };
 
-export const getAllConferenceSlugs = async (
-  edition = "2022",
-  locale: Locale = i18n.defaultLocale
-) => {
+export const getAllConferenceSlugs = async (edition = "2022") => {
   return (
-    await readdir(
-      path.join(process.cwd(), `data/con/${edition}/conferences/${locale}`)
-    )
+    await readdir(path.join(process.cwd(), `data/con/${edition}/conferences`))
   )
     .filter((el) => path.extname(el) === ".md")
     .map((slug: string) => slug.replace(/\.md$/, ""));
@@ -61,14 +57,12 @@ export const getConferenceData = async (
   locale: Locale = i18n.defaultLocale
 ) => {
   const fileContents = await readFile(
-    path.join(
-      process.cwd(),
-      `data/con/${edition}/conferences/${locale}/${slug}.md`
-    ),
+    path.join(process.cwd(), `data/con/${edition}/conferences/${slug}.md`),
     "utf8"
   );
 
   const days = (await import(`data/con/${edition}/days`)).default;
+  const tracks = (await import(`data/con/${edition}/tracks`)).default;
   // Use gray-matter to parse the post metadata section
   const matterResult = matter(fileContents);
 
@@ -94,8 +88,11 @@ export const getConferenceData = async (
     description: contentHtml,
     url: `/con/${edition}/conferences/${slug}`,
     ...matterResult.data,
-    title: extractHeadingsFromMarkdown(matterResult.content, 1)?.[0],
+    title: unbreakable(
+      extractHeadingsFromMarkdown(matterResult.content, 1)?.[0] || ""
+    ),
     speakers: withSpeakers ? fullSpeakers : speakers,
+    track: tracks.find((track: Track) => track.id === matterResult.data.track),
     day:
       days.length > 1 &&
       days.find((day: Day) => day.date === matterResult.data.date),

pwa/app/(con)/[locale]/con/[edition]/conferences/[slug]/components/ConferencePage.tsx

@@ -15,7 +15,7 @@ interface ConferencePageProps {
 
 const ConferencePageTemplate = ({ conference, day }: ConferencePageProps) => {
   const { title, date, start, end, track, description } = conference;
-  const { t } = useContext(LanguageContext);
+  const { t, locale } = useContext(LanguageContext);
 
   return (
     <div className="container max-w-6xl flex flex-col items-center pt-10 pb-80 before:bg-wave before:absolute before:w-[2000px] before:h-[500px] before:bg-no-repeat before:opacity-30 before:-translate-x-1/2 before:top-[220px] before:left-[65%] | sm:pt-20">
@@ -26,8 +26,8 @@ const ConferencePageTemplate = ({ conference, day }: ConferencePageProps) => {
         <>
           {day ? (
             <p className="uppercase font-light text-xl relative">
-              <strong className="font-bold">{day.title}</strong>
-              {track ? ` - ${t("conferences.track", { track })}` : null}
+              <strong className="font-bold">{day.title?.[locale]}</strong>
+              {track ? ` - ${track.title?.[locale]}` : null}
             </p>
           ) : null}
           {date ? (

pwa/app/(con)/[locale]/con/[edition]/conferences/[slug]/page.tsx

@@ -57,7 +57,7 @@ export async function generateStaticParams({
 }: {
   params: { edition: string; locale: Locale };
 }) {
-  const slugs = await getAllConferenceSlugs(edition, locale);
+  const slugs = await getAllConferenceSlugs(edition);
 
   return slugs.map((slug: string) => ({
     slug,

pwa/app/(con)/[locale]/con/[edition]/schedule/components/Schedule.tsx

@@ -1,18 +1,20 @@
 "use client";
 import SectionTitle from "components/con/common/typography/SectionTitle";
-import { Conference, Day } from "types/con";
+import { Conference, Day, Track } from "types/con";
 import ScheduleDay from "./ScheduleDay";
 import { useContext } from "react";
 import { LanguageContext } from "contexts/con/LanguageContext";
 
 export default function Schedule({
   days,
   conferences,
+  tracks,
 }: {
   days: Day[];
   conferences: Conference[];
+  tracks: Track[];
 }) {
-  const { Translate } = useContext(LanguageContext);
+  const { Translate, locale } = useContext(LanguageContext);
 
   return (
     <div className="relative pt-8 pb-40">
@@ -24,8 +26,9 @@ export default function Schedule({
           {days.map((day: Day) => {
             return (
               <ScheduleDay
-                key={day.title}
+                key={day.title?.[locale]}
                 day={day}
+                tracks={tracks}
                 conferences={conferences.filter(
                   (conference) => conference.date === day.date
                 )}

pwa/app/(con)/[locale]/con/[edition]/schedule/components/ScheduleDay.module.css

@@ -125,9 +125,9 @@
         [time-1900] auto;
     grid-template-columns:
         [times] 3em
-        [track-EN] 1fr
-        [track-FR] 1fr
-        [track-FR-end];
+        [track-1] 1fr
+        [track-2] 1fr
+        [track-2-end];
 }
 .track-header {
     @apply grid bg-blue-gradient bg-blue text-white font-title font-bold uppercase py-2;

pwa/app/(con)/[locale]/con/[edition]/schedule/components/ScheduleDay.tsx

@@ -1,14 +1,20 @@
 "use client";
 import React, { useContext } from "react";
 import { getConferenceDate, sortByStartDate } from "utils/con";
-import { Conference, Day } from "types/con";
+import { Conference, Day, ExtraConference, Track } from "types/con";
 import SlotItem from "./SlotItem";
 import Overline from "components/con/common/typography/Overline";
 import styles from "./ScheduleDay.module.css";
 import classNames from "classnames";
 import { LanguageContext } from "contexts/con/LanguageContext";
 
-function ExtraSlotItem({ conference }: { conference: Conference }) {
+function ExtraSlotItem({ conference }: { conference: ExtraConference }) {
+  const { locale } = useContext(LanguageContext);
+  const title =
+    typeof conference.title === "string"
+      ? conference.title
+      : conference.title[locale];
+
   return (
     <div
       className={classNames(
@@ -19,29 +25,36 @@ function ExtraSlotItem({ conference }: { conference: Conference }) {
         conference.type === "upcoming" && "bg-grey opacity-40"
       )}
     >
-      <span className="h6">{conference.title}</span>
+      <span className="h6">{title}</span>
     </div>
   );
 }
 
 function ScheduleByTrack({
-  track,
+  track: trackId,
   conferences: allConferences,
+  tracks,
 }: {
   track?: string;
   conferences: Conference[];
+  tracks: Track[];
 }) {
-  const { t } = useContext(LanguageContext);
   const conferences = allConferences
-    .filter((conference) => conference.track === track || !conference.track)
+    .filter(
+      (conference) => conference.track?.id === trackId || !conference.track
+    )
     .sort(sortByStartDate);
 
+  const { locale } = useContext(LanguageContext);
+
+  const track = trackId && tracks.find((t) => t.id === trackId);
+
   return (
     <div className="grid-cols-1 gap-1 grid bg-white p-2">
       {track ? (
         <div className={styles["track-header"]}>
           <div className="h5" data-value="day">
-            {t("conferences.track", { track })}
+            {track.title?.[locale]}
           </div>
         </div>
       ) : null}
@@ -61,35 +74,48 @@ function ScheduleByTrack({
 interface ScheduleDayProps {
   day: Day;
   conferences: Conference[];
+  tracks: Track[];
 }
 
-export default function ScheduleDay({ day, conferences }: ScheduleDayProps) {
+export default function ScheduleDay({
+  day,
+  conferences,
+  tracks,
+}: ScheduleDayProps) {
+  const { locale } = useContext(LanguageContext);
   const times = conferences.reduce((acc, conference) => {
     if (!acc.includes(conference.start)) acc.push(conference.start);
     if (!acc.includes(conference.end)) acc.push(conference.end);
     return acc;
   }, [] as string[]);
+
   return day ? (
-    <div className="mb-14 last:mb-0" key={day.title}>
-      <h2 className="text-white font-title text-4xl font-bold">{day.title}</h2>
+    <div className="mb-14 last:mb-0" key={day.title?.[locale]}>
+      <h2 className="text-white font-title text-4xl font-bold">
+        {day.title?.[locale]}
+      </h2>
       <Overline className="text-white/80 py-2">
         {" "}
         {getConferenceDate(day.date)}
       </Overline>
       {day.tracks ? (
         day.tracks.map((track) => (
           <div key={track} className="lg:hidden">
-            <ScheduleByTrack conferences={conferences} track={track} />
+            <ScheduleByTrack
+              conferences={conferences}
+              track={track}
+              tracks={tracks}
+            />
           </div>
         ))
       ) : (
         <div className="lg:hidden">
-          <ScheduleByTrack conferences={conferences} />
+          <ScheduleByTrack conferences={conferences} tracks={tracks} />
         </div>
       )}
       <div className="bg-white my-5 hidden max-w-5xl mx-auto | lg:block">
         {day.single ? (
-          <ScheduleByTrack conferences={conferences} />
+          <ScheduleByTrack conferences={conferences} tracks={tracks} />
         ) : (
           <div className="p-2">
             {day.tracks ? (
@@ -99,15 +125,21 @@ export default function ScheduleDay({ day, conferences }: ScheduleDayProps) {
                   styles["schedule-grid"]
                 )}
               >
-                {day.tracks.map((track) => (
-                  <span
-                    key={track}
-                    style={{ gridColumn: `track-${track}`, gridRow: "tracks" }}
-                    aria-hidden="true"
-                  >
-                    {`Track ${track}`}
-                  </span>
-                ))}
+                {day.tracks.map((trackId) => {
+                  const track = tracks.find((t) => t.id === trackId);
+                  return (
+                    <span
+                      key={trackId}
+                      style={{
+                        gridColumn: `track-${trackId}`,
+                        gridRow: "tracks",
+                      }}
+                      aria-hidden="true"
+                    >
+                      {track?.title[locale]}
+                    </span>
+                  );
+                })}
               </div>
             ) : null}
             <div
@@ -132,8 +164,8 @@ export default function ScheduleDay({ day, conferences }: ScheduleDayProps) {
                     key={`${conference.title} ${conference.start} ${conference.date}`}
                     style={{
                       gridColumn: conference.track
-                        ? `track-${conference.track}`
-                        : "track-EN / track-FR-end",
+                        ? `track-${conference.track.id}`
+                        : "track-1 / track-2-end",
                       gridRow: `time-${conference.start.replace(
                         ":",
                         ""

pwa/app/(con)/[locale]/con/[edition]/schedule/components/SlotAvatar.tsx

@@ -15,11 +15,13 @@ export default function Avatar({ speakers }: { speakers: Speaker[] }) {
           <Image
             key={speaker.name}
             alt=""
-            className="absolute rounded-full -translate-x-1/2 -translate-y-1/2"
+            className="absolute rounded-full -translate-x-1/2 -translate-y-1/2 object-cover"
             src={speaker.image}
             width={getSize(speakers.length)}
             height={getSize(speakers.length)}
             style={{
+              width: `${getSize(speakers.length)}px`,
+              height: `${getSize(speakers.length)}px`,
               left: `${(100 / (speakers.length + 1)) * (index + 1)}%`,
               top: `${(100 / (speakers.length + 1)) * (index + 1)}%`,
             }}