mirror of
https://github.com/shadoll/sLogos.git
synced 2025-12-20 03:26:59 +00:00
feat: Initialize Svelte application with logo gallery functionality
- Add Rollup configuration for building and serving the application. - Implement logo scanning script to generate logos.json from logo files. - Create main App component to manage logo display and search functionality. - Develop LogoGrid and LogoList components for different viewing modes. - Add LogoModal component for logo preview with details. - Implement URL copying and logo downloading features. - Style components for improved user experience and responsiveness.
This commit is contained in:
131
DEVELOPMENT.md
Normal file
131
DEVELOPMENT.md
Normal file
@@ -0,0 +1,131 @@
|
||||
# Logo Gallery - Developer Documentation
|
||||
|
||||
This document provides instructions for developers working on the Logo Gallery project.
|
||||
|
||||
## Project Overview
|
||||
|
||||
Logo Gallery is a web application that displays a collection of company and brand logos with the following features:
|
||||
- Grid and list views of logos
|
||||
- Search functionality
|
||||
- Direct URL copying for each logo
|
||||
- Download capability
|
||||
- Responsive design
|
||||
|
||||
The project is built with:
|
||||
- Svelte for the front-end UI
|
||||
- Node.js for script automation
|
||||
- Docker for containerization
|
||||
- GitHub Pages for deployment
|
||||
|
||||
## Development Environment Setup
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Docker and Docker Compose
|
||||
- Git
|
||||
|
||||
No local Node.js installation is required as all operations run inside Docker containers.
|
||||
|
||||
### Getting Started
|
||||
|
||||
1. Clone the repository:
|
||||
```
|
||||
git clone https://github.com/yourusername/logos.git
|
||||
cd logos
|
||||
```
|
||||
|
||||
2. Build and start the application:
|
||||
```
|
||||
make build
|
||||
make start
|
||||
```
|
||||
|
||||
3. Access the application at http://localhost:5005
|
||||
|
||||
## Common Development Tasks
|
||||
|
||||
### Adding New Logos
|
||||
|
||||
1. Add logo files (SVG or PNG preferred) to the `public/logos/` directory
|
||||
2. Scan the logos directory and update the data file:
|
||||
```
|
||||
make scan-logos-dev
|
||||
```
|
||||
(This runs `npm run scan-logos` inside the dev container)
|
||||
3. The application will automatically rebuild with the new logos
|
||||
|
||||
### Modifying the UI
|
||||
|
||||
1. Edit files in the `src/` directory
|
||||
2. The changes will require a rebuild:
|
||||
```
|
||||
make rebuild
|
||||
```
|
||||
|
||||
### Running Custom Commands
|
||||
|
||||
To run any npm or shell command inside the Docker container:
|
||||
```
|
||||
make run CMD="your-command-here"
|
||||
```
|
||||
|
||||
Examples:
|
||||
- List logo files: `make run CMD="ls -la public/assets/logos"`
|
||||
- Run a specific npm script: `make run CMD="npm run some-script"`
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
logos/
|
||||
├── public/ # Static assets
|
||||
│ ├── assets/
|
||||
│ │ └── logos/ # Logo files (SVG, PNG)
|
||||
│ ├── data/ # JSON data files
|
||||
│ ├── build/ # Compiled JS/CSS (generated)
|
||||
│ └── global.css # Global styles
|
||||
├── src/ # Application source code
|
||||
│ ├── components/ # Svelte components
|
||||
│ ├── App.svelte # Main app component
|
||||
│ └── main.js # App entry point
|
||||
├── scripts/ # Utility scripts
|
||||
├── Dockerfile # Docker configuration
|
||||
├── compose.yml # Docker Compose configuration
|
||||
├── Makefile # Development commands
|
||||
└── README.md # Project overview
|
||||
```
|
||||
|
||||
## Deployment to GitHub Pages
|
||||
|
||||
To deploy the application to GitHub Pages:
|
||||
|
||||
1. Build the application:
|
||||
```
|
||||
make build
|
||||
```
|
||||
|
||||
2. The `public/` directory contains all files needed for deployment
|
||||
|
||||
3. Push the contents of the `public/` directory to the `gh-pages` branch of your repository
|
||||
|
||||
## Available Make Commands
|
||||
|
||||
Run `make help` to see all available commands:
|
||||
|
||||
- `make build` - Build the Docker container
|
||||
- `make start` - Start the application
|
||||
- `make stop` - Stop the application
|
||||
- `make restart` - Restart the application
|
||||
- `make logs` - View the application logs
|
||||
- `make run CMD=<cmd>` - Run a command in the container
|
||||
- `make generate-logos` - Generate logos.json from assets directory
|
||||
- `make clean` - Clean up build artifacts
|
||||
- `make rebuild` - Completely rebuild from scratch
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
If you encounter issues:
|
||||
|
||||
1. Check the logs: `make logs`
|
||||
2. Try a complete rebuild: `make rebuild`
|
||||
3. Ensure the Docker service is running
|
||||
4. Verify your logo files are in the correct format and location
|
||||
Reference in New Issue
Block a user