feat(extension/web): add new redesigned icon for application

Signed-off-by: Jordan Shatford <[email protected]>

.changeset/happy-ads-try.md

@@ -0,0 +1,6 @@
+---
+"@yd/extension": minor
+"@yd/web": minor
+---
+
+feat: add new redesigned icon for application

README.md

@@ -1,33 +1,7 @@
 <p align="center">
   <br />
-  <img width="150" height="150" src="./apps/web/static/images/logo.png" alt="Logo">
+  <img width="150" height="150" src="./apps/web/static/icon.png" alt="Logo">
   <h1 align="center"><b>YouTube Downloader</b></h1>
-  <div align="center">
-    <a href="https://kit.svelte.dev/">
-      <img src="https://img.shields.io/badge/Powered%20by-Svelte-%23FF3E00.svg?style=flat&logo=svelte" alt="Powered by SvelteKit">
-    </a>
-    <a href="https://www.typescriptlang.org/">
-      <img src="https://img.shields.io/badge/Language-Typescript-%233178C6.svg?style=flat&logo=typescript" alt="Language: TypeScript">
-    </a>
-    <a href="https://tailwindcss.com">
-      <img src="https://img.shields.io/badge/CSS%20Framework-TailwindCSS-%2306B6D4?logo=tailwindcss" alt="CSS Framework: TailwindCSS">
-    </a>
-    <a href="https://fastapi.tiangolo.com/">
-      <img src="https://img.shields.io/badge/Powered%20by-FastAPI-%23009688.svg?style=flat&logo=fastapi" alt="Powered by FastAPI">
-    </a>
-    <a href="https://www.python.org/">
-      <img src="https://img.shields.io/badge/Language-Python-%233776AB.svg?style=flat&logo=python" alt="Language: Python">
-    </a>
-    <a href="https://www.ffmpeg.org/">
-      <img src="https://img.shields.io/badge/Powered%20by-FFMPEG-%23007808.svg?style=flat&logo=ffmpeg" alt="Powered by FFMPEG">
-    </a>
-    <a href="https://github.com/yt-dlp/yt-dlp">
-      <img src="https://img.shields.io/badge/Powered%20by-yt--dlp-%23FF0000.svg?style=flat&logo=youtube" alt="Powered by yt-dlp">
-    </a>
-    <a href="https://github.com/jordanshatford/youtube-downloader/blob/main/LICENSE">
-      <img src="https://img.shields.io/badge/License-MIT-black.svg?style=flat&logo=license" alt="License: MIT">
-    </a>
-  </div>
   <p align="center">
     Fast, high quality YouTube downloads.
     <br />
@@ -40,25 +14,29 @@
 YouTube Downloader is a full stack application created to allow users to download [YouTube](https://www.youtube.com/) videos. The user is able to select from a variety of audio and video formats and other configuration options.
 
 ## Features
-  - Directly search YouTube for videos.
-  - Download and convert multiple videos concurrently.
-  - Download quality options (best, worst).
-  - Option to automatically embed video metadata, thumbnail, and subtitles.
-  - Variety of audio formats supported (AAC, FLAC, M4A, MP3, OPUS, WAV).
-  - Variety of video formats supported (AVI, FLV, MKV, MOV, MP4, WEBM).
-  - Web UI with support for dark and light themes.
+
+- Directly search YouTube for videos.
+- Download and convert multiple videos concurrently.
+- Download quality options (best, worst).
+- Option to automatically embed video metadata, thumbnail, and subtitles.
+- Variety of audio formats supported (AAC, FLAC, M4A, MP3, OPUS, WAV).
+- Variety of video formats supported (AVI, FLV, MKV, MOV, MP4, WEBM).
+- Web UI with support for dark and light themes.
 
 # Developer Guide
+
 Please refer to the [contributing guide](CONTRIBUTING.md) for how to install the project for development purposes.
 
 ## Monorepo structure:
 
 ### Apps:
+
 - `api`: An API developed in [Python](https://www.python.org/) using [FastAPI](https://fastapi.tiangolo.com/).
 - `extension`: A browser extension developed using [WXT](https://wxt.dev/) and [Svelte](https://svelte.dev/).
 - `web`: A web application developed in [SvelteKit](https://kit.svelte.dev/).
 
 ### Packages:
+
 - `client`: A TypeScript API client generated from the OpenAPI specification for the API using [openapi-ts](https://github.com/hey-api/openapi-ts).
 - `config`: Common configs shared between other packages and apps in the monorepo.
 - `ui`: A UI library used by the project developed in [Svelte](https://svelte.dev/).

apps/extension/src/lib/components/PageLayout.svelte

@@ -13,7 +13,7 @@
 	<main class="mx-auto h-full max-w-7xl px-4 sm:px-6 lg:px-8">
 		<div class="mx-auto max-w-xl overflow-hidden md:max-w-xl">
 			<div class="flex w-full items-center justify-between py-10">
-				<img src="/icon/512.png" alt="Logo" class="h-12 w-12" />
+				<img src="/icon-128.png" alt="Logo" class="h-12 w-12" />
 				<div class="flex space-x-2 text-zinc-500 dark:text-zinc-400">
 					<IconButton
 						title="Go to site"

apps/extension/src/lib/components/PopupLayout.svelte

@@ -22,7 +22,7 @@
 	<div class="align-start flex h-screen flex-col items-start justify-start space-y-2 pt-5">
 		<!-- Header of the popup -->
 		<div class="flex w-full items-center justify-between px-5">
-			<img src="/icon/512.png" alt="Logo" class="h-7 w-7" />
+			<img src="/icon-128.png" alt="Logo" class="h-7 w-7" />
 			<div class="flex space-x-2 text-zinc-500 dark:text-zinc-400">
 				<IconButton
 					title="Go to site"

apps/web/src/app.html

@@ -3,11 +3,11 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
+		<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
+		<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
+		<link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
 		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins&display=swap" />
-		<link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png" />
-		<link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png" />
-		<link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-256x256.png" />
 		%sveltekit.head%
 	</head>
 	<body style="font-family: Poppins">

apps/web/src/lib/components/Logo.svelte

@@ -3,5 +3,5 @@
 </script>
 
 <a class="focus:outline-none" href={RoutePathConstants.SEARCH}>
-	<img class="block h-8 w-auto" src="images/logo.png" alt="Logo" />
+	<img class="block h-10 w-auto" src="icon.png" alt="Logo" />
 </a>

apps/web/static/site.webmanifest

@@ -0,0 +1,11 @@
+{
+	"name": "YouTube Downloader",
+	"short_name": "YT Downloader",
+	"icons": [
+		{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+		{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+	],
+	"theme_color": "#ffffff",
+	"background_color": "#ffffff",
+	"display": "standalone"
+}

package.json

@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
-    "@commitlint/cli": "^19.2.2",
+    "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@commitlint/types": "^19.0.3",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",