Update project detail page layout & elements

The information architecture here represents what people in a BoF at Prague thought were the most important things.

I've kind of "mocked up" what I think the actual field mapping would be / look like from the d.o project pages.
https://projects.invisionapp.com/freehand/document/pwOhQ6IFC?zoomToItems...

A few thoughts I forgot to post end of last week.

1. In general the high-level priority guide looks good. I only see one potential issue. Currently the template for the longer description is described in here: https://www.drupal.org/project/project_browser/issues/3230734#comment-14... . The template for itself also looks totally fine. the only potential problem i see is within the linked template you have for example the section recommended modules and in the priority guide you also have a section called related modules. also you have post installation and additional requirements in the template which overlaps with documentations and howtos later in the priority guide. so basically content isn't semantically grouped on the project detail page due to the fact that you have a mixed and heterogenous blob of text in the longer description (aka the body field) while the priority guide sections are homogenous.
2. and i wonder if it would make sense to rename branding to logo in the priority guide cuz there was the idea to move the module name to the page title . cuz currently it is still called extend drupal

I think separating the project branding and the screenshots is important. I contributed a logo to the Upgrade Status project, and Gábor mentioned they looked a little odd together. As far as I know, currently the logo is just the first image. That won't be adequate for the new layout, since the browser will need to know if the first image is actually a logo or a screenshot.

Cross-posting https://www.drupal.org/project/drupalorg/issues/3334783 -- seems like we may actually start using GitLab's logo.png as the logo if that's included in the repo.

Related to this, I'm suggesting we update the documentation for project maintainers to include the logo in their repos in this issue: #3334550.

A quick note for those following this issue, there was a zoom meeting held yesterday 2/14 to review ideas and some mock-ups. Another meeting will be held next week during the regular time for the #project-browser slack channel site building committee time to continue the discussion.

Updated Summary with the next meeting time. I will be posting at least one issues related to our discussion later today.

One vision to minimize and make this simpler, while relying on drupal.org for more information in the interim:

• Module Name - gotta have this
• Description - the full description of the module and what it does, ideally based on the body template for Drupal module projects
• Screenshots - the images from drupal.org, which are ideally useful screenshots depicting how the module can be used and what functionality and usefulness it provides
• Other Resources - links to external resources like documentation, handbook pages, or YouTube videos

We believe there are two primary reasons why people would click through to a detail page:

1. I don't know what this module does based on its card, and I want to learn more to see if this is a module I want to try out.
2. I know that I want to try this module, but I don't know how to use it. (i.e. "Where in the interface will I find the module's configuration (Structure, Appearance, Configuration, Content, etc.)" as well as "How would I use it, try it, or set it up")

One thing to consider is that perhaps the detail page should really be a modal since this (a) has less information and (b) this kind of solves the 'h1' problem with being on a detail "page."

I'm feeling ambitious and I want to try and get this into core.

Consensus in the Site Builder asynch meeting this week. https://drupal.slack.com/archives/C01UHB4QG12/p1692131239990579

We should add a link on the Project Detail page to the D.O. project.

I wonder could we get some people together during contribution a Drupalcon Lille to look at this?

I liked this, big +1 for me - the only caveat is that I think we need to collapse-by-default the full description at small screens so that super-long descriptions don't push the fairly important quality metrics too far down the page. I have added this in the Google Doc. Updating the Proposed Resolution.

Sorry if this was explained somewhere else, but what exactly does the "Stable" and "Maintained" means?

Does the stability status relate to your installed branch (or in case the module is not installed to the newest branch)? Because a project can have a different stability statuses on various branches.

Is the "Maintained" just a status taken from the project configuration, which is misconfigured in a lot of projects and does not reflect reality? Or is it a list of maintainers?

Thanks!

Sounds like you're interested in #3282163 and possibly also #3267678 ! ;)

Stable means whether or not the module's stable releases are covered by security policy, and the maintenance status is whether or not it is in one of the statuses that we consider "maintained" which is up through "seeking co-maintainer". (Yes, this is self-selected and maybe not accurate; one hope is that giving this field proper credit via project browser will encourage maintainers to keep it accurate, the other thought is maybe we drop it altogether - I encourage you to let us know your thoughts in those issues)

Thank you for your input!

https://www.figma.com/file/I1WJBCptKycwAPvp9robir/Project-Browser-Issue-... I was looking at applying this design to the Browse Projects project page. It looks like we need to apply a class and markup since this is so close to the categories.

I have a few questions:
1) What is included in the categories section?
2) Would we include files and links in the images section under categories?

Since drupal already has a sidebar, I might copy some of its styles.

Some of the items on the right panel below do not yet exist. I imagine I should leave a placeholder.

I was thinking on this items.
There is a button for add/install button but the items underneath i did not see them on the svelte file.
Those include

• Message if not compatible
• # Installs
• Stable
• Maintained
• Link to Drupal.org

Two things at a minimum -

1. Let's remove the boxes at the right hand column, and just stack that information up with some decent spacing.
2. We really want to show the "summary" of the body field, then the images, THEN the full description. I'm not sure if there's backend work needed here to make that happen, but we should have access to the summary field separately from the full description. The summary is what we're showing on the cards view, so we want to repeat it, then show the images, then the full description.

I think there are some other improvements to be made:
- Get rid of the "Details" heading
- get rid of the "Categories:" label and just show the chips
- let's get rid of the module author (i.e. "By Dave Reid") altogether
- let's make the slideshow actually work?? 😬

I didn't get to

let's make the slideshow actually work

from #34, but I think I hit all the other asks.

I'm considering using https://biggerpicture.henrygd.me instead of making our own gallery since that supports multiple types.
Thoughts? I will add it to the MR tomorrow.

I made a revision of the page, and found some improvements.

Styles improvements:
1. Make the Logo 80px width
2. Fix the categories and project details alignment so is staked below the title.
3. Remove border and background from carousel arrows. Make them 40width.

Accessibility:
Follow general guides from https://www.w3.org/WAI/tutorials/carousels/ (I should be able to find better documentation if needed)
1. Carousel should be accessible from the keyboard. User should be able to tab true the carousel controls and move back and forward.
2. Remove the Aria-hidden from the carousel container. And maybe added to the hidden slides instead.
3. Images should be contained on a list element.
4. Add carousel dots (meatballs) at the bottom. Dots should have data-slide=# corresponding to the number on the slide.
5. Add aria-label='Next slide' to the carousel arrow next and 'Previous slide'

So it looks like the carousel does not work because we renamed
project.field_project_images to project.project_images but the fixture only finds one image with that name.
FYI updating a fixture within drupalPod is very slow.

FYI rather than rebuild the entire fixture there's a separate command which will update you with the difference between the code-based fixture and the latest data from d.o.

Project Browser itself is an example of a project you can use the detail page for - because it uses the body template, has images appropriately, has a logo, etc.

I think this is working well, but a couple of things struck me.

• For many modules, there is no explicit short description. In this case it takes the first line or two of the main description. The short description is shown at the top, and the full description below the images. However, if the autogenerated description is used and there are no images, the same text is shown twice, which can look odd. We should consider whether this might hurt adoption, or keeping it would encourage maintainers to provide short descriptions.
• For many modules, the sidebar seems rather spartan at the moment. There seem to be some specific things missing that I'll mention in the next three points.
• Modules covered by security policy have a message about coverage, but modules not covered don't say anything. It would be nice to have a message like "This module is not currently covered by security policy. Install at your own risk."
• I'd like to see something about maintenance status, which has a slot on the sidebar in the issue description.
• I'd like a link to the drupal.org module page, which again is shown on the mockup in the issue. At present getting to the module page requires opening a tab and finding it manually.

Apart from these minor details, I think this is a great step forward.

Using this MR branch, if I go to a detail page, and then I hit "back to browsing >" at the top left, then I get an error.

browse:1 Uncaught SyntaxError: "undefined" is not valid JSON
at JSON.parse ()
at stores.js:46:30
at main.js:7:2

If we can fix this, and/or any other major issues that might be caused here, then I think we should merge this as-is and add small follow-ons for the additional feedback from James (others share these opinions :) )

This is at a point where it's passing tests, and we've at least switching the layouts of the columns. There will be a lot of follow-ups, but they will be smaller in scope and easier to manage and continually rebase as they'll be smaller.

I'm going to merge this, with tremendous amounts of gratitude to those who've worked on it! I hope we can keep up the good work with some other, smaller-scoped issues. :)

Tried PB in a Drupal CMS instance locally and I was surprised that there is nothing about the authors/maintainers of a module in the page details.

I do not find info about this section in the previous comments on this issue 🤔 (I can't access the Figma to see if there's more details there).

Can we explain why we do not display the information of the authors and the maintainer(s) of a given module ?

I think it is valuable info to have.

To be more precise, I was expecting to see the avatar of the maitainers of the module in this sidebar:

#19 links to a shared Google Doc with a revised, simplified mockup.

I would not be opposed to a new issue being opened that brings in elements of the original wireframe back in, but I would want it to be run through usability with our target audience. I'm not here to snub open source developers, I am one, but I every addition should be intentional.

But either way, not in this issue. :)

i would orient towards the top tasks exercise we did a few months back. that illustrated which details were important to people assessing a module on a details page. but looks like the sheet got removed? https://docs.google.com/spreadsheets/d/17JiSqr5VHOfupdGLo6pLatM2VfxOy3vw... #gid=127356256 at least the link i've provided on the invision board is not valid anymore? and i'Ve attached the screenshot from the invision board from the discussions that spun out after the exercise was done.

I agree with @matthieuscarset that the information about maintainer(s) is important, as they invest time to maintain the modules and should be mentioned where possible. Also without the names, it may look like Drupal is maintaining everything.

Was a new issue created for this yet?

I did not open an issue for this. Please do so @poker10 if you feel the courage to argument about displaying author/maintainer information.

Actually, you did! :) Added a related here for cross-reference purposes.