Site Architecture Overhaul

Site Architecture Overhaul

Over the past couple of days, I’ve implemented some improvements to the site’s architecture.

Dynamic Theme Switcher

The Problem

The theme switcher was previously hardcoded with a limited set of themes and had stopped working after the latest Tailwind and DaisyUI updates.

The Solution

Updated Config for DaisyUI

Previously, I configured DaisyUI in tailwind.config.cjs with the following content:

1
/** @type {import('tailwindcss').Config} */
2
module.exports = {
3
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
4
  theme: {
5
    extend: {},
6
  },
7
  daisyui: {
8
    themes: true, // true: all themes | false: only light + dark | array: specific themes like this ["light", "dark", "cupcake"]
9
    darkTheme: "dark", // name of one of the included themes for dark mode
10
    logs: false, // Shows info about daisyUI version and used config in the console when building your CSS
11
  }
12
}

However, this configuration was no longer functional. After consulting the DaisyUI documentation, I deleted tailwind.config.cjs and moved the DaisyUI settings into a new tailwind.css file under the styles directory:

1
@import "tailwindcss";
2
@plugin "daisyui"{
3
  themes: all,
4
};
5
@plugin "@tailwindcss/typography"

• update ThemeSelector.astro .

Refactored ThemeSelector.astro by stripping out hard-coded theme list and replaced it with a dynamic themes array that holds all available DaisyUI themes; the rest of the component’s logic remains intact.

Theme Schema Alignment

Inconsistent DaisyUI theme usage across pages, by adding/updating components to inherit the global theme configuration. This included:

• add ContentStats.astro
• add ContentFilters.astro
• improve HorizontalCard.astro
• update the page listing to use HorizontalCard.astro

Architecture

with the help of AI, add some missing pages, About, or Contact pages, and some legal pages. These pages enhance user trust and navigation—an About page can share the project’s mission and contributors, a Contact page can provide a feedback channel, and legal pages (Privacy Policy, Terms of Service) ensure compliance and transparency. I generated the initial copy, integrated them into the navigation, and applied the same global configuration so the dynamic theme selector works seamlessly across every new page.