chore: remove unused images, update project image paths to webp format, and enhance accessibility with aria-labels across components

2025-08-14 03:21:50 +03:00
parent 57dc793005
commit 865b182062
37 changed files with 152 additions and 88 deletions
--- a/src/content/blog/dark-mode-in-astro/index.mdx
+++ b/src/content/blog/dark-mode-in-astro/index.mdx
@@ -97,7 +97,7 @@ export default function ThemeToggle() {
    localStorage.setItem("theme", newTheme);
  };

-  return <button onClick={toggleTheme}>{theme === "light" ? "🌙" : "🌞"}</button>;
+  return <button onClick={toggleTheme} aria-label="Toggle theme">{theme === "light" ? "🌙" : "🌞"}</button>;
 }
 ```  

--- a/src/content/blog/how-to-build-a-real-time-chat-app-with-websocket/index.mdx
+++ b/src/content/blog/how-to-build-a-real-time-chat-app-with-websocket/index.mdx
@@ -123,8 +123,8 @@ Create `index.html` in the same folder. Paste and save.
 <body>
  <h1>💬 Mini Chat</h1>
  <div id="chat"></div>
-  <input id="msgBox" placeholder="Type and hit Enter">
-  <button onclick="sendMsg()">Send</button>
+  <input id="msgBox" placeholder="Type and hit Enter" aria-label="Message input">
+  <button onclick="sendMsg()" aria-label="Send message">Send</button>

  <script>
    const socket = new WebSocket('ws://localhost:8080');
--- a/src/content/blog/how-to-build-a-task-management-app-with-react/index.mdx
+++ b/src/content/blog/how-to-build-a-task-management-app-with-react/index.mdx
@@ -109,7 +109,7 @@ const Task = ({ task, onDelete, onToggle }) => {
        />
        <span>{task.text}</span>
      </div>
-      <button onClick={() => onDelete(task.id)} className="delete-btn">
+      <button onClick={() => onDelete(task.id)} className="delete-btn" aria-label="Delete task">
        Delete
      </button>
    </div>
@@ -187,7 +187,7 @@ const TaskForm = ({ onAdd }) => {
        placeholder="What needs to be done?"
        className="task-input"
      />
-      <button type="submit" className="add-btn">
+      <button type="submit" className="add-btn" aria-label="Add task">
        Add Task
      </button>
    </form>
--- a/src/content/blog/how-to-build-a-weather-app-with-a-public-api/index.mdx
+++ b/src/content/blog/how-to-build-a-weather-app-with-a-public-api/index.mdx
@@ -127,9 +127,9 @@ Open `index.html` and paste this:
        <h1>🌤️ Weather Check</h1>
        
        <div class="search-box">
-            <input type="text" id="city-input" placeholder="Enter city name...">
-            <button id="search-btn">Search</button>
-            <button id="location-btn">Use My Location</button>
+            <input type="text" id="city-input" placeholder="Enter city name..." aria-label="City input">
+            <button id="search-btn" aria-label="Search">Search</button>
+            <button id="location-btn" aria-label="Use my location">Use My Location</button>
        </div>
        
        <div id="weather-info" class="hidden">
--- a/src/content/blog/what-is-tailwind/index.mdx
+++ b/src/content/blog/what-is-tailwind/index.mdx
@@ -51,7 +51,7 @@ Instead of writing CSS like:
 I just typed:

 ```html
-<button class="px-8 py-3 bg-blue-500 text-white rounded-lg font-semibold hover:bg-blue-600 transition">
+<button class="px-8 py-3 bg-blue-500 text-white rounded-lg font-semibold hover:bg-blue-600 transition" aria-label="Get started">
  Get Started
 </button>
 ```
@@ -420,7 +420,7 @@ Let's build something useful. A **responsive card** that looks great everywhere.
  <div class="p-6">
    <h3 class="text-xl font-semibold text-gray-900">Card Title</h3>
    <p class="mt-2 text-gray-600">Brief description here</p>
-    <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+    <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600" aria-label="Learn more">
      Learn More
    </button>
  </div>
@@ -432,7 +432,7 @@ Let's build something useful. A **responsive card** that looks great everywhere.
 ```html
 <!-- Changes to horizontal layout on desktop -->
 <div class="max-w-4xl mx-auto md:flex">
-  <img class="md:w-48 md:h-auto" src="/img.jpg">
+  <img class="md:w-48 md:h-auto" src="/img.jpg" alt="Card image">
  <div class="p-6">
    <!-- Same content, now horizontal -->
  </div>
--- a/src/content/blog/why-your-website-needs-lazy-loading-images/index.mdx
+++ b/src/content/blog/why-your-website-needs-lazy-loading-images/index.mdx
@@ -103,12 +103,12 @@ Without dimensions, the browser can't reserve space. When the image finally load

 Good:
 ```html
-<img src="dog.jpg" width="800" height="450" loading="lazy">
+<img src="dog.jpg" width="800" height="450" loading="lazy" alt="Dog">
 ```

 Bad:
 ```html
-<img src="dog.jpg" loading="lazy">
+<img src="dog.jpg" loading="lazy" alt="Dog">
 ```

 ### **Mistake 3: Overdoing Fade-In Animations**
--- a/src/content/projects/cojocarudavid-me.md
+++ b/src/content/projects/cojocarudavid-me.md
@@ -2,7 +2,7 @@
 name: 'cojocarudavid.me (old)'
 description: 'Blazing fast personal website built with Astro.js and styled with Tailwind CSS.'
 tags: ['astro', 'tailwindcss', 'typescript']
-image: '../../../public/static/cojocarudavidme.png'
+image: '../../../public/static/cojocarudavidme.webp'
 link: 'https://github.com/cojocaru-david/cojocarudavid.me'
 startDate: '2023-10-16'
 endDate: '2025-04-28'
--- a/src/content/projects/david-dark-code.md
+++ b/src/content/projects/david-dark-code.md
@@ -2,7 +2,7 @@
 name: 'David Dark Code'
 description: 'David Dark is a dark theme for VS Code. It is based on the github theme and the default dark theme. It is designed to be easy on the eyes and to be used for long periods of time.'
 tags: ['vscode', 'theme', 'dark']
-image: '../../../public/static/david-dark-code.png'
+image: '../../../public/static/david-dark-code.webp'
 link: 'https://github.com/cojocaru-david/david-dark-code'
 startDate: '2023-10-17'
 endDate: '2023-10-17'
--- a/src/content/projects/dreamhome.md
+++ b/src/content/projects/dreamhome.md
@@ -2,7 +2,7 @@
 name: 'Dream Home Template'
 description: 'A modern, responsive real estate platform built with React, Vite, and Tailwind CSS. Find your dream home with intuitive search, detailed property listings, and seamless user experience.'
 tags: ['react', 'vite', 'tailwindcss']
-image: '../../../public/static/dream-home-template.png'
+image: '../../../public/static/dream-home-template.webp'
 link: 'https://dreamhome.cojocarudavid.me'
 startDate: '2025-04-16'
 endDate: '2025-05-29'
--- a/src/content/projects/modern-portfolio.md
+++ b/src/content/projects/modern-portfolio.md
@@ -2,7 +2,7 @@
 name: 'Modern Portfolio'
 description: 'Modern Portfolio is a personal website that showcases my work and projects. It is built with Astro.js and styled with Tailwind CSS, providing a fast and responsive user experience. The website features a clean design, easy navigation, and a focus on showcasing my skills and projects.'
 tags: ['astro', 'tailwindcss', 'typescript']
-image: '../../../public/static/modern-portfolio.png'
+image: '../../../public/static/modern-portfolio.webp'
 link: 'https://cojocarudavid.me'
 startDate: '2025-03-30'
 ---
--- a/src/content/projects/snippetslibrary.md
+++ b/src/content/projects/snippetslibrary.md
@@ -0,0 +1,48 @@
+---
+name: 'SnippetsLibrary'
+description: 'A secure, lightning-fast code snippet manager to store, organize, and share your code with beautiful syntax highlighting.'
+tags: ['react', 'vite', 'tailwindcss', 'typescript', 'bun', 'hono', 'drizzle-orm', 'postgresql', 'jwt', 'github-oauth', 'cloudflare-workers']
+image: '../../../public/static/snippetslibrary.webp'
+link: 'https://snippetslibrary.com'
+startDate: '2025-07-23'
+---
+
+# SnippetsLibrary
+
+Manage your personal and team code snippets with speed and confidence. SnippetsLibrary makes it easy to create, organize, search, and share snippets with first-class DX and beautiful syntax highlighting.
+
+I have 50+ users and I'm working on a new version with a lot of new features.
+And 200+ snippets.
+
+## ✨ Highlights
+
+- **Secure auth**: GitHub OAuth + JWT sessions
+- **Sharing**: Public share links with SEO-friendly pages
+- **Search & filter**: Language, visibility, keywords, pagination
+- **Syntax highlighting**: 20+ languages, themes, copy-preserving formatting
+- **Fast**: Bun runtime, Hono server, optimized client with Vite
+
+## 🛠️ Tech Stack
+
+- Frontend: React, Vite, Tailwind CSS, shadcn/ui
+- Backend: Bun, Hono, JWT, Drizzle ORM, PostgreSQL
+- Infra: Cloudflare Workers, GitHub Actions, Drizzle Kit
+
+## 🚀 Quick Start
+
+1. Clone the repo:
+   ```bash
+   git clone https://github.com/cojocaru-david/snippetslibrary.com
+   cd snippetslibrary.com
+   ```
+2. Install deps: `bun install`
+3. Configure `.env` in `server/` (DB, GitHub OAuth, JWT, FRONTEND_URL)
+4. Migrate DB: `cd server && bun run db:migrate`
+5. Start dev: `bun run dev` (client on 5173, server on 8000)
+
+## 🔗 Links
+
+- Live: https://snippetslibrary.com
+- Repo: https://github.com/cojocaru-david/snippetslibrary.com
+
+
--- a/src/content/projects/tailci.md
+++ b/src/content/projects/tailci.md
@@ -2,7 +2,7 @@
 name: 'TailCI'
 description: 'TailCI is a lightweight, fast, and modern web application built with CodeIgniter and styled with Tailwind CSS. It combines the simplicity of CodeIgniter’s PHP framework with the utility-first power of Tailwind CSS for rapid development and clean design.'
 tags: ['codeigniter', 'tailwindcss', 'php']
-image: '../../../public/static/tailci.png'
+image: '../../../public/static/tailci.webp'
 link: 'https://tailci.cojocarudavid.me'
 startDate: '2025-03-30'
 ---