Packages page

.gitignore

@@ -10,8 +10,9 @@ xcuserdata
 # Built site content.
 /_site
 
-# Jekyll metadata
+# Temporary Jekyll files
 .jekyll-metadata
+.jekyll-cache
 
 # Asset Cache
 .asset-cache

_config.yml

@@ -3,7 +3,7 @@ title: Swift.org
 description: "Swift is a general-purpose programming language built using a modern approach to safety, performance, and software design patterns."
 timezone: America/Lower_Princes
 exclude: ["README.md", "config.ru", "Gemfile", "Gemfile.lock", "Procfile", "vendor"]
-safe: true
+safe: false
 future: true
 
 kramdown:

_data/navigation.yml

@@ -37,6 +37,15 @@
           name: snapshots
         - title: Installing Swift
           name: installing-swift
+    - title: Packages
+      url: /packages/
+      sections:
+        - title: Package Ecosystem
+          name: package-ecosystem
+        - title: Create Your Own
+          name: create-your-own
+        - title: Advanced Search
+          name: advanced-search
     - title: Platform Support
       url: /platform-support/
       sections:

_plugins/package-categories.rb

@@ -0,0 +1,17 @@
+module Jekyll
+  class PackageCategoriesGenerator < Generator
+    def generate(site)
+      # Generate one file per category for the Packages sub-pages
+      site.data.dig('packages', 'packages', 'categories').each do |category|
+        category_page = PageWithoutAFile.new(site, site.source, "packages", "#{category['slug']}.md")
+        category_page.data = {
+          # Front matter
+          'layout' => 'page',
+          'title' => category['name']
+        }
+        category_page.content = "{% include_relative _package-list.html category_slug=\"#{category['slug']}\" %}"
+        site.pages << category_page
+      end
+    end
+  end
+end

assets/stylesheets/_pages.scss

@@ -1,3 +1,4 @@
 @import "pages/landing";
 @import "pages/getting-started";
 @import "pages/swift-evolution";
+@import "pages/packages";

assets/stylesheets/pages/_landing.scss

@@ -36,7 +36,7 @@
     grid-template-columns: repeat(1, 1fr);
 
     @media (min-width: 1000px) {
-      grid-template-columns: repeat(3, 1fr);
+      grid-template-columns: repeat(4, 1fr);
     }
   }
 

assets/stylesheets/pages/_packages.scss

@@ -0,0 +1,196 @@
+.category-list {
+  list-style: none;
+  padding-left: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+
+  @media only screen and(max-width: 767px) {
+    grid-template-columns: 1fr;
+  }
+
+  li {
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+
+    p {
+      color: var(--color-text);
+    }
+
+    h3 {
+      line-height: 1.4;
+      font-size: 1.4rem;
+      padding-top: 0;
+    }
+
+    &.category {
+      border: 1px solid var(--color-fill-tertiary);
+      border-radius: 4px;
+
+      h3 {
+        color: var(--color-link);
+      }
+
+      a:hover {
+        text-decoration: none;
+
+        h3 {
+          text-decoration: underline;
+        }
+
+        p {
+          color: var(--color-secondary-label);
+        }
+      }
+    }
+
+    @media only screen and(min-width: 767px) {
+      &:first-child {
+        grid-column: span 2;
+      }
+    }
+  }
+}
+
+.package-list {
+  nav {
+    padding-bottom: 20px;
+
+    a[rel="parent"]::before {
+      content: "← ";
+    }
+  }
+
+  ul {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 50px 40px;
+    padding: 30px 0;
+    list-style: none;
+
+    @media only screen and(max-width: 767px) {
+      grid-template-columns: 1fr;
+    }
+
+    li {
+      display: grid;
+
+      &.with-note {
+        grid-template-rows: 5fr 1fr;
+        gap: 5px;
+      }
+
+      > a {
+        display: flex;
+        flex-direction: column;
+        color: inherit;
+        height: 100%;
+
+        &:hover {
+          text-decoration: none;
+
+          h4 {
+            background-image: url("/assets/images/icon-external-color.svg");
+
+            .name {
+              color: var(--color-link);
+              text-decoration: underline;
+            }
+          }
+        }
+      }
+
+      h4 {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        padding-top: 10px;
+        background-image: url("/assets/images/icon-external.svg");
+        background-repeat: no-repeat;
+        background-size: 15px;
+        background-position: top 15px right;
+
+        .name {
+          padding-right: 20px;
+        }
+
+        .owner {
+          font-size: 16px;
+        }
+      }
+
+      .description {
+        flex-grow: 1;
+        font-size: 16px;
+
+        > p {
+          // Even though this looks specific to WebKit, it works in Safari, Chrome, and Firefox.
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 6;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+
+      .metadata {
+        display: grid;
+        grid-template-columns: auto auto 1fr auto;
+        gap: 10px;
+
+        .lozenge {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 4px;
+          border: 1px black solid;
+          font-size: 12px;
+          line-height: 1;
+          white-space: nowrap;
+
+          > span {
+            padding: 4px 5px;
+          }
+
+          &.platform-compatibility {
+            color: #007aff;
+            border-color: #007aff;
+
+            > span:not(:last-child) {
+              border-right: 1px solid #007aff;
+            }
+          }
+
+          &.swift-compatibility {
+            color: #f05138;
+            border-color: #f05138;
+
+            > span {
+              padding-left: 22px;
+              background-image: url("/assets/images/icon-swift-color.svg");
+              background-repeat: no-repeat;
+              background-position: 3px center;
+              background-size: 13px;
+            }
+          }
+
+          &.license {
+            grid-column: 4;
+            color: #3ea639;
+            border-color: #3ea639;
+          }
+        }
+      }
+
+      .note {
+        p {
+          font-size: 12px;
+          margin-top: 10px;
+          margin-bottom: 0;
+          color: #666666;
+        }
+      }
+    }
+  }
+}

index.md

@@ -41,6 +41,13 @@ atom: true
         Read the docs
       </a>
     </li>
+
+    <li>
+      <a href="/packages">
+        <img src="/assets/images/landing-page/box.svg" />
+        Explore packages
+      </a>
+    </li>
   </ul>
 </div>
 

packages/_package-list.html

@@ -0,0 +1,43 @@
+{%- assign category = site.data.packages.packages.categories | where: "slug", include.category_slug | first %}
+
+<section class="package-list">
+  <nav>
+    <a href="{% link packages/index.md %}#package-ecosystem" rel="parent">Explore the Swift package ecosystem</a>
+  </nav>
+
+  {{ category.description | markdownify }}
+  <ul>
+    {% for package in category.packages %}
+    <li class="{% if package.note %}with-note{% endif %}">
+      <a href="{{ package.url }}" target="_blank">
+        <h4>
+          <div class="name">{{ package.name }}</div>
+          <div class="owner">by {{ package.owner }}</div>
+        </h4>
+        <section class="description">{{ package.description | markdownify }}</section>
+        <section class="metadata">
+          {% if package.platform_compatibility %}
+          <div class="lozenge platform-compatibility" title="{{ package.platform_compatibility_tooltip }}">
+            {% for platform in package.platform_compatibility %}
+            <span>{{ platform }}</span>
+            {% endfor %}
+          </div>
+          {% endif %} {% if package.swift_compatibility %}
+          <div class="lozenge swift-compatibility" title="Swift version compatibility">
+            <span>{{ package.swift_compatibility }}</span>
+          </div>
+          {% endif %}
+          <div class="lozenge license" title="Package license"><span>{{ package.license }}</span></div>
+        </section>
+      </a>
+      {% if package.note %}
+      <section class="note">{{ package.note | markdownify }}</section>
+      {% endif %}
+    </li>
+    {%- endfor %}
+  </ul>
+
+  {% if category.more %}
+  <a class="cta-secondary" href="{{ category.more.url }}" target="_blank">{{ category.more.title }} &rsaquo;</a>
+  {% endif %}
+</section>

packages/_package-lists.html

@@ -0,0 +1,19 @@
+<ul class="category-list">
+  {%- for category in site.data.packages.packages.categories %}
+  <li class="category">
+    {%- assign url = "packages/" | append: category.slug | append: ".md" %}
+    <a href="{% link {{ url }} %}">
+      <h3>{{ category.name }}</h3>
+      <p>{{ category.brief }}</p>
+    </a>
+  </li>
+  {% endfor %}
+  <li>
+    <p>
+      There are thousands more packages to browse at the
+      <a href="https://swiftpackageindex.com" target="_blank">Swift Package Index</a>, along with all the metadata you
+      need to make better decisions about your dependencies.
+    </p>
+    <a href="https://swiftpackageindex.com" target="_blank" class="cta-secondary">Browse more packages</a>
+  </li>
+</ul>