Merge pull request #260 from github/add-language

This pull request enhances the event management system by introducing support for event languages, updating UI components to display the new language field, and removing outdated documentation.

Added a new "language" frontmatter property in several event markdown files
Updated the event list and event detail components to render language information via the Chip component
Updated documentation and issue templates to include the event language field

Author: AndreaGriffiths11

.github/ISSUE_TEMPLATE/add-to-calendar.yml

@@ -57,6 +57,14 @@ body:
     validations:
       required: true
 
+  - id: language
+    type: input
+    attributes:
+      label: Event Language
+      description: "Primary language of the event (e.g., English, Spanish, Mandarin)"
+    validations:
+      required: true
+
   - id: userName
     type: input
     attributes:

CONTRIBUTING.md

@@ -52,6 +52,7 @@ All fields included in the _frontmatter_ are mandatory:
 - `UTCStartTime`: start time in UTC, in `HH:MM` format.
 - `UTCStartTime`: end time in UTC, in `HH:MM` format.
 - `type`: one of the following `podcast`, `stream`, `talk`, `meetup`, `fundraising`, `conference`, `misc`.
+- `language`: primary language of the event (e.g., English, Spanish, Mandarin).
 - `userName`: user name or organization organizing the event.
 - `userLink`: link to user or organization profile.
 - `linkUrl`: Button link with external link to the event.

README-next.md

@@ -1,30 +1,43 @@
 .button-link {
+  background: rgba(255, 255, 255, 0.1);
+  padding: spacing(1.5) spacing(3);
+  border-radius: 100px;
   display: inline-flex;
   align-items: center;
-  column-gap: 10px;
+  column-gap: spacing(1);
+  @extend %subtitle-1;
+  text-decoration: none;
+  color: $white;
+  transition: all 0.2s ease;
 
-  height: spacing(7);
-  padding: 0 spacing(3);
-
-  @extend %body-1;
-
-  @extend %background-filter-white;
-  border-radius: 131px;
-
-  transition: color $simple-fade, background $simple-fade;
+  &:hover {
+    background: $white;
+    color: $purple;
+    transform: translateY(-1px);
+  }
 
-  .icon-arrow-right path {
-    fill: $white;
+  svg path {
+    transition: fill 0.2s ease;
+  }
 
-    transition: fill $simple-fade;
+  &:hover svg path {
+    fill: $purple;
   }
 
-  &:hover {
+  // Special styling for the add event button
+  &.events-list__add-button {
     background: $white;
     color: $purple;
+    font-weight: 600;
 
-    .icon-arrow-right path {
+    svg path {
       fill: $purple;
     }
+
+    &:hover {
+      background: $white;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    }
   }
 }

README-old.md

@@ -5,10 +5,16 @@ const Chip = ({ label, icon, customColor }) => {
     'custom-color': customColor,
   })
 
+  // Check for spoken language indicators
+  const isSpokenLanguage = label.toLowerCase().startsWith('in ') || 
+                          ['english', 'spanish', 'portuguese', 'mandarin', 'french', 'chinese']
+                            .some(lang => label.toLowerCase().includes(lang));
+
   return (
     <div
       className={classes}
       data-location={label.toLowerCase().includes('virtual') ? true : undefined}
+      data-spoken-language={isSpokenLanguage ? true : undefined}
       style={{ backgroundColor: customColor }}
     >
       {icon ? <span className="chip__icon">{icon}</span> : null}

components/button-link/button-link.scss

@@ -1,9 +1,10 @@
 .chip {
   padding: spacing(1) spacing(1.5);
-
   display: inline-flex;
   align-items: center;
   column-gap: 6px;
+  flex-shrink: 0;
+  white-space: nowrap;
 
   background-color: $white;
   @extend %subtitle-1;
@@ -17,9 +18,15 @@
     color: white;
   }
 
+  &[data-spoken-language] {
+    background-color: #9C27B0; // Rich purple for language indicator
+    color: white;
+  }
+
   &__icon {
     height: 18px;
     width: 18px;
+    flex-shrink: 0;
 
     svg {
       height: 100%;

components/chip/Chip.jsx

@@ -1,32 +1,29 @@
 .datetime-chip {
   @extend %subtitle-1;
-
+  display: flex;
+  flex-direction: column;
+  gap: spacing(1);
 
   &__time {
-    position: relative;
-    display: flex;
+    display: inline-flex;
     align-items: center;
-
-    &:not(:last-child) {
-      margin-bottom: spacing(1)
-    }
-    
-    @media (min-width: $md) {
-      margin-bottom: spacing(1.5)
-    }
+    white-space: nowrap;
+    color: $white-80;
   }
 
   &__timezone {
     margin-left: spacing(1);
-
     font-weight: $medium;
     font-size: 12px;
     line-height: 1.6;
-
-    color: $white-80;
+    color: $white-50;
   }
 
   &__icon {
     margin-right: spacing(1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.8;
   }
 }

components/chip/chip.scss

@@ -33,6 +33,7 @@ const EventDetail = ({ event, reverseColumns, isFullPage }) => {
           <div className="event-detail__column">
             <Chip label={event.formattedDate.date} />
             <EventTypeChip type={event.type} />
+            {event.language && <Chip label={event.language} />}
             {event.location && <Chip label={event.location} />}
           </div>
           <DateTimeChip

components/date-time-chip/date-time-chip.scss

@@ -2,17 +2,20 @@
   $self: &;
 
   @extend %grid;
-
   position: relative;
+  width: 100%;
+  min-width: 0;
 
   &__user {
     margin-bottom: spacing(2);
     display: block;
-
     font-family: $inter;
     font-weight: $regular;
     font-size: 1.25rem;
     line-height: 1.4;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     &:hover {
       text-decoration: underline;
@@ -21,6 +24,9 @@
 
   &__title {
     @extend %header-1;
+    margin-bottom: spacing(3);
+    width: 100%;
+    min-width: 0;
 
     &[href]::after {
       content: '';
@@ -42,17 +48,38 @@
     }
   }
 
+  &__chips {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    margin-bottom: spacing(3);
+    overflow-x: auto;
+    padding-bottom: spacing(1);
+    gap: spacing(2);
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    min-width: 0;
+    
+    /* Hide scrollbar for IE, Edge and Firefox */
+    -ms-overflow-style: none;
+    
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    > * {
+      flex-shrink: 0;
+    }
+  }
+
   &__info {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    justify-content: center;
-    row-gap: spacing(4);
-
     width: 100%;
-    height: auto;
+    min-width: 0;
     box-sizing: border-box;
-
     grid-column: 1 / 5;
 
     @media (min-width: $md) {