Blog Project

This project is a modern blog application built with TypeScript and Webpack. It features both client and admin interfaces for managing blog posts.

Project Structure

blog-project
├── data/                     # Data files
│   └── posts.json            # Blog posts data
├── fonts/                    # Font files
├── public/                   # Static HTML and assets
│   ├── admin.html            # Admin interface
│   ├── index.html            # Main blog page
│   ├── post.html             # Individual post page
│   ├── data/                 # Public data files
│   │   └── posts.json        # Public copy of blog posts data
│   └── images/               # Blog images
├── scripts/                  # Utility scripts
│   └── copy-json.js          # Script to copy JSON data
├── shared/                   # Shared TypeScript types
│   └── types.ts              # Shared type definitions
├── src/                      # Source code
│   ├── client/               # Client-side code
│   │   ├── blogClient.ts     # Blog client functionality
│   │   └── index.ts          # Client entry point
│   ├── components/           # UI components
│   │   ├── blogCards.ts      # Blog card components
│   │   ├── darkMode.ts       # Dark mode functionality
│   │   ├── pagination.ts     # Pagination component
│   │   ├── search.ts         # Search functionality
│   │   └── navigation/       # Navigation components
│   ├── controllers/          # Application controllers
│   │   ├── events/           # Event handlers
│   │   └── forms/            # Form controllers
│   ├── entries/              # Entry points
│   │   ├── admin.ts          # Admin entry point
│   │   └── client.ts         # Client entry point
│   ├── models/               # Data models
│   │   └── blogPost.ts       # Blog post model
│   ├── modules/              # Feature modules
│   │   └── postDetail.ts     # Post detail module
│   ├── services/             # API services
│   │   └── api.ts            # API service
│   ├── types/                # TypeScript types
│   │   └── index.ts          # Type definitions
│   └── utils/                # Utility functions
│       ├── debug-selectors.ts # Debugging utilities
│       ├── notifications.ts  # Notification utilities
│       ├── urlTransformer.ts # URL transformation utilities
│       ├── utils.ts          # General utilities
│       └── validation.ts     # Form validation utilities
├── styles/                   # CSS stylesheets
│   ├── components/           # Component-specific styles
│   │   ├── animations.css    # Animation styles
│   │   ├── blog-cards.css    # Blog card styles
│   │   ├── buttons.css       # Button styles
│   │   ├── dark-mode.css     # Dark mode styles
│   │   ├── forms.css         # Form styles
│   │   ├── header.css        # Header styles
│   │   ├── hero.css          # Hero section styles
│   │   ├── mobile-nav.css    # Mobile navigation styles
│   │   ├── modals.css        # Modal dialog styles
│   │   ├── notifications.css # Notification styles
│   │   ├── pagination.css    # Pagination styles
│   │   ├── post-navigation.css # Post navigation styles
│   │   ├── search.css        # Search component styles
│   │   └── status-indicators.css # Status indicator styles
│   ├── global/               # Global styles
│   │   ├── base.css          # Base styles
│   │   ├── components.css    # Common component styles
│   │   ├── layout.css        # Layout styles
│   │   └── utilities.css     # Utility classes
│   └── views/                # View-specific styles
│       ├── admin.css         # Admin view styles
│       └── post.css          # Post view styles
├── Dockerfile                # Docker configuration
├── docker-compose.yml        # Docker Compose configuration
├── fix-css-urls.js           # Script to fix CSS URLs
├── package.json              # Node.js dependencies and scripts
├── project-log.md            # Project development log
├── tsconfig.json             # TypeScript configuration
└── webpack.config.js         # Webpack configuration

How to Run the Application

To build and run the application, use the following commands:

npm install    # Install dependencies
npm run build  # Build the project with Webpack

• npm run build && npx tsc && node dist/src/entries/app.js

Features

• Client Interface: A user-friendly interface for browsing blog posts.
• Admin Interface: Tools for managing blog content.
• Responsive Design: Optimized for both desktop and mobile devices.
• Dark Mode: Toggle between light and dark themes.
• Search and Pagination: Easily find and navigate through posts.

Key Components

• Layout System: Flexible CSS layout system with containers, grids, and responsive utilities
• Theme Support: Light and dark mode with consistent design variables
• Component Architecture: Modular TypeScript components for UI elements
• Content Management: Admin interface for creating and editing blog posts
• Asset Management: Organized structure for images, fonts, and styles

Development

To contribute or modify the project, ensure you have the following installed:

• Node.js (v16 or later)
• npm (v7 or later)

Setting Up the Development Environment

1. Clone the repository.
2. Run npm install to install dependencies.
3. Use npm run build to build the project.

Feel free to explore the src directory for the main codebase and the styles directory for CSS customizations.