Add Filters and Effects: Use classes for blur, brightness, grayscale,… #897
Conversation
… contrast, and other visual effects in filter.md file
|
Thanks for your first pull request! We appreciate your contribution. |
Summary of ChangesHello @Talasudeepk, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request enhances the project's documentation by adding a dedicated page, Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
Here's the code health analysis summary for commits Analysis Summary
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new page to demonstrate Tailwind CSS image filters and updates the configuration to support it. The changes are a good addition, but there are a few critical issues that need to be addressed. The new filter.md file has its Jekyll front matter incorrectly placed, which will cause rendering issues. Additionally, several <img> tags are missing alt attributes, which is an accessibility concern. In tailwind.config.js, the newly added plugins are not declared as dependencies in package.json, which will break the build in a clean environment. I've provided detailed comments and suggestions to resolve these issues.
| ## Image Filters Demo | ||
|
|
||
| ### Blur | ||
| <img src="/images/sample.jpg" class="blur-sm" /> | ||
|
|
||
| ### Brightness | ||
| <img src="/images/sample.jpg" class="brightness-75" /> | ||
|
|
||
| ### Grayscale | ||
| <img src="/images/sample.jpg" class="grayscale" /> | ||
|
|
||
| ### Contrast | ||
| <img src="/images/sample.jpg" class="contrast-150" /> | ||
|
|
||
| ### Multiple Effects | ||
| <img src="/images/sample.jpg" class="grayscale blur-sm brightness-125" /> | ||
|
|
||
| --- | ||
| layout: default | ||
| title: Image Filters | ||
| --- |
There was a problem hiding this comment.
This file has a couple of issues that should be addressed:
- Jekyll Front Matter Placement (Critical): The front matter block (lines 18-21) must be at the very beginning of the file for Jekyll to process it correctly. Any content before it will be rendered outside the specified layout.
- Image Accessibility (High): The
<img>tags on lines 4, 7, 10, 13, and 16 are missingaltattributes. This is important for accessibility, as it provides alternative text for screen readers and is displayed if an image fails to load.
The suggested code below moves the front matter to the top and adds descriptive alt attributes to the images.
---
layout: default
title: Image Filters
---
## Image Filters Demo
### Blur
<img src="/images/sample.jpg" class="blur-sm" alt="A sample image with a blur filter applied." />
### Brightness
<img src="/images/sample.jpg" class="brightness-75" alt="A sample image with a brightness filter applied." />
### Grayscale
<img src="/images/sample.jpg" class="grayscale" alt="A sample image with a grayscale filter applied." />
### Contrast
<img src="/images/sample.jpg" class="contrast-150" alt="A sample image with a contrast filter applied." />
### Multiple Effects
<img src="/images/sample.jpg" class="grayscale blur-sm brightness-125" alt="A sample image with multiple filters applied." />
---| require('@tailwindcss/typography'), | ||
| require('tailwindcss-filters'), |
There was a problem hiding this comment.
There are a couple of issues here:
- Missing Dependencies (Critical): The new plugins (
@tailwindcss/typographyandtailwindcss-filters) are used here but are not declared inpackage.json. This will cause the build to fail in a clean environment. Please add them to yourdevDependenciesby runningnpm install --save-dev @tailwindcss/typography tailwindcss-filters. - Trailing Whitespace (Medium): There is a trailing space on line 6 which should be removed for code cleanliness.
| require('@tailwindcss/typography'), | |
| require('tailwindcss-filters'), | |
| require('@tailwindcss/typography'), | |
| require('tailwindcss-filters'), |
|
It doesn't look like a real contribution. If you want it, you have to improve it. The best. |
|
Then what i will improve please suggest me so that i will make changes |
3 participants
… contrast, and other visual effects in filter.md file
Pull Request
PR Checklist
pre-commit run --all-fileslocally.PR Type
Current behavior
Currently, the project does not include examples demonstrating Tailwind CSS filter and visual effect utilities such as blur, brightness, grayscale, contrast, or combined effects.
This makes it difficult for contributors or users to understand how to apply these utilities within the site.
Fixes: #839
Part of: #821
New behavior
This PR adds a new Markdown page filter.md that showcases practical examples of Tailwind CSS filter and effect classes.
The page includes demonstrations of:
Blur (blur-sm)
Brightness (brightness-75)
Grayscale (grayscale)
Contrast (contrast-150)
Multiple effects combined (e.g., grayscale blur-sm brightness-125)
Screenshots (if applicable)
Additional context
The filter examples are implemented using HTML inside Markdown, which is fully supported by Jekyll.
No changes were made to layouts, core styles, or assets.
This PR adds only documentation/demonstration content and does not impact existing pages.