Consolidate and Implement Vocabulary across ancillary websites #329
Description
This is to document all of the tasks that'll be carried out during the Outreachy Dec 2024 cohort.
Note: It's a work in progress and subject to change.
Open Source website
- creativecommons/creativecommons.github.io-source: Source files for CC Open Source website
The work was done in two phases;
Phase 1: Refactoring to Vocabulary Markup: This phase focused on aligning the HTML structure with the Vocabulary markup for matching contexts .
Phase 2:
Global Header
Before the start of the Outreachy program, efforts were made in the vocab-refresh branch to align the website's header with the global header component. During the program, the dropdown menu was removed from the header. However, there are plans to introduce dropdown functionality to Vocabulary in the future, so the dropdown menu might be reintroduced later.
This change was part of a larger pr to refactor the home page of the website;
Global Footer
The footer menu was updated to align with the current menu structure, and the Twitter logo was replaced with Bluesky. These changes were made as part of a larger pull request:
However, during the refactoring phase, it was decided to include the menu from the legacy footer to provide a link to the archives page.
This adjustment was done in this commit: include old menu back into footer as part of
Recent Blog Posts
The recent blog was refactored to match vocab's context for blog index in pr;
Homepage
Many changes were made to the homepage, which includes several sections: the Hero section, Get Involved section, Recent Blog Posts, and Featured Projects. During the refactoring phase, all legacy classes were removed. It was also decided to refactor the Get Involved section and Featured Projects to match the ongoing initiative section.
- [Feature] Homepage refactor and redesign ccos-website-source#855
- refactored open source website's home page to implement and align with vocabulary ccos-website-source#856
During the restyling of the homepage, a pull request was made:
In this PR, the plugin section from the Get Involved section was removed, as there are plans to archive this page. This change is reflected in the remove our plugin commit
The Recent Blog Posts section, which resembled the Latest News section on the CC homepage, was restyled in the restyled recent blog post and changed order commit. Additionally, the Get Involved and Featured Projects sections were adjusted to display in grids of 2 instead of 3. The call to action in the hero section was also decided to remain links instead of the button in the legacy design as they were better suited as links.
Contribution, Work Program, Community Pages
- [Feature] Community Page refactor and redesign ccos-website-source#858
- [Feature] Work Program page and refactor ccos-website-source#859
- [Feature] Contribution page refactor and redesign ccos-website-source#861
Most of the pages and subsections under these categories were updated by refactoring the page-with-toc.html file in the codebase to align with the Vocabulary context.
Community Team Page
as one of the pages not affected in the change made to the community page above, a pr was made to make changes to this page
In one of the previous discussions, there was a decision on how to handle instances where Vocabulary markup was not present for some of legacy code or vice-versa. This is explained in comment. As a result, the old table HTML markup was commented out and later reintroduced, as it was determined that presenting the data in a table format was the best approach, with all legacy classes stripped out.
Earlier efforts to align the team page with Vocabulary’s team markup faced an issue where placeholder images were used for team members instead of actual images. This led to the creation of the following issue:
- [Feature] Associate images with community and project members on CC Open source ccos-website-source#869 - which is now blocked
One of the localizations made was the decision to use Datatables for styling the tables on the website. This change was included in this PR;
Project list page
- refactored project list page ccos-website-source#867
In this PR, the featured projects was made to align with the same on the home page, and the active project was maintained in a table format.
The page was restyled in efforts made by this PR;
Issue Finder Page
- refactor issue finder to replace vue with plain js and update html ccos-website-source#868
- feat: restyled CC Open Source issue-finder page ccos-website-source#891
- [Bug] Skills Not Being Properly displayed in Labels ccos-website-source#915
Related issue and PR to this
- [Feature] Remove vue and clean-up javaScript in CC Open Source ccos-website-source#864
- Remove Vue and simplify & update NPM modules ccos-website-source#887
- [Bug] Incorrect Rendering of Issue Titles with Special Characters on The Issue Finder Page ccos-website-source#908
- fixed special character display bug on issue-finder ccos-website-source#911
- fixed skill not rendering properly on issue-finder ccos-website-source#920
Project idea page
- refactored project-idea page to align with vocab markup ccos-website-source#871
- feat: restyled project ideas page of work program section ccos-website-source#910
Blog Page
This refactored the blog page to match the vocab-context for blog in this pr, this also involved making changes to the pagination
Another pr made in regards the issue above, for refactoring the page for each author to align with vocab's markup for person
- refactored code to align with vocab markup for person ccos-website-source#865
It was in this pr, as stated in this comment that the route to dynamically add classes provided by vocabulary to reflect the page's styles was decided.
To refactor the page that displays all authors;
A pr was made to add the blog-index class for the blog post styles. Also, in this pr, pagination current display was fixed
After the refactoring and due to the removal of legacy styles from the websites, some elements were not rendering properly, this was addressed in the issue and pr below,
An issue was raised to reduce the author picture size in the blog;
- [Feature] Reduce Author Image Size for Blog Posts ccos-website-source#918
and a pr was created - removed featured class to remove blog highlight ccos-website-source#927
Todo
- Localize breadcrumb and secondary menu dropdowns
Legal Database (Legal DB)
- creativecommons/legaldb: CC Legal Database: curated repository of Case Law and Scholarship data from around the world in a Django based website.
Todo: decide on design Implenemtation strategies for-
- FAQ ? to be a localized feature or implemented upstream in vocabulary
- Search input on FAQ Page, Cases and Scholarship
- Color scheme on page: Cases currently use a red colour that can be updated to Vocabulary brand color tomato. For scholarship: Vocab color green or vocab dark green.
- Submission Page
Todo Open Issues -
- [Feature] update vocabulary design system in project cc-archive/legaldb#280
- [Feature] Improve LegalDB Header for Clarity and Consistency cc-archive/legaldb#279
- [Feature] Implement datatables in scholarship Page cc-archive/legaldb#278
- [Feature] Implement datatables in Cases Page cc-archive/legaldb#277
- [Feature] 404 page refactor and redesign cc-archive/legaldb#281
Search Portal
- creativecommons/search: Creative Commons Search Portal
List of Issues Opened during the Outreachy Period - [Feature] Define CC Abbreviation in the Search Portal Description search#321
- [Feature]Header and Input Styling Not Aligning with vocabulary search#322
- [Feature] Remove Global Summit from the Explore CC Menu search#325
- [Feature] 404 page refactor and redesign search#326
- [Feature] update footer to reflect upstream vocab changes search#329
- [Feature] Update Vocabulary Design System search#331
- [Feature] update vocabulary in downstream implementation search#333
PRs Opened
- defined cc abreviation in description section search#323
- fix: aligned search input with vocab search#324
- updated footer to reflect upstream changes for form validation search#330
The PRs below were to update the search portal with the latest vocabulary version
- fix: Remove Global Summit from Explore CC menu search#327 - this pr to remove the global summit was as a result of work done in vocabulary in this pr: [Feature] Remove Global Summit from the Explore CC Menu #332
an update to the vocabulary was made twice, listed below
- update vocabulary to ed7d289 search#332
- update vocabulary to e32c3cb search#334 - an update to reflect efforts made in [Bug] pagination
navelementwidthof100%causes horizontal overflow on viewports<=widths of680px#335 and [Bug]imgelement overflows on thedefault-pagecontext #337
a pr to unify the 404 pages across all ancillary websites was made, as a similar effort was done here:
- [Feature] 404 page refactor ccos-website-source#877
- refactor 404 page to align with vocab markup search#328
Resource Archive
- creativecommons/cc-resource-archive: Collection of resources on Creative Commons (CC) tools and other open topics
Issues opened during the outreach period
- [Feature] Remove Global Summit from the Explore CC Menu cc-resource-archive#361
- [Feature] Update Vocabulary Design System cc-resource-archive#362
- [Feature] update footer to reflect upstream vocab changes cc-resource-archive#363
- [Feature] update vocabulary in downstream implementation cc-resource-archive#367
- [Feature] Add Card Design to Thumbnails for Improved Contrast cc-resource-archive#359
PRs
Metadata
Metadata
Assignees
Labels
Type
Projects
Status