hey everyone! i wanted to ask is it necessary to do this with react?? can't i do it with html css and js? also m i late to do this task?

In T388248#10654241, @Ankita2005 wrote:

hey everyone! i wanted to ask is it necessary to do this with react?? can't i do it with html css and js? also m i late to do this task?

"Any frontend framework or library of your choice" ... This is according to the instruction. But if you are most comfortable with HTML, CSS and JS, I believe it is better you use those.

Hello everyone, I'm Hikmah, an outreachy applicant. Really looking forward to contributing

@Pamisijohn thanks for replying!

Hi everyone, I hope your contribution is going fine. If you face any issues while completing the task, don't fail to reach out.

In T388248#10656275, @Rubylena wrote:

Hi everyone, I hope your contribution is going fine. If you face any issues while completing the task, don't fail to reach out.

Are you able to contribute to other tasks berond the microtask provided here?

Hello guys how re u all doing.... i hope we re all pushing it goodluck to us

Please can anyone assist me on how to start contributing to the code base

In T388248#10656488, @Gvutong wrote:

In T388248#10656275, @Rubylena wrote:

Hi everyone, I hope your contribution is going fine. If you face any issues while completing the task, don't fail to reach out.

Are you able to contribute to other tasks berond the microtask provided here?

For this particular project, I'm only aware of this single task. Other outreachy wikimedia projects have other mico tasks

@Gv

In T388248#10656519, @Folushojimi wrote:

Please can anyone assist me on how to start contributing to the code base

Hii, for this particular project I don't think there is a particular codebase to be worked on. "For this task, you're required to set up the infrastructure for the Frontend Web Application." From the instruction, we are to build a web app with the specification that is outlined in the task description

In T388248#10656519, @Folushojimi wrote:

Please can anyone assist me on how to start contributing to the code base

Hi @Folushojimi We are to move all discussions to Zulip, so you should ask questions there.

The first task for everyone to do is listed above. If you need further assistance, you can ask on Zulip, and I will be glad to help.

Please I am currently facing an issue with making my PAWS notebook public. Despite multiple attempts, my PAWS environment is still showing "tools.paws" as the owner instead of my user account. I have tried moving files to my account, but I have not been able to resolve the issue. if anyone have had this issue, please I need help on how to resolve this issue.

@Kaosiso Please go to Zulip and ask, and then I will provide the answer.

In T388248#10656622, @Kaosiso wrote:

Please I am currently facing an issue with making my PAWS notebook public. Despite multiple attempts, my PAWS environment is still showing "tools.paws" as the owner instead of my user account. I have tried moving files to my account, but I have not been able to resolve the issue. if anyone have had this issue, please I need help on how to resolve this issue.

Hi @Kaosiso You shuld ask all questions on zulip henceforth, but this is how i solved a similar challenge to yours:

Login to Paws using this link, this is the link I used:

https://hub-paws.wmcloud.org/hub/login

Login with your mediawiki to create a note, add the github link to your project.

Then, you can simply edit the URL of your PAWS note to create your public PAWS notebook link:"

https://public-paws.wmcloud.org/User:yourusername/youprojectname.ipynb

by changing "yourusername" to your own mediawiki username and "youprojectname" to what you named your project as.

Let me know if you face any furthur issue.

In T388248#10656590, @Preciousdesk10 wrote:

In T388248#10656519, @Folushojimi wrote:

Please can anyone assist me on how to start contributing to the code base

Hi @Folushojimi We are to move all discussions to Zulip, so you should ask questions there.

The first task for everyone to do is listed above. If you need further assistance, you can ask on Zulip, and I will be glad to help.

Thank you for the information! I need some clarification regarding the task. Could you please share the link to the Zulip stream/topic so I can ask my questions there?

In T388248#10656518, @Folushojimi wrote:

Hello guys how re u all doing.... i hope we re all pushing it goodluck to us

Again: Please move general discussion to Zulip. Thank you.

In T388248#10650660, @Aklapper wrote:

Please move general discussion to Zulip. Thank you.

@Snowy04 here is the link Zulip.

Hi guys am just done with my intro task... please how do I start contributing to this project code base... Please i need some one who can guide me

In T388248#10656630, @Preciousdesk10 wrote:

In T388248#10656622, @Kaosiso wrote:

Please I am currently facing an issue with making my PAWS notebook public. Despite multiple attempts, my PAWS environment is still showing "tools.paws" as the owner instead of my user account. I have tried moving files to my account, but I have not been able to resolve the issue. if anyone have had this issue, please I need help on how to resolve this issue.

Hi @Kaosiso You shuld ask all questions on zulip henceforth, but this is how i solved a similar challenge to yours:

Login to Paws using this link, this is the link I used:

https://hub-paws.wmcloud.org/hub/login

Login with your mediawiki to create a note, add the github link to your project.

Then, you can simply edit the URL of your PAWS note to create your public PAWS notebook link:"

https://public-paws.wmcloud.org/User:yourusername/youprojectname.ipynb

by changing "yourusername" to your own mediawiki username and "youprojectname" to what you named your project as.

Let me know if you face any furthur issue.

i have logged in but my paws-public link is still not working. I need urgent help thanks

In T388248#10656666, @Preciousdesk10 wrote:

In T388248#10650660, @Aklapper wrote:

Please move general discussion to Zulip. Thank you.

@Snowy04 here is the link Zulip.

is the channel in ZULIP named "outreach 2025" ?

In T388248#10656769, @Nedjwa97 wrote:

In T388248#10656666, @Preciousdesk10 wrote:

In T388248#10650660, @Aklapper wrote:

Please move general discussion to Zulip. Thank you.

@Snowy04 here is the link Zulip.

is the channel in ZULIP named "outreach 2025" ?

yes

@Pamisijohn hey !! i have completed the task can u tell me what to do after this?? i m really confused honestly , sorry but m a beginner!

In T388248#10657037, @Ankita2005 wrote:

@Pamisijohn hey !! i have completed the task can u tell me what to do after this?? i m really confused honestly , sorry but m a beginner!

You can ask this question in Zulip. However, since you are done, you can also contribute to other projects in Wikipedia.

hi...my name is jaya rani...I have completed the task how to add github link to paws..

Hey, please anyone has idea of how to create a public paws note link

In T388248#10659507, @Folushojimi wrote:

Hey, please anyone has idea of how to create a public paws note link

Try to scroll up. Someone explained how to do it

Hi, Could you please advise me on the appropriate public link to use for recording contributions on the Outreachy website? Should it be a GitHub link or a public Paws link?

What's the next step after completing this task and mailing it to the mentor for feedback?

Again: Please move general discussion to Zulip. Thank you.

Hi Mentors,

I have completed the introductory task and have already emailed the project details. Here is the deployed application link: https://outreachy-task.vercel.app/.

If needed, I can provide additional details here as well. I would appreciate your review and any feedback on my submission.

Looking forward to your response. Thank you for your time!

Best,
Ahzam

Hello @Syed-Ahzam-Imam, you are to send the above message to the mentor's email address, after creating your public paws notebook.

In T388248#10671183, @Syed-Ahzam-Imam wrote:

Hi Mentors,

I have completed the introductory task and have already emailed the project details. Here is the deployed application link: https://outreachy-task.vercel.app/.

If needed, I can provide additional details here as well. I would appreciate your review and any feedback on my submission.

Looking forward to your response. Thank you for your time!

Best,
Ahzam

You to share the repo hosting link not the web hosting

how is going y'all! just sent the link to paw note on email

Hi everyone, I'd like to ask if there's a template that can guide me in filling the final application?

Please ask general questions unrelated to the project itself in Zulip instead.

@Oyelola_Victoria congratulations 🎉. Many are called but you were chosen. Congrats 🥳👏

@Gopavasanth Thank you so much! I’m super excited to be part of the program and really grateful for the opportunity 🙏
I’ll start putting my project timeline together soon and will reach out if I have any questions. Looking forward to the journey ahead!

@Vicolas11 Thank you very much!! 🥳

Week 1 (2 June – 6 June) Update

Task Progress

• Met with one of my mentors for an onboarding session
• Clarified the project scope and timeline
• Explored how CentralNotice works and reviewed existing banners
• Compiled a detailed feature list covering simple banners up to complex fundraising flows
• Sketched low-fidelity wireframes for the tool’s UI sections
• Started a design draft in Figma

Challenges Faced

• No existing prototypes: Figuring out which banner features to support without sample designs took time
• CentralNotice complexity: Working out the implementation details of MediaWiki templates, inline JS, and translation tags felt overwhelming and is still a bit confusing

Learnings & Skills Gained

• Gained a clearer understanding of CentralNotice’s structure and behavior
• Sharpened my UI planning skills by thinking through how form inputs map to code output

Week 2 (9 June – 13 June) Update

Task Progress

• Presented the design prototype created in Week 1 to my mentor and a lead strategist
• Reviewed feedback from the meeting and adjusted the project direction based on their advice, shifting focus from building banners entirely from scratch to improving the prototype for working with existing templates
• Explored ideas for design sharing and incorporating a landing page for managing past designs and templates

Challenges Faced

• None this week

Learnings & Skills Gained

• Practiced iterating on design ideas based on feedback and changing project requirements
• Learned to think more deeply about data management and how it affects user experience

Week 3 (16 June – 20 June) Update

Task Progress

• Presented the improved design based on feedback received in the last meeting.
• Got the go-ahead to begin development in the next sprint.
• Finalized the design with remaining details like element-specific input fields, tooltips, and validation messages.
• Submitted and was granted membership access to Toolforge.
• Set up the tool account on Toolforge: centralnotice-banner-editor
• Created a new repository linked to the tool for source code management.

Challenges Faced

• Initial confusion between Toolhub and Toolforge, which was clarified by my mentor.

Learnings & Skills Gained

• Learned how to set up and document a new open-source tool, from metadata to repository creation.
• Improved my understanding of software licensing and its implications for open source work.

Week 4 (23 June – 27 June) Update

Task Progress

• Shared the updated version of the design with my mentor.
• Learned how to create a Phabricator project with mentor guidance after initially being blocked.
• Successfully created a Phabricator project linked to Toolforge.
• Learned how we’ll use Phabricator to manage tasks and track progress.
• Got links to commonly used CentralNotice banners from my mentor to reference as templates.
• Started learning Vue to prepare for using Codex.
• Practiced by building small projects and components alongside studying core Vue concepts.

Challenges Faced

• Blocked from creating a Phabricator project initially, resolved after a screen-sharing session with my mentor.

Learnings & Skills Gained

• Learned how Phabricator is used to manage tasks and workflows.
• Gained foundational knowledge of Vue.js, including: Composition API, Templates, Reactivity (ref, reactive), Directives, Styling & Class Bindings, Events & Event Modifiers, Key Modifiers, Two-way Data Binding, Computed Properties, Watchers, Forms & Validation, Components, Props & Emits, Provide/Inject, Dynamic Components, Keep-Alive, Slots (Default & Named), Scoped Styles, Lifecycle Hooks, Composables, Routing, and API requests.
• Still learning about Pinia.

Week 5 (30 June – 4 July) Update

Task Progress

• Discussed next steps with my mentor: focus shifted to practicing Vue and Codex, and building components based on my project design.
• Continued learning Vue and began exploring how to work with Codex components.
• Learned how to install Codex and use its components in a Vue project.

Challenges Faced

• My laptop crashed and is currently under repair, which significantly slowed my productivity.

Learnings & Skills Gained

• Gained experience with installing and using Codex components in Vue.

Week 6 (7 July –11 July) Update

Task Progress

• Bootstrapped the centralnotice-banner-editor project using Vite with Vue 3, TypeScript, Pinia, Vue Router, and LESS.
• Integrated Codex UI components, icons, and design tokens to align with Wikimedia’s design system.
• Set up testing infrastructure using Vitest (unit tests) and Cypress (end-to-end tests).
• Configured ESLint and Stylelint with Wikimedia’s coding conventions.
• Added essential project files: README.md, LICENSE, and CONTRIBUTING.md, including setup instructions, contribution guidelines, and license information.

Challenges Faced

• Ran into package compatibility issues because the version of ESLint installed by Vue was newer than the one required by eslint-config-wikimedia.
• Progress was delayed during the week while I waited for my laptop to be repaired and had to use someone else’s. I got a new one over the weekend, so that should eliminate further delays moving forward.

Learnings & Skills Gained

• Gained experience configuring different Git identities (local vs global) to manage work and personal commits separately.
• Became more confident in setting up project tooling and writing documentation for open source collaboration.

Week 7 (July 14–18) Update

Task Progress

• Started building the core implementation of the tool.
• Implemented and designed a set of reusable components to standardize input styles across the app.
• Built form components for customizing banner element properties:
  • Included input validation and visual feedback where necessary (e.g., link fields and SVG uploads)
  • Integrated Codex CdxTooltip for contextual help on form inputs, such as icon-only buttons.
  • Ensured screen reader accessibility with appropriate attributes.
• Added a Not Found page to handle unknown routes
• Updated CONTRIBUTING.md with installation instructions for contributors without developer access to the GitLab repo.

Challenges Faced

• Since Vue, LESS, and Codex are still fairly new to me, I spent time outside coding learning how to implement features in ways that align with Wikimedia’s frontend standards.

Learnings & Skills Gained

• Improved understanding of reusability in Vue 3.
• Grew more confident in styling with LESS and using Codex components with TypeScript.
• Improved understanding of how to work with Codex design tokens.
• Learned how to open merge requests on GitLab.

Week 8 (July 21–25) Update

Task Progress

• I began syncing all input components in the banner editor with Pinia to enable real-time editing and centralized state management. I focused on lifting internal state to the parent so it can be tracked in the global store.
• I encountered challenges lifting state for these components, but I practiced several methods for achieving two-way binding in Vue, including using defineModel, computed properties with getters and setters, and watch combined with emit.
• I built the TemplatesSidebar for selecting and searching for banner templates.
• I added the EditorHeader component, which contains a home navigation link and buttons for toggling the sidebar visibility, switching viewport options, sharing designs, viewing the generated banner code, and toggling the documentation menu.

Challenges Faced

• It took some trial and error to find the cleanest way to sync values with the parent.

• I also ran into a brief Git issue while fixing my commit history but was able to resolve it.

Learnings & Skills Gained

• Explored different approaches to two-way data binding in Vue
• Learned how to structure components for reusability and scalability
• Improved my understanding of repository organization and good commit hygiene

Week 9 (July 28 – August 1) Update

Task Progress

• Created a Pinia store to manage banner templates.
• Updated the TemplatesSidebar component to use the store instead of a hardcoded array.
• Added properties for the default v2 CentralNotice banner template and started working on rendering and editing.
• Updated relevant components to include missing units like em that are used in template styling.
• Got the v2 template to render properly and tested it in CentralNotice by pasting the banner code from the editor directly.
• Started refactoring the rendering logic to support multiple templates and responsive layouts.
• Reworked how positioning works. Previously, users could apply both numerical positioning and alignment buttons at the same time, which caused conflicts. Now only one method is allowed at a time.

Challenges Faced

• The first rendering logic couldn’t support responsive layouts or multiple elements, so I had to abandon it and I am still working on a new approach.
• Making position inputs and alignment buttons work without interfering meant syncing the state of two independent components with complex internal structures. I rewrote the logic multiple times and ended up replacing v-model with pushing updates manually because it did not work no matter what I did.
• Figuring out how to cleanly apply styles during editing versus during export was tricky.
• Tracking many editable properties across multiple elements was a bit challenging. TypeScript helped.

Learnings & Skills Gained

• Revisited how ref, computed, and watch can be used depending on reactivity needs.
• Went over managing state in Pinia to learn the best way to handle the templates.

Week 10 (August 4–8) Update

Task Progress

• Resolved the blocker with positioning and rendering banner elements.
• Implemented support for banners with multiple image or text elements.
• Completed the image editing feature, including secure rendering of uploaded SVG images.

Challenges Faced

• Shared reference issues that caused edits to affect unrelated elements or viewports.
• Implementing editing for all banner elements at once was tricky to maintain, so I narrowed focus to completing image editing first.

Learnings & Skills Gained

• Improved understanding of deep cloning and when to generate new objects to avoid reference issues in JavaScript.
• Learned how to structure reusable factory functions for generating default state in Vue applications.
• Gained experience securely handling and rendering inline SVGs.

Week 11 (August 11–15) Update

Task Progress

• Completed all editing features.
• Started implementing the code generation feature.
• Got the banner to render on CentralNotice with generated code from the editor.

Challenges Faced

• Figuring out why styles did not apply in CentralNotice when using randomly generated IDs as selector prefixes.
• Formatting the generated code properly.

Learnings & Skills Gained

• Got reminded of the cascading aspect in CSS when generated styles affected breakpoints where they were not defined.

Week 12 (August 18–22) Update

Task Progress

• Continued work on the code generation feature and resolved style cascade issues.
• Refactored the close button positioning by separating it from other banner elements wrapped in a link to make it clickable.
• Fixed bugs caused by unsynced parent state when switching between elements.
• Started implementing responsiveness for 3 screen sizes for the editor, including the header, sidebars, and an oversized canvas that can be panned with basic scaling/zooming controls.

Challenges Faced

• Spent more time than expected on responsiveness.

Learnings & Skills Gained

• Gained a deeper understanding of two-way data binding in Vue.

Week 13 (August 25–29) Update

Task Progress

• Finalized the responsiveness of the editor.
• Added a local storage feature for design persistence.
• Worked on the design sharing feature, but hit challenges with shortening long URLs due to restrictions in Wikimedia’s URL shortener.
• Implemented the oneSize feature, which allows users to apply a single style across all viewports, instead of styling for three different sizes every time.
• Started working on the landing page for displaying available templates, edited banners, and favourites.

Challenges Faced

• Based on my findings, Wikimedia’s URL shortener only works with allowed domains and enforces a maximum length of 2,000 characters, making it incompatible with the tool for now.
• Generating accurate banner thumbnails was tricky because the editor uses regular DOM elements rather than canvas. I had to research reliable solutions before settling on dom-to-image.

Learnings & Skills Gained

• Improved understanding of using Vue Router with dynamic routes and query parameters.

Can the link to the final tool please be shared somewhere? Did I miss an email maybe?

@Oyelola_Victoria, @MHorsey-WMF: Where to find the result?

Hi @Aklapper,

During the internship, I implemented the core form-based tool that generates CentralNotice banner code from banner templates. All of my development work is visible in this repository: https://gitlab.wikimedia.org/toolforge-repos/centralnotice-banner-editor.

Deployment was outside my internship scope, and post-internship I applied a fix that was blocking deployment when prompted by my mentor.

Ah, thanks a lot for the link!