A simple Svelte 3 project to display a contribution graph with customizable squares representing activity levels over time.
This project creates a contribution graph that visually represents activity levels for each day of the year. It uses Svelte 3 and Vite for fast and efficient development. The graph is displayed with different colored squares, each representing the level of activity for a particular day. Upon reloading the page, random contributions will be loaded to demonstrate the dynamic nature of the graph.
- Clone this repository to your local machine.
- Navigate to the project directory.
- Install the dependencies using npm:
npm install
- Start the development server:
npm run dev
- Open your web browser and go to http://localhost:5000 to see the contribution graph.
The contribution graph can be customized by passing the contributions prop to the ContributionGraph component. The contributions prop should be an array of objects, where each object represents a day's data with the following format:
{
date: 'YYYY-MM-DD', // The date of the activity (e.g., '2023-07-25')
count: 2, // The activity level for the day (should be a non-negative integer)
}- Svelte 3 - A modern JavaScript framework for building user interfaces.
- Vite - A fast development build tool and server with hot module replacement (HMR) support.
This project is licensed under the MIT License. See the LICENSE file for details.
Special thanks to the Svelte and Vite teams for their amazing tools.
Feel free to contribute, open issues, or provide suggestions to enhance this project. Let's make it even better together! 🌟
🔥 Happy coding! 🔥