Skip to content

feat(site): migrate website from angularjs to sveltekit in site - #2823

Draft
Yashh56 wants to merge 24 commits into
devicons:developfrom
Yashh56:feat/website
Draft

Yashh56 wants to merge 24 commits into
devicons:developfrom
Yashh56:feat/website

Conversation

@Yashh56

@Yashh56 Yashh56 commented Nov 1, 2026 •

Copy link
Copy Markdown
Member

Double check these details before you open a PR

  • PR does not match another non-stale PR currently opened

Features

This PR migrates the Devicon documentation website from the legacy end-of-life AngularJS 1.2 setup in docs/ to a modern SvelteKit 2 application located in site/ within this repository, along with an automated, future-proof contrast system and local development asset pipeline.

Key Capabilities & Enhancements

  • Feature Parity with Legacy Site:

    • Live icon search by name, alternate names, and aliases.
    • Category and tag filtering.
    • Light and dark theme toggle with persistence in localStorage.
    • Detailed modal view for SVG and font versions with code snippets.
  • Automated, Future-Proof Contrast & Theme System:

    • Eliminated Hardcoded Logo Arrays: Removed static arrays (MONO_DARK_LOGOS, MONO_WHITE_LOGOS) from the site code.
    • Mathematical HSL Detection: Dynamic HSL calculation classifies logos into dark monochrome (s < 0.20 && l < 0.35) and white monochrome (s < 0.20 && l > 0.85), requiring zero code maintenance when contributors add new monochrome logos.
    • Optional Schema Override: Supported optional theme?: "dark" | "light" | "color" in devicon.json for edge cases.
    • Non-Destructive Inversion: Replaced destructive brightness-0 invert with pure invert CSS filtering, preserving internal glyphs, letters, and cutouts on badge icons (e.g. Ansible, Next.js, KarateLabs, Eleventy).
  • Local Asset Streaming & Resilient Fallback Chain:

    • Vite Local Serving Middleware: Connect middleware in site/vite.config.ts streams ../devicon.json and ../icons/* directly during development and preview, enabling 0ms latency and full offline support for newly added local icons.
    • Priority-Ordered Candidate URLs: Resolves candidate URLs ([localUrl, npmUrl, ghUrl] in DEV, [npmUrl, ghUrl, localUrl] in PROD).
    • Resilient Fallback Recovery: Automatically steps to next fallback candidate on <img> load error in both IconCard.svelte and IconModal.svelte.
    • Standalone SVG Validation: Fixed missing xmlns="http://www.w3.org/2000/svg" in githubcopilot-original.svg and added a streaming middleware safeguard in Vite.
  • Brand Color Alignment & CI Hygiene:

    • Aligned official brand colors in devicon.json for Bruno, New Relic, TinyGo, DuckDB, Dynatrace, GitHub Codespaces, Lodash, SQLAlchemy, Sanity, Splunk, and StencilJS.
    • Added CI saturation validation in .github/scripts/check_icon_pr.py ensuring contributors provide official brand colors instead of placeholder #000000 or #ffffff for colored SVGs.
  • New Website Features:

    • Sorting Options: Dropdown to sort icons by Name (A-Z, Z-A) and Newest.
    • Copy Raw SVG: Added "Copy SVG Code" button to copy clean inline SVG markup directly to the clipboard.
    • Colored Font Toggle: Checkbox to toggle between monochrome and .colored icon font classes.
    • Contrast / Checkerboard Background: Toggle in modal to inspect transparent SVGs against 4 surface modes (dark, light, checkerboard, transparent).
    • Dynamic Release Versioning: Fetches the latest release version from GitHub Releases API (devicons/devicon/releases/latest) with npm registry fallback.
    • Hero Media Card: Integrated Steve Ballmer easter egg media card in the hero window frame (ballmer.gif).
  • CDN Defect Resolution (closes [BUG]: CDN Image not found #2325):

    • Replaced GitHub repository tree URLs with jsDelivr npm endpoints (https://cdn.jsdelivr.net/npm/devicon@${version}/icons/...) and GitHub raw fallback.
    • Resolves the 50 MB repository package limit that previously triggered HTTP 404 errors on large icon sets (e.g. spring, jasmine).
  • Developer Experience & Tooling:

    • Added root scripts in package.json: npm run site:dev, npm run site:build, npm run site:check, npm run site:preview, and npm run dev.
    • Updated README.md local setup instructions to reference npm run site:dev.
  • CI/CD Automation:

    • .github/workflows/check_site_pr.yml: Validates types (svelte-check), linter (biome), and Vite production build on PRs touching site/**.
    • .github/workflows/deploy_site.yml: Automates static build and deployment to GitHub Pages via GitHub Actions on push to master.
  • Decommissioning:

    • Completely removed obsolete AngularJS 1.2 files, assets, and directories from docs/.

This PR closes #2815, #2325, #1874, #2133, #1888, #1698

Notes

  • In-Tree Monorepo Structure: The website lives directly in site/ with isolated dependencies (site/package.json and site/pnpm-lock.yaml).
  • Isolation from Icon PRs: Website workflows are path-filtered to site/**. The main icon PR check workflow (check_icon_pr.yml) runs only on new icon: / update icon: PRs and will not trigger on website changes.
  • GitHub Pages Configuration: Once merged, repository settings under Settings > Pages > Source should be set to GitHub Actions to allow deploy_site.yml to automatically build and publish site/build/ to devicon.dev.
  • Verification Receipts:
    • npm run site:check: Passed with 0 errors and 0 warnings.
    • pnpm --dir site lint: Passed with 0 errors.
    • npm run site:build: Static production build generated cleanly in ~3.5s via @sveltejs/adapter-static (index.html, 404.html, CNAME).

@Yashh56
Yashh56 requested review from a team, Snailedlt, canaleal, lunatic-fox and weh and removed request for a team November 1, 2026 17:16
@Yashh56
Yashh56 marked this pull request as draft November 1, 2026 17:41
@Yashh56
Yashh56 marked this pull request as ready for review November 1, 2026 17:46
@Yashh56

Yashh56 commented Nov 1, 2026

Copy link
Copy Markdown
Member Author

Deployed this UI for testing on yashh56.github.io

@Snailedlt Snailedlt added the website Website related enhancements label Nov 1, 2026
@Snailedlt

Copy link
Copy Markdown
Collaborator

this should probably be changed to a draft PR since it's still being worked on :)

@Yashh56
Yashh56 marked this pull request as draft November 2, 2026 07:47
…pipeline (devicons#2815)

- Replace hardcoded logo arrays with automated HSL contrast detection in iconStore
- Apply non-destructive invert CSS filter for dark badge icons in dark mode
- Add Vite Connect middleware to serve devicon.json and stream local icons with XMLNS validation
- Implement candidate URL fallback chain for resilient SVG rendering across dev and prod
- Add missing xmlns attribute to GitHub Copilot SVG assets
- Align brand colors for 11 logos and add CI saturation check in check_icon_pr.py
- Remove redundant static steve.gif asset
…nology Mosaic, and engineering layout accents (devicons#2815)

- Replace placeholder meme media with an interactive Devicon Technology Mosaic
- Standardize Devicon green tokens (#10B981, #3ECF8E, #60BE86) across theme variables
- Add background developer blueprint grid and side margin engineering rails on layout
- Elevate icon explorer with restrained emerald hover borders and selected checkmark badges
- Enhance Navbar and Footer with official multi-tone Devicon shield SVG and live version pills
- Add emerald package manager tabs and copy feedback to integrations section

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement website Website related enhancements

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants