[Mahitha-pasupuleti]

Description

Implements the Medium auto-poster workflow.

Adds a dedicated Medium tab in the Announcements section where volunteers can compose Medium articles, preview and copy the prepared content, and follow the publishing workflow.

Validates required fields, provides clipboard copy buttons, suggests tags based on keywords from the article title and content, and updates dark-mode styling so the new UI stays readable.

Related PRs (if any):

None.

Main changes explained:

• Create src/components/Announcements/platforms/medium/index.jsx for the Medium auto-poster form, including article title, content, tags, optional canonical URL, copy buttons, preview, and publishing options.
• Update src/components/Announcements/index.jsx to route the Medium tab to the new component instead of the generic SocialMediaComposer.
• Add Medium-specific styling for the article form, preview cards, tag suggestions, responsive layouts, and dark-mode support.
• Add tag suggestions based on keywords extracted from the article title and content, with the ability to add tags manually.
• Add clipboard functionality to copy individual fields and the prepared article content.
• Keep the implementation frontend-only without Medium API requests or backend dependencies.

How to test:

1. Check out this branch.
2. Run yarn install, then npm run start:local.
3. Sign in as an admin and navigate to /announcements.
4. Select the Medium tab.
5. Enter an article title and content, and verify that required-field validation works.
6. Enter tags manually and verify that suggested tags are generated from relevant keywords in the title and content.
7. Use the copy buttons to verify that the selected content is copied and the appropriate feedback message appears.
8. Verify that the article preview reflects the entered title, content, and tags.
9. Test the publishing-related controls and confirm that the interface does not report successful publication without a confirmed publishing integration.
10. Toggle dark mode and verify that the form, preview, buttons, and tag suggestions remain readable.
11. Enter long titles, content, and tags to verify that the layout wraps correctly without overflowing its containers.
12. Verify that the component works at different screen sizes.

Screenshots or videos of changes:

Video Result

Note:

This implementation provides the Medium auto-poster frontend only. Medium's API is no longer supported for new integrations, so actual publishing to Medium requires a separately verified and supported integration method.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	8d553f3
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6aed0ca1e0597fe32cec4c16
😎 Deploy Preview	https://deploy-preview-5670--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud