<566> Add years in community showcase archive

[federicobucchi]

Motivation:

#566

Modifications:

• Added years in showcase-history.yml and include months in each year.
• Loop years instead of months in the view (_package-list.html), then loop the months inside each year)
• Add JS to make year tabs interactive and show the correct list of months (after you click on an year).
• Add style to handle the new archive view in _screen.scss

Result:

[federicobucchi]

@swift-ci please test

[daveverwer]

Thanks for tackling this @federicobucchi! It looks great!

I noticed a couple of things. First, when loading the page with the archive index on it, neither tab is selected so no archives show. I wonder if we should pre-select the 2024 item so there are months available for display.

Next, I think we should use the aria-pressed attribute to indicate whether each button is pressed rather than CSS classes. We can target this property in the CSS so that we only have one attribute to toggle and the styling should take care of itself. We should have an aria-pressed set explicitly on every button, even ones that have not yet been pressed. This will also mean we don’t need to use JavaScript to do an initial selection as I mentioned above, the HTML for that first button can just have aria-pressed="true".

Then, the _history.yml is still expecting only a months property in the showcase-history data structure and so the history pages are not currently working.

Finally. We’ll need to update https://github.com/SwiftPackageIndex/PackageListTool to also echo this new file structure. Both packages.yml and showcase-history.yml are produced by this tool, and it may also make sense to make the same structural changes to this part of source.yml to keep the generation of showcase-history.yml easy.

[federicobucchi]

@daveverwer

I noticed a couple of things. First, when loading the page with the archive index on it, neither tab is selected so no archives show. I wonder if we should pre-select the 2024 item so there are months available for display.

Done

Next, I think we should use the aria-pressed attribute to indicate whether each button is pressed rather than CSS classes. We can target this property in the CSS so that we only have one attribute to toggle and the styling should take care of itself. We should have an aria-pressed set explicitly on every button, even ones that have not yet been pressed. This will also mean we don’t need to use JavaScript to do an initial selection as I mentioned above, the HTML for that first button can just have aria-pressed="true".

Done

Then, the _history.yml is still expecting only a months property in the showcase-history data structure and so the history pages are not currently working.

Do you mean this? https://github.com/SwiftPackageIndex/PackageListTool/blob/5d84dc5bc1eeec6705157dff2d7808356113cbde/history.yml

How do you think we should change it?

Finally. We’ll need to update https://github.com/SwiftPackageIndex/PackageListTool to also echo this new file structure. Both packages.yml and showcase-history.yml are produced by this tool, and it may also make sense to make the same structural changes to this part of source.yml to keep the generation of showcase-history.yml easy.

Should I change it like this?

showcase_history:
  - name: 2024
      - name: January
        slug: january
        packages: ....
  - name: 2023
      - name: December
        slug: december
        packages: ....
      - name: November
        slug: necember
        packages: ....

[federicobucchi]

@swift-ci please test

[federicobucchi]

@swift-ci please test

[daveverwer]

Thanks for all the changes and improvements @federicobucchi! LGTM

[daveverwer]

This merged fine but I don't think it deployed for some reason. See https://www.swift.org/packages/showcase.html#archive still has the old layout.

// @shahmishal @federicobucchi

[federicobucchi]

I confirm I cannot see the changes in swift.org

[shahmishal]

This should be resolved now

[federicobucchi]

@shahmishal @daveverwer I see the changes and all works great. Thank you