Add Community section

_data/events.yaml

@@ -0,0 +1,5 @@
+# - name: "ServerSide.swift Conference"
+#   description: "Description Text"
+#   date: YYYY-MM-DD HH:MM:SS
+#   location: "Location Text"
+#   link: "URL"

_data/socials.yaml

@@ -0,0 +1,5 @@
+# - name: "Title Text"
+#   description: "Description Text"
+#   date: YYYY-MM-DD HH:MM:SS
+#   link: "URL"
+#   external: true

_includes/list-element.html

@@ -0,0 +1,16 @@
+<li>
+  <h4>
+    <a target="{% if include.element.external == true %}_blank{% endif %}" href="{{ include.element.link }}">{{ include.element.name }}</a>
+  </h4>
+  <div class="date">
+    <time pubdate datetime="{{ include.element.date | date_to_xmlschema }}">
+      {{ include.element.date | date: "%B %-d, %Y" }}
+    </time>
+    {% if include.element.location and include.element.location != "" %}
+      <span class="location"> - {{ include.element.location }}</span>
+    {% endif %}
+  </div>
+  {% if include.element.description and include.element.description != "" %}
+    <p>{{ include.element.description }}</p>
+  {% endif %}
+</li>

assets/stylesheets/pages/_landing.scss

@@ -145,7 +145,7 @@
   gap: 1rem;
   padding: 0;
 
-  li {
+  & > li {
     border: 1px solid var(--color-fill-tertiary);
     border-radius: var(--border-radius);
     padding: 1rem;
@@ -170,6 +170,229 @@
   }
 }
 
+.community {
+  list-style: none;
+  gap: 1rem;
+  padding: 0;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(2, 1fr);
+
+  p {
+    color: var(--color-secondary-label);
+  }
+
+  @media only screen and (max-width: 767px) {
+    h4 {
+      font-size: 1.25em;
+    }
+  }
+
+  @media (max-width: 1000px) {
+    display: block;
+
+    & > li {
+      margin-bottom: 1rem;
+    }
+  }
+
+  .article-list {
+    flex-grow: 1;
+    padding-bottom: 2rem;
+
+    li {
+      padding-top: 1.6rem;
+
+      &:first-child {
+        p {
+          font-size: 18px;
+        }
+      }
+
+      p {
+        font-size: 16px;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &.connect-only {
+    display: block;
+
+    & > li {
+      display: grid;
+      grid-gap: 20px;
+      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    }
+
+    .article-list {
+      grid-column: span 2;
+    }
+
+    .no-grid {
+      display: block;
+    }
+
+    .link-grid {
+      &.link-grid-only {
+        ul {
+          @media (min-width: 1000px) {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+
+            li {
+              padding-top: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .link-grid {
+    ul {
+      display: block;
+
+      li {
+        padding-top: 1rem;
+
+        a {
+          padding: 1rem 0;
+        }
+      }
+    }
+
+    &.link-grid-small {
+      ul {
+        display: flex;
+        justify-content: flex-end;
+
+        li {
+          padding: 0;
+
+          a {
+            padding: 0;
+            border: 0;
+
+            img {
+              width: 32px;
+              height: 32px;
+            }
+
+            &:hover {
+              background-color: initial;
+
+              img {
+                filter: var(--icon-filter);
+              }
+            }
+
+            &.link-external {
+              &:after {
+                content: none;
+              }
+            }
+
+            span {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  & > li {
+    border: 1px solid var(--color-fill-tertiary);
+    border-radius: var(--border-radius);
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+
+    h3 {
+      line-height: 1.4;
+      font-size: 1.4rem;
+      padding-top: 0;
+    }
+
+    p {
+      flex-grow: 0;
+    }
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+
+    li {
+      padding: 0;
+
+      &:first-child {
+        padding-top: 0;
+
+        h4 {
+          padding-top: .4rem;
+        }
+      }
+
+      p {
+        flex-grow: 0;
+      }
+    }
+  }
+
+  .connect-list {
+    li {
+      padding-top: 2.2rem;
+    }
+  }
+
+  .event-list {
+    li {
+      padding-top: 1.6rem;
+
+      p {
+        font-size: 16px;
+        overflow: hidden;
+        word-break: nowrap;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        text-overflow: ellipsis;
+        margin-bottom: 0;
+      }
+    }
+
+    .location {
+      font-size: 12px;
+      color: var(--color-secondary-label);
+    }
+  }
+
+  img {
+    width: 50px;
+    vertical-align: middle;
+    margin-right: 1rem;
+    filter: var(--icon-filter);
+  }
+
+  h4 {
+    border: 0;
+    padding: 0;
+    margin-bottom: 0;
+  }
+
+  .date {
+    margin-bottom: .4em;
+  }
+
+  time {
+    text-transform: uppercase;
+    font-size: 12px;
+    color: var(--color-figure-gray-tertiary);
+  }
+}
+
 .use-cases {
   @media (min-width: 1000px) {
     grid-template-columns: repeat(2, 1fr);
@@ -180,8 +403,7 @@
   }
 }
 
-.getting-involved,
-.why-swift-list  {
+.getting-involved {
   @media (min-width: 1000px) {
     grid-template-columns: repeat(3, 1fr);
   }

index.md

@@ -89,6 +89,56 @@ atom: true
   </li>
 </ul>
 
+## Community
+
+{% assign socials = site.data.socials %}
+{% assign events = site.data.events | where_exp:"event", "event.date > site.time" %}
+<ul class="community {% unless events.size > 0 %}connect-only{% endunless %}" markdown="1">
+  <li class="{% unless socials.size > 0 and events.size > 0 %}no-grid{% endunless %}">
+    <div>
+      <h3>Connect</h3>
+      <p>Stay up-to-date with the latest in the Swift community.</p>
+    </div>
+    {% if socials.size > 0 %}
+      <ul class="article-list">
+        {%- for social in socials %}
+          {% include list-element.html element=social %}
+        {% endfor %}
+      </ul>
+    {% endif %}
+    <div class="link-grid {% unless socials.size > 0 %}link-grid-only{% endunless %} {% if socials.size > 0 %}link-grid-small{% endif %}">
+      <ul>
+        <li>
+          <a href="/blog/">
+            <img src="/assets/images/icon-swift.svg" /><span>Visit the Swift.org blog</span>
+          </a>
+        </li>
+        <li>
+          <a href="https://forums.swift.org">
+            <img src="/assets/images/icon-discourse.svg" /><span>Visit the Swift forums</span>
+          </a>
+        </li>
+        <li>
+          <a target="_blank" href="https://twitter.com/swiftlang" class="link-external">
+            <img src="/assets/images/icon-x.svg" class="with-invert" /><span>Follow @swiftlang on X</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </li>
+  {% if events.size > 0 %}
+    <li>
+      <h3>Events</h3>
+      <p>Check the upcoming Swift related events.</p>
+      <ul class="event-list">
+        {%- for event in events %}
+          {% include list-element.html element=event %}
+        {% endfor %}
+      </ul>
+    </li>
+  {% endif %}
+</ul>
+
 ## Getting Involved
 
 Everyone is welcome to contribute to Swift. Contributing doesn’t just mean writing code or submitting pull request — there are many different ways for you to get involved, including answering questions on the forums, reporting or triaging bugs, and participating in the Swift evolution process.
@@ -119,16 +169,6 @@ No matter how you want to get involved, we ask that you first learn what’s exp
   </li>
 </ul>
 
-## What's New
-
-Stay up-to-date with the latest in the Swift community.
-
-<div class="links links-list-nostyle" markdown="1">
-  - [Visit the Swift.org blog](/blog/)
-  - [Visit the Swift forums](https://forums.swift.org)
-  - [Follow @swiftlang on X (formerly Twitter)](https://twitter.com/swiftlang){:target="_blank" class="link-external"}
-</div>
-
 <script>
   var featuredSnippets = document.querySelectorAll('.featured-snippet');
   var visibleSnippet = document.querySelector('.featured-snippet.visible');