Ecosystem webpage: design updates (#589)

### Summary This PR updates the design of the ecosystem webpage. ### Details and comments This PR introduces the following changes: - New description in the header - New title and description for each section - The color purple of buttons and links have changed to blue - The icon for the header button has changed to the GitHub logo - New icon for the links - Projects sorted by stars Link to the preview: https://arnaucasau.github.io/ecosystem/
Qiskit · Nov 17, 2023 · 4ec45ac · 4ec45ac
1 parent 0dd2946
commit 4ec45ac
Show file tree

Hide file tree

Showing 5 changed files with 969 additions and 949 deletions.
diff --git a/ecosystem/html_templates/link.html.jinja b/ecosystem/html_templates/link.html.jinja
@@ -8,14 +8,13 @@
       fill="currentColor"
       width="16"
       height="16"
-      viewBox="0 0 16 16"
+      viewBox="0 0 32 32"
       aria-hidden="true"
       data-v-bdc8f36d=""
     >
-      <path
-        d="M13,14H3c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h5v1H3v10h10V8h1v5C14,13.6,13.6,14,13,14z"
-      ></path>
-      <path d="M10 1L10 2 13.3 2 9 6.3 9.7 7 14 2.7 14 6 15 6 15 1z"></path>
+      <polygon
+        points="10 6 10 8 22.59 8 6 24.59 7.41 26 24 9.41 24 22 26 22 26 6 10 6"
+      />
     </svg>
   </span>
 </cds-link>
diff --git a/ecosystem/html_templates/webpage.html.jinja b/ecosystem/html_templates/webpage.html.jinja
@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="description" content="Explore projects that use or extend Qiskit" />
+    <meta
+      name="description"
+      content="Explore projects that use or extend Qiskit"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Qiskit Ecosystem</title>
     <script
@@ -35,18 +38,21 @@
     />
     <link rel="stylesheet" href="style.css" />
   </head>
-  <body class="cds-theme-zone-white custom-theme">
+  <body class="cds-theme-zone-white">
     <header>
       <div class="inside-header cds--grid layout-lead-space-fixed__container">
         <img
           class="ecosystem-logo"
           src="ecosystem-logo.svg"
           alt="Qiskit Ecosystem logo"
         />
-        <p class="title">Explore projects that use or extend Qiskit</p>
+        <p class="title-description">
+          Explore projects and hardware providers that leverage the open-source
+          Qiskit toolkit or are built on top of it.
+        </p>
 
         <cds-button href="https://github.com/qiskit-community/ecosystem">
-          Join the Ecosystem
+          Add your project
           <span slot="icon" style="margin: 2px 0 -2px 0">
             <svg
               focusable="false"
@@ -55,15 +61,12 @@
               fill="currentColor"
               width="16"
               height="16"
-              viewBox="0 0 16 16"
+              viewBox="0 0 32 32"
               aria-hidden="true"
               data-v-bdc8f36d=""
             >
               <path
-                d="M13,14H3c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h5v1H3v10h10V8h1v5C14,13.6,13.6,14,13,14z"
-              ></path>
-              <path
-                d="M10 1L10 2 13.3 2 9 6.3 9.7 7 14 2.7 14 6 15 6 15 1z"
+                d="M16,2a14,14,0,0,0-4.43,27.28c.7.13,1-.3,1-.67s0-1.21,0-2.38c-3.89.84-4.71-1.88-4.71-1.88A3.71,3.71,0,0,0,6.24,22.3c-1.27-.86.1-.85.1-.85A2.94,2.94,0,0,1,8.48,22.9a3,3,0,0,0,4.08,1.16,2.93,2.93,0,0,1,.88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4,5.4,0,0,1,1.44-3.76,5,5,0,0,1,.14-3.7s1.17-.38,3.85,1.43a13.3,13.3,0,0,1,7,0c2.67-1.81,3.84-1.43,3.84-1.43a5,5,0,0,1,.14,3.7,5.4,5.4,0,0,1,1.44,3.76c0,5.38-3.27,6.56-6.39,6.91a3.33,3.33,0,0,1,.95,2.59c0,1.87,0,3.38,0,3.84s.25.81,1,.67A14,14,0,0,0,16,2Z"
               ></path>
             </svg>
           </span>
@@ -73,28 +76,99 @@
 
     <div class="content cds--grid layout-lead-space-fixed__container">
       <h2 id="providers" class="section">
-        <a title="Permalink to this headline" href="#providers" class="section-anchor">
-          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true" class="inline"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg>
+        <a
+          title="Permalink to this headline"
+          href="#providers"
+          class="section-anchor"
+        >
+          <svg
+            focusable="false"
+            preserveAspectRatio="xMidYMid meet"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            width="16"
+            height="16"
+            viewBox="0 0 32 32"
+            aria-hidden="true"
+            class="inline"
+          >
+            <path
+              d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"
+            ></path>
+            <path
+              d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"
+            ></path>
+          </svg>
         </a>
-        Providers
+        System providers
       </h2>
-      <p>Run your quantum programs</p>
+      <p>
+        Access IBM Quantum and 3rd party systems and simulators to the following
+        providers
+      </p>
       <div id="section1" class="cards cds--row">{{section_provider_cards}}</div>
 
       <h2 id="quantum-applications" class="section">
-        <a title="Permalink to this headline" href="#quantum-applications" class="section-anchor">
-          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true" class="inline"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg>
+        <a
+          title="Permalink to this headline"
+          href="#quantum-applications"
+          class="section-anchor"
+        >
+          <svg
+            focusable="false"
+            preserveAspectRatio="xMidYMid meet"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            width="16"
+            height="16"
+            viewBox="0 0 32 32"
+            aria-hidden="true"
+            class="inline"
+          >
+            <path
+              d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"
+            ></path>
+            <path
+              d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"
+            ></path>
+          </svg>
         </a>
-        Quantum applications
+        Application packages
       </h2>
-      <p>Use quantum computing to solve real-world problems</p>
-      <div id="section2" class="cards cds--row">{{section_applications_cards}}</div>
+      <p>
+        Explore packages that help apply quantum technology to real-world use
+        cases
+      </p>
+      <div id="section2" class="cards cds--row">
+        {{section_applications_cards}}
+      </div>
 
       <h2 id="other-tools" class="section">
-        <a title="Permalink to this headline" href="#other-tools" class="section-anchor">
-          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true" class="inline"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg>
+        <a
+          title="Permalink to this headline"
+          href="#other-tools"
+          class="section-anchor"
+        >
+          <svg
+            focusable="false"
+            preserveAspectRatio="xMidYMid meet"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            width="16"
+            height="16"
+            viewBox="0 0 32 32"
+            aria-hidden="true"
+            class="inline"
+          >
+            <path
+              d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"
+            ></path>
+            <path
+              d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"
+            ></path>
+          </svg>
         </a>
-        Other tools
+        Additional projects
       </h2>
       <p>Cool projects that extend, interface with, or use Qiskit</p>
       <div id="section3" class="cards cds--row">{{section_other_cards}}</div>

diff --git a/ecosystem/manager.py b/ecosystem/manager.py
@@ -56,6 +56,13 @@ def build_website(self):
         """Generates the ecosystem web page reading `members.json`."""
         environment = Environment(loader=FileSystemLoader("ecosystem/html_templates/"))
         projects = self.dao.storage.read()
+        projects_sorted = sorted(
+            projects.items(),
+            key=lambda item: (
+                -item[1].stars if item[1].stars is not None else 0,
+                item[1].name,
+            ),
+        )
         templates = {
             "website": environment.get_template("webpage.html.jinja"),
             "card": environment.get_template("card.html.jinja"),
@@ -71,7 +78,7 @@ def build_website(self):
         max_chars_description_visible = 400
         min_chars_description_hidden = 100
         count_read_more = 1
-        for _, repo in projects.items():
+        for _, repo in projects_sorted:
             # Card tags
             tags = ""
             for label in repo.labels: