Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Build static web page #559

Merged
merged 28 commits into from
Nov 6, 2023
Merged

Build static web page #559

Show file tree
Hide file tree
Changes from 25 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
d191232
First draft webpage
arnaucasau Oct 17, 2023
5ca7f38
Create old docs folder
arnaucasau Oct 17, 2023
5bc35cf
contributing-docs folder
arnaucasau Oct 17, 2023
6dc2992
fix headers and increasing size <p> (14px)
arnaucasau Oct 17, 2023
ab56070
Design corrections
arnaucasau Oct 18, 2023
0cf95c3
Fixing heding
arnaucasau Oct 19, 2023
be6726b
Comments removed
arnaucasau Oct 19, 2023
d2d402b
Added gap between links
arnaucasau Oct 19, 2023
0e7511a
Minor changes
arnaucasau Oct 23, 2023
66a9aa5
added Jinja2 templates and real data
arnaucasau Oct 24, 2023
ad8316c
Fix lint
arnaucasau Oct 24, 2023
376652d
Fix lint 2
arnaucasau Oct 24, 2023
e797830
reduce # of local variables
arnaucasau Oct 24, 2023
712fc8e
tox -eblack fixed
arnaucasau Oct 24, 2023
9ef45ae
added ellipsis read-more
arnaucasau Oct 24, 2023
7c02a28
added section descriptions
arnaucasau Oct 24, 2023
ff6453e
Some carbon guidelines
arnaucasau Oct 25, 2023
f8d6f86
Merge branch 'qiskit-community:main' into webpage
arnaucasau Oct 26, 2023
c266055
Read from toml and styling
arnaucasau Oct 26, 2023
5e1de6a
Update ecosystem/manager.py
arnaucasau Nov 2, 2023
0aed88a
Update docs/style.css
arnaucasau Nov 2, 2023
30beee5
Merge branch 'qiskit-community:main' into webpage
arnaucasau Nov 3, 2023
ade5769
Review changes
arnaucasau Nov 3, 2023
eedd67c
fix lint test
arnaucasau Nov 3, 2023
221b7b8
Deploy website GitHub Pages
arnaucasau Nov 6, 2023
b2e8cb3
Update .github/workflows/deploy-website.yml
arnaucasau Nov 6, 2023
a8ff044
Description added
arnaucasau Nov 6, 2023
a5371ee
Merge branch 'qiskit-community:main' into webpage
arnaucasau Nov 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions .github/workflows/deploy-website.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
name: Deploy Website

on:
push:
branches:
- main
arnaucasau marked this conversation as resolved.
Show resolved Hide resolved

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/
19 changes: 19 additions & 0 deletions ecosystem/html_templates/card.html.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
21 changes: 21 additions & 0 deletions ecosystem/html_templates/link.html.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions ecosystem/html_templates/tag.html.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<cds-tag type="{{color}}" title="{{title}}" size="md">{{text}}</cds-tag>
87 changes: 87 additions & 0 deletions ecosystem/html_templates/webpage.html.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Qiskit Ecosystem</title>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could add the description now: #569. Frank gave a suggestion of what text to use.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done! 👍

<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>
66 changes: 65 additions & 1 deletion ecosystem/manager.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code to create a single card would be good in a helper function. It will make the overall logic easier to read.

I know you're changing the count_read_more variable, which is global. The clearest approach would be to have your function return something that indicates the read more was used, and then whatever calls your helper function updates count_read_more accordingly.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After our conversation, we decided to keep the code inside the build_website method. The creation of the cards is not complex enough to read, and a helper function won't be called from any other method in the file. That auxiliary function would have to return two values, the card itself and a boolean to inform when the read-more-button has been used, therefore it can be less readable at the end.

Another point in favor of the helper function is that it will be more easy to test. Right now we can only create a test for the creation of the entire website and not for each card. Regardless this is true and we don't follow the DRY programming ideology, we think that this function doesn't need a test because there aren't many things that can fail, and in addition, the website is simple enough to just open the result (index.html) and see if all worked.

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,
Expand Down
6 changes: 6 additions & 0 deletions tox.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading
Loading