Build static web page #559

arnaucasau · 2023-10-17T15:21:24Z

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
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/

docs/style.css

frankharkins

Awesome work! 🚀

The responsiveness is really nice and you've identified a hole in the design (the tall tiles).

I've just got some aesthetic suggestions, and I'll request a review from @javabster for the code and to correct me on anything.

docs/index.html

javabster

Overall this is looking great! One general piece of feedback I have is a lot of the padding and spacing values you used looked like they were chosen randomly, but wherever possible we should be using values consistent with IBM carbon's recommendations. For example, it's unusual to have padding of 13px, instead you should use 12 or 16.

The carbon website has a lot of good information about standards for spacing, typography, colours etc. so I recommend bookmarking it and double checking the frontend code you're writing follows their guidelines. The standards are generally pretty good and keeping in line with them is important for brand consistency and web accessibility reasons 😄

docs/index.html

docs/style.css

javabster · 2023-10-17T19:15:18Z

docs/style.css

+    display: block;
+}
+
+/* ##### Read more button ##### */


Nice use of comments to separate CSS section 👍

Consider using this style to make it even easier to read:

/* ------------------------------ * Read more button * ------------------------------ */

docs/index.html

docs/style.css

### Summary The new web page will sort projects into different groups. This PR adds the field to the TOML files. This is just a first draft to unblock #559, the groups will probably be subject to change. Feel free to leave any comments.

frankharkins

Really awesome work! The page is quick to load, and I'm impressed with how little Python code was needed.

I've left some really small suggestions but honestly I'd be happy to merge this as-is.

docs/style.css

ecosystem/manager.py

Co-authored-by: Frank Harkins <frankharkins@hotmail.co.uk>

Eric-Arellano

Nice work! I don't think you want to rename the current docs/ folder to contributing-docs; that will break any links people have.

Do you need those 3 new files in docs/ to live there? Could they be in something like site/ or even ecosystem/?

--

We probably want to make clear that ecosystem/html has templates. Either by naming the folder html_templates, or the individual files card.html.jinja: https://jinja.palletsprojects.com/en/2.11.x/templates/#template-file-extension. I like the file name approach because it makes clear to IDEs/GitHub and each individual file reader what the file is.

docs/index.html

docs/style.css

Eric-Arellano · 2023-11-02T19:30:10Z

docs/style.css

+    display: block;
+}
+
+/* ##### Read more button ##### */


Consider using this style to make it even easier to read:

/* ------------------------------ * Read more button * ------------------------------ */

ecosystem/manager.py

Eric-Arellano · 2023-11-02T19:33:20Z

ecosystem/manager.py

+        count_read_more = 1
+        max_chars_description = 500
+        for _, repo in projects.items():
+            # Card tags


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.

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.

ecosystem/manager.py

arnaucasau · 2023-11-03T14:50:31Z

Thank you for the review @Eric-Arellano! I've changed the name of the templates folder and the extension for each template. Now it's more clear like you said 👍.

As for the docs folder, I tried having another folder but I'm not sure if we are able to change the directory for the GitHub Pages. In the configuration, the two options available are /root and /docs. Do you know something about it? If we can do it I'll create another folder just for the website.

frankharkins · 2023-11-03T17:52:12Z

For classic pages it needs to be in /docs, but I recently learnt GitHub has a new feature to publish using an action. Here's an example you can use. Then go to settings > pages > publish with an action.

mickahell · 2023-11-06T13:10:24Z

For classic pages it needs to be in /docs, but I recently learnt GitHub has a new feature to publish using an action. Here's an example you can use. Then go to settings > pages > publish with an action.

@arnaucasau
We used it for a project :

here the CI you can copy paste https://github.com/IceKhan13/purplecaffeine/blob/main/.github/workflows/docs.yml
and for the html generation we are using tox but you should just be able to call your manager function : https://github.com/IceKhan13/purplecaffeine/blob/main/tox.ini#L50

arnaucasau · 2023-11-06T17:23:26Z

Great! Thank you so much for your help @frankharkins and @mickahell!

frankharkins

Good job!

mickahell · 2023-11-06T17:56:28Z

View the generated page at https://arnaucasau.github.io/ecosystem/

I'm getting a 404 :/

@arnaucasau As you don't use the docs/ default folder, you need to go in the github pages setting of your repo and change the folder to root and that should do the job :)

.github/workflows/deploy-website.yml

Co-authored-by: Eric Arellano <14852634+Eric-Arellano@users.noreply.github.com>

Eric-Arellano · 2023-11-06T18:17:43Z

ecosystem/html_templates/webpage.html.jinja

+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Qiskit Ecosystem</title>


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

Eric-Arellano · 2023-11-06T18:43:23Z

Looks great at https://arnaucasau.github.io/ecosystem/! Arnau got the GitHub action working.

CI was broken before this, so I'm going to bypass protections and merge. Thanks Arnau for the excellent work!

arnaucasau · 2023-11-06T18:46:20Z

@mickahell I set the option to publish with an action in my repo. The link should be okay now, even though it was only for this PR, and I'll probably disable it soon. Thanks again for the help!

mickahell · 2023-11-06T18:58:06Z

@arnaucasau looks very nice :D

arnaucasau added 3 commits October 17, 2023 17:00

First draft webpage

d191232

Create old docs folder

5ca7f38

contributing-docs folder

5bc35cf

Eric-Arellano reviewed Oct 17, 2023

View reviewed changes

docs/style.css Outdated Show resolved Hide resolved

frankharkins mentioned this pull request Oct 17, 2023

[Exploration]: Build static web page #548

Closed

fix headers and increasing size <p> (14px)

6dc2992

frankharkins requested changes Oct 17, 2023

View reviewed changes

docs/index.html Outdated Show resolved Hide resolved

docs/index.html Outdated Show resolved Hide resolved

docs/index.html Outdated Show resolved Hide resolved

docs/index.html Outdated Show resolved Hide resolved

frankharkins requested a review from javabster October 17, 2023 17:51

javabster reviewed Oct 17, 2023

View reviewed changes

arnaucasau added 4 commits October 18, 2023 15:47

Design corrections

ab56070

Fixing heding

0cf95c3

Comments removed

be6726b

Added gap between links

d2d402b

frankharkins reviewed Oct 20, 2023

View reviewed changes

docs/index.html Outdated Show resolved Hide resolved

docs/index.html Outdated Show resolved Hide resolved

docs/style.css Outdated Show resolved Hide resolved

arnaucasau added 9 commits October 23, 2023 17:03

Minor changes

0e7511a

added Jinja2 templates and real data

66a9aa5

Fix lint

ad8316c

Fix lint 2

376652d

reduce # of local variables

e797830

tox -eblack fixed

712fc8e

added ellipsis read-more

9ef45ae

added section descriptions

7c02a28

Some carbon guidelines

ff6453e

frankharkins mentioned this pull request Oct 25, 2023

Add 'group' field to projects #565

Merged

arnaucasau changed the title ~~[Exploration]: Build static web page (continuation)~~ Build static web page Oct 25, 2023

arnaucasau and others added 2 commits October 26, 2023 15:36

Merge branch 'qiskit-community:main' into webpage

f8d6f86

Read from toml and styling

c266055

arnaucasau marked this pull request as ready for review October 26, 2023 20:40

frankharkins reviewed Nov 2, 2023

View reviewed changes

docs/style.css Outdated Show resolved Hide resolved

ecosystem/manager.py Outdated Show resolved Hide resolved

ecosystem/manager.py Outdated Show resolved Hide resolved

arnaucasau and others added 2 commits November 2, 2023 19:40

Update ecosystem/manager.py

5e1de6a

Co-authored-by: Frank Harkins <frankharkins@hotmail.co.uk>

Update docs/style.css

0aed88a

Co-authored-by: Frank Harkins <frankharkins@hotmail.co.uk>

Eric-Arellano reviewed Nov 2, 2023

View reviewed changes

arnaucasau and others added 3 commits November 3, 2023 14:01

Merge branch 'qiskit-community:main' into webpage

30beee5

Review changes

ade5769

fix lint test

eedd67c

Deploy website GitHub Pages

221b7b8

frankharkins approved these changes Nov 6, 2023

View reviewed changes

Eric-Arellano approved these changes Nov 6, 2023

View reviewed changes

.github/workflows/deploy-website.yml Show resolved Hide resolved

Update .github/workflows/deploy-website.yml

b2e8cb3

Co-authored-by: Eric Arellano <14852634+Eric-Arellano@users.noreply.github.com>

Eric-Arellano reviewed Nov 6, 2023

View reviewed changes

arnaucasau added 2 commits November 6, 2023 19:34

Description added

a8ff044

Merge branch 'qiskit-community:main' into webpage

a5371ee

Eric-Arellano merged commit 7ec9bbd into Qiskit:main Nov 6, 2023
3 of 5 checks passed

Eric-Arellano mentioned this pull request Nov 6, 2023

Add metadata description to Ecosystem site #569

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Build static web page #559

Build static web page #559

arnaucasau commented Oct 17, 2023 •

edited

Loading

frankharkins left a comment

javabster left a comment

javabster Oct 17, 2023

Eric-Arellano Nov 2, 2023

frankharkins left a comment •

edited

Loading

Eric-Arellano left a comment

Eric-Arellano Nov 2, 2023

Eric-Arellano Nov 2, 2023

arnaucasau Nov 6, 2023

arnaucasau commented Nov 3, 2023

frankharkins commented Nov 3, 2023

mickahell commented Nov 6, 2023

arnaucasau commented Nov 6, 2023

frankharkins left a comment

mickahell commented Nov 6, 2023 •

edited

Loading

Eric-Arellano Nov 6, 2023

arnaucasau Nov 6, 2023

Eric-Arellano commented Nov 6, 2023

arnaucasau commented Nov 6, 2023

mickahell commented Nov 6, 2023

Build static web page #559

Build static web page #559

Conversation

arnaucasau commented Oct 17, 2023 • edited Loading

Summary

frankharkins left a comment

Choose a reason for hiding this comment

javabster left a comment

Choose a reason for hiding this comment

javabster Oct 17, 2023

Choose a reason for hiding this comment

Eric-Arellano Nov 2, 2023

Choose a reason for hiding this comment

frankharkins left a comment • edited Loading

Choose a reason for hiding this comment

Eric-Arellano left a comment

Choose a reason for hiding this comment

Eric-Arellano Nov 2, 2023

Choose a reason for hiding this comment

Eric-Arellano Nov 2, 2023

Choose a reason for hiding this comment

arnaucasau Nov 6, 2023

Choose a reason for hiding this comment

arnaucasau commented Nov 3, 2023

frankharkins commented Nov 3, 2023

mickahell commented Nov 6, 2023

arnaucasau commented Nov 6, 2023

frankharkins left a comment

Choose a reason for hiding this comment

mickahell commented Nov 6, 2023 • edited Loading

Eric-Arellano Nov 6, 2023

Choose a reason for hiding this comment

arnaucasau Nov 6, 2023

Choose a reason for hiding this comment

Eric-Arellano commented Nov 6, 2023

arnaucasau commented Nov 6, 2023

mickahell commented Nov 6, 2023

arnaucasau commented Oct 17, 2023 •

edited

Loading

frankharkins left a comment •

edited

Loading

mickahell commented Nov 6, 2023 •

edited

Loading