Build static web page to replace qiskit.org/ecosystem (#559)

### Summary This PR is a continuation of the work done by @frankharkins in #548. Things to add in upcoming pull requests: - Make sure the page follows the [carbon guidelines](https://carbondesignsystem.com/guidelines/accessibility/overview/) - Explore the use of expandable tiles instead of a read more button. The web page can be generated running `tox -e website` and it will be automatically deployed to GitHub Pages after every push to the main branch. View the generated page at https://arnaucasau.github.io/ecosystem/ --------- Co-authored-by: Frank Harkins <[email protected]> Co-authored-by: Eric Arellano <[email protected]>
Qiskit · Nov 6, 2023 · 7ec9bbd · 7ec9bbd
1 parent 82f7f96
commit 7ec9bbd
Show file tree

Hide file tree

Showing 10 changed files with 3,035 additions and 1 deletion.
diff --git a/.github/workflows/deploy-website.yml b/.github/workflows/deploy-website.yml
@@ -0,0 +1,28 @@
+name: Deploy Website
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  docs_publish:
+      name: Build and publish
+      concurrency: ci-${{ github.ref }}
+      runs-on: ubuntu-latest
+      steps:
+        - name: Checkout
+          uses: actions/checkout@v3
+        - name: Set up Python 3.9
+          uses: actions/setup-python@v4
+          with:
+            python-version: '3.9'
+        - name: Install tox
+          run: python -m pip install -U tox
+        - name: Build Website
+          run: tox -e website
+        - name: Deploy
+          uses: JamesIves/github-pages-deploy-action@v4
+          with:
+            folder: website/
diff --git a/ecosystem/html_templates/card.html.jinja b/ecosystem/html_templates/card.html.jinja
@@ -0,0 +1,19 @@
+<div class="card cds--col">
+  <cds-tile color-scheme="white">
+    <h3 class="project-title">{{title}}</h3>
+    <div class="tags">{{tags}}</div>
+    <div class="description">
+      {% if id_read_more != "None" %}
+      <input type="checkbox" class="read-more-input" id="{{id_read_more}}" />
+      <p class="text">
+        {{description_visible}}<span class="ellipsis">...</span
+        ><span class="extra-text">{{description_hidden}}</span>
+      </p>
+      <label for="{{id_read_more}}" class="read-more-button"></label>
+      {% else %}
+      <p class="text">{{description_visible}}</p>
+      {% endif %}
+    </div>
+    <div class="links">{{links}}</div>
+  </cds-tile>
+</div>
diff --git a/ecosystem/html_templates/link.html.jinja b/ecosystem/html_templates/link.html.jinja
@@ -0,0 +1,21 @@
+<cds-link href="{{url}}">
+  Go to {{place}}
+  <span class="link" slot="icon">
+    <svg
+      focusable="false"
+      preserveAspectRatio="xMidYMid meet"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      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>
+    </svg>
+  </span>
+</cds-link>
diff --git a/ecosystem/html_templates/tag.html.jinja b/ecosystem/html_templates/tag.html.jinja
@@ -0,0 +1 @@
+<cds-tag type="{{color}}" title="{{title}}" size="md">{{text}}</cds-tag>
diff --git a/ecosystem/html_templates/webpage.html.jinja b/ecosystem/html_templates/webpage.html.jinja
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <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
+      type="module"
+      src="https://1.www.s81c.com/common/carbon/web-components/version/v2.0.1/tile.min.js"
+    ></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon/web-components/version/v2.0.1/button.min.js"
+    ></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/list.min.js"
+    ></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/tag.min.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body class="cds-theme-zone-white custom-theme">
+    <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>
+
+        <cds-button href="https://github.com/qiskit-community/ecosystem">
+          Join the Ecosystem
+          <span slot="icon" style="margin: 2px 0 -2px 0">
+            <svg
+              focusable="false"
+              preserveAspectRatio="xMidYMid meet"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              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>
+            </svg>
+          </span>
+        </cds-button>
+      </div>
+    </header>
+
+    <div class="content cds--grid layout-lead-space-fixed__container">
+      <h2 class="section">Providers</h2>
+      <p>Run your quantum programs</p>
+      <div id="section1" class="cards cds--row">{{section_provider_cards}}</div>
+
+      <h2 class="section">Quantum applications</h2>
+      <p>Use quantum computing to solve real-world problems</p>
+      <div id="section2" class="cards cds--row">{{section_applications_cards}}</div>
+
+      <h2 class="section">Other tools</h2>
+      <p>Cool projects that extend, interface with, or use Qiskit</p>
+      <div id="section3" class="cards cds--row">{{section_other_cards}}</div>
+    </div>
+  </body>
+</html>
diff --git a/ecosystem/manager.py b/ecosystem/manager.py
@@ -7,7 +7,7 @@
 from typing import Optional, List, Tuple, Union
 
 import requests
-from jinja2 import Environment, PackageLoader, select_autoescape
+from jinja2 import Environment, PackageLoader, select_autoescape, FileSystemLoader
 
 from ecosystem.daos import DAO
 from ecosystem.models import TestResult, Tier, TestType
@@ -52,6 +52,70 @@ def recompile(self):
         """Recompile `members.json` from human-readable files."""
         self.dao.compile_json()
 
+    def build_website(self):
+        """Generates the ecosystem web page reading `members.json`."""
+        environment = Environment(loader=FileSystemLoader("ecosystem/html_templates/"))
+        projects = self.dao.storage.read()
+        templates = {
+            "website": environment.get_template("webpage.html.jinja"),
+            "card": environment.get_template("card.html.jinja"),
+            "tag": environment.get_template("tag.html.jinja"),
+            "link": environment.get_template("link.html.jinja"),
+        }
+        sections = {
+            "provider": "",
+            "applications": "",
+            "other": "",
+        }
+
+        max_chars_description_visible = 400
+        min_chars_description_hidden = 100
+        count_read_more = 1
+        for _, repo in projects.items():
+            # Card tags
+            tags = ""
+            for label in repo.labels:
+                tags += templates["tag"].render(color="purple", title=label, text=label)
+
+            # Card links
+            links = templates["link"].render(url=repo.url, place="repository")
+            if repo.website:
+                links += templates["link"].render(url=repo.website, place="website")
+
+            # Card description
+            if (
+                len(repo.description) - max_chars_description_visible
+                >= min_chars_description_hidden
+            ):
+                description = [
+                    repo.description[:max_chars_description_visible],
+                    repo.description[max_chars_description_visible:],
+                ]
+                id_read_more = str(count_read_more)
+                count_read_more += 1
+            else:
+                description = [repo.description, ""]
+                id_read_more = "None"
+
+            # Create the card
+            card = templates["card"].render(
+                title=repo.name,
+                tags=tags,
+                description_visible=description[0],
+                description_hidden=description[1],
+                id_read_more=id_read_more,
+                links=links,
+            )
+
+            # Adding the card to a section
+            sections[repo.group] += card
+
+        return templates["website"].render(
+            section_provider_cards=sections["provider"],
+            section_applications_cards=sections["applications"],
+            section_other_cards=sections["other"],
+        )
+
     def dispatch_check_workflow(
         self,
         repo_url: str,

diff --git a/tox.ini b/tox.ini
@@ -33,6 +33,12 @@ commands =
 envdir = .tox/lint
 commands = black {posargs} ecosystem tests --check
 
+[testenv:website]
+allowlist_externals = bash
+basepython = python3
+commands =
+  bash -ec "python manager.py build_website > website/index.html"
+
 [testenv:ci]
 commands =
   apt-get install -yq docker-ce docker-ce-cli
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<cds-tag type="{{color}}" title="{{title}}" size="md">{{text}}</cds-tag>