feat: overhaul of the branding by lammersbjorn · Pull Request #1174 · homarr-labs/dashboard-icons

lammersbjorn · 2025-04-17T00:46:17Z

Let him cook

TODO:

Copilot

Copilot reviewed 38 out of 39 changed files in this pull request and generated no comments.

Files not reviewed (1)

web/public/site.webmanifest: Language not supported

Comments suppressed due to low confidence (4)

web/src/app/icons/[icon]/page.tsx:40

[nitpick] The logic to format the icon name is duplicated in both metadata generation and the page component. Consider extracting this formatting into a utility function to ensure consistency and improve maintainability.

const formattedIconName = icon.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ")

scripts/generate_icons_page.py:1

Since the generate_icons_page.py script has been completely removed, please ensure that no dependent workflows or documentation references rely on it to avoid broken automation.

import json

.github/workflows/update_icons_and_resources.yml:80

The removal of the ICONS.md generation step might impact documentation updates. Confirm that this change is fully aligned with the current documentation workflow and that any necessary updates are applied elsewhere.

git pull --rebase origin ${{ github.ref_name }}

README.md:2

[nitpick] Consider standardizing the order of badges to clearly reflect the project's current management under homarr-labs and maintain consistency across the repository documentation.

[![jsDelivr hits](https://img.shields.io/jsdelivr/gh/hy/walkxcode/dashboard-icons?style=flat-square&color=%23A020F0)](https://www.jsdelivr.com/package/gh/walkxcode/dashboard-icons)

Copilot

Copilot reviewed 38 out of 39 changed files in this pull request and generated no comments.

Files not reviewed (1)

web/public/site.webmanifest: Language not supported

Comments suppressed due to low confidence (3)

web/src/components/grid-background.tsx:1

The entire GridBackground component has been removed; please confirm that all references to it have been updated to avoid runtime errors.

import { cn } from "@/lib/utils"

.github/workflows/update_icons_and_resources.yml:80

The ICONS.md generation step has been removed from the workflow; ensure that no downstream processes or documentation builds depend on this file.

git add ICONS.md

web/src/app/icons/[icon]/page.tsx:39

[nitpick] The icon name formatting logic is duplicated; consider extracting this conversion into a utility function to improve maintainability.

const formattedIconName = icon.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ")

Copilot

Pull Request Overview

This PR overhauls the branding and some UI components while updating metadata generation and workflow automation. Key changes include formatting updates, the introduction of new design elements and components, and the removal of ICONS.md generation scripts and steps.

Reviewed Changes

Copilot reviewed 45 out of 49 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
web/src/app/sitemap.ts	Updated formatting and consistent quotation style.
web/src/app/page.tsx	Converted metadata to an async function and added RecentlyAddedIcons.
web/src/app/not-found.tsx	Improved UI layout and added an icon submission section.
web/src/app/layout.tsx	Replaced Header with HeaderWrapper and added Footer; updated viewport.
web/src/app/icons/page.tsx	Updated metadata generation with dynamic totalIcons and new background glows.
web/src/app/icons/components.tsx	Adjusted styling and transitions for the search input.
web/src/app/icons/[icon]/page.tsx	Enhanced metadata and view with formatted icon names and additional glows.
web/src/app/error.tsx	Introduced an error page with retry and go-back options.
scripts/generate_icons_page.py & scripts/TEMPLATE.md	Removed as part of the overhaul.
README.md, CONTRIBUTING.md, CODE_OF_CONDUCT.md	Updated content and styling for branding consistency.
.github/workflows/*.yml	Removed ICONS.md generation steps to align with script removals.

Files not reviewed (4)

web/package.json: Language not supported
web/pnpm-lock.yaml: Language not supported
web/public/site.webmanifest: Language not supported
web/src/app/globals.css: Language not supported

Comments suppressed due to low confidence (3)

web/src/app/icons/[icon]/page.tsx:110

[nitpick] Icon name formatting is duplicated in both metadata generation and component rendering. Consider extracting this logic into a helper function to avoid repetition and improve maintainability.

const formattedIconName = icon.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ")

scripts/generate_icons_page.py:1

The generate_icons_page.py script has been removed. Please confirm that this removal is intentional and that any required functionality for ICONS.md generation is now handled elsewhere.

import json

.github/workflows/on_icon_update_approved.yml:49

The ICONS.md generation step is removed in this workflow. Verify that this change aligns with the overall overhaul and that related workflows have been updated accordingly.

- name: Generate ICONS.md

cloudflare-workers-and-pages · 2025-04-17T05:24:09Z

Deploying dashboard-icons with Cloudflare Pages

Latest commit:	`14c7fd7`
Status:	⚡️ Build in progress...

View logs

ajnart · 2025-04-17T06:05:32Z

+- **Variant Suffixes**:
+  - `-light` for dark backgrounds
+  - `-dark` for light backgrounds


it doesn't make sense to tell users to add
-light for light, since we match on the base icon (sonarr), it should be nothing for light and -dark for dark mode (sonarr and sonarr-dark)
if the base icon is dark mode then nothing for dark and -light for dark (sonarr, sonarr-light)

ajnart · 2025-04-17T06:07:39Z

Needs to add a mention of how to get the full list of icons (since the api.github.com endpoint will only return the first 1000 items) would be a good idea too. I'm actually not sure if we do that even in homarr, so we might be limited to 1000/1800+ icons at the moment

ajnart

I'm still reviewing but apparently we have some pagerank/indexing issues as well :

Also need to keep in mind to use https://developers.google.com/search/docs/appearance/structured-data for validation of our SEO

Also, looks like there is an issue with posthog evalutation

ajnart · 2025-04-17T06:08:54Z

TODO: Update this once design is done

ajnart · 2025-04-17T06:09:44Z

Are we actually using these in the metadata ? I removed it before, maybe I need to link them back up

ajnart · 2025-04-17T06:10:39Z

Why delete it ? Most browsers support having a favicon as SVG. Nextjs has first party support for it in /app/icon.svg

ajnart · 2025-04-17T06:11:13Z

Did you test this ? I didn't try to use the PWA yet

ajnart · 2025-04-17T06:12:04Z


 :root {
-	--radius: 0.3rem;
+	--radius: 0.75rem;


Not sure how I feel about this

ajnart · 2025-04-17T06:14:47Z

+	const { totalIcons } = await getTotalIcons()
+
+	return {
+		metadataBase: new URL("https://dashboardicons.com"),


Use constant file for this

ajnart · 2025-04-17T06:15:01Z

+			locale: "en_US",
+			title: "Dashboard Icons - Your definitive source for dashboard icons",
+			description: `A collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
+			url: "https://dashboardicons.com",


Constant file

ajnart · 2025-04-17T06:18:11Z

I don't know if this is actually needed on the page, but it's still good to have it there

ajnart · 2025-04-17T06:18:28Z

what's this for ?

ajnart · 2025-04-17T06:44:14Z

The icon changing depending on light / dark mode is really cool ! Not sure if that's the expectation tho 🤔

Edit : definitely confusing

ajnart · 2025-04-17T08:03:15Z

+			other: [
+				{
+					rel: "mask-icon",
+					url: "/safari-pinned-tab.svg",


This image doesn't exist

ajnart · 2025-04-17T08:06:54Z

+	return {
+		metadataBase: new URL("https://dashboardicons.com"),
+		title: "Dashboard Icons - Your definitive source for dashboard icons",
+		description: `A collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,


Needs to be extracted to string it shows up like 15 times in the code

ajnart · 2025-04-17T08:23:07Z

+	// Helper function to get the appropriate icon variant based on theme
+	const getIconVariant = (iconName: string) => {
+		// Check if the icon has theme variants
+		if (iconColorVariants) {
+			// If in dark mode and a light variant exists, use the light variant
+			if (resolvedTheme === "dark" && iconColorVariants.light) {
+				return iconColorVariants.light
+			}
+			// If in light mode and a dark variant exists, use the dark variant
+			if (resolvedTheme === "light" && iconColorVariants.dark) {
+				return iconColorVariants.dark
+			}
+		}
+		// Fall back to the default name if no appropriate variant
+		return iconName


This should have been in an utils file

ajnart · 2025-04-17T08:36:30Z

+						<div className="text-sm text-muted-foreground flex flex-wrap items-center gap-1.5 leading-relaxed">
+							Made with{" "}
+							<div className="relative inline-block">
+								<motion.div
+									className="cursor-pointer"
+									onMouseEnter={() => setIsHeartHovered(true)}
+									onMouseLeave={() => setIsHeartHovered(false)}
+									onClick={handleHeartClick}
+									whileTap={{ scale: 0.85 }}
+								>
+									<motion.div
+										animate={{
+											scale: isHeartFilled ? [1, 1.3, 1] : 1,
+										}}
+										transition={{
+											duration: isHeartFilled ? 0.4 : 0,
+											ease: "easeInOut",
+										}}
+									>
+										<Heart
+											className="h-3.5 w-3.5 text-rose-500 flex-shrink-0 hover:scale-125 transition-all duration-200"
+											fill={isHeartFilled ? "#f43f5e" : "none"}
+											strokeWidth={isHeartFilled ? 1.5 : 2}
+										/>
+									</motion.div>
+								</motion.div>
+
+								{/* Easter egg mini hearts */}
+								{isHeartHovered && (
+									<>
+										{HOVER_HEART_IDS.map((id, i) => (
+											<motion.div
+												key={id}
+												initial={{ scale: 0, opacity: 0 }}
+												animate={{
+													scale: [0, 1, 0.8],
+													opacity: [0, 1, 0],
+													x: [0, (i % 2 === 0 ? 1 : -1) * Math.random() * 20],
+													y: [0, -Math.random() * 30],
+												}}
+												transition={{
+													duration: 0.8 + Math.random() * 0.5,
+													ease: "easeOut",
+													delay: Math.random() * 0.2,
+												}}
+												className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+											>
+												<Heart className={`h-2 w-2 ${i < 3 ? "text-rose-300" : i < 6 ? "text-rose-400" : "text-rose-500"}`} />
+											</motion.div>
+										))}
+
+										{/* Subtle particle glow */}
+										<motion.div
+											initial={{ scale: 0, opacity: 0 }}
+											animate={{
+												scale: [0, 3],
+												opacity: [0, 0.3, 0],
+											}}
+											transition={{ duration: 0.6, ease: "easeOut" }}
+											className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-rose-500/20 pointer-events-none"
+										/>
+									</>
+								)}
+
+								{/* Heart fill animation extras */}
+								{isHeartFilled && (
+									<>
+										{/* Radiating circles on heart fill */}
+										<motion.div
+											initial={{ scale: 0.5, opacity: 0 }}
+											animate={{
+												scale: [0.5, 2.5],
+												opacity: [0.5, 0],
+											}}
+											transition={{ duration: 0.6, ease: "easeOut" }}
+											className="absolute left-1/2 top-1/2 w-3 h-3 rounded-full bg-rose-500/30 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+										/>
+
+										{/* Extra burst of mini hearts when filled */}
+										{BURST_HEART_IDS.map((id, i) => (
+											<motion.div
+												key={id}
+												initial={{ scale: 0, opacity: 0 }}
+												animate={{
+													scale: [0, 1, 0.8],
+													opacity: [0, 1, 0],
+													x: [0, Math.cos((i * Math.PI) / 2.5) * 25],
+													y: [0, Math.sin((i * Math.PI) / 2.5) * 25],
+												}}
+												transition={{
+													duration: 0.6,
+													ease: "easeOut",
+												}}
+												className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+											>
+												<Heart className="h-2 w-2 text-rose-500" fill="#f43f5e" />
+											</motion.div>
+										))}
+									</>
+								)}
+							</div>{" "}
+							by Homarr Labs and the open source community.
+						</div>
+						<Link


100 lines of code for this animation seems like a lot. Prefer using https://rombo.co/tailwind/ when possible. Also framer-motion is now just motion (https://motion.dev/)

- Rewrite README with better structure and new branding - Update contributing guidelines for clarity - Revise code of conduct for better readability - Add preview video asset

Copilot

Pull Request Overview

This PR overhauls the branding and UI of the website while updating metadata generation, workflows, and documentation. Key changes include redesigned "Not Found" and error pages, updated metadata and layout components with new header/footer integrations, and adjustments in workflow automation and documentation to align with the new branding.

Reviewed Changes

Copilot reviewed 65 out of 70 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
web/src/app/not-found.tsx	Improved layout and messaging; new submission section added; extra import added.
web/src/app/layout.tsx	Revised metadata generation and layout structure with new header/footer components.
web/src/app/icons/page.tsx	Updated metadata generation and page styling with dynamic icon counts.
web/src/app/icons/layout.tsx	Added a background wrapper component for the icons section.
web/src/app/icons/components.tsx	Enhanced search icon positioning and transitions for the icon search component.
web/src/app/icons/[icon]/page.tsx	Refactored icon metadata generation using formatted icon names and removed unused image spread.
web/src/app/error.tsx	Introduced a new error page with improved messaging and error logging.
scripts/generate_icons_page.py	Removed the script responsible for generating ICONS.md.
scripts/TEMPLATE.md	Removed the template file for icons insertion.
README.md, CONTRIBUTING.md, CODE_OF_CONDUCT.md	Updated documentation and guidelines to reflect new branding and updated processes.
.github/workflows/*	Modified workflows to remove ICONS.md generation steps and streamline automation.

Files not reviewed (5)

web/biome.json: Language not supported
web/package.json: Language not supported
web/pnpm-lock.yaml: Language not supported
web/public/site.webmanifest: Language not supported
web/src/app/globals.css: Language not supported

Comments suppressed due to low confidence (6)

web/src/app/icons/[icon]/page.tsx:26

The variable 'previousImages' is no longer used in the openGraph images array. Remove this unused variable to reduce confusion.

const previousImages = (await parent).openGraph?.images || []

scripts/generate_icons_page.py:1

Confirm that the removal of 'generate_icons_page.py' is intentional and update related documentation if ICONS.md generation is now handled elsewhere.

Entire file removed

.github/workflows/update_icons_and_resources.yml:77

Review the removal of the ICONS.md commit steps; if ICONS.md is still required, consider re-adding the commit step or updating the workflow to reflect the new process.

git add ICONS.md (removed)

.github/workflows/on_icon_update_approved.yml:49

Ensure that the removal of the ICONS.md generation step in this workflow is intentional and that any dependencies on ICONS.md generation are handled elsewhere.

- name: Generate ICONS.md

.github/workflows/on_icon_addition_approved.yml:49

Verify that removing the ICONS.md generation step in this workflow aligns with the new automation process and update documentation if necessary.

- name: Generate ICONS.md

web/src/app/not-found.tsx:3

The import 'PlusCircle' is currently unused in this component. Remove it to keep the code clean.

import { AlertTriangle, ArrowLeft, PlusCircle } from "lucide-react"

Copilot

Pull Request Overview

This PR overhauls the branding and website layout of Dashboard Icons while refining metadata generation and UI components across multiple pages. Key changes include updating the 404 Not Found and error pages, revamping the layout with new header/footer components and metadata logic, and modernizing the icons pages with better formatting and opengraph image generation, along with workflow and documentation updates.

Reviewed Changes

Copilot reviewed 68 out of 72 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
web/src/app/not-found.tsx	Updated 404 page styling and added icon submission content.
web/src/app/layout.tsx	Revised layout with new header-wrapper, footer, and metadata.
web/src/app/icons/page.tsx	Updated icons page metadata and UI wrapper for improved styling.
web/src/app/icons/layout.tsx	Added a new background wrapper component for icons.
web/src/app/icons/components.tsx	Enhanced the search component styling with transitions.
web/src/app/icons/[icon]/page.tsx	Improved icon details metadata with formatted icon names.
web/src/app/icons/[icon]/opengraph-image.tsx	Enhanced opengraph image generation with dynamic styling.
web/src/app/error.tsx	Updated error page styling and functionality.
scripts/generate_icons_page.py & scripts/TEMPLATE.md	Removed obsolete icons page generation scripts and template.
README.md, CONTRIBUTING.md, CODE_OF_CONDUCT.md	Updated documentation, branding details, and contribution guides.
.github/workflows/*.yml	Removed redundant icon generation steps from workflows.

Files not reviewed (4)

web/biome.json: Language not supported
web/package.json: Language not supported
web/public/site.webmanifest: Language not supported
web/src/app/globals.css: Language not supported

Signed-off-by: Thomas Camlong <thomas@ajnart.fr>

ajnart · 2025-04-18T20:11:03Z

merging because this PR is too big

lammersbjorn changed the title ~~feat: visual overhaul of the repo~~ feat: overhaul of the branding Apr 17, 2025

lammersbjorn requested review from Meierschlumpf, ajnart and Copilot and removed request for ajnart and Copilot April 17, 2025 00:50

lammersbjorn self-assigned this Apr 17, 2025

Copilot AI reviewed Apr 17, 2025

View reviewed changes

lammersbjorn requested a review from Copilot April 17, 2025 02:17

Copilot AI reviewed Apr 17, 2025

View reviewed changes

lammersbjorn marked this pull request as draft April 17, 2025 03:53

lammersbjorn mentioned this pull request Apr 17, 2025

Feat: Support categories #1169

Open

5 tasks

lammersbjorn marked this pull request as ready for review April 17, 2025 05:21

lammersbjorn requested a review from Copilot April 17, 2025 05:21

Copilot AI reviewed Apr 17, 2025

View reviewed changes

ajnart reviewed Apr 17, 2025

View reviewed changes

This comment was marked as outdated.

Sign in to view

ajnart reviewed Apr 17, 2025

View reviewed changes

Comment thread web/src/app/layout.tsx Outdated

ajnart reviewed Apr 17, 2025

View reviewed changes

ajnart self-assigned this Apr 17, 2025

docs: improve documentation and branding for dashboardicons.com

27980bc

- Rewrite README with better structure and new branding - Update contributing guidelines for clarity - Revise code of conduct for better readability - Add preview video asset

ajnart added 2 commits April 17, 2025 18:05

Add background (it looks nice)

b63e8f5

Format codebase

86edee2

ajnart force-pushed the feat/visual-enhancements branch from ce25813 to 86edee2 Compare April 17, 2025 16:05

ajnart requested a review from Copilot April 18, 2025 05:25

Copilot AI reviewed Apr 18, 2025

View reviewed changes

ajnart added 5 commits April 18, 2025 12:32

feat: Add buttons to give us stuff

47d15f2

Update metadata

f9563ad

Add og image generator

51e1d1d

Fix building OG images

874cf07

update opengraph image generator

60bd2cc

ajnart requested a review from Copilot April 18, 2025 13:24

Copilot AI reviewed Apr 18, 2025

View reviewed changes

ajnart added 3 commits April 18, 2025 15:25

Update pnpm approved builds

bfc5c0e

Delete web/wrangler.toml

7ed66b5

Signed-off-by: Thomas Camlong <thomas@ajnart.fr>

styling changes

783e3d1

Meierschlumpf reviewed Apr 18, 2025

View reviewed changes

Comment thread web/src/components/icon-details.tsx Outdated

ajnart added 10 commits April 18, 2025 16:51

Styling changes

bc9ee8c

Styling changes

bb97a00

wip on using local path

8c0d463

styling

f7f464e

styling

a6f5bb9

remove license

a3bf6bc

small styling changes for the footer

904c769

revert max-w to 7xl

02d538d

fix search resize

14c7fd7

Merge branch 'main' into feat/visual-enhancements

0d6a321

ajnart merged commit 36a355d into main Apr 18, 2025

ajnart deleted the feat/visual-enhancements branch April 28, 2025 14:22

Uh oh!

Uh oh!

Conversation

lammersbjorn commented Apr 17, 2025 • edited by ajnart Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

TODO:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

cloudflare-workers-and-pages Bot commented Apr 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying dashboard-icons with Cloudflare Pages

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ajnart Apr 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ajnart left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ajnart commented Apr 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as outdated.

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

ajnart commented Apr 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

lammersbjorn commented Apr 17, 2025 •

edited by ajnart

Loading

cloudflare-workers-and-pages Bot commented Apr 17, 2025 •

edited

Loading

ajnart Apr 17, 2025 •

edited

Loading

ajnart commented Apr 17, 2025 •

edited

Loading