|
| 1 | +title: Outreachy Midpoint Progress With Creative Commons |
| 2 | +--- |
| 3 | +categories: |
| 4 | +outreachy |
| 5 | +outreachy-2024 |
| 6 | +open-source |
| 7 | +community |
| 8 | +--- |
| 9 | +author: Queen |
| 10 | +--- |
| 11 | +series: outreachy-dec-2024-consolidating-and-implementing-vocabulary |
| 12 | +--- |
| 13 | +pub_date: 2025-01-19 |
| 14 | +--- |
| 15 | +body: |
| 16 | +# Outreachy Midpoint Blog Post |
| 17 | + |
| 18 | +Hi there! My name is Queen, and I’m an Outreachy intern at Creative Commons. My project involves consolidating and implementing the Vocabulary design system across Creative Commons ancillary websites. In this post, I’ll share my progress and key takeaways from the first half of my internship. |
| 19 | + |
| 20 | +## Project Overview |
| 21 | + |
| 22 | +The goal of my project is to implement the Vocabulary design system across several Creative Commons ancillary websites like the [CC Open Source](https://opensource.creativecommons.org/), [CC Legal Database](https://legaldb.creativecommons.org/en/), [CC Search Portal](https://search.creativecommons.org/), and [CC Resource Archive](https://resources.creativecommons.org/). |
| 23 | +## Progress So Far |
| 24 | + |
| 25 | +### Phase One: Refactoring Markup to Align with Vocabulary |
| 26 | + |
| 27 | +In the first phase, I focused on refactoring the markup to align with Vocabulary’s components and context. Here are the pull requests (PRs) merged during this phase: |
| 28 | + |
| 29 | +- [PR 118](https://github.com/creativecommons/creativecommons.github.io-source/pull/118): Refactored the recent blog post section on the homepage. |
| 30 | +- [PR 856](https://github.com/creativecommons/creativecommons.github.io-source/pull/856): Refactored the homepage markup to align with Vocabulary components. |
| 31 | +- [PR 862](https://github.com/creativecommons/creativecommons.github.io-source/pull/862): Updated `page-with-toc.html`, which serves as a template for many pages. |
| 32 | +- [PR 863](https://github.com/creativecommons/creativecommons.github.io-source/pull/863): Initially, I planned to refactor the markup to Vocabulary’s context, but after feedback from my mentor, I instead removed legacy class names while retaining the table structure. |
| 33 | +- [PR 865](https://github.com/creativecommons/creativecommons.github.io-source/pull/865): Refactored the blog’s author page to match Vocabulary’s “person” context. |
| 34 | +- [PR 866](https://github.com/creativecommons/creativecommons.github.io-source/pull/866): Updated the blog structure to follow Vocabulary markup. |
| 35 | +- [PR 867](https://github.com/creativecommons/creativecommons.github.io-source/pull/867): Refactored the Project List page, leaving the table markup intact but removing old styles. |
| 36 | +- [PR 868](https://github.com/creativecommons/creativecommons.github.io-source/pull/868): Refactored the Issue Finder tool, replacing Vue.js with plain JavaScript. Although removing Webpack will happen later, this PR set the stage for future improvements. |
| 37 | +- [PR 870](https://github.com/creativecommons/creativecommons.github.io-source/pull/870): Aligned the Authors page with Vocabulary’s team styling. |
| 38 | +- [PR 871](https://github.com/creativecommons/creativecommons.github.io-source/pull/871): Refactored the Project Ideas page, incorporating Vocabulary’s project markup and removing legacy styles. |
| 39 | +- [PR 873](https://github.com/creativecommons/creativecommons.github.io-source/pull/873): Dynamically updated the body tag’s class in `layout.html` and added a body-class field to the `blog.ini` model file for consistent styling. |
| 40 | +- [PR 880](https://github.com/creativecommons/creativecommons.github.io-source/pull/880): Refactored `page-with-title.html` (used by CC Tech Archives) to align with Vocabulary. |
| 41 | +- [PR 886](https://github.com/creativecommons/creativecommons.github.io-source/pull/886): Updated the header component markup and removed old class names. |
| 42 | + |
| 43 | +### Phase 2: Adding Local Styles |
| 44 | + |
| 45 | +After refactoring the markup, I moved on to styling sections that Vocabulary doesn’t cover. Here are some of the merged PRs so far; |
| 46 | + |
| 47 | +- [PR 888](https://github.com/creativecommons/creativecommons.github.io-source/pull/888): Added local styles based on Creative Commons’ main website for the homepage and other sections, such as “Get Involved” and “Featured Projects.” |
| 48 | +- [PR 891](https://github.com/creativecommons/creativecommons.github.io-source/pull/891): Created a new `issue-finder.css` file to restyle the Issue Finder page while removing legacy styles but maintaining legacy design. |
| 49 | +- [PR 898](https://github.com/creativecommons/creativecommons.github.io-source/pull/898): Integrated Datatables and jQuery by adding them to a vendor folder. Styled the table and code blocks using existing website styles. |
| 50 | +- [PR 990](https://github.com/creativecommons/creativecommons.github.io-source/pull/990): Styled the CC Search archive table using Datatables. |
| 51 | + |
| 52 | +## Current Status |
| 53 | + |
| 54 | +I’m a little behind schedule—I had planned to start work on the Legal Database website by now. However, I’m wrapping up the CC Open Source website this week and will move on to the next phase soon. |
| 55 | + |
| 56 | +## Lessons Learned |
| 57 | + |
| 58 | +This internship has been an incredible learning journey. Here are some key takeaways: |
| 59 | + |
| 60 | +### Technical Skills: |
| 61 | +- I’ve become comfortable working with [Lektor](https://getlektor.com/), a static site generator that was entirely new to me. |
| 62 | +- Implementing the Vocabulary design system has improved my problem-solving skills, especially when dealing with legacy code and adapting the system to fit unique website needs. |
| 63 | +- To localize the table component, I had to read the [DataTables documentation](https://datatables.net/), which helped my ability to learn on the go. |
| 64 | + |
| 65 | +### Collaboration: |
| 66 | +Working with mentors has taught me the value of clear communication, especially when addressing blockers or seeking feedback. |
| 67 | + |
| 68 | +### Project Management: |
| 69 | +Breaking tasks into smaller chunks, prioritizing effectively, and maintaining consistent progress have been critical in managing this project. |
| 70 | + |
| 71 | +This experience has significantly boosted my confidence as a front-end developer, particularly in creating user-friendly and accessible interfaces. |
| 72 | + |
| 73 | +That’s it for now! Thank you for reading about my progress. I’m excited to see how the second half of this journey unfolds! |
0 commit comments