Deploy and agenda fixes

dddwa · Aug 20, 2024 · 23c9a40 · 23c9a40
1 parent d074278
commit 23c9a40
Show file tree

Hide file tree

Showing 4 changed files with 174 additions and 102 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -48,9 +48,9 @@ jobs:
             - name: Log in with Azure (Federated Credentials)
               run: |
                   azd auth login `
-                    --client-id "$Env:AZURE_CLIENT_ID" `
+                    --client-id "${{ secrets.AUTH_CLIENT_ID }}`
                     --federated-credential-provider "github" `
-                    --tenant-id "$Env:AZURE_TENANT_ID"
+                    --tenant-id "${{ secrets.AUTH_CLIENT_SECRET }}"
               shell: pwsh
 
             - name: Provision Infrastructure

diff --git a/website/app/lib/conference-state.ts b/website/app/lib/conference-state.ts
@@ -4,6 +4,7 @@ import {
     CFPNotOpenYet,
     CFPOpen,
     ConferenceConfig,
+    ConferenceConfigYear,
     ConferenceState,
     ConferenceYear,
     DateTimeRange,
@@ -19,9 +20,11 @@ export function getCurrentConferenceState(
 ): ConferenceState {
     const currentDate = dateTimeProvider.nowDate()
 
-    const [latestConference, previousConference] = (
-        Object.entries(conference.conferences) as Array<[Year, ConferenceYear]>
+    const conferenceList = (Object.entries(conference.conferences) as Array<[Year, ConferenceConfigYear]>).filter(
+        (year): year is [Year, ConferenceYear] => !('cancelledMessage' in year[1]),
     )
+    const [latestConference, previousConference] = conferenceList
+
         .sort(([, a], [, b]) => {
             const dateA = a.conferenceDate?.valueOf() ?? Infinity
             const dateB = b.conferenceDate?.valueOf() ?? Infinity

diff --git a/website/app/routes/_layout.agenda.($year).tsx b/website/app/routes/_layout.agenda.($year).tsx
@@ -29,6 +29,10 @@ export async function loader({ params, context }: LoaderFunctionArgs) {
 
     const yearConfigLookup = (conferenceConfig.conferences as Record<Year, ConferenceConfigYear | undefined>)[year]
     if (!yearConfigLookup || 'cancelledMessage' in yearConfigLookup) {
+        if (!params.year) {
+            throw new Response(JSON.stringify({ message: 'No config for year' }), { status: 404 })
+        }
+
         return redirect($path('/agenda/:year?', { year: undefined }))
     }
 
@@ -120,7 +124,7 @@ export default function Agenda() {
                         '--slot-rows': [
                             '[rooms] auto',
                             ...schedule.timeSlots.map(
-                                (timeSlot) => `[time-${timeSlot.slotStart.replace(/:/g, '')}] 1fr`,
+                                (timeSlot) => `[time-${timeSlot.slotStart.replace(/:/g, '')}] auto`,
                             ),
                         ].join(' '),
                         '--room-columns': [
@@ -167,7 +171,7 @@ export default function Agenda() {
                             zIndex: 1000,
                         }}
                     >
-                        {room.name} - {room.id}
+                        {room.name}
                     </Flex>
                 ))}
 
@@ -177,7 +181,7 @@ export default function Agenda() {
 
                     return (
                         <Fragment key={timeSlot.slotStart}>
-                            <styled.h2 gridColumn="times" gridRow={`time-${timeSlotSimple}`}>
+                            <styled.h2 gridColumn="times" style={{ gridRow: `time-${timeSlotSimple}` }}>
                                 {startTime12}
                             </styled.h2>
 
@@ -195,17 +199,13 @@ export default function Agenda() {
                                         key={room.id}
                                         marginBottom="0"
                                         md={{ marginBottom: 1 }}
-                                        style={
-                                            {
-                                                '--talk-slot': `time-${timeSlotSimple} / time-${endsAtTime?.replace(/:/g, '')}`,
-                                                '--room-column':
-                                                    timeSlot.rooms.length === 1
-                                                        ? `room-${schedule.rooms.at(0)?.id} / room-${schedule.rooms.at(-1)?.id}`
-                                                        : `room-${room.id}`,
-                                            } as React.CSSProperties
-                                        }
-                                        gridRow="var(--talk-slot)"
-                                        gridColumn="var(--room-column)"
+                                        style={{
+                                            gridRow: `time-${timeSlotSimple} / time-${endsAtTime?.replace(/:/g, '')}`,
+                                            gridColumn:
+                                                timeSlot.rooms.length === 1
+                                                    ? `room-${schedule.rooms.at(0)?.id} / room-${schedule.rooms.at(-1)?.id}`
+                                                    : `room-${room.id}`,
+                                        }}
                                     >
                                         <Box
                                             rounded="sm"
@@ -226,10 +226,15 @@ export default function Agenda() {
                                             >
                                                 <a href="#">{fullSession?.title}</a>
                                             </styled.h3>
-                                            <styled.span display="block" color="#C2C2FF">
+                                            <styled.span display="block" color="#C2C2FF" textWrap="nowrap">
                                                 🕓 {startTime12} - {endTime12}
                                             </styled.span>
-                                            <styled.span display="block" color="#C2C2FF">
+                                            <styled.span
+                                                display="block"
+                                                color="#C2C2FF"
+                                                textOverflow="ellipsis"
+                                                textWrap="nowrap"
+                                            >
                                                 📍 {room.name}
                                             </styled.span>
                                             {fullSession?.speakers?.length ? (
@@ -280,8 +285,8 @@ function SponsorSection({ sponsors }: { sponsors: YearSponsors | undefined }) {
         if (!sponsors || sponsors.length === 0) return null
 
         return (
-            <styled.div marginBottom="4">
-                <styled.h2 fontSize="xl" marginBottom="2">
+            <styled.div marginBottom="4" background="white">
+                <styled.h2 marginBottom="3" fontSize="2xl" textAlign="center">
                     {title}
                 </styled.h2>
                 <styled.div display="flex" flexWrap="wrap" justifyContent="space-around" gap="4">

diff --git a/website/panda.config.ts b/website/panda.config.ts
@@ -3,92 +3,156 @@ import { createPreset } from '@park-ui/panda-preset'
 import typographyPreset from 'pandacss-preset-typography'
 
 export default defineConfig({
-  // Whether to use css reset
-  preflight: true,
+    // Whether to use css reset
+    preflight: true,
 
-  // Where to look for your css declarations
-  include: ['./app/routes/**/*.{ts,tsx,js,jsx}', './app/components/**/*.{ts,tsx,js,jsx}'],
-  presets: [
-    typographyPreset(),
-    '@pandacss/preset-base',
-    createPreset({
-      accentColor: 'indigo',
-      grayColor: 'neutral',
-      borderRadius: 'sm',
-    }),
-  ],
+    // Where to look for your css declarations
+    include: ['./app/routes/**/*.{ts,tsx,js,jsx}', './app/components/**/*.{ts,tsx,js,jsx}'],
+    presets: [
+        typographyPreset(),
+        '@pandacss/preset-base',
+        createPreset({
+            accentColor: 'indigo',
+            grayColor: 'slate',
+            borderRadius: 'sm',
+            additionalColors: ['slate'],
+        }),
+    ],
 
-  jsxFramework: 'react',
+    jsxFramework: 'react',
 
-  // Files to exclude
-  exclude: [],
+    // Files to exclude
+    exclude: [],
 
-  // Useful for theme customization
-  theme: {
-    breakpoints: {
-      xxs: '340px',
-      xs: '400px',
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1280px',
-      '1.5xl': '1440px',
-      '2xl': '1536px',
-      '3xl': '1792px',
-      '4xl': '1920px',
-      '5xl': '2100px',
-      '6xl': '2560px',
-    },
-    extend: {
-      tokens: {
-        colors: {
-          '2023-green': { value: '#008554' },
-          '2023-orange': { value: '#F89A1C' },
-          '2023-pink': { value: '#DA459C' },
-          '2023-gray': { value: '#58595B' },
-          '2023-red': { value: '#880007' },
-          '2023-accessible-orange': { value: '#D97F07' },
-          '2023-black': { value: '#1d1d1d' },
-          '2023-white-i': { value: '#FCFCFC' },
-          '2023-white-ii': { value: '#F5F5F5' },
-          '2023-gray-light': { value: '#C8C8C8' },
-          '2023-gray-light-ii': { value: '#EAEAEA' },
-        },
-        fonts: {
-          display: { value: 'Ubuntu, sans-serif' },
-          body: { value: 'Ubuntu, sans-serif' },
-        },
-        sizes: {
-          /** xs: 4 */
-          xs: { value: '4' },
-          /** sm: 8 */
-          sm: { value: '8' },
-          /** md: 16 */
-          md: { value: '16' },
-          /** lg: 24 */
-          lg: { value: '24' },
-          /** xl: 32 */
-          xl: { value: '32' },
-          /** xxl: 40 */
-          xxl: { value: '40' },
-        },
-        zIndex: {
-          '9999': { value: 9999 },
+    // Useful for theme customization
+    theme: {
+        breakpoints: {
+            xxs: '340px',
+            xs: '400px',
+            sm: '640px',
+            md: '768px',
+            lg: '1024px',
+            xl: '1280px',
+            '1.5xl': '1440px',
+            '2xl': '1536px',
+            '3xl': '1792px',
+            '4xl': '1920px',
+            '5xl': '2100px',
+            '6xl': '2560px',
         },
-      },
-      keyframes: {
-        rotateText: {
-          '0%': {
-            transform: 'rotate(0deg)',
-          },
-          '100%': {
-            transform: 'rotate(-360deg)',
-          },
+        extend: {
+            semanticTokens: {
+                colors: {
+                    // Or whatever name you've set as the semantic tokens
+                    // prefix or recipe name
+                    prose: {
+                        body: {
+                            value: '{colors.slate.7}',
+                        },
+                        heading: {
+                            value: '{colors.slate.9}',
+                        },
+                        lead: {
+                            value: '{colors.slate.6}',
+                        },
+                        link: {
+                            value: '{colors.slate.2}',
+                        },
+                        bold: {
+                            value: '{colors.slate.9}',
+                        },
+                        counter: {
+                            value: '{colors.slate.5}',
+                        },
+                        bullet: {
+                            value: '{colors.slate.3}',
+                        },
+                        hrBorder: {
+                            value: '{colors.slate.2}',
+                        },
+                        quote: {
+                            value: '{colors.slate.9}',
+                        },
+                        quoteBorder: {
+                            value: '{colors.slate.2}',
+                        },
+                        caption: {
+                            value: '{colors.slate.5}',
+                        },
+                        kbd: {
+                            value: '{colors.slate.9}',
+                        },
+                        kbdShadow: {
+                            // Expects an RGB value
+                            value: '0 0 0',
+                        },
+                        code: {
+                            value: '{colors.slate.9}',
+                        },
+                        preCode: {
+                            value: '{colors.slate.2}',
+                        },
+                        preBg: {
+                            value: '{colors.slate.8}',
+                        },
+                        thBorder: {
+                            value: '{colors.slate.3}',
+                        },
+                        tdBorder: {
+                            value: '{colors.slate.2}',
+                        },
+                    },
+                },
+            },
+            tokens: {
+                colors: {
+                    '2023-green': { value: '#008554' },
+                    '2023-orange': { value: '#F89A1C' },
+                    '2023-pink': { value: '#DA459C' },
+                    '2023-gray': { value: '#58595B' },
+                    '2023-red': { value: '#880007' },
+                    '2023-accessible-orange': { value: '#D97F07' },
+                    '2023-black': { value: '#1d1d1d' },
+                    '2023-white-i': { value: '#FCFCFC' },
+                    '2023-white-ii': { value: '#F5F5F5' },
+                    '2023-gray-light': { value: '#C8C8C8' },
+                    '2023-gray-light-ii': { value: '#EAEAEA' },
+                },
+                fonts: {
+                    display: { value: 'Ubuntu, sans-serif' },
+                    body: { value: 'Ubuntu, sans-serif' },
+                },
+                // sizes: {
+                //   /** xs: 4 */
+                //   xs: { value: '4' },
+                //   /** sm: 8 */
+                //   sm: { value: '8' },
+                //   /** md: 16 */
+                //   md: { value: '16' },
+                //   /** lg: 24 */
+                //   lg: { value: '24' },
+                //   /** xl: 32 */
+                //   xl: { value: '32' },
+                //   /** xxl: 40 */
+                //   xxl: { value: '40' },
+                // },
+                zIndex: {
+                    '9999': { value: 9999 },
+                },
+            },
+            keyframes: {
+                rotateText: {
+                    '0%': {
+                        transform: 'rotate(0deg)',
+                    },
+                    '100%': {
+                        transform: 'rotate(-360deg)',
+                    },
+                },
+            },
         },
-      },
     },
-  },
 
-  // The output directory for your css system
-  outdir: 'styled-system',
+    // The output directory for your css system
+    outdir: 'styled-system',
 })